网站建设教程之一周学会建网站

HTML标准教程目 录第1讲 Internet和HTML简介 1 第1课 Internet概述1 一、Internet工作原理1 二、Internet发展简史1 三、Internet提供的主要服务2 （一）电子函件2 （二）文件传输2 （三）电子公告2 （四）远程登录3 （五）网页浏览3 第2课 与HTML有关的一些术语 3 一、统一资源定位器URL 3 二、超文本标记语言HTML3 三、超文本传输协议HTTP3 第3课 编辑和运行HTML文档的环境 4 习题4第2讲 HTML语言的语法基础及规则 5 第1课 基本结构 5 一、标签5 二、标签6 （一）标签6 （二）标签6 三、标签 7 四、基本结构8 第2课 文本8 一、标签 8 二、标签（i=1，2，3，4，5，6）10 三、标签11 四、标签 12 五、标签13 六、字符格式标签 14 七、标签15 第3课 图像 15 一、SRC属性16 二、确定图像大小的属性16 三、ALIGN属性16 四、ALT属性17 五、确定图像过距的属性18 六、BORDER属性18 七、ISMAP属性 19 习题二19第3讲 列表、表格和文档的超链接21 第1课 HTML文档中的列表元素21 一、无序列表21 二、排序列表22 三、目录列表23 四、菜单列表24 五、描述性列表24 第2课 HTML中的表格元素27 一、标签 27 （一）border属性 27 （二）width和height属性 27 （三）align属性27 （四）cellspacing属性29 （五）cellpadding属性29 二、标签 30 （一）ALIGN属性31 （二）VALIGN属性 31 三、标签 33 （一）ALIGN属性33 （二）VALIGN属性33 四、和标签33 （一）rowspan属性33 （二）colspan属性33 （三）align属性35 （四）valign属性35 五、一些仅在IE中有效的标签和属性36 （一）和标签的bgcolor属性36 （二）和标签的backgroound属性36 （三）标签的frame属性36 （四）表格的行分组43 （五）表格的列分组44 （六）标签的rules属性47 第3课 文档的超链接52 一、不同文档之间的跳转52 二、跳转到标记位置53 三、链接地图55 习题三56第1讲 Internet和HTML简介 本讲概要： Internet概述 与HTML有关的一些术语 编辑和运行HTML文档的环境第1课 Internet概述 在这一课中，我们将介绍Internet（因特网，也称国际互联网）的工作原理、发展简史和它提供的主要服务，让读者对Internet有个大致的了解。一、Internet 工作原理 所谓计算机网络，就是将各自独立的电脑主机（节点）通过通信线路连接而成的信息技 术系统。Internet是一种全球范围的基于分组交换原理和TCP/IP协议的计算机网络。它将 信息进行分组（分割为许多小数据包）后以数据包为单位进行传输。Internet在进行信息传输时要完成的任务主要有两项：一是正确分割源文件和在目的地将同一源文件的数据包准确地重组起来；二是将数据包准确地送往目的地。 Internet基于TCP协议（传输控制协议）对数据进行分组和重组。TCP协议规定了分割 数据和重组数据所要遵循的规则和要进行的操作。在分割数据时，TCP协议将为数据包添 加一些附加信息，让计算机知道哪些数据包来自于同一个源文件，以及这些数据包在文件中的顺序，从而能在目的地将这些数据包重新组合起来。数据在Internet上的传输往往是远距离的，因此在传输过程中是通过路由器一站一站转接来实现的。路由器是一种特殊的计算机，它会检测数据包的目标地址（目标主机的地址），然后决定将该数据包送往何处。IP协议（网际协议）给Internet中的每一台计算机规定了一个地址IP地址。IP地址的标准格式（如 01）由四部分组成，前两部分规定了当前使用网络的管理机构，第三部分规定了当前使用的网络的地址，最后一部分则规定了当前使用的计算机的地址。二、Internet发展简史 Internet起源于20世纪60年代。当时，美国和苏联两个超级大国一直在进行冷战，两国储备的核武器足以摧毁整个地球。美国军方最关心的一件事是：如何能在通讯设备受到核武器袭击后保持联络?按照美国当时的情况，所有的命令和指示都是由通讯总指挥部做出的，它一旦被炮火摧毁，整个美国军队之间的通讯就陷入瘫痪状态，后果不堪设想。“分组交换”的思想就是在那时提出的。在分组交换的通讯网络中没有总指挥部，每一结点的地位都是相等的，它们都能发送和接收信息。这样，如果某个结点被敌军摧毁的话，剩余的结点仍可以完成通讯联络工作。1968年，基于分组交换原理的计算机网络ARPANET建成了，这就是最初的Internet。 之后，ARPANET的应用由军事领域延伸到教育领域，科学家们开始使用ARPANET交换信息，共享研究成果。1983年，TCP/IP协议的建立，使计算机通信有了统一的标准，这是计算机网络发展史上的一个里程碑，网络从此进入高速发展的时代。到了1984年，连在ARPANET上的主机数已超过1000台。1986年，美国国家科学基金会NSF（NationalScience Foundation）建立了自己的计算机网络，以满足科学研究的需要。 NSFNET很快超过了ANPANET而成为最大的计算机网络。1987年，连在NSFNET上的主机数已达到1000台，计算机网络开始在民用领域内大有作为。到了1989年，连在网络上的主机数达到10万台，1992年达到100万台。 随着计算机和通信事业的飞速发展，计算机网络由过去的军事和教育专用网络发展成为无所不包，无所不能的国际互联网络Internet。我们可以在Internet上查找资料、做广告、发布信息、通信、发传真甚至交谈和举行会议。Internet已经成为与我们的生活和工作密切相关的一部分了。 三、Internet提供的主要服务 Internet提供的服务主要有 E-mail、FTP、BBS、Telnet和WWW五种。 （一）电子函件 电子函件（E-mail）可以简单地理解成为通过Internet发送和接收的邮件，不过这种邮件必须是存储在计算机内的文档或程序。和普通邮件一样，发送电子函件也必须有邮件地址，它的格式为：接收用户名目标主机名，如。电子函件具有速度快，价格低廉等优点，是Internet上应用极为广泛的一项功能。我国使用Internet就是从1987年钱天白教授发出第一封电子函件“越过长城，通向世界”开始的。 （二）文件传输 FTP，（File Transport Protocol）即文件传输协议，用于登录远程主机调用所需要的文件，并将它传到自己的计算机上。FTP的使用格式为：FTP目标主机的IP地址（或域名），如FTP 。当使用FTP命令登录目标主机后，还要输入用户名和密码进行身份验证。非注册用户可以使用通用用户名Anonymous（匿名者）并用Guest或自己的E-mail地址作为密码。Internet上的大多数主机都提供文件共享服务，但是给予匿名用户的权限要低于注册用户。 （三）电子公告 BBS（Bulletin Board System）即电子公告板系统，用户可以在电子公告板上发布信息和进行讨论。这有些类似我们平常使用的留言板。当一个用户在公告板上发布某条新闻或询问某个问题后，其他进入该公告板系统的用户就会看到这些信息并做出回应。登录BBS需要特定的程序，常用的如Nettem，用户只需要在列表中输入想登录的BBS的IP地址（或域名）及相应的端口号即可。 （四）远程登录 计算机用户可以通过Telnet命令将本地计算机连至远程计算机上来使用远程计算机的程序和数据。Telnet的命令格式为：Telnet远程主机的IP地址（或域名），如Telnetbbs.SjtU.edu.on。当用户想中断与远程计算机的连接时，可以使用Quit或Close命令退出。 （五）网页浏览 网页浏览（WWW）虽然是创建最晚的一种服务方式，但它便捷的操作方式，丰富的信息资源使它迅速超过FTP、BBS、Telnet甚至E-mail而成为Internet应用最为广泛的一项功能。 WWW采用客户用/服务器的工作方式。程序和数据等信息存放在Web（网页）服务器中，用户则在Web客户机上通过Web 浏览器下载网页，进行浏览和交互操作（通常简称为测览）。最常用的两种Web 浏览器是Netscape公司的Netscape Navigator和微软公司的IE（Internet Explorer）。用户在使用这两种Web 浏览器浏览网页时，只需在地址栏中键入相应的网址即可。第2课 与HTML有关的一些术语 一、统一资源定位器URL URL（Uniform Resource Location）即统一资源定位器，它指出了文件在Internet中的位置。URL由协议名、Web服务器地址、文件在服务器中的路径（即目录）和文件名四部分构成。例如，http：//intl/cn/index.html。 其中http：/是协议名，表示文件的运行是遵循超文本传输协议的。是Web服务器的地址，/intl/cn是文件所在的目录，index.html则是文件名。 二、超文本标语语言HTML HTML（Hypertext Markup Language）即超文本标记语言，它是一种用于编写超文本文档的标记语言。自从1990年首次应用于网页编辑后，HTML迅速崛起成为网页编辑的主流语言。几乎所有的网页都是由HTML或以其他程序语言嵌套在HTML中编写的。HTML并不是一种程序语言而是一种结构语言，它具有平台无关性。无论用户使用何种操作系统（Windows、Dos、Unix等等），只要有相应的浏览器程序，就可以运行HTML文档。 三、超文本传输协议HTTP 超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和要进行的操作。HTTP协议的制定使测览器在运行超文本文档时有了统一的规则和标准，从而大大增强了网页的适用性。第3课 编辑和运行HTML文档的环境 我们一般采用纯文本文档编辑器，如Windows中的记事本或写字板，Dos中的文本编辑器Edit等来编辑HTML文档，并在保存时将其存为后缀名为.htm或.html的文档。不提倡使用Word、WPS等字处理软件来编辑HTML文档，因为这样会导致格式字符出错。 HTML文档是运行在Web浏览器上的，最常用的两种浏览器是Netscape公司的Netscape、Communicator和微软公司的IE。在使用这两种浏览器运行HTML文档时，只需在地址栏中键入文件的URL即可。如果只键入目标服务器的地址，浏览器将显示目标服务器上的Homepape（主页），即目标服务器在被用户访问时显示的缺省文档。习 题 一 一、填空题 1Internet是一种全球范围的基于原理和协议的计算机网络。它是将信息分组后以数据包为单位进行传输的。 2IP地址的标准格式由四部分组成，前两部分规定了当前使用网络的，第二部分规定了当前使用的的地址，最后一部分则规定了当前使用的的地址。 3FTP的非注册用户可以使用通用用户名登录并用或自己的E-mail地址作为密码。 4即统一资源定位器，由、Web服务器地址、文件在服务器中的路径和四部分构成。 5我们一般采用编辑器，如Windows中的或写字板、Dos中的Edit等来编辑HTML文档。 二、简答题 1简述Internet发展史。 2Internet提供的服务主要有哪五种?它们各自的功能是什么? 3常用的Web 浏览器有哪两种?它们分别是什么公司生产的? 本讲难点： （1）Internet的工作原理； （2）统一资源定位器URL； （3）编辑HTML文档的环境。 本讲难点： （1）Internet的工作原理； （2）统一资源定位器URL； （3）编辑HTML文档的环境。第2讲 HTML语言的语法基础及规则 本讲概要： 元素和标签的涵义 HTML文档的基本结构 HTML文档中的文本标签 HTML文档中的图像标签 HTML的主要语法是元素和标签。元素是符合DTD（文档类型定义）的文档组成部分，如title（文档标题）、IMG（图像）、table（表格）等等。元素名不区分大小写。HTML用标签来规定元素的属性和它在文档中的位置。标签分单独出现的标签和成对出现的标签两种。大多数标签是成对出现的，由首标签和尾标签组成。首标签的格式为，尾标签的格式为。成对标签用于规定元素所含的范围，如和标签用来界定标题元素的范围，也就是说，和之间的部分是该HTML文档的标题。单独标签的格式为，它的作用是在相应的位置插入元素。如标签表示在该标签所在位置插入一个换行符。本讲将介绍HTML文档的基本结构以及文本部分和图像部分使用的主要标签，掌握这些知识读者便能编辑一些简单的网页。第1课 基 本 结 构 了解HTML文档的基本结构前，我们先认识一下组成HTML文档的各种标签。 一、标签 标签是文档标识符，它是成对出现的，首标签和尾标签分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML）编写的。该标签不带任何属性。 事实上，我们现在常用的Web浏览器（Netscape和IE）都可以自动识别HTML文档，并不要求有标签，也不对该标签做任何操作。但是，为了提高文档的适用性，使我们编写的HTML文档能适应日新月异的Web浏览器，还是应该养成使用这个标签的习惯。 二、标签 HEAD是英文“头”的意思。习惯上我们把HTML文档分为文档头和文档主体两部分。文档主体部分就是我们在Web浏器窗口的用户区内看到的内容，而文档头部分用来规定该文档的标题（出现在Web浏览器窗口的标题栏中）和文档的一些属性。HTML文档的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在标签中使用的主要有标签和际签。 （一）标签 标签是成对出现的，用以规定HTML文档的标题。在和之间的内容将显示在Web 浏览器窗口的标题栏中。例： This is a test TITLE text. HTML is no real language such as C+or Pascal，it is just a system for describing documents.A WWW browser interpret the HTML- code and display it 在IE4.0中显示效果如图2-1所示。图2-1 IE4.0显示效果图 （二）标签 是一个单独标签，它用来规定文档的属性，说明该文档是可以按关键字索引的。下面我们通过一个简单的例子来说明该标签的作用。 这是一个“ISINDEX”标签的范例程序。 HTML is a special version of SGML（is used by big companies for exchange of data）focused on Hypertext. HTML code is written in ASCll.This is a advantages，becauseASCII can be read by about any platform，thus making the WWW usable for any platform as longas viewer programs，the browsers exist 在IE4.0中显示效果如图2-2所示。图2-2 ISINDEX测试文档 其中“可以搜索该索引。请键入要搜索的关键字：”是IE浏览器自动加上去的。浏览者在空白文本框条内键入要查询的关键字并按回车确认后，光标将移至该关键字或包含该关键字的词处。此时，与关键字相匹配的字符呈亮蓝色。 三、标签 标签是成对出现的。在之间的内容将显示在Web浏览器窗口的用户区内，它是HTML文档的主体部分。在标签中可以规定整个文档的一些基本属性： “BGCOLOR”。指定HTML文档的背景色。 “TEXT”。指定HTML文档中文字的颜色。 “LINK”。指定HTML文档中待连接超链接对象的颜色。 “ALINK”。指定HTML文档中连接中超链接对象的颜色。 “VLINK”。指定HTML文档中已连接超链接对象的颜色。 “BACKGROUND”。指定HTML文档的背景文件。 在指定对象的颜色时，可以使用该颜色的代码或直接使用该颜色对应的英文单词，例如，我们指定HTML文档的背景色为绿色，可以表示为：，也可以表示为。为了便于记忆，建议读者直接用相应的英文单词指定颜色。Body属性的参数值可以是表2-1所示16种颜色中的任何一种。表2-1 文档主体部分的可用颜色名 称颜 色名 称颜 色Black黑 色Red红 色Lime石灰色Maroon栗 色Gray灰 色Silver银白色Navy海军蓝Olive橄榄绿Purple紫 色Yellow黄 色Aqua浅蓝绿Blue蓝 色Green绿 色Fuchsia紫红色White白 色Teal暗蓝绿 四、基本结构 一个HTML文档的基本结构如下： 标志着HTML文档开始 文档标题 文档的主体部分 标志着HTML文档结束 与之间的部分是HTML文档的文档头部分，用以说明文档的标题和整个文档的一些公共属性。与之间的部分是HTML文档的主体部分。我们下面介绍的标签，如不加特别说明，均是嵌套在这一对标签中使用的。第2课 文 本 HTML文档中，文本也是由一些标签标注和控制的，本课就介绍这些相关的标签。 一、标签 “BR”即Break，是换行标签，它是单独出现的，作用相当于插入一个回车符。如果没有换行标签的话，Web浏览器将根据浏览器窗口的宽度尽可能长地显示文本，而不是按照HTML文档中的文本格式显示。例： This Is a test BR text.HTML is no real language such as C+or Pascal，it is just a system for describing documents.A WWW browser interpret theHTML-code and display it在IE4.0中显示效果如图2-3所示。图2-3 插入标签的文档如果删去所有的标签，在IE4.0中显示效果如图2-4所示。图2-4 删去标签的文档 二、标签（i=1，2，3，4，5，6） 标签是成对出现的，夹在和之间的文字是HTML文档中的标题。标题文字都用黑体显示，上级标题总比下面各级标题要更大些、粗些，具体有多大则因浏览器的不同而不同。标签共分六级，其中标签所括起的文字是第一级标题，最大最粗：标签所括起的文字是最后一级标题，最小最细。例： Hi标签测试文档。 这是第一级标题。 这是第二级标题。 这是第三级标题。 这是第四级标题。 这是第五级标题。 这是第六级标题。 在IE4.0中显示效果如图2-5。 图2-5 文章中标题显示效果图 从图2-5中我们可以看出。标签隐含有换行标签的作用，文本从下一行开始。标签的属性有COLOR、ALIGN，分别标识标题的颜色和位置。COLOR属性的参数值取值范围和标签的属性一样，可以是16种颜色（详见表2-1）中的任意一种。ALIGN属性的参数值为left、center或right之一，分别表示标题位于浏览器窗口的左侧、中间和右侧。 三、标签 P即paragraph（段落），标签用于划分段落，作用是换行并插入一个空白行，它可以单独使用，也可以成对使用。例： 这是一个段落标签浏试文档。 这表示一个段落结束。 下面是第二段。 还是第二段。 下面是第三段。 在IE4.0中显示效果如图2-6所示。图2-6 段落标签显示效果图 当和标签成对使用时，可以添加ALIGN属性，用以标识段落在浏览器中的位置。ALIGN属性的参数值为left、center和right之一，分别表示和标签所括起的段落位于浏览器窗口的左侧、中间和右侧。例： 这是一个段落位置测试文档。 段落位于左侧。 段落位于中间。 段落位于右侧。 在IE4.0中显示效果如图2-7所示。图27 段落标签的位置属性 四、标签 标签是单独使用的标签。HR即Horizontal Rule，它的作用是换行并在该行下画一条水平直线，直线的上下两端都会留出一定的空白。标签的属性有：SIZE、WIDTH和ALIGN。 （1）SIZE属性。用以规定水平线的高度，该属性的参数值必须是数字。 （2）WIDTH属性。用以规定水平线的宽度，该属性的参数值可以是数字（代表字符数）或百分数（占浏览器宽度的百分比）。缺省时，水平线占据整个浏览器窗口宽度。 （3）ALIGN属性。当水平线宽度小于浏览器窗口宽度时，使用该属性规定水平线在浏览器窗口的位置。ALIGN属性的参数值为left、center和right之一，分别表示该水平线位于浏览器窗口的左侧、中间和右侧。例： HR标签测试文档 水平线位于左侧。 水平线位于中间。 水平线位于右侧。 在IE4.0中显示效果如图2-8所示。图2-8 水平线标签显示效果图 五、标签 标签是预格式化标签，它是成对出现的。Web 浏览器按编辑文档时的字符位置将和标签之间的内容忠实地、一成不变地显示出来。例： PRE标签测试文档 1992 January on 15th，the first line mode browser was available by anonymous FTP. 在IE4.0中显示效果如图2-9所示。 一般说来，如果不使用预格式化标签，Web浏览器在显示HTML文档时只保留格式符而忽略原文档中的回车和空格，并根据需要对原文档的字体、大小进行调整。上例中如果删去和这对标签，则在IE4.0中显示效果如图2-10所示。图2-9 预格式化显示效果图图2-10 非预格式化显示效果图 六、字符格式标签 HTML文档的字符格式标签主要有（Bold）、（Italic）、和（Underlined）三种，它们都是成对出现的。运行HTML文档时，和之间的内容将显示为黑体文字，和之间的内容将显示为斜体文字，和之间的内容将显示为带下划线的文字。例： 这是格式化字符测试文档 这是黑体文字。 这是斜体文字。 这是带下划线的文字。 在IE4.0中显示效果如图2-11所示。图2-11 格式化字符显示效果图 七、标签 标签是地址标签，它是成对出现的，一般放在文档体的首部或尾部。和之间的内容一般是有关作者的信息，包括作者的姓名、身份、地址等等，在Web 浏览器窗口中用黑体或斜体显示。第3课 图 像 图像可以使Web页面更加生动美观、富有生机。Web浏览器可以显示JPEG和GIF图像。其中GIF图像最多只能使用256种颜色（即只能保存为8位颜色），而JPEG格式可保存为24位，对具有连续色调的图像有最佳效果。不过，GIF图像虽然在图像质量上不及JPEG图像，但其所占存储空间小，下载速度快。因此应视不同情况而决定应使用哪种格式的图像。对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像。应采用GIF格式，而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。 在HTML文档中插入图像是通过标签来实现的，该标签共有9个属性，除属性SRC是不可缺省的外，其他属性都可选的。 一、SRC属性 SRC即Source，该属性用于指出被引用的图像文件所在位置。在第1讲中，我们己经介绍过，超文本中每一文件在网络中的位置都由一个统一资源定位器（URL）唯一标识。SRC属性的参数值就是图像文件的URL，URL的表示方法有绝对表示法和相对表示法两种。 绝对表示法范例： 相对表示法范例： 注意：只有当图像文件和HTML文档在同一目录下时才能采用相对表示法来标识图像文件的位置。 二、确定图像大小的属性 标签用WIDTH和HEIGHT这两个属性来规定图像的大小。其中WIDTH属性用于确定图像的宽度，HEIGHT属性用于确定图像的高度。这两个属性的参数值都是数字，表示图像宽度（高度）所占的像素点数。缺省时，Web原始图像文件的大小和浏览器窗口的大小自动调整图像的显示尺寸。 三、ALIGN属性 ALGN属性的参数值为top、middle或bottom之一，分别表示与图像相邻的文字位于图像的左上方、左面中间和右下方。 下面我们通过一个简单的范例来说明上述几个属性的显示效果： An example of image Happy Birthday to you!（JPEG格式） A flickling and brilliant star!（GIF格式） 在IE4.0中显示效果如图2-12所示。图2-12 图像显示效果图 四、ALT属性 用户在浏览网页时，常常会为了节省时间或其他原因而选择不下载图片，加入ALT属性可以在原先显示图片的地方显示一些有关图像的信息。ALT属性的参数值就是网页编辑者希望在原来显示图像处出现的文字信息，一般是图像的名称或简要说明。 当用户选择关闭下载图像功能时，Web 浏览器会在原来显示图像处显示一幅缺省图像和ALT属性的参数值。如果没有ALT属性，浏览器就只显示一幅缺省图像，用户无法从中获得有关原图像的任何信息。现在，国内上网速度慢，费用偏高，许多用户都选择不下载图像以加快速度和节约费用。因此，最好养成添加ALT属性的习惯，让用户了解有关信息，给用户更大的选择空间。例： An example of default image HaPPy Birthday to you!（JPEG格式） A flickling and brilliant star!（GIF格式） 在IE4.0中显示效果如图2-13所示图2-13 关闭图像功能时显示效果图 五、确定图像边距的属性 标签用VSPACE和HSPACE这两个属性来确定图像与其相邻对象之间的空白大小。VSPACE属性用于指定图像与其垂直方向上相邻对象之间的距离，HSPACE用于指定图像与其水平方向上相邻对象之间的距离。这两个属性的参数值都是数字，表示空出距离的像素点数。 六、BORDER属性 Web 浏览器在调用图像时会根据浏览器窗口和原始图像大小的不同给图像加上不同宽度的边框。网页编辑者可以利用BORDER属性来指定图像过框的宽度或取消边框（BORDER=O）。BORDER属性的参数值也是数字，表示边框宽度所占的像素点数。例： An example of image Happy Birthday to you!（JPEG格式） A flickling and brilliant star!（GIF格式） 在IE4.0中显示效果如图2-14所示。图2-14 图像边框显示效果图 七、ISMAP属性 这一属性与文档的超链接有关，我们将它放到下一讲“列表、表格和文档的超链接”中讲解。习 题 二 一、填空题 1标签是HTML中的主要语法，分标签和标签两种。大多数标签是出现的，由标签和标签组成。 2我们把HTML文档分为和两部分。部分就是我们在Web浏览器窗口的用户区内看到的内容，而部分用来规定该文档的标题（出现在Web 浏览器窗口的标题栏中）和文档的