1.1 HTML与XHTML

HTML与XHTML是一种语言的不同阶段，就像文言文和白话文之间的关系。因此它们也经常被写作(X)HTML。

学FK网76页sh68网(http://www.xwangye.com)

1.1.1 追根溯源

(X)HTML是所有上网的人每天都离不开的基础，所有网页都是使用(X)HTML编写的。随着网络技术日新月异的发展，HTML也经历了不断的改进。可以认为XHTML是HTML的“严谨版”。
HTML在初期，为了它更广泛的被接受，大幅度的放宽了标准的严格性，例如标记可以不封闭，属性可以加引号，也可以不加引号，等等，导致出现了很多混乱和不规范的代码。为了互联网的进一步发展，W3C组织不断努力逐步推出了新版本规范。从HTML到XHTML，大致经历了以下几个版本。

学FK网76页sh68网(http://www.xwangye.com)

学FK网76页sh68网(http://www.xwangye.com)

  • HTML2.0:于1995年11月发布。
  • HTML3.2:于1996年1月14日发布。
  • HTML4.0:于1997年12月18日发布。
  • HTML4.01:微小改进，于1999年12月24日发布。
  • XHTML1.0:于2000年1月发布，后又经过修订于2002年8月1日重新发布。
  • XHTML1.1：于2001年5月31日发布。
  • XHTML2.0:正在制定中。

    在正式的标准序列中，没有HTML1.0版，是因为在最初阶段，各个机构都推出了自己的方案，没有形成统一的标准。因此，W3C组织发布的HTML2.0是形成标准后的第一个正式规范。
    这些规范主要是为浏览器的开发者阅读的，而对于网页设计师来说知道一些大的原则就可以了。当然，如果设计师真的能够花一些时间把HTML和CSS规范仔细通读一遍，将会又巨大收获。因为这些规范是所有设计师的“圣经”。

    学FK网76页sh68网(http://www.xwangye.com)

    1.1.2 DOCTYPE(文档类型)的含义与选择

    从Dreamweaver MX 2004版开始，在使用Dreamweaver新建一个网页文档的时候，默认情况下生成的基本网页代码是这样的:

    学FK网76页sh68网(http://www.xwangye.com)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>

    学FK网76页sh68网(http://www.xwangye.com)

    <body>
    </body>
    </html>

    学FK网76页sh68网(http://www.xwangye.com)

    最上边两行关于“DOCTYPE”（文档类型）的声明是告诉浏览器，使用哪种规范来解释这个文档中的代码。
    设计师可以在新建文档的时候选择使用哪种文档类型。如图1.1所示。

    对于HTML4.01和XHTML1.0分别对应于一种严格的（Strict）类型和一种过渡（Transitional）类型。过渡类型兼容以前版本定义的，而在新版本已经废弃的标记和属性。严格类型不兼容已经废弃的标记和属性。

    学FK网76页sh68网(http://www.xwangye.com)

    1.1.3 XHTML与HTML的重要区别

    尽管目前浏览器都兼容HTML，但是为了网页能够符合标准，设计师应该尽量使用XHTML规范来编写代码，需要注意一下事项。

    学FK网76页sh68网(http://www.xwangye.com)

    1.在XHTML中标记名称必须小写

    在HTML中，标记名称可以大写或者小写。例如，下面的代码在HTML中是正确的：

    学FK网76页sh68网(http://www.xwangye.com)

    <BODY>
    　　 <P>这是一个文字段落</P>
    </BODY>

    学FK网76页sh68网(http://www.xwangye.com)

    但是在XHTML中必须写为:

    学FK网76页sh68网(http://www.xwangye.com)

    <body>
    　　 <p>这是一个文字段落</p>
    </body>

    学FK网76页sh68网(http://www.xwangye.com)

    2.在XHTML中属性名必须小写

    在HTML中属性的名称也必须是小写的

    学FK网76页sh68网(http://www.xwangye.com)

    3.在XHTML中标记必须严格嵌套

    HTML中对标记的嵌套没有严格的规定。例如。下面的代码在HTML中是正确的。

    学FK网76页sh68网(http://www.xwangye.com)

    <b><li>这行文字以粗体倾斜显示</b></li>

    学FK网76页sh68网(http://www.xwangye.com)

    而在XHTML中必须该为：

    学FK网76页sh68网(http://www.xwangye.com)

    <li><b>这行文字以粗体倾斜显示</b></li>

    学FK网76页sh68网(http://www.xwangye.com)

    此外，经常被忽略的是对列表标记的嵌套写法。例如，下面的写法在HTML中是错误的。

    学FK网76页sh68网(http://www.xwangye.com)

    <ul>
    <li>咖啡</li>
    <li>茶
    　 <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
    <li>牛奶</li>
    </ul>

    学FK网76页sh68网(http://www.xwangye.com)

    正确的写法是：

    学FK网76页sh68网(http://www.xwangye.com)

    <ul>
    <li>咖啡</li>
    <li>茶
    　 <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
    </li>
    <li>牛奶</li>
    </ul>

    学FK网76页sh68网(http://www.xwangye.com)


    4.在XHTML中标记必须封闭,即使是空元素也必须封闭。

    在HTML中，下列代码是正确的

    学FK网76页sh68网(http://www.xwangye.com)

    <p>text line 1
    <p>text line 2
    换行<br>
    水平线<hr>
    图像<img src="happ.gif" alt="happy face" >

    学FK网76页sh68网(http://www.xwangye.com)

    而在XHTML中正确的写法是：

    学FK网76页sh68网(http://www.xwangye.com)

    <p>text line 1</p>
    <p>text line 2</p>
    换行<br/>
    水平线<hr/>
    图像<img src="happ.gif" alt="happy face" />

    学FK网76页sh68网(http://www.xwangye.com)


    5.在HTML中属性值用双引号括起来，必须用完整形式

    在HTML中，属性可以不必用双引号，而且经常简写方式设定属性值例如：

    学FK网76页sh68网(http://www.xwangye.com)

    <p class=heading> <inpt disabled>

    学FK网76页sh68网(http://www.xwangye.com)

    在XHTML中，必须正确的写为：

    学FK网76页sh68网(http://www.xwangye.com)

    <p class="heading"> <inpt disabled="true">

    学FK网76页sh68网(http://www.xwangye.com)

    6.在XHTML中，应该区分“内容标记”与“结构标记”

    例如<p>标记是一个内容标记，而<table>标记是结构标记，因此不允许将<table>标记置于<p>的内部。而如果将<p>标记置于<td></td>之间，则完全是正常的。
    有时这种错误不容易被注意到，在Dreamweaver中也得不到提示，但是在微软公司新推出得网页制作软件Expression Web中则会给出明确提示，就是红色波浪线出现的上方，有兴趣的读者可以尝试一下这个新的网页设计软件。

    学FK网76页sh68网(http://www.xwangye.com)