[连载]Web前台开发（二）——XHTML入门

JAY · 发表于 2007-10-11 12:08:30

作为Web前台的开发，对(X)HTML和CSS的了解是必不可少的。那什么是(X)HTML，我们开始了解吧。

大家可能注意到我是这样写的(X)HTML，为什么要把X放到括号里面，实际上这里有两个概念：HTML和XHTML。简而言之就是“超文本标记语言”和“可扩展的超文本标记语言”。以前的很多页面都是使用HTML语言写的，虽然用她们写页面没有什么太大的问题，不过HTML的标签语义不够强大，而且“内容性标签”（如<h1/>等等）和“样式性标签”（如等等）混杂，使得整个页面代码阅读性极差，也不利于搜索引擎从中获得真正重要的信息。另外语法上的不规范更是给浏览器的解释带来很多问题，导致同一页面在多个浏览器里面可能完全面目全非。
因此W3C标准组织提出了让XML来彻底代替HTML，不过由于现在互联网上很多页面都是用HTML写的，不可能一夜间所有的HTML都变成XML了，所以这期间XHTML便诞生了。她是一门从HTML到XML的过渡语言，保留了HTML的大部分“内容性标签”，去掉了很多不标准“样式性标签”，而且整个代码的语法严格按照XML的标准编写。使得这个代码结构清晰，也是的浏览器和搜索引擎能更好的工作。

介绍了这么多，具体来看看一些细节问题。

1. 在语法上，XHTML要求所有标签和属性都使用“小写字符”，而HTML则可以不管大小写。例如下面的代码

<img src="pic.gif" />
<IMG SRC="pic.gif" />

复制代码

虽然上面两行代码在浏览器中都显示出一张图片，不过不要以为是你写的没问题，而要归功于你那“包容性”极强的浏览器。经过10多年的发展，目前的浏览器能“包容”很多不规范的代码了，虽然她们本身上或多或少有些问题。

2. XHTML要求所有的属性值必须写出而且必须用双引号（"）括起来。例如下面的代码

1. <img src=pic.gif />
2. <img src='pic.gif' />
3. <img src="pic.gif" />

复制代码

1、2、3行代码在HTML代码中都能正确地显示出一张图片，但是在XHTML角度来看1、2是错误的。
你可能想到类似于radio button的checked的属性实际没有属性值，但是又必须写出来，那又该怎么做呢？XHTML对此类属性要求其属性值直接重复其属性名就可以，例如：

<input type="radio" checked="checked" />

复制代码

3. XHTML要求所有标签必须配对出现。也就是说你不能再像HTML里面那样，写了标签，就不负责任的不去写标签了，所有的标签都要有明确的起始终结位置，例如：

<body>
Here is some content
</body>

复制代码

你也许又要问，像<img>标签怎么写结束标签呢？其实像这一类标签，在XML里面被称作为"Empty Element"，即“空元素”，再说明白一点就是她们没有子标签。对于这类标签，她们的起始标签也就是终止标签，只需要在起始标签的">"前面加入"/"，形成"/>"，例如：

<img src="pic.gif" />

复制代码

4. XHTML要求所有标签必须严格嵌套，即不能有标签交叉叠加出现，例如：

Here is some content

复制代码

这样的代码是不允许在XHTML里面出现的，比如"is"到底是属于哪个标签，谁也说不清楚，这也导致DOM树的构建会出现问题。所以如果你想表达上面的意思就要写成：

Here is some content

复制代码

关于XHTML的入门介绍，先说这么多了，更多的细节需要大家自己去体验，下一次将介绍CSS的相关知识，请期待吧。

jason · 发表于 2007-10-11 14:30:16

召唤详细教程，最好推荐几本书XDD

Lendy · 发表于 2007-10-11 23:07:31

看完之后，感觉不出“X”的特性，反倒觉得XHTML只是变繁琐了……要写多点体现“X”的东西啊。

JAY · 发表于 2007-10-12 12:21:21

X就是语法上像XML靠拢了，更规范更严格，不像没有X那么随意。除此以外X没有带了更多的特性，只是为了统一规范标准，尽量让各个浏览器保持一致。

		自动登录	找回密码
密码			加入易码

[教程] [连载]Web前台开发（二）——XHTML入门