HTML語義化
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
為什么語義化
- 為了在沒有CSS的情況下赂韵，頁面也能呈現出很好地內容結構。
- 用戶體驗：例如title酱鸭、alt用于解釋名詞或解釋圖片信息焙矛、label標簽的活用。
- 有利于SEO：和搜索引擎建立良好溝通蛋勺，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重瓦灶。
- 方便其他設備解析（如屏幕閱讀器、盲人閱讀器抱完、移動設備）以意義的方式來渲染網頁
- 便于團隊開發(fā)和維護贼陶。
在不該用
div和span的時候，少用巧娱。div和span的作用是區(qū)域的劃分碉怔，在使用div和span時加上class。html行內和塊級是由css決定的禁添，html標簽并不管這些撮胧。html標簽有各自的語義。寫代碼時不應該想這個元素是行內元素還是塊級元素老翘，應該想這個元素表示的語義趴樱。
空標簽
沒有閉合標簽的稱為空標簽。下列不懂的標簽可以搜索MDN酪捡。例：
command MDN
* <area>
* <base>
* <br>
* <col>
* <colgroup>
* <command>
* <embed>
* <hr>
* <img>
* <input>
* <keygen>
* <link>
* <meta>
* <param>
* <source>
* <track>
* <wbr>
可替換標簽
含義：指標簽會被替代叁征，例如img標簽會被下載的圖片替代。
典型的可替換元素有<img>逛薇、<object>捺疼、<video>和 表單元素，如<textarea>永罚、<input>啤呼。 某些元素只在一些特殊情況下表現為可替換元素，例如<audio>和<canvas>`呢袱。
head標簽內可存在的標簽
<meta charset="utf-8">
<title>Page Title</title>
<base > // 指定用于一個文檔中包含的所有相對URL的基本URL官扣。一份中只能有一個<base>元素。
<link rel="stylesheet" href="styles.css">
<style>
/* ... */
</style>
<script src="script.js"></script>
<script>
// function(s) go here
</script>
<noscript>
<!-- No JS alternative --> //如果用戶瀏覽器不支持 script羞福，則會顯示 noscript 中的內容
</noscript>
一些標簽
1. iframe標簽
iframe標簽就是在當前頁面嵌套其他的HTML頁面惕蹄。iframe有一個name屬性。
a 標簽的 target 可以通過 name 指向這個 iframe
<iframe src="#" frameborder="0" name="aaa"></iframe> //frameborder清除默認的邊框
<a target="aaa">nihao</a> //百度頁面將在iframe標簽中打開
2. a標簽
a標簽的target屬性。有四個值卖陵，
_blank_self_parent_top遭顶。這四個值結合iframe標簽理解。
// index.html
<body>
<iframe src="./index2.html"></iframe>
<div>
<p>123</p>
</div>
<body>
//index2.html
<body>
<iframe src="./index3.html"></iframe>
</body>
//index3.html
<body>
nihao
<a target="_blank">_blank nihao</a> //新開頁面
<a target="_self">_self nihao</a> // 在當前頁打開,即index3.html頁面打開
<a target="_parent">_parent nihao</a> //父窗口打開泪蔫，即index2.html頁面打開
<a target="_top">_top nihao</a> //在祖先窗口打開棒旗，即index.html頁面打開
</body>
a標簽的
download屬性，此屬性指示瀏覽器下載URL而不是導航到它撩荣，因此將提示用戶將其保存為本地文件铣揉。此屬性僅適用于同源 URLs
還有一種方式可以使a標簽執(zhí)行下載而不是導航。就是HTTP響應的content-type:application/octet-stream
a標簽的
href屬性餐曹。
<a >nihao</a> // 將使用本html文件的協議老速。點擊之后，地址欄file://qq.com/
<a href="javascript:;">nihao</a> // 偽協議凸主，點擊將執(zhí)行后面的JavaScript代碼。設置一個點擊之后什么也不做的a標簽
<a href="javascript:alert('1');">nihao</a> //執(zhí)行JavaScript代碼
<a href="">nihao</a> //點擊之后還是會刷新本頁面
<a href="#">nihao</a> // 錨點额湘，點擊跳轉到頁面頂部
<a href="卿吐？name=xxx">nihao</a> //點擊后在地址中添加?name=xxx，并作為參數發(fā)起一個get請求
3. form標簽锋华。
form標簽主要用于發(fā)起一個post請求嗡官。form標簽的target屬性和a標簽的一致
<form method="post" action="users"> // action:請求的服務器地址，method：請求方法毯焕，僅支持get/post兩種
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交"> // 點擊發(fā)起一個post請求衍腥，攜帶請求參數，name=用戶輸入&password=用戶輸入纳猫。請求參數的數據格式由請求首部content-type規(guī)定婆咸。
</form>
4. input標簽。
input標簽都給上name值芜辕。請求參數的key即為name,value為用戶輸入內容尚骄。
下方的請求參數?username=df&password=a&loveFruit=apple&choose=yes&group=1&group=2&group=4
<form action="user" method="get" target="_blank"> //此時選擇使用get是方便查看請求參數
<label>用戶名：<input type="text" name="username"></label>
<label>密碼：<input type="password" name="password"></label>
水果:
<label><input type="checkbox" name="loveFruit" value="banana">香蕉</label>
<label><input type="checkbox" name="loveFruit" value="apple">蘋果</label>
單選：
<label><input type="radio" name="choose" value="yes">對</label>
<label><input type="radio" name="choose" value="no">錯</label>
<select name="group" multiple> // multiple屬性可多選，按住ctrl鍵就可以多選侵续。
<option value="">-</option>
<option value="1">第一組</option>
<option value="2">第二組</option>
<option value="3" disabled>第三組</option>
<option value="4" selected>第四組</option>
</select>
<input type="submit" value="提交">
</form>
<input type="button" value="button">和<input type="submit" value="提交">兩個長的一模一樣倔丈，請問兩者有什么區(qū)別。
<form action="user" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button>提交</button> // 也可觸發(fā)提交表單
<button type="button">提交</button>
<input type="submit" value="提交"> // 點擊可觸發(fā)提交表單
<input type="button" value="button"> // 點擊不可觸發(fā)提交表單
</form>
input標簽和label標簽創(chuàng)建關聯状蜗。
//一般這樣寫
<label for="username">用戶名：</label> // 點用戶名就可以使input標簽聚焦需五。
<input type="text" name="username" id="username">
//另一種寫法 用label包住input標簽
<label>用戶名：<input type="text" name="username"></label>
5. table標簽
<table border="1" style="border-collapse: collapse"> //border-collapse使border沒有空隙
<caption>成績單</caption>
<colgroup>
<col width="100">
<col width="200">
<col bgcolor="pink" width="300">
<col width="400">
</colgroup>
<thead>
<tr>
<th>科目</th>
<th>班級</th>
<th>姓名</th>
<th>分數</th>
</tr>
</thead>
<tbody>
<tr>
<th>數學</th>
<td>1</td>
<td>小明</td>
<td>60</td>
</tr>
<tr>
<th>英語</th>
<td>1</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<th>物理</th>
<td>1</td>
<td>小明</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>總分</th>
<td></td>
<td></td>
<td>180</td>
</tr>
</tfoot>
</table>
6. dl、dt轧坎、dd標簽
是一個包含術語定義以及描述的列表宏邮，通常用于展示詞匯表或者元數據 (鍵-值對列表)。例如下列的鍵值對∈癫可以多個術語边琉，一個描述的組合〖侨埃或者一個術語变姨，多個描述
姓名:某某
年齡：1000
<dl>
<dt>姓名：</dt> // 術語定義
<dd>某某</dd> // 描述
<dt>年齡：</dt>// 術語
<dd>1000</dd> // 描述
</dl>
7. strong標簽
Strong 元素 (<strong>)表示文本十分重要，一般用粗體顯示厌丑。
理解b標簽和strong標簽的差異：
必須要理解使用strong呈現出的表現形式不同于單純的加粗定欧。
8. em標簽
em元素標記出需要用戶著重閱讀的內容， <em> 元素是可以嵌套的怒竿，嵌套層次越深砍鸠，則其包含的內容被認定為越需要著重閱讀。
i標簽和em標簽耕驰，i標簽只是單純的斜體爷辱，而em有著重的語義。
<strong>和<em>朦肘。em 表示內容的著重點饭弓，強調文本。strong元素表示某些重要性的文本媒抠，表示內容的重要性弟断。
