第 2 章 HTML 基础

第第 22 章章 HTMLHTML 基础基础

学习目的与要求：学习目的与要求：

本章主要介绍本章主要介绍 HtmlHtml 语言的基本知识，包括文语言的基本知识，包括文本编辑方法、多媒体和超级链接、制作表格本编辑方法、多媒体和超级链接、制作表格等，通过理论和实例相结合，使读者掌握使等，通过理论和实例相结合，使读者掌握使用用 HtmlHtml 语言编辑网页。要求认识语言编辑网页。要求认识 HtmlHtml 语语言中的常见网页标记，掌握言中的常见网页标记，掌握 WebWeb 文本编辑文本编辑的基本方法，掌握的基本方法，掌握 WebWeb 多媒体、超链接、多媒体、超链接、表格的编辑方法表格的编辑方法

第第 22 章章 HTMLHTML 基础基础 2.1 HTML2.1 HTML 基本构架基本构架 2.2 2.2 超链接超链接 2.2 2.2 多媒体效果多媒体效果 2.4 TABLE2.4 TABLE 表格表格 2.5 2.5 表单表单 2.6 2.6 实训实训 2.7 2.7 习题习题

2.1 HTML2.1 HTML 基本构架基本构架

从结构上讲，从结构上讲， HtmlHtml 文件由元素组成，组成文件由元素组成，组成 HtmlHtml 文件文件的元素有很多种，用于组织文件的内容和指导文件的内的元素有很多种，用于组织文件的内容和指导文件的内容和指导文件的输出格式。刚刚接触超文本，遇到的最容和指导文件的输出格式。刚刚接触超文本，遇到的最大的障碍就是一些用“大的障碍就是一些用“ <”<” 和“和“ >”>” 括起来的句子，我括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。文本的布局、文字的格式及五彩缤纷的画面。

超文本中的标签有两种，单标签和双标签。超文本中的标签有两种，单标签和双标签。 1. 1. 单标签单标签

某些标记称为“单标签”，因为它只需单独使用就能完整地表某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：达意思，这类标记的语法是：

< < 标签名称标签名称 >>最常用的单标签是最常用的单标签是 <BR>, <BR>, 它表示换行。它表示换行。

2. 2. 双标签双标签另一类标记称为“双标签”，它由“始标签”和另一类标记称为“双标签”，它由“始标签”和

“尾标签”两部分构成，必须成对使用，其中始“尾标签”两部分构成，必须成对使用，其中始标签告诉标签告诉 WebWeb 浏览器从此处开始执行该标记所表浏览器从此处开始执行该标记所表示的功能，而尾标签告诉示的功能，而尾标签告诉 WebWeb 浏览器在这里结束浏览器在这里结束该功能。始标签前加一个斜杠（该功能。始标签前加一个斜杠（ // ）即成为尾标记。）即成为尾标记。

这类标记的语法是：这类标记的语法是： << 标签标签 > > 内容内容 </ </ 标签标签 >> 其中“内容” 部分就是要被这对标记施加作用的其中“内容” 部分就是要被这对标记施加作用的

部分。部分。

例如你想突出对某段文字的显示，就将此段文字放在一例如你想突出对某段文字的显示，就将此段文字放在一 <EM> </EM><EM> </EM> 标记中：标记中：<EM><EM> 第一：第一： </EM></EM>

在起始链接签和结尾链接签之间的部分是元素体。每个元素都有名称和可以在起始链接签和结尾链接签之间的部分是元素体。每个元素都有名称和可以选择的属性，元素名称和属性都在起始链接签内标明。许多单标记和双标记选择的属性，元素名称和属性都在起始链接签内标明。许多单标记和双标记的始标记内可以包含一些属性，其语法是：的始标记内可以包含一些属性，其语法是：

< < 标签名字属性标签名字属性 1 1 属性属性 2 2 属性属性 2 … >2 … >各属性之间无先后次序，属性也可省略（即取默认值），例如单标记各属性之间无先后次序，属性也可省略（即取默认值），例如单标记 <HR><HR> 表表

示在文档当前位置画一条水平线（示在文档当前位置画一条水平线（ horizontal linehorizontal line ），一般是从窗口中当前），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：行的最左端一直画到最右端。带一些属性：

<HR SIZE=2 ALIGN=LEFT WIDTH="75%"><HR SIZE=2 ALIGN=LEFT WIDTH="75%"> 其中其中 SIZESIZE 属性定义线的粗细，属性值取整数，缺为属性定义线的粗细，属性值取整数，缺为 11 ；； ALIGNALIGN 属性表示对属性表示对

齐方式，可取齐方式，可取 LEFTLEFT （左对齐，缺省值），（左对齐，缺省值）， CENTERCENTER （居中），（居中）， RIGHTRIGHT（右对齐）；（右对齐）； WIDTH WIDTH 属性定义线的长度，可取相对值，（由一对“”号括属性定义线的长度，可取相对值，（由一对“”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如数表示的屏幕像素点的个数，如 WIDTH=200WIDTH=200 ），缺省值是），缺省值是 "100%""100%" 。。

HTMLHTML 文件以文件以 <HTML><HTML> 标记开始，以标记开始，以 </</HTML>HTML> 标记结束，中间的部分是标记结束，中间的部分是 HTMLHTML的元素体，的元素体， HTMLHTML 的元素体分文档头和文的元素体分文档头和文档体两部分，在文档头里，对这个文档进档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显行了一些必要的定义，文档体中才是要显示的各种文档信息。示的各种文档信息。

一个一个 HTMLHTML 文件应当具有以下结构：文件应当具有以下结构：<HTML><HTML><HEAD><HEAD>头部信息头部信息</HEAD></HEAD><BODY><BODY>文档主体，正文部分文档主体，正文部分</BODY></BODY></HTML></HTML>

其中其中 <HTML><HTML> 在最外层，表示这对标记间的内在最外层，表示这对标记间的内容是容是 HTMLHTML 文档。我们还会看到一些文档。我们还会看到一些 HompaHompagege 省略省略 <HTML><HTML> 标记，因为标记，因为 .html.html 或或 .htm.htm文件被文件被 WebWeb 浏览器默认为是浏览器默认为是 HTMLHTML 文档。文档。

<HEAD> <HEAD> 之间包括文档的头部信息，如文档总之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。标题等，若不需头部信息则可省略此标记。

<BODY> <BODY> 标记一般不省略，表示正文内容的开标记一般不省略，表示正文内容的开始。始。

2.1.1 2.1.1 常用页面标记常用页面标记 1. <html></html>1. <html></html> <html><html> 标签用于标签用于 HtmlHtml 文档的最前边，用来标识文档的最前边，用来标识 HtmlHtml 文档的开始。而文档的开始。而 </ht</ht

ml>ml> 标签恰恰相反，它放在标签恰恰相反，它放在 HtmlHtml 文档的最后边，用来标识文档的最后边，用来标识 HtmlHtml 文档的结束，文档的结束，两个标签必须一块使用。两个标签必须一块使用。

2. <head></head>2. <head></head> <head><head> 和和 </head></head> 构成构成 HtmlHtml 文档的开头部分，在此标签对之间可以使用文档的开头部分，在此标签对之间可以使用

<title></title><title></title> 、、 <script></script><script></script> 等等标签对，这些标签对都是描述等等标签对，这些标签对都是描述 HtmlHtml文档相关信息的标签对，文档相关信息的标签对， <head></head><head></head> 标签对之间的内容是不会在浏览器标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须一块使用。的框内显示出来的。两个标签必须一块使用。

2. <body></body>2. <body></body><body></body><body></body> 是是 HtmlHtml 文档的主体部分，在此标签对之间可包含文档的主体部分，在此标签对之间可包含 <p><p> 、、 </p></p> 、、

<h1><h1> 、、 </h1></h1> 、、 <br><br> 、、 <hr><hr> 等等众多的标签，它们所定义的文本、图像等等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块使用。将会在浏览器的框内显示出来。两个标签必须一块使用。 <body><body> 标签中还可标签中还可以有以下属性：以有以下属性：

4. <title></title>4. <title></title><body></body><body></body> 是是 HtmlHtml 文档的主体部分，文档的主体部分，

在此标签对之间可包含在此标签对之间可包含 <p><p> 、、 </p></p> 、、 <h1<h1>> 、、 </h1></h1> 、、 <br><br> 、、 <hr><hr> 等等众多的标等等众多的标签，它们所定义的文本、图像等将会在浏签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块览器的框内显示出来。两个标签必须一块使用。使用。

<body><body> 标签中还可以有以下属性：标签中还可以有以下属性：

属性用途属性用途示例示例 <body bgcolor="#rrggbb"> <body bgcolor="#rrggbb"> 设置背景设置背景颜色颜色

<body bgcolor="red"><body bgcolor="red">红色背景红色背景

<body text="#rrggbb"> <body text="#rrggbb"> 设置文本颜色设置文本颜色 <body text="#0000ff"><body text="#0000ff"> 蓝色文本蓝色文本 <body link="#rrggbb"> <body link="#rrggbb"> 设置链接颜色设置链接颜色 <body link="blue"><body link="blue"> 链接为蓝色链接为蓝色 <body vlink="#rrggbb"> <body vlink="#rrggbb"> 设置已使用设置已使用的链接的颜色的链接的颜色

<body vlink="green"> <body vlink="green">

<body alink="#rrggbb"> <body alink="#rrggbb"> 设置正在被设置正在被击中的链接的颜色击中的链接的颜色

<body alink="yellow"> <body alink="yellow">

表 2.1 <body> 标签中的属性

注意注意：：以上各个属性可以结合使用，如以上各个属性可以结合使用，如 <body bgcolor=“red” text<body bgcolor=“red” text=“#0000ff”>=“#0000ff”> 。引号内的。引号内的 rrggbbrrggbb 是用六个十六进制数表示的是用六个十六进制数表示的 RGBRGB(( 即红、绿、蓝三色的组合即红、绿、蓝三色的组合 ))颜色，如颜色，如 #ff0000#ff0000 对应的是红色。对应的是红色。

此外，还可以使用此外，还可以使用 HtmlHtml 语言所给定的常量名来表示颜色：语言所给定的常量名来表示颜色： BlackBlack 、、 WhitWhitee 、、 GreenGreen 、、 MaroonMaroon 、、 OliveOlive 、、 NavyNavy 、、 PurplePurple 、、 GrayGray 、、 YellowYellow 、、LimeLime 、、 AguaAgua 、、 FuchsiaFuchsia 、、 SilverSilver 、、 RedRed 、、 BlueBlue 和和 TealTeal ，，

如如 <body text="Blue"><body text="Blue"> 表示表示 <body></body><body></body> 标签对中的文本使用蓝色显标签对中的文本使用蓝色显示在浏览器的框内。示在浏览器的框内。

例如：例如：<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#00<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#00

00FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 t00FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed"> opmargin=2 bgproperties="fixed">

其中：其中：text="#000000" text="#000000" 用以设定文字颜色。用以设定文字颜色。 #000000 #000000 代表黑色，亦可以采用颜色的名称，即代表黑色，亦可以采用颜色的名称，即 tt

ext="black" ext="black" 。。 link="#0000FF" link="#0000FF" 设定一般文字链接颜色。设定一般文字链接颜色。 alink="#FF0000" alink="#FF0000"

设定刚按下时文字链接颜色。设定刚按下时文字链接颜色。 vlink="#0000FF" vlink="#0000FF" 设定链接后的颜色。（被按过）。设定链接后的颜色。（被按过）。

background="bg1.gif" background="bg1.gif" 设定背景墙纸。设定背景墙纸。 GIF GIF 或或 JPEG JPEG 皆可，可以是绝对路径或皆可，可以是绝对路径或

相对路径。相对路径。 bgcolor="#FFFFFF" bgcolor="#FFFFFF" bgproperties="fixed" bgproperties="fixed" 固定背景墙纸，当卷动文字时墙纸不会跟著卷动。固定背景墙纸，当卷动文字时墙纸不会跟著卷动。

设定背景颜色。当己设定背景墙纸时会失去作设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。用，除非墙纸有透明部分。

leftmargin=2 leftmargin=2 设定整份文件显示画面的左方边沿空间，单位设定整份文件显示画面的左方边沿空间，单位

为像素。为像素。 topmargin=2 topmargin=2 设定整份文件显示画面的上方边沿空间。设定整份文件显示画面的上方边沿空间。

5. <frameset></frameset>5. <frameset></frameset>使用过浏览器的人可能都会注意到浏览器窗口最使用过浏览器的人可能都会注意到浏览器窗口最

上边蓝色标题栏部分显示的文本信息，那些信上边蓝色标题栏部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在题显示到浏览器的顶部其实很简单，只要在 <t<title></title>itle></title> 标签对之间加入您要显示的文本标签对之间加入您要显示的文本即可。注意：即可。注意： <title></title><title></title> 标签对只能放在标签对只能放在<head></head><head></head> 标签对之间。标签对之间。

帧是由英文帧是由英文 FrameFrame 翻译过来的，它可以用翻译过来的，它可以用来向浏览器窗口中装载多个来向浏览器窗口中装载多个 HtmlHtml 文件。文件。即每个即每个 HtmlHtml 文件占据一个帧，而多个帧文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它可以同时显示在同一个浏览器窗口中，它们组成了一个最大的帧，也即是一个包含们组成了一个最大的帧，也即是一个包含多个多个 HtmlHtml 文档的文档的 HtmlHtml 文件文件 (( 我称它为主我称它为主文档文档 )) 。帧通常的使用方法是在一个帧中放。帧通常的使用方法是在一个帧中放置目录置目录 (( 即可供选择的链接即可供选择的链接 )) ，然后将，然后将 HtHtmlml 文件显示在另一个帧中。文件显示在另一个帧中。

<frameset></frameset><frameset></frameset> 标签对放在帧的主标签对放在帧的主文档的文档的 <body></body><body></body> 标签对的外边，也标签对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。可以嵌在其他帧文档中，并且可以嵌套使用。此标签对用来定义主文档中有几个帧并且各此标签对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有个帧是如何排列的。它具有 rowsrows 和和 colscols 属属性，使用性，使用 <frameset><frameset> 标签时这两个属性至标签时这两个属性至少必须选择一个，否则浏览器只显示第一个少必须选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管，定义的帧，剩下的一概不管，

<frameset></frameset><frameset></frameset> 标签对也就没有起到任何标签对也就没有起到任何作用了。作用了。 rowsrows 用来规定主文档中各个帧的行定位，用来规定主文档中各个帧的行定位，而而 colscols 用来规定主文档中各个帧的列定位。这两个用来规定主文档中各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或星号属性的取值可以是百分数、绝对像素值或星号(“*”)(“*”) ，其中星号代表那些未被说明的空间，如果，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，所有的帧按照空间平均分配。同时，所有的帧按照 rowsrows 和和 colscols的值从左到右，然后从上到下排列。示例如下：的值从左到右，然后从上到下排列。示例如下：

<frameset rows="*,*,*"><frameset rows="*,*,*"> 总共有三个按列排列的帧总共有三个按列排列的帧 ,,每个帧占整个浏览器窗口的每个帧占整个浏览器窗口的 1/2 1/2

<frameset cols="40%,*,*"><frameset cols="40%,*,*"> 总共有三个按行排列的总共有三个按行排列的帧帧 ,,第一个帧占整个浏览器窗口的第一个帧占整个浏览器窗口的 40%,40%,剩下的空间平剩下的空间平均分配给另外两个帧均分配给另外两个帧

<frameset rows="40%,*" cols="50%,*,200"><frameset rows="40%,*" cols="50%,*,200"> 总共总共有六个帧有六个帧 ,, 先是在第一行中从左到右排列三个帧先是在第一行中从左到右排列三个帧 ,,然后在然后在第二行中从左到右再排列三个帧第二行中从左到右再排列三个帧 ,, 即两行三列即两行三列 ,, 所占空间所占空间依据依据 rowsrows 和和 colscols 属性的值属性的值 ,, 其中其中 200200 的单位是像素的单位是像素

<frame><frame> 标签放在标签放在 <frameset></frameset><frameset></frameset> 之间，之间，用来定义某一个具体的帧。用来定义某一个具体的帧。 <frame><frame> 标签具有标签具有 srcsrc和和 namename 属性，这两个属性都是必须赋值的。属性，这两个属性都是必须赋值的。 srcsrc是此帧的源是此帧的源 HtmlHtml 文件名文件名 (( 包括网络路径，即相对包括网络路径，即相对路径或网址路径或网址 )) ，浏览器将会在此帧中显示，浏览器将会在此帧中显示 srcsrc 指定指定的的 HtmlHtml 文件；文件； namename 是此帧的名字，这个名字是是此帧的名字，这个名字是用来供超文本链接标签用来供超文本链接标签 <a href="" target=""><a href="" target=""> 中的中的targettarget 属性用来指定链接的属性用来指定链接的 HtmlHtml 文件将显示在哪文件将显示在哪一个帧中。一个帧中。

例如定义了一个帧，名字是例如定义了一个帧，名字是 mainmain ，在帧中显示的，在帧中显示的 HtHtmlml 文件名是文件名是 jc.htmjc.htm ，则代码是，则代码是 <frame src="jc.h<frame src="jc.htm" name="main">tm" name="main"> ，当您有一个链接，在点击了，当您有一个链接，在点击了这个链接后，文件这个链接后，文件 new.htmnew.htm 将要显示在名为将要显示在名为 mainmain的帧中，则代码为的帧中，则代码为 <a href="new.htm" target="m<a href="new.htm" target="main">ain"> 需要链接的文本需要链接的文本 </a></a> 。这样一来，就可以在。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当点一个帧中建立网站的目录，加入一系列链接，当点击链接以后在另一个帧中显示被链接的击链接以后在另一个帧中显示被链接的 HtmlHtml 文件。文件。

此外，此外， <frame><frame> 标签还有标签还有 scrollingscrolling 和和 nonoresizeresize 属性，属性， scrollingscrolling 用来指定是否显示用来指定是否显示滚动轴，取值可以是“滚动轴，取值可以是“ yes”(yes”( 显示显示 )) 、、““ no”(no”( 不显示不显示 )) 或“或“ auto”(auto”( 若需要则会若需要则会自动显示自动显示 ,, 不需要则自动不显示不需要则自动不显示 )) 。。 noresinoresizeze 属性直接加入标签中即可使用，不需赋属性直接加入标签中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。值，它用来禁止用户调整一个帧的大小。

6.<noframes></noframes>6.<noframes></noframes><noframes></noframes><noframes></noframes> 标签对也是放在标签对也是放在

<frameset></frameset><frameset></frameset> 标签对之间，用标签对之间，用来在那些不支持帧的浏览器中显示文本或来在那些不支持帧的浏览器中显示文本或图像信息。在此标签对之间先紧跟图像信息。在此标签对之间先紧跟 <body><body></body></body> 标签对标签对

2.1.2 2.1.2 文本格式标记文本格式标记 1. 1. 标题标题一般文章都有标题、副标题、章和节等结构，一般文章都有标题、副标题、章和节等结构， HTMLHTML 中中

也提供了相应的标题标签也提供了相应的标题标签 <Hn>,<Hn>, 其中其中 nn 为标题的等为标题的等 HTHTMLML 总共提供六个等级的标题，总共提供六个等级的标题， nn越小，标题字号就越大，越小，标题字号就越大，以下列出所有等级的标题：以下列出所有等级的标题： <H1>…</H1><H1>…</H1> 　　　　　第一级标题　　　　　第一级标题<H2>…</H2><H2>…</H2> 　　　　　第二级标题　　　　　第二级标题<H2>…</H2><H2>…</H2> 　　　　　第三级标题　　　　　第三级标题<H4>…</H4><H4>…</H4> 　　　　　第四级标题　　　　　第四级标题<H5>…</H5><H5>…</H5> 　　　　　第五级标题　　　　　第五级标题<H6>…</H6><H6>…</H6> 　　　　　第六级标题　　　　　第六级标题

2. 2. 段落标记段落标记不同于多数字处理器中的文档，不同于多数字处理器中的文档， HTML HTML 文件中的文件中的

换行是不重要的。你不用担心你的文本中行的长换行是不重要的。你不用担心你的文本中行的长度度 ( ( 当然最好不要超过当然最好不要超过 72 72 个字符个字符 )) ，在你的源，在你的源文件中任何地方可以使用换行，多个空白在你的文件中任何地方可以使用换行，多个空白在你的浏览器中被重叠成为一个空白。浏览器中被重叠成为一个空白。

源文件中各行之间有换行，但是源文件中各行之间有换行，但是 Web Web 浏浏览器忽略这些换行，只有遇到另一个览器忽略这些换行，只有遇到另一个 <p><p>标记时才开始新段落标记时才开始新段落 <P><P> 。用。用 <P><P> 标记指标记指明段落，浏览器忽略源文件中的任何缩进明段落，浏览器忽略源文件中的任何缩进或空行，如果没有或空行，如果没有 <P> <P> 元素，文档将被看元素，文档将被看作一个大段落处理。作一个大段落处理。

注意：结束标记注意：结束标记 </P></P> 可以省略，这是因为可以省略，这是因为当浏览器遇到一个当浏览器遇到一个 <P><P> 标记时，它认为前标记时，它认为前一个段落到此结束。一个段落到此结束。

2. 2. 文字的字体与样式文字的字体与样式 HTMLHTML提供了定义字体的功能，用提供了定义字体的功能，用 FACEFACE 属属

性来完成这个工作。性来完成这个工作。 FACEFACE 的属性值可以是本的属性值可以是本机上的任一字体类型，但是，只有使用浏览器机上的任一字体类型，但是，只有使用浏览器的电脑中装有相同的字体才可以在的浏览器中的电脑中装有相同的字体才可以在的浏览器中出现你预先设计的风格。出现你预先设计的风格。

经常使用经常使用 WORD WORD 的人对这三对标签对一定的人对这三对标签对一定很快就能掌握。很快就能掌握。 <b></b><b></b> 用来使文本以黑体用来使文本以黑体字的形式输出；字的形式输出； <i></i><i></i> 用来使文本以斜体字用来使文本以斜体字的形式输出；的形式输出； <u></u><u></u> 用来使文本以下加一用来使文本以下加一划线的形式输出。划线的形式输出。

<tt></tt><tt></tt> 用来输出打字机风格字体的文本；用来输出打字机风格字体的文本； <cite></cite><cite></cite> 用来输出引用方式的字体，通常是用来输出引用方式的字体，通常是

斜体；斜体； <em></em><em></em> 用来输出需要强调的文本用来输出需要强调的文本 ((通常是通常是

斜体加黑体斜体加黑体 )) ；； <strong></strong><strong></strong> 则用来输出加重文本则用来输出加重文本 ((通常通常

也是斜体加黑体也是斜体加黑体 )) 。这些标签对的示例也将在后。这些标签对的示例也将在后边综合的例子中出现。边综合的例子中出现。

<font></font><font></font> 是一对很有用的标签对，它是一对很有用的标签对，它可以对输出文本的字体大小、颜色进行随可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两意地改变，这些改变主要是通过对它的两个属性个属性 size size 和和 color color 的控制来实现的。的控制来实现的。

sizesize 属性用来改变字体的大小，它可以取属性用来改变字体的大小，它可以取值：值： -1-1 、、 11 和和 +1+1 ；；

而而 colorcolor 属性则用来改变文本的颜色，颜属性则用来改变文本的颜色，颜色的取值是我们在前面讲过的十六进制色的取值是我们在前面讲过的十六进制 RGRGBB颜色码或颜色码或 HtmlHtml 语言给定的颜色常量名。语言给定的颜色常量名。

为了让文字富有变化，或者为了着意强调某一部分，为了让文字富有变化，或者为了着意强调某一部分， HTMLHTML提供了提供了一些标签产生这些效果，现将常用的标签列举如下：一些标签产生这些效果，现将常用的标签列举如下：

<B><B>　　　　　　　　　　 </B></B>　　　　　粗体　　　　　　　　　　　　　　　　　　粗体　　　　　　　　　　　　　　　HTMLHTML 语言语言

<I><I>　　　　　　　　　　 </I></I>　　　　　斜体　　　　　　　　　　　　　　　　　　　斜体　　　　　　　　　　　　　　HTMLHTML 语言语言

<U><U>　　　　　　　　　　 </U></U>　　　　　加下划线　　　　　　　　　　　　　　　　加下划线　　　　　　　　　　　　　HTMLHTML 语言语言

<TT><TT>　　　　　　　　 <TT><TT>　　　　　打字机字体　　　　　　　　　　　　　　　打字机字体　　　　　　　　　　　　HTMLHTML 语言语言　　　　　　

<BIG> </BIG><BIG> </BIG>　　　　大型字体　　　　　　　　　　　　　　　　大型字体　　　　　　　　　　　　HTHTMLML 语言语言

<SMALL><SMALL>　　　　　　 </SMALL></SMALL>　　　小型字体　　　　　　　　　　　　　　　小型字体　　　　　　　　　　　　HTMLHTML 语言语言

<BLINK><BLINK>　　　　　　 </BLINK></BLINK>　　　闪烁效果　　　　　　　　　　　　　　　闪烁效果　　　　　　　　　　　　HHTMLTML 语言语言

<EM><EM>　　　　　　　　 </EM> </EM> 　　　　表示强调，一般为斜体　　　　　　　　　　表示强调，一般为斜体　　　　　　HTHTMLML 语言语言

<STRONG><STRONG>　　　　 </STRONG></STRONG>　　表示特别强调，一般为粗体　　　　　　表示特别强调，一般为粗体　　　　HTMLHTML 语言语言

<CITE><CITE>　　　　　　 </CITE></CITE>　　　用于引证、举例，一般为斜体　　　　　　用于引证、举例，一般为斜体　　　HTHTMLML 语言语言

4. 4. 文字的大小设置文字的大小设置提供设置字号大小的是属性提供设置字号大小的是属性 SIZESIZE ，可以通，可以通过指定过指定 SIZESIZE 属性就能设置字号大小，而属性就能设置字号大小，而 SISIZEZE 属性的有效值范围为属性的有效值范围为 11 －－ 77 ，其中缺省，其中缺省值为值为 22 。我们可以。我们可以 SIZESIZE 属性值之前加上属性值之前加上“＋”、“－”字符，来指定相对于字号“＋”、“－”字符，来指定相对于字号初始值的增量或减量。初始值的增量或减量。

5. 5. 文字的颜色的设置文字的颜色的设置文字颜色设置格式如下：文字颜色设置格式如下： <font color=color_value>…</font><font color=color_value>…</font>

6. 6. 定义性列表定义性列表采用定义性列表可以用来给每一个列表项采用定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用项另起一行显示。在应用中，列表项使用标签标签 <DT><DT> 标明，说明性文字使用标明，说明性文字使用 <DD><DD>表示。在定义性列表中，还有一个属性是表示。在定义性列表中，还有一个属性是 CCOMPACTOMPACT ，使用这个属性后，说明文字和，使用这个属性后，说明文字和列表项将显示在同一行。列表项将显示在同一行。 <DL><DL> <DT><DT> 第一项第一项 <DD><DD> 叙述第一项的定义叙述第一项的定义 <DT><DT> 第二项第二项 <DD><DD> 叙述第二项的定义叙述第二项的定义 <DT><DT> 第三项第三项 <DD><DD> 叙述第三项的定义叙述第三项的定义 </DL></DL>

7. 7. 序号列表序号列表序号列表和无序号列表的使用方法基本相序号列表和无序号列表的使用方法基本相同，它使用标签同，它使用标签 <OL></OL><OL></OL> ，每一个列，每一个列表项前使用表项前使用 <LI><LI> 。每个项目都有前后顺序。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：之分，多数用数字表示。其结构如下所示： <OL><OL><LI><LI>第一项第一项<LI><LI>第二项第二项<LI><LI>第三项第三项</OL></OL>

8. 无序号列表

无序号列表使用的一对标签是 <ul></ul> ，每一个列表项前使用 <LI> 。其结构如下所示： <UL><LI>第一项<LI>第二项<LI>第三项</UL>

9. 9. 位置控制位置控制通过通过 ALIGNALIGN 属性可以选择文字或图片的对齐方式，属性可以选择文字或图片的对齐方式， LEFLEF

TT 表示向左对齐，表示向左对齐， RIGHTRIGHT 表示向右对齐，表示向右对齐， CENTERCENTER 表表示居中。示居中。

基本语法如下：基本语法如下： <DIV ALIGN=#>#<DIV ALIGN=#>#＝＝ leftleft／／ rightright ／／ centercenter

另外，另外， ALIGNALIGN 属性也常常用在其它标签中，引起其内容位属性也常常用在其它标签中，引起其内容位置的变动。置的变动。

如：如： <P ALIGN=#><P ALIGN=#><HR ALIGN=#>#<HR ALIGN=#>#＝＝ leftleft／／ rightright ／／ centercenter<H1 ALIGN=#<H1 ALIGN=#〉〉

1010 、、 DivDiv 标签标签<DIV><DIV> 称为区隔标记，没有任何内容上的意称为区隔标记，没有任何内容上的意义，表示一块可显示义，表示一块可显示 HTML HTML 的区域。它被的区域。它被用来组合一大块的用来组合一大块的 HTMLHTML代码并赋予一定的代码并赋予一定的信息，大部分用类属性信息，大部分用类属性 classclass 和标识属性和标识属性 idid与元素联系起来，并与与元素联系起来，并与 CSSCSS 结合使用。结合使用。

属性属性 alignalign可选值：可选值： center ; left ; right center ; left ; right 。决定字、画、。决定字、画、

表格等居中、靠左或靠右。表格等居中、靠左或靠右。 <DIV align="center"> <DIV align="center"> 的作用和居中标记的作用和居中标记 <<

CENTER>CENTER> 一样。一样。

下面的例子使用了两个下面的例子使用了两个 DIVDIV 元素对两段文字进行元素对两段文字进行了不同的对齐处理。了不同的对齐处理。This example uses two DIV elements to align two sThis example uses two DIV elements to align two s

ections of text differently.ections of text differently.<DIV><DIV>此文本代表一段。此文本代表一段。</DIV></DIV><DIV ALIGN=CENTER><DIV ALIGN=CENTER>此文本代表另外一段，其中文本居中显示。此文本代表另外一段，其中文本居中显示。</DIV></DIV>

2.2 2.2 超链接超链接

超文本中的链接是其最重要的特性之一，使用者可以从超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个页面直接跳转到其他的页面、图象或者服务器。

链接的基本格式：链接的基本格式： <A HREF="<A HREF="资源地址资源地址 ">"> 链接文字链接文字 </A></A>

标签标签 <A><A> 表示一个链接的开始，表示一个链接的开始， </A></A> 表示链接的结束；表示链接的结束；属性“属性“ HREF”HREF” 定义了这个链接所指的地方；定义了这个链接所指的地方；通过点击“链接文字”可以到达指定的文件。通过点击“链接文字”可以到达指定的文件。

2.2.1 2.2.1 本地链接本地链接

对同一台机器上的不同文件进行的连接称为对同一台机器上的不同文件进行的连接称为本地链接，它使用本地链接，它使用 UNIXUNIX 或或 DOSDOS 系统中文系统中文件路径的表示方法，采用绝对路径或相对路件路径的表示方法，采用绝对路径或相对路径来指示一个文件。径来指示一个文件。

2.2.2 URL2.2.2 URL 链接链接

如果链接的文件在其它服务器上，我们就如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种要弄清我们所指向的文件时采用的哪一种URLURL 地址。地址。 URLURL 意思是统一资源定位器，意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来通过它可以以多种通讯协议于外界沟通来存取信息。存取信息。

URLURL 链接的形式是：链接的形式是：协议名：协议名： //// 主机主机 ..域名／路径／文件名域名／路径／文件名

2.2 2.2 多媒体效果多媒体效果

alt=valuealt=value border=nborder=n height=nheight=n width=nwidth=n hspace=nhspace=n vspace=nvspace=n ismap=imageismap=image usemap=urlusemap=url

onload=functiononload=function onabort=functiononabort=function onerror=functiononerror=function dynsrc=../../urldynsrc=../../url controls=controlscontrols=controls loop=nloop=n start=type>start=type>

各参数的具体含义：各参数的具体含义：alignalign ：是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默：是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默

认情况下是靠上，即认情况下是靠上，即 alignalign＝＝ toptop 。在图文混排时，这个参数很有。在图文混排时，这个参数很有用。用。

classclass 和和 idid ：分别指定图像所属的类型和图像的：分别指定图像所属的类型和图像的 idid 号。号。namename ：用于设定图像的名称。：用于设定图像的名称。srcsrc ：规定插入的图像的：规定插入的图像的 urlurl 地址，也就是含路径的图像文件名。地址，也就是含路径的图像文件名。titletitle ：设定图像的标题。：设定图像的标题。

altalt ：表示图像的替代字，主要用于在浏览器还没有装入图像（或：表示图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，先显示有关此图像的信息。这是初学者最关闭图像显示）的时候，先显示有关此图像的信息。这是初学者最易忽略的参数，因不设定它在正常显示时没问题。易忽略的参数，因不设定它在正常显示时没问题。

borderborder ：设定图片的边框。：设定图片的边框。 heightheight 和和 widthwidth ：分别用于指定图像的高度和宽度，可以与图片：分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。原来的宽度和高度不同。

hspacehspace 和和 vspacevspace ：分别用于设定图像的左右边框大小和上下边框：分别用于设定图像的左右边框大小和上下边框大小，在图文混排时会用到。大小，在图文混排时会用到。

ismpismp 和和 usemapusemap ：在应用图像地图时使用。：在应用图像地图时使用。 ismapismap 表示图像地图的数据存放表示图像地图的数据存放在服务器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给服务在服务器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给服务器处理。器处理。 usemapusemap 则用于设定图像地图的名称。则用于设定图像地图的名称。

onloadonload 、、 onabortonabort 、、 onerroronerror 对应于设定的子程序，分别在图像被对应于设定的子程序，分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序，不常用。载入、取消载入、载入出错的情况下各自对应的子程序，不常用。

dynsrcdynsrc ：指定要下载的影像片断的：指定要下载的影像片断的 urlurl 地址。地址。 controlscontrols ：设定影像播放的控制接钮。：设定影像播放的控制接钮。 looploop ：指定影像片断的播放次数，当：指定影像片断的播放次数，当 loop=-1loop=-1时，影像片断将循环时，影像片断将循环播放直至页面更新。播放直至页面更新。

startstart ：设定何时开始播放影像片断，有三种选择：：设定何时开始播放影像片断，有三种选择： start=fileopenstart=fileopen表示页面载入后即开始播放，默认的就是这种状态；表示页面载入后即开始播放，默认的就是这种状态； start=mouseostart=mouseoverver 表示当鼠标移到影像上即开始播放；表示当鼠标移到影像上即开始播放； start=fileopen,mouseovestart=fileopen,mouseoverr 表示当有上面两种情况之一发生时就开始播放。表示当有上面两种情况之一发生时就开始播放。

2.2.2 2.2.2 播放音乐播放音乐 HTMLHTML 除了可以插入图形之外，还可以播除了可以插入图形之外，还可以播

放音乐和视频等。用浏览器可以播放的音放音乐和视频等。用浏览器可以播放的音乐格式有：乐格式有： MIDIMIDI音乐、音乐、 WAVWAV 音乐、音乐、 AUAU格式。另外在利用网络下载的各种音乐格格式。另外在利用网络下载的各种音乐格式中，式中， MP2MP2 是压缩率最高，音质最好的文是压缩率最高，音质最好的文件格式。件格式。

<bgsound><bgsound> 用用 <bgSound><bgSound> 标签加入背景音乐格式如下：标签加入背景音乐格式如下：

<bgsound="<bgsound=" 你要加的音乐文件你要加的音乐文件 .wav" loop.wav" loop="="播放的次数播放的次数 ">"> 其中其中 looploop 属性为属性为 00时表示循时表示循环播放，但环播放，但 bgsoundbgsound 标记只能适用于标记只能适用于 IEIE 。有。有很多朋友使用很多朋友使用 FRONTPAGEFRONTPAGE 做主页，只须在做主页，只须在页面中点击右键，选择页面属性页面中点击右键，选择页面属性 ,, 选定背景乐选定背景乐就可以了。就可以了。

点播音乐点播音乐将音乐做成一个链接，只需用鼠标在上面单击，就将音乐做成一个链接，只需用鼠标在上面单击，就

可以听到动人的音乐了，这样做的方法很简单：可以听到动人的音乐了，这样做的方法很简单：<AHREF="<AHREF="音乐地址音乐地址 ">">乐曲名乐曲名 </A></A> 例如：播放一段例如：播放一段 MIDIMIDI音乐：音乐：<AHREF=http://www.xaepi.edu.cn/"midi.mid"><AHREF=http://www.xaepi.edu.cn/"midi.mid">

MIDIMIDI音乐音乐 </A></A> 播放一段播放一段 AUAU 格式音乐：格式音乐：<AHREF= http://www.xaepi.edu.cn /"you.au"><AHREF= http://www.xaepi.edu.cn /"you.au">同桌的你同桌的你 -AU-AU音乐音乐 </A></A>同桌的你同桌的你 -AU-AU音乐音乐

自动载入音乐自动载入音乐

音乐自动载入基本语法：音乐自动载入基本语法：<EMBED SRC="<EMBED SRC="音乐文件地址音乐文件地址 ">"> 属性有：属性有：SRC="../../FILENAME" SRC="../../FILENAME" 设定音乐文件的路径设定音乐文件的路径 AUTOSTART=TRUE/FALSE AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自是否要音乐文件传送完就自动播放，动播放， TRUETRUE 是要，是要， FALSEFALSE 是不要，默认为是不要，默认为 FALSE FALSE

LOOP=TRUE/FALSE LOOP=TRUE/FALSE 设定播放重复次数，设定播放重复次数， LOOP=6LOOP=6 表示表示重复重复 66 次，次， TRUETRUE 表示无限次播放，表示无限次播放， FALSEFALSE播放一次即播放一次即停止。停止。

STARTIME="STARTIME=" 分分 ::秒秒 " " 设定乐曲的开始播放时设定乐曲的开始播放时间，如间，如 2020秒后播放写为秒后播放写为 STARTIME=00:20 STARTIME=00:20

VOLUME=0-100 VOLUME=0-100 设定音量的大小。如果没设设定音量的大小。如果没设定的话，就用系统的音量。定的话，就用系统的音量。

WIDTH HEIGHT WIDTH HEIGHT 设定控制面板的大小设定控制面板的大小 HIDDEN=TRUE HIDDEN=TRUE 隐藏控制面板隐藏控制面板 CONTROLS=CONSOLE/SMALLCONSOLE CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样式设定控制面板的样式

2.IE2.IE 中的背景音乐中的背景音乐格式：格式： <bgsound src="<bgsound src=" 音乐文件地址音乐文件地址 " lo" lo

op=#> op=#> 说明：说明： ## 是数字类型，表示循环的次数是数字类型，表示循环的次数例：例：<bgsound src=" http://www.xaepi.edu.cn <bgsound src=" http://www.xaepi.edu.cn

/sound.wav" loop=2>/sound.wav" loop=2>

2.2.2 2.2.2 播放视频播放视频

用浏览器可以播放的格式有：MOV 格式、 AVI 格式。

1.1. 链接一个视频文件链接一个视频文件将视频文件做成一个链接的方法：将视频文件做成一个链接的方法：<AHREF=<AHREF= 视频地址视频地址 ">"> 视频名称视频名称 </A></A>

例如：播放一段视频。例如：播放一段视频。<AHREF= http://www.xaepi.edu.cn /"wel<AHREF= http://www.xaepi.edu.cn /"wel

come.avi">WINDOWS95</A>come.avi">WINDOWS95</A>

2.2. 自动载入视频自动载入视频与音乐的播放一样，我们可以使用与音乐的播放一样，我们可以使用 EMBEDEMBED

标签播放视频，标签播放视频，<EMBED SRC="<EMBED SRC=" 视频文件地址视频文件地址 ">"> 属性有：属性有：SRC="../../FILENAME" SRC="../../FILENAME" 设定文件的路径设定文件的路径 AUTOSTART=TRUE/FALSE AUTOSTART=TRUE/FALSE 是否要文件传是否要文件传送完就自动播放，送完就自动播放， TRUETRUE 是要，是要， FALSEFALSE是不要，默认为是不要，默认为 FALSE FALSE

LOOP=TRUE/FALSE LOOP=TRUE/FALSE 设定播放重复次数，设定播放重复次数， LOOP=6LOOP=6表示重复表示重复 66 次，次， TRUETRUE 表示无限次播放，表示无限次播放， FALSEFALSE播放一次即停止。播放一次即停止。

STARTIME="STARTIME=" 分分 ::秒秒 " " 设定开始播放时间，如设定开始播放时间，如 2020秒秒后播放写为后播放写为 STARTIME=00:20 STARTIME=00:20

VOLUME=0-100 VOLUME=0-100 设定音量的大小。如果没设定的话，设定音量的大小。如果没设定的话，就用系统的音量。就用系统的音量。

WIDTH HEIGHT WIDTH HEIGHT 设定控制面板的大小设定控制面板的大小

2.4 TABLE2.4 TABLE 表格表格

表格对于制作网页是很重要的，现在很多表格对于制作网页是很重要的，现在很多很多网页都是使用多重表格，主要是因为很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设且还可以任意的进行背景和前景颜色的设置。置。

2.4.1 2.4.1 表格的基本结构表格的基本结构基本结构：基本结构： <table></table><table></table> 标签对用来创建一个表格。标签对用来创建一个表格。 <tr></tr><tr></tr> 标签对用来创建表格中的每一行。此标签对只能标签对用来创建表格中的每一行。此标签对只能

放在放在 <table></table><table></table> 标签对之间使用，而在此标签对之间标签对之间使用，而在此标签对之间加入文本将是无用的，因为在加入文本将是无用的，因为在 <tr></tr><tr></tr> 之间只能紧跟之间只能紧跟 <td><td></td></td> 标签对才是有效的语法，标签对才是有效的语法， <td></td><td></td> 标签对用来创建标签对用来创建表格中一行中的每一个格子，此标签对也只有放在表格中一行中的每一个格子，此标签对也只有放在 <tr></tr<tr></tr>> 标签对之间才是有效的，您想要输入的文本也只有放在标签对之间才是有效的，您想要输入的文本也只有放在 <t<td></td>d></td> 标签对中才有效标签对中才有效 (( 即才能够显示出来即才能够显示出来 )) 。。

<th></th><th></th> 标签对用来设置表格头，通常是黑体居中文字。标签对用来设置表格头，通常是黑体居中文字。

2.4.2 2.4.2 表格的标题表格的标题

表格可以有一个标题，采用表格可以有一个标题，采用 <caption><caption> 标标签定义。格式如下：签定义。格式如下：

<caption>…</caption><caption>…</caption>

2.4.2 2.4.2 表格的尺寸设置表格的尺寸设置

1. 1. 表格的尺寸设置表格的尺寸设置一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整

的，如果我们要直接固定表格的大小，可以使用下列方式：的，如果我们要直接固定表格的大小，可以使用下列方式：<table width=n1 height=n2><table width=n1 height=n2>

widthwidth 和和 height height 分别指定表格一个固定的宽度和长度；分别指定表格一个固定的宽度和长度； n1n1 和和 n2 n2 可以用像素来表示，也可以用百分比（与整个屏幕相比的大可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。小比例）来表示。

2. 2. 边框尺寸设置边框尺寸设置格式：格式： <table border=#><table border=#>

边框是用边框是用 borderborder 属性来体现的，它表示表格的边框边厚度和框线。将属性来体现的，它表示表格的边框边厚度和框线。将borderborder 设成不同的值，有不同的效果。设成不同的值，有不同的效果。

2. 2. 格间线宽度格间线宽度格与格之间的线为格间线，它的宽度可以使用格与格之间的线为格间线，它的宽度可以使用 <TABLE><TABLE> 中的中的 CELLSPCELLSP

ACINGACING 属性加以调节。属性加以调节。

格式是：格式是：<TABLE CELLSPACING=#>#<TABLE CELLSPACING=#># 表示要取用的像素值表示要取用的像素值

4. 4. 内容与格线之间的宽度内容与格线之间的宽度我们还可以在我们还可以在 <TABLE><TABLE> 中设置中设置 CELLPADDINGCELLPADDING 属性，用来规定内容属性，用来规定内容与格线之间的宽度。与格线之间的宽度。

格式为：格式为：<TABLE CELLPADDING=#><TABLE CELLPADDING=#>## 表示要取用的像素值表示要取用的像素值

2.4.4 2.4.4 表格内文字的对齐、布局表格内文字的对齐、布局

1.1. 左右排列左右排列格式：格式： <tr align=#> <tr align=#> <th align=#> <th align=#> <td align=#> <td align=#> 说明：说明：用用 ALIGNALIGN 属性来设置属性来设置 #=left#=left ，， centercenter ，， rightright ，分别表示居左，居右，，分别表示居左，居右，

居中。居中。

1.1. 左右排列左右排列格式：格式：<tr align=#> <tr align=#> <th align=#> <th align=#> <td align=#> <td align=#> 说明：说明：用用 ALIGNALIGN 属性来设置属性来设置#=left#=left ，， centercenter ，， rightright ，分别表示居左，，分别表示居左，

居右，居中。居右，居中。

2. 2. 上下排列上下排列格式：格式：<tr valign=#> <tr valign=#> <th valign=#> <th valign=#> <td valign=#> <td valign=#> 说明：说明：用用 VALIGNVALIGN 属性来设置属性来设置#=top#=top ，， middlemiddle ，， bottombottom ，， baselinebaseline ，，

分别表示上齐，居中，下齐，基线。分别表示上齐，居中，下齐，基线。

2.4.5 2.4.5 跨多行、多列的表元跨多行、多列的表元要创建跨多行、多列的表元，只需在要创建跨多行、多列的表元，只需在 <TH><TH> 或或 <TD><TD> 中加入中加入 ROWSPAROWSPA

NN 或或 COLSPANCOLSPAN 属性，这两个属性的值，表明了表元中要跨越的行或列属性，这两个属性的值，表明了表元中要跨越的行或列的个数。的个数。

跨多列的表元跨多列的表元 <th colspan=#><td colspan=#><th colspan=#><td colspan=#> colspancolspan 表示跨越的列数，例如表示跨越的列数，例如 colspan=2colspan=2 表示这一格的宽度为两个列表示这一格的宽度为两个列

的宽度。的宽度。跨多行的表元跨多行的表元 <th rowspan=#><td rowspan=#><th rowspan=#><td rowspan=#>

rowspanrowspan 所要表示的意义是指跨越的行数，例如所要表示的意义是指跨越的行数，例如 rowspan=2rowspan=2 就表示这就表示这一格跨越表格两个行的高度。一格跨越表格两个行的高度。

2.4.6 2.4.6 表格的颜色表格的颜色在表格中，既可以对整个表格填入底色，也可以对任何一在表格中，既可以对整个表格填入底色，也可以对任何一

行、一个表元使用背景色。行、一个表元使用背景色。表格的背景色彩表格的背景色彩 <table bgcolor=#> <table bgcolor=#> 行的背景色彩行的背景色彩 <tr bgcolor=#> <tr bgcolor=#> 表元的背景色彩表元的背景色彩 <th bgcolor=#><th bgcolor=#> 或或 <td bgcolor=#> <td bgcolor=#> #=rrggbb 16#=rrggbb 16 进制进制 RGBRGB 数码数码 , , 或者是下列预定义色彩名称：或者是下列预定义色彩名称： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, LiBlack, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Li

me, Fuchsia, White, Green, Purple, Silver, Yellow, Ame, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua qua

2.5 2.5 表单表单

2.5.1 2.5.1 表单标记表单标记 1. 1. 格式：格式：

<form action="url" method=* target="_blan<form action="url" method=* target="_blank">k">

... ...

... ... <input type=submit> <input type=reset><input type=submit> <input type=reset></form> </form>

method method 定义处理程序从表单中获得信息的方式，定义处理程序从表单中获得信息的方式，值为：值为： GETGET 或或 POSTPOST 。。GET GET 处理程序从当前处理程序从当前 HtmlHtml 文档中获取数据，文档中获取数据，然而这种方式传送的数据量是有所限制的，一般然而这种方式传送的数据量是有所限制的，一般限制在限制在 1KB1KB 以下。以下。POST POST 当前的当前的 HtmlHtml 文档把数据传送给处理程序，文档把数据传送给处理程序，传送的数据量要比使用传送的数据量要比使用 GETGET 方式的大的多。方式的大的多。

targettarget 属性用来指定目标窗口或目标帧。属性用来指定目标窗口或目标帧。

2.5.2 2.5.2 文本标记文本标记 1. 1. 格式：格式：<input type="Text" value=" " name="" s<input type="Text" value=" " name="" s

ize=# maxlength =#> ize=# maxlength =#> 2. 2. 说明：说明：type="Text" type="Text" 能产生一单行文本框，上限为能产生一单行文本框，上限为

255 255 字元。字元。 name name 此一单行文本框名称。此一单行文本框名称。 value value 单行文本框内的默认值。若不填写单行文本框内的默认值。若不填写

则文本框是空白的，等待用户键入。则文本框是空白的，等待用户键入。

size #size # 表示这是单行文本框的显示的长度。表示这是单行文本框的显示的长度。 maxlength maxlength 这是单行文本框可输入字符的最这是单行文本框可输入字符的最

大值，为方便编排资料或避免错输入等，最大值，为方便编排资料或避免错输入等，最好设定上限，例如输入电话的可设为好设定上限，例如输入电话的可设为 88 位，位，年龄为年龄为 22 位等。位等。

2.5.2 2.5.2 下拉菜单下拉菜单

<select name="" size=# multiple ><select name="" size=# multiple > <option selected value=#> ...<option selected value=#> ... </select> </select> 1. <select></select>1. <select></select> 标签标签 <select></select><select></select> 标签对用来创建一个下标签对用来创建一个下拉列表框或可以复选的列表框。此标签对拉列表框或可以复选的列表框。此标签对用于用于 <form></form><form></form> 标签对之间。标签对之间。

<select><select> 具有具有 multiplemultiple 、、 namename 和和 sizesize属性。属性。

multiplemultiple 属性不用赋值，直接加入标签中属性不用赋值，直接加入标签中即可使用，加入了此属性后列表框就成了即可使用，加入了此属性后列表框就成了可多选的了；可多选的了； namename 是此列表框的名字，它与上边讲的是此列表框的名字，它与上边讲的 namnam

ee 属性作用是一样的；属性作用是一样的； sizesize 属性用来设置列表的高度，缺省时值为属性用来设置列表的高度，缺省时值为 11 ，，

若没有设置若没有设置 (( 加入加入 )multiple)multiple 属性，显示的将属性，显示的将是一个弹出式的列表框。是一个弹出式的列表框。

2. <option>2. <option> 标签标签用来指定列表框中的一个选项，它放在用来指定列表框中的一个选项，它放在 <select></select<select></select

>> 标签对之间。标签对之间。<option><option> 具有具有 selectedselected 和和 valuevalue 属性。属性。 selectedselected 用来指定默认的选项，用来指定默认的选项， valuevalue 属性用来给属性用来给 <option><option> 指定的那一个选项赋值，指定的那一个选项赋值，

这个值是要传送到服务器上的，服务器正是通过调用这个值是要传送到服务器上的，服务器正是通过调用 <s<select>elect>区域的名字的区域的名字的 valuevalue 属性来获得该区域选中的数属性来获得该区域选中的数据项的。据项的。

2.5.4 2.5.4 选项标记选项标记

1. Radio 1. Radio （单一选择）（单一选择）例如：例如： <input type="Radio" name="gender" <input type="Radio" name="gender"

value="female" align="MIDDLE" checkedvalue="female" align="MIDDLE" checked> >

type="Radio" type="Radio" 输入方式为输入方式为 RadioRadio ，能产生一单一选择，以，能产生一单一选择，以供点选。供点选。

name="gender" name="gender" 此一此一 Radio Radio 名称，参考名称，参考 Text Text 部分的说明。部分的说明。

value="female" value="female" 默认值。每一个默认值。每一个 radio radio 必须及仅有一个必须及仅有一个 valuevalue ，通，通

常有同时采用两个或以上同常有同时采用两个或以上同 name name 不同不同 value value 的的 Radio Radio 输入方式，可让使用使任选其一。输入方式，可让使用使任选其一。

align="MIDDLE" align="MIDDLE" 可选值：可选值： top, middle, bottom, left, right, texttotop, middle, bottom, left, right, textto

p, baseline, absmiddlep, baseline, absmiddle 。。 checked checked 设该设该 Radio Radio 为默认被选。同为默认被选。同 name name 的各个的各个 Radio Radio

中只能有一个使用，或全不使用这个参数。中只能有一个使用，或全不使用这个参数。

2. Checkbox 2. Checkbox （确认框）（确认框）语法：语法：<input type="Checkbox" name=" " value<input type="Checkbox" name=" " value

=" " align=" " checked>=" " align=" " checked> 说明：说明： type="Checkbox" type="Checkbox" 输入方式为输入方式为 CheckboxCheckbox ，，

能产生一确认框，以供选择。能产生一确认框，以供选择。 name Checkboxname Checkbox 名称。名称。

value Checkboxvalue Checkbox 默认值。每一个默认值。每一个 Checkbox Checkbox 必须及仅有一个必须及仅有一个 valuevalue 。。

align align 对齐方式，可选值：对齐方式，可选值： top, middle, botttop, middle, bottom, left, right, texttop, baseline, absmidom, left, right, texttop, baseline, absmiddledle 。。

checked checked 设该设该 Checkbox Checkbox 为默认被选。每个为默认被选。每个 Checkbox Checkbox 都是独立的。都是独立的。

2.5.5 2.5.5 提交和重置标记提交和重置标记 1. 1. 格式：格式：<input type="SUBMIT" value="<input type="SUBMIT" value=" 字符串字符串 " >" ><input type=" Reset " value="<input type=" Reset " value=" 字符串字符串 ">">

2. 2. 说明：说明：Type=Submit Type=Submit ，表示是提交标记，表示是提交标记Type=Reset Type=Reset 表示是重置标记表示是重置标记 value="value=" 字符串字符串 "" ，表示按钮显示的字符，表示按钮显示的字符

第 2 章 HTML 基础

Documents

Transcript of 第 2 章 HTML 基础