、、、、覆盖90%日常文本需求,语义明确且利于seo与无障碍;和因缺乏语义不推荐使用;是带默认间距的块级段落容器,不可嵌套;与用于文档修订,需上下文支撑。

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











