知博网 zhiblog.com html 教程专题 HTMLHTMLHTMLHTML标准标准标准标准教程教程教程教程 目 录 第 1 讲 Internet 和 HTML 简介 ………………………………………………………………… 1 第1课 Internet 概述…………………………………………………………………………1 一、Internet 工作原理………………………………………………………………………1 二、Internet 发展简史………………………………………………………………………1 三、Internet 提供的主要服务………………………………………………………………2 (一)电子函件……………………………………………………………………………2 (二)文件传输……………………………………………………………………………2 (三)电子公告……………………………………………………………………………2 (四)远程登录……………………………………………………………………………3 (五)网页浏览……………………………………………………………………………3 第2课 与HTML 有关的一些术语 ……………………………………………………………3 一、统一资源定位器——URL………………………………………………………………3 二、超文本标记语言——HTML………………………………………………………………3 三、超文本传输协议——HTTP………………………………………………………………3 第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 知博网 zhiblog.com html 教程专题 1 1 五、确定图像过距的属性……………………………………………………………………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 知博网 zhiblog.com html 教程专题 2 2 第1讲 Internet 和HTML简介 本讲概要: ◆ Internet 概述 ◆ 与HTML有关的一些术语 ◆ 编辑和运行 HTML文档的环境 第1课 Internet 概述 在这一课中,我们将介绍 Internet(因特网,也称国际互联网)的工作原理、发展简史 和它提供的主要服务,让读者对 Internet 有个大致的了解。 一、Internet 工作原理 所谓计算机网络,就是将各自独立的电脑主机(节点)通过通信线路连接而成的信息技 术系统。Internet 是一种全球范围的基于分组交换原理和 TCP/IP 协议的计算机网络。它将 信息进行分组(分割为许多小数据包)后以数据包为单位进行传输。Internet 在进行信息传 输时要完成的任务主要有两项:一是正确分割源文件和在目的地将同一源文件的数据包准确 地重组起来;二是将数据包准确地送往目的地。 Internet 基于TCP协议(传输控制协议)对数据进行分组和重组。TCP协议规定了分割 数据和重组数据所要遵循的规则和要进行的操作。在分割数据时, TCP协议将为数据包添 加一些附加信息,让计算机知道哪些数据包来自于同一个源文件,以及这些数据包在文件中 的顺序,从而能在目的地将这些数据包重新组合起来。数据在 Internet 上的传输往往是远距 离的,因此在传输过程中是通过路由器一站一站转接来实现的。路由器是一种特殊的计算机, 它会检测数据包的目标地址(目标主机的地址),然后决定将该数据包送往何处。IP协议(网 际协议)给Internet 中的每一台计算机规定了一个地址——IP地址。IP地址的标准格式(如 202.103.144.101)由四部分组成,前两部分规定了当前使用网络的管理机构,第三部分规定 了当前使用的网络的地址,最后一部分则规定了当前使用的计算机的地址。 二、Internet 发展简史 Internet 起源于 20世纪60年代。当时,美国和苏联两个超级大国一直在进行冷战,两 国储备的核武器足以摧毁整个地球。美国军方最关心的一件事是:如何能在通讯设备受到核 武器袭击后保持联络?按照美国当时的情况,所有的命令和指示都是由通讯总指挥部做出的, 它一旦被炮火摧毁,整个美国军队之间的通讯就陷入瘫痪状态,后果不堪设想。“分组交换” 的思想就是在那时提出的。在分组交换的通讯网络中没有总指挥部,每一结点的地位都是相 等的,它们都能发送和接收信息。这样,如果某个结点被敌军摧毁的话,剩余的结点仍可以 知博网 zhiblog.com html 教程专题 3 3 完成通讯联络工作。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 发送和接收的邮件,不过这种邮 件必须是存储在计算机内的文档或程序。和普通邮件一样,发送电子函件也必须有邮件地址, 它的格式为:接收用户名@目标主机名,如wuyuting@hotmail.com。电子函件具有速度快, 价格低廉等优点,是Internet 上应用极为广泛的一项功能。我国使用 Internet 就是从 1987 年钱天白教授发出第一封电子函件“越过长城,通向世界”开始的。 (二)文件传输 FTP,(File Transport Protocol)即文件传输协议,用于登录远程主机调用所需要的文 件,并将它传到自己的计算机上。FTP的使用格式为:FTP目标主机的 IP地址(或域名),如 FTP www.books.lib.com。当使用 FTP命令登录目标主机后,还要输入用户名和密码进行身份 验证。非注册用户可以使用通用用户名 Anonymous(匿名者)并用Guest 或自己的 E-mail 地 址作为密码。Internet 上的大多数主机都提供文件共享服务,但是给予匿名用户的权限要低 于注册用户。 (三)电子公告 BBS(Bulletin Board System)即电子公告板系统,用户可以在电子公告板上发布信息 和进行讨论。这有些类似我们平常使用的留言板。当一个用户在公告板上发布某条新闻或询 问某个问题后,其他进入该公告板系统的用户就会看到这些信息并做出回应。登录 BBS需要 特定的程序,常用的如 Nettem,用户只需要在列表中输入想登录的 BBS的IP地址(或域名) 及相应的端口号即可。 (四)远程登录 知博网 zhiblog.com html 教程专题 4 4 计算机用户可以通过 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://www.microsoft.com/intl/cn/index.html。 其中http://是协议名,表示文件的运行是遵循超文本传输协议的。www.microsoft.com 是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 的文档。不提倡使 知博网 zhiblog.com html 教程专题 5 5 用Word、WPS等字处理软件来编辑 HTML文档,因为这样会导致格式字符出错。 HTML文档是运行在 Web 浏览器上的,最常用的两种浏览器是 Netscape 公司的 Netscape、 Communicator 和微软公司的 IE。在使用这两种浏览器运行 HTML文档时,只需在地址栏中键 入文件的 URL即可。如果只键入目标服务器的地址,浏览器将显示目标服务器上的 Homepape (主页),即目标服务器在被用户访问时显示的缺省文档。 习 题 一 一、填空题 1.Internet 是一种全球范围的基于___原理和___协议的计算机网络。它是将信 息分组后以数据包为单位进行传输的。 2.IP地址的标准格式由四部分组成,前两部分规定了当前使用网络的___,第二部 分规定了当前使用的___的地址,最后一部分则规定了当前使用的___的地址。 3.FTP 的非注册用户可以使用通用用户名___登录并用___或自己的 E-mail 地址 作为密码。 4.___即统一资源定位器,由___、Web 服务器地址、文件在服务器中的路径和_ __四部分构成。 5.我们一般采用___编辑器,如 Windows 中的___或写字板、Dos 中的Edit 等来 编辑HTML 文档。 二、简答题 1.简述 Internet 发展史。 2.Internet 提供的服务主要有哪五种?它们各自的功能是什么? 3.常用的 Web 浏览器有哪两种?它们分别是什么公司生产的? 本讲难点: (1)Internet 的工作原理; (2)统一资源定位器 URL; (3)编辑 HTML 文档的环境。 第2讲 HTML 语言的语法基础及规则 本讲概要: ◆ 元素和标签的涵义 ◆ HTML文档的基本结构 ◆ HTML文档中的文本标签 ◆ HTML文档中的图像标签 HTML的主要语法是元素和标签。元素是符合 DTD(文档类型定义)的文档组成部分,如 title(文档标题)、IMG(图像)、table(表格)等等。元素名不区分大小写。HTML 用标签 来规定元素的属性和它在文档中的位置。标签分单独出现的标签和成对出现的标签两种。大 本讲难点: (1)Internet 的工作原理; (2)统一资源定位器 URL; (3)编辑 HTML 文档的环境。 知博网 zhiblog.com html 教程专题 6 6 多数标签是成对出现的,由首标签和尾标签组成。首标签的格式为<元素名>,尾标签的格式 为。成对标签用于规定元素所含的范围,如标签用来界定标题 元素的范围,也就是说,和</tide>之间的部分是该 HTML 文档的标题。单独标签的格 式为<元素名>,它的作用是在相应的位置插入元素。如<BR>标签表示在该标签所在位置插入 一个换行符。本讲将介绍 HTML文档的基本结构以及文本部分和图像部分使用的主要标签,掌 握这些知识读者便能编辑一些简单的网页。 第1课 基 本 结 构 了解HTML 文档的基本结构前,我们先认识一下组成 HTML文档的各种标签。 一、<HTML>标签 <HTML>标签是文档标识符,它是成对出现的,首标签<HTML>和尾标签</HTML>分别位于文 档的最前面和最后面,明确地表示文档是以超文本标识语言(HTML)编写的。该标签不带任 何属性。 事实上,我们现在常用的 Web 浏览器(Netscape 和IE)都可以自动识别 HTML 文档,并 不要求有<HTML>标签,也不对该标签做任何操作。但是,为了提高文档的适用性,使我们编 写的HTML 文档能适应日新月异的 Web 浏览器,还是应该养成使用这个标签的习惯。 二、<HEAD>标签 HEAD是英文“头”的意思。习惯上我们把 HTML文档分为文档头和文档主体两部分。文 档主体部分就是我们在 Web 浏器窗口的用户区内看到的内容,而文档头部分用来规定该文档 的标题(出现在 Web 浏览器窗口的标题栏中)和文档的一些属性。HTML文档的标签是可以嵌 套的,即在一对标签中可以嵌入另一对子标签,用来规定母标签所含范围的属性或其中某一 部分内容,嵌套在<HEAD>标签中使用的主要有<title>标签和<ISINDEX>际签。 (一)<title>标签 <title>标签是成对出现的,用以规定 HTML文档的标题。在<title>和之间的内 容将显示在 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 所示。 知博网 zhiblog.com html 教程专题 7 7 图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浏览器自动加上去的。浏览者 在空白文本框条内键入要查询的关键字并按回车确认后,光标将移至该关键字或包含该关键 字的词处。此时,与关键字相匹配的字符呈亮蓝色。 知博网 zhiblog.com html 教程专题 8 8 三、标签 标签是成对出现的。在之间的内容将显示在 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,是换行标签,它是单独出现的,作用相当于插入一个回车符。如果没 知博网 zhiblog.com html 教程专题 9 9 有换行标签的话,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.
AWWW browser interpret the
HTML-code and display it. 在IE4.0 中显示效果如图 2-3 所示。 图2-3 插入
标签的文档 如果删去所有的
标签,在 IE4.0 中显示效果如图 2-4 所示。 图2-4 删去
标签的文档 二、标签(i=1,2,3,4,5,6) 标签是成对出现的,夹在之间的文字是 HTML文档中的标题。标题文字都 用黑体显示,上级标题总比下面各级标题要更大些、粗些,具体有多大则因浏览器的不同而 不同。标签共分六级,其中

标签所括起的文字是第一级标题,最大最粗:

标签所 知博网 zhiblog.com html 教程专题 10 10 括起的文字是最后一级标题,最小最细。例: Hi标签测试文档。

这是第一级标题。

这是第二级标题。

这是第三级标题。

这是第四级标题。

这是第五级标题。
这是第六级标题。
在IE4.0 中显示效果如图 2-5。 图2-5 文章中标题显示效果图 从图2-5 中我们可以看出。标签隐含有换行标签的作用,文本从下一行开始。标 签的属性有 COLOR、ALIGN,分别标识标题的颜色和位置。COLOR 属性的参数值取值范围和 标签的属性一样,可以是 16种颜色(详见表 2-1)中的任意一种。ALIGN 属性的参数 值为left、center 或right 之一,分别表示标题位于浏览器窗口的左侧、中间和右侧。 三、

标签 P即paragraph(段落),

标签用于划分段落,作用是换行并插入一个空白行,它可以 单独使用,也可以成对使用。例: 这是一个段落标签浏试文档。 这表示一个段落结束。

下面是第二段。 还是第二段。

下面是第三段。 知博网 zhiblog.com html 教程专题 11 11 在IE4.0 中显示效果如图 2-6 所示。 图2-6 段落标签显示效果图 当

标签成对使用时,可以添加 ALIGN 属性,用以标识段落在浏览器中的位置。 ALIGN 属性的参数值为 left、center 和right 之一,分别表示

标签所括起的段落 位于浏览器窗口的左侧、中间和右侧。例: 这是一个段落位置测试文档。

段落位于左侧。

段落位于中间。

段落位于右侧。

在IE4.0 中显示效果如图 2-7 所示。 图2-7 段落标签的位置属性 四、
标签
标签是单独使用的标签。HR即Horizontal Rule,它的作用是换行并在该行下画一 条水平直线,直线的上下两端都会留出一定的空白。
标签的属性有:SIZE、WIDTH 和ALIGN。 知博网 zhiblog.com html 教程专题 12 12 (1)SIZE 属性。用以规定水平线的高度,该属性的参数值必须是数字。 (2)WIDTH 属性。用以规定水平线的宽度,该属性的参数值可以是数字(代表字符数) 或百分数(占浏览器宽度的百分比)。缺省时,水平线占据整个浏览器窗口宽度。 (3)ALIGN 属性。当水平线宽度小于浏览器窗口宽度时,使用该属性规定水平线在浏览 器窗口的位置。ALIGN 属性的参数值为 left、center 和right 之一,分别表示该水平线位于 浏览器窗口的左侧、中间和右侧。例: HR 标签测试文档 水平线位于左侧。
水平线位于中间。
水平线位于右侧。
在IE4.0 中显示效果如图 2-8 所示。 图2-8 水平线标签显示效果图 五、
标签  
标签是预格式化标签,它是成对出现的。Web 浏览器按编辑文档时的字符位置将  
标签之间的内容忠实地、一成不变地显示出来。例: PRE 标签测试文档
  1992  January  知博网 zhiblog.com html 教程专题  13 13  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文档时,之间的内容将显示为黑体文字,之间的内容将显示为斜体文字,之间的内容将显示为带下划线的文字。 例: 这是格式化字符测试文档

这是黑体文字。
知博网 zhiblog.com html 教程专题 14 14

这是斜体文字。

这是带下划线的文字。 在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文档在同一目录下时才能采用相对表示法来标识图像文件 知博网 zhiblog.com html 教程专题 15 15 的位置。 二、确定图像大小的属性 标签用 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 图像显示效果图 知博网 zhiblog.com html 教程专题 16 16 四、ALT属性 用户在浏览网页时,常常会为了节省时间或其他原因而选择不下载图片,加入 ALT属性 可以在原先显示图片的地方显示一些有关图像的信息。ALT属性的参数值就是网页编辑者希 望在原来显示图像处出现的文字信息,一般是图像的名称或简要说明。 当用户选择关闭下载图像功能时,Web 浏览器会在原来显示图像处显示一幅缺省图像和 ALT属性的参数值。如果没有 ALT属性,浏览器就只显示一幅缺省图像,用户无法从中获得 有关原图像的任何信息。现在,国内上网速度慢,费用偏高,许多用户都选择不下载图像以 加快速度和节约费用。因此,最好养成添加 ALT属性的习惯,让用户了解有关 信息,给用户更大的选择空间。例: An example of default image
A PICTUREOF CAKE HaPPy Birthday to you!(JPEG格式)


A flickling and brilliant star!(GIF格式) A picture of star


在IE4.0 中显示效果如图 2-13 所示 图2-13 关闭图像功能时显示效果图 五、确定图像边距的属性 知博网 zhiblog.com html 教程专题 17 17 标签用 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 属性 这一属性与文档的超链接有关,我们将它放到下一讲“列表、表格和文档的超链接”中 讲解。 知博网 zhiblog.com html 教程专题 18 18 习 题 二 一、填空题 1.标签是 HTML中的主要语法,分___标签和___标签两种。大多数标签是___ 出现的,由___标签和___标签组成。 2.我们把 HTML文档分为___和___两部分。___部分就是我们在 Web 浏览器窗 口的用户区内看到的内容,而___部分用来规定该文档的标题(出现在 Web 浏览器窗口的 标题栏中)和文档的一些属性。 3.标签中的 BGCOLOR 属性用于指定 HTML 文档的___,TEXT属性用于指定 HTML 文档中___的颜色,___属性用于指定 HTML文档的背景文件。 4.当

标签___使用时,可以添加 ALIGN 属性,用以标识段落在浏览器中的 ___。ALIGN 属性的参数值为___、___和___之一,分别表示

标签所括起 的段落位于浏览器窗口的左侧、中间和右侧。 5.运行 HTML文档时,之间的内容将显示为___文字,之间的内 容将显示为文字,之间的内容将显示为___文字。 6.图像标签中的 ALIGN 属性的参数值为 top、middle 或bottom 之一,分别表示与图像 相邻的文字位于图像的______、______和_____。 二、简答题 1.简述一个 HTML文档的基本结构。 2.用HTML 语言编写符合以下要求的文档:标题为“练习文档”,在浏览器窗口用户区内 显示“这是课后习题 2的答案”。 3.常用的图像文件格式有哪两种?它们各自的优点和缺点是什么? 4.用HTML语言编写符合以下要求的文档:标题为“An example of image”,在浏览器 窗口中显示“apple.gif”图像。图像的宽度为 200 个像素点,高度为 150 个像素点,边框宽 度为10个像素点(“apple.gif”图像位于 C盘的image 目录下)。 第3讲 列表、表格和文档的超链接 本讲概要: ◆ HTML文档中的列表元素 ◆ HTML文档中的表格元素 ◆ 文档的超链接 第1课 HTML 文档中的列表元素 HTML 文档中使用的列表主要有无序列表、排序列表、目录列表、菜单列表和描述性列表。 在本课中我们将一一介绍这五种列表。 本讲难点: (1)标签的作用; (2)字符格式标签的运用; (3)文件地址的绝对表示法和相对表示法; (4)图像标签的 ALIGN 属性; (5)图像标签的 ALT属性。 知博网 zhiblog.com html 教程专题 19 19 一、无序列表 在HTML文档中插入无序列表是通过
    标签和
  • 标签来实现的。“UL”即Unordered List,是无序列表标签。
      标签是成对标签,首标签
        和尾标签
      之间的内容就是无 序列表的内容。无序列表中的每一列表项开头必须用
    • 标签进行标识。“LI”即 ListCd ItCth,是项目标签。
    • t&签是单独出现标签,标签后的文字为列表项的内容,直至碰到 下一个项目标签或列表的尾标签。Web 浏览器在显示无序列表时,会在每一列表项的开头加 上无序列表的标记符号。例如: 这是无序列表的范例程序
      以下是某杂货店的目录清单:
      • 菜油、盐、味精等调味品
      • 冷饮和汽水
      • 针、线等小物品
      • 热水瓶、保温杯、瓷碗等日用品


      在IE4.0 中显示效果如图 3-1 所示。 图3-1 无序列表显示效果图 从图3-1 中我们可以看出,
    • 标签隐含有
      标签的作用,Web 浏览器在显示列表项 时会自动换行。 二、排序列表 在 HTML文档中插入排序列表是通过
      1. 标签来实现的。“LI”即 Ordered List, 知博网 zhiblog.com html 教程专题 20 20 是排序列表标签。
          标签是成对出现的,首标签
            和尾标签
              之间的内容就是排序列 表的内容。排序列表中的每一列表项也必须用
            1. 标签进行标识。Web 浏览器在显示排序列 表时,会自动对列表进行排序,并在每一列表项开头加上以阿拉伯数字形式表示的序号。我 们可以在
                标签中添加 start 属性来指定序列的起始号。缺省时,序列的起始号为 1。例 如: 排序列表的范例程序

                1. 这是列表的第 1项。
                2. 这是列表的第 2项。
                3. 这是列表的第 3项。
                4. 这是列表的第 4项。

                1. 这是列表的第 9项。
                2. 这是列表的第 10项。
                3. 这是列表的第 11项。
                4. 这是列表的第 12项。
                在IE4.0 中显示效果如图 3-2 所示。 图3-2 排序列表显示效果图 三、目录列表 HTML使用
              1. 标签来定义目录列表。“DIR”即 Directory,是目录列表标签。 标签是成对出现的,首标签和尾标签之间的内容就是目录列表的内容。目 录列表的列表项开头也必须用项目标签
              2. 标识。一般说来,目录列表项长度较短,典型的 目录列表每项长度不超过 20个字符。例如: 知博网 zhiblog.com html 教程专题 21 21 目录列表的范例程序

              3. A-F
              4. G-K
              5. L-P
              6. Q-Z
              7. 在IE4.0 对中显示效果如图 3-3 所示。 图3-3 目录列表显示效果图 从图3-3 中我们可以看出,目录列表的显示效果和无序列表相同。 四、菜单列表 HTML使用
              8. 标签来定义菜单列表。菜单列表标签是成对标签,首标签 和尾标签之间的内容就是菜单列表的内容。菜单列表每一列表项开头也必须用 项目标签
              9. 进行标识。一般来说,菜单列表每项的长度不超过一行。 菜单列表的显示效果与无序列表基本相同,只不过在排列上更为紧凑,参见图 3-1。 五、描述性列表 HTML使用
                标签来定义描述性列表。“DL”即Definition List,是描述 性列表标签。
                标签是成对标签,首标签
                和尾标签
                之间的内容就是描述性列表的 内容,由一系列用描述项标签
                或解释项标签
                标识的列表项组成。
                标签都 是单独标签,位于列表项的开头,分别表示该项是描述项和解释项。和
              10. 标签一样,
                标签也隐含有
                标签的作用,Web 浏览器在显示时会自动换行。
                标签通常是成对出现的,即一个描述项对应于一个解释项。一个描述项也可 知博网 zhiblog.com html 教程专题 22 22 以对应于几个解释项,但最好不要出现几个描述项对应于同一个解释项的情况。 在显示时,解释项的内容会自动缩进一定的距离,使列表的结构更加清晰。例如: 描述性列表范例程序
                这是一个描述性列表:

                日用杂品
                例如热水瓶、脸盆等等
                食品种类
                鱼、肉和鸡
                青菜、萝卜和豆腐
                桔子、苹果和梨

                在IE4.0 中显示效果如图 3-4 所示。 图3-4 描述性列表显示效果图 HTML中的列表是可以嵌套的,也就是说,一个列表的列表项可以是另一个相同或不同类 型的列表。例如: 列表嵌套的范例程序


                1. 一些常见的水果:
                    知博网 zhiblog.com html 教程专题 23 23
                  • 苹果和桔子
                  • 香蕉和草萄
                  • 西瓜和桃子

                2. 这是列表的第二项
                3. 一些常见的肉类
                  • 猪肉和牛肉
                  • 羊肉和兔肉

                在IE4.0 中显示效果如图 3-5 所示。 图3-5 嵌套列表显示效果图 第2课 HTML 中的表格元素 表格是 HTML文档中一个很重要的元素。在这一课中,我们将介绍一下在表格中使用 的一些主要标签。 一、
标签
标签是表格的标识符,用以界定表格的范围。
标签是成对出现标签,首 标签
和尾标签
之间的内容就是表格的内容。标签的属性主要有 border、width、height、align、cellapacing 和cellpadding,它们都是可选的。 (一)border 属性 border 属性的参数值是数字,表示表格边框宽度所占的像素点数; border 属性也可以 知博网 zhiblog.com html 教程专题 24 24 不带参数值使用,仅表示该表格是有边框的。例如,
表示该表格的边框宽 度为10个像素点。 (二) width 和 height 属性 width 和height 属性的作用是指定表格的大小。其中 width 属性用以规定表格的宽度, height 属性用以规定表格的高度。这两个属性的参数值可以是数字或百分数,其中数字表示 表格宽度(高度)所占的像素点数,百分数表示表格的宽度(高度)占浏览器窗口宽度(高 度)的百分比。例:
表示该表格的宽度为 200 个像素点,高 度为浏览器窗口高度的 50%。 (三)align 属性 align 属性的参数值为 left、center 和right 之一,分别表示表格位于其相邻文字的左 侧、表格水平居中和表格位于与其相邻的文字右侧。例如: An example of table border=3 Width=60% align=left> NameManagement85
Number DepartmentCourseScore
1John ComputerProgramming87
2Betty Marketing
This is an example of ALIGN=left
Please pay attention to the relative position

知博网 zhiblog.com html 教程专题 25 25 Betty
NumberName DepartmentCourse Score
1John ComputerProgramming87
2BettyManagement Marketing85
This is an example of ALIGN=center
Please pay attention to the relative position

NumberName DepartmentCourse Score
1John ComputerProgramming87
2 BettyManagement Markting85
This is an example of ALIGN=risht
Please pay attention to the relative position
在IE4.0 中显示效果如图 3-6 所示。 图3-6 表格显示效果图 知博网 zhiblog.com html 教程专题 26 26 (四)cellspacing 属性 cellspacing 属性用以指定表格各单元格之间的空隙。该属性的参数值为数字,表示单 元格间隙所占的像素点数。 (五)cellpadding 属性 cellpadding 属性用于指定单元格内容与单元格边界之间空白距离的大小、该属性的参 数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占的像素点数以及单元格 内容与左右边界之间空白距离的宽度所占的像素点数。例如: An example of table
未加入单元格属性规定前:

加入单元格属性规定后:
Number Name DepartmentCourseScorse
1John ComputerProgramming87
2 BettyManagement Marketing85
border=3 cellspacing=10 cellpadding=10> 知博网 zhiblog.com html 教程专题 27 27
Number Name DepartmentCourseScors
1John ComputerProgramming>87
2BettyManagement Marketing 85
在IE4.0 中显示效果如图 3-7 所示。 和普通表格一样,HTML 中的表格也是由表格标题、表头元素和具体数据元素组成的。HTML 是通过在表格标签中嵌套使用有关标签来定义这些元素的。嵌套在表格标签中使用的标签主 要有、、和。 二、标签 表格标题标签是成对出现标签,首标签和尾标签之间的 内容就是表格的标题。有两个属性:ALION 和VALIGN,它们都是可选的。 图3-7 表格显示效果图 (一)ALIGN 属性 ALGN属性的参数值为 left、center 和right 之一,分别表示表格标题与表格的左沿对 齐、位于表格中间和与表格的右沿对齐。缺省时,表格标题位于表格中间。 (二)VALIGN 属性 VALIGN 属性的参数值为 top 和bottom 之一,分别表示表格标题位于表格的上方和下方。 缺省时,表格标题位于表格的上方。例如: 表格标题标题测试文档
Students’ Score
NumberName DepartmentCourseScore 知博网 zhiblog.com html 教程专题 28 28 1John ComputerProgramming87 2BettyManagement Marketing85

Studeots’Score
Number Name DepartmentCourseScore
1John ComputerProgramming87
2BettyManagement Marketing85

在IE4.0 中显示效果如图 3-8 所示。 图3-8 表格标题显示效果图 三、标签 HTML中的表格是按行组织的。一个表格由几行组成,就要有几个行标签与之相对应。行 知博网 zhiblog.com html 教程专题 29 29 标签是成对标签,它必须与或标签配套使用,后者在使用时嵌套在行标签的首 标签和尾标签之间,用于规定该行中各单元格的内容。标签出有两个属性: ALIGN 和VALIGN,它们都是可选的。 (一)ALGN 属性 ALIGN 属性的参数值为 left、center 和right 之一,分别表示该行中各单元格内容是左 对齐、水平居中和右对齐的。ALIGN 属性的缺省值为 left。 (二)VALGN 属性 VALGN 属性的参数值为 top、middle 和bottom 之一,分别表示该行中各单元格内容是紧 靠上沿、垂直居中和紧靠下沿的。VALIGN 属性的缺省值为 middle。 四、和标签 和标签都是用于规定单元格内容的。表头标签用于规定表头元素的内容, 表头元素一般位于每列的首行,用以说明该列的具体数据是关于哪个对象的。标签是成 对出现标签,首标签和尾标签之间的内容就是位于该单元格中的表头元素内容。数 据标签也是成对出现标签,首标签和尾标签之间的内容就是该单元格中的具体 数据。除了表头元素是以黑体显示这一点外,表头元素和具体数据元素几乎没有什么区别。 由于都是用于规定单元内容的,和标签的所有属性及相应的属性功能是完全一样的。 和标签的属性有 rowspan、colspan、align 和valign,它们都是可选的。 (一)rowspan 属性 rowspan 属性的参数值是数字,表示该单元格所跨的行数。该属性的缺省值为 1。 (二)colspan 属性 colspan 属性的参数值敢是数字,表示该单元格所跨的列数。Colspan 属性的缺省值也 是1。例如: 单元格属性范例程序

Forml:Students’Score

知博网 zhiblog.com html 教程专题 30 30
Students’InformationAbout Course
NumberName DepartmentCourseScore
lJohn ComputerProgramming 8l
2 Betty 85
3Billy MathS81
480

在IE4.0 中显示效果如图 3-9 所示。 图3-9 单元格属性显示效果图 (三)align 属性 align 属性用于规定单元格内容在水平方向上的位置。属性的参数值为 left、center 和 right 之一,分别表示该单元格内容是左对齐、水平居中和右对齐的。缺省时,单元格内容 是左对齐的。 (四)valign 属性 知博网 zhiblog.com html 教程专题 31 31 vaiign 属性用于规定单元格内容在垂直方向上的位置。属性的参数值为 top、 middle 和bttom 之一,分别表示该单元格内容是紧靠上沿、垂直居中和紧靠下沿的。缺省时,单元 格内容是垂直屠中的。例如: 单元格位置属性范例程序


StudentS’Score
Students’InformationAbout Course
Number Name Departmen CourseScore
1 Marthrew ALIGN=right>Computer Programming87
2 Betty ManagementMarketing 85
3 Accounting


在IE4.0 中显示效果如图 3-10 所示。 知博网 zhiblog.com html 教程专题 32 32 图3-10 位置属性显示效果图 五、一些仅在 IE中有效的标签和属性 在前面我们已经介绍过,微软公司的 IE和Netscape 公司的 Netscape Navigator 是最常 用的两种浏览器。而在这两个公司的测览器市场份额大战中,微软公司采取了捆绑式销售策 略,在 Windows 操作系统的鼎力支持下大获全胜,使用 IE 浏览器的用户越来越多。因此, 虽然下面这些标签和属性仅在 IE浏览器中有效,我们仍决定将它们介绍给广大读者。 (一)和标签的 bgcolor 属性 bgcolor 属性用来规定单元格的背景色彩。在指定单元格的背景颜色时,可以使用颜色 的代码或直接使用该颜色对应的英文单词。单元格背景色的参数值范围与 HTML文档主体部分 背景色的取值范围一样,详见表 2-1。 (二)和标签的 background 属性 background 属性用于指定该单元格的背景文档所在位置。该属性的参数值是背景文档的 URL。 (三)标签的 frame 属性 frame 属性用于规定表格边框(包括外沿框线和内部分格线)的显示样式。该属性的参 数值可以是下列 8项之一: (1)box。浏览器将显示整个表格边框。 (2)Void。浏览器将不显示表格边框。例如: 表格边框显示样式


浏览器显示整个表格边框: 知博网 zhiblog.com html 教程专题 33 33

Studens Score
Number Name DepartmentCourseScore
1John ComputerProgramming87
2BettyManagement Markting85
3 BillyFinancing Accounting81


浏览器不显示表格边框:

85
Students’Score
NumberName DepartmentCourseScore
1John ComputerProgramming87
2BettyManagement Marketing
3BillyFinancing Accounting8l
在IE4.0 中显示效果如图 3-11 所示。 知博网 zhiblog.com html 教程专题 34 34 图3-11 表格边框样式显示效果(边框与无边框) (3)hsides。浏览器只显示表格的上下边框。 (4)Vsides。浏览器只显示表格的左右边框。例如: 表格边框显示样式


浏览器只显示表格的上下边框:

Students’Score
Number Name DepartmentCourseScore
1John ComputerProgramming87
2BettyManagement Markting85
3 BillyFinancing Accounting81


浏览器只显示表格的左右边框:

知博网 zhiblog.com html 教程专题 35 35
Students’Score
NumberName DepartmentCourseScore
1John ComputerProgramming87
2BettyManagement Marketing85
3 BillyFinancing Accounting81
在IE4.0 中显示效果如图 3-12 所示。 (5)above。浏览器只显示表格的上边框。 (6)below。浏览器只显示表格的下边框。例如: 表格边框显示样式


图3-12 表格过框显示效果(上下边框与左右边框) 浏览器只显示表格的上边框:

知博网 zhiblog.com html 教程专题 36 36
Students’Score
Number>Name DepartmentCourseScore
1John ComputerProgramming87
2BettyManagement Marketing85
3 BillyFinancing Accounting81


浏览器只显示表格的下边框:

85Billy81
Students’Score
NumberName DepartmentCourseScore
1John ComputerPrograming87
2Management Marketing>
3Financing Accounting
在IE4.0 中显示效果如图 3-13 所示。 知博网 zhiblog.com html 教程专题 37 37 图3-13 表格边框显示效果(上边框与下边框) (7)lhs。浏览器只显示表格的左边框。 (8)rhs。浏览器只显示表格的右边框。例如: 表格边框显示样式


浏览器只显示表格的左边框:

StudelltS' Score
Number/TH>Name DepartmentCourseScire
1Johu ComputerProgramming87
2 BettyManagement Marketing85
3BillyFinancing Accounting81


浏览器只显示表格的右边框:

Course 知博网 zhiblog.com html 教程专题 38 38
Students' Score
NumberName DepartmentScore
1Johu ComputerPrograming87
2BettyManagemwnt Marketing85
3 BillyFinancing Accountiong81
在IE4.0 中显示效果如图 3-14 所示。 (四)表格的行分组 HTML允许文档编辑者将表格按行分组。每一组由表头、表格主体和尾注三部分组成,其中尾 注部分是可选的。表格的按行分组是通过使用表头行标签、表格主体标签和 尾注标签来实现的。标签是成对标签,首标签和尾标签之间 的内容是一系列由表头标签标识的表头元素。我们可以在标签中规定表头行中所有表 头元素的公共属性。标签拥有的属性以及属性对应的功能和标签完全一样。 和标签也是成对标签,其中标签用于规定表格主体部分的共有特性, 签用于规定尾注的特性。实践中,标签很少使用。例如: 图3-14 表格边框样式显示效果(左边框与右边框) 表格按行分组的范例程序


Student’S Information> 知博网 zhiblog.com html 教程专题 39 39
NameCodeAddressTephone
Mary9801Yanchang Road<56331001
Jimmy9802Yanchang Road56331002
Mike9803Yanchang Road56331003
Susan9805Yanchang Road56331005


在IE4.0 中显示效果如图 3-15 所示。 图3-15 行分组显示效果图 (五)表格的列分组 HTML使用标签来将表格按列分组。标签有两个属性:SPAN和 ALIGN,它们都是可选的。 (1)SPAN 属性。SPAN属性的参数值为数字,表示该组包含的列数。该属性的缺省值为 1。 (2)ALIGN 属性。ALIGN 属性用以规定该组所跨列中所有单元格内容在水平方向上的位 置。该属性的参数值为 left、center 和right 之一,分别表示各单元格内容是左对齐、水平 居中、和右对齐的。例如: 表格按列分组的范例程序 知博网 zhiblog.com html 教程专题 40 40


Student’s Information
NameCodeAddrssTelephone
Mary9801Yanchang Road56331001
Jimmy9802Yanchang Road56331002
Mike9803Yanchang Road65331003
Susan9805Yanchang Road56331005


在IE4.0 中显示效果如图 3-16 所示。 HTML 中的表格是可以同时进行行分组和列分组的,即我们可以在用行分组指定表格中某行或 某几行公共属性的同时,又使用列分组指定某列或某几列的公共属性。例如: 图3-16 列分组显示效果图 同时进行行列分组的范例程序 知博网 zhiblog.com html 教程专题 41 41


Student’s InformationMike
NameCodeAddressTelephone
Mary9801Yanchang Road56331001
Jimmy9802Yanchang Road56331002
9803Yanchang Road56331003
Susan9805Yanchang Road56331005


在IE4.0 中显示效果如图 3-17 所示。 图3-17 同时进行行列分组的表格 知博网 zhiblog.com html 教程专题 42 42 (六)标签的 rules 属性 rules 属性用于规定表格内部分格线的显示样式。该属性的参数值为以下 5项之一: (1)all。浏览器将显示所有的内部分格线。 (2)none。浏览器不显示任何内部分格线。举例如下: 内部分格线显示样式


浏览器显示所有的内部分格线:

Students’Score
NumberName DepartmentCourseScore
1John ComputerProgramming87
2BettyManagementM Marketing 85
3 BillyFinancing Accounting81


浏览器不显示任何内部分格线:

知博网 zhiblog.com html 教程专题 43 43
Students' Score
NumberName DepartmentCourseScore
1Johu ComputerProgramming87
2BettyManagement Marketing 85
3BillyFinancing Accounting81
在IE4.0 中显示效果如图 3-18 所示。 图3-18 内部分格线显示效果(内部分格线) (3)rows。浏览器只显示行与行之间的分格线。 (4)cols。浏览器只显示列与列之间的分格线。举例如下: 内部分格线显示样式


浏览器只显示行与行之间的分格线:

Bettu 知博网 zhiblog.com html 教程专题 44 44
StudentS' Score
NumberName DepartmentCourseScore
1John Computer Programming87
2Management Marketing85
3BillyFinancingAccounting81


浏览器只显示列与列之间的分格线:

Students' Score
NumberName DepartmentCourseScore
1John ComputerProgramming87
2BettyManagement Marketing85
3BillyFinancing Accounting81
在IE4.0 中显示效果如图 3-19 所示。 图3-19 内部分格显示效果(行列分格线) (5)groups。浏览器只显示组与组之间的分格线。例如: 内部分格线显示样式


知博网 zhiblog.com html 教程专题 45 45 浏览器只显示组与组之间的分格线:
Student’S Information
NameCodeAddressTelephone
Mary9801Yanchang Road56331001
jimmy9802Yanchang Road56331002
Mike9803Yanchang Road56331003
Susan9805Yanchang Road56331005


在IE4.0中显示效果如图 3-20 所示。 图3-20 内部分格线显示效果(组分格线) 第3课 文档的超链接 知博网 zhiblog.com html 教程专题 46 46 HTML最显著的优点就在于它支持文档的超链接,用户可以很方便地在不同文档以及同一 文档的各段段落之间跳转。 HTML中的链接包括两部分:锚标和目标点。锚标就是链接的源点,当鼠标被移到锚标处 时会变成小手状。此时,用户通过点击鼠标就可以到达链接的目标点。 HTML是通过链接标签来实现超链接的。链按标签是成对标签,首标签和尾标签 之间的内容就是锚标。标签有一个不可缺省的属性 href,用于指定链接目标点的位 置。HTML支持的超链接主要有 3种:不同文档之间的跳转、跳转到标记位置、链接地图。 一、不同文档之间的跳转 用户可以通过点击锚标从当前文档直接跳转至目标文档。如前所述,首标签和尾标签 之间的内容就是锚标,一般是对目标文档的简要说明。此时,href 属性的参数值是目标 文档的 URL。例如: 文档链接范例程序


有关苹果的说明</A>


下面是相应的图像锚标:

在IE4.0 中显示效果如图 3-21 所示。 图3-21 锚标显示效果图 如果用户点击文字锚标“有关苹果的说明”或点击苹果图像,浏览器就会载入目标文档 aPPle.html。锚标文字和普通文字在外观上有很大的不同,一般来说,它被显示为带下划线 的亮蓝色文字。 知博网 zhiblog.com html 教程专题 47 47 二、跳转到标记位置 浏览器程序在载入目标文档后将自动从文档的开头部分开始显示。然而,用户需要的部 分往往并不在文档的开头。如果不加以记号标记,用户将花费大量的时间和精力在文档(特 别是一些长文档)中进行查找。为了方便用户,我们可以利用标签的 NAME属性在目标位 置添加记号,然后在锚标中进行引用。 HTML中标识记号的格式为:目标点;引用记号的格式为锚标内容。例如,假定源文档即锚标所在文档的文档名为 index.html, 文档内容为: 超链接的源文档


欢迎来到 INDEX 主页,请选择您想浏览的部分

文件传输

远程登录

电子邮件

电子公告权系统
链接的目标文档与源文档在同一子目录下,文档名为 internet.html,文档内容如下: 超链接的目标文档 Internet 提供的主要服务
Intemt 提供的服务主要有 E-mail、FTP、BBS、Telnet 和WWW这五种。

电子邮件可以简单地理解成为通过 Internet 发送的邮件不过这种邮件 必须是存储在计算机内的文档或程序。和普通邮件一样,发送电子邮件时必须有邮件地 址,它的格式为:接收用户名@目标主机名。电子邮件具有速度快,价格低廉等优点, 是Internet 应用极为广泛的一项功能。

文件传输.用于 登录远程主机调用所需要的文件并将它传到自己的计算机上。FTP的使用格式为:FTP 目标主机的 IP地址(或域名)。当使用 FTP命令登录目标主机后,还要输入用户名和密 码进行身份验证。非注册用户可以使用通用用户名 Anonymous(匿名者)并用 Guest 或 自己的 E-mail 地址作为密码。Internet 上的大多数主机都提供文件共享服务。但是给 予匿名用户的权限要低于注册用户。

用户可以在电子公告板 上发布信息和进行讨论。这有些类似我们平常使用的留言板。当一个用户在公告板 上发布某条新闻或询问某个问题后,其他进入该公告板系统的用户就会看到这些信息并 做出回应。登录BBS 需要特定的程序,常用的如 Nettem,用户只需要在列表中输入想登 录的BBS的IP地址(或域名)及相应的端口号即可。

知博网 zhiblog.com html 教程专题 48 48 计算机用户可以通过远程登录将本地计算机连至远程计算机上 来使用远程计算机的程序和数据。Telnet 的命令格式为:Telnet 远程主机的 IP地址(或 域名)。当用户想中断与远程计算机的连接时,可以使用 quit 或close 命令退出。
源文档在 IE4.0 中的显示效果如图 3-22 所示。 图3-22 源文档显示效果图 当用户点击锚标“文件传输”后,浏览器将载入目标文档 intetnet.html,并从标记位置所 在行开始显示,而不像原来那样从文档的开头部分开始显示。点击后的显示效果如图 3-23 所示。 图3-23 跳转到标记位置的显示效果 三、链接地图 链接地图是一种很形象的超链接方式。它将链接源点的图像划分为若干个区域,每个区 域都对应着自己的目标文档。链接地图的语法与其它两种超链接方式有很大的不同,我们来 看一个例子: 知博网 zhiblog.com html 教程专题 49 49 An Example of linkmap

Shape="rect" coords="104.200 163,244" href="sunset.html"> shape="circle" coords="223,169 253,169" href="ml.jpg"> 在定义链接地图时,首先要为链接源点的图像添加 ISMAP 属性,将图像定义为地图。然 后必须使用 USEMAP 属性说明该图像是遵循哪个地图定义的。USEMAP 属性的参数值为“#地图 名”。 HTML是通过标签和标签来定义地图的。地图标签有一个不可缺省的属 性NAME,它的参数值是地图的名字。区域的划分是通过在标签中嵌套使用标签 来实现的。#签有 3个属性:shape、coords 和href,分别用以规定该区域的形状、 范围和对应的目标文档。 在本例中语句定义 了一个矩形区域,矩形的左上角座标为(100.76),右下角座标为(162.123)。在该区域内任 何位置单击鼠标都可以链接到目标文档“畜牧场.jpg"。语句定义了一个圆形区域,(223,169)为圆心坐标,(253, 169)是圆上任意一点的座标。当用户将鼠标移到定义的链接区域内时,鼠标就会变成手的形 状。此时,用户点击鼠标就可以链接到相应的目标文档。 习 题 三 一、填空题 1.HTML文档中使用的列表主要有___列表、排序列表、目录列表、___列表和描述性 列表。 2.Web 浏览器在显示___列表时,会自动对列表进行排序,并在每一列表项开头加上 以___形 式表示的序号。我们可以在

    标签中添加_属性来指定序列的起始号。 3.描述性列表是由一系列用___标签
    或___标签
    标识的列表项组成。 4.和普通表格一样,HTML中的表格也是由表格.___、表头元素和具体___元素组 成的。 5.标签的属性主要有 border、___、height、align、___和 cellpadding, 它们都是可选的。 6.行标签是___标签,它必须与___或
    标签配套使用, 7. 标签的 align 属性用于规定单元格内容在___方向上的位置。属性的参 数值为 left、和right 之一,分别表示该单元格内容是___、水平居中和___的。缺省 知博网 zhiblog.com html 教程专题 50 50 时,单元格内容是___的。 8.标签的___属性用于指定该单元格的背景文档所在位置。该属性的参 数值是背景文档的___。 9.frame 属性用于规定表格___的显示样式。当Frame=box 时,浏览器将___表格 过框;当 frame=时,浏览器将不显示表格边框。 10.HTML 允许文档编辑者将表格按行分组。每一组由___、表格主体和___三部分 组成, 11. HTML使用___标签来将表格按列分组。该标签有两个属性:___和 ALIGN,它 们都是可选的。 12.rules 属性用于规定表格___线的显示样式。当rules=rows 时,浏览器只显示_ __之间的分格线,当 rules=cols 时,浏览器只显示___之间的分格线。 13.HTML中标识记号的格式为:目标点;引用记号的格式 为锚标内容。 14.在定义链接地图时,首先要为链接源点的图像添加___属性,将图像定义为__ _。然后必须使用_____属性说明该图像是遵循哪个地图定义的。该属性的参数值为_ __。 15.HTML是通过___标签和标签来定义地图的。标签有三个属性:__ _、coords 和___,分别用以规定该区域的形状、___和对应的目标文档。 二、简答题 1.用HTML 语言编写显示效果如图 3-24 所示的文档。 图3-24 列表习题显示效果图 2.用HTML语言设计一张借书登记表,内容包括序号、书名、借书人、借书日期和备注。 要求各注部分横跨两列,表格中的借书信息不得少于 5项。 3.对上题中的表格进行行分组,然后指定表格的背景色。要求表头行部分的背景色为蓝 色,表格主体部分的背景色为绿色。 4.超链接的实现方式主要有哪几种?为什么要对长文档中的目标位置进行标记? 5.简述链接地图的基本语法并请读者自己设计一个链接地图。 本讲难点: (1)描述性列表的定义和使用; (2)列表的嵌套; (3)表格标签的 ALLGN 属性; (4)表格的分组; (5)跳转到目标位置的超链接; (6)链接地图的语法和作用。
    还剩50页未读

    继续阅读

    下载pdf到电脑,查找使用更方便

    pdf的实际排版效果,会与网站的显示效果略有不同!!

    需要 6 金币 [ 分享pdf获得金币 ] 0 人已下载

    下载pdf

    pdf贡献者

    lwq2006

    贡献于2014-01-30

    下载需要 6 金币 [金币充值 ]
    亲,您也可以通过 分享原创pdf 来获得金币奖励!