<p>内嵌<div>不报错但元素找不到，因<p>只接受短语内容，浏览器会自动闭合<p>并将<div>提至外部作为兄弟节点，导致DOM结构变为<p></p><div>content</div><p></p>，使querySelector('p div')返回null、p > div选择器失效，且影响可访问性与Lighthouse检测。
为什么
里放
不报错却找不到元素
标签只接受 phrasing content，
属于 flow content，浏览器解析时会立即关闭当前
，把
提到外面作为兄弟节点。你写的
<p><div>content</div></p> 实际变成 <p></p><div>content</div><p></p>。
-
document.querySelector('p div')永远返回null - CSS 选择器
p > div完全不匹配 - 如果 JS 依赖父容器做位置计算或事件委托，逻辑直接失效
- 看似渲染正常，但 DOM 结构已塌陷，可访问性、Lighthouse 检查全挂
ul/ol 里直接写
或
会重置序号
<ul> 和 <ol> 的合法子元素只有 <li>。任何其他标签（包括 <p>、<div>、甚至换行符）未包裹在 <li> 中，都会触发浏览器自动拆分列表。
- 错误写法：
<ol><p>Item one</p>Item two</ol>→ 解析为<ol></ol><p>Item one</p><ol><li>Item two</li></ol> - 后续
<li>的序号从 1 重新开始 -
list-style样式丢失，ul li选择器失效 - 替代方案：用
<li><p>...</p></li>或语义更准的<li><div>...</div></li>
自闭合标签加>会导致DOM整体偏移
<img>、<input>、<br> 是 void 元素，在 HTML5 中禁止闭合。写成 <img src="x"></img> 会被解析器当作两个标签处理。
- 第一个
<img>被忽略（因无结束符，被截断） - 第二个
</img>被当成普通开放标签，后续所有内容都向右缩进一级 - 常见后果：
<div><img></img><p>text</p></div>实际生成<div><img></div><img><p>text</p> - W3C 验证器报错：
Element img is not closed - 统一写法：
<img src="x">（HTML5 中/>可省略，也不推荐加）
IE8 对语义标签的 display: block 必须手动声明
<header>、<nav>、<section> 在 IE8 及以下默认是 inline 元素，不会撑开、不响应 width/height，直接导致布局塌陷。
- 引入
html5shiv只解决“识别标签”，不解决“渲染为块级” - 必须配合 CSS：
header, nav, section, article, aside, footer { display: block; } - 条件加载更安全：
<!--[if lt IE 9]><script src="html5shiv.min.js"></script><![endif]--> - 若用 Webpack/Vite 构建，注意 html5shiv 不支持模块化，需通过 script 标签注入，且必须在
<head>最前加载
真实 DOM 结构永远以浏览器 Elements 面板为准，不是源码。嵌套错误不报错，但会让 JS 和 CSS 失效得毫无征兆——最危险的不是出错，而是你以为它没出错。
