<p>、<strong>、<em>、<del>、<ins>覆盖90%日常文本需求，语义明确且利于SEO与无障碍；<b>和<i>因缺乏语义不推荐使用；<p>是带默认间距的块级段落容器，不可嵌套；<del>与<ins>用于文档修订，需上下文支撑。
直接说结论：<p>、<strong>、<em>、<del>、<ins> 这五个标签覆盖了 90% 的日常文本表达需求，其余如 <small> 或 <cite> 属于场景强依赖，不建议无脑套用。
为什么不用 <b> 和 <i>？
它们能实现加粗和倾斜，但语义缺失——<b> 只是“视觉加粗”，<strong> 才表示“内容重要”；<i> 是纯样式倾斜（比如船名、外语词），<em> 才代表“语气强调”。搜索引擎和读屏软件只识别语义标签，用错会导致无障碍访问失败或 SEO 权重下降。
- 错误写法：
<b>警告：请勿触摸</b>→ 机器无法理解这是警告 - 正确写法：
<strong>警告：请勿触摸</strong>→ 语义明确，读屏器会加重语气朗读 -
<i>café</i>合理（外语词），但<em>café</em>就不合适（除非你在强调发音）
<p> 不只是换行，它有默认外边距和块级行为
很多人把 <p> 当作“自动换行工具”，结果在导航栏或按钮旁乱用，导致意外的上下间距。它本质是语义化段落容器，浏览器会给它默认的 margin-top 和 margin-bottom（通常约 16px），且是块级元素，天然独占一行。
- 别用
<p>包单个链接或按钮，改用<span>或直接 CSS 控制 - 想取消段落间距？不要删标签，用 CSS：
p { margin: 0; } - 连续多个
<p>会堆叠空白，不是 bug，是设计行为
<del> 和 <ins> 是协作编辑的真实标记
它们不是为了“画删除线”或“加下划线”而存在，而是对应文档修订场景：<del> 表示被移除的内容（如价格调整前的原价），<ins> 表示新增内容（如优惠后的新价）。浏览器默认样式只是辅助呈现，关键在语义可追溯。
立即学习“前端免费学习笔记（深入）”；
- 错误用法：
<del>¥199</del> <ins>¥149</ins>单独出现 → 缺少上下文，机器无法判断修改意图 - 合理用法：
<p>本次促销价格为 <ins>¥149</ins>（原价 <del>¥199</del>）</p> - 注意：
<ins>默认带下划线，但不是所有场景都该显示——可用 CSS 关闭：ins { text-decoration: none; background-color: #ffeb3b; }
最容易被忽略的是：这些标签嵌套时的语义冲突。比如 <strong><em>紧急</em></strong> 合法，但 <p><strong><p>嵌套段落</p></strong></p> 会触发 HTML 解析警告——<p> 是禁止嵌套的块级标签，浏览器会自动闭合第一个 <p>，造成结构错乱。
