HTML5新增了一些标签，但它们并不像我们想象的那样陌生，它们只是更加符合我们的思维方式，更人性化。按照以往的布局方式，我们要划分页面结构时都是使用的div，例如<div class="header"></div>、<div id="footer"></div>等。HTML5直接用header、footer标签来代替div，这类标签更加语义化，便于爬虫读取（SEO）。下面详细介绍HTML5新增的标签以及它们的用法。

一、新的标签

1.结构性标签

结构性标签（construct tag）主要负责Web的上下文结构的定义，确保HTML文档的完整性，使网页的文档结构更加明确。这类标签包括以下几个：
（1）sction 标签用于表达文档的一部分或一章，或者一意内的一节。在Web页面应用中。
该标签也可以用于区域的章节表述。它用米衣现普通的文档内容或应用区块，通常由内容及其标题组成。但section标签并非一个普通的容器元素，它表示一段专题性的内容，一最会带有标题。代码示例：

<section>
<h1>新章节的标题</h1>
<article>
<h2>第一节的标题</h2>
<p>第一节的内容....</p>
</article>
</section>

（2）hgroup标签对网页或区段（section）的标题进行组合。
代码示例：

<hgroup>
<h1>第二章日TL规范</h1>
<h2>第一节新的结构标签和属性</m2>
<h3>新的标签</h3>
<h4>结构性标签</h4>
</hgroup>

（3）header标签相当于页面主体上的头部（页眉），注意区别于head标签。这里可以给初学者提供一个判断区别的小技巧：head标签中的内容往往是不可见的，而header标签往往在一对body标签之中。
代码示例：

<header>
<h1>网页的标题</h1>
<nav>上导航部分</nav>
</header>

（4）footer标签相当于页面的底部（页脚）。通常，人们会在这里标出网站的一些相关信息，例如关于我们、法律申明、邮件信息、管理入口等。
代码示例：

<footer>
scopy；网页的版权声明。
</footer>

（5）nav标签是专门用于菜单导航、链接导航的标签，是navigator的缩写。
代码示例：

<nav>
<u1>
<li><a href="#">首页</a></1i>
<li><a href="#">电视</a></1i>
<1i><a href="#">平板</a></li>
<li><a href="#">路由器</a></1i>
<li><a href="#">笔记本</a></1i>
</ul>
</nav>

（6）article标签用于表示一篇文章的主体内容，一般文字集中显示的区域。
代码示例：

<article>
<header>
<h1>文章的标题</h1>
<time datetime="2015-08-08">2015.08.08</time>
</header>
<p>文章的内容</p>
</article>

2.块级性标签

块级性标签（block tag）主要完成Web页面区域的划分，
确保内容的有效分隔，这类标签包括以下几个。
（1）aside 标签是用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看，就是侧边栏，可以在左边，也可以在右边。从一个贝面的局部看，就是摘要。
代码示例：

<aside>
<p>作者信息</p>
</aside>

（2）figure标签规定独立的流内容（图像、图表、照片等），通常与figcaption联合使用。
代码示例：

<figure>
<figcaption>风景图的标题</figcaption>
<img src="fengjing.jpg"alt="风景图">
</figure>

（3）code标签表示一段代码块。
代码示例：

<code>一段电脑代码</code>

（4）dialog标签定义对话框或窗口，配合、

标签使用。它的属性open规定dialog元素是活动的，用户可与之交互。
代码示例：

<table border="1">
<tr>
<td>周一<dialog open>这是打开的对话窗口</dialog></td>
<td>周二</td>
<td>周三</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>

（5）Canvas标签。它是一个画布标签，用它可以实现电脑上的画图工具，可以在网页中画出不同的图形。

3.行内标签

行内语义性标签（in-line tag）主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类标签包括以下几个标签。
（1）meter标签表示特定范围内的数值，可用于工资、数量、百分比等。max表示最大值，min表示最小值，value代表当前值，如图2-1所示。
代码示例：

<meter value="6"min="0"max="10">6/10</meter><br>
<meter value="0.3">50%</meter>

图2-1meter示例

（2）time标签表示时间值，该元素能够以机器可读的方式对日期和时间进行编的，属性datetime 强调日期和时间。
代码示例：

<p>
<time datetime="2015-09-27">中秋节</time>马上就到了。
</p>

（3）progress标签用来表示任务的进度条，属性max表示最大任务值，属性value表示完成了多少任务，如图2-2所示。
代码示例：

下载进度：

<progress value="34"max="100"></progress>

图2-2 progress示例

4.多媒体标签

多媒体标签（multimedia tag），它可以让网页对视频和音频有着更好的实现，不用再与其他的插件配合使用。HTML5中提供了video视频标签与audio音频标签。

5.表单控件

HTML5中的表单更加自由，不用将表单元素全部放在form标签对中，它可以放在页面的任何位置，表单元素只需要通过fom属性指向元素所属表单的id值，就可以与表单关联起来。而且以前使用表单，都需要用JavaScript来验证用户输入的信息是否规范，现在新增的一些表单控件自带验证功能，大大的解放了我们的双手。例如datalist 选项列表标签、output 输出标签、email输入类型、url输入类型、日期时间类型、number类型、range滑块类型、search 类型、tel类型、color 类型等。

6.交互性标签

交互性标签（interactive tag）主要用于功能性的内容表达，会有一定的内容和数据的关联，它是各种事件的基础，这类标签包括以下几个。
（1）menu标签主要用于交互菜单（这是一个曾被废弃现在又被重新启用的标签），它会实现鼠标右击元素会出现一个菜单，但几乎所有的主流浏览器都不支持它。
属性说明：
1）type：规定要显示哪种菜单类型。它有3个值分别是：
list：列表菜单，一个用户可执行或激活的命令列表。
context：上下文菜单，它必须在用户能够与命令进行交互之前被激活。
toolbar：工具栏菜单，允许用户立即与命令进行交互，它是一个活动式命令。其中list，toolbar功能还未实现。
2）label：规定菜单的可见性，值为text（想要显示的文本）。
代码示例：

<menu type="toolbar">
<li>
<menu label="File">
<button type="button"onclick="file_new（）">新建</button>
<button type="button"onclick="file_open（）">打开</button>
<button type="button"onclick="file_save（）">保存</button>
</menu>
</li>
<li>
<menu labe1="Edit">
<button type="button"onclick="edit_cut（）">剪切</button>
<button type="button"onclick="edit_copy（）">复制</button>
<button type="button"onclick="edit_paste（）">粘贴</button>
</menu>
</menu>

（2）command标签用来处理命令按钮，表示用户可以调用的命令。目前主流浏览器都不支持。代码示例：

   <menu><command type="command">Click Me！</command></menu>

（3）menuitem是用来显示菜单项目的，它有如下属性：
1）icon：给菜单项添加图标。
2）label：菜单的项目名称。
3）checked：页面加载后选中菜单项目。
4）default：设置为默认命令。
5）open：定义details是否可见。
6）radiogroup：命令组的名称。适用于type=“radio”。
7）type：菜单类型，它有3个值：checkbox（可切换的状态）；command（相关联动作的普通命令）：radio（单选）。只有火狐（Firefox）浏览器支持该属性。
代码示例：

<div style="windth:300px; height:50px; background:blue" contextmenu="mymenu">
<menu type="context"id="mymenu">
<menuitem label="恢复"></menuitem>
<menu label="分享">
<menuitem label="Twitter"type="radio"></menuitem>
<menuitem label="Facebook"type="radio"></menuitem>
</menu>
<menuitem label="发送邮件"></menuitem>
</menu>
</div>

二.新的属性

1.contextmenu

在HTML5中，每个元素新增了一个属性：contextmem，它是上下文菜单，即眼标右击无素含出现二个菜单。它配合menu标签使用，contextmem的值设置为menu的id名、使用这个标签时要先阻止浏览器的默认行为。
代码示例：

<p contextmenu="supermenu"id="p-menu"></p>
<menu id="supermenu"label="dothing">
<command label="step 1：Write Tutorial"onclick="doSomething（）">
<command label="step 2：Edit Tutorial"onclick="doSomethingElse（）">
</menu>

2.contenteditable

contenteditable规定是否可编辑元素的内容，它的属性值包括：
（1）true：可以编辑元素的内容。
（2）false：无法编辑元素的内容。
（3）inherit：继承父元素的contenteditable属性。
当属性值为空字符串时，效果和true一致。
当一个元素的contenteditable状态为true（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。否则，该元素不可编辑，如图2-3和图2-4所示。
代码示例：

<p contenteditable="true"style="width：300px；height：30px；border：1px solid red；">能编辑的文本段落</p>

代码示例：

<p contenteditable="true"style="width：300px；height：30px；
border：1px solid red；">能编辑的文本段落</p>

3.draggable

draggable规定元素是否可以拖拽。值为true时表示可以拖拽，值为false时表示不能拖拽，值为auto时按浏览器的默认行为来定。在使用该属性时，还需要配合Javascript来实现，使用dataTransfer对象在拖拽事件中传输数据。详情参照第4章文件处理与拖放。

4.dropzone

dropzone属性规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。它的值为copy时，拖动元素时复制数据，值为move时不会复制，而是将被拖动的数据移动到新的位置上，值为link时，会产生一个指向原数据的链接。
代码示例：

<p id="drag"draggable="true"ondragstart="drag（event）"dropzone=“copy">这是一段可移动的段落。</p>

5.hidden

hidden属性用于隐藏该元素。一旦使用了此属性，则该元素就不会在浏览器中被显示。
它的值为true时元素是可见的，值为false时元素是不可见的。
代码示例：

<div hidden style="width：100px；height：100px；background:red；">123</div>

6.spellcheck

spellcheck属性规定是否对元素进行拼写和语法检查。它可以对以下内容进行拼写检查：input元素中的文本值（非密码）；textarea元素中的文本；可编辑元素中的文本。值为true时进行检查，值为false时不检查。
代码示例：

<p contenteditable="true"style="width：300px；height：30px；border:lpx solid red；"spellcheck="true">能编辑的文本段落</p>

7.translate

translate规定是否应该翻译元素内容。值为true时可翻译，值为false时不可翻译。
代码示例：
7.translate
translate规定是否应该翻译元素内容。值为true时可翻译，值为false时不可翻译。
代码示例：

<ptranslate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>

8.表单元素属性

表单元素新添的属性也可以帮我们做一些验证，例如placeholder属性可以将光标定位到输入框的最前面、required属性用于验证值是否为空、patterm类型专为验证正则、autofocus属性可以自动聚集、autocomplete自动完成属性等，对于这些属性的设置与效果。

HTML5新增的标签属性以及它们的用法相关推荐

HTML5新增相关标签的和属性
总结一下今天学习的h5新增标签和属性今天一共学了流.图标.响应式图像.音频视频.列表.h5超链接定义流: 流表示图表.照片.图形.插图.代码片段等独立的内容.在 h5之前没有专门去实现的这个目的的 ...
html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...
去除html标签 linux,HTML5新增的标签和废除的标签
HTML5新增的结构标签 section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分.可以和h1. h2--等元素结合起来使用,表示文档结构.例:HTML5中--;HTML4中 ...
详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
HTML5新增的标签语义标签,HTML5新增的语义化标签解析
HTML5 新增了许多语义化标签语义化好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 作用 : 1.为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为 ...
HTML5新增音频标签（HTML5）
HTML5新增音频标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
HTML5新增视频标签（HTML5）
HTML5新增视频标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
HTML5新增表单属性（HTML5）
HTML5新增表单属性(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
html5新增的标签是什么,HTML5新增标签及含义解释
HTML 5提供的一些新的标签用法,让我们来看一下有哪些新增的标签,以及它们和HTML 4的区别. header元素表示一个区域或整个区域的头部区域. nav元素表示导航部分 article元素表示一 ...

HTML5新增的标签属性以及它们的用法