開發者工具 · 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 透過從複製的片段中刪除舊的表示形式和現代的內聯或基於類別的樣式，積極地強制執行該邊界。
使用來源視圖來識別遺失的內容，然後在目標處手動恢復語意和樣式。這個過程可能不會保留舊的外觀，但它產生的內容更容易審查、遷移和適應，而不會將過時的決策帶入每個未來的主題。