<h1> 到 <h6>、<p>、<strong>、<em>、<hr>、<br> 这些是真正高频且不可替代的文本标签；所谓“经典案例”，不是堆砌效果，而是解决真实排版问题的最小可靠组合。
为什么 <p> 不能嵌套 <div> 或其他块级元素？
浏览器会自动闭合未结束的 <p>，导致结构错乱。比如写成：
<p>开头文字<div>中间盒子</div>结尾文字</p>
实际解析为：
<p>开头文字</p><div>中间盒子</div><p>结尾文字</p>
-
<p>是语义化段落，只应包含内联内容（如文字、<strong>、<em>、<span>） - 想包裹多类型内容，用
<div>或语义更准的<article>/<section> - 用 CSS 控制间距比依赖
<p>自带空白更可控
<strong> 和 <b> 看似一样，但搜索引擎和读屏器处理完全不同
两者都渲染为加粗，但语义天差地别：
立即学习“前端免费学习笔记（深入）”；
-
<strong>表示内容有强重要性，会被读屏器加重语气朗读，SEO 权重更高 -
<b>仅表示视觉加粗，无语义强调，适合人名、产品名等需要突出但不改变含义的场景 - 同理：
<em>（强调语气，斜体+语义） ≠<i>（仅斜体，如外文术语、船名）
错误用法：<strong>¥99</strong> —— 价格不是“重要内容”，该用 <span> + CSS。
<hr> 的老式属性（color、size）在现代项目中基本失效
HTML5 已废弃 <hr color="#ff0"> 这类写法，主流浏览器忽略它们。真实可用方式只有两种：
- 纯语义分隔：直接
<hr>，靠默认样式或全局 CSS 重置 - 定制样式：用 CSS 控制，例如
hr { border: none; height: 2px; background: #e0e0e0; margin: 1.5rem auto; }
注意：<hr> 是语义化分隔符，不是“画一条线”的工具；滥用会导致结构混乱，比如在导航菜单里用它代替 <li> 分隔。
<br> 是唯一合法的“强制换行”，但多数时候它是个信号灯
当你本能想敲 <br>，先问自己：这真是“同一段内的换行”吗？
- 地址、诗行、歌词等天然需保留换行的场景 → 合理使用
<br> - 想让两句话上下分开 → 应该用两个
<p>，而非<p>第一句<br>第二句</p> - 想控制行距 → 改
line-height，不是塞一堆<br>
最易被忽略的一点：<br> 在响应式布局中极易破坏断行逻辑，移动端可能让文字挤成一团——此时应优先考虑 CSS 的 white-space 或弹性布局。
