XHTML，从HTML起点开始

Paul Watson

4.85/5 (18投票s)

2002 年 1 月 30 日

6分钟阅读

220892

612

面向熟悉 HTML 并希望开始使用 XHTML 的人士的入门指南

下载示例文件 - 3 Kb

摘要

本文将帮助熟悉HTML的人开始制作符合XHTML 1.0标准的文档。本文的方法非常简单，XHTML也是如此。然而，正是XHTML的这种简单性，让一些Web开发人员和设计师感到困惑。

本文不深入探讨XML，也不探讨XHTML为何取代HTML。

要求

建议阅读本文前具备HTML和CSS的基础知识。不需要JavaScript、ASP或XML知识。但XML知识将有助于理解XHTML的方法和原因。

为什么要改为XHTML？

在本文中，我不会深入探讨使用XHTML的原因或其好处。那将是以后文章的主题。但是，如果您想获得一些使用XHTML的好理由，请查看以下链接：

XHTML不会破坏我的网站在访客浏览器中的显示吗？

简而言之，不会。XHTML具有非常好的向后兼容性，使用XHTML 1.0 Transitional编码的页面可以在所有支持HTML 4.01的浏览器中运行。W3C在使Web文档更接近XML方面做得非常出色，而且没有破坏兼容性或让更多Web开发人员陷入困境。

HTML与XHTML示例

所以，您想开始创建新的XHTML兼容文档，或者将您当前的HTML 4.01文档转换为XHTML 1.0文档。让我们先来看一些实际的HTML与XHTML的对比，然后用要点形式介绍区别。

一个HTML文档

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>HTML to XHTML Example: HTML page</title>
        <link rel="Stylesheet" href="htmltohxhtml.css" type="text/css" media="screen">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <p>This is the HTML page. It works and is encoded just like any HTML page you    
         have previously done. View <a href="htmltoxhtml2.htm">the XHTML version</a> of 
         this page to view the difference between HTML and XHTML.</p>
        <p>You will be glad to know that no changes need to be made to any of your CSS files.</p>
        <hr>
        <h1>Standards</h1>
        <p>Standards are important for, and this is only one reason, the simple fact that with a 
         standardised web you will only have to code your site once and it will work on all 
         browsers, on all platforms and on all devices.</p>
        <p>Following are some useful web standards links.</p>
        <h2>Useful Links</h2>
        <table cellpadding="0" cellspacing="0">
            <tr class="tblheader">
                <td>Name</td>
                <td>Link</td>
            </tr>
            <tr>
                <td class="tbldata">Web Standards Project, WASP</td>
                <td class="tbldata"><a href="http://www.webstandards.org">webstandards.org</a></td>
            </tr>
            <tr>
                <td class="tbldata">The W3C</td>
                <td class="tbldata"><a href="http://www.w3c.org">w3c.org</a></td>
            </tr>
            <tr>
                <td class="tbldata">XHTML, HTML Validator</td>
                <td class="tbldata"><a 
                 href="http://www.nypl.org/styleguide/">nypl.org/styleguide/</a></td>
            </tr>
            <tr>
                <td class="tbldata">New York Public Library Style Guide</td>
                <td class="tbldata"><a 
                 href="http://validator.w3.org/">validator.w3.org/</a></td>
            </tr>
            <tr>
                <td class="tbldata">Standards Evangelist, Paul Watson</td>
                <td class="tbldata"><a 
                 href="mailto:paulmwatson@email.com">paulmwatson@email.com</a></td>
            </tr>
        </table>
        <hr>
        <p>
            <a href="http://validator.w3.org/check/referer"><img border="0" 
             src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" 
             height="31" width="88"></a>
        </p>
    </body>
</html>

这是一个格式良好且有效的HTML 4.01 Transitional文档。您可以将其与 W3C HTML验证服务进行验证。

一个XHTML文档

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>HTML to XHTML Example: XHTML page</title>
        <link rel="Stylesheet" href="htmltohxhtml.css" type="text/css" media="screen" />
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    </head>
    <body>
        <p>This is the XHTML page. As you can see the result between the two pages 
         is identical, even though one is in HTML 4.01 and the other is in XHTML 1.0. View 
         <a href="htmltoxhtml.htm">the HTML version</a> of this page to view the difference 
         between HTML and XHTML.</p>
        <hr />
        <h1>Standards</h1>
        <p>Standards are important for, and this is only one reason, the simple fact that 
         with a standardised web you will only have to code your site once and it will work 
         on all browsers, on all platforms and on all devices.</p>
        <h2>Useful Links</h2>
        <p>Following are some useful web standards links.</p>
        <table cellpadding="0" cellspacing="0">
            <tr class="tblheader">
                <td>Name</td>
                <td>Link</td>
            </tr>
            <tr>
                <td class="tbldata">Web Standards Project, WASP</td>
                <td class="tbldata"><a 
                  href="http://www.webstandards.org">webstandards.org</a></td>
            </tr>
            <tr>
                <td class="tbldata">The W3C</td>
                <td class="tbldata"><a href="http://www.w3c.org">w3c.org</a></td>
            </tr>
            <tr>
                <td class="tbldata">XHTML, HTML Validator</td>
                <td class="tbldata"><a 
                  href="http://www.nypl.org/styleguide/">nypl.org/styleguide/</a></td>
            </tr>
            <tr>
                <td class="tbldata">New York Public Library Style Guide</td>
                <td class="tbldata"><a href="http://validator.w3.org/">validator.w3.org/</a></td>
            </tr>
            <tr>
                <td class="tbldata">Standards Evangelist, Paul Watson</td>
                <td class="tbldata"><a 
                  href="mailto:paulmwatson@email.com">paulmwatson@email.com</a></td>
            </tr>
        </table>
        <hr />
        <p>
            <a href="http://validator.w3.org/check/referer"><img border="0" 
             src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" 
             height="31" width="88" /></a>
        </p>
    </body>
</html>

这是一个格式良好且有效的XHTML 1.0 Transitional文档。您可以将其与 W3C HTML验证服务进行验证。

区别

坦白说，HTML 4.01和XHTML 1.0之间的区别几乎可以忽略不计。不要以为您遗漏了什么重要的东西，因为它就是这么简单。我将列出区别，然后详细解释每一个。

DOCTYPE参考已更改
HTML标签中的xmlns参考
所有标签都使用小写
有效的结构
属性引号是必需的
"空"标签现在必须关闭

就是这些了，没有什么惊天动地的事情。让我们进入细节。

DOCTYPE

自然，从HTML 3到HTML 4.01，您的DOCTYPE发生了变化。同样，从HTML 4.01到XHTML 1.0，您的DOCTYPE也必须改变。

什么是DOCTYPE？它是文档顶部的声明。简单地说，DOCTYPE是您告诉Web浏览器应使用哪个标准或规范来解释Web文档的声明。您是在告诉Web浏览器，接下来的内容符合某个规范，例如XHTML或HTML 4.01。Web浏览器就可以利用这些知识。使用DOCTYPE声明变得非常重要，实际上对于XHTML 1.0是强制性的。如果您不添加它，那么符合XHTML 1.0的浏览器将根本不会渲染您的页面。

如果您正在编写ASP页面，请将DOCTYPE放在 <%@ Language=VBScript %> 声明的下方。本质上，客户端的Web浏览器必须在Web文档的第一行看到DOCTYPE。

HTML 4.01 DOCTYPE看起来像这样： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

所以，对于您的XHTML文档，只需在页面顶部添加 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">。

xmlns

xmlns，即XML命名空间声明，再次告诉浏览器使用位于W3C的XHTML规范。此声明继承自XML规范，在HTML 4.01中没有对应项。熟悉VML的人会认出这种用法。

您应该将 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" 放在HTML标签中，如下所示：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

所有标签都使用小写

由于XHTML是一个有效的XML规范，因此它区分大小写。这意味着  与  是不同的。

这意味着，从现在开始，您应该将所有标签和属性都写成小写，而不是混合或全大写。

*关于这个话题：正如英语一样，每个规则都有例外。在这种情况下，请确保您的DOCTYPE声明中的DOCTYPE是大写的。如果您不这样做，它将无效，浏览器或验证器将无法识别该声明。我是吃过亏才明白的：)

有效的结构

许多Web开发人员创建了结构无效的HTML，我知道我曾经也是。例如，这段代码

<p><b>This is invalid</p></b>

无效，因为段落标签在strong标签内部关闭，而strong标签在段落标签内部打开。然而，HTML 4.01允许这种情况发生而不会发出警告。

然而，XHTML 1.0会严格检查这一点，您的Web文档将无效。要使其有效，您应该保持有效的结构，如下所示：

<p><b>This is invalid</b></p>

强制属性引号

属性引号是属性值周围的引号。例如，图像的src属性的值必须用引号括起来，例如： src="images/bob.gif"

像Microsoft Visual Interdev这样的罪魁祸首不会在属性值周围添加引号，而Web浏览器允许这样做（尽管Netscape有时会感到困惑，因为它就是这样）。不使用引号的XHTML兼容浏览器将不会渲染您的文档。顺便说一句，单引号不算。

所以，对于XHTML 1.0，永远不要写 你的引号在哪里？，而应该写 啊，在这里！。

关闭"空"标签

空标签是没有关闭标签的标签，例如 <img> 或  。

因为XHTML是XML的一个规范，所以所有标签都必须关闭。无论是 关闭 还是 。

所以，对于XHTML，您只需要确保在任何空标签的关闭括号前添加一个 /。

需要注意的是，您还应该在 / 和标签的其他属性之间留一个空格，例如 <img src="images/bob.gif" width="50" height="50" alt="Bob, cavorting" />。之所以这样做，是因为Netscape如果没有空格而直接添加 /，肯定会出错。

总结

是的，我是认真的。就这么简单。

请记住使用DOCTYPE，添加xmlns，对属性和标签使用小写，始终使用有效的结构，将属性值放在引号内，并始终关闭空标签。一旦您做到了这一点，您就远远领先于其他人，并为您的Web文档做好准备，迎接XML的承诺。

请注意，本文基于Transitional XHTML规范，而非Strict规范。选择Transitional规范的原因是，Strict规范的向后兼容性远不如Transitional规范。

所以XHTML确实很简单，它只需要Web开发人员多花一些精力并集中注意力。如果您想阅读更多关于XHTML原因的文章，请写信给我，我将为您撰写。

我是通过 zeldman.com 和非常精炼的纽约公共图书馆风格指南学会XHTML的。