html语义化标签需精准匹配意图：表重要性，仅视觉加粗；表删除保留痕迹，表内容失效；已弃用应改用css或；表上下文相关性，非强调；嵌套过深会破坏语义解析。
HTML格式化标签不是“能用就行”，关键在语义是否准确、浏览器行为是否可控、后续维护是否省力。用错一个<u></u>或<s></s>，可能让屏幕阅读器误读，也可能被CSS全局下划线规则意外覆盖。
什么时候该用 <strong></strong> 而不是 <b></b>
两者都加粗，但语义完全不同：<strong></strong> 表示内容有重要性（如警告、必填项提示），会被屏幕阅读器加重语气朗读；<b></b> 仅表示视觉加粗，无语义权重（比如人名、产品名需要突出但不强调其重要性）。
- 表单错误提示用
<strong>请输入有效邮箱</strong>—— 屏幕阅读器会停顿并重读 - 商品列表中品牌名用
<b>Apple</b> Watch Ultra—— 纯样式，不改变语义流 - 如果项目已用 CSS 统一设置了
b { font-weight: 600; }，再用<b></b>就容易和设计意图冲突
<del></del> 和 <s></s> 的实际差异在哪
<del></del> 表示文本被删除但保留在文档中（如编辑痕迹、法律条文修订），语义明确；<s></s> 表示内容不再准确或不适用（如过期价格、失效优惠），更偏向“废弃”含义。现代浏览器对二者渲染一致，但辅助技术会区别对待。
- 合同修订稿用
<del>¥599</del> ¥499—— 明确保留删除痕迹 - 电商页面标原价用
<s>¥1299</s> ¥999—— 暗示旧价已失效，非编辑过程 - 搜索引擎和无障碍工具会把
<del></del>当作可访问的变更记录，而<s></s>可能被忽略或降权
为什么 <u></u> 在 HTML5 中被弃用却还在用
根本原因是历史惯性 + 短平快需求，但风险明确：<u></u> 会和链接样式冲突（用户可能误点），且默认下划线在深色背景上几乎不可见。HTML5 推荐用 <ins></ins>（插入）或 CSS text-decoration: underline 替代。
- 拼写检查高亮应优先用
<u class="spelling-error">recieve</u>+ CSS 控制颜色/虚线，而非裸<u></u> - 中文专有名词标注（如人名、地名）用
<u></u>是妥协方案，但必须配role="note"提升可访问性 - 某些 CMS 或 Markdown 渲染器仍输出
<u></u>，上线前建议用 DOM 检查工具批量替换为带 class 的<span></span>
<mark></mark> 不只是“高亮黄色背景”
<mark></mark> 的本意是标记文档中“与当前上下文相关”的内容，比如搜索关键词、引用片段、重点结论。它默认黄色背景只是 UA 样式，真正价值在于语义可检索、可样式隔离。
- 搜索结果页用
<p>本文讨论了<mark>HTML5</mark>的语义化改进</p>—— JS 可轻松提取所有<mark></mark>内容生成摘要 - 配合 CSS
mark { background-color: #ffeb3b; color: #212121; }能避免默认黄色在浅黄背景上消失 - 不要用
<mark></mark>替代<strong></strong>做强调，它不传递重要性，只表示“相关性”
最容易被忽略的是：所有这些标签一旦嵌套过深（比如 <strong><mark><del></del></mark></strong>），就会让语义层叠混乱，辅助技术和 SEO 解析器可能放弃理解。保持单层语义、用 class 控制复合样式，才是长期可维护的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
