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

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自动完成属性等，对于这些属性的设置与效果。