万维网是我们这个时代最重要的信息传播手段。几乎任何人都可以创建自己的网站,然
后把它发布在因特网上。一些网页属于企业,提供销售服务;另一些网页属于个人,用来分
享信息。你可以自己决定网页的内容和风格。
所有网页都要用某种形式的 HTML 来编写。HTML 可以对文本进行格式化,添加图形、
声音和视频,并且可以将它保存为所有计算机都可以读取的文本文件。
学习和掌握 HTML 并不困难。编写 HTML 并不是一个令人头昏的复杂过程,只需仔细输
入并保持一致性。可以在几分钟内建立一个简单的 HTML 页面并让它运行起来。另外,尽管
有许多软件可以替你编写 HTML 代码,但自己编写 HTML 的好处是不必学习新的软件,也
不会受到这些软件特性的限制。
你肯定听说过因特网(Internet),但是因特网究竟是什么?简单的说,因特网是相互
连接的计算机的集合。许多人拥有不间断的高速带宽连接(通过 DSL、线缆或卫星),而另
外一些人只在每天的某段时间内通过调制解调器用家庭计算机上网。无论是什么类型的连
接,只要你联网了,你的计算机就成为因特网的一部分,并且与当前联网的其他所有计算机
连接。
万维网(www worldwide web)是虚拟的。它无数不断变化的、种类不同的文档的集
合,这些文档驻留在因特网的某个地方,都是用某种形式的 HTML 编写的。
HTML(超文本标记语言)有两个基本特性——超文本和普适性。超文本意味着可以在
网页中创建一个链接,从而将访问者链接到其他任何网页,实际上可以链接到因特网上的任
何东西。这意味着可以通过许多不通的路径访问 Web 上的信息。Web 的创建者 Tim Berner
s-Lee 希望 Web 能像人的大脑那样在信息之间建立广泛的联系,而不是像书籍那样只是静
态数据源。
普适性的意思是:因为 HTML 文档保存为纯文本文件,所以实际上任何计算机都可以读
取网页。无论访问者是使用 Macintosh、Windows 还是 UNIX 计算机,甚至是 Palm 这样的
手持设备,都可以打开网页。Web 对所有计算机都是开放的。
能够打开网页并不意味着有相同的效果 能够打开网页并不意味着有相同的效果 能够打开网页并不意味着有相同的效果 能够打开网页并不意味着有相同的效果
尽管 HTML 对于所有计算机都是可用的,但是这并不意味着每个人都能以相同的方式体
验它。这就像是纽约的*公园。我们都可能在那里散过去。但是如果你住在第 5 大街的顶
层豪华公寓里,而我睡在长椅上,那么我嫩对这个公园的看法就会很不一样。
HTML 也是这样。尽管实际上任何计算机都可以显示网页,但是这些页面的实际显示效
果取决于计算机的类型、显示器、连接的速度以及用来查看页面的软件(浏览器)。当今最
流行的浏览器是 IE、Firef ox,Opera 和 Safari,同时,用手持设备和 PDA 上网正在逐渐流
行起来。不幸的是,这些浏览器显示网页的方式不完全相同。所以,仅仅设计一个漂亮的公
园是不够的,还要考虑到参观者的居住条件和环境。
但是正如你所担忧的,你的控制能力是很有限的。尽管纽约市旅游委员会(New York
City Tourist Board)愿意让每个游客都能够在纽约过的愉快,他们也无法让游客在公园大
饭店(Park Plaza Hotel)免费住宿。况且,即使他们提供了这样的免费住宿,有些人也不
一定会接受,这些人可能更希望只是提供一张床或一顿早餐,或许更愿意住到他们的姐姐家
里。这就是问题所在。其中的寓意是:人们用来查看页面的系统设置会差异很大,因此,要
以适当的方式创建页面,让尽可能多的访问者能够以尽可能接近预期的方式查看页面。
浏览器之争
现在请想像一下,如果第五大街上的每个饭店和公寓都在*公园里圈出一块地,并且
用栅栏围起来,只允许自己的住客进去,那么会怎么样?我们这些住在公园长椅上的人只能
隔着栅栏瞥一眼这些“专有”区域,而且一家饭店的住客也不能进入属于另一家饭店的区域。
公园不再是个充斥着滑旱冰者、热狗车和散步年长者的热闹的公共场所,而是分割成了许多
孤立封闭的小块空间。
1994 年,网景通信公司(Netscape Communications)在 Web 上建起了第一道栅栏,
所谓的“浏览器战争”开始了。为了吸引用户,他们抛弃了普适性,创建了一套只有 Netscap
e 能够处理的 HTML 扩展。例如,使用 Netscape 的 Web 冲浪者可以查看具有彩色文本、照
片和其他改进的页面,而使用其他任何浏览器的冲浪者都会得到错误和古怪的结果,或者根
本没有任何结果。
但是,很多人喜欢这些扩展,所以他们蜂拥进了“Netscape 饭店”。到了 1996 年,它成
了世界上最流行的计算机程序。微软也开始在 Web 上圈出自己的区域。同样,为了吸引用
户,他们增加了只有微软的 IE 浏览器能够识别的非标准扩展。
根据 Web Standard Project(www.webstandards.org,这是一个由第一流的设计人员组
成的团体,它致力于使破碎的 Web 重新联合起来)的统计,在浏览器战争的高潮时期,We
b 设计者要浪费高达 25%的时间来应付专有的标记,编写页面的多个版本来满足每种浏览
器,并且只能向客户说明创建适用于所有浏览器的某些效果是不可能的。这真是一团糟。
标准的推出
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 设计工具的开发商)、美国在线(Amer
ica Online )公司(它在 1998 年收购了网景通信公司)、Opera(用于桌面计算机和手持设
备的 Opera 浏览器的开发商)和微软公司(它的 IE 浏览器从 Netscape 手中夺取了第一位
的市场份额,而且一直保持至今);还包括更现代的公司,比如 Google 公司(最流行的搜
索引擎)和 Mozilla 公司(流行的开放源码 Firef ox 浏览器的开发商,这种浏览器近年来是 I
E 的主要竞争对手)。W3C 的意图是将这些公司聚集在一起,让它们在标准上达成一致,
而依靠速度、使用的简便性、价格或其他特性来体现产品的差异,从而避免 Web 回到分崩
离析的状态。
攻打象牙塔
最近(2006 年年中),对于 W3C 的缓慢步调、过分强调抽象性以及缺乏具体结果产生
了许多抱怨。许多Web 设计人员,包括领导标准化过程的设计人员,感觉被 W3C 及其成员
公司忽视了。
HTML 4.01 和 XHTML 成为正式推荐标准已经差不多 7 年了,但是 W3C 对于未来的方向
还没有形成一致的结果。CSS2 成为正式推荐标准已经差不多 8 年了,但是还没有任何浏览
器完全支持它,尽管每种主流浏览器都是由 W3C 成员开发的。CSS3 仍然处于工作草案阶
段,离完成可能还有好几年,更不用说实现了。
一些设计人员已经等得不耐烦了,他们决定自己动手创建可扩展的标准化解决方案(ht
tp://www.microf ormats.org)。更多信息请参见 Jeffrey Zeldman 的文章“An Angry Fix ”(h
ttp://www.zeldman.com/2006/07/17/an-angry-fix/)和John Oxton的“No I am not bloody
sorry”(http://joshuaink.com/blog/753/no-i-am-not-bloody-sorry)。
在这个时期,你应该怎么做呢?我的建议一直是“适度”。要符合标准,但是不要成为标
准的奴隶。即使是象牙牌香皂的标准化程度也只达到了 99.4%。
标准化的开始
W3C 对 Web 混乱状态采取的第一项措施是对专有的扩展进行标准化,将一些扩展吸收
到正式规范中,而将其他扩展完全取消了。同时,他们鼓励浏览器厂商尽可能支持正式的 H
TML 标准,从而使根据标准编写的网页在不同的浏览器中有一致的表现。
HTML 和 CSS
W3C 的下一项措施要大胆得多。老版本的 HTML 将内容、结构和格式化指令组合在一个
文档中,这虽然比较简单,但是不够强大。W3C 设计了一个新系统,在这个系统中,格式
化指令可以与内容和结构分开保存,因此可以根据需要应用于单一段落或网页,甚至整个网
站。所以在新的 HTML 4 中,W3C 标出了大多数格式化元素,这些元素以后将从规范中删
除。这些元素被称为“已经废弃了”,不鼓励设计人员使用它们。同时,他们为格式化指令创
建了一个新系统来替代废弃的格式化元素,这个系统称为层叠样式表(CSS)。
CSS 最初的规范主要以重现 HTML 效果为目标。但是,CSS 2(1998 年发布,2006 年
更新为 CSS 2.1)引入了一些新功能,尤其是以高精度在网页上对元素进行定位的能力。CS
S 现在不只能够重现 HTML 格式化,还可以产生专业的布局。
但是,由于在专有的扩展和简单朴素的代码之间难以取舍,HTML 页面本身仍然很混乱。
大多数浏览器支持 CSS 指令,但是实现的方式总是有细微的差异,这使情况变得更糟糕了。
而且,仍然没有用来增加新特性的标准系统。HTML 仍然是一个不够稳定的编程平台。W3C
认为我们需要的是一致的结构。他们的解决方案是 XML,即可扩展标记语言(Extensible M
arkup Language)。
XML XML XML XML 和XHTML
从外表来看,XML 与 HTML 很相似,它们都是由标记、属性和值组成的。但 XML 并非
一种只用来创建网页的语言,它还是一种用来创建其他语言的语言。可以使用 XML 设计自
己定制的标记语言,然后使用这种语言对自己的文档进行格式化。定制的标记语言包含标记 ,
这些标记实际描述它们包含的数据。
XML 的强大之处在于:用标记标识了数据之后,数据就可以用于其他任务。程序可以设
计为只提取它需要的信息,或者将此信息与来自其他来源的数据合并,最后将产生的组合信
息以另一种形式输出,供另一种用途使用。与基于 HTML 的网页不同,加上标记的信息可以
根据需要经常复用。
但是,与一般情况一样,好处总是有代价的。XML 与 HTML 相比没那么宽容。为了让 X
ML 解析器(读取并解释 XML 数据的软件)满意,XML 要求非常注意大小写、引号、结束标
记和其他细节。另外,数以亿计的网页已经用 HTML 编写好了,数以百万计的服务器和浏览
器也知道该如何读取它们。
解决方案很巧妙。W3C 用 XML 重写了 HTML。这种新语言具有 HTML 的所有特性,因
此所有浏览器都能够理解它。另外,因为它的词汇表完全来自于 HTML,所以已经掌握 HTM
L 的人只需学习几条基本语法规则,就能够开始使用这种新语言。同时,因为它使用 XML
的语法,所以它能够获得 XML 的所有好处和灵活性,并且为应用 CSS 提供了完美的基础。
这种同时具有 HTML 和 XML 两者优点的语言称为 XHTML。
CSS 和浏览器支持
尽管 XHTML 和 CSS 是一种强大的组合,但是仍然有一个小麻烦困扰着 Web 设计人员:
浏览器支持。不管愿意与否,在增加扩展方面浏览器是比较积极的,但是在严格、完全地支
持规范方面,还没有一种浏览器做得非常完善。但是,一定要意识到浏览器的进步已经很大
了。
Netscape 6 已经完全摆脱了对扩展的*追求,现在提供了很好的 CSS 支持。但糟糕
的是,它的市场份额已经降到了不足 1%。Firef ox 1.5 和 Opera 9 非常出色地支持 CSS。Fir
efox 是一种开放源码的浏览器,它在 Netscape 倒下时脱颖而出(在它的早期甚至被称为重
生的凤凰和火鸟)。而 Opera 的市场份额正在迅速扩大,尤其在手持设备和手机市场上。
当前最流行的浏览器 IE 也已经改善了对 CSS 的支持,尽管它仍然有许多明显的 bug,而且
有时候让人觉得它傲慢而且顽固。
总之,大多数用户使用的浏览器对 CSS 的支持还不错,甚至非常好。几年前有相当数量
使用老式浏览器的用户还在犹豫是否转移到 CSS 上。但是,目前这个数量已经降低到了 5%
以下(也有人说是 2%以下),而且还在继续减少。另外,这些用户中许多人使用的是 IE
5.5,这种浏览器对 CSS 的支持虽然不出色,但是也不太糟。
总之,现在已经是转到 CSS 的最佳时机了。
XHTML 和HTML:应该使用哪一种
坦白地说,我喜欢 HTML。因为用 HTML 不必注意标点符号。我可能是比较懒,但是我
确信 Web 之所以能够流行起来,在一定程度上就是因为浏览器能够容忍我们的懒散。这种
宽容使得编写网页非常容易,谁都能干。现在,已经编写出了无数的网页,可能是时候改变
我们的习惯了,但也可能不需要。
有许多人宣称 HTML 是邪恶的,而 XHTML 是惟一的解决方案。我认为这种说法是愚蠢
的。XHTML 是对 HTML 的重大改进。它更健壮、更灵活、更强大,以后更可能得到完善的
支持,而且可以扩展来满足任何需要。但是我要告诉你,有时候你并不需要满足所有需求。
有时候,你只希望发布一个简单的页面,那么就不必过于关注每一个最终的引号。
幸运的是,还有许多中间选择。实际上,HTML 和 XHTML 都有三种标准风格。第一种
称为过渡型(transitional),它允许使用废弃的标记(tag)。第二种称为严格型(strict),
它禁止使用任何废弃的标记。第三种是框架型(frameset),它允许使用废弃的标记和框架 ,
但这种风格已经不常用了,因此我将描述它的内容从书中删除了,转移到了我的网站上(见
0.9.2 节)。对于每种风格,可以以不同的程度结合使用 CSS。你选择的组合可能取决于几
个因素。
在XHTML 和和和和 CSS 之间进行选择
我不建议使用专有的扩展,因为它们会排斥我们的部分读者。但是我们有许多其他选项 。
下面是一些原则:
● 站点越大,使用 CSS 和 XHTML 的重要性就越高。CSS 允许跨整个站点轻松地应用、
编辑和更新格式化;XHTML 为页面提供所需的结构,确保它能够适应未来的需要。
● 许多公司和*机构(包括美国*)要求网页满足特定的可访问性需求,让残疾人
也能够访问网站。在这种情况下,应该尽可能符合严格型 XHTML,并且用 CSS 进行格式化 。
一定要了解公司或*机构对网站的具体要求。
● 大型商务站点希望接触尽可能广泛的访问者,因此可能会选择过渡型 XHTML,从而
可以利用一些得到广泛支持的废弃标记,同时又从 XHTML 坚固的稳定性获益。随着这些站
点的发展,它们很可能转而使用更强大的 CSS。
● 小型站点或个人站点可能希望同时利用 HTML 的简单语法和 CSS 强大的格式化功能,
而且在需要时使用废弃标记。
● 我个人的选择是使用 XHTML 和 CSS,尽可能少使用废弃标记。
XHTML XHTML XHTML XHTML 危险吗? 危险吗? 危险吗? 危险吗?
有些人对于转移到 XHTML 心存疑虑。问题的根源是,为了让 XHTML 向后兼容老式浏览
器,必须做一个小的让步:必须以浏览器已经理解的方式将它从服务器发送出去,即把它标
为 html。这里的想法是,随着浏览器的发展,浏览器最终应该能够理解标为 xhtml 的 XHTM
L 页面。
不幸的是,这种情况还未发生。直到 2006 年年中,IE 7(当结束 beta 测试阶段之后,IE
7 很可能取代IE 6 而成为市场份额最大的浏览器)仍然不能理解标为 xhtml的 XHTML 页面 。
这意味着设计人员仍然不能利用 XML 的优势。更糟糕的是,Ian Hickson(http://hixie.ch/
advocacy/xhtml)认为,用 XHTML 编写并标为 html 的页面会给标准的推广带来更大的阻
碍,而不是帮助。他建议我们应该坚持使用 HTML,直到浏览器可以处理 xhtml。
但是,就像贪婪地吞吃自己的尾巴的蛇一样,见到先进的新技术时我们也忍不住去利用
它。我个人主张转移到 XHTML,尽可能利用标准化和 XML 的优势,而不是一直坚持使用 H
TML,直到浏览器符合标准为止。如果我们现在都使用 XHTML 编写网页,那么这会促使浏
览器厂商尽快支持 XHTML。这样的话,我们才能获得 XHTML 的所有好处。
以上导论内容摘取于《HTML,XHTML,CSS 基础教程第六版》内
准备工作(必须的编辑器、调试软件)
浏览网络上的网页
当使用电话拨号或从局域网成功上网后,首先要面对的问题是如何浏览网页。
在因特网上,每一个网站都有自己特定的地址。只有把网站的地址输入正确,才能打开
相应的网页,才能浏览网页中的信息。
以“网易”为例,我们来看看怎么去浏览网易的站点;
首先打开 IE 浏览器,在地址栏输入 http://www.163.com 之后回车,即可进入“网易”
的站点;
浏览本地的网页
打开硬盘——进入自己存放网页的路径,双击后缀为.htm 或.html 的文件即可;
查看 IE浏览器的源代码
点击浏览器窗口的菜单栏——查看——源代码;或者点击页面空白区——右击——源代
码;
然后回弹出记事簿文件:(显示出页面的 HTML 代码)
通过火狐(Firefox Firefox Firefox Firefox)浏览器查看源码代码;
操作方法和 IE 浏览器一样:
然后会弹出自带的代码显示器:
学会使用代码编辑器 UltraEdit-32 。
在百度或者 Google 搜索这个软件,按照“下一步”理论完成后,选择注册,努力查找
相对应的注册号,就可以使用了。
使用这个软件要注意的几个问题:
1. 要注册,对应版本寻找注册号;
2. 在菜单栏空白区选择增强版的选项;(记住是菜单栏空白区右击,切记)如图
3. 一定要去掉备份;(菜单栏——高级——配置——文件处理——备份),点选不备份;
4.选择自己最适应的字体;(在快捷栏有 A 这个字体图标,选择你最喜爱的)
(在这里我上课使用的是 Fixedsys),我自己使用的是 MS Reference Sans Serif,而且是粗
体 3 号字,你可以自己选择喜爱的。
安装 IETester IETester IETester IETester,让IE5.5 、6.0 、7.0 、8.0 并存
必备条件:本机必须安装了 IE7.0,方可安装 IETester
相关必备手册
CSS 2.0 样式表中文手册.chm
CSS 完全参考手册 3.0.chm
样式表滤镜手册.chm