本教程共 110 篇 · 第 109 篇 · 更新于 2026-07-28 · 约 4 分钟阅读

109. 语义化标签速查

本节目标：提供 HTML5 所有语义化标签的快速参考，按用途分类，每个标签配最小示例。

页面骨架标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  <header>页头：Logo、导航</header>
  <nav>导航链接</nav>
  <main>
    <article>独立文章</article>
    <aside>侧边栏</aside>
  </main>
  <footer>页脚：版权、链接</footer>
</body>
</html>

标签	含义	使用位置
`<header>`	页头或内容块头部	页面顶部、文章头部
`<nav>`	导航链接区域	主导航、面包屑、分页
`<main>`	页面主内容（唯一）	一个页面只出现一次
`<footer>`	页脚或内容块底部	页面底部、文章尾部

内容分区标签

标签	含义	示例
`<article>`	独立、可复用的内容	博客文章、新闻、评论
`<section>`	内容分组（有标题）	章节、功能区块
`<aside>`	间接相关的内容	侧边栏、引用、广告
`<figure>`	自包含的图文组合	图表、代码截图
`<figcaption>`	figure 的标题或说明	图注、表注

<article>
  <header>
    <h2>文章标题</h2>
    <time datetime="2024-01-15">2024年1月15日</time>
  </header>
  <section>
    <h3>第一节</h3>
    <p>内容...</p>
  </section>
  <section>
    <h3>第二节</h3>
    <figure>
      <img src="chart.png" alt="销售图表">
      <figcaption>图 1：月度销售趋势</figcaption>
    </figure>
  </section>
</article>

文本级语义标签

标签	含义	等价旧写法
`<strong>`	重要内容（加粗）	`<b>`
`<em>`	强调内容（斜体）	`<i>`
`<mark>`	高亮标记	`<span class="highlight">`
`<small>`	辅助信息（小字）	`<span class="small">`
`<cite>`	引用作品标题	`<span class="cite">`
`<q>`	短引用	手动加引号
`<abbr>`	缩写	`<span title="...">`
`<time>`	日期/时间	`<span class="time">`
`<dfn>`	定义术语	`<span class="term">`
`<code>`	代码片段	`<span class="code">`
`<del>`	已删除内容	`<s>`、`<strike>`
`<ins>`	新插入内容	`<u>`（语义不同）

<p>
  <strong>注意：</strong>提交后不可修改。
  <em>截止时间</em>是 <time datetime="2024-12-31">12月31日</time>。
  使用 <code>fetch()</code> 发送请求。
  参考<cite>《JavaScript 高级程序设计》</cite>。
  <abbr title="HyperText Markup Language">HTML</abbr> 是标准。
  <del>原价 99 元</del> <ins>现价 69 元</ins>
</p>

交互内容标签

标签	含义	默认行为
`<details>`	折叠面板	点击展开/收起
`<summary>`	details 的标题	可见的触发器
`<dialog>`	对话框	JS 控制 show/close

<details>
  <summary>点击展开查看详情</summary>
  <p>这是隐藏的内容...</p>
  <p>展开后才能看到</p>
</details>

<dialog id="modal">
  <p>这是对话框</p>
  <button onclick="this.parentElement.close()">关闭</button>
</dialog>

嵌入内容标签

标签	含义	常用属性
`<img>`	图片	`src`、`alt`、`width`、`height`
`<video>`	视频	`src`、`controls`、`autoplay`、`loop`
`<audio>`	音频	`src`、`controls`、`autoplay`
`<iframe>`	内嵌页面	`src`、`title`、`loading`
`<canvas>`	绘图区域	`width`、`height`
`<svg>`	矢量图形	`viewBox`、`width`、`height`
`<embed>`	外部内容	`src`、`type`
`<object>`	外部资源	`data`、`type`
`<source>`	媒体源	`src`、`type`、`media`
`<track>`	字幕	`src`、`kind`、`srclang`

表单相关标签

标签	含义	说明
`<form>`	表单	容器
`<fieldset>`	表单分组	带边框的分组
`<legend>`	分组标题	配合 fieldset
`<label>`	表单标签	关联 input
`<input>`	输入控件	type 决定形态
`<button>`	按钮	提交/普通/重置
`<select>`	下拉选择	配合 option
`<datalist>`	输入建议	配合 input 的 list 属性
`<option>`	选项	select 或 datalist 的子项
`<textarea>`	多行文本	大段文字输入
`<output>`	计算结果	表单计算输出
`<progress>`	进度条	任务进度
`<meter>`	度量计	范围内的标量值

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名：</label>
    <input id="name" type="text" required>
  </fieldset>

  <label for="browser">浏览器：</label>
  <input id="browser" list="browsers">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
  </datalist>

  下载进度：<progress value="70" max="100">70%</progress>
  评分：<meter value="4" min="0" max="5">4/5</meter>
</form>

表格相关标签

标签	含义
`<table>`	表格
`<caption>`	表格标题
`<thead>`	表头
`<tbody>`	表体
`<tfoot>`	表尾
`<tr>`	行
`<th>`	表头单元格
`<td>`	数据单元格
`<colgroup>`	列组
`<col>`	列

完整页面模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>网站 Logo</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
      <a href="/contact">联系</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>文章标题</h2>
        <time datetime="2024-01-15">2024-01-15</time>
      </header>
      <section>
        <h3>引言</h3>
        <p>文章内容...</p>
      </section>
      <section>
        <h3>详情</h3>
        <figure>
          <img src="photo.jpg" alt="描述图片内容">
          <figcaption>图注说明</figcaption>
        </figure>
      </section>
      <footer>
        <p>作者：张三</p>
      </footer>
    </article>

    <aside>
      <h3>相关文章</h3>
      <ul>
        <li><a href="#">文章 A</a></li>
        <li><a href="#">文章 B</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 我的网站</p>
  </footer>

  <script src="app.js"></script>
</body>
</html>

Tip

语义化标签的核心目的是：让代码对浏览器、搜索引擎、屏幕阅读器都更友好。视觉效果用 CSS 控制，标签只管结构和语义。