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