应优先使用语义化html标签：表强重要性，表语气强调，表上下文相关高亮，表附属细则，表作品标题；避免用、等纯样式标签替代。
直接用 <strong></strong>、<em></em>、<mark></mark> 这类语义化格式化标签，比纯 CSS 更轻量、更可靠，也更利于 SEO 和屏幕阅读器识别。
什么时候该用 <strong></strong> 而不是 <b></b>
两者都让文字加粗，但语义完全不同：<strong></strong> 表示内容有强重要性（比如警告、关键操作提示），浏览器和读屏软件会加重语气；<b></b> 只是“视觉加粗”，没有语义权重，适合人名、产品名这类需要突出但不强调重要性的场景。
- 错误用法：
<b>警告：密码错误</b>—— 读屏器不会特殊处理，用户可能忽略 - 推荐用法：
<strong>警告：密码错误</strong>—— 读屏器会放慢语速并加重 - 注意：
<strong></strong>可以嵌套，但连续嵌套三层以上会让语义混乱，慎用
<em></em> 和 <i></i> 的实际分工
<em></em> 是“强调”，代表语气变化，比如反讽、重点重读；<i></i> 是“非文本惯用语”，比如外文词、船名、术语、生物分类名。别因为都斜体就混用。
- 正确：
<em>你真的确定要删除吗？</em>（语气强调） - 正确：
这本书引用了 <i>Homo sapiens</i> 的演化数据（拉丁学名） - 错误：
<i>请立即保存</i>—— 这是操作指令，该用<em></em>或<strong></strong>
用 <mark></mark> 替代手写 <span class="highlight"></span>
<mark></mark> 是原生高亮标签，语义明确（表示“与当前上下文相关”的内容），默认带黄色背景，且天然支持无障碍（读屏器会读作“高亮：xxx”）。
- 搜索结果页中匹配关键词，优先用
<mark>React</mark>，而不是<span class="highlight">React</span> - 它不依赖 CSS —— 即使样式被禁用，仍能通过 aria-label 或读屏器行为保留语义
- 避免滥用：整段
<mark></mark>会稀释重点，单次最多标 1–3 个词
别忘了 <small></small> 和 <cite></cite> 这两个冷门但实用的标签
<small></small> 不是“小号字体”的快捷方式，而是表示“附属细则”，比如版权信息、免责声明、脚注；<cite></cite> 必须用于作品标题（书、电影、文章名），不是作者名。
- 正确：
<small>© 2026 公司名称。保留所有权利。</small> - 错误：
<small>点击此处</small>—— 这是次要操作，该用<button></button>或链接 + CSS 控制大小 - 正确：
<blockquote>代码即文档</blockquote> <cite>《Clean Code》</cite> - 错误：
<cite>Robert C. Martin</cite>—— 作者名该用普通文本或<span></span>
最常被忽略的一点：格式化标签不是样式开关，而是语义锚点。一旦你开始用 <mark></mark> 替代 <span class="hl"></span>，后续想批量调整高亮样式、做无障碍审计、甚至提取关键片段生成摘要，都会变得可自动化——而这些，全靠标签本身是否“说真话”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
