第 3章 HTML语言基础
本章要点,
?网页设计的基本原则
?HTML语言及其基本语法
HTML（ Hyper Text Markup Language，
即超文本标记语言）是一种用来制作超文
本文档的简单标记语言。用 HTML编写的
超文本文档称为 HTML文档，它能独立于
各种操作系统平台（如 UNIX,WINDOWS
等）。自 1990年以来 HTML就一直被用作
WWW上的信息表述语言，用于描述网页
的格式设计和它与 WWW上其它网页的链
接信息。
HTML文档（即网页的源文件）是一个
放置了标记的 ASCII文本文件，通常它带
有,html或,htm的文件扩展名。生成一个
HTML文档主要有以下三种途径,
（ 1） 手工直接编写 （ 例如用你所喜爱的
ASCII文本编辑器或其它 HTML的编辑工具 ） 。
（ 2） 通过某些格式转换工具将现有的其它
格式文档 （ 如 WORD文档 ） 转换成 HTML文
档 。
（ 3） 借助专用制作工具软件, 如 Frontpage、
Dreamweaver等进行设计与制作 。
HTML语言是通过利用各种标记 （ tags）
来 标 识 文 档 的 结 构 以 及 标 识 超 链 接
（ Hyperlink） 信息的 。 虽然 HTML语言描述
了文档的结构格式, 但并不能精确地定义文
档信息必须如何显示和排列, 而只是建议
Web浏览器
（如 Mosiac,Netscape等）应该如何显示
和排列这些信息，最终在用户面前的显
示结果取决于 Web浏览器本身的显示风
格及其对标记的解释能力。这就是为什
么同一文档在不同的浏览器中展示的效
果会不一样的原因。
3.1 网页设计基本原则
设计网页如同编写其它计算机程序一样,
需要一定的专业知识和基本技能，而且必
须对设计环境有个明确的了解。在设计网
页的过程中，要清楚地了解网页的阅读对
象，要对整个网络文档有统一的规划。总
体说来，要了解以下基本设计原则,
（ 1）正确分析网页用户的需要。
（ 2）网页下载时间不宜过长。注意网页文
件的大小，在 50KB以内为宜。
（ 3）网页的设计要做到在不同的环境下都
能浏览。
（ 4）注意网页中的图形设计。首先，图形
的文件大小要尽可能小，尽量使用 GIF文件
和 JPG文件，不使用 BMP文件。其次，每个图
形都要有相应的替代文字，这使得用户在关
闭图形显示功能时能够看到替代文字。
（ 5）定期更新网页内容。每隔一定时间就
对网页内容和版面设计进行较大幅度的更新，
从而吸引访问者的注意力。这不失为增加来
访次数的好方法。
（ 6）注意网站内容的搭配。在首页中尽量
使之美观大方，直观又丰富。其它网页要与
首页有很好的搭配效果。
（ 7）考虑不支持某些功能的浏览器。随着
网页设计技术的不断进步，在网页中经常会
使用一些特殊的技术，使得网页的功能更加
丰富，看起来也更加美观。但是不可排除一
些用户使用过时的浏览器浏览这些网页，这
就需要为这些特殊的功能部分添加替代性文
字，避免误将程序代码显示出来。
（ 8）对多媒体文件实施有限的限制。尽管
网络多媒体技术有了很大的发展，但由于网
络速度的限制，就要求一个网页设计者在设
计网页时要充分考虑到所添加多媒体部分的
大小和必要性。
3.2 HTML语言的结构
从结构上讲,HTML文件由元素（ element）
组成。组成 HTML文件的元素有许多，用于组
织文件的内容和指导文件的输出格式。
绝大多数元素是, 容器,,即它有起始
标记和结尾标记。
元素的起始标记叫做起始标记 (start tag)。
元素结束标记叫做结尾标记 (end tag)。
在起始标记和结尾标记中间的部分是元素体。
每一个元素都有名称和可选择的属性，元素
的名称和属性都在起始标记内标明。比如体
元素 (body),
<body backgroud＝ "background.gif">
<h2>示例 </h2>
这是一个示例 <p>
</body>
第一行是体元素的起始标记，它标明体
元素从此开始。由于所有的标记都具有相同
的结构，因此仔细分析这个标记的各个部分，
就能对标记的写法有一个大概了解。
? < 起始标记开始
? body 元素名称，由于元素和标记一一对
应，所以元素名也叫标记名。注意,<和
body之间不能有空格。元素名称不分大小写。
? background 属性名。一个元素可以有多个
属性，属性及其属性值不分大小写。
? background.gif 属性值。表示用
background.gif文件来填充背景。
属性名,=、属性值三者合起来构成一个完整
的属性，一个元素可以有多个属性，各个属
性用空格分开。
? > 起始链接链结束。
第二行和第三行是 body元素的元素体，最后
一行是 body元素的结尾标记。结尾标记用 </
开始，随后是元素名，然后是大于号 >。
从上面的例子中可以看出，一个元素
的元素体内可以有另外的元素。
实际上,html文件仅由一个 html元素
组成,即文件以 <html>开始，以 </html>
结尾，文件其它部分都是 html的元素体。
html元素的元素体由两大部分，即头元素
<head>… </head>和体元 <body>… </body>
和一些注释组成。头元素和体元素的元素
体又由其它的元素和文本及注释组成。
也就是说，一个 HTML文件应具有下面的结
构,
<html> html文件开始
<head> 文件头开始
文件头
</head> 文件头结束
<body> 文件体开始
文件体
</body> 文件体结束
</html> HTML文件结束
需要说明的是,HTML是一门发展很快的语言，
因而现在流行的浏览器为保持对早期 HTML文
件的兼容性,也支持不按上述结构编写 HTML
文件。
还需要说明的是，各种浏览器对 HTML元素及
其属性的解释也不完全一样。
一般来讲,HTML的元素有下列三种表示方法,
? <元素名 >文件或超文本 </元素名 >。
? <元素名 属性名 =,属性值 …, >文本或超
文 本 <／元素名 >。
? <元素名 >
第三种写法仅用于一些特殊的元素，例如分
段元素 P,它仅仅通知 WWW浏览器在此处分段，
因而不需要界定作用范围,所以它没有结
尾标记。 HTML3.0标准中，也定义了 </p> 标
记，它用于需要界定作用范围的段落，比如
增加对齐方式属性的段落。
在 HTML文件中，有些元素只能出现在头
元素中，绝大多数元素只能出现在体元素中。
在头元素中的元素表示的是该 HTML文件的一
般信息，比如文件名称、是否可检索等等。
这些元素书写的次序是无关紧要的，它只表
明该 HTML有没有该属性。与此相反，出现在
体元素中的元素是次序敏感的，改变元素在
HTML文件中的次序会改变该 HTML文件的输出
形式。
3.3 构成网页的基本元素
3.3.1 题目 (title)
title元素是文件头中唯一一个必须出现的
元素, 它也只能出现在文件头中 。
title元素的格式为,<title>题目 </title>
题目：标明该 HTML文件的题目, 是对文件内
容的概括 。 文件的题目一般不会显示在文本
窗口中, 而以窗口的名称显示出来 。 除了标
识窗口外, 当将某一网页存入书签或文件时,
题目还用作书签名或缺省的文件名 。
<html>
<title>一个简单的 html文件 </title>
这是我的第一个 html文件 。
</html>
虽然题目的长度没有限制，但过长的题目会
导致折行，一般情况下它的长度不应超过 64
个字符。由于题目的作用是标明文件内容，
所以太短的题目也是不可取的。在头元素中
还可以出现其它元素，如 <isindex>，
<meta>等等，这些元素都不是必须的，而且
也不常用。具体用法及含义可以参考有关书
籍。 下面是一个最简单的 HTML 文件,
3.3.2 标题 (hn)
标题标签用于显示 HTML文件的各级标题,
格式为,<Hn>标题内容 </Hn>
其中 n为 1-6之间的整数, 其值越大, 字越
小, 也就是说第一级标题 (H1)字最大, 第六
级 (H6)最小 。 标题内容用黑体字显示, 各行
之间自动插入空行 。
<H4>多用作文本正文； H6字体最小 (几乎不
用 )。 <H1>至 <H3>比一般正文字体大, 而
<H5>至 <H6>比一般正文字体小 。 由于标题标
签具有段落属性, 这就使得一个段落内不能
使用两种标题标签。
图 3-1给出了由下面代码产生的屏幕效果 。
<html>
<head><title>标题示例 </title></Head>
<body>
<h1>一级标题是这样的 </h1>
<h2>二级标题是这样的 </h2>
<h3>三级标题是这样的 </h3>
<h4>四级标题是这样的 </h4>
<h5>五级标题是这样的 </h5>
<h6>六级标题是这样的 </h6>
</body>
</html>
图 3-1 hn的屏幕输出结果
3.3.3 分段 <P>
HTML的浏览器是基于窗口的, 用户可以随
时改变显示区的大小, 所以 HTML将多个空
格以及回车看成一个空格, 这是和绝大多
数字处理器不同的 。 HTML的分段依赖于分
段元素 <P>。
<P>也有多种属性, 比较常用的属性是,
align＝ # # 可以是 left,center，
right,其含义同上文 。
例如,<p align=center>段落居中 </p>
当 HTML文件中有图形时，图形可能占据了
窗口的一端，图形的周围可能有较大的空白
区。这时，不带 clear属性的 <P>可能会使文
章的内容显示在该空白区内。为确保下一段
内容显示在图形的下方，可使用 clear属性。
clear属性的含义为,
?clear=left 下一段显示在左边界处空白
的区域。
?clear=right 下一段显示在右边界处空白
的区域。
?clear=all 下一段的左右两边都不许有别
的内容。
3.3.4 清单 List
清单用于列举事实。常用的清单有 3种格式，
即无序清单 (unordered List),有序清单
(ordered list)和定义清单 (definition
list)。
1,无序清单 (ul)
无序清单用 (ul,此处的 l不是数字 1)开始,
每一个清单条目用 <li>引导, 最后是 </ul>。
注意清单条目不需要结尾标记 </li>。 输出
时每一清单条目缩进, 并且以圈点标示 。
例如,
<ul>
<li>今天
<li>明天
</ul>
输出为,
○ 今天
○ 明天
2,有序清单 <ol>
有序清单与无序清单相比, 只是在输出时
清单条目用数字标示, 下面是一个例子及
其输出 。
<ol>
<li>今天
<li>明天
</ol>
输出为,
1,今天
2,明天
3,定义清单 <dl>
定义清单用于对清
单条目进行简短说
明的场合, 用 <dl>
开始, 清单条目用
<dt>引导, 它的说
明用 <dd>引导 。
<dl>
<dt>条目 1
<dd>条目 1的定义
<dt>条目 2
<dd>条目 2的定义
</dl>
输出为,
条目 1
条目 1的定义
条目 2
条目 2的定义
3.3.5 居中
很多元素都有对齐方式属性, 如 hn,p等 。
也 可 以 直 接 用 居 中 标 记
<center>… </center>,
图 3-2 对齐方式示例
<h3 align=center>今天的
</h3>
<center>
天气真好 ！！！
</center>
输出结果如图 3-2所示 。
3.4 超文本链接指针
超文本链接指针是 html最吸引人的优点之
一 。 使用超文本链接指针可以使顺序存放的
文件具有一定程度上随机访问的能力, 更加
符合人的思维方式 。 组织得好的链接指针不
仅能使读者跳过不感兴趣的章节, 而且有助
于更好地理解作者的意图 。
一个超文本链接指针由两部分组成,
一部分是被指向的目标, 它可以是同一文件
的另一部分, 也可以是世界另一端的一个文
件, 还可以是动画或音乐；
另一部分是指向目标的链接指针 。
3.4.1 统一资源定位器 URL
统一资源定位器 URL (Uiform Resource
Locator)是文件名的扩展。
在单机系统中，定位一个文件需要路径和文
件名，对于遍布全球的 Internet网，显然还
需要知道文件存放在哪个网络的哪台主机中
才行。与单机系统不一样的是在单机系统中，
所有的文件都由统一的操作系统管理，因而
不必给出访问该文件的方法；而在 Internet
上，各个网络、各个主机的操作系统可能不
一样，因此必须指定访问该文件的方法。一
个 URL包括了以上所有的信息。
它的构成为,protocol,//
machine.name[:port]/directory/filename
其中, protocol是访问该资源所采用的协议, 即
访问该资源的方法, 它可以是,
http,超文本传输协议, 该资源是 html文件 。
file,文件传输协议, 用 ftp访问该资源 。
ftp,文件传输协议, 用 ftp访问该资源 。
news,表明该资源是网络新闻组 。
machine.name,是存放该资源主机的 IP 地址, 通
常以字符形式出现, 如 mail.edu.cnport端口号：
是服务器在该主机所使用的端口号 。 一般情况下
端口号不需指定 。 只有当服务器所使用的端口号
不是缺省的端口号时才指定, 例如 WWW服务默认情
况下采用的端口号为 80,如果设置了其它的端口
号, 访问时必须加上端口号 。
directory和 filename,该资源的路径和文件名,
一个典型的 URL为,
http://www.edu.cn
它表示中国教育和科研计算机网 WWW服务器上的起
始 html文件。（文件具体存放的路径及文件名取
决于该 WWW服务器的配置情况）。
与单机系统绝对路径、相对路径的概念类似，统
一资源定位器也有绝对 URL和相对 URL之分。前面
所述的是绝对 URL。 相对 URL是相对于最近访问的
URL。 比如你正在浏览一个 URL为
http://www.edu.cn/index.html的文件，如
果想看同一个目录下的另一个文件如
http://www.edu.cn/news.html,就可以直
接使用 news.html,这时 news.html就是一个
相对 URL,它的绝对 URL为
http://www.edu.cn/news.html
3.4.2 指向一个目标 <a>
在 html文件中可用链接指针指向一个目标 。
其基本格式为,<a href="url">字符串 </a>
href属性中的 url是被指向的目标, 随后的
,字符串, 在 html文件中充当指针的角色,
它一般显示为蓝色, 也可以定义成其它颜色 。
当
用户用鼠标点击这个字符串时, 浏览器就会
将 url处的资源显示在屏幕上 。
在编写 html文件时，需要知道目标的 url。
如何才能得到目标的 url呢？对于自己主机内
的文件，它的 url 可以根据该文件的实际情
况决定。对于 Internet上的资源，在用浏览器
观看时，它的 url会在浏览器的, 地址栏, 中
显示出来，把它抄下来写到 html文件中即可。
此外，编写 html文件时，对有可能确定关
系的一组资源（比如在同一个目录中）应采
用相对 url,这不仅可以简化 html文件，而且
便于维护。比如当需要将某个目录整个搬到
另外一个地方或把某一主机的资源移到另一
台主机时，用相对 url写的 html文件不用更新
其中的 url。但如果用绝对 url编写 html文件，
那么就逐个修改每个链接指针中的 url。
若各个资源之间没有固定的关系，这时就
只能用绝对 url了。
3.4.3 标记一个目标
上面提到的链接指针可以使读者在整个
Internet网上方便地链接。但如果编写了一
个很长的 html文件，怎么能在同一文件的不
同部分之间也建立起链接，使用户方便地在
上下方之间跳转呢？ 前面提到一个超文本链接
指针包括两个部分：一是指向目标的链接指针,
二是被指向的目标。对于一个完整的文件，
可以用它的 url来唯一地标识它，但对于同
一文件的不同部分，怎样来标识呢？下面
的内容将介绍链接指针元素的另外的一个
用途：标识目标。
标识一个目标的方法为,
<a name="name">text</a>
name属 性将 放置该 标记的 地方 标记 为
,name”,name是一个全文唯一的标记串,
text部分可有可无 。 这样, 就把放置标记
的地方做了一个叫做, name”的标记 。
做好标记后，可以用下列方法来指向它,
<a href="url#name">text </a>
url是放置标记的 html文件的 url name是标记名 。
对于同一个文件, 可以写为,
<a href="#name">text </a>
这时就可以点取 text跳转到标记名为 name的部分
了 。
3.4.4 目标窗口
如果希望被指向的目标在一个新的窗口中显示,
可以使用 target属性来修饰链接指针元素 。 如,
< a href="url" target="window-name">text
</a>
可将 url代表的资源显示在一个新的窗口中,
该窗口的名字叫 window-name,它可以是本窗口
（ _ self）, 父 窗 口 （ _ parent）, 新窗口
（ _blank） 及整个浏览器窗口 （ _top） 。
3.4.5 图像链接指针
图像也可以做为链接指针 。 格式为,
<a href="url"><img src="url"></a>
可以看出, 上例中用 <img src="url">取代了链接指
针中 text的位置 。 <img src="url">是图像元素, 它
表明显示 url代表的图像文件 。
下面是一个简单的图像链接指针 。
<a href="www.edu.cn">中国教育和科研计算机网
<img src="edu.gif"></a>
3.4.6 图像地图（ image map）
上面介绍的图像链接指针每幅图只能指向一个
地点, 而图像地图可以把图像分成多个区域, 每
个区域指向不同的地点 。 这样, 就可以用图像地
图编写出很漂亮的 html文件 。
使用图像地图稍微复杂一点 。 图像地图不仅需
要在 html文件中说明, 它还需要一个后缀为,map的
文件, 用来说明图像分区及其指向的 url的信息 。
在,map文件中说明分区信息的格式如下,
rect url 左上角坐标, 右下角坐标
poly url 各顶点坐标
circle url 直径两端点坐标
default url
rect指定一个矩形区域, 该区域的位置由左上角坐
标和右下角坐标说明 。 poly指定一多边形区域, 该
区域的位置由各顶点坐标说明 。 circle 指定一圆形
区域, 该区域的位置由垂直通过圆心的直径与该
圆的交点坐标说明 。 default 指定图像地图其它部
分的 url。
坐标的写法为,x,y,各点坐标之间用空格分开 。
下面是一个完整的说明文件,
default,http://www.edu.cn
rect,http://www.ibm.com 140,20 280,60
poly,http://www.microsoft.com 180,80 200,140
circle,http://www.yahoo.com 80,140 80,100
图像地图需要一个特殊的处理程序 imagemap。
imagemap放在 /cgi-bin 中。在 html 文件中引用图像
地图的格式为,
<a href="/cgi-bin/imagemap/mymap.map">
<img src="mymap.gif" ismap></a>
可以看出这是一个包含图像元素的链接指针元素。
图像元素指明用于图像地图的图像的 url,并用
Ismap属性说明。需要说明的是链接指针中的 href
属性，它由两部分组成：第一部分是 /cgi-
bin/imagemap,它指出用哪个程序来处理图像地
图，必须原样写入；第二部分是图形地图的说明
文件 mymap.map。 /cgi-bin/imagemap/mymap.map
绝不表示 mymap.map在 /cgi-bin/imagemap目录中。
在 netscape扩展中，图像地图可以用一种比较
简化的方式来表示，这就是客户端图像地图。
用户端地图可以将图像地图的说明文件写在
html文件中，而且不需要另外的程序来处理。
这就使 html作者可以用同别的元素相一致的
写法来写图像地图。
用户端图像地图的格式为,
<img src="url" usemap="#mymap">
src="url" 用于指定用作图像地图的图像 。
usemap属性指明这是客户端图像地图 。
其中的, #mymap”是图像文件说明部分的标
记名，浏览器寻找名字为 mymap的 <map>元素
并从中得到图像地图的分区信息。 客户端图
像地图的分区信息用 <map name=mapname>元
素说明,name属性命名 <map>元素。
图像地图的各个区域用 <area shape="形状 "
coords="坐标 " href="url">说明，形状可
以是,
rect矩形, 用左上角, 右下角的坐标表示,
各个坐标值之间用逗号分开； poly多边形,
用各顶点的坐标值表示； circle圆形, 用圆
心及半径表示, 前两个参数分别为圆心的横,
纵坐标, 第三个参数为半径 。
href="url",表示该区域所指向的资源的
url,也可以是 nohref,表示在该区域鼠标
点取无效 。
客户端图像地图各个区域可以重叠，重叠区
以先说明的条目为准，下面是一个例子,
<img src="mapimg.gif" usemap="#Face">
<map name="Face">
<!Text BOTTON> 此行是注释
< area shape="rect" href="page.html"
coords="140,20,280,60">
<!Triangle BOTTON>
<area shape="poly" href="image.html"
coords="100,100,180,80,200,140">
<!FACE>
<area shape="circle" href="nes.html"
coords="80,100,60>
</map>
3.5 版面风格控制
使用 HTML可以对 Web页面的版面进行控制,
比如字体大小, 分行, 画线, 背景和文本颜
色等等 。
3.5.1 字体
1,字号
html有七种字号, 1号最小, 7号最大 。 默认
字号为 3,可以用 <font size=字号 >来设置新
的字号 。
设置文本的字号有两种办法：一种是设置绝
对字号, 如 <font size=字号 >；另一种是
设置文本的相对字号，如 <font size=± n>。
用第二种方法时“＋”号表示字体变大，
“－”号表示字体变小。
<font size=7>size=7:今天天气很好 ！ </font><br>
<font size=6>size=6:今天天气很好 ！ </font><br>
<font size=5>size=5:今天天气很好 ！ </font><br>
<font size=4>size=4:今天天气很好 ！ </font><br>
<font size=3>size=3:今天天气很好 ！ </font><br>
<font size=2>size=2:今天天气很好 ！ </font><br>
<font size=1>size=1:今天天气很好 ！ </font><br>
输出结果为,
图 3-3 不同字号的输出结果
2,字体风格
字体风格分为物理风格和逻辑风格。物理风
格直接指定字体，其字体有黑体 <b>,斜体
<i>,下划线 <u>,打字机体 <tt>。 逻辑风格
用于指定文本的作用。如,
<em>强调 <srrony>特别强调 <code>源代码
<samp>例子 <kbd>键盘输入 <var>变量
<dfn>定义 <cite>引用 <small>较小 <big>较大
<sup>上标 <sup>下标
3,闪烁
<blink>文本 </blink>可使文本闪烁, 闪烁
频率为 1秒钟一次 。
3.5.2 横线（ hr）
横线，一般用于分隔同一文本的不同部分。
在窗口中划一条横线非常简单，只要写一个
<hr>即可。横线的宽度用 <hr size=n>指定，
n是线宽，单位是象素。例,<hr size=10>。
<hr width=#>指定横线长度, 既可以指定绝
对线长, 也可以指定横线长度占窗口宽度的
百分比 。 例 <hr width=50>,<hr width=50%>。
横线的位置用 <hr align=#>指定 。 #是 left或
right之一 。 left表示左端与左边界对齐,
right是右端与右边界对齐 。 默认时, 横线出
现在窗口中央 。
3.5.3 行间图像
行间图像可使网页更加漂亮, 但是过大的图
像会导致网络通讯量急剧增大, 延长访问时
间 。 所以在主页上不宜采用很大的图像 。
如果确实需要一些大图像, 最好在主页中用
一个缩小的图像指向原图, 并标明该图的大
小 。 这样访问者可以快速地访问你的主页,
自己选择看还是不看那些图像 。
图像的基本格式为,
<img src="image-url">或 <img src="image-urd"
alt="text">
image-url是图像文件的 url。 目前, 大部分浏
览器支持,gif和,jpg文件, alt属性告诉不支持
图像的浏览器用 text代替该图 。
图像在窗口中会占据一块空间, 在图像的左
右可能会有空白, 不加说明时, 浏览器将
随后的文本显示在这些空白中, 显示的位置
由 align属性指定 。
用 align=left,right时, 图像是一个浮动图像 。
比如 align=left,图像必须挨着左边框, 它把
原来占据该块空白的文本, 挤走,, 或挤到
它右边, 或挤到它上下 。
文本与图像的间距用 vspace=#,hspace=#指
定, #是整数, 单位是像素 。 前者指定纵向
间距, 后者指定横向 间距 。
3.5.4 分行 <br>和禁止分行 <nobr>
<br>表示在此处分行, <nobr>… </nobr>将通
知浏览器, 其中的内容在一行内显示, 若
一行内显示不了, 则超出部分将被裁剪掉 。
<br clear=#>中的 clear属性标明下一行的情况，
如 clear=left,表示下一行从左边界处开始。
#可以是 left,right,all之一。
3.5.5 背影和文本颜色
窗口背景可以用下列方法指定,
<body background="image-url">
<body bgcolor=# text=# link=# alink=#
vlink=#>
第一行指定的是填充背景的图像, 如果图像
的大小小于窗口大小, 则把背景图像重复,
直到填满窗口区域 。 第二行指定的是 16进制
的红, 绿, 蓝分量 。
bgcolor,背景颜色
text,文本颜色
link,链接指针颜色
alink,活动的链接指针颜色
vlink,已访问过的链接指针颜色
例如,
<body bgcolor=FF0000>大红背景色。
注意, 此时体元素必须写完整, 即用
<body>结束。
3.5.6 转义字将与特殊字符
html中 <,>及 &字符有特殊含义, （ 前两
个字符用于链接签, &用于转义 ）, 不能直
接使用 。 要使用这三个字符, 必须用它们的
转义序列 。
l & 的转义序列为 &s 或 &；
l < 的转义序列为 <或 <；
l > 的转义序列为 >或 >；
前者为字符转义序列, 后者为数字转义序列 。
例如,
<font>显示为 <font>。
若直接写为 <font>则会被认为是一个链接签。
需要说明的是,
l 转义序列各字符间不能有空格 。
l 转义序列必须以, ;” 结束 。
l 单独的 &不被认为是转义开始 。
如, & lt;”被解释为, & lt;”而不是
,<” 。
另一个需要转义的字符是引号, 它的转义序
列为, "”或, "”, 例如 <img
src="image.gif" alt="A &quol; real
"example">
html使用的字符集是 ISO 8859 -1字符集，该
字符集中有许多在标准键盘上无法输入的字
符。对这些特殊字符只能使用转义序列。
3.6 表格（ Table）
3.6.1 表格的基本形式
一个表由 <table>开始, </table>结束,
表的内容由 <tr>,<th>和 <td>定义 。 <tr>说
明表的一个行, 表有多少行就有多少个 <tr>；
<th>说明表的列数和相应栏目的名称, 有多
少个栏就有多少个 <th>； <td>则填充由 <tr>
和 <th>组成的表格 。 border属性用来说明是
否用表格线分开 。
3.6.2 有通栏的表
有横向通栏的表用 <th colspan=#>属性说明,
colspan表示横向栏距, #代表通栏占据的网
格数, 它是一个小于表的横向网格数的整数 。
有纵向通栏的表用 <rowspan=#>属性说明。
rowspan表示纵向栏距,#表示通栏占据的网
格数，应小于纵向网络数。需要说明的是有
纵向通栏的表，每一行必须用 </tr>明确表示
一横向栏目结束,这是和表的基本形式不同
的。
3.6.3 表的大小、边框宽度及表格间距
表的大小用 width=#和 height=#属性说明。前者
为表宽，后者为表高,#是以像素为单 位的整
数。
边框宽度由 border=#说明, #为宽度值, 单位是
像素 。
表格间距即划分表格的线的粗细用
cellspacing=#表示,# 的单位是像素。
3.6.4 表中文本的输出
文本与表框的距离用 cellpadding=#说明 。
表格的宽度大于其中的文本宽度时, 文本
在其中的输出位置用 align=#说明 。 #是 left，
center和 right三者之一, 分别表示左对齐,
居中和右对齐 。 align属性可修饰 <tr>,<th>
和 <td>链接签 。
表格的高度大于其中文本的高度时, 可以用
valign=#说明文本在其中的位置 。 #是 top，
middle,bottom,baseline四者之一 。 分别
表示上对齐, 文本中线与表格中线对齐, 下
对齐, 文本基线与表格中线对齐 。 特别注意
的是基线 （ baseine） 对齐方式, 它使得文
本出现在网格的上方而不是想象中的下半部 。
同样, valign可以修饰 <tr>,<th>,<td>中
的任何一个 。
3.6.5 浮动表格
所谓浮动表格是指表与文件中内容对齐时,
若在现在位置上不能满足其对齐方式, 表格
会上下移动, 即, 挤开, 一些内容, 直到满
足其对齐要求 。
浮动属性一般由 align=left或 right指定
3.6.6 表格颜色
表格的颜色用 bgcolor=#指定 。 #是 16进制的
6位数, 格式为 rrggbb,分别表示红, 绿,
蓝三色的分量 。 或者是 16种已定义好的颜色
名称, 参见文本颜色 。
3.7 分框 Frame
分框将浏览器的窗口分成多个区域, 每个区
域可以单独显示一个 html文件, 各个区域也
可相关连地显示某一个内容 。 比如可以将索
引放在一个区域, 文件内容显示在另一个区
域 。
分框的基本结构如下,
<html>
<head>
<title>… </title>
</head>
<noframes>… </noframes>
<frameset>
<frame src="url">
</frameset>
</html>
<noframes>… </noframes>中的内容显示在不
支持分框的浏览器窗口中，因而这里需指
向一个普通版本的 html文件, 以便供使用不
支持分框浏览器的用户阅读 。
分框由 <frameset>指定, 并且可以嵌套,
分区中部分显示的内容用 <frame>指定 。 可
以将窗口横向分成几个部分, 也可以分成纵
向几个部分, 还可以混和分框 。
横向分框用 <frameset cols=#>指定, #可以
是一个百分数, 也可以是一整数 。 前者规定
各框占窗口的百分数, 后者指定各框的绝对
大小 。
纵向分框用 <frameset cols=#>指定 。
将窗口分成横纵几个区域时, 用 <framset>
代替 <frame>链接即可将原来分好的 <frame>
区域再次分框 。
分框与其中的文本间距可以用
Marginwidth=#和 Marginheigh=#来指定，前
者指定文本与分框的边缘的横向距离，后者
为纵向距离，其单位都为象素。
3.8 特技与多媒体
利用 HTML中的特殊标记, 可以实现简单的特
技, 如会移动的文字, 以及在网页中嵌入多
媒体 。
3.8.1 会移动的文字
1,语法
<marquee>… </marquee>
例如,
<marquee>从右向左移动的文字 </marquee>
2,属性
（ 1） 方向
<direction=#> #=left,right
例如,
<marquee direction=left>从右向左移 ！
</marquee> <P>
<marquee direction=right>从左向右移 ！
</marquee>
（ 2） 方式
< behavior=#> #=scroll,slide,
alternate
例如,
<marquee behavior=scroll>一圈一圈绕着走 ！ </marquee>
<P>
<marquee behavior=slide>只走一次 ！ </marquee> <P>
<marquee behavior=alternate>来回走 ！ </marquee>
（ 3） 循环
<loop=#> #=次数, 若未指定则循环不止 (infinite)
例如,
< marquee loop=3 width=50% behavior=scroll>只走 3趟 ！
</marquee> <P>
<marquee loop=3 width=50% behavior=slide>我只走 3趟 ！
</marquee> <P>
<marquee loop=3 width=50% behavior=alternate>我只走 3趟 ！
</marquee>
<marquee scrollamount=20>我走得好快哟！
</marquee>
（ 4） 延时
<scrolldelay=#>
例如,
<marquee scrolldelay=500 scrollamount=100>走一步,
停一停 ！ </marquee>
3,外观设置
（ 1） 对齐方式 (Align),
<align=#> #=top,middle,bottom
＃ 为对齐上沿, 中间, 下沿 。
例如,
<font size=6>
<marquee align=# width=400> 我 会 移 动 啦 ！
</marquee>
</font>
（ 2） 底色
<bgcolor=#> #=rrggbb 16 进制数码, 或者是下列预
定义色彩,
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,
Lime,
Fuchsia,Green,Purple,Silver,Yellow,Aqua
例如,
<marquee bgcolor=aaaaee>我会移动啦 ！ </marquee>
（ 3） 背景面积
<height=# width=#>
例如,
<marquee height=40 width=50% bgcolor=aaeeaa>我
会移动啦 </marquee>
（ 4） 空白 （ Margins）
例如,
< hspace=# vspace=#>********<br> 嗨,<marquee
hspace=20 vspace=20 width=150 bgcolor=ffaaaa
align=middle>啦啦啦, 我会移动耶 ！ </marquee>大
家好 ！ <br>
3.8.2 嵌入多媒体
使用 embed标记可以将多媒体嵌入到网页中 。
1,基本语法
<embed src=#> #=URL
本标记用来在主页中嵌入多媒体文本, 如：
电影 （ movie）,声音 （ sound）,虚拟现实
语言 （ vrml） 等等 。 要使用 <embed>标记,
需要安装相应的插件 。 另外, 每个插件的
属性可能会是不同的 。
2,背景音乐
格式,
<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
例如,
<bgsound src="sound.wav" loop=3>
为播放 3次 sound.wav文件 。
3,插入视频剪辑
格式,
<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI（ Video for MS-
Windows） 文件来播放视频；用 url.gif这个
图象作为视频的封面, 即：在浏览器尚未完
全读入 AVI 文件时, 先在 AVI 播放区域显
示该图象 。 例如,
<img
src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI">
4,播放 AVI文件
格式,
<img start=#> #=fileopen,mouseover
缺省值是 #=fileopen,即在打开含本标记
的页面时开始播放 AVI。 mouseover 是指把
鼠标移到 AVI播放区域之上时才开始播放 AVI。
也 可 以 两 者 同 时 设 置, < img
start=fileopen,mouseover>。 另外, 用鼠
标在 AVI 播放区域点击一下, 也可令浏览
器开始播放该 AVI。 例如,
<img
src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" start=mouseover>
与播放 AVI文件相关的属性还有,
（ 1） 控制条 <img controls>
用来在视频窗口下附加 MS－ WINDOWS 的
AVI 播放控制条 。
例如,
< img src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" controls>
（ 2） 循环播放
格式,
<img loop=#>
<loop=infinite> 将循环播放不止 。
例如, 下例将循环 3次,
< img src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" loop=3>
（ 3） 延时
格式,
<img loopdelay=#> #=毫秒数
例如, 下例将循环 3次, 中间延时 250毫秒,
< img src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" loop=3 loopdelay=250>
本 章 小 结
本章主要介绍了 HTML的基础知识，在使用过
程中应注意,HTML标记书写在 <>之间，一般
成对使用；页面上的文本可以使用 HTML标记
进行排版；表格常用开将文本精确定位；页
面可以使用框架分页；设置超级链接；使文
字移动及在网页中可以嵌入声音和视频图像。
表单部分的内容将在后面章节中专门介绍。
习 题
1,编写一个文字导航窗体, 要求链接在新
窗体内打开 。
2．复制一张图（如图 3-2），为图中的每个
图标建立一个链接。
图 3-2 习题 2
3,编写一个如图 3-3所示的登陆界面 。
图 3-3 习题 3
本章要点,
?网页设计的基本原则
?HTML语言及其基本语法
HTML（ Hyper Text Markup Language，
即超文本标记语言）是一种用来制作超文
本文档的简单标记语言。用 HTML编写的
超文本文档称为 HTML文档，它能独立于
各种操作系统平台（如 UNIX,WINDOWS
等）。自 1990年以来 HTML就一直被用作
WWW上的信息表述语言，用于描述网页
的格式设计和它与 WWW上其它网页的链
接信息。
HTML文档（即网页的源文件）是一个
放置了标记的 ASCII文本文件，通常它带
有,html或,htm的文件扩展名。生成一个
HTML文档主要有以下三种途径,
（ 1） 手工直接编写 （ 例如用你所喜爱的
ASCII文本编辑器或其它 HTML的编辑工具 ） 。
（ 2） 通过某些格式转换工具将现有的其它
格式文档 （ 如 WORD文档 ） 转换成 HTML文
档 。
（ 3） 借助专用制作工具软件, 如 Frontpage、
Dreamweaver等进行设计与制作 。
HTML语言是通过利用各种标记 （ tags）
来 标 识 文 档 的 结 构 以 及 标 识 超 链 接
（ Hyperlink） 信息的 。 虽然 HTML语言描述
了文档的结构格式, 但并不能精确地定义文
档信息必须如何显示和排列, 而只是建议
Web浏览器
（如 Mosiac,Netscape等）应该如何显示
和排列这些信息，最终在用户面前的显
示结果取决于 Web浏览器本身的显示风
格及其对标记的解释能力。这就是为什
么同一文档在不同的浏览器中展示的效
果会不一样的原因。
3.1 网页设计基本原则
设计网页如同编写其它计算机程序一样,
需要一定的专业知识和基本技能，而且必
须对设计环境有个明确的了解。在设计网
页的过程中，要清楚地了解网页的阅读对
象，要对整个网络文档有统一的规划。总
体说来，要了解以下基本设计原则,
（ 1）正确分析网页用户的需要。
（ 2）网页下载时间不宜过长。注意网页文
件的大小，在 50KB以内为宜。
（ 3）网页的设计要做到在不同的环境下都
能浏览。
（ 4）注意网页中的图形设计。首先，图形
的文件大小要尽可能小，尽量使用 GIF文件
和 JPG文件，不使用 BMP文件。其次，每个图
形都要有相应的替代文字，这使得用户在关
闭图形显示功能时能够看到替代文字。
（ 5）定期更新网页内容。每隔一定时间就
对网页内容和版面设计进行较大幅度的更新，
从而吸引访问者的注意力。这不失为增加来
访次数的好方法。
（ 6）注意网站内容的搭配。在首页中尽量
使之美观大方，直观又丰富。其它网页要与
首页有很好的搭配效果。
（ 7）考虑不支持某些功能的浏览器。随着
网页设计技术的不断进步，在网页中经常会
使用一些特殊的技术，使得网页的功能更加
丰富，看起来也更加美观。但是不可排除一
些用户使用过时的浏览器浏览这些网页，这
就需要为这些特殊的功能部分添加替代性文
字，避免误将程序代码显示出来。
（ 8）对多媒体文件实施有限的限制。尽管
网络多媒体技术有了很大的发展，但由于网
络速度的限制，就要求一个网页设计者在设
计网页时要充分考虑到所添加多媒体部分的
大小和必要性。
3.2 HTML语言的结构
从结构上讲,HTML文件由元素（ element）
组成。组成 HTML文件的元素有许多，用于组
织文件的内容和指导文件的输出格式。
绝大多数元素是, 容器,,即它有起始
标记和结尾标记。
元素的起始标记叫做起始标记 (start tag)。
元素结束标记叫做结尾标记 (end tag)。
在起始标记和结尾标记中间的部分是元素体。
每一个元素都有名称和可选择的属性，元素
的名称和属性都在起始标记内标明。比如体
元素 (body),
<body backgroud＝ "background.gif">
<h2>示例 </h2>
这是一个示例 <p>
</body>
第一行是体元素的起始标记，它标明体
元素从此开始。由于所有的标记都具有相同
的结构，因此仔细分析这个标记的各个部分，
就能对标记的写法有一个大概了解。
? < 起始标记开始
? body 元素名称，由于元素和标记一一对
应，所以元素名也叫标记名。注意,<和
body之间不能有空格。元素名称不分大小写。
? background 属性名。一个元素可以有多个
属性，属性及其属性值不分大小写。
? background.gif 属性值。表示用
background.gif文件来填充背景。
属性名,=、属性值三者合起来构成一个完整
的属性，一个元素可以有多个属性，各个属
性用空格分开。
? > 起始链接链结束。
第二行和第三行是 body元素的元素体，最后
一行是 body元素的结尾标记。结尾标记用 </
开始，随后是元素名，然后是大于号 >。
从上面的例子中可以看出，一个元素
的元素体内可以有另外的元素。
实际上,html文件仅由一个 html元素
组成,即文件以 <html>开始，以 </html>
结尾，文件其它部分都是 html的元素体。
html元素的元素体由两大部分，即头元素
<head>… </head>和体元 <body>… </body>
和一些注释组成。头元素和体元素的元素
体又由其它的元素和文本及注释组成。
也就是说，一个 HTML文件应具有下面的结
构,
<html> html文件开始
<head> 文件头开始
文件头
</head> 文件头结束
<body> 文件体开始
文件体
</body> 文件体结束
</html> HTML文件结束
需要说明的是,HTML是一门发展很快的语言，
因而现在流行的浏览器为保持对早期 HTML文
件的兼容性,也支持不按上述结构编写 HTML
文件。
还需要说明的是，各种浏览器对 HTML元素及
其属性的解释也不完全一样。
一般来讲,HTML的元素有下列三种表示方法,
? <元素名 >文件或超文本 </元素名 >。
? <元素名 属性名 =,属性值 …, >文本或超
文 本 <／元素名 >。
? <元素名 >
第三种写法仅用于一些特殊的元素，例如分
段元素 P,它仅仅通知 WWW浏览器在此处分段，
因而不需要界定作用范围,所以它没有结
尾标记。 HTML3.0标准中，也定义了 </p> 标
记，它用于需要界定作用范围的段落，比如
增加对齐方式属性的段落。
在 HTML文件中，有些元素只能出现在头
元素中，绝大多数元素只能出现在体元素中。
在头元素中的元素表示的是该 HTML文件的一
般信息，比如文件名称、是否可检索等等。
这些元素书写的次序是无关紧要的，它只表
明该 HTML有没有该属性。与此相反，出现在
体元素中的元素是次序敏感的，改变元素在
HTML文件中的次序会改变该 HTML文件的输出
形式。
3.3 构成网页的基本元素
3.3.1 题目 (title)
title元素是文件头中唯一一个必须出现的
元素, 它也只能出现在文件头中 。
title元素的格式为,<title>题目 </title>
题目：标明该 HTML文件的题目, 是对文件内
容的概括 。 文件的题目一般不会显示在文本
窗口中, 而以窗口的名称显示出来 。 除了标
识窗口外, 当将某一网页存入书签或文件时,
题目还用作书签名或缺省的文件名 。
<html>
<title>一个简单的 html文件 </title>
这是我的第一个 html文件 。
</html>
虽然题目的长度没有限制，但过长的题目会
导致折行，一般情况下它的长度不应超过 64
个字符。由于题目的作用是标明文件内容，
所以太短的题目也是不可取的。在头元素中
还可以出现其它元素，如 <isindex>，
<meta>等等，这些元素都不是必须的，而且
也不常用。具体用法及含义可以参考有关书
籍。 下面是一个最简单的 HTML 文件,
3.3.2 标题 (hn)
标题标签用于显示 HTML文件的各级标题,
格式为,<Hn>标题内容 </Hn>
其中 n为 1-6之间的整数, 其值越大, 字越
小, 也就是说第一级标题 (H1)字最大, 第六
级 (H6)最小 。 标题内容用黑体字显示, 各行
之间自动插入空行 。
<H4>多用作文本正文； H6字体最小 (几乎不
用 )。 <H1>至 <H3>比一般正文字体大, 而
<H5>至 <H6>比一般正文字体小 。 由于标题标
签具有段落属性, 这就使得一个段落内不能
使用两种标题标签。
图 3-1给出了由下面代码产生的屏幕效果 。
<html>
<head><title>标题示例 </title></Head>
<body>
<h1>一级标题是这样的 </h1>
<h2>二级标题是这样的 </h2>
<h3>三级标题是这样的 </h3>
<h4>四级标题是这样的 </h4>
<h5>五级标题是这样的 </h5>
<h6>六级标题是这样的 </h6>
</body>
</html>
图 3-1 hn的屏幕输出结果
3.3.3 分段 <P>
HTML的浏览器是基于窗口的, 用户可以随
时改变显示区的大小, 所以 HTML将多个空
格以及回车看成一个空格, 这是和绝大多
数字处理器不同的 。 HTML的分段依赖于分
段元素 <P>。
<P>也有多种属性, 比较常用的属性是,
align＝ # # 可以是 left,center，
right,其含义同上文 。
例如,<p align=center>段落居中 </p>
当 HTML文件中有图形时，图形可能占据了
窗口的一端，图形的周围可能有较大的空白
区。这时，不带 clear属性的 <P>可能会使文
章的内容显示在该空白区内。为确保下一段
内容显示在图形的下方，可使用 clear属性。
clear属性的含义为,
?clear=left 下一段显示在左边界处空白
的区域。
?clear=right 下一段显示在右边界处空白
的区域。
?clear=all 下一段的左右两边都不许有别
的内容。
3.3.4 清单 List
清单用于列举事实。常用的清单有 3种格式，
即无序清单 (unordered List),有序清单
(ordered list)和定义清单 (definition
list)。
1,无序清单 (ul)
无序清单用 (ul,此处的 l不是数字 1)开始,
每一个清单条目用 <li>引导, 最后是 </ul>。
注意清单条目不需要结尾标记 </li>。 输出
时每一清单条目缩进, 并且以圈点标示 。
例如,
<ul>
<li>今天
<li>明天
</ul>
输出为,
○ 今天
○ 明天
2,有序清单 <ol>
有序清单与无序清单相比, 只是在输出时
清单条目用数字标示, 下面是一个例子及
其输出 。
<ol>
<li>今天
<li>明天
</ol>
输出为,
1,今天
2,明天
3,定义清单 <dl>
定义清单用于对清
单条目进行简短说
明的场合, 用 <dl>
开始, 清单条目用
<dt>引导, 它的说
明用 <dd>引导 。
<dl>
<dt>条目 1
<dd>条目 1的定义
<dt>条目 2
<dd>条目 2的定义
</dl>
输出为,
条目 1
条目 1的定义
条目 2
条目 2的定义
3.3.5 居中
很多元素都有对齐方式属性, 如 hn,p等 。
也 可 以 直 接 用 居 中 标 记
<center>… </center>,
图 3-2 对齐方式示例
<h3 align=center>今天的
</h3>
<center>
天气真好 ！！！
</center>
输出结果如图 3-2所示 。
3.4 超文本链接指针
超文本链接指针是 html最吸引人的优点之
一 。 使用超文本链接指针可以使顺序存放的
文件具有一定程度上随机访问的能力, 更加
符合人的思维方式 。 组织得好的链接指针不
仅能使读者跳过不感兴趣的章节, 而且有助
于更好地理解作者的意图 。
一个超文本链接指针由两部分组成,
一部分是被指向的目标, 它可以是同一文件
的另一部分, 也可以是世界另一端的一个文
件, 还可以是动画或音乐；
另一部分是指向目标的链接指针 。
3.4.1 统一资源定位器 URL
统一资源定位器 URL (Uiform Resource
Locator)是文件名的扩展。
在单机系统中，定位一个文件需要路径和文
件名，对于遍布全球的 Internet网，显然还
需要知道文件存放在哪个网络的哪台主机中
才行。与单机系统不一样的是在单机系统中，
所有的文件都由统一的操作系统管理，因而
不必给出访问该文件的方法；而在 Internet
上，各个网络、各个主机的操作系统可能不
一样，因此必须指定访问该文件的方法。一
个 URL包括了以上所有的信息。
它的构成为,protocol,//
machine.name[:port]/directory/filename
其中, protocol是访问该资源所采用的协议, 即
访问该资源的方法, 它可以是,
http,超文本传输协议, 该资源是 html文件 。
file,文件传输协议, 用 ftp访问该资源 。
ftp,文件传输协议, 用 ftp访问该资源 。
news,表明该资源是网络新闻组 。
machine.name,是存放该资源主机的 IP 地址, 通
常以字符形式出现, 如 mail.edu.cnport端口号：
是服务器在该主机所使用的端口号 。 一般情况下
端口号不需指定 。 只有当服务器所使用的端口号
不是缺省的端口号时才指定, 例如 WWW服务默认情
况下采用的端口号为 80,如果设置了其它的端口
号, 访问时必须加上端口号 。
directory和 filename,该资源的路径和文件名,
一个典型的 URL为,
http://www.edu.cn
它表示中国教育和科研计算机网 WWW服务器上的起
始 html文件。（文件具体存放的路径及文件名取
决于该 WWW服务器的配置情况）。
与单机系统绝对路径、相对路径的概念类似，统
一资源定位器也有绝对 URL和相对 URL之分。前面
所述的是绝对 URL。 相对 URL是相对于最近访问的
URL。 比如你正在浏览一个 URL为
http://www.edu.cn/index.html的文件，如
果想看同一个目录下的另一个文件如
http://www.edu.cn/news.html,就可以直
接使用 news.html,这时 news.html就是一个
相对 URL,它的绝对 URL为
http://www.edu.cn/news.html
3.4.2 指向一个目标 <a>
在 html文件中可用链接指针指向一个目标 。
其基本格式为,<a href="url">字符串 </a>
href属性中的 url是被指向的目标, 随后的
,字符串, 在 html文件中充当指针的角色,
它一般显示为蓝色, 也可以定义成其它颜色 。
当
用户用鼠标点击这个字符串时, 浏览器就会
将 url处的资源显示在屏幕上 。
在编写 html文件时，需要知道目标的 url。
如何才能得到目标的 url呢？对于自己主机内
的文件，它的 url 可以根据该文件的实际情
况决定。对于 Internet上的资源，在用浏览器
观看时，它的 url会在浏览器的, 地址栏, 中
显示出来，把它抄下来写到 html文件中即可。
此外，编写 html文件时，对有可能确定关
系的一组资源（比如在同一个目录中）应采
用相对 url,这不仅可以简化 html文件，而且
便于维护。比如当需要将某个目录整个搬到
另外一个地方或把某一主机的资源移到另一
台主机时，用相对 url写的 html文件不用更新
其中的 url。但如果用绝对 url编写 html文件，
那么就逐个修改每个链接指针中的 url。
若各个资源之间没有固定的关系，这时就
只能用绝对 url了。
3.4.3 标记一个目标
上面提到的链接指针可以使读者在整个
Internet网上方便地链接。但如果编写了一
个很长的 html文件，怎么能在同一文件的不
同部分之间也建立起链接，使用户方便地在
上下方之间跳转呢？ 前面提到一个超文本链接
指针包括两个部分：一是指向目标的链接指针,
二是被指向的目标。对于一个完整的文件，
可以用它的 url来唯一地标识它，但对于同
一文件的不同部分，怎样来标识呢？下面
的内容将介绍链接指针元素的另外的一个
用途：标识目标。
标识一个目标的方法为,
<a name="name">text</a>
name属 性将 放置该 标记的 地方 标记 为
,name”,name是一个全文唯一的标记串,
text部分可有可无 。 这样, 就把放置标记
的地方做了一个叫做, name”的标记 。
做好标记后，可以用下列方法来指向它,
<a href="url#name">text </a>
url是放置标记的 html文件的 url name是标记名 。
对于同一个文件, 可以写为,
<a href="#name">text </a>
这时就可以点取 text跳转到标记名为 name的部分
了 。
3.4.4 目标窗口
如果希望被指向的目标在一个新的窗口中显示,
可以使用 target属性来修饰链接指针元素 。 如,
< a href="url" target="window-name">text
</a>
可将 url代表的资源显示在一个新的窗口中,
该窗口的名字叫 window-name,它可以是本窗口
（ _ self）, 父 窗 口 （ _ parent）, 新窗口
（ _blank） 及整个浏览器窗口 （ _top） 。
3.4.5 图像链接指针
图像也可以做为链接指针 。 格式为,
<a href="url"><img src="url"></a>
可以看出, 上例中用 <img src="url">取代了链接指
针中 text的位置 。 <img src="url">是图像元素, 它
表明显示 url代表的图像文件 。
下面是一个简单的图像链接指针 。
<a href="www.edu.cn">中国教育和科研计算机网
<img src="edu.gif"></a>
3.4.6 图像地图（ image map）
上面介绍的图像链接指针每幅图只能指向一个
地点, 而图像地图可以把图像分成多个区域, 每
个区域指向不同的地点 。 这样, 就可以用图像地
图编写出很漂亮的 html文件 。
使用图像地图稍微复杂一点 。 图像地图不仅需
要在 html文件中说明, 它还需要一个后缀为,map的
文件, 用来说明图像分区及其指向的 url的信息 。
在,map文件中说明分区信息的格式如下,
rect url 左上角坐标, 右下角坐标
poly url 各顶点坐标
circle url 直径两端点坐标
default url
rect指定一个矩形区域, 该区域的位置由左上角坐
标和右下角坐标说明 。 poly指定一多边形区域, 该
区域的位置由各顶点坐标说明 。 circle 指定一圆形
区域, 该区域的位置由垂直通过圆心的直径与该
圆的交点坐标说明 。 default 指定图像地图其它部
分的 url。
坐标的写法为,x,y,各点坐标之间用空格分开 。
下面是一个完整的说明文件,
default,http://www.edu.cn
rect,http://www.ibm.com 140,20 280,60
poly,http://www.microsoft.com 180,80 200,140
circle,http://www.yahoo.com 80,140 80,100
图像地图需要一个特殊的处理程序 imagemap。
imagemap放在 /cgi-bin 中。在 html 文件中引用图像
地图的格式为,
<a href="/cgi-bin/imagemap/mymap.map">
<img src="mymap.gif" ismap></a>
可以看出这是一个包含图像元素的链接指针元素。
图像元素指明用于图像地图的图像的 url,并用
Ismap属性说明。需要说明的是链接指针中的 href
属性，它由两部分组成：第一部分是 /cgi-
bin/imagemap,它指出用哪个程序来处理图像地
图，必须原样写入；第二部分是图形地图的说明
文件 mymap.map。 /cgi-bin/imagemap/mymap.map
绝不表示 mymap.map在 /cgi-bin/imagemap目录中。
在 netscape扩展中，图像地图可以用一种比较
简化的方式来表示，这就是客户端图像地图。
用户端地图可以将图像地图的说明文件写在
html文件中，而且不需要另外的程序来处理。
这就使 html作者可以用同别的元素相一致的
写法来写图像地图。
用户端图像地图的格式为,
<img src="url" usemap="#mymap">
src="url" 用于指定用作图像地图的图像 。
usemap属性指明这是客户端图像地图 。
其中的, #mymap”是图像文件说明部分的标
记名，浏览器寻找名字为 mymap的 <map>元素
并从中得到图像地图的分区信息。 客户端图
像地图的分区信息用 <map name=mapname>元
素说明,name属性命名 <map>元素。
图像地图的各个区域用 <area shape="形状 "
coords="坐标 " href="url">说明，形状可
以是,
rect矩形, 用左上角, 右下角的坐标表示,
各个坐标值之间用逗号分开； poly多边形,
用各顶点的坐标值表示； circle圆形, 用圆
心及半径表示, 前两个参数分别为圆心的横,
纵坐标, 第三个参数为半径 。
href="url",表示该区域所指向的资源的
url,也可以是 nohref,表示在该区域鼠标
点取无效 。
客户端图像地图各个区域可以重叠，重叠区
以先说明的条目为准，下面是一个例子,
<img src="mapimg.gif" usemap="#Face">
<map name="Face">
<!Text BOTTON> 此行是注释
< area shape="rect" href="page.html"
coords="140,20,280,60">
<!Triangle BOTTON>
<area shape="poly" href="image.html"
coords="100,100,180,80,200,140">
<!FACE>
<area shape="circle" href="nes.html"
coords="80,100,60>
</map>
3.5 版面风格控制
使用 HTML可以对 Web页面的版面进行控制,
比如字体大小, 分行, 画线, 背景和文本颜
色等等 。
3.5.1 字体
1,字号
html有七种字号, 1号最小, 7号最大 。 默认
字号为 3,可以用 <font size=字号 >来设置新
的字号 。
设置文本的字号有两种办法：一种是设置绝
对字号, 如 <font size=字号 >；另一种是
设置文本的相对字号，如 <font size=± n>。
用第二种方法时“＋”号表示字体变大，
“－”号表示字体变小。
<font size=7>size=7:今天天气很好 ！ </font><br>
<font size=6>size=6:今天天气很好 ！ </font><br>
<font size=5>size=5:今天天气很好 ！ </font><br>
<font size=4>size=4:今天天气很好 ！ </font><br>
<font size=3>size=3:今天天气很好 ！ </font><br>
<font size=2>size=2:今天天气很好 ！ </font><br>
<font size=1>size=1:今天天气很好 ！ </font><br>
输出结果为,
图 3-3 不同字号的输出结果
2,字体风格
字体风格分为物理风格和逻辑风格。物理风
格直接指定字体，其字体有黑体 <b>,斜体
<i>,下划线 <u>,打字机体 <tt>。 逻辑风格
用于指定文本的作用。如,
<em>强调 <srrony>特别强调 <code>源代码
<samp>例子 <kbd>键盘输入 <var>变量
<dfn>定义 <cite>引用 <small>较小 <big>较大
<sup>上标 <sup>下标
3,闪烁
<blink>文本 </blink>可使文本闪烁, 闪烁
频率为 1秒钟一次 。
3.5.2 横线（ hr）
横线，一般用于分隔同一文本的不同部分。
在窗口中划一条横线非常简单，只要写一个
<hr>即可。横线的宽度用 <hr size=n>指定，
n是线宽，单位是象素。例,<hr size=10>。
<hr width=#>指定横线长度, 既可以指定绝
对线长, 也可以指定横线长度占窗口宽度的
百分比 。 例 <hr width=50>,<hr width=50%>。
横线的位置用 <hr align=#>指定 。 #是 left或
right之一 。 left表示左端与左边界对齐,
right是右端与右边界对齐 。 默认时, 横线出
现在窗口中央 。
3.5.3 行间图像
行间图像可使网页更加漂亮, 但是过大的图
像会导致网络通讯量急剧增大, 延长访问时
间 。 所以在主页上不宜采用很大的图像 。
如果确实需要一些大图像, 最好在主页中用
一个缩小的图像指向原图, 并标明该图的大
小 。 这样访问者可以快速地访问你的主页,
自己选择看还是不看那些图像 。
图像的基本格式为,
<img src="image-url">或 <img src="image-urd"
alt="text">
image-url是图像文件的 url。 目前, 大部分浏
览器支持,gif和,jpg文件, alt属性告诉不支持
图像的浏览器用 text代替该图 。
图像在窗口中会占据一块空间, 在图像的左
右可能会有空白, 不加说明时, 浏览器将
随后的文本显示在这些空白中, 显示的位置
由 align属性指定 。
用 align=left,right时, 图像是一个浮动图像 。
比如 align=left,图像必须挨着左边框, 它把
原来占据该块空白的文本, 挤走,, 或挤到
它右边, 或挤到它上下 。
文本与图像的间距用 vspace=#,hspace=#指
定, #是整数, 单位是像素 。 前者指定纵向
间距, 后者指定横向 间距 。
3.5.4 分行 <br>和禁止分行 <nobr>
<br>表示在此处分行, <nobr>… </nobr>将通
知浏览器, 其中的内容在一行内显示, 若
一行内显示不了, 则超出部分将被裁剪掉 。
<br clear=#>中的 clear属性标明下一行的情况，
如 clear=left,表示下一行从左边界处开始。
#可以是 left,right,all之一。
3.5.5 背影和文本颜色
窗口背景可以用下列方法指定,
<body background="image-url">
<body bgcolor=# text=# link=# alink=#
vlink=#>
第一行指定的是填充背景的图像, 如果图像
的大小小于窗口大小, 则把背景图像重复,
直到填满窗口区域 。 第二行指定的是 16进制
的红, 绿, 蓝分量 。
bgcolor,背景颜色
text,文本颜色
link,链接指针颜色
alink,活动的链接指针颜色
vlink,已访问过的链接指针颜色
例如,
<body bgcolor=FF0000>大红背景色。
注意, 此时体元素必须写完整, 即用
<body>结束。
3.5.6 转义字将与特殊字符
html中 <,>及 &字符有特殊含义, （ 前两
个字符用于链接签, &用于转义 ）, 不能直
接使用 。 要使用这三个字符, 必须用它们的
转义序列 。
l & 的转义序列为 &s 或 &；
l < 的转义序列为 <或 <；
l > 的转义序列为 >或 >；
前者为字符转义序列, 后者为数字转义序列 。
例如,
<font>显示为 <font>。
若直接写为 <font>则会被认为是一个链接签。
需要说明的是,
l 转义序列各字符间不能有空格 。
l 转义序列必须以, ;” 结束 。
l 单独的 &不被认为是转义开始 。
如, & lt;”被解释为, & lt;”而不是
,<” 。
另一个需要转义的字符是引号, 它的转义序
列为, "”或, "”, 例如 <img
src="image.gif" alt="A &quol; real
"example">
html使用的字符集是 ISO 8859 -1字符集，该
字符集中有许多在标准键盘上无法输入的字
符。对这些特殊字符只能使用转义序列。
3.6 表格（ Table）
3.6.1 表格的基本形式
一个表由 <table>开始, </table>结束,
表的内容由 <tr>,<th>和 <td>定义 。 <tr>说
明表的一个行, 表有多少行就有多少个 <tr>；
<th>说明表的列数和相应栏目的名称, 有多
少个栏就有多少个 <th>； <td>则填充由 <tr>
和 <th>组成的表格 。 border属性用来说明是
否用表格线分开 。
3.6.2 有通栏的表
有横向通栏的表用 <th colspan=#>属性说明,
colspan表示横向栏距, #代表通栏占据的网
格数, 它是一个小于表的横向网格数的整数 。
有纵向通栏的表用 <rowspan=#>属性说明。
rowspan表示纵向栏距,#表示通栏占据的网
格数，应小于纵向网络数。需要说明的是有
纵向通栏的表，每一行必须用 </tr>明确表示
一横向栏目结束,这是和表的基本形式不同
的。
3.6.3 表的大小、边框宽度及表格间距
表的大小用 width=#和 height=#属性说明。前者
为表宽，后者为表高,#是以像素为单 位的整
数。
边框宽度由 border=#说明, #为宽度值, 单位是
像素 。
表格间距即划分表格的线的粗细用
cellspacing=#表示,# 的单位是像素。
3.6.4 表中文本的输出
文本与表框的距离用 cellpadding=#说明 。
表格的宽度大于其中的文本宽度时, 文本
在其中的输出位置用 align=#说明 。 #是 left，
center和 right三者之一, 分别表示左对齐,
居中和右对齐 。 align属性可修饰 <tr>,<th>
和 <td>链接签 。
表格的高度大于其中文本的高度时, 可以用
valign=#说明文本在其中的位置 。 #是 top，
middle,bottom,baseline四者之一 。 分别
表示上对齐, 文本中线与表格中线对齐, 下
对齐, 文本基线与表格中线对齐 。 特别注意
的是基线 （ baseine） 对齐方式, 它使得文
本出现在网格的上方而不是想象中的下半部 。
同样, valign可以修饰 <tr>,<th>,<td>中
的任何一个 。
3.6.5 浮动表格
所谓浮动表格是指表与文件中内容对齐时,
若在现在位置上不能满足其对齐方式, 表格
会上下移动, 即, 挤开, 一些内容, 直到满
足其对齐要求 。
浮动属性一般由 align=left或 right指定
3.6.6 表格颜色
表格的颜色用 bgcolor=#指定 。 #是 16进制的
6位数, 格式为 rrggbb,分别表示红, 绿,
蓝三色的分量 。 或者是 16种已定义好的颜色
名称, 参见文本颜色 。
3.7 分框 Frame
分框将浏览器的窗口分成多个区域, 每个区
域可以单独显示一个 html文件, 各个区域也
可相关连地显示某一个内容 。 比如可以将索
引放在一个区域, 文件内容显示在另一个区
域 。
分框的基本结构如下,
<html>
<head>
<title>… </title>
</head>
<noframes>… </noframes>
<frameset>
<frame src="url">
</frameset>
</html>
<noframes>… </noframes>中的内容显示在不
支持分框的浏览器窗口中，因而这里需指
向一个普通版本的 html文件, 以便供使用不
支持分框浏览器的用户阅读 。
分框由 <frameset>指定, 并且可以嵌套,
分区中部分显示的内容用 <frame>指定 。 可
以将窗口横向分成几个部分, 也可以分成纵
向几个部分, 还可以混和分框 。
横向分框用 <frameset cols=#>指定, #可以
是一个百分数, 也可以是一整数 。 前者规定
各框占窗口的百分数, 后者指定各框的绝对
大小 。
纵向分框用 <frameset cols=#>指定 。
将窗口分成横纵几个区域时, 用 <framset>
代替 <frame>链接即可将原来分好的 <frame>
区域再次分框 。
分框与其中的文本间距可以用
Marginwidth=#和 Marginheigh=#来指定，前
者指定文本与分框的边缘的横向距离，后者
为纵向距离，其单位都为象素。
3.8 特技与多媒体
利用 HTML中的特殊标记, 可以实现简单的特
技, 如会移动的文字, 以及在网页中嵌入多
媒体 。
3.8.1 会移动的文字
1,语法
<marquee>… </marquee>
例如,
<marquee>从右向左移动的文字 </marquee>
2,属性
（ 1） 方向
<direction=#> #=left,right
例如,
<marquee direction=left>从右向左移 ！
</marquee> <P>
<marquee direction=right>从左向右移 ！
</marquee>
（ 2） 方式
< behavior=#> #=scroll,slide,
alternate
例如,
<marquee behavior=scroll>一圈一圈绕着走 ！ </marquee>
<P>
<marquee behavior=slide>只走一次 ！ </marquee> <P>
<marquee behavior=alternate>来回走 ！ </marquee>
（ 3） 循环
<loop=#> #=次数, 若未指定则循环不止 (infinite)
例如,
< marquee loop=3 width=50% behavior=scroll>只走 3趟 ！
</marquee> <P>
<marquee loop=3 width=50% behavior=slide>我只走 3趟 ！
</marquee> <P>
<marquee loop=3 width=50% behavior=alternate>我只走 3趟 ！
</marquee>
<marquee scrollamount=20>我走得好快哟！
</marquee>
（ 4） 延时
<scrolldelay=#>
例如,
<marquee scrolldelay=500 scrollamount=100>走一步,
停一停 ！ </marquee>
3,外观设置
（ 1） 对齐方式 (Align),
<align=#> #=top,middle,bottom
＃ 为对齐上沿, 中间, 下沿 。
例如,
<font size=6>
<marquee align=# width=400> 我 会 移 动 啦 ！
</marquee>
</font>
（ 2） 底色
<bgcolor=#> #=rrggbb 16 进制数码, 或者是下列预
定义色彩,
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,
Lime,
Fuchsia,Green,Purple,Silver,Yellow,Aqua
例如,
<marquee bgcolor=aaaaee>我会移动啦 ！ </marquee>
（ 3） 背景面积
<height=# width=#>
例如,
<marquee height=40 width=50% bgcolor=aaeeaa>我
会移动啦 </marquee>
（ 4） 空白 （ Margins）
例如,
< hspace=# vspace=#>********<br> 嗨,<marquee
hspace=20 vspace=20 width=150 bgcolor=ffaaaa
align=middle>啦啦啦, 我会移动耶 ！ </marquee>大
家好 ！ <br>
3.8.2 嵌入多媒体
使用 embed标记可以将多媒体嵌入到网页中 。
1,基本语法
<embed src=#> #=URL
本标记用来在主页中嵌入多媒体文本, 如：
电影 （ movie）,声音 （ sound）,虚拟现实
语言 （ vrml） 等等 。 要使用 <embed>标记,
需要安装相应的插件 。 另外, 每个插件的
属性可能会是不同的 。
2,背景音乐
格式,
<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
例如,
<bgsound src="sound.wav" loop=3>
为播放 3次 sound.wav文件 。
3,插入视频剪辑
格式,
<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI（ Video for MS-
Windows） 文件来播放视频；用 url.gif这个
图象作为视频的封面, 即：在浏览器尚未完
全读入 AVI 文件时, 先在 AVI 播放区域显
示该图象 。 例如,
<img
src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI">
4,播放 AVI文件
格式,
<img start=#> #=fileopen,mouseover
缺省值是 #=fileopen,即在打开含本标记
的页面时开始播放 AVI。 mouseover 是指把
鼠标移到 AVI播放区域之上时才开始播放 AVI。
也 可 以 两 者 同 时 设 置, < img
start=fileopen,mouseover>。 另外, 用鼠
标在 AVI 播放区域点击一下, 也可令浏览
器开始播放该 AVI。 例如,
<img
src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" start=mouseover>
与播放 AVI文件相关的属性还有,
（ 1） 控制条 <img controls>
用来在视频窗口下附加 MS－ WINDOWS 的
AVI 播放控制条 。
例如,
< img src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" controls>
（ 2） 循环播放
格式,
<img loop=#>
<loop=infinite> 将循环播放不止 。
例如, 下例将循环 3次,
< img src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" loop=3>
（ 3） 延时
格式,
<img loopdelay=#> #=毫秒数
例如, 下例将循环 3次, 中间延时 250毫秒,
< img src="SAMPLE-S.GIF" dynsrc="SAMPLE-
S.AVI" loop=3 loopdelay=250>
本 章 小 结
本章主要介绍了 HTML的基础知识，在使用过
程中应注意,HTML标记书写在 <>之间，一般
成对使用；页面上的文本可以使用 HTML标记
进行排版；表格常用开将文本精确定位；页
面可以使用框架分页；设置超级链接；使文
字移动及在网页中可以嵌入声音和视频图像。
表单部分的内容将在后面章节中专门介绍。
习 题
1,编写一个文字导航窗体, 要求链接在新
窗体内打开 。
2．复制一张图（如图 3-2），为图中的每个
图标建立一个链接。
图 3-2 习题 2
3,编写一个如图 3-3所示的登陆界面 。
图 3-3 习题 3
