{"blogColumn":{"blogSum":0,"id":1,"imageType":"png","name":"语言基础"},"blogTagList":[{"blogSum":0,"id":25,"name":"前端"},{"blogSum":0,"id":26,"name":"HTML"}],"content":"

1. 语义化标签

\n

1.1 布局标签

\n

H5 中新增了以下用于布局的语义化标签：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
标签名语义单/双标签
header整个页面或部分区域的头部双
footer整个页面或部分区域的底部双
nav导航双
aside侧边栏双
article文章、帖子、杂志、新闻、博客、评论等双
section页面中的某段文字，或文章中的某段文字，通常含有标题双
main文档的主要内容双
hgroup包裹连续的标题，如文章主标题、副标题的组合双
\n

其中，初学者常把 article 元素和 section 元素弄混，它们的区别如下：

\n\n

不过，这两种元素也只在 H5 刚发布时比较受欢迎，之后大家其实依然更愿意使用 div 元素进行布局。

\n

此外，main 元素不受 WAHTWG 的支持，而 hgroup 元素不受 W3C 的支持，因此这两种元素也几乎没有人使用，只做了解即可。

\n

因此，这些布局标签，我们只需重点学习 header、footer、nav 和 aside 元素即可。

\n

1.2 状态标签

\n

1.2.1 meter 标签

\n

我们可以使用 meter 标签来显示已知范围的标量值或者分数值。它是双标签，可以用于表示诸如电量、磁盘用量等数据。

\n

meter 标签具有以下常用属性：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名属性值描述
high数值设定较高值
low数值设定较低值
max数值设定最大值
min数值设定最小值
optimum数值设定最优值
value数值设定当前值
\n

1.2.2 progress 标签

\n

我们可以使用 progress 标签来显示某个任务的完成进度，一般用于表示进度条。它是双标签，可以用于表示诸如工作完成进度等数据。

\n

progress 标签具有以下常用属性：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名属性值描述
max数值设定目标值
value数值设定当前值
\n

1.3 列表标签

\n

1.3.1 datalist 标签

\n

我们可以使用 datalist 标签来对搜索框进行关键字提示。它是双标签，使用方式如下例所示：

\n
<!-- 通过list属性指定datalist的id，让其中的数据称为input的关键词提示 -->\n<input type="text" list="mydata">\n<datalist id="mydata">\n    <option value="1">日月之行</option>\n    <option value="2">若出其中</option>\n    <option value="3">星汉灿烂</option>\n    <option value="4">若出其里</option>\n</datalist>\n
\n

1.3.2 details 标签 & summary 标签

\n

H5 还加入了一组成对使用的标签：details 标签和 summary 标签。其中，details 标签可以创建一个组件，它仅在被切换成展开状态时才会显示内含的信息。而 summary 标签可以为该部件提供概要或者标签。

\n

使用方式如下例所示：

\n
<details>\n    <summary>我是这一段文字的概要</summary>\n    <p>具体的一段文字，点击概要才会展开</p>\n</details>\n
\n

1.4 文本标签

\n

1.4.1 ruby 标签 & rt 标签

\n

我们可以使用 ruby 标签来展示东亚文字注音或字符注释，具体的注音或注释内容使用 rt 标签包裹。

\n

使用方式如下例所示：

\n
<ruby>\n    <span>魑魅魍魉</span>\n    <rt>chī mèi wǎng liǎng </rt>\n</ruby>\n
\n

1.4.2 mark 标签

\n

mark 标签是双标签。使用 mark 标签，可以将文本标记为关键字。

\n

W3C 建议将 mark 用于标记搜索结果中的关键字。

\n","createTime":"2023-12-22 23:06:52","id":206,"redisKeyWithId":"mxblog:view:blog:206","shield":{"id":1,"name":"正常"},"summary":"H5 中新增了很多语义化的标签。具体来讲，新增的语义化标签可分为布局标签、状态标签、列表标签、文本标签等。事实上，这与 HTML 最核心的作用十分契合，因为 HTML 本就是用于表达语义的超文本标记语言，至于早期时比较重要的默认样式，在现代前端开发中已经成了需要被重置的累赘。","title":"HTML 5 新增内容（一）语义化标签","type":{"id":1,"name":"原创"},"user":{"avatarType":"png","email":"3297705066@qq.com","id":1,"username":"妙霄"},"views":16}