十天学会HTML：第一天 XHTML 学前准备-云破天开

一、XHTML导论（XHTML相关知识）

1.1、序言

万维网是我们这个时代最重要的信息传播手段。几乎任何人都可以创建自己的网站，然后把它发布在因特网上。一些网页属于企业，提供销售服务；另一些网页属于个人，用来分享信息。你可以自己决定网页的内容和风格。所有网页都要用某种形式的HTML 来编写。HTML 可以对文本进行格式化，添加图形、声音和视频，并且可以将它保存为所有计算机都可以读取的文本文件。学习和掌握HTML 并不困难。编写HTML 并不是一个令人头昏的复杂过程，只需仔细输入并保持一致性。可以在几分钟内建立一个简单的HTML 页面并让它运行起来。另外，尽管有许多软件可以替你编写HTML 代码，但自己编写HTML 的好处是不必学习新的软件，也不会受到这些软件特性的限制。

1.2、因特网、Web和HTML

你肯定听说过因特网（Internet），但是因特网究竟是什么？简单的说，因特网是相互连接的计算机的集合。许多人拥有不间断的高速带宽连接（通过DSL、线缆或卫星），而另外一些人只在每天的某段时间内通过调制解调器用家庭计算机上网。无论是什么类型的连接，只要你联网了，你的计算机就成为因特网的一部分，并且与当前联网的其他所有计算机连接。

万维网（www worldwide web）是虚拟的。它无数不断变化的、种类不同的文档的集合，这些文档驻留在因特网的某个地方，都是用某种形式的HTML 编写的。

HTML（超文本标记语言）有两个基本特性——超文本和普适性。超文本意味着可以在网页中创建一个链接，从而将访问者链接到其他任何网页，实际上可以链接到因特网上的任何东西。这意味着可以通过许多不通的路径访问Web 上的信息。Web 的创建者Tim Berners-Lee 希望Web 能像人的大脑那样在信息之间建立广泛的联系，而不是像书籍那样只是静态数据源。

普适性的意思是：因为HTML 文档保存为纯文本文件，所以实际上任何计算机都可以读取网页。无论访问者是使用Macintosh、Windows 还是UNIX 计算机，甚至是Palm 这样的手持设备，都可以打开网页。Web 对所有计算机都是开放的。

1.3、能够打开网页并不意味着有相同的效果

尽管HTML 对于所有计算机都是可用的，但是这并不意味着每个人都能以相同的方式体验它。这就像是纽约的中央公园。我们都可能在那里散过去。但是如果你住在第5 大街的顶层豪华公寓里，而我睡在长椅上，那么我嫩对这个公园的看法就会很不一样。

HTML 也是这样。尽管实际上任何计算机都可以显示网页，但是这些页面的实际显示效果取决于计算机的类型、显示器、连接的速度以及用来查看页面的软件（浏览器）。当今最流行的浏览器是IE、Firef ox，Opera 和Safari，同时，用手持设备和PDA 上网正在逐渐流行起来。不幸的是，这些浏览器显示网页的方式不完全相同。所以，仅仅设计一个漂亮的公园是不够的，还要考虑到参观者的居住条件和环境。但是正如你所担忧的，你的控制能力是很有限的。尽管纽约市旅游委员会（New YorkCity Tourist Board）愿意让每个游客都能够在纽约过的愉快，他们也无法让游客在公园大饭店（Park Plaza Hotel）免费住宿。况且，即使他们提供了这样的免费住宿，有些人也不一定会接受，这些人可能更希望只是提供一张床或一顿早餐，或许更愿意住到他们的姐姐家里。这就是问题所在。其中的寓意是：人们用来查看页面的系统设置会差异很大，因此，要以适当的方式创建页面，让尽可能多的访问者能够以尽可能接近预期的方式查看页面。

1.4、浏览器之争

现在请想像一下，如果第五大街上的每个饭店和公寓都在中央公园里圈出一块地，并且用栅栏围起来，只允许自己的住客进去，那么会怎么样？我们这些住在公园长椅上的人只能隔着栅栏瞥一眼这些“专有”区域，而且一家饭店的住客也不能进入属于另一家饭店的区域。公园不再是个充斥着滑旱冰者、热狗车和散步年长者的热闹的公共场所，而是分割成了许多孤立封闭的小块空间。

1994 年，网景通信公司（Netscape Communications）在Web 上建起了第一道栅栏，所谓的“浏览器战争”开始了。为了吸引用户，他们抛弃了普适性，创建了一套只有Netscape 能够处理的HTML 扩展。例如，使用Netscape 的Web 冲浪者可以查看具有彩色文本、照片和其他改进的页面，而使用其他任何浏览器的冲浪者都会得到错误和古怪的结果，或者根本没有任何结果。

但是，很多人喜欢这些扩展，所以他们蜂拥进了“Netscape 饭店”。到了1996 年，它成了世界上最流行的计算机程序。微软也开始在Web 上圈出自己的区域。同样，为了吸引用户，他们增加了只有微软的IE 浏览器能够识别的非标准扩展。

根据Web Standard Project（www.webstandards.org，这是一个由第一流的设计人员组成的团体，它致力于使破碎的Web 重新联合起来）的统计，在浏览器战争的高潮时期，Web 设计者要浪费高达25%的时间来应付专有的标记，编写页面的多个版本来满足每种浏览器，并且只能向客户说明创建适用于所有浏览器的某些效果是不可能的。这真是一团糟。

1.5、标准的推出

Web 的联合国是一个称为万维网联盟（http://www.w3.org，缩写为W3C）的组织，由Web 的创建者Tim Berners-Lee 领导。它的目标是使Web 社区意识到普适性的重要意义，同时尽可能满足开发优美页面的愿望，努力拆除现有的栅栏并防止出现新的栅栏。

W3C 的成员列表（http://www.w3.org/Consortium/Member/List ）看起来像Web 行业大公司的“全家福”，其中包括老牌公司，比如苹果（Apple）公司（它提供iTunes 和iPod等产品）、Adobe 公司（Photoshop 等重要的Web 设计工具的开发商）、美国在线（America Online ）公司（它在1998 年收购了网景通信公司）、Opera（用于桌面计算机和手持设备的Opera 浏览器的开发商）和微软公司（它的IE 浏览器从Netscape 手中夺取了第一位的市场份额，而且一直保持至今）；还包括更现代的公司，比如Google 公司（最流行的搜索引擎）和Mozilla 公司（流行的开放源码Firef ox 浏览器的开发商，这种浏览器近年来是IE 的主要竞争对手）。W3C 的意图是将这些公司聚集在一起，让它们在标准上达成一致，而依靠速度、使用的简便性、价格或其他特性来体现产品的差异，从而避免Web 回到分崩离析的状态。

1.6、攻打象牙塔

最近（2006 年年中），对于W3C 的缓慢步调、过分强调抽象性以及缺乏具体结果产生了许多抱怨。许多Web 设计人员，包括领导标准化过程的设计人员，感觉被W3C 及其成员公司忽视了。

HTML 4.01 和XHTML 成为正式推荐标准已经差不多7 年了，但是W3C 对于未来的方向还没有形成一致的结果。CSS2 成为正式推荐标准已经差不多8 年了，但是还没有任何浏览器完全支持它，尽管每种主流浏览器都是由W3C 成员开发的。CSS3 仍然处于工作草案阶段，离完成可能还有好几年，更不用说实现了。一些设计人员已经等得不耐烦了，他们决定自己动手创建可扩展的标准化解决方案（http://www.microf ormats.org）。更多信息请参见Jeffrey Zeldman 的文章“An Angry Fix ”（http://www.zeldman.com/2006/07/17/an-angry-fix/）和John Oxton 的“No I am not bloodysorry”（http://joshuaink.com/blog/753/no-i-am-not-bloody-sorry）。在这个时期，你应该怎么做呢？我的建议一直是“适度”。要符合标准，但是不要成为标准的奴隶。即使是象牙牌香皂的标准化程度也只达到了99.4%。

1.7、HTML 3.2：标准化的开始

W3C 对Web 混乱状态采取的第一项措施是对专有的扩展进行标准化，将一些扩展吸收到正式规范中，而将其他扩展完全取消了。同时，他们鼓励浏览器厂商尽可能支持正式的HTML 标准，从而使根据标准编写的网页在不同的浏览器中有一致的表现。

1.8、HTML 4和CSS

W3C 的下一项措施要大胆得多。老版本的HTML 将内容、结构和格式化指令组合在一个文档中，这虽然比较简单，但是不够强大。W3C 设计了一个新系统，在这个系统中，格式化指令可以与内容和结构分开保存，因此可以根据需要应用于单一段落或网页，甚至整个网站。所以在新的HTML 4 中，W3C 标出了大多数格式化元素，这些元素以后将从规范中删除。这些元素被称为“已经废弃了”，不鼓励设计人员使用它们。同时，他们为格式化指令创建了一个新系统来替代废弃的格式化元素，这个系统称为层叠样式表（CSS）。CSS 最初的规范主要以重现HTML 效果为目标。但是，CSS 2（1998 年发布，2006 年更新为CSS 2.1）引入了一些新功能，尤其是以高精度在网页上对元素进行定位的能力。CSS 现在不只能够重现HTML 格式化，还可以产生专业的布局。

但是，由于在专有的扩展和简单朴素的代码之间难以取舍，HTML 页面本身仍然很混乱。大多数浏览器支持CSS 指令，但是实现的方式总是有细微的差异，这使情况变得更糟糕了。而且，仍然没有用来增加新特性的标准系统。HTML 仍然是一个不够稳定的编程平台。W3C认为我们需要的是一致的结构。他们的解决方案是XML，即可扩展标记语言（Extensible Markup Language）。

1.9 XML和XHTML

从外表来看，XML 与HTML 很相似，它们都是由标记、属性和值组成的。但XML 并非一种只用来创建网页的语言，它还是一种用来创建其他语言的语言。可以使用XML 设计自己定制的标记语言，然后使用这种语言对自己的文档进行格式化。定制的标记语言包含标记，这些标记实际描述它们包含的数据。XML 的强大之处在于：用标记标识了数据之后，数据就可以用于其他任务。程序可以设计为只提取它需要的信息，或者将此信息与来自其他来源的数据合并，最后将产生的组合信息以另一种形式输出，供另一种用途使用。与基于HTML 的网页不同，加上标记的信息可以根据需要经常复用。

但是，与一般情况一样，好处总是有代价的。XML 与HTML 相比没那么宽容。为了让XML 解析器（读取并解释XML 数据的软件）满意，XML 要求非常注意大小写、引号、结束标记和其他细节。另外，数以亿计的网页已经用HTML 编写好了，数以百万计的服务器和浏览器也知道该如何读取它们。解决方案很巧妙。W3C 用XML 重写了HTML。这种新语言具有HTML 的所有特性，因此所有浏览器都能够理解它。另外，因为它的词汇表完全来自于HTML，所以已经掌握HTML 的人只需学习几条基本语法规则，就能够开始使用这种新语言。同时，因为它使用XML的语法，所以它能够获得XML 的所有好处和灵活性，并且为应用CSS 提供了完美的基础。这种同时具有HTML 和XML 两者优点的语言称为XHTML。

1.10、CSS和浏览器支持

尽管XHTML 和CSS 是一种强大的组合，但是仍然有一个小麻烦困扰着Web 设计人员：浏览器支持。不管愿意与否，在增加扩展方面浏览器是比较积极的，但是在严格、完全地支持规范方面，还没有一种浏览器做得非常完善。但是，一定要意识到浏览器的进步已经很大了。

Netscape 6 已经完全摆脱了对扩展的狂热追求，现在提供了很好的CSS 支持。但糟糕的是，它的市场份额已经降到了不足1%。Firef ox 1.5 和Opera 9 非常出色地支持CSS。Firefox 是一种开放源码的浏览器，它在Netscape 倒下时脱颖而出（在它的早期甚至被称为重生的凤凰和火鸟）。而Opera 的市场份额正在迅速扩大，尤其在手持设备和手机市场上。当前最流行的浏览器IE 也已经改善了对CSS 的支持，尽管它仍然有许多明显的bug，而且有时候让人觉得它傲慢而且顽固。

总之，大多数用户使用的浏览器对CSS 的支持还不错，甚至非常好。几年前有相当数量使用老式浏览器的用户还在犹豫是否转移到CSS 上。但是，目前这个数量已经降低到了5%以下（也有人说是2%以下），而且还在继续减少。另外，这些用户中许多人使用的是IE5.5，这种浏览器对CSS 的支持虽然不出色，但是也不太糟。总之，现在已经是转到CSS 的最佳时机了。

1.11、XHTML和HTML：应该使用哪一种

坦白地说，我喜欢HTML。因为用HTML 不必注意标点符号。我可能是比较懒，但是我确信Web 之所以能够流行起来，在一定程度上就是因为浏览器能够容忍我们的懒散。这种宽容使得编写网页非常容易，谁都能干。现在，已经编写出了无数的网页，可能是时候改变我们的习惯了，但也可能不需要。有许多人宣称HTML 是邪恶的，而XHTML 是惟一的解决方案。我认为这种说法是愚蠢的。XHTML 是对HTML 的重大改进。它更健壮、更灵活、更强大，以后更可能得到完善的支持，而且可以扩展来满足任何需要。但是我要告诉你，有时候你并不需要满足所有需求。

有时候，你只希望发布一个简单的页面，那么就不必过于关注每一个最终的引号。幸运的是，还有许多中间选择。实际上，HTML 和XHTML 都有三种标准风格。第一种称为过渡型（transitional），它允许使用废弃的标记（tag）。第二种称为严格型（strict），它禁止使用任何废弃的标记。第三种是框架型（frameset），它允许使用废弃的标记和框架，但这种风格已经不常用了，因此我将描述它的内容从书中删除了，转移到了我的网站上（见0.9.2 节）。对于每种风格，可以以不同的程度结合使用CSS。你选择的组合可能取决于几个因素。

1.12、在HTML、XHTML和CSS之间进行选择

我不建议使用专有的扩展，因为它们会排斥我们的部分读者。但是我们有许多其他选项。

下面是一些原则：

● 站点越大，使用CSS 和XHTML 的重要性就越高。CSS 允许跨整个站点轻松地应用、编辑和更新格式化；XHTML 为页面提供所需的结构，确保它能够适应未来的需要。

● 许多公司和政府机构（包括美国政府）要求网页满足特定的可访问性需求，让残疾人也能够访问网站。在这种情况下，应该尽可能符合严格型XHTML，并且用CSS 进行格式化。一定要了解公司或政府机构对网站的具体要求。

● 大型商务站点希望接触尽可能广泛的访问者，因此可能会选择过渡型XHTML，从而可以利用一些得到广泛支持的废弃标记，同时又从XHTML 坚固的稳定性获益。随着这些站点的发展，它们很可能转而使用更强大的CSS。

● 小型站点或个人站点可能希望同时利用HTML 的简单语法和CSS 强大的格式化功能，而且在需要时使用废弃标记。

● 我个人的选择是使用XHTML 和CSS，尽可能少使用废弃标记。

1.13、XHTML危险吗？

有些人对于转移到XHTML 心存疑虑。问题的根源是，为了让XHTML 向后兼容老式浏览器，必须做一个小的让步：必须以浏览器已经理解的方式将它从服务器发送出去，即把它标为html。这里的想法是，随着浏览器的发展，浏览器最终应该能够理解标为xhtml 的XHTML 页面。不幸的是，这种情况还未发生。直到2006 年年中，IE 7（当结束beta 测试阶段之后，IE7 很可能取代IE 6 而成为市场份额最大的浏览器）仍然不能理解标为xhtml 的XHTML 页面。这意味着设计人员仍然不能利用XML 的优势。更糟糕的是，Ian Hickson（http://hixie.ch/advocacy/xhtml）认为，用XHTML 编写并标为html 的页面会给标准的推广带来更大的阻碍，而不是帮助。他建议我们应该坚持使用HTML，直到浏览器可以处理xhtml。但是，就像贪婪地吞吃自己的尾巴的蛇一样，见到先进的新技术时我们也忍不住去利用它。我个人主张转移到XHTML，尽可能利用标准化和XML 的优势，而不是一直坚持使用HTML，直到浏览器符合标准为止。如果我们现在都使用XHTML 编写网页，那么这会促使浏览器厂商尽快支持XHTML。这样的话，我们才能获得XHTML 的所有好处。

以上导论内容摘取于《HTML,XHTML,CSS 基础教程第六版》内

二、准备工作（必须的编辑器、调试软件）

大家可以先看看常用网站建设工具有哪些？，然后在继续让下看

2.1、浏览网络上的网页

当使用电话拨号或从局域网成功上网后，首先要面对的问题是如何浏览网页。在因特网上，每一个网站都有自己特定的地址。只有把网站的地址输入正确，才能打开相应的网页，才能浏览网页中的信息。

以“站帮网”为例，我们来看看怎么去浏览网易的站点；首先打开IE 浏览器，在地址栏输入http://www.zhanhelp.com 之后回车，即可进入“站帮网”的站点；

2.2、浏览本地的网页

打开硬盘——进入自己存放网页的路径，双击后缀为.htm 或.html 的文件即可；

可以打开记事本随便写几个文字，然后把后缀txt修改成htm打开查看就是一个简单的网页。

2.3、查看IE浏览器的源代码

点击浏览器窗口的菜单栏——查看——源代码；或者点击页面空白区——右击——源代码；