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