是语义化段落容器，代表独立文字段落；是无语义块级通用容器，用于布局分组；是行内容器，仅用于局部文本样式干预。三者分工明确：段落用，布局用，文本修饰用。
理解 <p></p>、<div>、<code><span></span> 的分工边界
很多人一上来就套 <div> 包所有，结果语义混乱、样式难控、可访问性差。关键不是“能不能用”，而是“该不该用”。
<p><code><p></p> 是段落容器，必须有完整语义：它代表一个独立、成块的文字段落，自带上下外边距（默认），且不能嵌套标题或列表；<div> 是无语义通用块级容器，适合布局分组，但绝不该替代 <code><p></p> 来包裹纯文本；<span></span> 是行内容器，只用于局部样式干预（比如给某几个词加颜色或 class），不能放块级元素（如 <p></p>、<div>）。
<ul>
<li>错误写法：<code><div><div>这是一段话</div></div> —— 没语义，也没必要
<p>这是一段话</p>，需要额外样式时加 class：<p class="highlight">这是一段话</p>
<p>价格为<span class="price">¥99</span>，限时优惠</p>
避免 <h1></h1>–<h6></h6> 层级断裂和视觉驱动误用
标题标签不是“字体大小控制器”，而是内容结构骨架。浏览器默认字号差异只是副作用，真正影响的是屏幕阅读器逻辑、SEO 解析和文档大纲生成。
常见断裂现象：<h1>主标题</h1> 后直接跟 <h3>小节</h3>，跳过 <h2></h2>；或者为了“看起来小一点”硬用 <h4></h4> 包裹正文段落。这样会导致大纲工具（如 Chrome 的 “Document Outline” 扩展）报错，也干扰辅助技术用户跳转。
- 必须按逻辑层级递进：一级大主题 → 二级子模块 → 三级细节项
- 一个页面原则上只用一个
<h1></h1>（除非是 SPA 中动态切换的单页内容） - 如果需要“小字号标题效果”，用 CSS 控制：
h2 { font-size: 1.1em; }，而不是降级用<h4></h4>
表格中 <th> 和 <code><td> 混用导致语义丢失
<p>很多初学者把整个 <code><table> 当作“布局工具”，所有单元格都写成 <code><td>，甚至把表头也写成 <code><td> + <code>style="font-weight:bold"。这会让表格失去结构含义，无法被读屏软件识别为“这是列名”，也无法被搜索引擎提取为结构化数据。
<th> 不仅默认加粗居中，更重要的是它隐含 <code>scope 属性（如 scope="col" 或 scope="row"），能明确告诉辅助技术“这一格是上面整列的标题”或“是左边整行的标题”。
- 表头行必须用
<th>，且建议显式加 <code>scope="col" - 首列作为行标识（如“张三”“李四”）时，该列也应使用
<th scope="row"> <li>避免在 <code><thead> 里混用 <code><td>，否则 <code>aria-labelledby关联会失效组合时忽略父容器约束引发渲染异常
HTML 标签有严格的嵌套规则，不是所有组合都合法。比如
<p></p>内部不能放<div>（HTML5 允许但语义错误），<code><li>必须直接在<ul></ul>或<ol></ol>里，<span></span>不能包<p></p>。这些限制不是浏览器“报错才生效”，而是解析阶段就被修正：Chrome 遇到
会自动拆成<p></p> <div>xxx</div><p></p> <div>xxx</div> <p></p>—— 你写的结构和最终 DOM 完全不同。- 检查方式：打开 DevTools → Elements 面板，看实际生成的节点树，而非源码
- 常用合法组合：
<div> 可包任意块/行内元素；<code><p></p>只能包行内元素（<span></span>、<strong></strong>、<a></a>等） - 不确定时查 MDN 的 “Permitted content” 栏（如 MDN ）
