Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

不能嵌套或，因HTML规范限定其仅能包含行内内容（phrasing content），否则浏览器会自动截断导致DOM断裂、样式失效、无障碍访问异常。

为什么 <p></p> 里面不能放 <div> 或另一个 <code><p></p>

因为 HTML 规范明确限定 <p></p> 是“可关闭的短语级块容器”，只允许包含行内内容（phrasing content），比如 <strong></strong>、<a></a>、<span></span>、纯文本，但禁止嵌套块级元素。浏览器遇到 <p></p> <div>...</div>

会自动截断：把 <p></p> 在 <div> 开始前就闭合，导致 DOM 结构意外断裂。 <p>常见错误现象包括：</p> <ul> <li>样式突然失效（比如给 <code><p></p> 设的 margin-bottom 消失）

JavaScript 查询 document.querySelector('p').children 返回空数组

屏幕阅读器把本该是一段的内容读成多个孤立碎片

<p></p> 嵌套 <strong></strong>、<em></em>、<a></a> 是完全合法的

这些都属于 phrasing content，语义和渲染层面都支持被 <p></p> 包裹。HTML5 甚至允许 <a></a> 包含块级元素（如 <div>），但这不改变 <code><p></p> 的限制——它依然不能当“万能容器”用。

实操建议：

• 写到 <p>点击<button>确认</button>继续</p> 时立刻停住：按钮是交互式块级元素，必须移出 <p></p>
• 想加图标？用 <span><svg>...</svg></span>，别塞 <div> <li>需要多层结构？外层用 <code><div> 或语义化标签（如 <code><article></article>），再在内部放多个 <p></p>

  连续多个 <p></p> 不需要额外包裹，但也不能靠它“模拟列表”

  多个 <p></p> 并列是标准写法，浏览器默认用 margin-top 和 margin-bottom 分隔，视觉上自然留白。但如果你写：

  <p>苹果</p>
  <p>香蕉</p>
  <p>橙子</p>

  这并非语义正确的列表——它缺失层级关系与可访问性标识。屏幕阅读器不会告诉你“这是三项水果”，只会逐段朗读。

  正确做法：

  • 真要表达并列项，用 <ul><li>苹果</li></ul>
  • 若只是分段叙述（如条款说明），多个 <p></p> 完全合适
  • 想统一控制间距？改 CSS：p { margin: 1.2em 0; }，别靠加空 <p></p> 撑开

  误用 <p></p> 当换行或占位符的后果很实际

  有人为“换一行”写 <p></p>，或为“空行留白”堆三个 <p></p>。这会导致：

  • DOM 节点数暴增，影响 JS 遍历性能
  • 打印样式里每个空 <p></p> 都可能生成一页空白
  • 搜索引擎认为页面存在大量无意义内容，影响 SEO 权重分配
  • 无障碍工具把空段落当作需朗读的内容，干扰用户

  真正需要垂直空白，请用 margin 或 padding；需要强制换行，用 <br>（仅限诗歌、地址等少数场景）；需要逻辑分组，用 <div> 或语义容器。</div>