应优先用而非：表达内容重要性，影响屏幕阅读器语调和seo权重；仅视觉加粗，无语义，适用于品牌名等纯样式场景。
用 <strong></strong> 还是 <b></b>？语义优先，别只看加粗效果
浏览器渲染出来都是粗体，但语义完全不同。<strong></strong> 表示内容有重要性（比如警告、关键操作提示），屏幕阅读器会加重语气；<b></b> 仅表示视觉突出，无语义权重（比如产品名、关键词高亮）。
常见错误：用 <b></b> 标记“必填项”或“错误提示”，导致无障碍体验降级。
- 表单校验提示、权限警告 → 用
<strong></strong> - 文章中首次出现的术语、品牌名 → 用
<b></b> - 不要嵌套
<strong></strong>来“加更粗”，它不是样式放大器
<mark></mark> 不是高亮笔，它有明确的语义边界
<mark></mark> 的本意是“在引用上下文中标记相关片段”，比如搜索结果中的关键词匹配、文档修订时的新增内容。它不是通用高亮工具。
容易踩的坑：用 <mark></mark> 给按钮文字或导航菜单加背景色——这属于样式需求，应交由 CSS 的 background-color 控制。
- 搜索页中用户输入的关键词匹配段落 → 合理使用
<mark></mark> - 价格标签、状态徽章（如“已发货”）→ 用
<span class="badge"></span>+ CSS - 注意默认样式在不同浏览器中略有差异，建议重置
mark { background-color: #ff0; }以保一致
别再用 <u></u> 做下划线，除非你真在标拼写错误
HTML5 明确将 <u></u> 限制为两类场景：拼写错误（spelling）和专有名词（proper-name）。普通下划线装饰必须用 CSS 实现。
原因很实际：用户看到下划线第一反应是“可点击”，滥用 <u></u> 会破坏交互预期，还可能被读屏软件误读为链接。
- 中文文档中标注错别字（如“ recieved” → “recieved”）→ 可用，但需配合
role="spelling" - 想让标题文字带下划线 → 改用
text-decoration: underline - 已有旧项目大量
<u></u>，建议批量替换为<span class="underline"></span>
<s></s> 和 <del></del> 的区别，决定你是否要保留删除痕迹
<s></s> 表示内容不再准确或不适用（比如过期价格、已停售型号），不强调谁删的、何时删的；<del></del> 则用于编辑痕迹，支持 datetime 和 cite 属性，适合协作文档、法律条文修订。
性能影响虽小，但语义混淆会导致内容管理系统（CMS）无法正确提取变更历史。
- 电商页面显示“原价
$199$149” → 用<s></s> - Github PR 中展示代码删除行 → 必须用
<del datetime="2026-09-28T14:22"></del> - 避免对整段文字套
<s></s>，它只适用于短文本片段；大块废弃内容应移除 DOM 或用 CSS 隐藏
真正难的不是记住每个标签怎么写，而是每次敲下 时，先问一句：这个格式化，是给机器看的（语义），还是只给人眼看的（样式）？混用一次，后续的可访问性测试、SEO 分析、自动化内容抽取就可能出岔子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
