语义标签应优先于样式标签：表强重要性（如价格、警告），仅视觉加粗（如品牌词）；表语义重音（如“真的”），表特殊文本（如外文术语）；用于边注/版权，用于上下文高亮，须与配对表示修订。
<strong></strong> 和 <em></em> 是语义正确的首选，不是为了加粗或斜体而用，而是为了表达“重要”和“强调”；<b></b> 和 <i></i> 仅改样式、无语义，现代项目中应谨慎使用。
什么时候该用 <strong></strong> 而不是 <b></b>
浏览器渲染效果可能一样，但语义完全不同：<strong></strong> 表示内容具有强重要性（比如价格、警告、操作按钮文字），会被屏幕阅读器加重语气朗读；<b></b> 只是视觉加粗，比如产品名、关键词、中文报刊常用标题样式——它不暗示优先级或 urgency。
- 电商页面中“¥99.9”用
<strong></strong>，因为它是关键决策信息 - 品牌 slogan 中的 “UltraFast™” 用
<b></b>，纯为突出品牌词，无逻辑权重 - SEO 工具会识别
<strong></strong>内容为高相关文本，<b></b>基本不参与权重计算 - 在无障碍测试中，
<b></b>不触发任何辅助技术行为，<strong></strong>会改变语音语调
<em></em> 和 <i></i> 的实际分界在哪
<em></em> 表示语义上的重音强调，比如一句话里哪个词被读得更重；<i></i> 则用于非默认语调/字体的文本，如外文术语、生物种名、船名、思想流文本等——它本质是“换一种字体风格”，不是“我要强调这个”。
- “你**真的**确定要删除？”中，“真的”适合用
<em></em> - “《
<i>Homo sapiens</i>” 必须用<i></i>，这是生物学命名规范 - “点击
<i>设置</i> → <code><i>隐私</i>” 中的菜单项用<i></i>，表示界面中的专有名称而非强调 - 误用
<i></i>替代<em></em>会导致语音朗读失去节奏感，尤其对视障用户不友好
<small></small>、<mark></mark>、<del></del> 这三个标签常被当成样式工具，但它们有明确语义约束
它们不是“小号字”“高亮色”“删掉就行”的快捷方式，HTML5 规范对每个都有用途定义：
-
<small></small>专用于“边注、版权、法律声明”这类次要但需保留的文本，不是任意缩小字体的手段；滥用会导致可访问性问题（缩放时可能过小） -
<mark></mark>表示“文档中与当前上下文相关的高亮部分”，比如搜索结果页中匹配的关键词；不能用于装饰性背景色 -
<del></del>必须配合<ins></ins>使用才完整，表示“已被删除但仍保留在历史记录中”的内容（如合同修订稿）；单独用<del></del>而不提供<ins></ins>是语义断裂 - CSS 可覆盖这些标签的默认样式，但不能抹除其语义——改样式不等于改含义
真正容易被忽略的是：所有这些标签一旦嵌套进 <p></p> 或 <div>，就不再只是“换个样子”，而是向整个文档结构注入了可解析的语义信号。浏览器、爬虫、读屏器都依赖这个信号做判断，而不是看你用了什么 CSS 类名。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
