目錄概覽：
- HTML文檔結(jié)構(gòu)
- head元素
- 字符實體
- 路徑指南
- <a>元素
- <img>元素
- table元素
- 表單元素
- 代碼管理
一滴须、HTML文檔結(jié)構(gòu)
1.<!DOCTYPE html>聲明文檔類型舶胀。
2.<html></html> 它包裹了整個完整的頁面咕别，是一個根元素岸梨。
3.<head></head> 它包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內(nèi)容抒蚜。
4.<body></body> 它包含你訪問頁面時所有顯示在頁面上的內(nèi)容涮总。
參考資料：
二、head元素
它里面的子元素主要分為三類掌栅，描述網(wǎng)頁基本信息的秩仆、指向渲染網(wǎng)頁所需要的其他文件鏈接及各大廠商根據(jù)自己需要定制的。
參考資料：
三猾封、字符實體
參考資料：
四澄耍、路徑指南
本地路徑方面，如在磁盤里面訪問晌缘，Windows 約定使用反斜線 () 作為路徑中的分隔符齐莲，如"E:\娛樂\音樂\藍(lán)蓮花.mp3"；而UNIX 系統(tǒng)使用正斜線 (/)磷箕，如“/users/marvin/music/藍(lán)蓮花.mp3”选酗。
五、<a>元素
1.頁面間的跳轉(zhuǎn)
當(dāng)其用于頁面之間的跳轉(zhuǎn)時主要有三個常用屬性岳枷，分別為：
- title：指鏈接標(biāo)題星掰，一般與內(nèi)容文字一樣。鼠標(biāo)滑過時暫停一會嫩舟，會有個title提示效果氢烘。
- href：指定鏈接的目標(biāo)地址（如果暫時不能確定目標(biāo)地址可先用#表示）。
- target：定義打開窗口方式家厌，默認(rèn)是當(dāng)前窗口打開播玖，有四種取值，分別為：
- _self：當(dāng)前窗口打開饭于，此值為默認(rèn)值蜀踏。
- _blank：新窗口打開（該值是使用最多的）。
- _parent：表示在當(dāng)前框架的父框架打開（一般用于iframe中掰吕，先不用了解果覆，以后再說）。
- _top：表示頂層框架打開（一般用于iframe中殖熟，先不用了解局待，以后再說）。
2.頁面內(nèi)的跳轉(zhuǎn)
當(dāng)<a>元素用于頁面內(nèi)的錨點跳轉(zhuǎn)時菱属，應(yīng)該先為該頁面設(shè)置一些錨點钳榨，而定義錨點有兩種辦法：
通過<a>元素的name屬性來定義，如：<a name="anchor-name">name屬性的值就是錨點的名稱</a>
通過其他元素的id屬性來定義纽门，如：<div id="anchor-name">id屬性值可以作為錨點的名稱</div>
設(shè)置好了錨點之外薛耻，就可以通過<a>元素鏈接到該錨點位置，其href取值為“# + 錨點名稱”赏陵，示例如下:
<a href="#anchor1">錨點鏈接一</a>
<a href="#anchor2">錨點鏈接二</a>
<div>
<div>我這里有很多內(nèi)容...</div>
<!-- 使用a的name屬性定義錨點 -->
<a name="anchor1">點擊錨點鏈接一饼齿，會跳到我這里</a>
<div>我這里有很多內(nèi)容...</div>
<!-- 使用元素的id屬性定義錨點 -->
<p id="anchor2">點擊錨點鏈接二饲漾，會跳轉(zhuǎn)到我這里</p>
</div>
3.電子郵件
當(dāng)其用于郵件鏈接時，href屬性的值為“mailto: + 郵件地址”缕溉，示例如下：
<a href="mailto:xuyc_brother@foxmail.com”>發(fā)送郵件給我</a>
六考传、<img>元素
首先<img>元素沒有閉合標(biāo)簽，這點一定要記得倒淫。
除此之外，<img>元素還有幾個重要屬性如下：
- src：必備屬性败玉，表示圖片地址
- alt：必備屬性敌土，如果圖片加載失敗將會顯示該內(nèi)容
- width：可選屬性，用于設(shè)置圖片的寬度运翼，如width="400"
- height：可選屬性返干，跟width類似，用于設(shè)置圖片的高度血淌，如height="300"
七矩欠、<table>元素
例子:
<table>
<caption>五險一金繳納</caption> <!-- table 標(biāo)題，table里面第一個元素 -->
<thead> <!-- 使用 thead 包裹表頭行 -->
<tr>
<th>繳納項目</th>
<th>個人繳納</th>
<th>單位繳納</th>
</tr>
</thead>
<tbody> <!-- 使用 tbody 包裹內(nèi)容 -->
<tr>
<td>養(yǎng)老</td>
<td>8%</td>
<td>14%</td>
</tr>
<tr>
<td>醫(yī)療</td>
<td>2%</td>
<td>6.2%</td>
</tr>
<tr>
<td>失業(yè)</td>
<td>1%</td>
<td>2%</td>
</tr>
<tr>
<td>工傷</td>
<td>0%</td>
<td>0.4%</td>
</tr>
<tr>
<td>生育</td>
<td>0%</td>
<td>0.5%</td>
</tr>
<tr>
<td>公積金</td>
<td>14%</td>
<td>14%</td>
</tr>
</tbody>
</table>
八悠夯、表單元素
<form>元素主要有兩個屬性：
- action：表示表單數(shù)據(jù)所提交到的處理地址（如果不知道處理地址癌淮，可先用#表示）
- method：表示提交內(nèi)容的方式，默認(rèn)取值為 get沦补，可以設(shè)置為 post
表單元素一般有以下幾種通用屬性：
- name：表示字段名稱
- value：表示字段值（最后提交的表單數(shù)據(jù)就是所有的字段值）
- disabled：表示字段是否禁用乳蓄，該屬性可以不用設(shè)置值，加上該屬性即表示禁用
- readonly：表示字段是否只讀夕膀，該屬性可以不用設(shè)置值虚倒，加上該屬性即表示只讀
<input>元素跟<img>元素一樣，不需要閉合標(biāo)簽产舞。除了上面說到的通用屬性外魂奥，其常見屬性如下：
- type：必備屬性，常見取值如下：
- text：文本輸入框
- password：密碼輸入框
- search：搜索框
- number：數(shù)字輸入框
- radio：單選按鈕
- checkbox：復(fù)選框
- hidden：隱藏域（頁面不可見易猫，用來保存數(shù)據(jù)等）
- file： 上傳文件
- button：普通按鈕
- submit：提交按鈕
- reset：重置按鈕
- placeholder：如為輸入框時耻煤，可設(shè)置該屬性，在輸入框中灰色顯示提示信息
簡單示例如下:
<!-- 文本輸入框 -->
<input type="text" name="username">
<!-- 文本輸入框提示信息 -->
<input type="text" name="username" placeholder="用戶名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 數(shù)字輸入框 -->
<input type="number" name="age" placeholder="只能輸入數(shù)字">
<!-- 密碼輸入框 -->
<input type="password" name="pwd" placeholder="密碼">
<!-- 單選框 -->
<input type="radio" name="sex" value="man">男
<!-- 復(fù)選框 -->
<input type="checkbox" name="hobby" value="music">音樂
<!-- 隱藏域 -->
<input type="hidden" name="other-data" value="用戶不可見數(shù)據(jù)">
<!-- 上傳文件 -->
<input type="file" name="file">
<!-- 普通按鈕 -->
<input type="button" name="button" value="普通按鈕">
<!-- 提交按鈕 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按鈕 -->
<input type="reset" name="reset">
<textarea>元素可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸准颓，不過等我們學(xué)了 CSS 之后违霞，更好的辦法是使用 CSS 的 height 和 width 屬性來控制其尺寸。
簡單示例如下：
<textarea rows="5" cols="30" placeholder="請輸入評論"></textarea>
<select>元素用于創(chuàng)建選項菜單瞬场，默認(rèn)只能選擇一個值买鸽，可通過設(shè)置屬性multiple="multiple"來實現(xiàn)多選（很少很少使用多選）。
其選項為<option>元素贯被，常用有兩個屬性：
- value：表示選中該選項的值眼五。
- selected： 表示默認(rèn)選中妆艘。
簡單示例如下：
<!-- 單選且有默認(rèn)選中值 -->
<select name="tag">
<option value="html" selected>HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<!-- 多選 -->
<select name="tags" multiple="multiple">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<button>元素用來定義按鈕，跟 input 定義的按鈕不同看幼，這個是有閉合標(biāo)簽的批旺。
同樣也可以通過設(shè)置 type 屬性來實現(xiàn)提交按鈕和重置按鈕，不過不建議這么做诵姜。
<label>元素用于關(guān)聯(lián)表單元素的標(biāo)題汽煮，可直接包裹表單元素，也可以通過設(shè)置其 for 屬性關(guān)聯(lián)到表單元素的 id 屬性棚唆，這樣點擊 label 標(biāo)題上關(guān)聯(lián)的表單元素就可以自動獲取焦點暇赤，提升用戶體驗。
簡單示例如下：
<!-- 包裹表單元素 -->
<label>用戶名：<input type="text"></label>
<!-- 使用for屬性關(guān)聯(lián)表單元素的id屬性 -->
<label for="username">用戶名：</label><input type="text" id="username">
