<p>和<h1>–<h6>不可嵌套块级元素，因HTML解析时会自动闭合并移出，导致DOM结构错乱、样式失效、JS查询失败；<h1>应唯一且逐级使用，确保语义清晰与SEO正确。
<p> 和 <h1>–<h6> 是实际写页面时最常碰、也最容易出问题的两个基础点。别被“基础”骗了——结构错乱、语义混乱、SEO 受损，往往就从这里开始。
为什么 <h1> 只能有一个，且不能跳级
浏览器和搜索引擎靠标题层级理解内容主次。跳级（比如 <h1> 后直接写 <h3>）会让解析器丢失逻辑链；多个 <h1> 则模糊主标题，影响 SEO 权重分配。
- 正确结构：
<h1>→<h2>→<h3>，逐级递进 - 禁止：
<h1>→<h3>或嵌套使用（如<h2><h1>xxx</h1></h2>） - 视觉上想让
<h2>看起来比<h1>大？用 CSS 改样式，别动语义层级
<p> 不是“换行工具”，更不能塞块级元素
<p> 的本职是包裹一段完整语义的文字段落，不是为了“多空一行”。常见误用包括：用它替代 <br> 强制换行，或往里塞 <div>、<h2> 甚至另一个 <p>。
-
<p>是块级元素，自带上下 margin，足够分隔段落 - HTML5 明确禁止在
<p>内嵌套块级标签（验证器会报错） - 想控制某段文字样式？加
class，用 CSS 控制，别用<font>或内联style
<strong> 和 <em> 不等于 <b> 和 <i>
前者是语义标签：表示“重要”和“强调”，屏幕阅读器会改变语调；后者只是物理样式，纯视觉加粗/斜体，无语义价值。现代项目中，<b> 和 <i> 仅适用于特定场景（如产品名、外文术语），日常加粗请无条件选 <strong>。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<p>密码必须包含<strong>至少8位</strong>字符</p> - 错误：
<p>密码必须包含<b>至少8位</b>字符</p>（无语义，不利于可访问性） -
<code>标签只用于短代码片段，别用它包整段命令或路径
注释和 <pre> 的边界容易模糊
写 <!-- --> 注释时，很多人顺手把大段 HTML 或 JS 堆进去，结果源码臃肿难读；而用 <pre> 时又常忽略它默认不换行、不缩进的特性，导致长代码溢出容器。
- 注释只写关键说明，比如
<!-- 导航栏：响应式折叠逻辑在此处初始化 -->，别写“这是导航栏”这种废话 -
<pre>配合<code>使用才是标准写法：<pre><code>console.log(1)</code></pre> -
<pre>内容若含特殊字符（如<），需手动转义为，否则会被当标签解析
真正卡住人的，从来不是会不会写 <h1>，而是写完之后有没有回头检查：这个结构是否经得起屏幕阅读器念、搜索引擎爬、CSS 重置后还能保持语义清晰。排版标签不是装饰纸，是网页的骨架。
