Markdown 中 HTML 标签指南（含详细解释与示例）

本指南展示在 Markdown 中可使用的 HTML 标签，每个标签首次出现时添加注释说明其含义和全称。

一、文本格式化标签

1.1 基本文本样式

<!-- p: 段落 (Paragraph) -->
<p>这是普通段落文本</p>

这是普通段落文本

<!-- b: 粗体 (Bold) -->
<p><b>加粗文本 (无语义)</b></p>

加粗文本 (无语义)

<!-- strong: 强调内容 (Strong importance) -->
<p><strong>重要文本 (有语义)</strong></p>

重要文本 (有语义)

<!-- i: 斜体 (Italic) -->
<p><i>斜体文本 (无语义)</i></p>

斜体文本 (无语义)

<!-- em: 强调 (Emphasis) -->
<p><em>强调文本 (有语义)</em></p>

强调文本 (有语义)

<!-- u: 下划线 (Underline) -->
<p><u>下划线文本</u></p>

下划线文本

<!-- del: 删除文本 (Deleted text) -->
<p><del>删除线文本</del></p>

~~删除线文本~~

<!-- ins: 插入文本 (Inserted text) -->
<p><ins>插入文本</ins></p>

插入文本

<!-- mark: 标记文本 (Marked text) -->
<p><mark>高亮标记文本</mark></p>

高亮标记文本

<!-- small: 小号文本 (Small text) -->
<p><small>小号文本</small></p>

小号文本

<!-- sub: 下标 (Subscript) -->
<!-- sup: 上标 (Superscript) -->
<p>H<sub>2</sub>O 和 E=mc<sup>2</sup></p>

H₂O 和 E=mc²

1.2 代码与键盘

<!-- code: 代码片段 (Code) -->
<p>使用<code>print("Hello World")</code>输出文本</p>

<!-- kbd: 键盘输入 (Keyboard input) -->
<p>保存快捷键: <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

<!-- pre: 预格式化文本 (Preformatted text) -->
<pre>
function hello() {
  console.log("格式化代码块");
}
</pre>

效果预览：

使用print("Hello World")输出文本

保存快捷键: Ctrl + S

function hello() {
  console.log("格式化代码块");
}

1.3 引用与缩写

<!-- blockquote: 块引用 (Block quotation) -->
<blockquote>
  <p>这是引用文本</p>

  <!-- cite: 引用来源 (Citation) -->
  <footer>- <cite>名人名言</cite></footer>
</blockquote>

<!-- abbr: 缩写 (Abbreviation) -->
<p><abbr title="HyperText Markup Language">HTML</abbr>是网页基础</p>

<!-- q: 短引用 (Short quotation) -->
<p><q>这是短引用</q> - 某人说</p>

效果预览：

这是引用文本

- 名人名言

HTML是网页基础

这是短引用 - 某人说

二、布局容器标签

2.1 通用容器

<!-- div: 内容分区 (Division) -->
<div style="background:#f0f8ff; padding:15px; border-radius:8px">
  <h3>分区容器</h3>

  <!-- span: 行内容器 (Span) -->
  <p>用于组织内容区块，<span style="color:red">行内容器</span>用于样式化文本</p>
</div>

效果预览：

分区容器

用于组织内容区块，行内容器用于样式化文本

2.2 语义化容器

<!-- header: 页眉 (Header) -->
<header style="background:#333; color:white; padding:10px">
  <h1>网站标题</h1>

  <!-- nav: 导航 (Navigation) -->
  <nav>
    <a href="#" style="color:white; margin-right:15px">首页</a>
    <a href="#" style="color:white">联系我们</a>
  </nav>
</header>

<!-- main: 主体内容 (Main content) -->
<main style="padding:20px">
  <!-- article: 独立内容 (Article) -->
  <article>
    <h2>文章标题</h2>
    <p>独立的内容区块</p>
  </article>

  <!-- aside: 侧边栏 (Aside content) -->
  <aside style="background:#e9ecef; padding:15px; margin-top:20px">
    <h3>侧边栏内容</h3>
    <p>相关链接或附加信息</p>
  </aside>
</main>

<!-- footer: 页脚 (Footer) -->
<footer style="background:#333; color:white; text-align:center; padding:10px">
  <p>&copy; 2023 公司名称</p>
</footer>

效果预览：

网站标题

文章标题

独立的内容区块

三、列表标签

3.1 有序与无序列表

<!-- ul: 无序列表 (Unordered list) -->
<ul>
  <!-- li: 列表项 (List item) -->
  <li>无序列表项 1</li>
  <li>无序列表项 2
    <ul>
      <li>嵌套列表项 A</li>
      <li>嵌套列表项 B</li>
    </ul>
  </li>
</ul>

<!-- ol: 有序列表 (Ordered list) -->
<ol>
  <li>有序列表项 1</li>
  <li>有序列表项 2</li>
  <li>有序列表项 3</li>
</ol>

效果预览：

无序列表项 1
无序列表项 2
- 嵌套列表项 A
- 嵌套列表项 B

有序列表项 1
有序列表项 2
有序列表项 3

3.2 描述列表

<!-- dl: 描述列表 (Description list) -->
<dl>
  <!-- dt: 描述术语 (Description term) -->
  <dt>HTML</dt>

  <!-- dd: 描述内容 (Description details) -->
  <dd>超文本标记语言</dd>

  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

效果预览：

HTML: 超文本标记语言
CSS: 层叠样式表

四、表格标签

<!-- table: 表格 (Table) -->
<table border="1" style="width:100%; border-collapse:collapse">
  <!-- caption: 表格标题 (Caption) -->
  <caption>员工信息表</caption>

  <!-- thead: 表头 (Table head) -->
  <thead style="background:#f2f2f2">
    <!-- tr: 表格行 (Table row) -->
    <tr>
      <!-- th: 表头单元格 (Table header) -->
      <th>ID</th>
      <th>姓名</th>
      <th>职位</th>
      <th>部门</th>
    </tr>
  </thead>

  <!-- tbody: 表格主体 (Table body) -->
  <tbody>
    <tr>
      <!-- td: 表格数据 (Table data) -->
      <td>001</td>
      <td>张三</td>
      <td>前端工程师</td>
      <td rowspan="2">技术部</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>后端工程师</td>
    </tr>
  </tbody>

  <!-- tfoot: 表格页脚 (Table footer) -->
  <tfoot style="background:#e6f7ff">
    <tr>
      <td colspan="3">总计</td>
      <td>2人</td>
    </tr>
  </tfoot>
</table>

效果预览：

员工信息表
ID	姓名	职位	部门
001	张三	前端工程师	技术部
002	李四	后端工程师	技术部
总计			2人

五、媒体标签

5.1 图片

<!-- figure: 独立内容 (Figure with optional caption) -->
<figure>
  <!-- img: 图像 (Image) -->
  <img src="https://via.placeholder.com/600x300?text=示例图片" 
       alt="占位图片"
       style="width:100%; border-radius:8px">

  <!-- figcaption: 图标题 (Figure caption) -->
  <figcaption>图1: 带标题的图片</figcaption>
</figure>

效果预览：

5.2 音频与视频

<!-- audio: 音频内容 (Audio content) -->
<audio controls style="width:100%">
  <!-- source: 媒体源 (Media source) -->
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素
</audio>

<!-- video: 视频内容 (Video content) -->
<video controls width="100%" style="margin-top:15px">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频标签
</video>

效果预览（占位）：

音频播放器占位

视频播放器占位

六、交互元素

6.1 可折叠内容

<!-- details: 折叠内容 (Disclosure widget) -->
<details style="margin-bottom:20px; border:1px solid #ddd; border-radius:4px">
  <!-- summary: 折叠标题 (Summary for details) -->
  <summary style="background:#f8f9fa; padding:10px; cursor:pointer">
    点击查看详情
  </summary>

  <div style="padding:15px">
    <h3>隐藏内容标题</h3>
    <p>可折叠区域内的内容</p>
  </div>
</details>

效果预览：

点击查看详情

隐藏内容标题

可折叠区域内的内容

6.2 进度指示器

<!-- progress: 进度条 (Progress bar) -->
<label for="progress">任务进度:</label>
<progress id="progress" value="65" max="100" style="width:100%">65%</progress>

<!-- meter: 度量器 (Gauge) -->
<label for="storage">存储使用:</label>
<meter id="storage" value="7" min="0" max="10" style="width:100%">7/10</meter>

效果预览：
任务进度:

65%

存储使用: 7/10

七、表单元素

<!-- form: 表单容器 (Form container) -->
<form style="background:#f8f9fa; padding:20px; border-radius:8px">
  <h3 style="margin-top:0">用户注册</h3>

  <!-- label: 表单标签 (Form label) -->
  <label for="name">姓名:</label>

  <!-- input: 输入控件 (Input control) -->
  <input type="text" id="name" placeholder="请输入姓名" style="width:100%; padding:8px; margin:5px 0 15px">

  <label for="email">邮箱:</label>
  <input type="email" id="email" placeholder="email@example.com" style="width:100%; padding:8px; margin:5px 0 15px">

  <label for="password">密码:</label>
  <input type="password" id="password" style="width:100%; padding:8px; margin:5px 0 15px">

  <label>性别:</label>
  <div style="margin:5px 0 15px">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male" style="margin-right:15px">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
  </div>

  <!-- select: 下拉列表 (Dropdown list) -->
  <label for="country">国家:</label>
  <select id="country" style="width:100%; padding:8px; margin:5px 0 15px">
    <!-- option: 下拉选项 (Dropdown option) -->
    <option value="">--请选择--</option>
    <option value="cn">中国</option>
    <option value="us">美国</option>
  </select>

  <!-- textarea: 多行文本 (Multiline text) -->
  <label for="bio">个人简介:</label>
  <textarea id="bio" rows="4" style="width:100%; padding:8px; margin:5px 0 15px"></textarea>

  <div>
    <input type="checkbox" id="agree">
    <label for="agree">我同意服务条款</label>
  </div>

  <!-- button: 按钮 (Button) -->
  <button type="submit" style="background:#007bff; color:white; border:none; padding:10px 20px; border-radius:4px; margin-top:15px; cursor:pointer">
    提交注册
  </button>
</form>

效果预览：

八、其他实用标签

8.1 分隔线与换行

<p>第一行文本
<!-- br: 换行 (Line break) -->
<br>强制换行后的第二行文本</p>

<!-- hr: 水平线 (Horizontal rule) -->
<hr style="border-top:2px dashed #ccc; margin:20px 0">
<p>分隔线后的内容</p>

效果预览：

第一行文本
强制换行后的第二行文本

分隔线后的内容

8.2 时间与日期

<!-- time: 时间日期 (Time/date) -->
<p>会议时间: <time datetime="2023-10-15T14:30">2023年10月15日 14:30</time></p>

效果预览：

会议时间: 2023年10月15日 14:30

九、转义字符

9.1 必须转义的 5 个核心字符

字符	名称	实体编码	十进制编码	缩写全写
`&`	与符号	`&`	`&`	ampersand (与符号)
`<`	小于号	`<`	`<`	less than (小于)
`>`	大于号	`>`	`>`	greater than (大于)
`"`	双引号	`"`	`"`	quotation mark (引号)
`'`	单引号	`'`	`'`	apostrophe (撇号)

9.2 常用特殊符号

字符	名称	实体编码	十进制编码	缩写全写
	空格	` `	` `	non-breaking space (不换行空格)
`©`	版权符号	`©`	`©`	copyright (版权)
`®`	注册商标	`®`	`®`	registered trademark (注册商标)
`™`	商标	`™`	`™`	trademark (商标)
`€`	欧元	`€`	`€`	euro (欧元)
`£`	英镑	`£`	`£`	pound (英镑)
`¥`	日元/人民币	`¥`	`¥`	yen (日元)
`¢`	美分	`¢`	`¢`	cent (分)
`§`	章节符号	`§`	`§`	section (章节)
`¶`	段落符号	`¶`	`¶`	paragraph (段落)
`•`	项目符号	`•`	`•`	bullet (项目符号)
`…`	省略号	`…`	`…`	horizontal ellipsis (水平省略号)

9.3 数学符号

字符	名称	实体编码	十进制编码	缩写全写
`×`	乘号	`×`	`×`	multiplication (乘)
`÷`	除号	`÷`	`÷`	division (除)
`±`	加减号	`±`	`±`	plus-minus (加减)
`≠`	不等于	`≠`	`≠`	not equal (不等于)
`≤`	小于等于	`≤`	`≤`	less or equal (小于等于)
`≥`	大于等于	`≥`	`≥`	greater or equal (大于等于)
`√`	平方根	`√`	`√`	square root (平方根)
`∞`	无穷大	`∞`	`∞`	infinity (无穷)
`∑`	求和	`∑`	`∑`	summation (求和)
`∫`	积分	`∫`	`∫`	integral (积分)
`∂`	偏微分	`∂`	`∂`	partial differential (偏微分)

9.4 希腊字母（常用）

字符	名称	实体编码	十进制编码	缩写全写
`α`	Alpha	`α`	`α`	alpha (阿尔法)
`β`	Beta	`β`	`β`	beta (贝塔)
`γ`	Gamma	`γ`	`γ`	gamma (伽马)
`δ`	Delta	`δ`	`δ`	delta (德尔塔)
`ε`	Epsilon	`ε`	`ε`	epsilon (艾普西隆)
`π`	Pi	`π`	`π`	pi (圆周率)
`σ`	Sigma	`σ`	`σ`	sigma (西格玛)
`ω`	Omega	`ω`	`ω`	omega (欧米伽)

9.5 箭头符号

字符	名称	实体编码	十进制编码	缩写全写
`←`	左箭头	`←`	`←`	left arrow (左箭头)
`→`	右箭头	`→`	`→`	right arrow (右箭头)
`↑`	上箭头	`↑`	`↑`	up arrow (上箭头)
`↓`	下箭头	`↓`	`↓`	down arrow (下箭头)
`↔`	左右箭头	`↔`	`↔`	horizontal arrow (水平箭头)
`↵`	回车箭头	`&crarr;`	`↵`	carriage return arrow (回车箭头)

9.6 其他重要字符及使用原则

字符	名称	实体编码	十进制编码	缩写全写
`♠`	黑桃	`&spades;`	`♠`	spade (黑桃)
`♣`	梅花	`&clubs;`	`♣`	club (梅花)
`♥`	红心	`&hearts;`	`♥`	heart (红心)
`♦`	方块	`&diams;`	`♦`	diamond (方块)
`°`	度	`°`	`°`	degree (度)
`µ`	微	`µ`	`µ`	micro (微)
`‰`	千分号	`&permil;`	`‰`	per mille (千分率)
`∀`	任意	`∀`	`∀`	for all (全称量词)
`∃`	存在	`∃`	`∃`	exists (存在量词)

使用原则：

必须转义：&, <, >, ", ' 在 HTML 中必须转义
推荐转义：在代码显示中，空格建议用   防止折叠
可选转义：其他符号可根据显示需要选择性转义
优先级：实体名称 > 十进制编码（实体名称更易读）
缩写规则：实体名称通常基于英文术语的缩写（如   = non-breaking space）

完整列表参考：

官方 HTML 字符实体列表：https://html.spec.whatwg.org/entities.json
W3C 实体参考：https://www.w3.org/TR/html4/sgml/entities.html

字符	名称	实体编码	十进制编码	缩写全写
	空格	` `	` `	non-breaking space (不换行空格)
`©`	版权符号	`©`	`©`	copyright (版权)
`®`	注册商标	`®`	`®`	registered trademark (注册商标)
`™`	商标	`™`	`™`	trademark (商标)
`€`	欧元	`€`	`€`	euro (欧元)
`£`	英镑	`£`	`£`	pound (英镑)
`¥`	日元/人民币	`¥`	`¥`	yen (日元)
`¢`	美分	`¢`	`¢`	cent (分)
`§`	章节符号	`§`	`§`	section (章节)
`¶`	段落符号	`¶`	`¶`	paragraph (段落)
`•`	项目符号	`•`	`•`	bullet (项目符号)
`…`	省略号	`…`	`…`	horizontal ellipsis (水平省略号)

字符	名称	实体编码	十进制编码	缩写全写
	空格	` `	` `	non-breaking space (不换行空格)
`©`	版权符号	`©`	`©`	copyright (版权)
`®`	注册商标	`®`	`®`	registered trademark (注册商标)
`™`	商标	`™`	`™`	trademark (商标)
`€`	欧元	`€`	`€`	euro (欧元)
`£`	英镑	`£`	`£`	pound (英镑)
`¥`	日元/人民币	`¥`	`¥`	yen (日元)
`¢`	美分	`¢`	`¢`	cent (分)
`§`	章节符号	`§`	`§`	section (章节)
`¶`	段落符号	`¶`	`¶`	paragraph (段落)
`•`	项目符号	`•`	`•`	bullet (项目符号)
`…`	省略号	`…`	`…`	horizontal ellipsis (水平省略号)

字符	名称	实体编码	十进制编码	缩写全写
	空格	` `	` `	non-breaking space (不换行空格)
`©`	版权符号	`©`	`©`	copyright (版权)
`®`	注册商标	`®`	`®`	registered trademark (注册商标)
`™`	商标	`™`	`™`	trademark (商标)
`€`	欧元	`€`	`€`	euro (欧元)
`£`	英镑	`£`	`£`	pound (英镑)
`¥`	日元/人民币	`¥`	`¥`	yen (日元)
`¢`	美分	`¢`	`¢`	cent (分)
`§`	章节符号	`§`	`§`	section (章节)
`¶`	段落符号	`¶`	`¶`	paragraph (段落)
`•`	项目符号	`•`	`•`	bullet (项目符号)
`…`	省略号	`…`	`…`	horizontal ellipsis (水平省略号)