开发者工具 · HTML WYSIWYG 编辑器

从 DOM 到标记：innerHTML 序列化如何塑造您获得的 HTML

2026年2月19日 · 工作原理

html html 实体开发人员工作流程

解释了浏览器在将 DOM 树转回 HTML 字符串时遵循的规则，从转义和实体到 void 元素和属性引用，以及为什么编辑器输出看起来像这样。

为什么 在此消毒剂中返回为

包含 ` ` 的源片段将此清理程序保留为 ` `。该结果并不能证明每个浏览器都使用斜杠序列化 HTML。这是 ToolAcre 字符串重写器特意选择的，其 void-element 分支为允许的 br 和 hr 元素发出空格和斜杠。

这种区别可以防止常见的错误解释。视觉表面通过innerHTML 读取，但复制的源代码随后由应用程序代码标记并重建。用户收到的内容反映了浏览器创建的 DOM 字符串和 ToolAcre 的较窄输出约定，包括别名、过滤属性和平衡标签。

分词器扫描字符，无需构造 DOM 节点或调用 DOMParser。它识别文本、注释、声明、开始标签、结束标签和原始文本元素主体。消毒会重复这个平坦的顺序，保持允许的结构，打开普通的未知包装纸并压制危险的容器及其内容物。

因此，原始拼写不会保留。混合大小写的名称变为小写； b 变为 Strong，i 变为 em，strike 和 del 变为 s，ins 变为 u。输出是从接受的标记重新生成的，而不是作为原始子字符串返回，因此源格式和不支持的细节在设计上消失了。

文本首先进行实体解码，然后再次转义。 & 符号变为 `&`，小于号和大于号变为 `<` 和 `>`，禁止的控制字符消失。此顺序使现有的 `&` 在重复传递中保持稳定，而不是将其转变为 `&amp;`。

属性值遵循更严格的转义路径，该路径还引用双引号、单引号、尖括号和与号。在发出接受的属性之前对已知实体进行解码。这些测试固定文本和链接查询的幂等性，但代码不保证保留每个作者实体的拼写，例如命名与数字引用。

在输出集中仅允许 br 和 hr 并将其分类为 void。他们永远不会收到结束标签。对于允许的非 void 元素，开栈记录嵌套。交叉闭合（例如 em 周围的强）会导致内部元素首先闭合，从而产生平衡的标记，而不是保留格式错误的顺序。

未闭合的元素在末尾闭合，而杂散的闭合标记将被忽略。这是重写者的平衡策略，并不是浏览器 HTML5 错误恢复的完整实现。来源本身警告解析器差异，这就是为什么输出不能作为通用敌对输入清理程序进行销售的原因。

没有通用属性包存在。段落和标题不允许；链接允许使用 href 和标题；标题允许使用缩写；引文允许引用；有序列表允许开始和键入。每个发出的值都用双引号引起来，接受的链接也会获得 `rel="noopener noreferrer nofollow"`。

属性顺序遵循接受的标记和添加的 rel 字段，但依赖顺序将是脆弱的。含义存在于允许的名称和值中。格式错误的整数开头会被删除，不安全的 href 或引用方案会被拒绝，未知的属性会生成删除原因，而不是默默地成为已发布标记的一部分。

尝试 `A & B <a href="javascript:alert(1)">open</a>`。类被删除，B 映射到强，现有的 & 符号仍然是转义的 & 符号，br 变为自关闭，不安全链接失去其 href，同时保留可见的链接文本。

漂亮的源模式然后将支持的块元素放置在行和缩进列表子项上。它将内联内容保留在一起并保留 pre 中的文本。格式化是对已经重写的输出的可读性传递；它不是第二个安全解析器，并且不会恢复早期规范化删除的空白。

本文一般不描述本机浏览器序列化保证、XMLSerializer、XHTML 语法或可选的 HTML 结束标记规则。它记录了此存储库中可观察到的约定。特别省略有关 ` ` 的声明，因为本地实体表（而不是通用浏览器序列化程序）确定可识别的命名引用。

预览生成器再次清理并将片段包装在完整的浅色主题文档中。复制 HTML 返回片段；下载 HTML 返回该文档。这些是故意不同的工件。在假设下载的文件与复制的源字节相同之前，请先阅读操作标签。

通过以下阶段预测 ToolAcre：标记字符串、解码支持的实体、应用元素别名和白名单、检查 URL、平衡接受的标签、转义输出以及可选的漂亮打印。该序列比说 innerHTML 只是保留或序列化作者的源代码更准确地解释了实际结果。

在处理长草稿之前，使用源模式用小夹具观察重写情况。清理程序拒绝超过 500,000 字符的文档，因此过大的输入会失败，而不是冻结选项卡。将目标自己的 HTML 策略与该编辑器故意压缩的子集分开。