代替常见的 HTML 短语
使用 CDATA 节
您可能熟悉 HTML 中使用注释包装脚本元素体的方法：
清单 6. 在注释中包装脚本元素
＜script language="JavaScript"＞
＜!--
var msg = "Hello World!";
document.write(msg);
//--＞
＜/script＞
这种做法包括多个层次的转义，必须非常小心。比如倒数第二行的 // 是一个 JavaScript 注释标记，防止脆弱的 JavaScript 引擎把它和 XML 注释结束标签混淆起来，该注释又防止脆弱的浏览器被脚本内容迷惑住。使用 XML 的通用转义结构 CDATA 节通常可以避免这种精致的游戏。该例的 XHTML 版本如下：
清单 7. 用 CDATA 节包装脚本
＜script language="JavaScript"＞
＜![CDATA[
var msg = "Hello World!";
document.write(msg);
]]＞
＜/script＞
在 CDATA 节中可以原样保留尖括号、“与”符号或者类似的字符。只要能够处理正确声明的 XHTML 1.1，任何浏览器都能处理 script 之类元素的语义。不过 CDATA 节也有一个弱点，序列 ]]＞ 不能出现在 CDATA 节中。所幸的是，这种序列很少出现，但有可能在 JavaScript 脚本中存在，特别是处理数组类型的时候。
清单 8. 序列“]]＞”出现在 JavaScript 代码中的例子
if (i[j[0]]＞1)
{
//do something
}
清单 8 所示的例子中，迂回之道是在右方括号（]）之间或者大于号（＞）之前增加一个空格。
还应该养成使用 CDATA 节包装 style 元素体的习惯。
理解行内样式设置字体和文本细节
在 1.1 版中，XHTML 取消了 font 元素。如果过去使用该元素设置字体和其他文本样式，现在可使用 CSS 完成。最简单的办法就是使用行内样式。不应该写作：
＜p＞＜font color='blue' size='6'＞Hello world＜/font＞＜/p＞
应该像下面这样写（虽然不建议这样做，因为已经过时了）：
＜p style='color: blue; font-size: x-large;'＞Hello world＜/p＞
要注意，size 属性变成了 font-size CSS 属性，值 6 也变成了更清楚的 x-large。原来的字体大小数字变成了下列 CSS font-size 值：
* 1 变为 xx-small
* 2 变为 x-small
* 3 变为 small
* 4 变为 medium
* 5 变为 large
* 6 变为 x-large
* 7 变为 xx-large
HTML 的 font 是一种行内元素，但这并没有限制不能使用上述技术。可以将 style 属性放在任何元素中，包括行内元素。如果没有其他行内元素来设置样式，可使用 span，如下所示：
＜p＞Hello ＜span style='color: blue; font-size: x-large;'＞world＜/span＞＜/p＞
该例中，指定的样式仅应用于文本“world”。
同样，也不赞成使用 style 属性，因为它把表示和内容混合在了一起。虽然在 XHTML 1.1 中使用是合法的，但不鼓励这样做，如 下一节 所述，将来的 XHTML 必须使用严格的样式表。
使用样式表设置字体和文本细节
与 style 属性相比，CSS 样式表是在 XHTML（和 HTML）中应用样式的更加模块化的方法，这也是避免使用前者的原因。将样式表结合到 HTML 文档中的一种方法是在文档头部的 style 元素包含样式表。清单 9 显示了具体的用法，它与 理解行内样式设置字体和文本细节 一节中的片段对应。
清单 9. 在 style 元素中包含样式表
＜?xml version="1.0" encoding="UTF-8"?＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ＞
＜head＞
＜title＞Hello document＜/title＞
＜style type="text/css"＞
＜![CDATA[
p {
color: blue;
font-size: x-large;
}
]]＞
＜/style＞
＜/head＞
＜body＞
＜p＞Hello world＜/p＞
＜/body＞
＜/html＞
注意 style 元素体中 CDATA 节的使用，如“使用 CDATA 节”中所述。
如果在浏览器中查看该文件，可以看到类似图 2 显示的结果。
图 2. 使用样式表设置字体和文本细节
使用 XML 样式表处理指令
在 HTML 文档中，如果要使用文档外部的样式表，可用 link 元素指定外部样式源的位置。下面的片段显示了这类链接的一个例子。
清单 10. 在 HTML 中用 link 元素指定外部样式表
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ＞
＜head＞
＜title＞Hello document＜/title＞
＜link rel="stylesheet" type="text/css" href="hello.css"/＞
＜/head＞
在 XHTML 1.1 中可使用 XML 处理指令（PI）关联样式表和文档。我在以前的 developerWorks XML/CSS 教程（请参阅 参考资料）中介绍过 PI。清单 11 中的片段和清单 10 是等价的，不过使用的是 PI。
清单 11. 使用 PI 关联样式表和文档
＜?xml-stylesheet type="text/css" href="hello.css"?＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ＞
＜head＞
＜title＞Hello document＜/title＞
＜/head＞
使用样式对齐内容
HTML 中块元素的对齐属性是另一个必须用样式表控制表示的很好的例子。比如，XHTML 1.1 中的 div 元素不再有 align 属性。因此下面的代码在 XHTML 1.1 中是不合法的：
＜div align="center"＞Hello world＜/div＞
可以改用内部或外部样式表。清单 12 中的例子（下载文件 中的 eg_4_5.xhtml）使用了内部样式表。
清单 12. 使用内部样式表对齐内容
＜?xml version="1.0" encoding="UTF-8"?＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ＞
＜head＞
＜title＞Hello document＜/title＞
＜style type="text/css"＞
＜![CDATA[
div {
text-align: center;
}
]]＞
＜/style＞
＜/head＞
＜body＞
＜div＞Hello world＜/div＞
＜/body＞
＜/html＞
注意，align 属性变成了 text-align CSS 属性。如果用浏览器查看，可以看到类似图 3 所示的结果。
图 3. 使用内部样式表对齐内容
把样式用于表
HTML 的表支持很多控制表示的属性，包括 使用样式对齐内容 中讨论的 align 属性。所有这些都以不同的方式转移到 CSS 样式表属性中了。下面这种典型的 HTML 表格起始标签在 XHTML 1.1 中是非法的：
＜table border="0" cellpadding="5" cellspacing="5" width="50%"＞
所有这些属性在 XHTML 1.1 中都被废除了，必须使用样式表规则来代替。清单 13（下载文件 中的 eg_4_6.xhtml）使用了内部样式表。
清单 13. 在表格表示中使用内部样式表
＜?xml version="1.0" encoding="UTF-8"?＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ＞
＜head＞
＜title＞Hello document＜/title＞
＜style type="text/css"＞
＜![CDATA[
table {
border: None;
width: 50%;
}
table td {
padding: 5px;
spacing: 5px;
}
]]＞
＜/style＞
＜/head＞
＜body＞
＜table＞
＜tbody＞
＜tr＞
＜td＞Hello＜/td＞
＜td＞World＜/td＞
＜/tr＞
＜/tbody＞
＜/table＞
＜/body＞
＜/html＞
这些属性转移到 CSS 样式表中以后更加灵活。通过 border CSS 属性，不仅能够设置简单的粗细属性。还可以设置边框线的颜色和形式。此外，所有的单位都更加灵活。可以看到，这里为 padding 和 spacing 属性指定了像素单位。如果在浏览器中查看该文件，可看到类似图 4 所示的结果。
图 4. 在表格表示中使用内部样式表
使用 ins 和 del 表示编辑过的内容
HTML 中可视化表示已编辑内容的常见方法是，使用删除元素 s 或 strike 标记已删除的内容，使用各种不同的表示方法显示新插入的内容。显示结果类似于启用显示修订 或类似选项的现代字处理程序。删除线元素从 XHTML 1.1 中消失了，但是可使用两个元素直接表示插入或删除的内容。下面的例子不再合法了：
＜p＞Hello ＜s＞moon＜/s＞＜b＞world＜/b＞＜/p＞
s 元素完全是非法的，b 元素是合法的，但不建议使用（通常用 strong 标签代替）。清单 14（下载文件 中的 eg_4_7_1.xhtml）使用了推荐的 ins 和 del 元素：
清单 14. 用 ins 和 del 表示已编辑的内容
＜?xml version="1.0" encoding="UTF-8"?＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ＞
＜head＞
＜title＞Hello document＜/title＞
＜/head＞
＜body＞
＜p＞Hello ＜del＞moon＜/del＞＜ins＞world＜/ins＞＜/p＞
＜/body＞
＜/html＞
如果在浏览器中查看，就会看到类似图 5 的结果。
图 5. 用 ins 和 del 表示已编辑的内容
注意，Firefox 默认使用下划线呈现插入的文本，而不是像第一个例子中那样用粗体显示。可以使用 CSS 规则加以改变，比如：
清单 15. 覆盖 Firefox 中的下划线
ins {
text-decoration: none;
font-weight: bold;
}
第一个规则取消了下划线，第二个指定粗体显示。尝试 下载文件 中的示例文件 eg_4_7_2.xhtml，看看现实的效果如何。
其他已改变用法简介
字体和对齐仅仅是需要从专门属性转移到样式表的两种表示细节。下面是一些常用 HTML 用法和对应的 XHTML+CSS 的例子。
不要使用 ＜body bgcolor="white"＞，因为 bgcolor 属性已经没有了，应该使用 CSS 属性 background-color: white;。类似地，text 被 CSS 属性 color 代替，marginwidth 和 marginheight 被 margin 代替。
不要用 u 设置下划线，而用 span 关联 CSS 属性 text-decoration: underline。（有趣的是，属性 text-decoration: blink 和声名狼藉的非标准元素 blink 的效果相同，考虑到很多人对此元素的看法 —— 用户抱怨网页上的闪烁元素分散了注意力，我不建议使用这个 CSS 属性。）
不能使用 ＜td valign="middle"＞，valign 属性已经没有了，应改为 CSS 属性 vertical-align: middle。
不要用 ＜img border="0" ...＞ 取消某些浏览器在图片上增加的框，改为 表格 中已经讨论过 CSS 属性 border。
实际应用中，每个元素类型需要多个样式，编写高效的样式表必须学习 CSS 选择器。应该了解 class、ID、descendant、sibling 和其他类型的 CSS 选择器。我撰写的关于在 XML（但不一定是 XHTML）中使用 CSS 的文章（请参阅 参考资料）对此进行了介绍。
