新闻稿中<p>内嵌<div>会触发浏览器强制闭合<p>，导致样式失效、JS查询失败；应改用<article>或<section>等支持flow content的语义容器替代。

为什么新闻稿里

嵌

会突然“断行”或样式失效

新闻稿常含卡片、图片、作者信息等区块，开发者习惯用 <p></p> 包住整段内容再塞 <div>，但 <code><p></p> 的 content model 只允许 phrasing content（如 <span></span>、<em></em>、<a></a>、<img alt="HTML写新闻稿怎么避免p标签错乱嵌套" >），一遇到 <div> 就触发浏览器强制闭合——不是报错，而是静默变成：<pre class="brush:php;toolbar:false;">&lt;p&gt;&lt;/p&gt;&lt;div&gt;…&lt;/div&gt;&lt;p&gt;&lt;/p&gt;。结果就是：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;document.querySelector('p .author')</pre> 返回 null，因为 <code>.author 已不在 <p></p> 内

p { margin-bottom: 1.5em } 对后续 <div> 完全无效 <li>富文本编辑器导出的 HTML（如微信公众号、Notion 导出）极易带这种结构，肉眼难识别</li> <h3>新闻稿正文该用什么容器替代</h3> <p>来包结构块 </p> <p>别硬改 <code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" 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 href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a> <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 的语义用途。新闻稿中需要包裹图文混排、作者栏、标签栏等复合结构时，应换用真正支持 flow content 的块级容器：

立即学习“前端免费学习笔记（深入）”；

• 用 <article></article> 作为单篇新闻的顶层语义容器（天然可嵌 <div>、<code><section></section>、<figure></figure>）
• 用 <section></section> 划分逻辑段落（如“背景”“采访实录”“专家观点”），它允许嵌套任意 flow content
• 纯样式需求（比如想让一段文字有统一 padding + border）：直接给 <div class="news-paragraph"> 加 CSS，不强求语义，但别套在 <code><p></p> 里
• 若必须保留段落语义又需内嵌操作（如高亮某句+加注释），用 <p><span class="highlight">…</span> <span data-note="来源：XX日报">…</span></p>，而非 <p></p> <div>…</div>

富文本粘贴进新闻稿时怎么快速过滤非法嵌套

从 Word、微信后台、CMS 导出的 HTML 常含 <p></p> <div>…</div>

或 <ul><div>…</div></ul>。手动修效率低，建议在插入前做轻量清洗：
• 用正则粗筛（仅限简单场景）：str.replace(/<p>(?=\s*</p> <div> <div>').replace(/(?=\s*)/gi, '</div>') —— 但这只是补丁，不能解决根本结构问题 <li>更可靠方式：用 <code>DOMParser 解析后遍历修正：

  const doc = new DOMParser().parseFromString(html, 'text/html');  
  doc.body.querySelectorAll('p > div, p > section, p > article').forEach(el => {  
    const parent = el.parentElement;  
    parent.after(el); // 移出到 p 外  
    parent.remove(); // 删除空 p  
  });

• 上线前必过 W3C Validator，关键报错如 Element div not allowed as child of element p 必须清零

为什么新闻稿里

里放
会让标签栏“消失”
新闻稿末尾常有“#人工智能 #大模型 #政策解读”这类标签，新手容易写成：<ul class="tags"> <div class="tag">#人工智能</div> <div class="tag">#大模型</div> </ul>。这违反 HTML 规范：<ul></ul> 合法子元素只有 <li>（及嵌套的 <ul></ul>）。浏览器会把所有 <div> 移出 <code><ul></ul>，变成兄弟节点，<ul></ul> 自身变为空壳：
• CSS 中 ul.tags li 选择器完全不生效
• 默认项目符号（圆点/方块）彻底消失
• 屏幕阅读器无法将这些词识别为“一组相关标签”，影响可访问性
• 正确写法只有一种：<ul class="tags"> <li class="tag">#人工智能</li> <li class="tag">#大模型</li> </ul>
真实 DOM 结构比你写的 HTML 更重要——尤其当新闻稿要 SSR 渲染或被爬虫抓取时，浏览器静默修正后的结构才是最终生效的结构。