开发者工具 · HTML WYSIWYG 编辑器
从 <font> 标签到 CSS：Web 格式如何移出标记
· 背景
html CSS 文本清理
讲述了诸如字体、居中和对齐属性等表现性 HTML 如何让位于 CSS，以及为什么这段历史解释了当今编辑器中内联样式的争论。
旧页面中的展示性 HTML — 此处没有来源日期声明
较旧的页面片段通常直接通过诸如字体和居中之类的元素或诸如背景颜色和对齐之类的属性来表达外观。该工作簿附有 20 世纪 90 年代中期的年表，但没有存储库来源验证这些日期。该实现只能演示该编辑器今天如何处理此类标记。
ToolAcre 不允许字体或居中，并且不保留演示属性。普通的不受支持的包装器被展开，因此当格式化指令消失时，它们的可见单词可能会保留下来。该输出是经过清理的草稿，而不是对遗留页面的忠实恢复。
字体、中心和背景颜色：标签中的呈现 — 描述浏览器为外观添加的元素和属性
当表示存在于标签和属性中时，内容和设计变得很难独立更改。必须在每个片段中编辑跨文章重复的颜色选择，并且居中标题没有固有的结构意义。复制这些构造还会从过时的布局中导入假设。
语义标记命名角色，例如标题、段落、列表和引文。目标样式表可以一致地呈现所有出现的情况。 ToolAcre 支持较小的词汇量，并且也删除了类和样式，让接收系统负责其自己的表示层。
CSS 将结构与表示分离；标准日期不在存储库证据之内
CSS 提供与内容树分离的选择器和声明。该架构划分允许一项设计更改影响许多文档，而无需重写每个正文。本文并未发明首次推荐日期或标准顺序，因为此类历史声明需要外部规范。
实际规则仍然是可测试的：从 ToolAcre 复制的片段不包含样式属性或类名称。下载的完整文档包括 ToolAcre 自己的包装样式表，但该 CSS 未插入到 Copy HTML 返回的经过清理的片段中。
表现元素不在该允许列表之内，没有生活标准年代顺序声明
该工作簿描述了生活标准的弃用和删除。该模块没有标准存档，因此本文停留在当前策略：不支持表示元素，并且根据其风险类别将其展开或删除。它没有提出规范的年表主张。
拆除报告是有用的证据。在文本周围粘贴字体标签，并观察包装器被拒绝，而单词仍然存在。粘贴危险的样式容器，其主体将被整个删除，因为原始样式内容可以创建超出此编辑器范围的请求和解析表面。
内联样式存在于其他地方，但此编辑器将其删除
内联样式是一种现代语法机制，但 ToolAcre 完全拒绝了它。因此，该编辑器无法展示现存的“妥协”风格属性或推荐其自己的输出模式之一。唯一独立的样式出现在生成的预览文档中，围绕已过滤的正文 HTML。
其他上下文，尤其是电子邮件生成，可能需要内联声明。该要求需要一个包含客户端测试和 CSS 策略的单独管道。在这里添加任意风格将与当前的允许列表相矛盾，并在没有证据或测试的情况下扩大消毒剂的责任。
工作示例：现代化 20 世纪 90 年代的代码片段 — 将字体标签标记重写为语义 HTML 加上一个类，并对两者进行比较
通过选择真实的标题和段落来实现 `<center><font color="red"><b>Maintenance</b></font></center><p align="left">Tonight</p>` 的现代化。 ToolAcre 解开不支持的表示，将 b 映射到强，删除对齐并保留 p，但它无法推断 Maintenance 应该是 h2。
将含义明确重写为 `<h2>Maintenance</h2><p>Tonight</p>`，然后在编辑器外部添加批准的目标类或样式表规则。如果句子中意指重要性，则“strong”可能合适；如果粗体只是字体粗细，则不要保留误导性的语义。
这不包括什么 - CSS 方法论辩论或特定于框架的样式
本文不比较 CSS 方法、框架、实用程序类或设计令牌。它不声明字体、CSS 或标准转换的历史日期。它还不提供可以从视觉遗留标记推断语义角色的自动转换器。
过滤并不是通用的 XSS 预防。 ToolAcre 的手写分词器受到限制，其预览是单独沙盒的。接受遗留或用户生成的 HTML 的服务器需要一个维护的基于解析器的清理程序、迁移测试和特定于目标的白名单。
要点：了解规则存在的原因 — 总结历史以及在 ToolAcre 的 HTML WYSIWYG 编辑器中检查输出如何帮助将演示文稿排除在标记之外
知道为什么结构和表示是分开的：意义应该在重新设计中保留下来，而外观应该受到一致的控制。 ToolAcre 通过从复制的片段中删除旧的表示形式和现代的内联或基于类的样式，积极地强制执行该边界。
使用源视图来识别丢失的内容，然后在目标处手动恢复语义和样式。这个过程可能不会保留旧的外观，但它产生的内容更容易审查、迁移和适应，而不会将过时的决策带入每个未来的主题。