新增语义化标签

1 新增排版布局标签

标签名 语义和功能 属性 单标签还是双标签
header 页面或节的头部区域 双标签
footer 页面或节的脚部区域 双标签
nav 导航条 双标签
section 页面中的一个独立区域或者文章中的一节 双标签
aside 侧边栏 双标签
article 文章、新闻、博客、评论等 双标签
main 页面主要内容部分 双标签
hgroup 包裹连续的标题，如文章主标题和副标题的组合 双标签
figure 表示一段独立的流内容，比如文章中的插图。 双标签
figcaption 表示 figure 中的标题 双标签

注意：

W3C 标准中没有 hgroup 标签。

WHATWG 标准中没有 main 标签，所有版本 IE 均不支持 main 标签。

2 新增状态标签

标签名 语义和功能 属性 单标签还是双标签
meter 定义已知范围或分数值内的标量测量。
一般用于表示静态的度量，如电池电量、磁盘用量等。		 max：最大值。
min：最小值。
high：较大的值。
low：较小的值。
optimum：最优值。
value：当前值。		 双标签
progress 定义某个任务完成的进度的指示器。
一般用于表示动态的进度，如进度条。		 max：最大值。
value：当前值。		 双标签

设置 meter 样式：

meter {
    /* 可以设置宽高 */
}
meter::-webkit-meter-bar {
    /* 可以设置总体边框，空白区域背景等 */
}
meter::-webkit-meter-optimum-value {
    /* 设置最优值范围内的样式 */
}
meter::-webkit-meter-suboptimum-value {
    /* 凑合范围内的样式*/
}
meter::-webkit-meter-even-less-good-value {
    /* 糟糕范围内的样式*/
}

设置 progress 样式：

progress {
    /* 所有浏览器都可以设置宽高、边框 */
    /* IE、firefox 可以设置空白区域背景色*/
    /* color 可以设置 IE 下进度条区域的背景色*/
    /* 只有设置了 border 或者 background 属性， chrome 才可以设置空白区域颜色*/
}
::-webkit-progress-bar {
    /* chrome 空白区域颜色 */
}
::-webkit-progress-value {
    /* chrome 设置进度条区域 */
}
::-moz-progress-bar {
    /* firefox 设置进度条区域 */
}

3 新增详情标签

标签名 语义和功能 属性 单标签还是双标签
details 表示一个可以展开或收起的细节或内容 双标签
summary 表示 details 中俄标题 双标签 
<details>
  <summary>更多信息</summary>
  <p>这里是更多的信息，可以被展开和收起。</p>
</details>

4 新增注音标签

标签名 语义和功能 属性 单标签还是双标签
ruby 包裹需要注音的文字 双标签
rt 写具体的注音 双标签

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成：

同志们，一起来享受<ruby>饕餮<rt>taotie</rt></ruby>盛宴！

5 新增文本标签

标签名 语义和功能 属性 单标签还是双标签
mark 用于对某个词语进行标记 双标签

mark 元素定义带有记号的文本，请在需要突出显示文本时使用，如搜索引擎搜索页面。

results matching ""

    No results matching ""