HTML5

语义化标签

页面结构相关

<header>    <!-- 页面或区块的头部 -->
<footer>    <!-- 页面或区块的底部 -->
<main>      <!-- 页面主要内容 -->
<nav>       <!-- 导航栏 -->
<aside>     <!-- 侧边栏 -->
<section>   <!-- 区块 -->
<article>   <!-- 文章/帖子/独立的内容 -->

内容分区

<figure>    <!-- 图片/图表等媒体内容的容器 -->
  <figcaption><!-- figure的标题/说明 --></figcaption>
</figure>

<details>    <!-- 展开/收起的详情 -->
  <summary>  <!-- 详情的摘要/标题 --></summary>
</details>

文本相关

<mark>      <!-- 标记/高亮文本 -->
<time>      <!-- 时间标记 -->
<address>   <!-- 联系方式信息 -->
<code>      <!-- 代码块 -->
<pre>       <!-- 预格式化文本 -->
<blockquote><!-- 引用块 -->
<cite>      <!-- 引用来源 -->

列表相关

<ul>        <!-- 无序列表 -->
<ol>        <!-- 有序列表 -->
<li>        <!-- 列表项 -->
<dl>        <!-- 定义列表 -->
<dt>        <!-- 定义术语 -->
<dd>        <!-- 定义描述 -->

表单相关

<form>      <!-- 表单 -->
<fieldset>  <!-- 表单字段组 -->
<legend>    <!-- 字段组标题 -->
<label>     <!-- 表单标签 -->
<output>    <!-- 表单输出 -->

多媒体相关

<video>     <!-- 视频 -->
<audio>     <!-- 音频 -->
<picture>   <!-- 响应式图片容器 -->
<source>    <!-- 媒体源 -->
<track>     <!-- 字幕轨道 -->
最后更新于