第1章 XHTML学前准备

第1章 XHTML学前准备

 

1.入学序章（课程设置，安排，内容）

2. XHTML导论（XHTML相关知识）

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

 

主讲教师：李炎恢
官方网站：http://www.php100.com

 

一．入学序章（课程设置，安排，内容）

1.1 课程介绍(入门套餐)

(1).网页三剑客 (80课时)

(2).VB (40课时)

(3).XHTML (80课时)

(4).ASP (80课时)

(5).MSSQL SERVER 2000 (40课时)

(6).PHP (150课时)

(7).JavaScript (60课时)

1.2 授课方式

(1).基础灌输

(2).项目串接

(3).引导自学

(4).视频重复

注：强烈建议使用笔记本（不是笔记本电脑）记录讲义重点和知识点;(发现太多的学员不会写字了)

1.3 入学要求

(1).有强烈的欲望

(2).勤奋与不择不扣的毅力

(3).初高中以上水平（中低端编程）

(4).初中以上英语，小学数学，初中物理

(5).5年以上的网虫

(6).会使用各种常用软件

(7).提前预习过本堂的网页三剑客视频

(8).个人修养较好

1.4 就业形势

(1).毕业就失业

(2).不包就业

(3).只能靠自己

(4).没沟通没工作

(5).技术实力不是最重要的？

(6).有关系天下无敌

(7).有梦想就有未来

(8).为了工作而学习

(9).为了梦想而学习

(10).N年后，老师都是错的

1.5 项目实战

(1).所有项目会在第一时间发布到http://www.php100.com

(2).完成了项目不代表你有了经验

(3).经验是在工作后问题的积累

(4).多做各种项目，有利于迅速上手

(5).遇到问题，查文档，不要急于发帖询问

(6).不要发弱智贴（比如：怎样才能学好编程之类）

(7).Google是最好的老师

二．XHTML导论（XHTML相关知识）

1.2.1 序言

万维网是我们这个时代最重要的信息传播手段。几乎任何人都可以创建自己的网站，然后把它发布在因特网上。一些网页属于企业，提供销售服务；另一些网页属于个人，用来分享信息。你可以自己决定网页的内容和风格。

所有网页都要用某种形式的HTML来编写。HTML可以对文本进行格式化，添加图形、声音和视频，并且可以将它保存为所有计算机都可以读取的文本文件。

学习和掌握HTML并不困难。编写HTML并不是一个令人头昏的复杂过程，只需仔细输入并保持一致性。可以在几分钟内建立一个简单的HTML页面并让它运行起来。另外，尽管有许多软件可以替你编写HTML代码，但自己编写HTML的好处是不必学习新的软件，也不会受到这些软件特性的限制。

1.2.2 因特网、Web和HTML

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

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

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

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

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

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

HTML也是这样。尽管实际上任何计算机都可以显示网页，但是这些页面的实际显示效果取决于计算机的类型、显示器、连接的速度以及用来查看页面的软件（浏览器）。当今最流行的浏览器是IE、Firefox，Opera和Safari，同时，用手持设备和PDA上网正在逐渐流行起来。不幸的是，这些浏览器显示网页的方式不完全相同。所以，仅仅设计一个漂亮的公园是不够的，还要考虑到参观者的居住条件和环境。

但是正如你所担忧的，你的控制能力是很有限的。尽管纽约市旅游委员会（New York City Tourist Board）愿意让每个游客都能够在纽约过的愉快，他们也无法让游客在公园大饭店（Park Plaza Hotel）免费住宿。况且，即使他们提供了这样的免费住宿，有些人也不一定会接受，这些人可能更希望只是提供一张床或一顿早餐，或许更愿意住到他们的姐姐家里。这就是问题所在。其中的寓意是：人们用来查看页面的系统设置会差异很大，因此，要以适当的方式创建页面，让尽可能多的访问者能够以尽可能接近预期的方式查看页面。

1.2.4 浏览器之争

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

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

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

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

1.2.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公司（流行的开放源码Firefox浏览器的开发商，这种浏览器近年来是IE的主要竞争对手）。W3C的意图是将这些公司聚集在一起，让它们在标准上达成一致，而依靠速度、使用的简便性、价格或其他特性来体现产品的差异，从而避免Web回到分崩离析的状态。

1.2.6 攻打象牙塔

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

HTML4.01和XHTML成为正式推荐标准已经差不多7年了，但是W3C对于未来的方向还没有形成一致的结果。CSS2成为正式推荐标准已经差不多8年了，但是还没有任何浏览器完全支持它，尽管每种主流浏览器都是由W3C成员开发的。CSS3仍然处于工作草案阶段，离完成可能还有好几年，更不用说实现了。

一些设计人员已经等得不耐烦了，他们决定自己动手创建可扩展的标准化解决方案（http://www.microformats.org）。更多信息请参见Jeffrey Zeldman的文章“An Angry Fix”（http://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%。

1.2.7 HTML 3.2：标准化的开始

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

1.2.8 HTML 4和CSS

W3C的下一项措施要大胆得多。老版本的HTML将内容、结构和格式化指令组合在一个文档中，这虽然比较简单，但是不够强大。W3C设计了一个新系统，在这个系统中，格式化指令可以与内容和结构分开保存，因此可以根据需要应用于单一段落或网页，甚至整个网站。所以在新的HTML 4中，W3C标出了大多数格式化元素，这些元素以后将从规范中删除。这些元素被称为“已经废弃了”，不鼓励设计人员使用它们。同时，他们为格式化指令创建了一个新系统来替代废弃的格式化元素，这个系统称为层叠样式表（CSS）。

CSS最初的规范主要以重现HTML效果为目标。但是，CSS2（1998年发布，2006年更新为CSS 2.1）引入了一些新功能，尤其是以高精度在网页上对元素进行定位的能力。CSS现在不只能够重现HTML格式化，还可以产生专业的布局。

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

1.2.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.2.10 CSS和浏览器支持

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

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

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

总之，现在已经是转到CSS的最佳时机了。

1.2.11 XHTML和HTML：应该使用哪一种

坦白地说，我喜欢HTML。因为用HTML不必注意标点符号。我可能是比较懒，但是我确信Web之所以能够流行起来，在一定程度上就是因为浏览器能够容忍我们的懒散。这种宽容使得编写网页非常容易，谁都能干。现在，已经编写出了无数的网页，可能是时候改变我们的习惯了，但也可能不需要。

有许多人宣称HTML是邪恶的，而XHTML是惟一的解决方案。我认为这种说法是愚蠢的。XHTML是对HTML的重大改进。它更健壮、更灵活、更强大，以后更可能得到完善的支持，而且可以扩展来满足任何需要。但是我要告诉你，有时候你并不需要满足所有需求。有时候，你只希望发布一个简单的页面，那么就不必过于关注每一个最终的引号。

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

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

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

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

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

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

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

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

1.2.13 XHTML危险吗？

有些人对于转移到XHTML心存疑虑。问题的根源是，为了让XHTML向后兼容老式浏览器，必须做一个小的让步：必须以浏览器已经理解的方式将它从服务器发送出去，即把它标为html。这里的想法是，随着浏览器的发展，浏览器最终应该能够理解标为xhtml的XHTML页面。

不幸的是，这种情况还未发生。直到2006年年中，IE 7（当结束beta测试阶段之后，IE 7很可能取代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基础教程第六版》内

 

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

3.1 浏览网络上的网页

当使用电话拨号或从局域网成功上网后，首先要面对的问题是如何浏览网页。

在因特网上，每一个网站都有自己特定的地址。只有把网站的地址输入正确，才能打开相应的网页，才能浏览网页中的信息。

以“网易”为例，我们来看看怎么去浏览网易的站点；

首先打开IE浏览器，在地址栏输入http://www.163.com之后回车，即可进入“网易”的站点；

3.2 浏览本地的网页

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

      

3.3 查看IE浏览器的源代码

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

                      

 

       然后回弹出记事簿文件：（显示出页面的HTML代码）

 

3.4 通过火狐（Firefox）浏览器查看源码代码；

       操作方法和IE浏览器一样：

         

 

       然后会弹出自带的代码显示器：

      

 

3.5学会使用代码编辑器UltraEdit-32。

      

 

       在百度或者Google搜索这个软件，按照“下一步”理论完成后，选择注册，努力查找相对应的注册号，就可以使用了。

       使用这个软件要注意的几个问题：

1.       要注册，对应版本寻找注册号；

2.       在菜单栏空白区选择增强版的选项；(记住是菜单栏空白区右击，切记)如图

 

 

3.       一定要去掉备份；(菜单栏――高级――配置――文件处理――备份)，点选不备份;

 

 

4.选择自己最适应的字体;（在快捷栏有A这个字体图标，选择你最喜爱的）

（在这里我上课使用的是Fixedsys）,我自己使用的是MS Reference Sans Serif,而且是粗体3号字，你可以自己选择喜爱的。

 

2.6 安装IETester，让IE5.5、6.0 、7.0、8.0并存

必备条件：本机必须安装了IE7.0，方可安装IETester

 

2.8 相关必备手册

CSS 2.0样式表中文手册.chm
       CSS完全参考手册3.0.chm
       样式表滤镜手册.chm

 

 

 

 

 

 

 

感谢收看本次教程！

还有什么疑问可以到www.php100.com

也可以以发送邮件到 [email protected]

本次演讲老师：李炎恢