应将 ... 改为 ... 或用语义化容器如 ； 等自闭合标签禁止写 ；innerhtml += 会导致解析错误，应累积后一次性赋值或用 insertadjacenthtml。
W3C Validator 报 Element div not allowed as child of element p 怎么修
这说明你在 <p></p> 标签里写了 <div>，违反了 HTML5 内容模型——<code><p></p> 只允许 phrasing content（如文本、<span></span>、<img>、<em></em>），不允许块级元素。
别改 CSS 或加 display: inline-block 强行“看起来正常”，那只是掩盖问题。真实 DOM 已被浏览器静默修正：<p>文字</p>
<div>区块</div>，<div> 被踢成兄弟节点，导致样式继承断裂、JS 查询失效。
<ul><li>把 <code><p></p>
<div>...</div> 改成 <div><p>...</p></div> 或直接用 <div> 替代 <code><p></p>
<section></section>、<article></article> 等流式容器<figure></figure> + <figcaption></figcaption>，它们被明确允许作为 <p></p> 的子元素Chrome Elements 面板里看到灰色缩进突兀的节点是啥
那是被浏览器解析器“踢出来”的孤立元素，不是 bug，是 HTML5 规范强制纠错的结果。比如你写 <ul><div><li>项</li></div></ul>，<div> 会被移出 <code><ul></ul>，变成兄弟节点，并在 Elements 面板中显示为灰色、缩进异常。
这种节点往往：没有父级上下文、getComputedStyle(el).display 返回 inline 却表现像块级、querySelector 找不到（因选择器依赖原始嵌套路径）、CSS 继承链中断。
- 右键该节点 → Edit as HTML → 敲个空格回车：如果整个子树位置跳变，确认是嵌套非法
- 禁用所有 CSS 后检查布局是否塌陷或错位，这是父容器被提前闭合的典型信号
- 用 JS 快速揪出孤儿：
document.querySelectorAll('*:not([id]):not([class])').forEach(el => !el.parentElement && console.warn('orphan:', el))
自闭合标签写成 ![]()
会怎样
浏览器会把它当成两个标签：<img>（void 元素，被忽略）+ （非法结束标签，被丢弃），然后继续解析后续内容——但整个层级偏移一级，后续所有嵌套都会错位。
W3C Validator 会报 Element img is not closed，这不是警告，是必须修复的错误。它常引发连锁反应：比如 <p><img src="a">文字</p> 实际解析为 <p></p>
<img src="a">文字
<p></p>
<img>文字。
- HTML5 中所有 void 元素（
<img>、<input>、<br>、<hr>、<meta>等）禁止闭合，统一写成<img src="x"> - 不要混用 XHTML 风格的
<img src="x">，虽然多数浏览器兼容，但 W3C Validator 在 strict mode 下可能误判 - 富文本编辑器或 CMS 输出容易生成
<img>，需后处理正则替换：str.replace(/<img>]*)>/gi, '<img>')
innerHTML += 拼接 HTML 为什么越拼越乱
因为 innerHTML += 不是追加 DOM，而是每次重新解析字符串。浏览器不保留上次解析状态，所以它根本不知道你“本想接着写一个 <div>”。
<p>例如：<code>el.innerHTML = '<p>开始'</p> → 解析为 <p>开始</p>（自动补闭合）；再执行 el.innerHTML += '结束
<p>开始</p>结束，第二个 <p>开始</p>结束，而非预期的 <p>开始结束</p>。
- 需要流式拼接时，先累积字符串变量，最后一次性赋值：
html += '...'; el.innerHTML = html; - 更安全用
insertAdjacentHTML('beforeend', str)，它只解析新增部分，不重绘整个 innerHTML - 复杂结构优先用
DocumentFragment构建后 append，避免重复解析和重排
Element img is not closed 这类提示，它背后可能藏着整页布局偏移。
