应优先使用语义化标签：<strong>表重要性（如警告）、<em>表重读强调；<b><i>仅视觉加粗/斜体；<u>表非文本注释、<s>表过时内容、<del>表已删除；<small>专用于旁注，<sup>/<sub>仅限上标/下标语义场景。
<strong> 和 <em> 是语义正确的首选，<b> 与 <i> 仅在纯视觉需求时可用。
什么时候该用 <strong> 而不是 <b>
当你想告诉浏览器“这段文字很重要”，比如错误提示、操作警告、法律条款关键句，就该用 <strong>。它会被屏幕阅读器加重语气读出，搜索引擎也会加权识别；而 <b> 只是“让它变粗一点”，比如产品名、品牌词、UI 中的标签文字——这些不需要语义强调，只求视觉突出。
常见错误现象：<b> 被大量用于新闻标题、按钮文字、价格数字，结果整页都是“视觉加粗”，但没有任何语义结构可言，对无障碍和 SEO 都无益。
- ✅ 正确场景：
<strong>密码必须包含至少 8 位字符</strong> - ❌ 错误滥用：
<b>立即购买</b>（应改用 CSS 的font-weight或语义更合适的<button>） - ⚠️ 兼容性影响：所有现代浏览器渲染效果一致，但旧版 IE 对
<strong>的语音输出支持较弱
<em> 和 <i> 的核心区别在哪
<em> 表示“这句话里这个部分需要重读”，是语义上的强调，比如“你真的确定要删除？”；<i> 则只是“让它斜着显示”，适用范围很窄：拉丁术语（<i>et al.</i>）、船名（<i>Titanic</i>）、小说中人物内心活动（<i>这不可能…</i>）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：把“斜体菜单项”“斜体注释”全写成 <em>，导致语义混乱；或者反过来，把本该用 <i> 的术语硬套 <em>，让屏幕阅读器错误地加重朗读。
- ✅ 正确：
<p>请确认 <em>所有字段</em> 已填写完整</p> - ✅ 正确：
<p>该反应式设计基于 <i>mobile-first</i> 原则</p> - ❌ 错误：
<span><i>2026年8月</i></span>（日期无需斜体，更不该用<i>）
<u>、<s>、<del> 这三个下划线/删除线标签怎么选
HTML5 彻底重定义了它们的语义：<u> 不再是“加下划线”，而是表示“非文本类注释”，比如拼写纠错（<u>recieve</u>）、中文专名号；<s> 表示内容“已过时/不再准确”，比如旧价格、失效政策；<del> 表示“文档中已被删除的内容”，常配合 <ins> 使用，体现修订痕迹。
性能上没差异，但混淆使用会破坏可访问性。例如用 <s> 标记用户取消订单的状态，其实应该用状态文案 + CSS，而不是靠删除线暗示逻辑。
- ✅ 正确：
<p>原价<s>¥199</s>，限时 ¥149</p> - ✅ 正确：
<p>她写了<del>three</del><ins>four</ins> 个测试用例</p> - ⚠️ 注意：
<u>默认带下划线，但若 CSS 清除了text-decoration，它的语义就完全丢失了——务必搭配title或 ARIA 属性补全
<small> 和 <sup>/<sub> 的典型误用点
<small> 不是“调小字号”的快捷方式，它专指旁注类内容：版权信息、法律免责声明、脚注说明。滥用它来压低导航文字或按钮文案，会让语义失焦，也违背响应式设计原则。
<sup> 和 <sub> 必须严格对应语义场景：<sup> 仅用于上标（如“m2”、“第1st名”），<sub> 仅用于下标（如“H2O”、“xi”）。拿它们做角标、版本号、图标微标，属于语义错配。
- ✅ 正确：
<small>© 2026 Lobster AI. 保留所有权利。</small> - ❌ 错误：
<span class="version">v<sup>2.3.1</sup></span>（应改用普通<span>+ CSS） - ⚠️ 容易被忽略：数学公式或化学式中混用
<sup>/<sub>时，若未包裹在<var>或<code>内，可能影响 MathML 解析或代码高亮
