<p>是语义段落而非换行工具，内容构成完整语义单元时才使用；<strong>表强调，<b>仅视觉加粗；<hr>表主题分隔；<time>和<cite>提升结构化数据与可访问性。
<p> 是最常被误用的文本标签——它不是“换行工具”，而是语义上的“独立段落”。用错会导致结构混乱、SEO 降权、屏幕阅读器误读。
什么时候必须用 <p>，而不是 <br>
当内容构成一个完整语义单元（比如一句话、一段说明、一个观点）时，才该用 <p>。它自带上下外边距，浏览器会自动处理段间距。
- ✅ 正确：
<p>用户注册需提供真实姓名与手机号。</p> - ❌ 错误：
<p>姓名：张三<br>邮箱：zhang@example.com</p>—— 这是两行字段，不是一段话，应改用<div>或表单结构 - ⚠️ 常见陷阱：CMS 或富文本编辑器导出的 HTML 常把所有换行都转成
<p>，导致空段落泛滥，影响渲染性能和可访问性
<strong> 和 <b> 的区别不止是“加粗”
<strong> 表示内容有强重要性，会被屏幕阅读器加重语气；<b> 仅表示视觉加粗，无语义权重。搜索引擎和辅助技术会区别对待。
- ✅ 推荐：
<p>请务必在<strong>24 小时内</strong>完成验证。</p>（强调操作紧迫性） - ✅ 合理用
<b>：<p>错误代码：<b>ERR_CONNECTION_REFUSED</b></p>（只是突出关键词，不改变语义） - ⚠️ 注意：
<strong>嵌套过深（如三层以上）可能让 AT（辅助技术）反复加重，反而干扰理解
<hr> 不是装饰线，而是语义分隔符
<hr> 在 HTML5 中定义为“主题变更”的标记，不是视觉分割线。滥用（比如每两行文字就插一条）会破坏文档大纲，影响 SEO 和大纲生成工具（如浏览器侧边栏目录）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确场景：
<section><h2>产品特性</h2><p>…</p></section><hr><section><h2>客户评价</h2><p>…</p></section> - ❌ 替代方案：纯视觉分割请用 CSS 边框（
border-bottom），避免污染语义结构 - ⚠️ 兼容提醒：
<hr>默认是块级、通栏宽度，若需窄线或居中，必须用 CSS 控制，不能靠width或align属性（HTML5 已废弃这些属性）
别忽略 <time> 和 <cite> 这类轻量但关键的语义标签
它们体积小，但对结构化数据、SEO 和未来机器解析至关重要。很多项目上线后才发现时间无法被日历应用识别、引用来源无法被学术爬虫提取。
- ✅
<time datetime="2026-08-26">今天</time>——datetime属性必须符合 ISO 8601，否则无效 - ✅
<p>引自<cite>HTML5 规范第 4.6 节</cite>。</p>——<cite>只用于作品标题（书名、文章名、电影名），不用于人名 - ⚠️ 容易漏掉：服务端模板渲染时，常把时间直接拼成字符串，忘了包
<time>；CMS 富文本编辑器默认也不输出<cite>
真正难的不是记住标签名，而是在写每一行 HTML 时判断：这段内容是否构成独立语义单元？它将来会不会被机器读取？大多数人只盯着“能不能显示”，却忽略了“能不能被理解”。
