HTML入门：06HTML5语义化标签

语义化标签，顾名思义就是可以直接读懂的标签。HTML5不仅仅满足于怎样将一个网页表现出来，而是更加专注于网页的结构和内容。使用语义化标签后，至少有三个优点：

1. 模块化，便于团队开发和维护；

2. 不同的标签，其内容可以有不同的关注度（例如广告所处的区域与正文区域给用户的关注度是不同的）；

3. 语义化标签更加标准化，让机器更懂HTML。

在HTML5中新增了一些语义化标签，下面依次介绍这些标签的用法。

1 details和summary：文本内容的显示或隐藏

首先看details标签，这个标签一般和summary标签一起使用，summary标签可以为details定义标题。简单来说，这两个标签实现的是文本内容的显示或隐藏效果。

在已有HTML5页面标签的基础上，页面正文部分设置为没有内容，这时候我们添加一些文字并加上details和summary标签。首先用p标签输入例子标题，然后定义一组details标签，并且把需要显示的内容放在summary标签中，再定义两个需要隐藏的内容，效果如下。

<p>details、summary标签实例</p>
<details>
    <summary>可见部分由summary控制</summary>
    <p>隐藏部分1</p>
    <p>隐藏部分2</p>
</details>

我们可以看到，默认情况下，隐藏的内容是不显示的，需要我们点击箭头才会展开。

如果一开始就需要把隐藏的内容显示出来，可以通过details标签的open属性来控制。

<p>details、summary标签实例</p>
<details>
    <summary>可见部分由summary控制</summary>
    <p>隐藏部分1</p>
    <p>隐藏部分2</p>
</details>

<details open>
    <summary>可见部分由summary控制</summary>
    <p>隐藏部分1</p>
    <p>隐藏部分2</p>
</details>

可以看到，加上open属性之后原本隐藏的内容默认打开了。

2 figure标签

figure标签规定独立的流内容（图像、图表、照片、代码等等），用来表示网页上一块独立的内容，将其从网页上移除后，不会对网页上的其他内容产生影响。

一般来说，figure标签会配合着figcaption标签一起使用，其用来定义figure标签的标题，示例如下。

首先用p标签输入例子标题，然后输入figure标签。通过img标签的属性来定义图片信息，再添加figcaption属性给图片加上标题。

<p>figure示例</p>
<figure>
    <img src="image/CSDN.png" alt="无法显示图片">
    <figcaption>图1.CSDN</figcaption>
</figure>

3 mark标签：文本记号

mark标签相对比较简单，它的作用是把需要重点标示的文字内容高量显示，类似于在书本上用荧光笔画出重点，即定义带有记号的文本。使用方法比较简单，把需要高量显示的文本。放在一对mark标签中即可，

先用p标签输入例子标题，再在单词mark的前后分别插入一对mark标签，效果如下。

<p>这是一个<mark>mark</mark>标签示例</p>

4 meter和progress：进度条

在网页中经常需要用进度条的形式来展示数据，我们通常会使用met和progress标签来表达这样的效果，先看看二者的效果吧。

首先，仍然用p标签输入例子标题，然后添加meter标签，通过value等属性来设置进度条的相关数字。需要注意的是，如果用户所用浏览器不支持meter标签，浏览器将会用后面的数字形式来显示。

<p>展示给定的数据范围：</p>
<meter value="4" min="0" max="10">4/10</meter> <br>
<meter value="0.7">70%</meter> <br>
<progress value="26" max="100">26</progress>

progress标签输入之后呈现的效果和meter大致相同，但区别在于用progress标签定义的进度条是动态显示的，通常与Javascript一起使用来显示任务的进度。因此，它不适合用来展示静态的度量衡，如果用户需要展示磁盘空间的使用情况，一般会使用meter标签来实现。

5 ruby和rt：汉字注音

针对汉字在网页中的显示，HTML5提供了ruby标签来支持在汉字顶端显示它的拼音，一般配合rt标签使用，效果如下。仍然是p标签输入例子标题，然后输入ruby标签，在rt标签前输入汉字，标签中间输入拼音。

<p>汉字拼音示例：</p>
<ruby>
    CSDN<rt></rt>
    中<rt>zhong</rt>
    国<rt>guo</rt>
    开<rt>kai</rt>
    发<rt>fa</rt>
    者<rt>zhe</rt>
    网<rt>wang</rt>
    络<rt>luo</rt>
</ruby>

可以看到，通过把中国开发者网络这几个字的拼音放在rt标签中，就实现了为汉字标注拼音的效果。