艾露恩之泪一直在包里:HTML

 第一章 建立首要的、基础的正确认知　　　　用户要学习ＨＴＭＬ，必须首先了解万维网、网页和ＨＴＭＬ的关系。万维网是由无数的网页组成的，这些网页由ＨＴＭＬ语言编写，这是万维网、网页和ＨＴＭＬ三者之间的基本关系。所有的网页——无论是动态网页还是静态网页，都是最终形成ＨＴＭＬ 语言并为浏览器所解释的，所以，用户要学习网络设计和开发，首先必须熟悉ＨＴＭＬ语言。　　ＨＴＭＬ语言，全称HyperTextMarkupLanguage（超文本标签语言），其实是一个规范（或者称为标准），它由W3C制定，而为参与万维网的创作者和软件厂商所遵守。　　创作者一般是指网页（包括图形等多媒体文件）的创建者，如正在学习本书的你，将会使用HTML语言创作网页；而软件厂商一般是指开发网页浏览工具的厂商，如开发Internet Explorer浏览器软件的微软公司，它们将会开发浏览器等终端设备解释网页。　　1.1 Internet和万维网　　Internet和万维网密不可分，虽然万维网仅是整个Internet的一部分，但目前它确实是Internet的主体。Internet就是我们经常提到的互联网，或者称为因特网。下面我们就首先来了解一下Internet和万维网。1.1.1 什么是WWW（万维网）　　万维网（Word Wide Web,简称WWW）是基于Internet的信息服务系统，它的官方定义是“WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents"(万维网是一个广域范围内的超媒体信息获取发端，目的是在全球任何地方都可以访问全球范围内的文档。　　ＷＷＷ以所谓的超文本技术为基础，用面向文件的阅览方式替代通常的菜单列表方式，并且能提供具有一定格式的文本和图形。ＷＷＷ将全球信息资源通过关键字方式建立链接，使信息不仅可按线性方式搜索，而且可按交叉方式访问（这些也就是我们经常谈到的超链接）。　　从20世纪40年代以来人们就一直梦想能拥有一个世界性的信息库。在这个信息库中，数据不仅能被全球的人们存取，而且应该能轻松地链接其他地方的信息，以便用户可以方便、快捷地获得重要的信息。　　现在，通过ＷＷＷ，人们的这个梦想已经变成了现实。简而言之，ＷＷＷ是一个以Internet为基础的计算机网络，它允许用户在一台计算机通过Internet存取另一台计算机上的信息。从技术角度上说，万维网是Internet上那些支持ＷＷＷ协议和超文本传输协议ＨＴＴＰ（Hyper Text Transport Protoco)的客户机与服务器的集合，透过它可以存取世界各地的超文本文件，内容包括文字、图形、声音、动画、资料库，以及各式各样的软件。　　事实上，一般我们日常所说的“上网冲浪”，其实指的就是将计算机连上Ｗord Wide Web。万维网的社会价值在于使人们能够通信、带来商机与分享知识。但这必须让所有人受益，还会因他们的硬件、软件、网络基础设施、母语、文化、地理位置、生理或心智能力的不同而有任何分别。　　由于软件和硬件的供应商不可胜数，所提供的软件和硬件可能会千差万别，这就需要一个协调组织来完成这一工作，于是W3C就诞生了。如果没有一个协调组织来协调万维网的参与者，那么，万维网将变得四分五裂，就根本不会有今天这样的成就了。Internet和Internet都是指由计算机连接起来的物理网络，它们依靠标准和固定的规则相互通讯。Internet的中文名称是因特网，在了解什么是Internet之前，我们先来看一看什么是计算机网络。所谓计算机网络，简单地说，就是用电缆线把若干计算机联起来，再配以适当的软件和硬件，以达到在计算机之间交换信息的目的。世界上有很多组织，像公司、大学、研究院等机构，虽然可能各部门物理位置相隔千里，但它们把机构内部的计算机联成网络，在计算机之间进行通讯，这就是Internet（局域网）。　　许许多多这样的局域网又通过各种方法互相连接起来，实现国际之间的信息传递，形成一个世界范围内的大网，这就是Internet。　　与局域网相对应，Internet又称为广域网。　　1.1.2 W3C是什么　　Ｗ３Ｃ是World Wide Web Consortium的简称，也就是“万维网联盟”。它是一个国际化的联盟机构，这是一个非正式的论坛机构，一个讨论万维网的公开论坛，主要用于各会员之间互通信息、加强商贸、实现沟通和相互谅解。W3C的会员、全职工作人员和公众主要就是携手合作开发万维网标准，也就是开发互通技术——包括规范（标准）、指导方针、软件和工具。　　按照Ｗ３Ｃ自己的说法，它的使命是：　　开发协议和方针，尽展万维网潜能，确保其长期发展。　　W3C主要通过万维网标准和方针的制定来履行其使命。在它的第一个10年中，W3C出版了80多份W3C推荐标准，其中包括众所周知的HTML、XML、HTML、CSS等。　　由于万维网的终端千变万化，为了尽展万维网潜能，当中的基础技术必须能互相兼容，必须让任何用于浏览的硬件和软件协同工作。W3C致力于避免市场的分裂，从而避免万维网的分裂。　　为保证万维网在未来持续兴旺发展，并能适应多元化的人员、硬件和软件，W3C会员、职员及其他被邀请的专家携手合作，共同开发这些技术。　　遍布全球不同领域的组织和软件厂商都加入了W3C，参与这个制定万维网标准的中立论坛之中。W3C对万维网做出了杰出的贡献，也因此而赢得了国际认可。　　W3C的运作由美国麻省理工学院计算机科学与人工智慧实验室（MIT CSAIL）、总部设于法国的欧洲信息与数学研究论坛（ERCIM）和日本的庆应大学来共同管理。W3C在全世界15个地区设立了办事处。W3C办事处使用本地语言协同本地的万维网团体一起推广W3C技术和扩展W3C基地，并且鼓励W3C活动的国际化参与。　　1.2网页、浏览器、网站和网络服务器　　网页就是一个纯文本的文件，但是有一定的格式，也就是HTML语言定义的格式，由于HTML被译为超文本标签语言，因此网页文件也被称为“超文本文件”。浏览器用来读取文件内容，并将处理格式信息，将内容以一定的方式呈现在屏幕上。　　1.2.1　网页和浏览器　　万维网把所有的Internet上的信息（包括你愿意加进去的本地信息）组织成“超文本文件”形式，接下来，只需用浏览器“读取”适当的“超文本文件”就行。　　浏览器是一个程序，电脑读取在互联网上找到的超文本文档（和其他类型的文件）并解释和显示网页。网页除了可以饱含文本，还可以饱含图形、音频和视频。结果是，网络激发了人们对从前是基于文本的互联网的兴趣。　　1993年4月22日，美国伊利诺斯大学的一个学生小组开发了一段旨在从互联网上获取信息的程序。　　当时很少有人会预见这个叫Mosaic的程序将从根本上改变我们的日常生活。具有图形界面的网页浏览器之前其实早已经诞生，但Mosaic是第一个被人普遍接受的浏览器，它把许多人推向了互联网。　　其后的浏览器大都是基于Mosaic，包括您正在使用的微软Internet Explorer浏览器。单击这一程序【帮助】菜单下的【关于Internet Explorer】项，就会弹出对话框，您可以清楚地看到Mosaic的存在，如图1-1所示。 　　　　1.2.2　不可不知的浏览器发展史　　后来，Mosaic的一名开发工程师在风险投资商的资助下成立了网景公司，该公司很快就推出了名为Navigator的浏览器，并迅速普及起来。　　20世纪90年代中期，网景的Navigator浏览器曾经一度主导网络浏览器市场。后来，微软开始进入浏览器市场，推出了IE（Internet Explorer）浏览器，并在Windows操作系统中捆绑，而且是免费的，网景的浏览器市场开始大量流失。　　微软的免费王牌不但奏效，而且使得网景公司的发展每况愈下，于1998年年底被美国在线（AOL）并购。目前，网景浏览器的全球市场占有率已经极低，而它的竞争对手微软的IE浏览器市场占有率则一度高达95%以上，在全球浏览器市场稳居霸主之位。　　图1－2显示了ＩＥ浏览器和网景浏览器在浏览新浪网时的情况。 　　IE浏览器一般会随着操作系统统一同被安装在计算机上，而网景浏览器则需要单独下载并安装。　　现在，网景浏览器是免费的，可以从网址http://browser.netscape.com/处下载（当前版本是8.1.2），如图片-3所示。    　　下载后的文件是一个可执行的安装程序，只需双击就可以运行安装程序，按照安装向导的指示就可以将网景浏览器安装到计算机上。　　近两年来新崛起的浏览器是FireFox（中文简称“火狐”），并且市场分额不断扩大，你可以从下面的网址获得（目前最新的版本是2.X）          http://www.mozilla.com　　我们推荐一定要下载一个“火狐”浏览器，因为这个浏览器是目前唯一一款完全支持W3CHTML4.01和CSS2.1推荐标准的浏览器，其他浏览器与标准多少都会有一些差异，后面的很多介绍都要用到该浏览器，它是免费的，你可以自由下载，如图1-4所示。　　下载后的文件也是一个可执行的安装程序，运行该安装程序，按照安装向导的指示就可以将浏览器安装到计算机上。　　另外一款用户经常要使用的浏览器名叫Ｏpera,它虽然很少在桌面计算机中出现，但是目前大多数移动设备都配置了该浏览器，如Nokia配置Symbian系统的移动电话中都是内置Ｏpera浏览器，因此我们也建议用户能够下载一个用于测试。　　Opera也是免费的，可以从下面的网址获得：　　http://www.opera.com/download/　　目前最新的版本是9.Ｘ，如图１－５所示。　　下载后的文件也是一个可执行的安装程序，运行该安装程序，按照安装向导的指示就可以将Opera浏览器安装到计算机上。　　浏览Web可采用两种常用的技术。第一种就是直接使用URL(Uniform Resource Locator的缩写，即统一资源符），用户只要在Web浏览器的地址横输入站点的URL，即可浏览该站点。一个URL就是某个资源的计算机地址，这里的资源可以是Web文档、文件、甚至是程序。这里是新浪网的URL：http://www.sina.com.cn/。　　第二种技术是在当前的页面中选择相应的超链接或者热区，从而实现从当前站点到新站点的转换。在浏览器中的地址栏中仍然将会出现新站点的ＵＲＬ，该URL才是站点访问的实质。　　1.了解ＵＲＬ地址　　每一个网页在互联网上都有一个唯一的ＵＲＬ地址，URL是Internet上用来指定一个位置或某一个网页的标准方式，只有知道了网页的URL地址才能访问该网页。URL地址的语法格式如下：　　协议名称：／／主机名称【：端口地址／存放目录／文件名称】　　例如，下面的ＵＲＬ地址：　　（１）协议名称。这里表示http协议，浏览器默认的是http协议。如果你在浏览器地址栏中没有指定协议，那么它将会自动加上http协议名。例如，在地址栏中键入下面的两个URL的结果是相同的：　　www.sina.com.cn/intro/lawfirm.html        http://www.sina.com.cn/intro/lawfirm.html　　（２）主机名称。准确地说，主机名称是由主机名和域名共同组成的。在这里，www就是主机名，sina.com.cn就是域名。在sina.com.cn这个域名下还有corp,news等主机名，于是你也可以使用类如corp.sina.com.cn,news.sina.com.cn。但一般情况下，www是最觉的主机名。　　（３）端口号。http默认的端口号是80，所以你也可以省略该端口号，直接访问下面的网址：　　　　http://ww.sina.com.cn/intro/lawfirm.html　　（４）存放目录。也就是文件夹，可以饱含多个文件夹层级，例如intro/law/lawfirm.html。　　（５）文件名称。这个文件名称无论何时都应该有，你在访问一些网站时，可能会直接输入类如下面的URL地址。　　　　　http://www.sina.com.cn　　这也可以访问网页，但实际情况是网络服务器定义了一个默认的网页，当你键入这个URL地址时，它会自动导航到这个网页，最觉的默认网页是index.html,index.htm,default.html,default.htm。　　当你访问sia主页时，实际访问的地址是：　　　http://www.sina.com.cn/index.html　　2.了解网络协议　　除了http协议外，还有几种比较流行的网络协议：　　１）telent　　代表使用远端登录的服务，如下面的URL:            telnet://bbs.nasa.edu.ca　　２）ftp　　文件传输协议，通过互联网传输文件，如下面的URL:         ftp:.//ftp.microsoft.com/　　３）file://c:/Inetpul/wwwroot/Form.html　　1.2.4　网站和网络服务器　　万维网可以看成是世界上最大的数据和信息的仓库。它是存储在全世界所有Internet计算机中数以百万计彼此关联的超文本文件集合。用户通过浏览器可以访问网站（也被称为Web站点），从而浏览文本和图形，接收音频和视频信息（即所谓的超媒体）。因此，Web实际上是一种全球性的通信系统，该系统通过Internet使计算机以电子方式相互传送基于超文本的电子信息。　　Web站点是一些文件的集合，包括HTML文件和其他的一些文件。要浏览Web站点，必须要使计算机直接连到Internet上，同时还需要浏览器，如Microsoft Internet Explorer和 Netscape Navigator。这样，用户就能用它们访问Web站点。　　这些Internet计算机被称为服务器，一个Web站点其实就对应着一个网络服务器（Web服务器），下面我们简单地介绍一下网络服务器。　　１）网络服务器实际上是一台连接在Internet上的计算机软件，它负责处理Internet浏览器提交的文本请求。如果你的Web站点是通过ISP(ISP是Internet服务提供商的英文缩写）与Internet相连接的话，ISP将为你提供一个Web服务器。　　２）Web浏览器是阅读和浏览Web站点上文件的工具，它是通过客户端／服务器方式与网络服务器交互信息的。一般情况下，浏览器就是客户端，它要求服务器把指定信息传送过来，然后通过浏览器把信息显示在屏幕上。就像从电视上看到画面一样，浏览器实际上是一种允许用户浏览Web信息的软件，只不过这些信息是由网络服务器发送出来的。　　让我们用一个简单的图形来演示一下它们的关系，如图１－６所示。 　　浏览器首先向Web服务器发出请求，Web服务器对请求做出响应，将响应数据发送给客户端浏览器，然后通过浏览器把信息显示在屏幕上。这是最基本的网络应用原理。　　了解服务器　　服务器，英文单词是Server，它既是计算机硬件的称谓，有时又是计算机服务器端软件的称谓，用户应该区分开它们，主要就是从语境上去区分。　　１）服务器是一种计算机硬件　　当你向一个硬件销售商咨询要购买服务器时，这个时候一般是指计算机硬件了。服务器也是计算机，它的构成与普通个人计算机基本相同，也有CPU、硬盘、内存、主板等，但服务器在某些方面（如并行运算）做了优化。　　服务器应该算是一种高性能的计算机，它作为网络的节点，存储、处理网络上的数据、信息，因此也被称谓网络的灵魂。　　２）服务器是一种计算机软件　　如果别人跟你提起IIS服务器、Java服务器、.NET服务器等这样的名词时，一般都是指一种计算机软件。当用户使用计算机上网时，其实是访问服务器硬件。但是，这个服务器硬件上安装了服务器软件，如IIS服务器、Java服务器、.NET服务器，它们负责接收用户的访问请求，并根据请求经过计算将数据返回给用户的客户端（浏览器）。　　最常提起的是服务器软件分为两类：一类是网络服务器，另一类是应用程序服务器。IIS服务器是最常用的一个网络服务器软件，Java服务器、.NET服务器是最常用的应用程序服务器软件。 　　所以，你可能看到如图１－７所示的拓扑图。          　　这其实如图１－６所示的那样，是请求服务器硬件中安装的Web服务器软件，然后该软件做出响应。 　　1.3了解HTML语言　　网页就是一个HTML语法格式的纯文本文档，HTML是网络所基于的标准的格式化语言。HTML文档看起来与网页在浏览器上显示的很不相同，在浏览器中看到的是对HTML文档的解释。 　　在浏览器中，文本被以一定的格式显示出来，图片及其他多媒体文件则通过ＨＴＭＬ文档中所标识的路径被调用。浏览器从HTML代码中读取图像的位置，并被浏览器解释后显示出来，其他的多媒体格式也是如此。　　但是，图像和其他的多媒体格式文件不是HTML文档的一部分——它们是独立的文档，正如我们前面所介绍的那样，万维网是面向文件的。　　1.3.1　关于HTML和HTML编辑器　　HTML（HyperText Mark-up Language,超文本标签语言）是一种描述语言。它最初由欧洲原子核研究委员会的伯纳斯。李（Berners-Lee)发明，后来被Mosaic作为网页解释语言，并随着Mosaic的流行而逐渐成了网页语言的事实标准。　　设计HTML语言的目的是，为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体。　　HTML的另外一个目的是为了能让所有的用户都能得到一致的信息，不会因他们的硬件、软件、网络基础设施、母语、文化、地理位置、生理或心智能力的不同而有任何分别。所有的软件供应商都按照这一语言规范编写解释器，从而使数据呈现一致。　　正是由此，如果微软和网景都不让步的话，那么最终将会产生两个不同的文档格式，想象一下，如果这种情况发生，那么人们将不得不在两种浏览器之间进行选择。并且每一个网站（互联网内容提供者）又必须有自己固定的网上内容。互联网内容提供者要么在这两种版本中选择其一，要么花费更多的人力物力来创建网页的两种复合版本。　　好在这种情况并没有发生。现在HTML由W3C制定并为各个软件供应商所遵守，虽然微软和网景的浏览器仍然有一些细微的区别，但我们离共同的目标越来越近了。目前最新的版本是HTML4.01。 　　HTML产生的意义：　　HTML只是为了避免万维网陷于分裂而制定的，万维网的所有相关厂商都遵守并实现对HTML的解释和呈现，那么终端用户就能获得一致的体验。　　HTML文本是由HTML标签组成的描述性文本，HTML标签可以说明文字、图形、动画、声音、表格、链接等。基本上用户只要明白了各种标签的用法便学会了HTML，并且HTML的标签格式非常简单，只是由文字及标签组合而成。　　由于HTML只是文本，因此任何文本编辑器都可以编辑它。也许用户听说过许多可以编辑网页的软件，事实上，用户不需要用任何专门的软件来建立HTML页面。　　用户所需要的只是一个文字处理软件（如记事本、写字板，这种编写方法也称为“手工编写代码”的方式），但更常用的是图形用户界面的可视化编辑软件（如Frontpage,Dreamweaver),要创建效果，特别是实现可视化的布局，可视化编辑软件是非常必要的。 　　1.3.2　创建第一个网页　　　　下面我们来创建一个简单的HTML文件。　　１）选择【开始】－【所有程序】－【附件】－【记事本】命令打开记事本软件，键入下面的HTML代码。　　　　 　　　　　　　　　　　　          

芙蓉楼送辛渐

          

王昌龄

          

寒雨连江夜入吴，

         

平明送客楚山孤。

         

洛阳亲友如相问，

        

一片冰心在玉壶。

             　　２）从记事本软件主菜单上选择【文件】－【保存】命令，打开“另存为”，如图１－８所示。　　 　　首先从底部“保存类型”对应的下拉列表框中选择“所有文件”，然后在“文件名”对应的文本框中键入firstDoc.html文件名。　　单击【保存】按钮就会将firstDoc.html保存在Ｃ盘下，该文件在资源管理器中的显示如图１－９所示。　　　　请注意文件的图标，该图标是IE默认的图标，如果安装了其他的浏览器（如网景），那么图标将会被改变。一些HTML，这是安装了Dreamweaver后在资源管理器中的显示效果。　　３）启动IE浏览器，在地址栏中键入C:\firstDoc.html，按回车键就会看到如图1-10所示的结果（注意标题栏显示和窗口中文的本的居中显示）。　　标题栏的显示其实是由这行代码定义的，而窗口中文本能够居中显示，是由align="center">这样的属性说明定义的。　　1.3.3　查看网页的源文件38