补充：4月1号一html新增的语义化标签的使用实例_html新增的语义化标签的应用-CSDN博客

本文链接：https://blog.csdn.net/caicai16/article/details/105241599

功能性语义化标签

hgroup标签:一个标题和一个子标题,或者标语的组合**
PS:可使用的浏览器
IE 9、Firefox、Opera、Chrome 和 Safari 支持
标签。
注意：IE 8 或更早版本的 IE 浏览器不支持 标签
使用在对网页或区段（section）的标题进行组合

效果图如下
figure标签:用户对元素进行组合,一般用于图片或视频 PS: 可使用的浏览器IE 9、Firefox、Opera、Chrome 和 Safari 支持
注意：IE 8 或更早版本的 IE 浏览器不支持

效果图如下
fiqcaption标签为元素添加标题,基线对齐方式

效果图如下
time 标签定义日期或时间，或者两者;

效果图如下
datalist 标签规定了 input 元素可能的选项列表。
datalist>标签被用来在为 input 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。可使用 input 元素的 list 属性来绑定 datalist 元素。
代码

<form action="http://www.baidu.com" target="post" name="listcontent">
        <input type="text" list="list">
        <datalist id="list">
            <option value="html"></option>
            <option value="cssl"></option>
            <option value="javascript"></option>
        </datalist>
        <input type="button" value="提交">
    </form>
    <p>
      <strong>注意:</strong>
      <span>Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</span>。
     </p>

效果图如下
下拉在这里插入图片描述
6.mark:需要标记的词或句子并且默认背景颜色为黄色
效果图如下

7.summary 标签包含 details 元素的标题，“details” 元素用于描述有关文档或文档片段的详细信息。
.summary 标签与details 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。
注意：“summary” 元素应该是 “details” 元素的第一个子元素。

代码如下
在这里插入图片描述
效果图：

8.dialog, 标签定义对话，比如交谈。默认展开需要添加open
代码如下

效果图：

9.address用于定义文章或者页面作者的详细联系信息
（address 标签定义文档作者/所有者的联系信息。
如果 address元素位于元素内部，则它表示该文档作者/所有者的联系信息。
如果 address 元素位于 article 元素内部，则它表示该文章作者/所有者的联系信息。
address 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。）
注意：不应该使用

标签来描述邮政地址，除非这些信息是联系信息的组成部分。
代码如下
在这里插入图片描述

效果图

10.meter 标签定义度量衡（gauge尺度)。仅用于已知最大和最小值的度量。
注意：必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
代码：
在这里插入图片描述

效果图

属性有。取值为：数字：

high：定义度量的值位于哪个点，被界定为高的值。
low定义度量的值位于哪个点，被界定为低的值。
max定义最大值。默认值是 1。
main定义最小值。默认值是 0。
optimum：定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。
value：定义度量的值。

11.progress标签定义运行中的进度（进程）。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。
代码如下
在这里插入图片描述
效果图

结构性标签：
header>页眉,也可用与块头部
nav导航
section页面上的板块
article用来在页面中表示一套结构完整且独立的内容部分
aside侧边栏,广告,nav元素组,以及其它类似的内容部分aside的内容应该与artical的内容相关
footer页面的底部或者板块的底部
div<section< article< header= nav= aside= footer
ps:都是双标签