使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
html语义化是通过等标签明确内容结构，决定seo权重分配、屏幕阅读器导航逻辑及团队协作效率，而非仅靠class修饰样式。
HTML语义化不是“加点class让结构看起来整齐”
它直接决定搜索引擎能不能正确理解页面主体、屏幕阅读器能否按逻辑朗读内容、团队接手时是否要花半小时猜<div class="box-3">到底是个标题还是操作按钮。语义标签（如<code><header></header>、<nav></nav>、<article></article>、<aside></aside>）不是装饰，是浏览器和辅助技术的“接口协议”。
SEO：Google 会用<h1></h1>到<h6></h6>构建内容权重图谱
搜索引擎不靠CSS类名或JS渲染结果判断主次——它依赖原生语义结构。一个没<h1></h1>、全用<div>加<code>font-weight: bold模拟标题的页面，很可能被判定为“内容结构缺失”，影响关键词相关性评分。
-
<h1></h1>必须且唯一，代表页面核心主题；多个<h1></h1>（尤其在SPA中未动态更新）会被视为信号混乱 -
<main></main>包裹主要内容区域，能帮爬虫快速跳过页脚/侧边栏等重复模块 -
<figure></figure>+<figcaption></figcaption>明确图片与说明的关系，比<img alt="">单独存在更容易被识别为图文单元
无障碍：屏幕阅读器按语义节点跳转，不是按视觉流
视障用户用快捷键（如H键）直接跳到下一个标题，用D键跳<div>？不会——它只识别<code><header></header>、<nav></nav>、<section></section>等可导航区域。一个纯<div>堆砌的导航栏，对NVDA或VoiceOver来说就是一串无法分割的文本流。
<ul>
<li>
<code><nav></nav>必须有aria-label或<h2></h2>说明用途（例如<nav aria-label="主导航"></nav>），否则多个<nav></nav>时无法区分
<button></button>和<a></a>不能混用：触发JS行为该用<button></button>，跳转URL该用<a href></a>；否则键盘用户按Enter可能无响应或跳错页<time datetime="2024-05-20">5月20日</time>比纯文本“5月20日”更能被辅助工具识别为日期并朗读成“2024年5月20日”维护性：改一个<footer></footer>比找二十个class="footer-wrapper"快得多
语义化不是写一次就完事——它是团队协作的契约。当新成员看到<aside class="related-posts"></aside>，他立刻知道这是附属内容；看到<div class="col-3 sidebar">，得翻CSS、查JS、甚至看Git历史才能确认它是否参与响应式逻辑或埋点统计。
<ul>
<li>避免过度嵌套语义标签：比如<code><section><article><section><article></article></section></article></section>这种结构会让逻辑变模糊，优先用清晰的<h2></h2>分组
<ul></ul>里只放一个<li>，不如直接用<p></p>；列表语义的前提是“存在多项并列关系”最常被忽略的一点：语义化失效往往发生在“动态内容注入”环节。AJAX加载的评论区如果用<div id="comments">包裹，即使外层有<code><main></main>，新插入的内容也不会自动获得上下文语义——得手动补role或重发aria-live事件。
