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

待我称王封你为后i 2021-09-18 03:08 624阅读 0赞

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的缩写。  
代码示例：

（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 标签是用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看，就是侧边栏，可以在左边，也可以在右边。从一个贝面的局部看，就是摘要。  
代码示例：

（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所示。  
代码示例：

![在这里插入图片描述][20190223012431599.png]  
图2-1meter示例

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

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

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

下载进度：

![在这里插入图片描述][20190223012501192.png]  
图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（想要显示的文本）。  
代码示例：

（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）浏览器支持该属性。  
代码示例：

# 二.新的属性 #

## 1.contextmenu ##

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

## 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70]

## 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时元素是不可见的。  
代码示例：

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

[20190223012431599.png]: /images/20210913/04dfeacf57e54fdea5206d30d89adc03.png
[20190223012501192.png]: /images/20210913/a1b6c5011a4b42b89dce91a35ceb32fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70]: /images/20210913/183ecaa59c88407fbf4d9370e057efe2.png