从 HTML 迁移到 XHTML 的 8 个简单规则
4.17/5 (9投票s)
2004 年 2 月 2 日
5分钟阅读
53430
从 HTML 迁移到 XHTML 的 8 个简单规则
目录
- 要求
- 引言
- 第一，添加 DOCTYPE
- 第二，指定命名空间
- 第三，将所有标签改为小写
- 第四，闭合所有打开的标签
- 第五，确保所有元素都正确嵌套
- 第六，为所有属性值加上引号
- 第七，为具有 name 属性的元素添加 id 属性
- 第八，验证
要求
本文档假设您至少对 HTML 有一定的了解。
引言
到目前为止，您应该对 XHTML 是什么以及为什么要采用它有了初步的了解。如果没有，请阅读 Paul Watson 的文章，从 HTML 入门到 XHTML。
目前网络上的大多数文章都是用 HTML 编写的，而且 HTML 本身写得并不好。那么，如何将编写糟糕的 HTML 转换为 XHTML 呢？
这是我在重新设计一个联邦政府网站时遇到的问题。该网站规模庞大（40,000 页），我负责处理排名前 30 的页面模板。这是我从这个充满挑战和令人兴奋的项目中学到的东西。
第一，添加 DOCTYPE
DOCTYPE 是当前文档版本的 SGML 声明。DOCTYPE 应该放在您的 XHTML 文档的第一行，除非您使用 XML 声明来指定字符编码，例如下面的声明。在这种情况下，DOCTYPE 应该紧跟在 XML 声明之后。默认字符编码是 UTF-8 或 UTF-16。
<?xml version="1.0" encoding="UTF-8"?>
文档类型定义（DTD）有三种类型：严格型（Strict）、过渡型（Transitional）和框架集型（Frameset）。
当文档中的标记严格遵循所有 HTML 规则时，应引用严格型 DTD。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
当从 HTML 迁移到 XHTML 时，最好使用过渡型 DTD。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
当页面布局使用框架时，引用框架集型 DTD。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
第二，指定命名空间
为了使文档成为有效的（稍后会详细介绍）XHTML 文档，必须指定命名空间——在没有指定命名空间的情况下，浏览器会使用默认值。
将您的打开的 html (<html>) 标签更改为如下所示：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
关闭的 html (</html>) 标签没有变化。
第三，将所有标签改为小写
您可能习惯于将 HTML 标签写成大写，以区分标签和数据，但 XHTML 要求所有标签都必须写成小写。XHTML 是区分大小写的，所以
<HTML> 不被视为等同于
<html>，后者是正确的写法。
第四，闭合所有打开的标签
我们知道，在 HTML 中，某些标签必须闭合，而另一些标签，如 <img> 标签，则不需要。在 XHTML 中，所有标签都有一个闭合标签。像 <br> 这样的标签（空元素）现在应该写成 <br />，在标签和斜杠之间有一个空格，在斜杠和尖括号之间没有空格。标签和斜杠之间的空格是为了与旧版浏览器兼容。带有数据的标签，如 <p> 标签，可以通过使用 </p> 标签来闭合。img 标签被视为一个空标签，并且如下闭合：
<img src=”myimage.jpg” alt=”The author with the Pope” />
第五，确保所有元素都正确嵌套。
这意味着最里面的标签应该首先被关闭，然后是它之前的那个，依此类推。
<p> <b> This is wrong </p> </b>
正确写法应为：
<p> <b> This is right </b> </p>
第六，为所有属性值加上引号
在 XHTML 中，所有属性值都必须用引号括起来。这意味着以下是错误的。
<img src=myimage.jpg />
正确的做法如下。此外，对于屏幕上的每张图片（除了占位符和非信息性、装饰性图片），最好在 alt 标签中提供有意义的、描述性的文本。
<img src=”myimage.jpg” alt=”The author with the Pope” />
第七，为具有 name 属性的元素添加 id 属性。
name 属性已被弃用，id 属性取而代之。但是，为了向后兼容，最好保留 name 属性并添加 id 属性。id 属性应添加到使用 name 属性的任何地方，例如 a、applet、form、frame、iframe、img、 和 map 标签。id 属性的语法与 name 属性类似，写法为 id=”value”。
第八，验证
现在您已经完成了，您怎么知道自己做对了吗？这就是验证的作用——还记得我说稍后会谈到它吗？现在您已经有了一个 XHTML 文档，是时候检查它是否真的遵循了上面列出的所有规则。一种方法是检查整篇文档，逐行查看代码。有两点——a) 这很枯燥，b) 这并不能保证任何事情。
因此，次优的选择是使用验证器，例如 W3C 在 http://validator.w3.org 提供的验证器。您可以从本地机器上传文件，也可以提供要验证的 URL。
另一种简单的方法是将文件保存为 xml 文件——filename.xml，然后在浏览器中打开它。如果显示正常，则表示它是有效的 XHTML。如果不是，您会立即发现问题所在。好了——就是这么简单，您没有任何借口可以推迟了。
参考
- W3Schools – www.w3schools.com
- W3C - http://www.w3.org/TR/xhtml1/