应优先使用语义化标签：<strong>表强调（影响语音和SEO），<b>仅视觉加粗；<em>表重读，<i>表语境转换；<mark>表标记参考点，非UI高亮；<sub>/<sup>需注意行高与嵌套问题。
别用 <b> 和 <i> 做强调，语义错了就等于白写；纯视觉修饰一律交给 CSS。
什么时候该用 <strong> 而不是 <b>
两者都加粗，但浏览器和屏幕阅读器对 <strong> 会加重语气、提高音调，搜索引擎也视其为内容权重信号。<b> 只是“看起来粗”，没有任何语义价值。
- 警告、错误提示、法律条款关键句 → 用
<strong> - 产品名、品牌词、书名（仅需视觉突出）→ 用
<b>或更好：CSS 的font-weight - 嵌套使用
<strong>没问题，但三层以上会触发辅助技术异常播报，慎用
<em> 和 <i> 的核心区别在“重读”还是“换语境”
<em> 表示句子中需要重读的词，比如“我没说那句话”和“我没说那句话”意思不同；<i> 是换语境：外语词、术语、船名、小说中人物内心活动等。
- 拉丁短语
<i>et al.</i>、化学式<i>NaCl</i>→<i> - “你真的确定要删除？” →
<em> - 用
<i>包裹中文词（如“这个<i>很关键</i>”）属于误用，应改用<em>或 CSS
<mark> 不是高亮笔，是“文档中标记出的参考点”
<mark> 的语义是“这段文字被作者特意标记以供后续引用或比对”，不是 UI 上的荧光笔效果。默认黄色背景只是浏览器样式，可被 CSS 完全覆盖。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 搜索结果页中匹配关键词 → 合理使用
<mark> - 教程中“请重点关注此处” → 不该用
<mark>，而该用<strong>或自定义 class - 若需多色标记（红/蓝/绿），必须用 CSS 类，
<mark>本身不支持color或background属性
<sub> 和 <sup> 的行高陷阱
这两个标签会自动调整基线位置，但不会自动调节行高——导致上下标挤在一起或撑开段落间距。
- 化学式
H<sub>2</sub>O、数学幂x<sup>2</sup>必须确保父容器line-height足够（建议 ≥1.5） - 避免在
<small>内嵌套<sub>，字体缩放 + 下标位移易造成渲染错位 - 商标符号 ™、® 应直接用 Unicode 字符（
™、®），不用<sup>模拟
真正容易被忽略的是：所有这些标签的默认样式都依赖浏览器 UA stylesheet，Chrome 和 Safari 对 <u> 的下划线位置、<mark> 的背景透明度都不同；一旦项目要求跨浏览器一致，就必须显式重置，不能靠“它本来就应该那样”。
