使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
语义化标签提升可访问性、seo和性能，应优先使用等，仅在纯样式或逻辑分组时用。
因为语义化标签不是“换个名字”，而是让浏览器、辅助工具和搜索引擎能直接读懂结构意图，而 每个 真正难的不是“该用哪个标签”，而是每次写结构前问一句：这个区块，如果去掉所有CSS和JS，它在纯文本里还承担什么信息角色？答案指向语义标签；答案是“只是为了让按钮居中”，那就老实用 浏览器解析和DOM节点数直接受影响
<div> 都要创建一个DOM节点，参与样式计算、布局和事件代理。嵌套三层 <code><div class="wrapper"><div class="inner"><div class="content">...</div></div></div>，比单层 <main>...</main> 多出两倍的解析开销——尤其在低端设备或SSR首屏渲染时，可测出FCP延迟上升。
<div class="header">，直接用 <code><header></header>：它默认是块级、支持Flex/Grid，无需额外class
<section><div><p>...</p></div></section> 这类“语义+无语义”混搭，<section></section> 本身就能直接放 <p></p> 或 <h2></h2>
<nav></nav> 上，没必要再套 <div class="nav-grid">
<h3>屏幕阅读器和SEO不会猜你的class名</h3>
<p>当用户用VoiceOver或NVDA浏览页面时，<code><nav></nav> 会被朗读为“导航区域”，<main></main> 是“主内容”，而 <div class="nav"> 就是一段静默的空白——除非你手动加 <code>role="navigation"，但那已经绕过语义化本意了。
<article></article> 内的 <h1></h1> 比 <div class="post">
<h1> 更可能被识别为独立内容主体
</h1>
<li>
<code><footer></footer> 包含的版权信息，比 <div id="foot"> 更容易被聚合工具提取
<li>错误示例：<code><div class="article">
<h2>标题</h2>
<p>正文</p>
</div> —— 这里没有语义锚点，RSS抓取器无法判定这是可订阅单元哪些地方必须保留
<div>？别硬套语义标签
<p>语义化不是消灭 <code><div>，而是让它回归本职：当结构纯粹服务样式、逻辑分组或交互状态，而非内容含义时，<code><div> 反而是最干净的选择。
<ul><li>Flex/Grid 的 wrapper：如果内部只是对齐和间距控制，没标题、没独立主题，就用 <code><div class="grid">，别硬套 <code><section></section>
<card></card> 渲染出的外层 <div>，语义由子内容决定，外层不加 <code><article></article>
<div role="search" aria-label="站内搜索">，比塞进 <code><section></section> 更精准
<div class="carousel"> + ARIA 属性比堆 <code><section><section></section></section> 合理得多
<div>。</div>
