标签内不能嵌套等列表元素，浏览器会强制闭合并将列表移出，导致dom结构断裂、样式失效、js查询失败；正确做法是用、等语义化容器替代。
<p></p> 标签里不能直接放 <ul></ul>、<ol></ol> 或 <li>，浏览器会强制闭合 <p></p> 并把列表移出，导致结构断裂、样式丢失、JS 查询失败——这不是“浏览器兼容性问题”，而是 HTML 规范明确禁止的非法嵌套。
为什么 <p></p>
<ul><li>...</li></ul> 会失效
HTML 规范中，<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 的 content model 只允许 phrasing content（如文本、<span></span>、<strong></strong>、@#@#@#@#@#@#@#@#@#@0，它会精确指出 <code>Element ul not allowed as child of element p
HTMLHint 插件，编辑时实时标红非法嵌套<p></p>，却把用户插入的列表塞进去最易被忽略的一点：即使你没手写 <p></p>
<ul></ul>，框架模板、Markdown 渲染器、CMS 导出逻辑也可能悄悄注入——验证必须落在最终生成的 HTML 上，而不是开发时的源文件。
<p></p>
- ...
document.querySelector('p > ul')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
