表示不可逆的重要性，强调内容的严重性、紧迫性或责任归属；表示语气变化，靠语调微调改变句意；二者语义不同，不可互换，CSS样式不改变其本质语义。
<strong> 和 <em> 不是“加粗”和“斜体”的快捷写法，而是语义标签——用错会直接影响可访问性、SEO 和屏幕阅读器行为。
什么时候该用 <strong> 而不是 <b>
<strong> 表示内容具有强重要性，浏览器默认加粗，但关键在语义：屏幕阅读器会加重语气读出；搜索引擎也视其为内容权重信号。<b> 仅用于“视觉上突出但无额外重要性”的场景，比如产品名、关键词高亮、中文括号里的术语等。
- ✅ 正确：
<p>密码必须包含至少一个<strong>大写字母</strong>和一个数字。</p>（强调规则强制性） - ❌ 错误：
<p>我们的产品叫<strong>QuickFlow</strong>。</p>→ 应用<b>，因为品牌名本身不具“重要性”，只是需要视觉区分 - ⚠️ 注意：
<strong>可嵌套，但嵌套两层以上会让语义混乱，多数情况一层足矣
<ins> 和 <del> 不是装饰，是变更记录
这两个标签常被当成“下划线”和“删除线”的样式替代品，但它们的本意是标记文档编辑历史：<ins> 表示新增内容，<del> 表示已被移除的内容。浏览器默认样式（带下划线/删除线）只是辅助呈现，真正价值在于机器可读性。
- ✅ 合理使用：
<p>原价<del>¥299</del>，现价<ins>¥199</ins></p>—— 屏幕阅读器会读作“原价删除线299元，现价插入线199元” - ❌ 滥用：
<del>点击下载</del>伪装成禁用按钮 —— 这属于 UI 状态，应通过 CSS 类 +aria-disabled控制，而非语义标签 - ? 提示：配合
datetime属性能增强可信度，如<ins datetime="2026-08-25T14:30">限时加赠</ins>
<mark> 的背景色不是设计选择，是上下文高亮
<mark> 表示“与当前上下文相关而被高亮的文本”，典型场景是搜索结果页中匹配关键词、或文章中引用段落里被标注的重点句。它不是通用的“重点色块”工具。
立即学习“前端免费学习笔记（深入）”；
- ✅ 自然用法：
<p>用户输入了“HTML 标签”，系统在文档中定位到<mark><strong>strong</strong></mark>并高亮显示。</p> - ❌ 常见误用：
<mark>新品首发！</mark>→ 这属于营销强调，应改用<strong>或 CSS 自定义类 - ⚠️ 兼容性注意：IE 除外所有现代浏览器都支持，但默认黄色背景可能与深色主题冲突，建议重置
mark { background-color: var(--highlight-bg, #ffdd44); }
<pre> 和 <code> 必须配对使用才合理
<pre> 保留原始空格与换行，<code> 表示一段计算机代码——单独用 <pre> 包裹普通文字，或只用 <code> 写多行代码，都是语义断裂。
- ✅ 正确组合：
<pre><code>function hello() {<br> console.log("Hi");<br>}</code></pre> - ❌ 常见错误：
<pre>配置项如下：host=localhost</pre>→ 缺少<code>，无法表明这是配置代码而非普通说明 - ? 小技巧：若只需保留格式但不想用等宽字体，可用
white-space: pre-wrap替代<pre>，更灵活
最易被忽略的一点：这些标签的语义价值，只有在脱离样式后依然成立时才算真正生效——试着关掉 CSS，用纯文本浏览器或屏幕阅读器听一遍，如果信息传达变弱或出错，那大概率是标签用错了。
