应视场景清理空标记：纯展示页可忽略，动态交互页建议清理；void element（如）不可删，伪空标记（如无属性的）需清理；模板中应条件包裹整个标签而非内容；构建后可用html-minifier-terser自动清理，运行时清理易导致水合失败。

服务端渲染（SSR）生成的 HTML 静态内容里，<div></div>、<span></span> 这类空标记本身不报错，但若大量存在，会拖慢 DOM 构建、增加内存占用，还可能干扰 CSS 选择器或 JS 遍历逻辑。是否该清理？答案是：视场景而定——纯展示页可忽略；含动态交互或需精准 DOM 操作的页面，建议清理。

哪些空标记必须保留

不是所有空元素都能删。HTML5 规范中定义的 void element（空元素）天生无闭合标签、也不允许有内容，如 <img>、<input>、<br>、<meta>。它们在源码中写成 <img src="x"> 或 <img src="x"> 都合法，且浏览器解析结果一致。这类标签不能也不该被“清理”为删除或替换，否则会破坏语义甚至导致功能失效。

需要警惕的是人为构造的“伪空标记”：

• <div></div>（无 class、id、style、data-* 等属性）
• <span></span>（父容器内仅用于占位，但未设 visibility 或 display）
• <div> </div>（内部只有空白字符，无实际文本）

这些才是 SSR 模板引擎（如 EJS、Nunjucks、Handlebars）在条件分支未命中时容易产出的冗余节点。

服务端模板中如何预防空标记生成

与其事后清洗，不如在渲染源头控制。多数模板引擎支持条件判断语法，应避免用空标签兜底。

• EJS 中，不要写：<div>content</div> → 可能产出 <div></div>
• 应改写为：<div>content</div>
• Nunjucks 中，用 {% if %} 包裹整个标签，而非只包内容
• Handlebars 中，慎用 {{#if}}{{/if}} 套在已有标签内；优先用 {{#if}}<div>...</div>{{/if}}

额外注意：某些 SSR 框架（如 Next.js 的 getStaticProps + getStaticPaths）会在 fallback 页面中注入占位 <div></div>，这类需在构建后检查并剔除，不能靠模板逻辑预防。

html-to-pptx-converter

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

下载

构建后静态 HTML 的自动化清理方案

若已产出大量静态 HTML 文件（如 Jekyll、Hugo、或自建 SSR 打包流程），可用轻量 CLI 工具做 post-process 清洗。核心原则是：只删“无属性 + 无子节点 + 无有意义文本内容”的标签。

• 推荐工具：html-minifier-terser（非 html-minifier，后者已停更）
• 关键配置项：removeEmptyElements: true（默认 false），它会删掉 <div></div>、<p></p> 等，但保留 <div id="app"></div>（因含属性）
• 务必禁用 collapseWhitespace 或谨慎使用 —— 它会影响 <pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea> 内容，且可能误删 <button> </button> 中的空格（影响可访问性）
• 对 <script></script> 和 <style></style> 标签，应设置 ignoreCustomFragments 避免正则误伤

示例命令行：

html-minifier-terser --remove-empty-elements --minify-css --minify-js --collapse-inline-tag-whitespace=false --file-ext html -o dist/ src/*.html

JS 运行时动态清理的风险点

不建议在浏览器端用 JS 遍历并删空标签，尤其对 SSR 页面——这会导致水合（hydration）失败。React/Vue/Svelte 在 hydrate 阶段严格比对服务端生成的 DOM 结构，若 JS 删除了某个空 <div>，而服务端 HTML 里存在它，就会触发 mismatch warning，甚至降级为客户端重渲染。<p>唯一可行的运行时干预场景是：你明确知道某段区域完全由 JS 控制（如第三方 widget 容器），且服务端未参与其渲染。此时可用：</p> <pre class="brush:php;toolbar:false;">document.querySelectorAll('div:empty, span:empty').forEach(el =&gt; { if (!el.hasAttributes()) el.remove(); });</pre> <p>但注意：<code>:empty 伪类不匹配含空白文本节点的元素（如 <div>\n </div>），要真正清空需结合 textContent.trim() === '' 判断。

最易被忽略的一点：空标记清理和 white-space 处理是两回事。删掉 <div></div> 不影响相邻文本的换行行为；而 <div>hello\nworld</div> 中的换行符仍会被折叠——别指望删空标签顺带解决布局间隙问题。