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