HTML和中文Dreamweaver MX2004实用教程

1、 本章要点本章要点l1.1 Internet简介简介 l1.2 “卡通青蛙卡通青蛙”网页网页 l1.3 “我的收藏我的收藏”网页网页l1.4 再做再做“我的收藏我的收藏”网页网页 l1.5 “俏皮歇后语俏皮歇后语”网页网页 l1.6 “动画放映室动画放映室”网页网页 l1.7 “HTML技术演示技术演示”网页网页 l1.8 “中国的世界文化遗产中国的世界文化遗产”网页网页 l1.9 “Flash技术说明技术说明”网页网页 l1.10 “公告板公告板”网页网页 l1.11 “水中人水中人”网页网页 l1.12 “俄罗斯方块游戏俄罗斯方块游戏”网页网页 l习题习题 1 1.1.1 什么是什么是In

2、ternet1计算机网络计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统通过计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统通过通信线路互连在一起，由网络软件实现网络资源共享和相互通信的整个信通信线路互连在一起，由网络软件实现网络资源共享和相互通信的整个信息系统。息系统。物理上，计算机网络主要是由计算机、路由器、集线器、调制解调器、网物理上，计算机网络主要是由计算机、路由器、集线器、调制解调器、网卡、中继器、收发器以及交换机等网络硬件设备组成，所有这些设备统称卡、中继器、收发器以及交换机等网络硬件设备组成，所有这些设备统称为网络单元。计算机网络按照覆盖的地域大小，可分为

3、局域网（即为网络单元。计算机网络按照覆盖的地域大小，可分为局域网（即LAN，范围不超过范围不超过10km）和广域网（即）和广域网（即WAN，一般指，一般指10km以上范围）。任何计以上范围）。任何计算机网络，无论是局域网、城域网、广域网还是因特网都可以划分为两个算机网络，无论是局域网、城域网、广域网还是因特网都可以划分为两个部分：一部分是负责信息收集和处理的资源子网，另一部分是负责信息传部分：一部分是负责信息收集和处理的资源子网，另一部分是负责信息传输的通信子网。输的通信子网。 2InternetInternet一词来源于英文一词来源于英文Interconnect networks，即，即“互

4、连各个网络互连各个网络”，简称，简称“互联互联网网”，中文译名为，中文译名为“因特网因特网”。Internet是专指全球范围内最大的、由众多网络相互是专指全球范围内最大的、由众多网络相互连接而成的、基于连接而成的、基于TCP/IP的计算机网络。的计算机网络。Internet是当今世界最大的计算机互连网是当今世界最大的计算机互连网络系统，由全球络系统，由全球100多个国家和地区无数的不同功能的计算机、通信骨干网和各种多个国家和地区无数的不同功能的计算机、通信骨干网和各种计算机网络通过线路连接在一起的一个世界范围的网络。计算机网络通过线路连接在一起的一个世界范围的网络。在在Internet中，资源

5、是存放在服务器上的，中，资源是存放在服务器上的，Internet上的服务器昼夜不停地工作，分上的服务器昼夜不停地工作，分别存储着各种各样的信息，提供多种服务功能，用户通过客户机（个人计算机）访别存储着各种各样的信息，提供多种服务功能，用户通过客户机（个人计算机）访问服务器，从而获取资源。问服务器，从而获取资源。Internet服务器的资源主要有：超级计算中心、图书文献服务器的资源主要有：超级计算中心、图书文献中心、技术资料中心、公共软件库、科学数据库、地址目录库以及信息库等。中心、技术资料中心、公共软件库、科学数据库、地址目录库以及信息库等。Internet服务器的主要信息服务有：万维网服务（

6、服务器的主要信息服务有：万维网服务（WWW）、电子邮件服务（）、电子邮件服务（E-mail）、远程登录服务（）、远程登录服务（Telnet）、文件传输服务（）、文件传输服务（FTP）、网络新闻服务）、网络新闻服务（USENET）、电子公告板服务（）、电子公告板服务（BBS），还有网上购物、网上会议、网上聊天、），还有网上购物、网上会议、网上聊天、网上炒股、网上交友、网上书店、网上报刊、网上广播、网上画廊、网上电影和网网上炒股、网上交友、网上书店、网上报刊、网上广播、网上画廊、网上电影和网上音乐等。各服务器之间通过网络协议相互连接，配合工作，资源共享。当用户与上音乐等。各服务器之间通过网络协议相

7、互连接，配合工作，资源共享。当用户与其中一台服务器建立连接后，便可以以链接的方式访问整个网络，服务程序可以根其中一台服务器建立连接后，便可以以链接的方式访问整个网络，服务程序可以根据用户的需要，自动地从一台服务器转移到另一台服务器。一旦进入了据用户的需要，自动地从一台服务器转移到另一台服务器。一旦进入了Internet，无，无论所需要的信息是在哪一个国家或地区的服务器上，只要是合法的登录者，就可以论所需要的信息是在哪一个国家或地区的服务器上，只要是合法的登录者，就可以漫游漫游Internet，享用所需要的信息和资源。，享用所需要的信息和资源。Internet是当今世界上最大的资源子网。是当今世

8、界上最大的资源子网。Internet正在向着全球信息高速公路的方向快速、健康地发展。正在向着全球信息高速公路的方向快速、健康地发展。 3Internet的发展1969年，美国国防部高级研究计划署（年，美国国防部高级研究计划署（Advanced Research Project Agency，ARPA）拨款支持建立了军用实验网络）拨款支持建立了军用实验网络ARPANET。它是世界上第一个计算。它是世界上第一个计算机网络，也是机网络，也是Internet的前身，初期只有的前身，初期只有4台主机。当时，美国国防部研究台主机。当时，美国国防部研究并建立并建立ARPANET的主要目的是寻求一种将不同种类

9、的计算机互连成网络的的主要目的是寻求一种将不同种类的计算机互连成网络的方法，同时能使该网络的一部分遭破坏时不影响网络其他部分的正常运行。方法，同时能使该网络的一部分遭破坏时不影响网络其他部分的正常运行。以后，以后，ARPANET的应用由军事领域延伸到教育领域，科学家们开始使用的应用由军事领域延伸到教育领域，科学家们开始使用ARPANET交换信息，共享研究成果。交换信息，共享研究成果。1983年，年，TCP/IP（即传输控制协议（即传输控制协议和网际间协议）的建立，使计算机通信有了统一的标准，这是计算机网络和网际间协议）的建立，使计算机通信有了统一的标准，这是计算机网络发展史上的一个里程碑，网络

10、从此进入高速发展的时代。发展史上的一个里程碑，网络从此进入高速发展的时代。1986年，美国国家科学基金会（年，美国国家科学基金会（National Science Foundation，NSF）开始）开始将美国各地的研究人员及分属各大学和研究机构的计算中心连接到了分布将美国各地的研究人员及分属各大学和研究机构的计算中心连接到了分布在不同地区的在不同地区的5个超级计算中心。至此，越来越多的高等院校、科研机构、个超级计算中心。至此，越来越多的高等院校、科研机构、图书馆、实验室、政府部门、商业集团、医院和个人所使用的图书馆、实验室、政府部门、商业集团、医院和个人所使用的NSFNET逐逐渐取代了早期源

11、于军事目的的渐取代了早期源于军事目的的ARPANET。终于，在。终于，在1990年年7月，月，ARPANET完全被完全被NSFNET取代。到目前为止，连接在网络上的主机已经达取代。到目前为止，连接在网络上的主机已经达到了数百万台。一般认为，正是到了数百万台。一般认为，正是NSFNET才使才使Internet迅速推广到全球范围。迅速推广到全球范围。 1994年年5月，中国作为第月，中国作为第71个国家级网加入个国家级网加入Internet，“中国国家计算机网络设施中国国家计算机网络设施”（The National Computing and Network Facility of China，N

12、CFC，国内也称中关，国内也称中关村网）与村网）与Internet连通。连通。我国从我国从1994年中国科技网与年中国科技网与Internet连通后，共有连通后，共有4大互联网通过大互联网通过6大国际出口与大国际出口与Internet相连。这相连。这4大互联网分别是：中国科技网（大互联网分别是：中国科技网（CSTNET）、中国教育和科研计）、中国教育和科研计算机网（算机网（CERNET）、中国公用计算机互联网（）、中国公用计算机互联网（ChinaNET）和国家公用经济信息）和国家公用经济信息网（即金桥网（网（即金桥网（ChinaGBN），其中，前两个网络是非盈利性的，以为教育、科），其中，前两

13、个网络是非盈利性的，以为教育、科研和政府部门服务为宗旨，原则上不对外接纳个人和商业用户，后两个网络是面向研和政府部门服务为宗旨，原则上不对外接纳个人和商业用户，后两个网络是面向全国提供商业服务的网络。全国提供商业服务的网络。目前，我国目前，我国Internet商业市场十分活跃，除去上述商业市场十分活跃，除去上述4家外，一些商业公司也开始纷纷家外，一些商业公司也开始纷纷投入这一市场，形成若干商业投入这一市场，形成若干商业ISP（Internet Service Provider，Internet服务提供服务提供商）。他们的基本作法大多是：自己建立一个网络服务中心，通过专线从上述几个商）。他们的基

14、本作法大多是：自己建立一个网络服务中心，通过专线从上述几个网络的国际出口与网络的国际出口与Internet相连，提供服务的业务主要有用户接入服务（拨号上网和相连，提供服务的业务主要有用户接入服务（拨号上网和专线上网）、培训服务、服务器托管、代理域名注册、出租硬盘空间、收发电子邮专线上网）、培训服务、服务器托管、代理域名注册、出租硬盘空间、收发电子邮件、网上教学、金融证券以及电子商务等。件、网上教学、金融证券以及电子商务等。随着计算机和通信技术的发展，计算机网络由过去的军事与教育专用网络发展成为随着计算机和通信技术的发展，计算机网络由过去的军事与教育专用网络发展成为无所不包、无所不能的国际互联网

15、络（无所不包、无所不能的国际互联网络（Internet）。）。Internet已经成为我们生活与工已经成为我们生活与工作中不可缺少的一部分，它正以人们难以想象的速度迅猛发展。作中不可缺少的一部分，它正以人们难以想象的速度迅猛发展。 1.1.2 TCP/IPInternet没有形成之前，各个地方已经建立了很多小型的局域网，没有形成之前，各个地方已经建立了很多小型的局域网，Internet是将全球是将全球各地的局域网连接起来而形成的一个各地的局域网连接起来而形成的一个“网之间的网网之间的网”（即网际网）。然而，在连接（即网际网）。然而，在连接之前的各式各样的局域网却存在不同的网络结构和数据传输规则

16、，将这些小网连接之前的各式各样的局域网却存在不同的网络结构和数据传输规则，将这些小网连接起来后，各网之间要通过什么样的规则来传输数据呢？这就像世界上有很多个国家，起来后，各网之间要通过什么样的规则来传输数据呢？这就像世界上有很多个国家，各个国家的人说各自的语言，只有将各种语言翻译成一种通用的语言后才可以交流。各个国家的人说各自的语言，只有将各种语言翻译成一种通用的语言后才可以交流。TCP/IP正是正是Internet上的一种公用语言的规范约定。上的一种公用语言的规范约定。TCP/IP是是Transmission Control Protocol/Internet Protocol的缩写，中文译

17、名为传输的缩写，中文译名为传输控制协议控制协议/互联网络协议，是互联网络协议，是Internet最基本的协议，是由底层的最基本的协议，是由底层的IP和和TCP组成的。组成的。TCP/IP的开发工作始于上世纪的开发工作始于上世纪70年代，是用于互联网的第一套协议。年代，是用于互联网的第一套协议。1IPIP是因特网中的基础协议，它非常详细地定义了计算机通信应该遵循的规则，准确是因特网中的基础协议，它非常详细地定义了计算机通信应该遵循的规则，准确地定义了分组的组成和路由器如何将一个分组传递到目的地。连到地定义了分组的组成和路由器如何将一个分组传递到目的地。连到Internet上的计算上的计算机需要机

18、需要IP软件才能在互联网上通信。由软件才能在互联网上通信。由IP控制传输的协议单元被称为控制传输的协议单元被称为IP数据报。数据报。IP数据报中含有发数据报中含有发/收方的收方的IP地址。地址。IP提供不可靠的、尽力的及无连接的数据报投递服提供不可靠的、尽力的及无连接的数据报投递服务，构成了因特网数据传输的基础。务，构成了因特网数据传输的基础。IP是最基本的软件，是最基本的软件，Internet上的所有通信只有上的所有通信只有使用使用IP才能进行分组交换。所以，才能进行分组交换。所以，Internet上的每台计算机都要安装一套供所有应用上的每台计算机都要安装一套供所有应用共享的共享的IP软件的

19、拷贝。在高级的计算机上，内存中随时保留软件的拷贝。在高级的计算机上，内存中随时保留IP的一个拷贝，时刻准的一个拷贝，时刻准备发送或接收分组。备发送或接收分组。 1.1.3 万维网、网页和网站万维网、网页和网站1什么是万维网万维网也叫万维网也叫WWW，是，是World Wide Web（全球信息网）的缩写。万维网是欧洲粒子（全球信息网）的缩写。万维网是欧洲粒子物理研究所（物理研究所（CERN）的科学家）的科学家Tim Berners-Lee发明的。他提出了超文本发明的。他提出了超文本（Hypertext）的结构体系，该体系是由相互关联的文件组成的一种高级的基于超文）的结构体系，该体系是由相互关联

20、的文件组成的一种高级的基于超文本的浏览和搜索方式，目的是让大家在不同地方用一种简捷的方式共享信息资源。本的浏览和搜索方式，目的是让大家在不同地方用一种简捷的方式共享信息资源。万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放在万维网服务器上，供人们选择查阅。万维网使得浏览在万维网服务器上，供人们选择查阅。万维网使得浏览Internet的信息变得非常简单，的信息变得非常简单，它已成为它已成为Internet用户使用最广泛的网络服务系统。用户使用最广泛的网络服务系统。万维网制定了一套标准、又容易掌握的超文

21、本万维网制定了一套标准、又容易掌握的超文本HTML语言、统一的资源定位符语言、统一的资源定位符URL和超文本传输协议（和超文本传输协议（hypertext transport protocol，HTTP）。）。超文本传输协议是在浏览器与超文本传输协议是在浏览器与Web服务器间建立连接的协议标准。超文本由若干互服务器间建立连接的协议标准。超文本由若干互连的超媒体文件组成，它实质是通过超链接把一些具有超媒体特性的信息链接起来连的超媒体文件组成，它实质是通过超链接把一些具有超媒体特性的信息链接起来的一种新型的信息管理技术。超媒体不但包括了文本内容，还包括图像、动画、声的一种新型的信息管理技术。超媒体

22、不但包括了文本内容，还包括图像、动画、声音和视频等。超链接就是通过超文本中的链接点（也叫音和视频等。超链接就是通过超文本中的链接点（也叫“参考点参考点”或或“热点热点”）建）建立与其他超媒体文件的链接，用鼠标单击参考点即可调出与之相链接的其他超媒体立与其他超媒体文件的链接，用鼠标单击参考点即可调出与之相链接的其他超媒体文件（如网页）。文件（如网页）。浏览浏览WWW必须通过浏览器来完成。浏览器是用来访问必须通过浏览器来完成。浏览器是用来访问Internet的基于超文本技术使的基于超文本技术使用最广泛的网络软件，它可以提供包括用最广泛的网络软件，它可以提供包括WWW的浏览、搜索、网络资讯的打印和收

23、的浏览、搜索、网络资讯的打印和收发发E-mail的功能。在浏览器中，比较有代表性的是的功能。在浏览器中，比较有代表性的是IE（Internet Explorer）、）、Netscape和和Opera等。等。 2网页和网站组成组成WWW的基本元素是网页，网页也被称为页面或的基本元素是网页，网页也被称为页面或Web页。不同的网页页。不同的网页通过超链接联系在一起，构成了通过超链接联系在一起，构成了WWW的纵横交织结构。的纵横交织结构。WWW是由无数是由无数的的Web服务器构成的，可以通过浏览器访问这些服务器上的网页。服务器构成的，可以通过浏览器访问这些服务器上的网页。通常把一系列逻辑上可以视为一个

24、整体的页面叫作网站，或者说，网站就通常把一系列逻辑上可以视为一个整体的页面叫作网站，或者说，网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（如站（如“雅虎网雅虎网”和和“新浪网新浪网”）页面多得无法计数，而且位于多台服务）页面多得无法计数，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。上占据很小的空间。网页与网页之间的关系并不是完全相同的。主页是网站中的一个特殊网页，网页与网页之间的关系并不

25、是完全相同的。主页是网站中的一个特殊网页，它是在它是在WWW上进入网站的第一个网页，其中包含指向其他网页的超链接。上进入网站的第一个网页，其中包含指向其他网页的超链接。通常主页的名称是固定的，例如，通常主页的名称是固定的，例如，index.htm或或 index.html等（等（.htm或或.html扩展名表示是扩展名表示是HTML文档）。文档）。 1.1.4 Internet地址地址Internet采用一种惟一通用的地址格式，为采用一种惟一通用的地址格式，为Internet中的每一个网络和几乎中的每一个网络和几乎每一台主机都分配了一个地址，就像一个实实在在的整体。每一台主机都分配了一个地址，

26、就像一个实实在在的整体。Internet中地址中地址类型有类型有IP地址和域名地址两种。地址和域名地址两种。1IP地址连接在连接在Internet上的每台计算机都有一个惟一的地址，发送方计算机在通信上的每台计算机都有一个惟一的地址，发送方计算机在通信之前必须知道接收方计算机的地址，这和我们日常邮寄普通信件是一样的之前必须知道接收方计算机的地址，这和我们日常邮寄普通信件是一样的道理，只是道理，只是Internet上使用的地址称为上使用的地址称为Internet地址，简称地址，简称IP地址。地址。IP地址地址是是4个以小数点隔开的十进制整数，每个整数的范围是个以小数点隔开的十进制整数，每个整数的范

27、围是0255。Internet上上的每一台计算机和路由器都有一个由相关的管理机构指定的的每一台计算机和路由器都有一个由相关的管理机构指定的IP地址。计算地址。计算机用机用4个字节的二进制单位（个字节的二进制单位（32位）存储位）存储IP地址，每个整数对应一个字节。地址，每个整数对应一个字节。例如，有一台计算机的例如，有一台计算机的IP地址为：地址为：，而另一台计算机的，而另一台计算机的IP地址地址为为:0。IP地址分为地址分为5类。类。A类（类（A Class）：）：55适用于大型网络。适用于大型网络。B类（类（B

28、Class）：）：55适用于中型网络。适用于中型网络。C类（类（C Class）：）：55适用于小型网络。适用于小型网络。D类和类和E类：保留作特殊用途。类：保留作特殊用途。 2计算机域名由于由于IP地址是数字型的，不方便记忆，也难以理解，所以地址是数字型的，不方便记忆，也难以理解，所以Internet采用了另一套字符采用了另一套字符（可以有英文字母、数字和汉字等）的地址方案，即域名地址。域名地址用具有一（可以有英文字母、数字和汉字等）的地址方案，即域名地址。域名地址用具有一定意义的字符串来标识主机地址，定

29、意义的字符串来标识主机地址，IP与域名地址两者相互对应，而且保持全网统一。与域名地址两者相互对应，而且保持全网统一。在网络中，一台主机的在网络中，一台主机的IP地址是惟一的，而每台主机只能有一个地址是惟一的，而每台主机只能有一个IP地址，但它的域地址，但它的域名数却可以有多个。名数却可以有多个。域名系统（域名系统（Domain Name System，DNS）负责将）负责将Internet上每台主机的英文名字转上每台主机的英文名字转换成换成IP地址的系统。用户可以只输入要查找的主机的域名，地址的系统。用户可以只输入要查找的主机的域名，DNS系统把它转换成系统把它转换成IP地址后，计算机才能够根

30、据地址后，计算机才能够根据IP地址进行查找。当然并不是每台在地址进行查找。当然并不是每台在Internet上的主机都上的主机都有域名，例如，拨号上网的用户每次连接有域名，例如，拨号上网的用户每次连接Internet时，只需要一个时，只需要一个“动态动态”的的IP地址，地址，不需要域名。也就是说，不需要域名。也就是说，Internet上的每台主机都有一个上的每台主机都有一个IP地址，但不一定有域名。地址，但不一定有域名。一台计算机的域名由若干代表不同层次的子域名组成，各个子域名之间用小数点分一台计算机的域名由若干代表不同层次的子域名组成，各个子域名之间用小数点分开。其中最左边的子域名通常代表主机

31、，中间各子域名代表相应的层次，最右边的开。其中最左边的子域名通常代表主机，中间各子域名代表相应的层次，最右边的子域名是标准化的最高级子域名，主要表示主机所属的国家、地区或网络性质的代子域名是标准化的最高级子域名，主要表示主机所属的国家、地区或网络性质的代码。例如，中国是码。例如，中国是cn，英国是，英国是uk、商业组织是、商业组织是com、教育机构是、教育机构是edu、政府部门是、政府部门是gov、军事部门是、军事部门是mil、网络信息和运营中心是、网络信息和运营中心是net、非商业组织是、非商业组织是org以及国际组织以及国际组织是是int等。二级域名（右起第二个子域名）有：教育（等。二级域

32、名（右起第二个子域名）有：教育（edu）、电信网（）、电信网（net）、科研）、科研网（网（ca）、团体（）、团体（or）、政府（）、政府（go）、商业（）、商业（co）以及军队（）以及军队（mi）等。各省则采用）等。各省则采用其拼音宿写，如其拼音宿写，如bj代表北京、代表北京、sh代表上海、代表上海、ah则代表安徽。则代表安徽。 例如，域名例如，域名对应一个对应一个IP地址，其中地址，其中youdian是该机构的名字，是该机构的名字，edu表示教育机构，表示教育机构，cn表示中国。表示中国。例如，域名例如，域名对应一个对应一个IP地址，其中地址，其中xyz是主机名，是主机名，netbook是

33、该机构名，是该机构名，com表示商业组织，表示商业组织，cn表示中国。表示中国。另外，还要注意域名只能以字母或数字开头，以字母或数字结尾，中间可另外，还要注意域名只能以字母或数字开头，以字母或数字结尾，中间可以用字母、字符、数字、连字符或下划线。域名不区分大小写，整个长度以用字母、字符、数字、连字符或下划线。域名不区分大小写，整个长度不得超过不得超过255个字符。个字符。由于由于Internet源自美国，所以美国主机其第一级域名一般直接说明其主机性源自美国，所以美国主机其第一级域名一般直接说明其主机性质，而不是国家代码。如果用户看到某主机的第一级域名为质，而不是国家代码。如果用户看到某主机的第

34、一级域名为com、edu或或gov等，一般可以判断这台主机置于美国，因为其他国家或地区第一级域名一等，一般可以判断这台主机置于美国，因为其他国家或地区第一级域名一般是其国家或地区的代码。般是其国家或地区的代码。 “卡通青蛙”网页在浏览器中的显示效果如图1-2-1所示。网页中的青蛙除了大小不同以外，在图片的周围还增加了粗细不同的边框。 图1-2-1 “卡通青蛙”网页 1.2.1 HTML语言和输入语言和输入HTML语言语言1HTML语言简介HTML的英文全称为的英文全称为Hypertext makeup language ，直译为超文本标记语言。，直译为超文本标记语言。HTML语言不是一种程序语

35、言，而是一种描述文档结构的标记语言，它与操作系统平台的语言不是一种程序语言，而是一种描述文档结构的标记语言，它与操作系统平台的选择无关，只要有浏览器就可以运行选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。文档，显示网页内容。HTML语言使用了一些约定的标记，对语言使用了一些约定的标记，对WWW上的各种信息进行标记，浏览器会自上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。自从自从1990年首次将年首次将HTML语言用于网页制作后，几乎所有的网页都是由

36、语言用于网页制作后，几乎所有的网页都是由HTML语言语言或以其他语言镶嵌在或以其他语言镶嵌在HTML语言中的语言（如语言中的语言（如JavaScript语言等）编写的。语言等）编写的。目前，较流行的浏览器有目前，较流行的浏览器有Netscape公司的公司的Netscape Navigator和和Microsoft公司的公司的Internet Explorer（即（即IE）。要注意，不同的浏览器对同一个）。要注意，不同的浏览器对同一个HTML文件的解释可文件的解释可能会不太一样。能会不太一样。使用使用HTML语言编写语言编写HTML语言程序（即制作网页文件）是学习制作网页的基础。语言程序（即制作

37、网页文件）是学习制作网页的基础。虽然目前有许多虽然目前有许多“所见即所得所见即所得”且操作较方便的网页制作工具，不需要直接用且操作较方便的网页制作工具，不需要直接用HTML语言编写语言编写HTML语言程序，但是在很多时候，了解一些语言程序，但是在很多时候，了解一些HTML语言知识，将语言知识，将有利于学习网页制作工具、学习编辑修改网页的知识和提高网页制作水平。有利于学习网页制作工具、学习编辑修改网页的知识和提高网页制作水平。 2输入输入HTML语言语言编写编写HTML文档可以在文档可以在Windows记事本内输入。在存盘输入文件名时，一记事本内输入。在存盘输入文件名时，一定要输入定要输入HTM

38、L文档的扩展名：文档的扩展名：.htm或或.html。要注意：。要注意：HTML文档中的各文档中的各种英文标记要在英文输入方式下输入。为了便于管理，可在磁盘目录下建种英文标记要在英文输入方式下输入。为了便于管理，可在磁盘目录下建立一个名为立一个名为“我的网站我的网站”的文件夹用来存储的文件夹用来存储HTML文档。再在该文件夹下文档。再在该文件夹下建立一个名为建立一个名为“image”的文件夹用来存储网页中的图像文件。的文件夹用来存储网页中的图像文件。 1.2.2 调整图像大小和边框的调整图像大小和边框的HTML标记标记1在网页中插入图像的HTML标记在网页中插入图像时使用的标记是在网页中插入图

39、像时使用的标记是，用来加载，用来加载GIF图像与动画，图像与动画，“SRC”属性用来输入图像的路径。在网页中加载属性用来输入图像的路径。在网页中加载GIF动画的方法与加载动画的方法与加载GIF图像的方法一样。图像的方法一样。GIF动画文件的扩展名也是动画文件的扩展名也是.gif，文件格式是，文件格式是GIF89A格式。格式。2调整图像大小的HTML标记使用使用标记中的标记中的HEIGHT和和WIDTH属性可以调整图像的大小。属性可以调整图像的大小。HEIGHT（决定图像的高）和（决定图像的高）和WIDTH（决定图像的宽）的取值单位为像素。（决定图像的宽）的取值单位为像素。3给图像加边框的HTM

40、L标记使用使用标记中的标记中的BORDER属性可以给图像加边框。属性可以给图像加边框。BORDER的取值单的取值单位为像素，当它的取值为位为像素，当它的取值为0或者不加或者不加BORDER属性时，则没有边框。属性时，则没有边框。 “我的收藏我的收藏”网页的显示效果如图网页的显示效果如图1-3-1所示。在网页中，列出了最喜爱的所示。在网页中，列出了最喜爱的3辆汽车的图像，在图片的旁边，还有一句简短的介绍。通过图辆汽车的图像，在图片的旁边，还有一句简短的介绍。通过图1-3-1可以看可以看出，每一幅图像旁的文字位置有所不同。出，每一幅图像旁的文字位置有所不同。 图1-3-1 “我的收藏”网页 1.3

41、.1 浏览和修改网页浏览和修改网页1浏览网页双击双击HTML文档图标，调出浏览器窗口，同时打开该网页。另外，还可以文档图标，调出浏览器窗口，同时打开该网页。另外，还可以采用如下方法。采用如下方法。图1-3-2 “打开”对话框（1）双击浏览器图标，调出浏览器窗口。然后执行浏览器窗口内的）双击浏览器图标，调出浏览器窗口。然后执行浏览器窗口内的“文文件件”“打开打开”菜单命令，调出菜单命令，调出“打开打开”对话框，如图对话框，如图1-3-2所示（所示（“打开打开”文本框内还没有内容）。文本框内还没有内容）。 图1-3-2 “打开”对话框 （2）单击）单击“打开打开”对话框中的对话框中的“浏览浏览”按

42、钮，调出按钮，调出“Microsoft Internet Explorer”对话框，选择对话框，选择HTML文件，单击文件，单击“打开打开”按钮，回到按钮，回到“打开打开”对对话框，在其话框，在其“打开打开”下拉列表框内已有选中的文件目录与名字，如图下拉列表框内已有选中的文件目录与名字，如图1-3-2所示。所示。（3）单击）单击“打开打开”对话框中的对话框中的“确定确定”按钮，即可在浏览器中打开选择的按钮，即可在浏览器中打开选择的网页。网页。2修改网页执行执行“Microsoft Internet Explorer”浏览器窗口中的浏览器窗口中的“查看查看”“源文件源文件”菜单命令，调出菜单命令

43、，调出Windows记事本窗口，并在该窗口中显示出该网页的代码，记事本窗口，并在该窗口中显示出该网页的代码，此时即可修改网页代码。此时即可修改网页代码。 1.3.2 调整图像和文本的相对位置调整图像和文本的相对位置在网页中，经常需要将图像和文本放在一起进行显示。使用在网页中，经常需要将图像和文本放在一起进行显示。使用标记的标记的ALIGN属性可以调整图像与文本的相对位置。使用属性可以调整图像与文本的相对位置。使用标记中的标记中的VSPACE和和HSPACE属性可以调整图像与文本间的距离。属性可以调整图像与文本间的距离。VSPACE（图像与（图像与文本的垂直间距）和文本的垂直间距）和HSPACE

44、（图像与文本的水平间距）的单位均为像素。（图像与文本的水平间距）的单位均为像素。标记中的标记中的ALIGN属性用于调整图像与文字的对齐方式，主要含义如属性用于调整图像与文字的对齐方式，主要含义如下。下。（1）ALIGN项缺省时：图像的底部与其他文本或图像的底部对齐。项缺省时：图像的底部与其他文本或图像的底部对齐。（2）ALIGN=top：图像的顶部与其他文本或图像的顶部对齐。：图像的顶部与其他文本或图像的顶部对齐。（3）ALIGN=middle：图像的中部与其他文本或图像的中部对齐。：图像的中部与其他文本或图像的中部对齐。（4）ALIGN=bottom：图像的底部与其他文本或图像的底部对齐。：

45、图像的底部与其他文本或图像的底部对齐。（5）ALIGN=left：图像位于屏幕左边，与文本或图像的左边对齐。：图像位于屏幕左边，与文本或图像的左边对齐。（6）ALIGN=right：图像位于屏幕右边，与文本或图像的右边对齐。：图像位于屏幕右边，与文本或图像的右边对齐。 再做再做“我的收藏我的收藏”网页后，当鼠标移到图像上时，会显示出一段浮动的文网页后，当鼠标移到图像上时，会显示出一段浮动的文字说明。当关闭浏览器中的载入图像命令时，说明文字可以替代图像。在字说明。当关闭浏览器中的载入图像命令时，说明文字可以替代图像。在“我的收藏我的收藏”网页中除了为图像添加了说明文字外，还为网页添加了背景网页中

46、除了为图像添加了说明文字外，还为网页添加了背景图像。网页的部分显示效果如图图像。网页的部分显示效果如图1-4-1所示。所示。 图1-4-1 “我的收藏”网页（部分）的显示效果 1.4.1 文件的路径名和文件的路径名和URL1文件的路径名（1）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用查找。绝对路径中的盘符后用“：”或或“：/”，各个目录名之间以及目录名，各个目录名之间以及目录名与文件名之间，应用与文件名之间，应用“”或或“/”分隔开。绝对路径名的写法及其含义如表分隔开。绝对路径名的写法及其

47、含义如表1-4-1所示。所示。 （2）相对路径：相对路径是以当前文件所在路径或子目录为起始目录，进行相对的文件查找。在网页制作的过程中通常都采用相对路径，这样可以保证文件移动后，不会产生断链现象。相对路径名的写法及其含义如表1-4-2所示。 2URLURL（Uniform Resource Locator）即统一资源定位符，）即统一资源定位符，WWW上的地址编上的地址编码，指出了文件在码，指出了文件在Internet中的位置。它存在的目的在于统一中的位置。它存在的目的在于统一WWW上的地上的地址编码，给每个网页指定地址，这样就不会出现重复或由于编码不统一而址编码，给每个网页指定地址，这样就不会

48、出现重复或由于编码不统一而出现无法浏览等问题。当用户查询信息资源时，只要给出出现无法浏览等问题。当用户查询信息资源时，只要给出URL地址，地址，WWW服务器就可以根据它找到网络资源的位置，并将它传送给用户的计服务器就可以根据它找到网络资源的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，即可将算机。通常，当用户用鼠标单击网页中的链接点时，即可将URL地址的请地址的请求传送给了求传送给了WWW服务器。服务器。一个完整的一个完整的URL地址通常由通信协议名、地址通常由通信协议名、Web服务器地址、文件在服务器服务器地址、文件在服务器中的路径和文件名中的路径和文件名4部分组成

49、。例如，部分组成。例如，http:/ 1.4.2 平铺背景图像和为图像添加文字说明的平铺背景图像和为图像添加文字说明的HTML标记标记1设置平铺背景图像的HTML标记使用使用标记中的标记中的BACKGROUND属性，可设置网页的平铺的图像，属性，可设置网页的平铺的图像，其格式如下：其格式如下：图像的路径可以是绝对路径，也可以是相对路径。图像的路径可以是绝对路径，也可以是相对路径。2为图像添加文字说明的HTML标记使用使用标记中的标记中的ALT属性可以为图像添加文字说明，其格式如下：属性可以为图像添加文字说明，其格式如下：。 歇后语是一种隐去后文，以前文表示意思的幽默语言。如以歇后语是一种隐去后

50、文，以前文表示意思的幽默语言。如以“泥菩萨过河泥菩萨过河”暗示暗示“自身难保自身难保”、以、以“围棋盘里下象棋围棋盘里下象棋”表示表示“不对路数不对路数”等。源远流等。源远流长的中国文化孕育了这种特殊的语言结构，是广大人民群众喜闻乐见的语长的中国文化孕育了这种特殊的语言结构，是广大人民群众喜闻乐见的语言形式。言形式。在在“俏皮歇后语俏皮歇后语”网页中显示了一些比较有意思的歇后语，但是在网页中网页中显示了一些比较有意思的歇后语，但是在网页中只显示了前文，当鼠标移到前文上时，才可以显示该歇后语的后文，只显示了前文，当鼠标移到前文上时，才可以显示该歇后语的后文，“俏俏皮歇后语皮歇后语”网页效果如图网

51、页效果如图1-5-1所示。所示。 图1-5-1 “俏皮歇后语”网页的显示效果 1.5.1 网页中的基本结构标记网页中的基本结构标记1网页基本结构标记（1） ：是：是HTML文档中最基本的标记，不可缺少。文档中最基本的标记，不可缺少。表示表示HTML文档的开始，文档的开始，表示表示HTML文档的结束。文档的结束。（2）：是网页标题标记，可以提高网页文档的可读：是网页标题标记，可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。（3）：是网页名称标记，是：是网页名称标记，是标记内不可缺少的标记，有标记内不可缺少的标记，有

52、标记就一定要有标记就一定要有标记。标记。（4）：是网页主题内容标记，其内包含了网页的全：是网页主题内容标记，其内包含了网页的全部内容，一般不可缺少。部内容，一般不可缺少。（5）：使用：使用标记中的标记中的BCOLOR属性，可以设置网页的背景颜色。使用的格式有以下两种：属性，可以设置网页的背景颜色。使用的格式有以下两种： 第一种格式中，第一种格式中，RR、GG、BB可以分别取值为可以分别取值为00FF的十六进制数。的十六进制数。RR用于表示用于表示颜色中的红色成分占多少，数值越大，颜色越深；颜色中的红色成分占多少，数值越大，颜色越深；GG用来表示颜色中的绿色成分用来表示颜色中的绿色成分占多少；占

53、多少；BB用来表示颜色中的蓝色成分占多少。红、绿、蓝三色按一定比例混合，用来表示颜色中的蓝色成分占多少。红、绿、蓝三色按一定比例混合，可以得到各种颜色。可以得到各种颜色。例如，例如，RR=FF，GG=FF，BB=00，表示为黄色。如果，表示为黄色。如果RRGGBB取值为取值为000000，则，则为黑色；为黑色；RRGGBB取值为取值为FFFFFF，则为白色；，则为白色；RRGGBB取值为取值为FF8888，则为浅红，则为浅红色。色。第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如，第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如，：用来设置网页的背景颜色为蓝色。：用来设

54、置网页的背景颜色为蓝色。：用来设置网页的背景颜色为红色。：用来设置网页的背景颜色为红色。：用来设置网页的背景颜色为白色。：用来设置网页的背景颜色为白色。（6）：是换行标记，表示以后的内容移到下一行，并且是单向标记，没有：是换行标记，表示以后的内容移到下一行，并且是单向标记，没有。（7）：是保留文本原来格式的标记。它的作用是将其中的文本：是保留文本原来格式的标记。它的作用是将其中的文本内容按照原来的格式显示，否则浏览器会自动取消文本中的空格。内容按照原来的格式显示，否则浏览器会自动取消文本中的空格。（8）：是粗体标记，可使其中的文字变为粗体。：是粗体标记，可使其中的文字变为粗体。（9）与与：是有

55、序列表标记，其内用：是有序列表标记，其内用标记引导文字，显示网页中的这些文字后，文字前会自动加上标记引导文字，显示网页中的这些文字后，文字前会自动加上“1”、“2”序号。序号。（10）与与：是无序列表标记，其内用：是无序列表标记，其内用标记引导文字，显示网页中的这些文字后，文字前会自动加上标记引导文字，显示网页中的这些文字后，文字前会自动加上“”。 2其他常用标记（1）：是正文的第三级标题标记。此外，还有第一、二、：是正文的第三级标题标记。此外，还有第一、二、三、四、五、六级标题标记，分别为三、四、五、六级标题标记，分别为、和和。级别越高，文字越小。级别越高，文字越小。（2）：是段落标记，其作

56、用是将其内的文字另起一段显示。：是段落标记，其作用是将其内的文字另起一段显示。段与段之间有一个空行。段与段之间有一个空行。1.5.2 网页中的文本标记文本属于网页中的基本元素，在前面的基本结构标记中已经介绍了部分文文本属于网页中的基本元素，在前面的基本结构标记中已经介绍了部分文本标记。下面介绍一些网页中不经常使用的文本标记，合理使用这些标记本标记。下面介绍一些网页中不经常使用的文本标记，合理使用这些标记可以使网页的显示效果更加出色。可以使网页的显示效果更加出色。1边框包围的文字可以通过可以通过标记定义文字的边框。输入下面的标记定义文字的边框。输入下面的THML代码，可代码，可以显示出如图以显示

57、出如图1-5-2所示增加边框的文字的显示效果。所示增加边框的文字的显示效果。 图像的大小和边框图像的大小和边框增加了边框的文字增加了边框的文字2文字的物理字符标记符样式物理字符标记符样式是指标记本身就说明了修饰文字的效果的标记符。常物理字符标记符样式是指标记本身就说明了修饰文字的效果的标记符。常用的物理字符标记符样式有黑体标记用的物理字符标记符样式有黑体标记、斜体标记、斜体标记及下划线标记及下划线标记等，常用物理字符标记样式如表等，常用物理字符标记样式如表1-5-1所示。所示。 图1-5-2 增加边框的文字的显示效果 2文字的物理字符标记符样式物理字符标记符样式是指标记本身就说明了修饰文字的效

58、果的标记符。常物理字符标记符样式是指标记本身就说明了修饰文字的效果的标记符。常用的物理字符标记符样式有黑体标记用的物理字符标记符样式有黑体标记、斜体标记、斜体标记及下划线标记及下划线标记等，常用物理字符标记样式如表等，常用物理字符标记样式如表1-5-1所示。所示。 3逻辑字符样式逻辑字符样式是指标记符本身表示了所修饰效果的逻辑含义的标记符例如，ADDRESS标记符本身的逻辑含义为“地址”，但并没有说明具体的物体效果。常用的逻辑字符样式如表1-5-2所示。 使用这些逻辑字符样式时，只要将需要设置格式的字符括在标记符之间即可。 现在，比较新颖的网站中经常会使用现在，比较新颖的网站中经常会使用Fla

59、sh动画，最主要的原因是动画，最主要的原因是Flash动画动画可以实现复杂的动画效果，而且保持很小的文件体积，这非常有利于在网可以实现复杂的动画效果，而且保持很小的文件体积，这非常有利于在网络上传输。络上传输。在在“动画放映室动画放映室”网页中插入了网页中插入了Flash动画，显示效果如图动画，显示效果如图1-6-1所示。在播所示。在播放动画的同时，网页中也在播放音乐。在网页中插入音乐后可以使网页的放动画的同时，网页中也在播放音乐。在网页中插入音乐后可以使网页的多媒体效果更加出色。多媒体效果更加出色。图图1-6-1 “动画放映室动画放映室”网页的显示效果网页的显示效果如果要想在浏览器中显示如果

60、要想在浏览器中显示Flash动画，前提是计算机中已经安装了播放动画，前提是计算机中已经安装了播放Flash的插件，如果没有安装该插件，可以在的插件，如果没有安装该插件，可以在http:/ 图1-6-1 “动画放映室”网页的显示效果 1.6.1 添加背景音乐和插入添加背景音乐和插入Flash动画的动画的HTML语言语言1添加背景音乐使用使用标记可以在网页中插入背景音乐。标记可以在网页中插入背景音乐。标记可标记可以放在以放在与与标记内的任何地方。引导音乐文件的属性是标记内的任何地方。引导音乐文件的属性是SRC，其格式如下：，其格式如下：2在网页中插入Flash动画使用使用标记可以在网页中插入标记可