<p>是语义化段落容器，表示完整独立的逻辑单元；<br>仅强制换行、无语义。地址等同段内换行用<br>，正文、协议、SEO等必须用<p>，滥用<br>破坏结构、可访问性与样式控制。
<p> 标签不是“换行工具”，而是语义化的段落容器；用错就等于告诉浏览器“这段文字没有逻辑边界”——搜索引擎和屏幕阅读器会直接忽略它的结构价值。
什么时候该用 <p>，而不是 <br>
段落是内容的最小逻辑单元。<p> 表示一个完整、独立的陈述；<br> 只是视觉上的强制折行，不带任何语义。
- ✅ 正确：
<p>包裹整段说明文字、用户协议条款、新闻正文 - ❌ 错误：用多个
<br>拼出“伪段落”，比如地址信息写成上海市静安区<br>南京西路123号<br>邮编200040
- ⚠️ 风险：这样写会让辅助技术把整块内容读作一句长串，无法跳过或暂停；SEO 也会弱化文本权重
- ? 替代方案：地址建议用
<address>，或至少用<div>+ CSS 控制换行
<strong> 和 <b> 真的可以混用吗
不能。它们渲染效果相似，但语义完全不同。
-
<strong>表示内容有强重要性（如警告、关键参数），会被屏幕阅读器加重语气朗读 -
<b>仅表示“想加粗”，无语义，适合品牌名、产品名等需要视觉突出但不强调含义的场景 - 常见误用：
<b>错误：用户名不能为空</b>—— 这是强提示，应该用<strong> - 兼容性注意：所有现代浏览器都支持两者，但部分旧版读屏软件对
<b>完全静音
<hr> 不是装饰线，它有明确的语义边界
<hr> 在 HTML5 中定义为“主题结束”的分隔符，不是 CSS 的 border-bottom 替代品。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理场景：文章末尾与评论区之间、章节切换处、表单分步操作的步骤分隔
- ❌ 滥用场景：导航菜单项之间、卡片底部、纯为了“画一条线”而加
- 影响：过度使用会干扰大纲算法（document outline），让
<h2>等标题层级被错误切分 - 替代建议：视觉分隔优先用 CSS（如
margin-block-end或border），保留<hr>给真正需要语义断点的地方
<em> 的嵌套行为容易被忽略
<em> 默认斜体，但它支持多层嵌套，每层代表不同强度的强调——这点连很多资深前端都漏掉。
- 单层
<em>：常规强调（如“请务必填写邮箱”） - 双层
<em><em>紧急</em></em>：更强语气（屏幕阅读器可能提高音调或延长停顿） - 三层及以上：极少用，但合法；需配合 CSS 控制样式避免视觉混乱
- ⚠️ 注意：不要用
<em>替代<i>显示外文、术语、船名等——那是<i>的语义职责
最常被绕开的问题是：文本标签一旦脱离语义上下文，就退化成“视觉补丁”。比如用 <strong> 做图标旁的文字加粗，却不给图标本身加 aria-label，结果就是读屏时只听到“加粗文字”，完全丢失动作意图。
