应优先使用语义化标签：用于重要内容强调（影响读屏与seo），仅作视觉加粗；表示重音语义强调，用于外语、术语等排版惯例；表达完整思想单位，仅作无语义换行；仅作样式或脚本钩子，不可替代语义标签。
什么时候该用 <strong></strong> 而不是 <b></b>
语义优先：如果这段文字在逻辑上是“重要内容”或“必须被强调”，比如警告、关键操作提示、法律条款中的责任条款，就用 <strong></strong>。它告诉屏幕阅读器“这里很重要”，也影响 SEO 权重。
而 <b></b> 只是视觉加粗，没有语义含义——适合品牌名、产品名、关键词高亮这类“需要醒目但不改变信息权重”的场景。
-
<strong></strong>会被 NVDA、VoiceOver 等读屏软件加重语气朗读；<b></b>不会 - 搜索引擎更倾向把
<strong></strong>内容当作页面核心关键词之一 - 两者默认样式都是加粗，但 CSS 可以单独覆盖：
strong { font-weight: 600; }和b { font-weight: 700; }完全可行
<em></em> 和 <i></i> 的区别不只是斜体
<em></em> 表示“重音强调”，有明确的语义节奏变化，比如：“你真的确定要删除？”里的“真的”适合用 <em></em>；读屏时会放慢或提高语调。
<i></i> 是“非文本语义的斜体”，典型用途包括：外语词（<i>bonjour</i>）、科技术语（<i>E = mc²</i>）、船名（<i>Titanic</i>）——这些不是强调，而是约定俗成的排版惯例。
- 滥用
<i></i>做“美化斜体”会削弱可访问性，尤其对认知障碍用户 - HTML5 明确将
<i></i>归类为“分隔式语义”，不是样式标签 - 不要用
<i></i>包裹整段说明文字来“显得专业”，那是设计问题，不是语义问题
<p></p> 不是万能换行工具，<br> 也不是
<p></p> 是块级段落容器，自带上下外边距和换行行为，语义上代表“一个完整思想单位”。连续写多个 <p></p>（比如每行一句诗）会破坏结构，也导致样式难以统一控制。
<br> 是纯换行符，无语义，仅用于必须保留换行但又不构成新段落的场景：地址、诗歌、歌词、表单内联提示文字。
- 错误写法：
<p>第一行</p> <p>第二行</p> <p>第三行</p>→ 实际是三个独立段落，语义断裂 - 正确写法（诗歌）：
<p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p> - 地址建议用
<address></address>标签，比<br>更语义化
<span></span> 的唯一正当用途是“无语义的样式/脚本钩子”
<span></span> 是纯行内容器，不带任何语义，它的存在意义只有一个：给某段文字加 class 或 data 属性，以便 CSS 控制样式或 JS 绑定行为。
别把它当“轻量 <div>”用，更不能替代 <code><strong></strong>、<em></em> 或 <mark></mark> —— 那等于主动放弃语义。
- 合理：
<p>价格：<span class="price">¥199</span></p>（只为样式服务） - 不合理：
<p><span class="warning">注意：此操作不可撤销</span></p>→ 应改用<strong class="warning"></strong>或<mark></mark> - JS 动态插入内容时，
<span id="counter">0</span>比<div id="counter"> 更准确，避免破坏行内流 <p>真正难的不是记住哪些标签存在，而是每次敲下尖括号前问一句：我是在描述内容的结构，还是仅仅想让它看起来不一样？后者永远该交给 CSS。</p> </div>
