前端開發【第1篇：HTML】
HTML初識
1、什麼是HTML
HTML是英文Hyper Text Mark-up Language(超文字標記語言)的縮寫，他是一種製作全球資訊網頁面標準語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
- 你可能早已經注意到了這點，所有的 HTML 元素本質上是小的矩形塊，代表著某一小塊區域。
- 瀏覽器負責將標籤翻譯成使用者“看得懂”的格式，呈現給使用者
2、網頁的組成
我們平時看到的網頁一般由3個部分組成：
- HTML（Hypertext Markup Language）
- CSS（Cascade Style Sheets）
- JavaScript
上面3個分別可以理解為：檢視、表現、行為(HTML可以理解為一個動畫小人，CSS為它穿上美麗的衣服，JavaScript讓它變的可以跳舞）
HTML頁面
head
1、頁面編碼
<meta charset="UTF-8">
2、設定重新整理時間和頁面跳轉
<!-- 設定頁面每5秒重新整理一次 -->
<meta http-equiv="refresh" content="5">
<!-- 設定進入到當前頁面1秒後,跳轉到指定的Url-->
<meta http-equiv
3、關鍵字
關鍵字的作用：一般是讓爬蟲之類的收錄程式，當他們在爬你的網站的時候，如果你有關鍵字，那麼他們會優先把關鍵字收錄到他們的記錄中，比如搜狗：如果他們收錄之後，他們搜尋你的關鍵字的時候，就能找到咱們的網站。
<!-- 關鍵字設定 --> <meta name="keywords" content="部落格,HTML部落格">
4、描述
<!-- 描述網站或頁面 --> <metaname="description" content="描述性內容:這是一個測試頁面">
5、title
<!-- 網頁頭部標題 --> <title>Title</title>
6、style
一般建議css放在head中不管是引用還是直接在當前頁面定義css,因為頁面載入自上而下
<!-- 引入CSS樣式檔案 --> <link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <!-- 在當前頁面寫入CSS樣式 --> <style> .class-shuaige{ color:red; } </style>
7、JavaScript
一般建議放到body裡面,當然這也不是絕對的,根據實際需要來吧
<!-- 引入外部JavaScript檔案 --> <script src="/statics/assets/scripts/flatpickr.min.js"></script> <!-- 在當前頁面定義JavaScript --> <script type="application/javascript"> console.log("Hello World") </script>
body
body是內容的存放地
HTML常用標籤
標籤分類
HTML中的標籤分為兩類：塊級標籤和內聯標籤
塊級標籤：
- 每個塊級元素都從新的一行開始，並且其後的元素也另起一行
- 元素的高度、寬度、行高以及頂和底邊距都可設定
- 元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度
內聯標籤：根據實際使用的大小展示
- 和其他元素都在一行上
- 元素的高度、寬度、行高及頂部和底部邊距不可設定；
- 元素的寬度就是它包含的文字或圖片的寬度，不可改變。
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過程式碼display:inline將元素設定為內聯元素。
如下程式碼就是將塊狀元素div轉換為內聯元素，從頁使用div元素具有內聯元素特點。
例子：
<body>
<!--在這裡寫內容,且這是html中的註釋-->
<div style="color:white; " >這是塊級標籤</div>
<!-- 定義內聯標籤,這裡定義內聯標籤的高度屬性樣式無效 -->
<span style="height: 100px;color:blueviolet">測試資訊</span>
</body>
常用標籤
1、<p></p>標籤和<br/>標籤
每一個P標籤是獨立的一行它是塊級標籤,<br/>的作用是換行
<p>每一個P標籤包含的內容是獨立的一行</p>
<p>每一個P標籤包含的內容是獨立的一行</p>
<p>每一個P標籤包含的內容<br>是獨立的一行</p>
2、<a></a>標籤
它有兩個作用：跳轉和錨點[跳轉或者設定錨點]
<div>
<!-- a標籤跳轉,在當前頁開啟a標籤內的Url -->
<a href="http://www.cnblogs.com/luotianshuai/">帥哥部落格</a>
<!-- a標籤跳轉,在新的頁開啟a標籤內的Url -->
<a target="_blank" href="http://www.cnblogs.com/luotianshuai/">帥哥部落格</a>
</div>
<!-- 跳轉至錨點標籤 -->
<a href="#anchor">destination</a>
<div style="height: 1000px"> 為了達到跳轉效果在跳轉點和錨點之間加了1個1000px的塊級標籤</div>
<!-- 定義錨點標籤/這個錨點也可以是id="anchor"-->
<a name="anchor">destination is here!!!</a>
3、H標籤
即標題標籤,程式碼如下
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
4、select標籤
select標籤:title屬性和預設選中
<!--
這裡預設是廣州因為selected="selected" 這裡設定了預設的！
select標籤中title屬性的作用就是當滑鼠移動到select標籤上後的提示
並且一般我們的select/input/file/textarea 等標籤都會在使用的時候放到form標籤中
-->
<select title="地名選擇">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">廣州</option>
</select>
select標籤：size屬性-展示幾個元素
<select title="地名選擇" size="2">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="2">廣東</option>
<option value="2">西藏</option>
<option value="3" selected="selected">廣州</option>
</select>
select標籤：multiple屬性-多選
<select title="地名選擇" multiple="multiple">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="2">廣東</option>
<option value="2">西藏</option>
<option value="3" selected="selected">廣州</option>
</select>
select標籤：label屬性-分組
<select title="地名選擇">
<optgroup label="河北省">
<option>石家莊</option>
<option>邯鄲</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遙</option>
</optgroup>
</select>
5、input標籤
input:checkbox標籤-複選框
<input title="單選框" type="checkbox"/>
<input title="單選框" type="checkbox"/>
<input title="單選框" type="checkbox" checked="checked"/>
<!--這裡加一個標識checked="checked，為預設選擇"-->
input:radio標籤-單選框
<input title="單選框" type="radio"/>
<input title="單選框" type="radio"/>
<input title="單選框" type="radio"/>
<hr/>
<!--對於input標籤來說只要，radio的name值相同，那麼他們就會互斥一般用在給使用者幾個選項使用者單選-->
<input title="單選框:gender" type="radio" name="gender"/>
<input title="單選框:gender" type="radio" name="gender"/>
<input title="單選框:gender" type="radio" name="gender"/>
input:text普通文字框 & password 密碼輸入框
<!--標準的輸入框-->
<input title="普通文字框" type="text"/>
<!--密碼的輸入框（輸入的內容是保密的）-->
<input title="密碼輸入框" type="password"/>
input:button 普通按鈕& submit 表單提交按鈕
<!-- 普通的按鈕 -->
<input type="button" value="普通按鈕"/>
<!-- 用來提交表單的按鈕,一般放在form表單裡面 -->
<input type="submit" value="表單提交按鈕"/>
從表現形式上來看他們很像，但是從功能上來區分他們功能不同
textarea多行文字
form表單
<form>
<!--
這裡預設是廣州因為selected="selected" 這裡設定了預設的！
select標籤中title屬性的作用就是當滑鼠移動到select標籤上後的提示
並且一般我們的select/input/file/textarea 等標籤都會在使用的時候放到form標籤中
-->
<p>使用者賬號<input title="使用者賬號" type="text"></p>
<p>使用者密碼<input title="使用者密碼" type="password"></p>
<!-- 普通的按鈕 -->
<input type="button" value="普通按鈕"/>
<!-- 用來提交表單的按鈕,一般放在form表單裡面 -->
<input type="submit" value="表單提交按鈕"/>
</form>
現在我們在點選普通按鈕和表單提交按鈕就能體現出他的不同了
6、lable
有一種情況，看下圖，在不使用label標籤的時候，我們只能點進框體裡去，否則就不能輸入或選擇，這樣使用者體驗不是很好，有麼有更好的方法呢？比如當我們點選標籤文字的時候也可以進入到輸入框或者選擇框？
點選文字進入到輸入框或者選擇框！
正常的標籤是這樣的：
<form>
<h1>Label標籤</h1>
姓名:<input title="姓名" type="text"/>
婚否:<input title="婚否" type="checkbox"/>
</form>
使用lable標籤
<form>
<h1>Label標籤</h1>
<label>姓名:<input title="姓名" type="text"/></label>
<label>婚否:<input title="婚否" type="checkbox"/></label>
</form>
好處：當我們點選姓名或者婚否的時候也可以自動跳入輸入框或者選中選擇框
7、列表
ul列表在前面自動加“點”，程式碼如下：
<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>
ol列表在前面自動加“數字”，程式碼如下：
dl列表自動分組，程式碼如下：
<dl>
<dt>河北省</dt>
<!--dt是標籤，dd是標籤裡的內容-->
<dd>石家莊</dd>
<dd>衡水市</dd>
<dt>山東省</dt>
<!--dt是標籤，dd是標籤裡的內容-->
<dd>濟南市</dd>
<dd>煙臺市</dd>
</dl>
8、表格
標準表格
<table border="1">
<!--border這裡是加上邊框-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--一個tr是1行，一個td是一列，一行裡可能有很多列。-->
<!--如果想加多個行就加多個tr即可-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
合併表格
<table border="1">
<!--border這裡是加上邊框-->
<tr>
<td colspan="3">1</td>
<!--這裡colspan，就告訴html解析的時候佔3個格-->
</tr>
<!--一個tr是1行，一個td是一列，一行裡可能有很多列。-->
<!--如果想加多個行就加多個tr即可-->
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
帶表頭表格
<table border="1">
<thead>
<!--表頭-->
<tr>
<th>表1</th>
<th>表2</th>
<th>表3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
9、fieldset標籤
<fieldset>
<legend>協議</legend>
請仔細閱讀協議內容：
</fieldset>
以上為常用標籤~~