第三节：21个新的语义化标签，你撸过几个？

这一章节介绍的新标签主要是用于语义化的新结构标签， 其他的标签会在后面的章节陆续介绍。

很多同学都了解和使用过HTML5，也许你也知道了<p>的用法。但是很多人并不清楚<p>的适用范围，它与<div>的使用区别又是什么？。学完这一节，你对这些标签的用法和适用场景，都会一清二楚。

什么是语义化

那么有童鞋可能要问了：什么是语义化？它什么作用，很重要吗？

 

每个HTML标签都有自己特定含义（语义），语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

 

举个例子，当你盖一栋房子的时候，有的地方该用砖头，有的部分该用瓷片，还有的地方得用水泥糊上，这样盖出来房子才会结实，整洁和美观。

如果硬是要瓷片替代砖头，房子勉强也能盖起来，但是这样的房子不牢固，容易倒塌，外观也不好看。

 

网页的语义化也是这个理儿，表示段落的时候你就得用<p>标签，表示标题就得用<h1>~<h6>标签，这样的网页称之为结构良好，让人和搜索引擎容易理解。你硬是要用<div>标签，浏览器也能成功展示你想要的效果，但是这样的网页结构并不友好，不利于搜索引擎识别网页的关键信息，网页标签一旦多了，维护起来，也是很蛋疼的。

 

HTML5带来的这些语义化的新标签，就是让开发者能创建出更好的页面结构。不用，你就是辜负了HTML5的一番好意了。

学习21个新标签

讲完了语义化，接下来，我们就来演示一下这些标签的用法和使用场景。

1

<header>标签：标签定义文档或者文档的一部分区域的页眉。

例子：可以用它来定义一个页面文章的页眉。

    <header>
        <h1>22省份遭遇高温持久战</h1>
        <span>2016-08-01 00:28</span>
    </header>

用法很简单，用<header>标签来替代了我们常用的<div class="header">形式。一个页面，可以拥有多个<header>标签。

2

<nav>标签：定义导航链接的部分。

例子：用它来定义一个页面的导航。

    <nav>
        <a href="#">公司首页</a>
        <a href="#">产品简介</a>
        <a href="#">加入我们</a>
        <a href="#">联系我们</a>
    </nav>

用<nav>标签代替了以前的<div class="nav">的形式。并不是每个HTML文档都用得上<nav>标签，要根据结构布局需求来使用。

3

<footer> 标签：定义文档或者文档的一部分区域的页脚。

例子：包含文档创作者的姓名、文档的版权信息等等。

    <footer>
        作者：前端君 <br />
        © web前端教程公众号版权所有
    </footer>

用<footer>标签可以代替以前的<div class="footer">的写法，一个页面，可以拥有多个<footer>标签。

4

<p> 标签：定义文档的某个区域。

乍一看，这不是跟div差不多吗？这个问题前端君也疑惑了很久，在写这个章节的时候，决定要找出它们的区别。

官方是这些解释的：

The p element represents a   generic p of a document or application. A p, in this   context, is a thematic grouping of content, typically with a heading.

大概的意思是：<p>元素表示文档或应用的一个部分。所谓“部分”，这里是指按照主题分组的内容区域，通常会带有标题。

注意到吗？这里的<p>标签，通常里面会包含标题和内容。也就是说<p>不是通用容器元素。如果仅仅是当做普通的容器，那应该用<div>元素。

<p>标签所包含的区域里面，应该包含标题<h1>~<h6>标签和内容段落<p>标签，而div标签使用的时候，并没有这样的要求。

例子：定义一个含有标题和段落的<p>区域。

    <p>
        <h1>台风“妮妲”登陆广东深圳</h1>
        <p>今年第4号台风“妮妲”于2日3时35分以强台风级在广东省深圳市大鹏半岛登陆，中心最大风力14级。</p>
    </p>

所以大家要谨记了，不能拿p标签当做div来使用。

5

<article> 标签：定义文章、页面或者是应用程序当中的独立完整可以被外部引用的内容。

什么意思呢？它可以以一篇文章、一篇帖子、一段评论形式出现。除了内容主题以外，通常还会有自己的标题及脚注。

例子：包含标题+内容+脚注的案例。

    <article>
        <header>
            <h1>数说台风...</h1>
        </header>
        <p>今年第4号台风“妮妲”....</p>
        <footer>注：版权归天气网所有</footer>
    </article>

像以上的案例中，包含了头部标题、内容和脚注的模块，就适合使用<article>标签，<article>标签可以适当地嵌套使用。

6

<aside> 标签：定义 <article> 标签外的内容。

它定义的内容应该与附近的内容相关。具体用两种使用方法：

1、嵌套在<article>标签内，此时它的主要表示的是内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名词解释，等等。

示例：<aside> 标签被包含在<article>标签内。

    <article>
        <p>今年第4号台风“妮妲”....</p>
        <aside>
            <span>文章排名：2</span>
            <span>热门关键字：台风、妮妲</span>
            <span>事件热度：5</span>
        </aside>
    </article>

这个案例中的<aside>定义的内容就是作为整个<article>文章的相关信息介绍。

ps：<article>标签本应该包含标题和脚注部分，但是这里用于讲解而省略。

2、在<article>标签之外使用，作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

示例：一个关于前几天台风报道文章的相关文章推荐列表部分。

    
    <aside>
        <h1>相关推荐</h1>
        <a href="#">原来广东是被“祸害”的地方...</a>
        <a href="#">菜市场是台风“妮妲”最早...</a>
        <a href="#">台风肆虐的朋友圈是这样的...</a>
    </aside>

7

<details> 标签：用于描述文档或文档某个部分的细节。

<summary> 标签：包含<details> 标签的标题。

这两个标签一般都会一起使用，所有我们在这里一并学习。

<details> 标签定义文档的细节，用户可进行查看，或通过点击进行隐藏。而<summary> 标签作为<details> 标签的标题，一般会作为第一个子元素。

示例：<details> 标签和<summary> 标签一起使用的案例。

    <details>
        <summary>细节的标题</summary>
        <p>细节内容，点击可查看或者隐藏</p>
    </details>

<details> 标签和<summary>结合使用，最终的页面效果是这样的：

(这是一个gif的动画图)

是不是很好玩，自带手风情的切换效果。用户可以通过鼠标点击查看或者隐藏，默认效果是隐藏的，点击再展开。如果你想它默认就展开的话，可以通过设置<details>的一个属性：open。

    <details open></details>

目前，只有 Chrome 和 Safari 6 支持 <details> 标签。

9

<figure> 标签：规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption> 标签：元素定义<figure>的标题。

一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

示例：<figure> 标签和<figcaption> 标签一起使用。

    <figure>
        <figcaption>横跨珠江的猎德大桥</figcaption>
        <img src="ld.jpg" alt="猎德大桥">
    </figure>

效果如下图：

注：<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

11

<mark> 标签：定义带有记号的文本。

示例：带有<mark>标签的段落。

    <p>广东的<mark>强风雨</mark>将持续至3日8时</p>

效果图：

哈哈，这货自带背景变黄色的效果。

12

<meter> 标签：定义度量衡。

仅用于已知最大和最小值的度量。它有个必选的属性value，用于规定度量的当前值。

示例：80%的度量例子。

    <meter value="0.8"></meter>

效果图：

你所看到的也是<meter>自带的样式，绿色部分长度代表值当前值。样子长得是不是很像一个进度条？但它并不是专业的进度条标签，要表示进度条，你得用下面这个新标签。

13

<progress>标签：定义运行中的任务进度（进程）。

<progress> 标签有两个重要的属性，max属性规定需要完成的值，value规定进程的当前值。在实际使用过程中，它经常与 JavaScript 一起使用来显示任务的进度。

示例：总任务为100，当前只完成了15%。

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

效果图：

样式也是自带的。大家在使用的时候，切莫与定义度量衡的<meter>标签混淆了，毕竟它们的外观和用法比较相似。

14

<time> 标签：定义时间或日期。

用法很简单，但这里的定义时间和定义日期是两种不同的用法。我们先来看看怎么定义时间。

示例：定义一个时间。

    <p>明天早上<time>9:00</time>准时到公司</p>

示例：结合datetime属性，定一个日期，比如：2016年的中秋节。

    <p>还有一个多月就<time datetime="2016-09-15">中秋节</time>了</p>

案例中<time>标签内容是“中秋节”的日期，而属性datetime标示的是中秋节所对应的时间。<time>标签不会附带任何样式，跟<span>标签一样。但是不同的是<time>标签更具有语义。

15

<wbr>标签： 规定在文本中的何处适合添加换行符。

这个怎么理解呢，举个例子你就懂了。很多时候我们的文档内容中，存在着单词，特别是比较长的单词，当它们遇到换行的时候，很容易出现错位的现象，比如：

当XMLHttpRequest单词遇到了换行的时候，它并没有很好地适配容器的宽度，而出现了错位。

那么有童鞋说了：我们可以用word-break来控制它换行不就行了吗？确实，我们可以用word-break来实现换行，让它不错位。但是，阅读效果并不是最优。

看到了，此时XMLHttpRequest单词被拆分得乱七八糟，根本不利于阅读。这个时候，如果我们使用了<wbr>合理地进行换行控制，效果就理想多了。

    你要学好XML <wbr> Http <wbr> Request 对象

我们将XMLHttpRequest单词拆分成三部分 ：XML+Http+Request，因为我们认为这样的拆分更符合人的阅读习惯。我们看看效果：

这个时候，如果XMLHttpRequest单词遇到换行的时候，浏览器跟根据<wbr>标示位置，合理地对单词进行换行拆分。

注意：<wbr>并不是一个闭合的标签。它是一个空标签，跟<br>、<hr>类似。

往下的这几个新标签的浏览器支持度并不乐观，但是出于学习的目的，前端君还是来介绍一下。

16

<dialog>标签：定义对话框或窗口。

<dialog>标签有一个open属性，它控制对话框的显示和隐藏。对话框会以绝对定位，水平居中的形式显示。不过，目前只有Chrome浏览器支持。

    <dialog open>这是对话窗口</dialog>

用法很简单，只需要在标签内编写对话框的内容即可。效果如下图：

open属性表示dialog窗口展开，省略open属性，dialog窗口会被隐藏。虽然很实用的一个标签，但是浏览器对它的支持不完善，很遗憾。

17

<ruby>标签：定义 注释（中文注音或字符）。

<rt> 标签：定义字符（中文注音或字符）的解释或发音。

<rp> 标签：在 ruby 注释中使用，以定义不支持 <ruby>标签的浏览器所显示的内容。

这3个标签得结合着一起使用，但是浏览器都它的支持各不一样。

    <ruby>
        世界贸易
        <rt>
            <rp> ( </rp>
            shi jie mao yi
            <rp> ) </rp>
        </rt>
    </ruby>

看着貌似挺复杂的，其实并不难，我们一起来看看效果。

当浏览器支持<ruby>标签的时候，<rp>标签就会被隐藏，显示结果为：

<rt>标签的内容会以标注拼音的形式显示在 “世界贸易” 的上方。倘若浏览器不支持<ruby>标签，又会怎样显示呢？我们来看看：

这个时候，<ruby>标签的内容就会显示在同一行，很人性化。但是，浏览器对这个标签的支持度不高，除非特殊情况，否则没必要使用这个标签

20

<bdi>标签：允许您设置一段文本，使其脱离其父元素的文本方向设置。

这个标签你一定很陌生，在日常开发中压根都没用过，何况浏览器对它的支持也不友好。W3C上说只有Chrome和Firefox支持。但我测试了一下，他俩并没有支持，反倒IE支持了这个标签。但整体来说，浏览器对这个标签的支持还是有所欠缺。

这个标签要结合属性dir来一起使用，它的属性值有：rtl(右到左)，ltr(左到右)。

示例：属性dir值为ltr，表示从左到右。

    <bdi dir="ltr">你好</bdi>2016

显示出来的结果：“你好2016”。

示例：属性dir值为ltr，表示从右到左。

    <bdi dir="rtl">你好</bdi>2016

此时，显示的结果就变成了：“2016你好”，因为<bdi>标签的文本被移到了右侧。

21

<command>标签：定义命令按钮。

目前没有浏览器支持此标签，只有IE9支持并仅仅支持部分功能。

    <command onclick="alert(1)">点击我</command>

因为其很多的属性没有被浏览器支持，所以前端君暂时无法展示给大家看。这个标签大家还是要慎用。

可能有童鞋会问：“为什么还有很多受用的标签没有讲解呢？比如<vedio>和<audoi>标签等等”。

前端君：“我根据新标签的职能进行了划分，本节讲解的是语义化的结构标签，后面的章节会陆续介绍其他新标签。”

本节收获

学完本节，你应该学会了：

1、语义化的含义和作用。

2、21个新标签的用法和使用场景。

3、慎用浏览器支持度不完善的标签。

注：要购买《ES6系列章节测试》两套习题的同学，加前端君微信后可以直接留言，详情点击：《重磅：为ES6系列设计的2套习题+答案解析》。