XUL_教程/增加HTML元素

增加HTML元素到窗口

除了可以使用XUL的所有元素，你也可以直接将HTML元素添加到XUL文件的内部。现在你可以在XUL文件中使用任意的HTML元素，意思是说可以在窗口中布置JAVA小应用程序(applet)和表格。如果可以你应该避免在XUL文件中使用HTML元素。(这是有原因的，主要涉及版面的控制这将在后面进行描述)。然而，不管怎样这节将描述如何使用它们。记住XML是大小写敏感的，因此你必须用小写输入标签和属性。

XHTML命名空间(namespace)

为了在XUL文件中使用HTML元素，你必须声明你要用到的XHTML命令空间。这个方法是Mozilla从XUL中区分HTML标签的。下面的属性应该加在XUL文件的window 标签中，或者放到HTML元素的最外面。

xmlns:html="https://www.w3.org/1999/xhtml"

这个HTML的声明很像我们用过的XUL声明。要正常显示必须正确地输入这句，否则它不能正常运行。注意：Mozilla不会去下载这个URL的内容，但它会在运行HTML时对它进行验证。

这是一个可以加到文件查找窗口的例子：

 <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <window
   id="findfile-window"
   title="Find Files"
   orient="horizontal"
   xmlns:html="https://www.w3.org/1999/xhtml"
   xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

因此，你可以像平常一样使用HTML，下面列出需注意的守则：

你必须在每个标检的开始增加一个html:的前缀，像上面一样声明的HTML命名空间。
标签必须用小写输入.
"双引号" 必须完全把所有的属性值括起来。
在没有内容的XML标签的末端(>)前一定要加上结束符(/)，下面的例子很清楚地进行了示范。

使用HTML元素

你可以像head 和 body使用所有的HTML标签，不是真的有益。下面演示一些使用HTML元素的例子。

<html:img src="banner.jpg"/>

<html:input type="checkbox" value="true"/>

<html:table>
  <html:tr>
    <html:td>
      A simple table
    </html:td>
  </html:tr>
</html:table>

这些示例将从banner.jpg创建一个图像，一个多选项和一个只有一个单元格的表。如果XUL的特性是可用的你应该总是使用它们并且你不应该在XUL中使用表格作为布局。(XUL有自己的布局元素可以用)。注意html:前缀需要添加到每个标签的前面。这是Mozilla为什么会知道它是一个HTML标签而不是一个XUL标签。如果你没有加上html:部份，浏览器就会认为元素是一个XUL元素并且它们不能被正常显示，因为 img, input, table, 等都不是有效的XUL标签。

在XUL，你可以使用description或label元素添加文本标签。当你要用时应该使用这些元素。你也可以使用HTML的label元素添加文本标签的操作或者你可以像下面的例子一样简单地将文本放在不同的HTML元素之间(就像p或div)。

例1 : Source View

<html:p>
  搜索:
  <html:input id="find-text"/>
  <button id="okbutton" label="确定"/>
</html:p>

这段代码的目的是显示'搜索:'，接着显示一个文本输入框元素和一个确定按钮。注意XUL按钮可以显示在HTML元素之间，在这里它可以正常使用。在HTML元素之间的纯文本仅仅用来显示通常用来显示文字(就像p标签)。放在外面的文本是不能被显示的，除非XUL元素允许将文本放在里面(例如：description元素)。下面的例子可以帮助你理解。

HTML元素的实例

下面是在窗口在添加HTML元素的一些例子。在每个例子的窗口边都能找到简单的说明信息。

带多选框的对话框

例2 : Source View

<html:p>
  点击下面方框会记住这个结果。
  <html:p>
    <html:input id="rtd" type="checkbox"/>
    <html:label for="rtd">记住这个结果</html:label>
  </html:p>
</html:p>

在这个例子，一个 p 标签用来放置文本，另外一人用来放置分离的多行文本。

在HTML块外面的文本

例3 : Source View

<html:div>
    你想保存下面的文档吗?
    <html:hr/>
</html:div>   
Expense Report 1
What I Did Last Summer
<button id="yes" label="Yes"/>
<button id="no" label="No"/>

从图像上可以看到，在div标签里面的文本可以显示出来但其它的文本没有显示(Expense Report 1 和 What I Did Last Summer)。这是因为要显示的文本没有被HTML或XUL元素围绕起来。要显示这些文本，你必须将它放在div标签里面，或者用description 标签将它围起来。

无效的HTML元素

<html:po>Case 1</html:po>
<div>Case 2</div>
<html:description value="Case 3"/>

上面这三个样例不能被显示，每个都有一个不同的原因。

样例1: po不是一个正确的HTML标签，所以Mozilla不知怎么去处理它。
样例2: div是有效的，但是只能用在HTML中。如果要在这里使用，你必须为它添加html:限定符。
样例3: description元素仅仅在XUL中是有效的，而不是在HTML中。它不可以有html:限定符。

接下来，我们将要学习如何用在元素间添加定位格.