html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

html文档是树状结构，和必须为的强制直系子元素，否则浏览器会静默修正；只能在内且仅含文本；不可在中，其合法父元素为等流式容器。

HTML文档结构不是扁平拼凑，而是有明确父子与兄弟关系的树状模型；写错嵌套或放错位置，轻则渲染异常，重则被浏览器静默修正甚至丢弃内容。

为什么 和 必须是 的直接子元素

浏览器解析 HTML 时严格按规范校验结构。 和 是 的**强制直系子标签**，中间不能插入任何其他元素（包括空格、注释、<p></p> 或 <div>）。否则： <ul> <li>Chrome/Firefox 会把非法内容移到 <code> 开头，并在开发者工具中显示“#document”下多出一个匿名文本节点

<title></title> 若不在 内，页面标题可能不生效，SEO 工具抓不到

<meta charset="UTF-8"> 若被挤到 里，中文很可能乱码

<title></title> 只能出现在 里，且不能嵌套任何标签

<title></title> 是纯文本容器，语义上只允许直接子节点为字符数据（即不能包含 <strong></strong>、<span></span>、<br> 等任何标签）：

• 写成 <title><em>首页</em></title> —— 浏览器会忽略 <em></em>，只取文字“首页”
• 若 <title></title> 出现在 中，它会被当成普通文本渲染在页面上，而非设为标签栏标题
• 多个 <title></title> 标签时，仅第一个生效，后续被忽略

<p></p> 不能作为 的子元素，但可嵌套在 内几乎所有块级容器中

<p></p> 是典型的**流式内容元素**，设计初衷就是承载正文段落。它的合法父元素包括 、<article></article>、<section></section>、<footer></footer> 等，但绝不能是 、<title></title>、<script></script> 或 <style></style>：

• 误写 <p>说明文字</p> —— 浏览器会自动把 <p></p> 移出 并插入 开头
• <p></p> 内部不能再嵌套 <div>、<code><h1></h1>、<p></p> 等块级元素（HTML5 允许部分嵌套，但多数场景下会导致验证失败或样式错乱）
• 想让段落有语义分组？用 <section></section> 或 <article></article> 包一层，而不是强行塞进

DOM树视角下， 是唯一根，所有标签都必须落在其子树中

打开 Chrome DevTools → Elements 面板，你会看到一棵以 为顶点的树。任何脱离这棵树的标签（比如写在 外的 <p></p>、或两个 并存），都会被浏览器重新组织：

• 孤立的 <p>hello</p>（没包在 里）→ 自动包裹成 <p>hello</p>
• 重复的 → 后续所有内容归入第一个 的 ，第二个 被当作无效文本丢弃
• 忘记闭合 ，直接写 → 浏览器自动补全 ，但若中间有脚本，执行时机可能意外提前

真正容易被忽略的是：这些“自动修复”不会报错，但会悄悄改变你预期的 DOM 结构和 CSS 作用域——调试时务必看 Elements 面板里的实际树形，而不是你写的源码。