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的位置

3. 不能控制每次当用户输入多少个字符后，就出现下拉建议列表
   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别人一看就知道这个是代表图片定义的内容