HTML5语义化结构标签

结构元素

header:表示页面中一个内容区块或整个页面的标题。

HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。其基本语法格式如下：

<header>
    <h1>网页主题</h1>
    ...
</header>

section：页面中的一个内容区块，比如章节、页眉、页脚或页面其他部分，可以和h1、h2...等元素结合起来使用，表示文档结构。

section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时需要注意一下3点：

• 不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或者通过脚本定义行为时，推荐使用div。
• 如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
• 没有标题的内容区块不要使用section元素定义。

article:表示页面中一块与上下文不相关的独立内容，比如一篇文章。

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或者用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。

aside：表示<article>标签除内容之外的、与<article>标签内容相关的辅助信息可用作文章的侧栏。

aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别与主要内容的部分。

aside元素的用法主要分为两种：

• 被包含在article元素内作为主要内容的附属信息。
• 在article元素之外使用，作为页面或站点全局的附属信息部分。

nav：表示页面中导航链接部分。

nav元素用于定义导航链接，是HTML5新增的元素，该元素可以具有导航性质的链接归纳在一区域中，使页面元素的语义给家准确，主要用于传统导航条、侧边栏导航、页内导航、翻页导航。代码如下：

<nav>
    <ul>
        <li><a href="#">首页</li>
        <li><a href="#">公司概况</li>
        <li><a href="#">产品展示</li>
        <li><a href="#">联系我们</li>
    </ul>
</nav>

footer:表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者的联系信息。

footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5出现之前，一般使用<div id="footer"></div>标记来定义页面底部，而通过HTML5的footer元素可以轻松实现。

分组元素

hgroup:表示对整个页面或页面中的一个内容区块的标题进行组合。

hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组通常它与h1~h6元素组合使用通常，将hgroup元素放在header元素中。

在使用hgroup元素时要注意以下几点：

• 如果只有一个标题元素不建议使用hgroup元素。
• 当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题元素。
• 当一个标题包含副标题、secntion或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。

figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

figuer元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个独立的单元。figure元素发内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。

figcaption:定义<figure>标签的标题。

figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。

页面交互元素

1.details和summary元素

details元素用于描述文档或者某个部分的细节。suammary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或者隐藏details中的其他内容。

2.progress元素

progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。

progress元素常用属性值：

• value：以经完成的工作量。
• max：总共有多少工作量。

3.meter元素

meter元素用于表示指定范围的数值。例如，显示硬盘容量或者对某个候选者的投票人数占投票数总人数的比例等，都可以使用meter元素。

meter元素的常用属性如下：

• high：定义度量的值位于哪个点被界定为高的值。
• low：定义度量的值位于哪个点被界定为低的值。
• max：定义最大值，默认值为1。
• min：定义最小值，默认值为0。
• optimum：定义什么样的度量值最佳。如果高于high属性，则意味着值越高越好。如果低于low属性的值，则意味着值越低越好。
• value：定义度量的值。

文本层次语义元素

1.time元素

time元素用于定义时间或日期，可以代表24小时中的某一时间。

time元素有两个属性：

• datetime：用于定义相应时间或日期。取值为具体时间或具体日期，不定义该属性时，由元素的内容给定日期/时间。
• pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”.

2.mark元素

mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。

3.cite元素

cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

全局属性

1.draggable属性

draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false,当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。

2.hidden属性

在HTML5中，大多数元素都支持hidden属性，该属性有两个属性值:true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容是通过浏览器创建的，页面装载后允许使用Javascript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。

3.spellcheck属性

spellcheck属性主要针对于input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true(默认值)和false，值为true时检测输入框中的值，反之不检测。

4.contenteditable属性

contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。该属性有两个值，如果为true表示可编辑，则false表示不可编辑。