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关联，当在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的位置
- 不能控制每次当用户输入多少个字符后，就出现下拉建议列表
4）不能控制大小写，或当匹配什么样的字符就出现下拉建议列表
details
datails定义一小块区域，可以收起，可以展开
如果想要修改，使用summary
open属性代表默认展开
示例代码：
<details>
<summary>点击展开</summary>
<p>隐藏的内容</p>
</details>
需要默认展开时在
<details>中添加open属性
figure
<figure>
<img src="" alt="">
<figcaption>图片标题区域</figcaption>
</figure>
一块区域中，上部分为图片，下部分为文字介绍这个图片
section
使用时和div一样，可以在标签中写入P标签，h标签
与
div的无语义相对，简单地说section就是带有语义的div了，section表示一段专题性的内容，一般会带有标题。section应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。section不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用div。一般来说，当元素内容明确地出现在文档大纲中时，section就是适用的。
对于
div和section,article以及其他标签的区分比较简单。对于section和article的区分就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为说起来section包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article才是一个完整的整体。
header
定义于一块区域的头部，可以是整个网页的头部，也可以是一个网页中一块区域的头部
footer
定义于一块区域的页脚（尾部），可以是整个网页的页脚，也可以是一个网页中一块区域的页脚
main
定义于一块区域的主体部分，可以是整个网页的主体，也可以是一个网页中一块区域的主体
nav
定义于一块区域的导航栏，可以是整个网页的头部，也可以是一个网页中一块区域的头部,
div在以前文章教程中介绍过一般导航条使用ul,li标签布局，使用一般布局中nav标签与ul,li标签配合使用。
<div id=”nav”>
<ul>
<li>首页</li>
<li>栏目名称</li>
<li>联系我们</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
总结
分类：（行属性标签、快属性标签、内联块标签）
行属性标签(span)：mark/time/output/
块属性标签(div):nav/main/header/foote/section/figure/details/aside/article
内联块标签(img):progress/display: inline/block/inline-block/none;
行标签中有许多语义化标签，语义化标签就是不是给自己看的，而是给浏览器看的，别人一看就知道你这个是什么东西，就像figure别人一看就知道这个是代表图片定义的内容
