1.1 网页与HTML的基础知识

1.1.1 网页的基本概念

1.什么是Internet

Internet，中文译名为“因特网”或“国际互联网”，是利用通信线路和通信设备，把世界各地的计算机网络、主机和个人计算机互相连接起来，在网络协议控制下所构成的互联网系统。世界上任何一个计算机系统和网络，只要遵守共同的网络通信协议TCP/IP，都可以连接到Internet上。Internet拥有数亿个用户，而且用户数还在以惊人的速度增长。Internet实现全球信息资源共享，如信息查询、文件传输、远程登录、电子邮件等，成为推动社会信息化的主要工具，对人类社会产生了深刻的影响。

2.WWW

WWW是环球信息网（World Wide Web）的缩写，也可以简称为Web，中文名字为“万维网”，是一个以Internet为基础的计算机网络，允许用户在一台计算机上通过Internet获取其他计算机的资源。从技术角度上说，环球信息网是Internet上那些支持WWW协议和超文本传输协议HTTP（HyperText Transport Protocol）的客户机与服务器的集合，通过它可以存取世界各地的超媒体文件，内容包括文字、图形、声音、动画、资料库及各式各样的软件。

环球信息网由欧洲核物理研究中心（CERN）研制的主从结构分布式超媒体系统，其第一套软件于1990年年底正式投入使用。由于用户使用Web浏览器访问信息资源的过程中不用关心技术问题，并且它的界面非常友好，因此在Internet上得到了迅速的推广和发展。目前，WWW服务器已经遍布全世界的各个角落，包含所有的Web站点、Gopher信息站、FTP档案库、Telnet公共存取账号、News新闻讨论区和Wais资料库。所以，环球信息网可以说是当今全世界最大的电子资料世界，已经可以把World Wide Web当成是Internet的同义词了。事实上，一般我们日常所说的“上网”，实质指的就是连上World Wide Web。

在Web之前，Internet上只有文本形式的信息，没有图形、声音等。Web提供将图形、音频、视频信息集合于一体的特性，而且，Web是非常易于导航的，因为它使用了超文本链接技术，只需要从一个链接跳到另一个链接，就可以在各页各站点之间进行浏览了。这些特性使得Web迅速发展和流行起来，同时Web具有平台无关性，无论你的系统平台是什么，你都可以通过一种叫做浏览器（browser）的软件实现在Internet访问WWW。Web是动态的、交互的、自由的，这是因为Web所包含的信息是双向的，信息提供者对网站上的信息进行及时更新，保证了信息的时间性，浏览者通过浏览网页来获取自己所需要的信息，同时，浏览者也可以通过动态交互的Web程序和其他浏览者或网站管理人员进行交流和沟通。

3.HTTP和URL

HTTP是Web的核心，Web浏览器与服务器之间的通信使用的协议就是HTTP，从协议的角度来看，Web是“站”在TCP/IP之上的，是TCP/IP的一个应用。从TCP/IP来看，Web（HTTP）和TELNET、FTP、GOPHER、WAIS等是没有什么区别的。HTTP按照客户-服务器的模式工作，支持客户（一般是浏览器）与服务器间的通信，相互传输数据。我们先来分析浏览器与服务器的工作过程——从一次“Click”到一张WebPage。

<1>浏览器用URL查询DNS，DNS返回IP地址。

<2>浏览器用这个IP地址建立一次TCP/IP连接。

<3>浏览器通过该连接向服务器发出一次HTTP请求。

<4>基于该请求的内容，服务器找到相应的文件，并根据文件的扩展名，形成一个MIME类型的HTTP回答消息，发送验证信息给浏览器，服务器关闭本次连接。

<5>根据消息头，浏览器按某种方式显示该文件内容，如果本文有<… SRC =URL>之类，浏览器将随时发出新的请求（可能对不同的服务器），以获得有关内容。

在这个工作过程中，步骤<2>～<4>是HTTP的一次操作，有时也称为HTTP的一次事务（transaction）。

随着Internet特别是Web的迅速发展，其信息资源也急剧膨胀。如何在浩如烟海的信息海洋里定位一个资源，这个资源应包括服务器及其上面存在的信息，已显得尤为重要。统一资源定位符（URL）便是其中的一种解决方案。URL通过定义资源位置的抽象标志来定位网络资源。资源被定位后，便可对其进行各种操作，如访问、更新、替换、查找属性。总体来说，URL的格式为：<scheme>:<scheme-specific-part>。其中，<scheme>指所用的URL方案名；<scheme-specific-part>意义的解释与所用方案有关。方案名由字符组成，可包括字母（a～z）、数字（0～9）、加号（+）、句点（.）和连词符（-），字母大小写是不分的。对于Internet，<scheme>指的是Internet协议名，主要包括：HTTP、FTP、GOPHER、MAILTO、NEW、NNTP、TELNET、WAIS和FILE等，以后还会不断扩充。HTTP URL方案用于表示可通过HTTP进行访问的Internet资源。HTTP URL的格式如下：

        http://<host>:<port>/<path>?<searchpart>

其中，<host>和<port>按标准格式；“:<port>”如果省略，默认端口值为80；<path>为HTTP选择器，而<searchpart>为查询字符串，它们都是可选的，如果这两项不存在，则主机或端口后的斜杠也应该省略。

4.网站和网页

所谓网站（Website），就是指在因特网上，根据一定的规则，使用HTML等工具制作的、用于展示特定内容的相关网页的集合。简单地说，网站是一种通信工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的信息，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的信息或者享受网络服务。

网页是构成网站的基本元素，是网站中的一个页面，是WWW的基本文档。网页实际是一个文件，通常是HTML格式（文件扩展名为“.html”、“.htm”、“.asp”、“.aspx”、“.php”和“.jsp”等），它存放在世界某个角落的的某一台计算机中，而这台计算机必须与互联网相连。网页由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后通过浏览器解释网页的内容，再展示到你的眼前。

文字与图片是构成网页的两个最基本的元素，你可以简单地理解为：文字，就是网页的内容；图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等，这些元素通过链接实现与其他网页或网站的关联和跳转。

网站由众多内容不同的网页组成，网页的内容体现了网站的功能。我们通常把进入网站首先看到的网页称为首页或主页（homepage）。

1.1.2 HTML的基本概念和基本结构

HTML（HyperText Markup Language）即超文本标记语言，是目前网络上应用最广泛的语言，也是设计制作网页文件的主要语言。“超文本”指无论网页页面的位置在哪里，都可以从一个页面跳转到另一个页面；“标记语言”指网页实际上是一个被注释过的文本文件。HTML用写字板、记事本等文本编辑工具就可以编写，通过标记和属性对文字、图形、动画、声音、表格、链接等进行全面描述，它是一种描述性标记语言，用来创建与系统平台无关的文档，其文件格式是能被浏览器解释显示的HTML或HTM文件。

1.HTML发展历史

HTML作为定义万维网的基本规则之一，最初由蒂姆·本尼斯李（Tim Berners-Lee）等人于1989年在CERN（Conseil Europeen pour la Recherche Nucleaire）研制。HTML的设计者是这样考虑的：HTML格式将允许科学家们透明地共享网络上的信息，即使这些科学家使用的计算机差别很大。因此，这种格式必须具备如下几个特点：独立于平台、超文本、精确的结构化文档。本尼斯李选择使用标准通用标记语言SGML（Standard Generalized Markup Language）作为HTML的开发模版，确保了HTML的跨平台无关性，同时其文档类型定义（DTD）可以使扩展HTML变得很容易。

自1989年以来，HTML及万维网的使用和发展有了巨大的变化。NCSA（National Center for Supercomputing Applications，国家超级计算机应用中心）在1993年年初首次构建Mosaic浏览器时，NCSA的科学家们把自己需要的特性添加到HTML中，包括直接插入图形。允许人们把位图、照片和图表放入到文档中以后，万维网的规模和使用出现了爆炸性的增长，第二年，HTML的发展很快。HTML的新标记不时地被一个又一个的浏览器引入，有一些新标记流行起来，而有一些消失了。有些增加部分设计得很糟，很多甚至不遵从SGML规范。

到了1994年年中，HTML几乎以失控的状态发展。在IETF（Internet Engineering Task Force）主持下，1995年11月在瑞士日内瓦举行的第一次WWW会议上成立了HTML工作小组。它的主要任务是把HTML形式化成为一种SGML DTD，称之为HTML Level 2（HTML 2.0，最初由本尼斯李设计的HTML被定义为Level 1）。标准化之后，HTML就可以被安全地扩展到将来的各个级别的版本，从而利用了SGML的实质性能和格式化结构。

尽管有关各方从来没有取得完全的共识，但万维网联盟HTML工作组（World Wide Web Consortium's HTML Working Group）还是集中了1996年的万维网发展的成果，产生了HTML 3.2版本，加入了很多特定的浏览器，如Netscape和Mosaic的元素和属性。

1997年12月18日推出的HTML 4.0将HTML推向了一个全新的高度，它继承了以往版本的所有特点，并提出了两个全新的理念：将文本结构和显示样式分离，更广泛的稳定兼容性。由于同期CSS层叠样式的配套推出，使得HTML和CSS对于网页制作的能力达到了前所未有的高度。

1999年12月24日，W3C（万维网联盟）推出了改进版的HTML 4.0.1，对HTML 4.0的一些功能做了进一步的完善，并一直沿用到现在。

2.HTML的基本概念

了解HTML文档的代码结构是学习网页制作的基础，在学习HTML以前，我们先看一个简单的网页实例。

【例1.1】利用HTML制作一个简单的网页，显示效果如图1-1所示。

<1>打开Windows下的记事本。

<2>输入下面代码：

            <html>
            <head>
            <title>HTML网页制作实例</title>
            </head>
            <body>你好！欢迎浏览HTML语言制作的简单网页实例！</body>
            </html>

<3>以纯文本格式保存为1-1.html文件。

<4>启动浏览器，打开该文件或在地址栏中直接输入存放该文件的地址，如“D:\网页制作\1-1.html”，就能看到如图1-1所示的界面。

每个HTML网页文件都以<html>开始，以</html>结束。浏览器遇到<html>标记时，会按照HTML的标准来解释后续的文本，直到遇到</html>才停止解释。<head>和</head>之间的内容是网页的头部，一般不显示在浏览器中，主要用来说明文件的有关信息。<title>和</title>是网页标题标记，它们之间的内容出现在浏览器中的标题栏。<body>和</body>之间是文件的主体部分，网页正文中的所有内容包括文字、图像、声音等都包含在这对标记对之间。

在本例中，我们看到的html、head、body等，在HTML中统一称为“标记”，是用于描述功能的符号，用来控制文字、图像等的显示方式，在使用的时候一定要用“< >”把它们括起来。标记分为单标记和双标记两种。单标记指的是单独使用就可以控制网页效果的标记，其语法结构是：<标记名>。例如，“<br>”就是单标记，表示换行的意思。双标记由“始标记”和“尾标记”两部分构成，必须成对使用，始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个“/”即成为尾标记。这类标记的语法如下：

            <标记>内容</标记>

其中，“内容”部分就是要被这对标记施加作用的部分。例如，你想突出某些文本的显示，就将此段文字放在一对<EM> </EM>标记中就可以了：

            <EM> 重点突出</EM>

在许多单标记和双标记的始标记内，紧跟着标记名后面有很多的语句，这些语句称为“标记属性”，其语法如下：

            <标记名  属性1  属性2  属性3  …>

各属性之间无先后次序，属性也可省略（即取默认值）。例如，单标记<HR>表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端，此标记允许带一些属性。例如：

            <HR SIZE=3 ALIGN=LEFT WIDTH="75%">

其中，SIZE属性定义线的粗细，属性值取整数，默认为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，默认值）、CENTER（居中）、RIGHT（右对齐）；WIDTH属性定义线的长度，可取相对值（由一对" "号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），默认值是“100%”。

3.HTML的基本结构

HTML的基本结构主要分成两部分：文件头和文件体。其中，文件头用于说明文件的有关信息和进行一些必要的定义。文件体包括网页正文中所有的文字、图像、声音等内容，是网页的主要部分。HTML的基本结构如下：

            <html>
                <head>
                    文件头
                </head>
                <body>
                    文件体
                </body>
            </html>

<html>标签是文档标志符，是成对出现的，首标签<html>和尾标签</html>分别位于文档的最前面和最后面，明确地表示文档是以HTML编写的。该标签不带有任何的属性。事实上，我们现在所用的浏览器是自动识别HTML文档的，并不要求有<html>标签的出现，也不对它进行任何操作。但是，为了提高文档的适用性，还是应该养成用这个标签的习惯。

<head>和</head>之间是文档的头部信息，整个文档的相关信息如文档总标题、描述、作者、编写时间等均存放在这里，若不需头部信息，则可省略此标记，嵌套在<head>标签中使用的子标签主要有<title>和<isindex>。<title>标签是成对的，用来规定HTML文档的标题。在<title>和</title>之间的内容将显示在Web浏览器窗口的标题栏中。<isindex>标签是一个单独的标签，用来规定文档的属性，说明该文档是可以按关键字索引的。

<body>和</body>之间是文件的主体部分，网页正文中的所有内容，包括文字、图像、声音、表格、动画等，都包含在它们之间。在<body>标签中可以规定整个文档的一些基本属性：

bgcolor：指定HTML文档的背景色，默认为白色。

text：指定HTML文档中正文文字的颜色，默认为黑色。

link：指定HTML文档中待连接超链接对象的颜色，默认为蓝色。

alink：指定HTML文档中被鼠标点中时超链接对象的颜色，默认为蓝色。

vlink：指定HTML文档中已被单击（访问）过的超链接对象的颜色，默认为紫色。

background：指定HTML文档的背景图像。

4.HTML的语法规则

HTML应遵循以下语法规则。

[1] HTML文件以纯文本形式存放，扩展名为.htm或.html。若系统为UNIX系统，扩展名为.html。

[2] HTML标记不区分大小写，如<HTML>和<html>是一样的。

[3]多数HTML标记可以嵌套，但不可以交叉。例如，“<P><FONT COLOR="#000000"FACE="楷体-GB2312">网页制作基础</P></FONT>”将不能正确显示。

[4] HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。例如：

            <P><FONT COLOR="#000000" FACE="楷体-GB2312">
                网页制作基础
            </FONT></P>

和

            <P><FONT COLOR="#000000"
            FACE="楷体-GB2312">
                网页制作基础
            </FONT></P>

都是正确的，并且显示的效果完全一样。但是HTML标记中的一个单词不能分两行书写，如：

            <FO
                NT COLOR="#000000"FACE="楷体-GB2312">
                  网页制作基础
            </FONT>

是不正确的。

[5] HTML源文件中的换行、空格和回车符在显示效果中是无效的。若想在显示内容中换行必须用<BR>标记，换段用<P>标记，<P>表示段落开始，</P>表示段落结束；一个半角空格用一个“&nbsp;”表示，多个空格只需要使用多个“&nbsp;”就可以表示。例如：

            <FONT FACE="楷体-GB2312">
                网页制作基础
            </FONT>

与

            <FONT FACE="楷体-GB2312">
                网页
                制作基础
            </FONT>

在浏览器中都显示为：

            网页制作基础
        又如：
            <FONT FACE="楷体-GB2312">
                网页<p>制作基础
            </FONT>

与

            <FONT FACE="楷体-GB2312">
                网页<p>

                制作基础
            </FONT>

在浏览器中都显示为：

            网页
            制作基础

与空格的表示方法一样，一些特殊符号也是由前缀“&”加上字符对应的名称，再加上后缀“;”组成，如“"”的符号码为“&quot;”。

[6]网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。