、、、是语义化标签：定义段落，表强重要性（如警告），表语气强调（如重读），表上下文相关高亮（如搜索匹配）；误用将损害seo与无障碍访问。
<p></p>、<strong></strong>、<em></em>、<mark></mark> 这些不是“加样式用的快捷键”，而是表达语义的结构单元——浏览器和屏幕阅读器靠它们理解“哪段是段落”“哪处强调重要”“哪句需要被高亮注意”。用错标签，视觉上可能看不出差别，但 SEO 和无障碍访问会直接掉链子。
为什么 <strong></strong> 比 <b></b> 更值得默认选
两者都让文字变粗，但语义完全不同：<strong></strong> 表示内容有强重要性（比如警告、关键条款），会被屏幕阅读器加重语气读出；<b></b> 仅表示“想突出显示”，不带权重含义，类似 PDF 里加粗一段标题但不改变其逻辑地位。
- 写错误提示时用
<strong>请检查邮箱格式</strong>，别用<b></b> - 纯装饰性加粗（比如品牌 slogan 的视觉强化）才考虑
<b></b> - 搜索引擎对
<strong></strong>内容赋予更高文本相关性权重
<em></em> 和 <i></i> 的边界在哪
<em></em> 是“强调语气”，比如“你<em>真的</em>确定要删除？”——读出来会有停顿和重音；<i></i> 是“不同语义类别”，比如外文词、船名、术语（<i>Homo sapiens</i>）、思想实验名称（<i>Turing Test</i>）。
- 别用
<i></i>给按钮文字斜体来“显得优雅”，那是 CSS 的事 - 如果某段斜体内容删掉后句子逻辑断裂，大概率该用
<em></em> - 部分老项目混用导致语音朗读混乱，检查
<i></i>是否真承载了语义差异
<mark></mark> 不是高亮笔，是“上下文相关标记”
<mark></mark> 的本意是标出与当前用户查询或上下文强相关的片段，比如搜索结果页中匹配关键词的部分。它不是通用“重点色块”工具。
- 用户搜“HTML 标签”，结果中
<mark>HTML</mark> 常用文本标签合理；但整段说明文字全用<mark></mark>就失焦 - 默认样式是黄底，但若设计规范要求蓝底，必须用 CSS 覆盖
mark { background: #4a90e2; }，不能靠换标签 - 和
<span class="highlight"></span>的区别在于：前者自带语义，后者纯为样式钩子
最容易被忽略的是：所有这些标签一旦嵌套过深（比如 <strong><em><mark>嵌套三层</mark></em></strong>），不仅可访问性工具难以解析主次，连开发者自己都容易搞混哪层在表达什么。语义越清晰，越要克制嵌套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
