前言：
HTML介紹分為3部分，第一部分是HTML簡介及歷史瑟捣，第二部分是HTML元素栅干，第三部分是實戰(zhàn)及學(xué)習(xí)筆記。
以下是第三部分桑李，主要介紹工具的使用窿给，如Vscode, Chrome的使用以及針對部分重要元素進行實戰(zhàn)。
參考emmet
工具使用
推薦使用帶Emmet功能的編輯器禁荒，如Vscode角撞，其能極大地提高前端開發(fā)的效率寥掐。
以下是emmet的實例
Emmet是MIT License開源的plug-ins召耘，其獨立于編輯器污它，盡管很多編輯器都支持，主要用縮寫來高速對HTML,CSS,XML等文件進行編輯衫贬。
簡要介紹下其語法：
- >: Child, 用于nest elements
示例--div>ul>li- +: Sibling, 將元素同級放置
- ^: Climb-up, climb one level up the tree
示例--div+div>p>span+em^^^bq
climb- *: Multiplication
示例:ul>li*5- (): Grouping
示例：(div>dl>(dt+dd)*3)+footer>>p
group- Attribute 操作符
ID和類：
div#header+div.page+div#footer.class1.class2.class3
Attribute
Item numbering: $
ul>li.item$$$*5
item numbering
此外，還可以通過@操作符來改變計數(shù)的方向以及開始的基缴守。
示例: @-*5將從5到1
@
Text: { }可用作添加Text到元素中
示例：a{Click me}等于
<a href="">Click me</a>
注意p>{Click }+a{here}+{ to continue}與p{Click }+a{here}+{ to continue}的區(qū)別屡穗，第一個所有的都會是p的child
*縮寫并不是一個模板語言，他們不必可讀烂斋，但他們需要快速拓展和可移除础废。
*有時不必寫一個很復(fù)雜的縮寫，快和少出錯才是重要的
*文件開頭輸入!或html:5帘瞭，回車或TAB鍵歇僧，將自動生成HTML文檔初始結(jié)構(gòu)
*仿頁面首先觀察可能使用了哪些元素，列表/段落/標(biāo)題/導(dǎo)航/標(biāo)簽等诈悍，分為哪些橫向及縱向區(qū)塊侥钳，這些區(qū)塊是如何組合在一起的
元素
- <dl><dt><dd>可以組成描述列表
其中在dl中可以添加div - <footer>作為離它最近的section或根section的頁腳柄错，主要用來包含作者信息苦酱，copyright,相關(guān)鏈接等
- <button>其通常與form一起使用给猾。可適用的屬性為disabled, form, name, type(submit, reset, button), value(initial value)
- <img>作為可替換元素扯饶，默認(rèn)是inline屬性池颈，其長寬是由圖像原始尺寸決定，若是沒有在img屬性指定其height, width躯砰；另外可通過css設(shè)置其border, border-radius, padding/margin, display(block)等屬性。img可嵌套在a里兰怠，作為圖像鏈接李茫。
<a >
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="Visit the MDN site">
</a>
*自帶寬高的是可替換元素，如img, input, video等
<em>表示語氣上的強烈掖举，<strong>表示內(nèi)容的重要
<div>基本都是要帶class使用的
<a> 以下是對a的屬性進行詳細介紹：
<a href="test.html" download="Test" target="_blank">Test.html</a>
download表示點擊會默認(rèn)下載娜庇，其值為下載文件名。
href包含一個URL名秀，網(wǎng)址#前的即為URL片段，設(shè)置href="#top"或"#"將是頁面跳轉(zhuǎn)到頁面開頭,將href設(shè)置為#, href="javascript:;"或href="javascript:void(0);"可以用來防止點擊頁面刷新继榆，但通常更建議使用button;此外其值還可以是http/https, ftp,文件, tel, mailto等地址以及#id(當(dāng)前頁面另一個section)汁掠。
target指定在哪里顯示鏈接的URL, 可以是一個瀏覽器標(biāo)簽, 窗口或<iframe>里，常見的有_self(當(dāng)前, 是默認(rèn)的行為), _blank(新標(biāo)簽打開), _parent(父級), _top(頂級)<form>
enctype: 若method是POST類型翠忠，其編碼方式是MIME type, 編碼方式的默認(rèn)值為application/x-www-form-urlencoded
method: 若是POST請求的話乞榨，表單數(shù)據(jù)將會包括在form data送到服務(wù)器当娱，若是GET請求的話跨细，表單數(shù)據(jù)將會被附加到動作屬性的URL后，以?作為分割冀惭，僅在表單沒有副作用并且只包含ASCII編碼時使用
*以上的enctype及method均可能被button, input屬性里的formenctype和formmethod覆蓋
name: 其值應(yīng)該Unique
*若form里只有一個button愤诱，其會自動升級為submit
*可以設(shè)置表單onsubmit屬性為false阻止表單進行提交<input>
用于在在表單里創(chuàng)建交互控制，以便從用戶接收數(shù)據(jù)
type屬性：有button, checkbox, color, date, email, file, hidden(不顯示但值會被送到服務(wù)器), image, month, number, password,radio, range, reset, search, submit, tel, text, time, url, week溃槐。
*注意科吭，傳輸用戶名密碼最好使用HTTPS協(xié)議
*checked, 可適用于radio, checkbox屬性。
*placeholder: 提示文本
*input通常與label一起用对人，laber for="input id"
input button submit區(qū)別
<input type="button"> -- 單純的按鈕，常用于連接JavaScript為AJAX應(yīng)用的一部分
<input type="submit"> --變成一個默認(rèn)type為submit的按鈕姻几，顯示的值為其value值
<button type="button">使用于IE瀏覽器兼容蛇捌，表示僅僅只是一個按鈕，不會提交
<button type="submit">
小結(jié)：
建議使用button[type=submit]進行表單提交络拌，而不是input;
input用作輸入控件回溺；
單行文本控件時，回車也會引發(fā)表單提交遗遵。
更多對比
<select>
通常通過id屬性與label一起使用瓮恭，類似input。
每個可選項<option value="">,value不可少屯蹦，即使為空；另外可以加上selected使選項默認(rèn)被選中阔挠。
其他的屬性脑蠕，包括multiple-運行多個選項被選中，還有常見的required, disabled, autofocus等屬性<table>
table中可包含：
<tr> table row-表格中一行
<td>table data-表格中數(shù)據(jù)
<thead> header section of the table - 表格的開頭
<tfoot> 表格的foot
<th> row/column headings
- <th> 與 <thead> 區(qū)別:
thead是塊級元素谴仙，一般只出現(xiàn)一次，th可以出現(xiàn)多次且可出現(xiàn)在thead/tbody/tfoot里晃跺。
此外還可以設(shè)置列的格式，通過在<table>標(biāo)簽后加入<colgroup span="數(shù)字"></colgroup>
或者如下所示：
<table>
<colgroup>
<col style="background-color: #0f0">
<col span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
