应优先使用语义化标签：表强重要性（如警告、关键操作），表语气强调（重读）；和仅用于无语义加粗/斜体场景（如产品名、外文术语）；基本禁用，仅限拼写错误等非文本注释。
HTML格式化标签不是“怎么好看怎么用”，而是“语义对了，样式才稳”——<strong></strong>和<em></em>该用就用，<b></b>和<i></i>只在无语义加粗/斜体时兜底，<u></u>基本该禁用。
什么时候该用 <strong></strong> 而不是 <b></b>
浏览器渲染效果一样，但语义完全不同：<strong></strong> 表示内容具有强重要性（比如错误提示、关键操作按钮文字），会被屏幕阅读器加重朗读；<b></b> 仅表示“想加粗但不强调重要性”（比如产品名、关键词高亮）。
- ✅ 正确：
<p>请确认您的邮箱地址已<strong>通过验证</strong></p> - ❌ 滥用：
<p>我们的<b>旗舰产品</b>支持离线使用</p>→ 应改用<span class="product-name"></span>+ CSS - ⚠️ 注意：搜索引擎和辅助技术依赖语义，混用会弱化可访问性与 SEO 权重
<em></em> 和 <i></i> 的实际分界点
<em></em> 是语义化的“强调”，表达语气变化（如反语、重点重读）；<i></i> 仅用于非强调类斜体场景，比如外文术语、船名、生物分类名。
- ✅ 合理：
<p>他“当然<em>同意</em>了”——其实根本没答应</p> - ✅ 合理：
<p>学名是 <i>Homo sapiens</i></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - ❌ 错误：
<p>价格为<i>¥199</i></p>→ 数字不该用斜体，应移除或用 CSS 控制
为什么 <u></u> 标签现在基本不能用
HTML5 明确将 <u></u> 限定为“非文本惯例的下划线”，比如拼写错误标记、专有名词标注。普通内容加下划线，既违反用户预期（用户默认下划线 = 可点击链接），又破坏可访问性。
- ✅ 唯一推荐场景：
<p>原文有笔误：<u>recieve</u> 应为 receive</p> - ❌ 禁止场景：
<p>点击查看<u>详细说明</u></p>→ 必须用<a></a>或带role="link"的<span></span> - ? 替代方案：需要视觉下划线？统一用 CSS
text-decoration: underline，并确保颜色对比度 ≥ 4.5:1
<mark></mark>、<small></small>、<del></del> 的真实用途
这些标签常被当成“CSS 替代品”乱用，但它们各自承载明确语义，滥用会导致信息失真。
-
<mark></mark>：仅用于“文档中需要突出引用的内容”，比如搜索结果中的关键词高亮、法律条文中的引用段落 -
<small></small>：不是“调小字号”，而是表示“附属细则”，如版权信息、免责声明 —— 浏览器默认缩小，但语义才是重点 -
<del></del>：必须配合<ins></ins>使用，表示已被删除且有替代内容，如价格变动：<p><del>¥299</del> <ins>¥199</ins></p>
所有这些标签一旦脱离语义上下文，就只是“看起来像那么回事”的空壳 —— 真正影响渲染的是 CSS，真正影响理解的是语义结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
