XUL 和 HTML¶

本文档简要概述了 XUL 和 HTML，尤其是在与桌面前端开发人员相关的情况下。当我们尽可能地从 XUL 元素迁移到 HTML 元素时，请注意这两种技术之间的区别非常重要。此外，了解如何在需要时同时使用两者也很有帮助，因为某些元素仍然需要使用 XUL。

什么是 XUL¶

XUL 是一种基于 XML 的语言，用于构建跨平台用户界面和应用程序，因此 XML 的所有功能在 XUL 中也可用。这与旨在开发网页的 HTML 形成对比。因此，XUL 面向应用程序工件，例如窗口、滚动条和菜单，而不是页面、标题、链接等。这些 XUL 元素提供给 HTML 页面，而页面对此没有任何控制。

XUL 曾用于（并且仍在使用）创建各种 UI 元素，例如

输入控件，例如文本框和复选框
带有按钮或其他内容的工具栏
菜单栏上的菜单或弹出菜单
选项卡式对话框
用于分层或表格信息的树

XUL 是一项 Mozilla 专有技术，与 HTML 具有许多相似之处，但也存在许多差异。其中包括不同的盒子模型（尽管它现在在 HTML 盒子模型中被综合）以及能够由 C++ 代码支持的能力。

哪些需要 XUL¶

虽然构成浏览器的许多现有 XUL 元素可以迁移到 HTML，但有些元素需要 XUL。这些元素往往是浏览器基础元素，例如窗口、弹出窗口、面板等。需要模拟操作系统特定样式的元素也往往是 XUL 元素。虽然这些元素的某些部分必须是 XUL，但这并不意味着该组件必须完全在 XUL 中实现。例如，我们要求一个 panel 可以绘制在窗口边界的外部，但随后我们可以在该 panel 元素中包含 HTML。

以下是需要 XUL 的元素的不完整列表

浏览器窗口
- https://searchfox.org/mozilla-central/source/xpfe/appshell/nsIXULBrowserWindow.idl
弹出窗口
- https://searchfox.org/mozilla-central/source/dom/webidl/XULPopupElement.webidl
- https://searchfox.org/mozilla-central/source/layout/xul/nsMenuPopupFrame.cpp
- https://searchfox.org/mozilla-central/source/toolkit/content/widgets/autocomplete-popup.js
- https://searchfox.org/mozilla-central/source/toolkit/content/widgets/menupopup.js
面板
- https://searchfox.org/mozilla-central/source/toolkit/content/widgets/panel.js

何时使用 HTML 或 XUL¶

现在 HTML 足够强大，我们可以用它创建几乎整个应用程序，因此对 XUL 功能的需求减少了。我们现在更喜欢编写 HTML 组件而不是 XUL 组件，因为该模型更易于 Web 和前端社区理解。这还使我们能够在编写的 UI 中获得 Web 的新功能，而无需将其移植到 XUL。

在某些情况下，对于非标准功能可能仍然需要 XUL。某些 XUL 元素比类似的 HTML 元素具有更多功能，例如与 HTML <iframe> 元素相比的 XUL <browser> 元素。XUL <panel> 可以超出其父文档的范围，对于下拉菜单、菜单和类似情况很有用。在这些情况下，使用 XUL 元素是合适的。否则，我们希望开始用 HTML 元素替换 XUL 元素。因此，新代码**应尽可能使用 HTML**。

混合使用 HTML 和 XUL¶

为了在 XUL 文件中使用 HTML，您必须执行一些操作。首先，您必须将以下属性添加到 XUL 文件的 window 标记或最外层的 HTML 元素中。 xmlns:html="http://www.w3.org/1999/xhtml。使用此属性可以让 Firefox（或其他使用 Gecko 的应用程序）区分 HTML 标记和 XUL 标记。其次，使用的任何 HTML 元素都必须以 html: 为前缀，否则该元素将被解析为 XUL 元素。例如，要使用 HTML 锚点，您将将其声明为 <html:a>。第三，您使用的任何标记或属性都必须是小写，因为 XML 区分大小写。

请注意您不能在 HTML 标记中声明 XUL。您可以使用 document.createXULElement() 以编程方式在 chrome 权限文档中创建 XUL 元素。