article
對于
article標簽來說，無論從結構上還是內容上來說，article本身就是獨立的、完整的。有個最簡單的判斷方法是看這段內容脫離了所在的語境，是否還是完整的、獨立的，如果是，則應該用article標簽。
aside(兩種用法)
被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、名次解釋。
示例代碼：
<article>
<h1>…</h1>
<p>…</p>
<aside>…</aside>
</article>
在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以使友情鏈接，博客中的其它文章列表、廣告單、分享至···
示例代碼：
<aside>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
</aside>
datalist
datalist是提供一個事先定義好的列表，通過id與input關聯(lián)，當在input內輸入時就會有自動完成的功能，用戶將會看見一個下拉列表供其選擇。
示例代碼：
<input list="browser">
<datalist id="browser">
<option value="IE">IE</option>
<option value="Chrome">Chrome</option>
<option value="Safari">Safari</option>
<option value="Opear">Opear</option>
<option value="FirFox">FirFox</option>
</datalist>
要注意的是IE 10和Opera 中，不需要用戶必須輸入一個字符才看到下拉的建議列表，而其他瀏覽器需要用戶至少輸入一個字符才能看到效果。
如以上代碼，在輸入框中輸入
i則會提示IE可選，輸入c則會提示Chrome可選，以此類推。如果在option中一旦指定了value的值，則用戶通過下拉列表選擇后，文本框中顯示的將會是value的值。
此標簽什么時候使用？
要注意的是，使用這種下拉的智能提示框也要注意場合。比如在一些要選擇不是太多的場景下，使用一般的下拉框其實就可以了。而如果在需要用戶在很多數據中去選擇，則可以建議使用
datalist下拉建議提示框，因為可以方便用戶快速檢索去選擇。
datalist的缺點
1）不能使用CSS去隨意控制或改變其下拉建議列表中的項
2）不能控制datalist的位置
- 不能控制每次當用戶輸入多少個字符后，就出現(xiàn)下拉建議列表
4）不能控制大小寫，或當匹配什么樣的字符就出現(xiàn)下拉建議列表
details
datails定義一小塊區(qū)域，可以收起，可以展開
如果想要修改，使用summary
open屬性代表默認展開
示例代碼：
<details>
<summary>點擊展開</summary>
<p>隱藏的內容</p>
</details>
需要默認展開時在
<details>中添加open屬性
figure
<figure>
<img src="" alt="">
<figcaption>圖片標題區(qū)域</figcaption>
</figure>
一塊區(qū)域中，上部分為圖片，下部分為文字介紹這個圖片
section
使用時和div一樣，可以在標簽中寫入P標簽，h標簽
與
div的無語義相對，簡單地說section就是帶有語義的div了，section表示一段專題性的內容，一般會帶有標題。section應用的典型場景有文章的章節(jié)、標簽對話框中的標簽頁、或者論文中有編號的部分。section不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時，應該使用div。一般來說，當元素內容明確地出現(xiàn)在文檔大綱中時，section就是適用的。
對于
div和section,article以及其他標簽的區(qū)分比較簡單。對于section和article的區(qū)分就是看看這段內容脫離了整體是不是還能作為一個完整的、獨立的內容而存在，這里面的重點又在完整身上。因為說起來section包含的內容也能算作獨立的一塊，但是它只能算是組成整體的一部分，article才是一個完整的整體。
header
定義于一塊區(qū)域的頭部，可以是整個網頁的頭部，也可以是一個網頁中一塊區(qū)域的頭部
footer
定義于一塊區(qū)域的頁腳（尾部），可以是整個網頁的頁腳，也可以是一個網頁中一塊區(qū)域的頁腳
main
定義于一塊區(qū)域的主體部分，可以是整個網頁的主體，也可以是一個網頁中一塊區(qū)域的主體
nav
定義于一塊區(qū)域的導航欄，可以是整個網頁的頭部，也可以是一個網頁中一塊區(qū)域的頭部,
div在以前文章教程中介紹過一般導航條使用ul,li標簽布局，使用一般布局中nav標簽與ul,li標簽配合使用。
<div id=”nav”>
<ul>
<li>首頁</li>
<li>欄目名稱</li>
<li>聯(lián)系我們</li>
</ul>
</div>
mark
定義帶有標記的文本，會將標簽中的內容以特殊的樣式（背景顏色為黃色）來表示出來，方便自己來尋找一些重要的信息
time
代表著時間的意思
embed
引入外部插件
屬性：
height值pixels(設置嵌入內容的高度)
src值url(嵌入內容的URL)
type值type(定義嵌入內容的類型)
width值pixels(設置嵌入內容的寬度)
progress
<progress value="10" max="100">50%</progress>
progress的value代表當前進度條移動一步的值，max代表最大的值，50%就是代表如果過瀏覽器不支持這個標簽就會顯示progress中的中文字
output
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
output代表著計算結果的顯示，屬性有for，form，name
總結
分類：（行屬性標簽、快屬性標簽、內聯(lián)塊標簽）
行屬性標簽(span)：mark/time/output/
塊屬性標簽(div):nav/main/header/foote/section/figure/details/aside/article
內聯(lián)塊標簽(img):progress/display: inline/block/inline-block/none;
行標簽中有許多語義化標簽，語義化標簽就是不是給自己看的，而是給瀏覽器看的，別人一看就知道你這個是什么東西，就像figure別人一看就知道這個是代表圖片定義的內容
