大猿猴的前端世界

Appearance

这篇文章带你详细学习常用的HTML标签，更好地运用它们。

meta ​

用于配置文件信息。提供name、content、http-equiv、charset属性，其中name和content通常作为键值对搭配使用，charset用于指定文档的字符编码，http-equiv用于指定一个pragma指令，可以取值为内容安全策略content-security-policy、内容类型content-type、默认CSS样式default-style、用户代理兼容x-ua-compatible、页面刷新refresh，也可取值为Cache-Control或Expires等Http相关强缓存字段，此时content便是该缓存字段的值。

示例如下，

html
<meta name="keywords" content="HTML5,语义化标签" />
<meta name="description" content="初学者写的第一张HTML5移动网页" />
<meta name="author" content="muzhidong" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0" />

<meta charset="utf-8" /> 

<!-- 只允许https资源被加载 -->
<meta http-equiv="content-security-policy" content="default-src https:">

<!-- 与<meta charset="utf-8" /> 写法等价 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<!-- 为x-ua-compatible时，必须包含IE=edge -->
<meta http-equiv="x-ua-compatible" content="IE=edge"/>

<!-- 首选样式表，content是本文档内某个style或link元素中的title值 -->
<meta http-equiv="default-style" content="reset">
<style title="reset">
  * {
    padding: 0;
    margin: 0;
  }
</style>

<!-- 为refresh时，content值固定格式为[重载间隔秒数(非负整数);url=重定向地址] -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com"/>

<!-- 页面不缓存 -->
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta http-equiv="Expires" content="0">

base ​

用于指定文档中所有相对url的基础url。提供href属性，表示文档中相对url的基础url，以及target属性，表示目标打开方式，可取值_self、_blank、_parent、_top。

当一个文档有多个base标签时，属性href和target的取值以第一次为准。

html
<!-- href值为相对路径时，可以视为url路径的前缀，值为绝对路径时，此时可以当作url前半部分 -->
<!-- 该例表示文档内的相对url被访问时路径自动添加前缀abc/，并以新窗口打开 -->
<base href="./abc" target="_blank" />

表示当前元素与扩展资源的关系。提供如下属性，

  • rel

表示链接资源与当前文档之间关系命名，多个关系用空格分隔。常见取值有dns-prefetch(表示浏览器会对该资源的域名先做解析)， icon，stylesheet，preload(表示该资源在页面加载完成后是即刻需要的，会在渲染前预加载，不阻塞渲染)，prefetch(表示该资源将来可能被需要，但由代理决定是否加载以及什么时候加载。一般是空闲时加载)，modulepreload，pingback，preconnect，prerender，具体介绍查阅这里。

prefetch与preload区别：用户从A页面进入B页面，preload会失效，而prefetch可以在B页面继续使用。

  • href

表示链接资源url

  • type

表示链接资源MIME类型

  • as

仅当rel=preload或rel=prefetch时设置有效，表示加载内容的类型。声明该属性起到匹配请求、为资源应用正确的CSP、为资源设置正确的accept请求头的作用，并有利于更精确资源加载优先级。取值如下，script、style、document、image、font、audio、video、embed、fetch、object、track、worker，每个类型被分别应用到哪些元素详见这里。

  • crossorigin

设置请求资源时CORS方式。可取值anonymous和use-credentials，前者表示跨域请求时忽略凭证，后者则相反。

  • media

设置链接资源应用的媒体类型或媒体查询。

  • title

为链接指定语义。

  • hreflang

设置链接资源语言

  • imagesizes

仅当应用rel="preload" as="image"了有效，设置图片大小

  • imagesrcset

仅当应用rel="preload" as="image"了有效，设置图片来源

  • integrity

包含内联的元数据，浏览器会使用它验证加载的资源已正常被交付。该数据是该资源的一个base64编码的加密哈希值。

  • referrerpolicy

可参考a标签属性referrerpolicy介绍

  • blocking

表示获取该资源时哪些资源该被阻塞，目前可取值只有render，表示屏幕正渲染的内容会被阻塞。

示例如下，

html
<!-- 关联网站图标 -->
<link rel="icon" href="favicon.ico" />

<!-- 当媒体设备是宽度不大于600像素的屏幕时关联样式表 -->
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

<!-- 预加载字体文件 -->
<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

ul ​

无序列表。一般与CSS属性list-style搭配，该属性是list-style-image、list-style-position、list-style-type三个属性的简写，分别表示列表项符号、列表项符号位置、列表符号类型。

list-style-image属性可取值为none、URL函数、渐变函数。

list-style-position属性可取值为inside，默认值，表示标记在列表内，或outside，标记在列表之外。

list-style-type属性可取值为none、disc、circle、square、decimal、georgian、trad-chinese-informal、kannada、自定义计数样式或字符串

示例如下，

html
<style>
  .one {
    list-style: none;
  }
  .two {
    list-style: none inside "😊";
  }
  .three {
    list-style: url(./loading.gif) inside none;
  }
  .four {
    list-style: linear-gradient(to right bottom, red , blue) outside none;
  }
</style>
<ul class="one">
  <li>早上</li>
  <li>中午</li>
  <li>晚上</li>
</ul>
<ul class="two">
  <li>QQ</li>
  <li>微信</li>
  <li>淘宝</li>
  <li>微博</li>
</ul>
<ul class="three">
  <li>apple</li>
  <li>banana</li>
</ul>
<ul class="four">
  <li>QQ</li>
  <li>微信</li>
  <li>淘宝</li>
  <li>微博</li>
</ul>

ol ​

有序列表，提供reversed、start、type属性，分别表示是否倒序展示，列表项开始数，数字类型，可取值A、a、i、I、1。

示例如下，

html
<ol start="26" type="A" reversed>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>ECMAScript6</li>
  <li>JQuery</li>
  <li>Bootstrap</li>
  <li>Angular</li>
  <li>Vue</li>
  <li>React</li>
</ol>

dl ​

描述列表。一般结构如下，

html
<dl>
  <dt>标题1</dt>
  <dd>描述1</dd>
  <dt>标题2，可选</dt>
  <dd>描述2</dd>
  <dt>标题3，可选</dt>
  <dd>描述3</dd>
</dl>

a ​

超链接标签，有如下属性，

  • href

    其值可以是一个站内或站外链接、或锚点链接(锚点在页面内时，值结构为#锚点名称，在页面外时，值结构为文件#该文件中的锚点名称，对应位置需声明<a name="锚点名称"></a>或<xxx id="锚点名称"></xxx>)、或脚本操作(以javascript:开头)、或电话、短信、邮件等其他scheme。

    html
    <!-- 快捷回到顶部 -->
<a href="#">回到顶部</a>
<!-- 打电话 -->
<a href="tel:119"></a>
<!-- 发短信 -->
<a href="sms:10086,12580?body=hello"></a>
<!-- 发邮件 -->
<a href="mailto:123456@qq.com"></a>

    锚点定位除了基于URL地址锚链定位外，还有focus锚点定位，即可以被focus的按钮、输入框、单选框、复选框、文本区域等元素在被focus时发生的页面重定位现象，但二者差异如下：

    一是focus锚点定位是让元素在浏览器窗体范围内显示即可，不一定跟URL锚链定位一样都在上边缘

    二是URL地址锚链定位在当锚点目标元素和窗体同时可滚动时，会由内而外触发所有可滚动窗体的锚点定位行为，而focus锚点定位只触发锚点目标元素

  • target

    目标打开方式。可取值为_self(默认值)、_blank、_parent、_top

  • download

    可以没有值，或者值为文件名，若当中带有/或\，则自动化转化为-。只在同域下，又或者schemes是blob或data，该属性方才生效。

  • ping

    值是一段空格分隔的url列表，当链接被点击时，浏览器会向这些url发送一个post请求。常用于跟踪。

  • referrerpolicy

    发送资源请求时控制来源referrer请求头值。可取值no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、same-origin、strict-origin、strict-origin-when-cross-origin(默认值)，unsafe-url。具体每个值的介绍见Here

  • rel

    指定当前文档与被链接文档的关系

  • type

    指定url链接MIME类型

img ​

图片标签，常见的属性有alt(图片无法显示时展示的文本)、src(图片路径)、width(图片显示宽度)、height(图片显示高度)、crossorigin(可取值anonymous和use-credentials，前者表示跨域请求时忽略凭证，后者则相反)。还有一些可能接触比较少的属性，列举如下，

  • elementtiming

    表示该元素被标识，以便于PerformanceObserver对象跟踪

  • loading

    图片加载方式。可取值eager和lazy，前者表示立即加载，无需考虑是否在可见视口范围内，默认值；后者表示懒加载，当其与视口接近特定距离时加载。

  • srcset

    设置源。值结构有两种：

    源url1 1x, 源url2 2x, ...(x表示像素密度或设备像素比)

    源url1 100w, 源url2 200w, ...(w表示宽度，使用该方式时必须同时指定属性sizes，否则会被忽略)

html
<img
  src="logo.png"
  alt="Logo"
  srcset="logo@2x.png 2x,logo@3x.png 3x" />

响应式图片3种处理方式

  • img标签设置srcset属性

  • picture标签指定绑定多个source标签

html
<!-- 类似video/audio标签，允许嵌入多个source标签，指定多个源 -->
<picture>
  <!-- source标签的width、height、sizes、srcset属性只用于picture标签，而src属性只用于video/audio标签 -->
  <source srcset='small.jpg' media='(max-width:375px)'></source>
  <source srcset='medium.jpg' media='(max-width:678px)'></source>
  <source srcset='big.jpg' media='(max-width:1024px)'></source>
  <!-- fallback -->
  <img src='big.jpg' />
</picture>
  • 使用svg标签

  • sizes

    根据媒体查询条件设置源的大小

    值结构为：(媒体查询条件1) 源尺寸1,(媒体查询条件2) 源尺寸2,...,源尺寸n，最后一项不需要查询条件

    须与srcset配合使用，且srcset使用宽度w描述时，否则不起效。

html
<img
  src="logo.png"
  alt="Logo"
  srcset="logo@2x.png 375w, logo@3x.png 768w"
  sizes="(max-width: 768px) 375px, 768px" />

  • referrerpolicy

    可参考a标签属性referrerpolicy介绍

  • decoding

    告知浏览器图片以什么方式解码。默认值为auto，也可取值sync和async，表示同步或异步方式解码。

  • ismap

    该属性仅在img元素作为带有有效href属性的a元素的孩子节点时允许被使用。表示图像是否是服务器端图像映射的一部分，若是，则点击图片的精准坐标时将会被发送到服务器

  • usemap

    与元素关联的图片映射部分url，以#开头

form ​

表单元素，具有如下属性，

  • name

    指定表单名称

  • accept-charset

    指定服务器接收的字符编码。多个用空格分隔，默认是当前文档字符集。

  • autocomplete

    指定input元素是否自动补全默认值，可取值on、off

  • action

    指定处理表单提交的url。当表单含有<button></button>、<input type='submit' />或<input type='image' />时，属性会被忽略，表单元素设置method=dialog也会被忽略

  • method

    指定表单提交时http请求方式。可取值为get、post、dialog，也会如同action属性一样，出现上述情况会被忽略

  • enctype

    当元素属性中有method=post时，指定表单提交时请求的MIME类型，可取值为application/x-www-form-urlencoded(默认值)、multipart/form-data(input元素出现file类型)、text/plain，也会如同action属性一样，出现上述情况会被忽略

  • target

    表单提交时打开方式。可取值为_self(默认值)、_blank、_parent、_top。也会如同action属性一样，出现上述情况会被忽略

  • novalidate

    提交时表单是否不做校验，默认是校验的。也会如同action属性一样，出现上述情况会被忽略

  • rel

    控制表单创建的链接类型，了解更多见传送门

input ​

输入元素。其属性type取值有很多，下面通过示例认识每种type可以应用哪些属性。

html
<style>
  .container {
    display: flex;
    flex-direction: column;
  }
</style>
 <form class="container" 
  id="formId"
  oninput="sum.value=(+a.value)+(+b.value)"
>
  <!-- 
    通俗易懂的属性不多介绍。

    属性readonly与属性disabled都是不可编辑，但readonly修饰的字段会被提交，而disabled修饰的字段不被提交

    属性form指定从属于某表单的表单id，布局灵活，可以不包含在form中，既脱离form，又保持从属关系

    属性autofocus表示页面加载时是否聚焦

    属性autocomplete表示是否自动补全默认值，可取值为on、off等，在苹果系统兼容性未知。取值比较多，可见https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values

    属性inputmode告知浏览器弹起键盘时使用哪种类型。可取值为none、text、tel、url、email、numeric、decimal、search。

    属性size表示控件初始大小，type为text或password时，使用em单位，type为其他值时，使用px单位，当该元素应用width样式时会被覆盖
  -->
  <input type="text" 
    name="textInput" 
    value="这是一个只读输入框"
    readonly
    form="formId"
    autocomplete="off"
    inputmode="text"
    size="20" />
  <input type="text" 
    placeholder="这是一个禁用输入框"
    disabled />
  <input type="text" 
    name="textInput2" 
    placeholder="这是一个必填输入框"
    autofocus
    required />

  <!-- 
    属性maxlength和minlength表示输入字符数的最值范围
    注：maxlength只能控制用户输入，但不能阻止JS写入
  -->
  <input type="password" name="password" maxlength="20" minlength="8" />

  <!-- 
    属性dirname定义元素方向名称，在表单提交时其值作为key，`ltr`或`rtl`当中一个作为value
    
    属性list指定搜索列表id，一般是datalist元素id
  -->
  <input type="search"
    name="sex" 
    dirname="searchDirName" 
    list="sexList"  >
  <datalist id="sexList">
    <option>男</option>
    <option>女</option>
    <option>未知</option>
  </datalist>

  <input type="tel" required name="phone" pattern="/\d{3-8}/g" />

  <input type="email" required name="mail" />

  <input type="url" required name="url" />

  <!-- 
    max和min表示数字型最值范围
  -->
  <input type="number" id="a" name="number" max="100" min="1" value="1" />

  <!-- 输入数值范围，提供一种滑动输入方式 -->
  <input type="range" id="b" name="range" step="10" min="0" max="100" value="10"/>
  <output name="sum" for="a b"></output>

  <input type="radio" name="radio"  checked />

  <input type="checkbox" name="checkbox" checked />

  <!-- 输入x年x月x日 -->
  <input type="date" name="date"/>

  <!-- 输入x年x月 -->
  <input type="month" name="month"/>

  <!-- 输入x年第x周 -->
  <input type="week" name="week"/>

  <!-- 输入x时x分x秒 -->
  <input type="time" name="time"/>

  <!-- 输入时分秒，含时区 -->
  <input type="datetime" name="datetime"/>

  <!-- 输入时分秒，不含时区 -->
  <input type="local-datetime" name="local-datetime"/>

  <!-- 
    accept表示接收文件的MIME类型
    capture表示捕获的媒体设备用途，可取值面向用户的`user`和面向环境的`environment`
    multiple表示文件是否可以多选
  -->
  <input type="file" 
    accept="image/jpeg,image/png" 
    capture="environment" 
    multiple
    name="file" />

  <input type="button" value="按钮" />

  <input type="submit" 
    formaction="https://www.baidu.com" 
    formmethod="post"
    formenctype="multipart/form-data"
    formtarget="_top" />
  <input type="reset" />

  <input type="hidden" name="hidden" value="hiddenValue" />

  <input type="image" 
    alt="图片加载失败时文字内容" 
    height="200" 
    width="200" 
    src="./loading.gif"
    name="image" />

  <input type="color" name="color" />
</form>

label ​

标签元素。for属性通过可标记的、表单相关的元素id标识与之关联，当以编程方式实现时使用htmlFor。

下面示例介绍点击文字选中选项的实现方式。

html
<!-- 方式一：input标签设置id，label标签设置属性for，值与id相同 -->
<input type="radio" name="sex" id="man" />
<label for="man">男</label>
<!-- 方式二：label标签嵌入input标签 -->
<label>
  <input type="radio" name="sex">女
</label>

select ​

选择元素，用于提供菜单选项。提供autofocus、autocomplete、disabled、form、multiple、name、required、size等与input元素相同的属性，不再介绍。注意当应用了multiple属性，需先按下指定按键才能进行多选，不同操作系统下对应的按键不一样，如mac系统下是command。

html
<!-- 分组下拉菜单 -->
<select name="menu">
  <optgroup label="水果">
    <option selected value="列表值">西瓜</option>
    <option value="菠萝">菠萝</option>
    <option value="苹果">苹果</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="白菜">白菜</option>
    <option value="冬瓜">冬瓜</option>
  </optgroup>
</select>

<!-- 滑动列表菜单 -->
<select name="list" size="2"  multiple>
  <option selected value="white">皮肤白</option>
  <option value="black">皮肤黑</option>
  <option value="green">皮肤绿</option>
  <option value="blue">皮肤蓝</option>
  <option value="red">皮肤红</option>
</select>

textarea ​

多行文本框元素。除提供了autocomplete、autofocus、disabled、form、maxlength、minlength、name、placeholder、readonly、required等与input元素相同的属性外，还提供了特有属性如下，

  • rows

    文本框可见行数。默认值为2。

  • cols

    文本框可见宽度，以字符平均宽度为单位。默认值为20。

  • spellcheck

    底层浏览器或操作系统是否对齐拼写检查，可取值default(可能通过父元素spellcheck属性决定)、true、false

  • wrap

    当表单提交时值换行处理方式。可取值soft、hard。soft表示控件保证值所有换行是CR+LF对，但不会额外添加换行；hard表示控件会在超过属性cols值插入换行符，保证每行宽度不超过控件宽度，使用该值时必须指定cols属性，否则不起作用。

示例如下，

html
<textarea cols="30" 
  rows="10" 
  spellcheck 
  wrap="hard" 
  form="formId"
  name="textarea"></textarea>

fieldset与legend ​

fieldset元素常用于在表单内进行控件分组，提供name、form、disabled等属性。legend元素常用于给fieldset父元素定义内容标题。

示例如下，

html
<fieldset>
  <legend>请选择性别：</legend>
  <input type="radio" name="sex" value="男">男&nbsp
  <input type="radio" name="sex" value="女" checked>女
</fieldset>

embed ​

嵌入元素，可以嵌入外部资源。提供资源展示宽度width、资源展示高度height、资源url地址src、资源MIME类型type等属性。注意width和height只能取具体数值，不支持百分比；type不支持通配符*，如`image/*，也不能组合类型

html
<embed 
  src="./loading.gif"
  type="image/gif"
  width="64" 
  height="64" />

iframe ​

内嵌网页。会创建新的运行时，有自己的栈、堆、队列，与主网页运行时相互独立，互不影响。隐藏的iframe支持跨域便是利用了这个特点，但也存在不足：

1.搜索引擎的检索程序无法解读有iframe的页面，不利于SEO

2.iframe阻塞主页面的onload事件

3.iframe和主页面共享连接池，而浏览器对相同的连接有限制，会影响页面的并行加载

对于第2、3点，可以通过js选择合适时机动态给iframe设置src属性

提供如下属性，

  • name

    嵌入的浏览器上下文目标名称。可作为window.open方法调用时的传入参数，表示窗口名称。

  • height

    元素高度，默认150px

  • width

    元素宽度，默认300px

  • src

    内嵌网页url

  • srcdoc

    嵌入html文档，会覆盖src属性。若浏览器不支持该属性，则退回到使用src属性

  • sandbox

    译为沙箱，用于控制对iframe内容做的额外限制，默认是应用了所有限制。可以通过指定值去解除部分限制，多个值用空格分隔。提供的值有allow-downloads、allow-forms、allow-orientation-lock、allow-modals、allow-popups、allow-popups-to-escape-sandbox、allow-presentation、allow-same-origin、allow-scripts、allow-top-navigation、allow-top-navigation-by-user-activation、allow-top-navigation-to-custom-protocols，这些值的具体含义见这里

  • allow

    指定哪些设备访问权限在哪些域名下被允许。格式如<directive> <allowlist>，directive常见取值有摄像头camera、定位geolocation、全屏fullscreen、麦克风microphone等等，在苹果系统可能会有兼容性问题。

    该属性是在Permissions-Policy头指定策略基础上作进一步的限制，不会替换。

    关于Permissisons Policy介绍见这里

  • allowfullscreen

    是否允许全屏，相当于allow="fullscreen"

  • referrerpolicy

    可参考a标签属性referrerpolicy介绍

html
<iframe
  allow="geolocation 'self' http://localhost:52330"
  allowfullscreen
  width="600"
  name="subWindow"
  height="300"
  sandbox="allow-scripts allow-modals"
  src="https://www.baidu.com"
  srcdoc="<img src='./loading.gif' /><script>alert();</script>"></iframe>

table ​

表格元素。直接上示例，认识两种常用的表格结构。

html
<style>
  table {
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid black;
  }

  .fs18 {
    font-size: 18px;
  }

  .bold {
    font-weight: bold;
  }

  .red {
    color:red;
  }
</style>
<table>
  <!-- 标题 -->
  <caption>表格标题</caption>
  <!-- 表格头部 -->
  <thead>
    <tr>
      <th>头部1</th>
      <th>头部2</th>
      <th>头部3</th>
      <th>头部4</th>
    </tr>
  </thead>
  <!-- 表格内容 -->
  <tbody>
    <tr>
      <!-- 列、行合并数 -->
      <td colspan="2" rowspan="2">1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
    </tr>
  </tbody>
  <!-- 表格底部 -->
  <tfoot>
    <tr>
      <td>底部1</td>
      <td>底部2</td>
      <td>底部3</td>
      <td>底部4</td>
    </tr>
  </tfoot>
</table>
<br/>
<table>
  <!-- 列组，可为某一列作一些定制 -->
  <colgroup>
    <!-- 列 -->
    <col span="1" class="fs18"/>
    <col span="1" class="bold"/>
    <col span="2" class="red" />
  </colgroup>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
  </tr>
</table>

其他元素 ​

上面介绍的元素是本人觉得比较重要，需要加强学习做的笔记。

下面通过一段代码简单认识下其他元素。

html
<!-- 块引用元素。提供表示引用源属性cite。 -->
<blockquote cite="https://www.baidu.com">不懂就找百度</blockquote>

<!-- br与hr二者比较容易混淆，放一起介绍。首先都是单元素，br表示换行，hr表示水平线。 -->
换行了
<br />
水平线：
<hr />

<!-- 上标标签 -->
<p>
  <var>a<sup>2</sup></var> + 
  <var>b<sup>2</sup></var> = 
  <var>c<sup>2</sup></var>
</p>

<!-- 下标标签 -->
<p>CO<sub>2</sub></p>

<ul style="padding:10px;list-style:none;">
  <li>meter标签：
    <meter min="0" 
      max="10" 
      lower="2" 
      higher="8"
      optimum="7" 
      value="6"></meter>
  </li>
  <li>progress标签：
    <progress max="100"
      value="80"></progress>
  </li>
  <li>mark标签：
    <mark>做个标记</mark>
  </li>
  <li>hgroup标签：
    <hgroup>
      <h1>用于</h1>
      <h2>包含</h2>
      <h3>h1、h2、h3、h4、h5、h6</h3>
      <h4>等</h4>
      <h5>标题</h5>
      <h6>标签</h6>
    </hgroup>
  </li>
  <li>details标签：
    <details>详情标签是块标签</details>
  </li>
  <li>dialog标签：
    <dialog open>
      <h3>这是一个对话框</h3>
      <p>通过open属性打开的是非对话框，建议通过<code>HTMLDialogElement.showModal()</code>方式打开</p>
    </dialog>
  </li>
  <li>summary标签：
    <summary>summary元素是块标签</summary>
  </li>
  <li>time标签：
    <time datetime="2023-03-10T03:00:00">03:00</time>
  </li>
</ul>