浏览器解析时，因仅允许phrasing content，遇到立即隐式闭合，生成三个独立节点，导致dom结构与源码不符。
为什么浏览器会“偷偷改掉”你的 <p></p>
<div></div>
不是浏览器“不讲武德”，是 HTML 解析器在构建 DOM 时，严格按 W3C 的 content model 执行：<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> 只允许包含 phrasing content（文本、<strong></strong>、@#@#@#@#@#@#@#@#@#@0 ——这是 HTML5 唯一允许 <div> 出现在行内标签内的合法场景
<h3>怎么确认自己没踩坑</h3>
<p>别信源码，也别靠页面“看起来正常”来判断：</p>
<ul>
<li>打开 DevTools → Elements 面板，看真实 DOM 结构；<code>document.querySelector('p > div') 返回 null 就说明已被移出
html-validate 工具
