文本语义标签
| 标签 | 含义 | 视觉效果 | 使用场景 |
|---|
<mark> | 标记/高亮 | 黄色背景 | 搜索结果关键词、重点提示 |
<del> | 删除的文本 | 删除线 | 原价被划掉 |
<ins> | 插入的文本 | 下划线 | 新增内容、修改记录 |
<small> | 小号文本 | 字体变小 | 版权声明、免责说明、旁注 |
<code> | 代码片段 | 等宽字体 | 展示一行代码，如<div> |
<pre> | 预格式文本 | 保留空格和换行，等宽字体 | 展示大段代码、ASCII艺术 |
<blockquote> | 长引用 | 自动缩进 | 引用大段他人文字 |
<q> | 短引用 | 自动加引号 | 引用一句话 |
<cite> | 作品标题 | 斜体 | 引用书名、电影名、文章名 |
<abbr> | 缩写 | 虚线下划线+鼠标悬停显示全称 | HTML、CSS |
<address> | 联系信息 | 斜体，独占一行 | 作者邮箱、公司地址 |
<time> | 日期时间 | 无特殊样式 | 文章发布日期、会议时间 |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本语义标签演示</title>
</head>
<body>
<h1>📝 网站更新公告</h1>
<!-- 时间与作者 -->
<p>发布日期：<time datetime="2026-05-14">2026年5月14日</time> by <address style="display: inline;">房老师@管理部</address></p>
<!-- 高亮与删除/插入 -->
<p>新版发布：<mark>添加MBTI选择提示！</mark> 原价 <del>¥199</del>，现价 <ins>¥0</ins> <small>（限时优惠）</small></p>
<!-- 代码展示 -->
<p>操作命令：在终端输入 <code>mbti</code></p>
<p>一段完整的代码示例：</p>
<pre><code>
请输入命令:
checkin每日打卡
nickname修改昵称
sex修改性别
mbti修改MBTI
logout退出登录
➜ ~ mbti
选E或I：喜欢跟朋友一起玩、精力无限（E）｜喜欢独处，安静使你恢复能量（I）
选S或N：学习知识时，关注步骤和应用（S）｜学习知识时，琢磨原理和意义（N）
选T或F：朋友倾诉烦恼，分析解决方案（T）｜朋友倾诉烦恼，表达理解关心（F）
选J或P：对于作业，喜欢制定计划完成（J）｜对于作业，喜欢灵活压时完成（P）
最终结果如：INTJ,INTP,ENTJ,ENTP,INFJ,INFP,ENFJ,ENFP,ISTJ,ISFJ,ESTJ,ESFJ,ISTP,ISFP,ESTP,ESFP
请输入符合你性格特点的MBTI类型 (4个字符):
➜ ~ INTJ
MBTI已更新为: INTJ
</code></pre>
<!-- 引用 -->
<p>正如某位大佬所说：<q>代码是写给人看的</q>。</p>
<blockquote cite="https://example.com/article">
<p>HTML的语义化非常重要，不仅利于SEO，更能让屏幕阅读器正确理解内容。</p>
<footer>—— <cite>《Web开发指南》</cite></footer>
</blockquote>
<!-- 缩写 -->
<p>你正在学习 <abbr title="HyperText Markup Language">HTML</abbr> 和 <abbr title="Cascading Style Sheets">CSS</abbr>。</p>
</body>
</html>
内容分区标签
| 标签 | 含义 | 相当于 | 使用场景 |
|---|
<header> | 页眉 | 包含logo、导航、标题的区域 | 网页顶部、文章头部 |
<nav> | 导航链接 | 主要导航菜单 | 顶部菜单、侧边栏菜单 |
<main> | 主内容 | 页面核心独有的内容 | 每个页面只出现一次 |
<article> | 独立文章 | 可独立分发的内容 | 博客文章、新闻条目、产品卡片 |
<section> | 章节 | 内容块，通常带标题 | 文章的章节、网页的功能区块 |
<aside> | 侧边栏 | 与主内容间接相关 | 侧边广告、相关链接、作者简介 |
<footer> | 页脚 | 底部信息 | 版权声明、联系方式、备案号 |
相当于有意义的div
交互类标签
| 标签 | 含义 | 作用 | 示例 |
|---|
<details> | 详情/折叠面板 | 点击可展开隐藏内容 | 常见于FAQ、折叠菜单 |
<summary> | 总结/标题 | 配合<details>，作为可见的标题 | 点击<summary>展开/收起 |
<dialog> | 对话框 | 弹出提示框（需配合JS的.showModal()） | 模态框、确认弹窗 |
<progress> | 进度条 | 显示任务完成百分比 | 上传进度、下载进度 |
<meter> | 度量条 | 显示已知范围内的数值 | 磁盘使用量、投票结果 |
示例：
<!-- 折叠面板 -->
<details>
<summary>📖 展开查看答案</summary>
<p>HTML是超文本标记语言，用于构建网页结构。</p>
</details>
<!-- 进度条 -->
<p>下载进度：<progress value="70" max="100">70%</progress></p>
<!-- 度量条（默认绿色，可根据阈值变颜色） -->
<p>电量：<meter value="0.8">80%</meter></p>
<p>内存使用：<meter value="0.9" min="0" max="1" low="0.5" high="0.8" optimum="0.6">90%</meter></p>
嵌入类标签
| 标签 | 含义 | 作用 | 典型用途 |
|---|
<iframe> | 内联框架 | 在当前页面嵌入另一个网页 | 嵌入YouTube视频、Google地图、第三方小工具 |
<embed> | 嵌入外部资源 | 嵌入插件内容（Flash、PDF等） | 已过时，尽量用<object>或<iframe>代替 |
<object> | 对象 | 嵌入图片、PDF、Flash等 | 嵌入PDF文档 |
<iframe> 重点 | 内联框架 | 嵌入另一个HTML页面 | 最常用：嵌入视频、地图 |
列表标签（定义列表）
| 标签 | 含义 | 作用 |
|---|
<dl> | 定义列表 | 包裹整个列表 |
<dt> | 定义术语 | 要解释的名词 |
<dd> | 定义描述 | 对名词的解释 |
示例
<h3>前端三剑客</h3>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，负责网页结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表，负责网页样式。</dd>
<dt>JavaScript</dt>
<dd>脚本语言，负责网页行为。</dd>
</dl>
转义字符
| 显示结果 | 实体名称 | 实体编号 | 说明 |
|---|
< | < | < | 小于号 |
> | > | > | 大于号 |
& | & | & | &符号 |
" | " | " | 双引号 |
' | ' | ' | 单引号 |
| |   | 不换行空格 |
© | © | © | 版权符号 |
® | ® | ® | 注册商标 |
¥ | ¥ | ¥ | 人民币/日元符号 |