标签内不能嵌套，因为html解析器会强制在前闭合，导致dom结构断裂为，使p > div等css选择器失效；仅允许嵌套文本、、等行内容器。
高能效和高质量的HTML不是靠压缩体积或删标签实现的，而是靠语义精准、结构克制、约束前置——写错一个 <p></p> 里塞 <div>，浏览器就会自动闭合它，DOM 就已偏离预期。
<h3>为什么 <code><p></p> 里不能放 <div>？
<p>HTML 解析器遇到 <code><p></p>
<div></div>
<div> 前闭合 <code><p></p>，生成断裂结构：<p></p>
<div></div>。这不是警告，是强制修正。
- 常见错误现象：CSS 中写的
p > div永远不生效，控制台也无报错，但 DOM 树里根本不存在该嵌套 - 真正允许嵌套在
<p></p>内的只有文本、<span></span>、<em></em>、<strong></strong>等行内容器 - 想包裹多块内容？用
<section></section>或<article></article>替代<p></p>，语义清、结构稳、样式可控
class 和 id 到底怎么选？
不是“哪个更唯一就用哪个”，而是职责分明：id 是强绑定锚点或 JS 单例目标，class 是复用型容器标识。
- 用
id="header-nav"写导航栏？错——除非你页面只有一处且必须用document.getElementById("header-nav")控制，否则应改用class="nav-primary" -
class="btn btn--primary"可多次出现；id="submit-btn"若在模态框里重复渲染，JS 获取时只会拿到第一个 - SEO 和可访问性工具依赖
id做锚跳转（如#contact），滥用会导致链接失效或屏幕阅读器误读
如何让 HTML 自带“防错体质”？
靠人盯代码容易漏，靠工具提前拦截才可靠。关键不是“写了再修”，是“写不出错”。
- VS Code 装
eslint-plugin-html+Prettier，保存时自动报错：缺alt、<img>无宽高属性、<button></button>缺type - 构建流程加
html-validate，配规则"no-inline-style": "error"、"no-p duplicate-attributes": "error" - Emmet 输入
div*5很快，但生成的是 5 个无意义容器——语义缺失的代码，后期加 ARIA 或适配屏幕阅读器时会卡死
最常被忽略的其实是“结构约束”的时机：不是等上线前做审计，而是在敲下第一个 <div> 前，就决定它是否真不可替代。语义标签不是装饰，是编译器能读懂的指令。</div>
