1.3 Web编程基础——HTML
HTML是英文Hyper Text Markup Language的缩写，中文意思是“超文本标记语言”，它是在标准通用化标记语言SGML（Standard Generalized Markup Language）的基础上建立起来的。
1.3.1 HTML概述
HTML 语言使用成对的标记方式来编写文件，每个标记均可能有若干个属性，利用其语法规则建立的文件可以在任何操作系统平台和浏览器上运行。
HTML 文件的扩展名可以是.html 或者.htm，现在已经没有区别了。原来在 Linux 操作系统中用.html作为文件的扩展名，而在Windows中用.htm，因为早期的Windows不支持3个以上字母的文件扩展名。
接下来我们将逐一介绍HTML的各种基本标记，并通过大量示例说明各标记的使用方法，帮助读者加深理解。
真功夫 入行提示
HTML语言是由一系列标记组成的，所有的标记都必须用角括号“＜”和“＞”括起来。大部分标记都是成对出现的，包括开始标记和结束标记。同时每个标记包含若干属性来定制网页。例如标记＜font size= "12" color= "red"＞…＜/font＞，其中＜font＞是开始标记，＜/font＞是结束标记，而size和color则是font标记的属性。
1.3.2 HTML文档结构
我们仅仅只需要一个文字处理器（如Microsoft Word、记事本、写字板等）就可以编写HTML文件，但是为了提高效率，也可以使用一些可视化的编辑软件，例如FrontPage、Dreamweaver。HTML文件的基本结构如程序1-2所示。
【程序1-2】HTML文件基本结构.html
01 ＜html＞
02 ＜head＞
03 …头部信息 \注：描述浏览器所需信息
04 ＜/head＞
05 05
06 ＜body＞
07 …主体部分 \注：描述具体内容
08 ＜/body＞
09 ＜/html＞
我们来简单介绍一下在程序1-2中出现的几种标签的作用：＜html＞…＜/html＞标记的是HTML文件的开始和结束；＜head＞…＜/head＞标记的是HTML文件的头部；而＜body＞…＜/body＞标记的则是HTML文件主体部分，在＜body＞内包含有HTML文件显示的所有内容和显示格式。
在这里需要说明的一点：HTML 对大小写是不敏感的，＜html＞与＜HTML＞是一样的。但是 W3C （World Wide Web Consortium）在HTML 4.0中建议使用小写，所以在本书的所有示例中我们将使用小写。
真功夫 功夫要诀
＜head＞和＜body＞标记是相互独立的标记，不能嵌套使用。
一个标准的HTML文件包括头部和主体两大部分。
＜head＞头部标记主要包括该页面的一些基本描述语句。根据HTML标准，在头部标记中可以使用标记＜base＞、＜link＞、＜meta＞、＜title＞、＜script＞和＜style＞。一般来说，头部标记中的信息不在网页中显示。头部标记内容如表1-1所示。
表1-1 头部标记
程序1-3说明了如何使用＜head＞标记。
【程序1-3】头部标记.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞HTML头部标记＜/title＞ \注：网页的标题
05 ＜style type="text/css"＞
06 ＜!--
07 p{font-family:"幼圆"; font-size: 24px}
08 --＞
09 ＜/style＞ \注：CSS样式表
10 ＜/head＞
11 ＜body＞
12 ＜p＞HTML头部标记学习！＜/p＞
13 ＜/body＞
14 ＜/html＞
在程序1-3中，＜title＞标记用于设置网页的标题，＜style＞标记用于定义CSS样式（在1.3.9节中我们会详细介绍CSS），而＜meta＞标记则用于设置字符的编码格式。
＜body＞和＜/body＞标记放置了整个HTML文档的主体部分，包括文本、图片、音乐等。作为网页的主体部分，＜body＞标记有很多内置的属性。这些属性可分为 3 类：可选属性、标准属性和事件属性。表1-2列出了＜body＞标记的可选属性。
表1-2 ＜body＞标记的可选属性
除了可选属性外，＜body＞标记还包含 id、class、title、style、dir、lang、xml:lang 等标准属性，以及onload、onclick的触发事件属性。有兴趣的读者可以查阅相关资料获得更深入的理解。
可选属性用于设定网页的总体风格。程序1-4所示的程序范例中使用可选属性设置网页的背景色为黑色（十六进制数表示为000000），字体颜色为白色（十六进制数表示为ffffff）。
【程序1-4】主体标记.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html;
04 charset=gb2312" /＞
05 ＜title＞HTML body标记的学习＜/title＞
06 ＜/head＞
07 ＜body bgcolor="#000000" text="#ffffff"＞
08 ＜p align="center"＞HTML body标记的学习＜/p＞ \注：body标记
09 ＜/body＞
10 ＜/html＞
真功夫 功夫要诀
在HTML中，大部分标记的属性都可以分为可选属性、标准属性和事件属性3类。
1.3.3 文字风格设置
文字是网页的基础部分，这一节将介绍文字风格的设置。
1.文字的内容
文字内容通常被直接编写在＜body＞和＜/body＞标记中，文字内容包括普通文字、空格符号和特殊符号。
在HTML中，一个空格符号使用一个“ ； ”表示，多个空格只需多次使用即可。程序1-5演示了如何在网页中显示3个空格。
【程序1-5】空格的使用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html;
04 charset=gb2312" /＞
05 ＜title＞
06 空格的使用
07 ＜/title＞
08 ＜/head＞
09 ＜body＞
10 空格的使用! \注：在网页中显示3个空格
11 ＜/body＞
12 ＜/html＞
在HTML中有一些特殊符号（比如“＜”和“＞”），它们用于标识各种标记，以便于浏览器能够识别HTML标记。但是问题随之而来，如果想要在网页上显示这些符号，那该如何做呢？
HTML 为这些特殊字符设置了特殊的代码。所有的字符都以“&”符号开始，以一个“；”符号结束。表1-3列出了HTML中常用的特殊符号。
表1-3 特殊符号
2.字体标记＜font＞
＜font＞＜/font＞是经常使用的标记对，它可以包含输出文本的字体、大小和颜色，这些主要是通过属性face、size和color来实现的。face属性用来设定网页输出的字体，最常用的是宋体和黑体；size属性用来改变文字的大小；而color则用来改变文字的颜色。字体标记的用法如后面将要介绍的程序示例1-6所示。
3.文字标题标记＜h＞
HTML 语言提供了一系列对文本中的标题进行操作的标记对：从＜h1＞到＜h6＞，每级标题文字的字体大小依次递减。如果 HTML 文档中需要输出标题文本的话，便可以依据需要显示的标题大小来使用这6对标题标记中的其中一对。每个标题标记所标识的文字将独占一行且上下均留一行空白。
标题标记中常用的属性是 aligh（对齐）属性，用于定义标题的对齐方式。用法如前面的程序范例1-5所示。
4.文字风格标记
文字风格标记可以对文字进行多种修饰，从而呈现出不同的效果。文字的风格标记按照不同的显示要求可以分为3类：计算机代码输出标记（如表1-4所示）、文字的格式化标记（如表1-5所示），以及引用、语录和定义标记（如表1-6所示）。
表1-4 计算机代码输出标记
表1-5 文字的格式化标记
表1-6 引用、语录和定义标记
下面我们对表中的一些标记进行详细介绍。
● ＜sub＞和＜sup＞标记：常用于数学表达式中，显示下标或者上标。
● ＜pre＞预格式化标记：是指在浏览器显示页面时保留文字在源代码中的格式。例如，保留文档中的空格、回车符、制表符等。
● ＜address＞标记：常用来说明地址、E-mail、电话之类的文字，其字体较一般文字细且为斜体。
下面我们通过一个综合实例具体演示以上所介绍的标记功能，程序源代码如程序1-6所示。
【程序1-6】文字风格综合示例.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞文字风格设置综合示例＜/title＞
05 ＜/head＞
06 ＜body＞
07 ＜!--文字标题标记--＞
08 ＜h1 align="left"＞最大的标题＜/h1＞ \注：标题标记＜hn＞
09 ＜h6 align= "center"＞最小的标题＜/h6＞
10 ＜h3 align="right"＞3级标题＜/h3＞
11 ＜!--文字字体标记--＞
12 ＜p＞＜font size="6" color="#000000" face="宋体"＞黑色、宋体、
13 6号字体效果＜/font＞
14 ＜/p＞
15 ＜p＞＜font size="8" color="#0000FF" face="幼圆"＞蓝色、幼圆、
16 8号字体效果＜/font＞
17 ＜/p＞
18 ＜!--文字风格标记--＞
19 ＜p＞ \注：段落标记＜p＞
20 ＜b＞＜big＞大字号，粗字体效果＜/big＞＜/b＞
21 ＜p＞
22 ＜p＞
23 ＜strong＞＜small＞小字号，粗字体效果＜/small＞＜/strong＞
24 ＜/p＞
25 ＜p＞＜i＞斜字体效果＜/i＞＜/p＞
26 ＜br＞ \注：换行标记＜br＞
27 ＜p＞＜del＞删除线效果＜/del＞＜/p＞
28 ＜p＞＜var＞声明变量效果＜/var＞＜/p＞
29 ＜p＞＜b＞＜big＞数学表达式＜/big＞＜/b＞＜/p＞
30 ＜p＞x＜sup＞2＜/sup＞+y＜sup＞2＜/sup＞=100   上标效果＜/p＞
31 ＜!--上标效果--＞
32 ＜p＞x＜sub＞1＜/sub＞+y＜sub＞2＜/sub＞=100   下标效果＜/p＞
33 ＜!--下标效果--＞
34 ＜hr align="left " color="black" noshade ="noshade" width=”100%” ＞ \注：水平线标记
35 ＜/body＞
36 ＜/html＞
该程序的运行结果如图1-5所示。
图1-5 文字风格综合示例
1.3.4 段落控制标记
正如我们在网页上所看到的一样，所有的文字内容都按照一定的规则组织在一起，这个规则就是段落控制标记。通过这些标记，可以使得页面结构清晰，便于用户快速获取所需的信息。
段落控制标记包括＜p＞、＜br＞、＜nobr＞、＜hr＞、＜comment＞和＜!-- --＞等。段落控制中常用的标记如表1-7所示。
表1-7 段落控制标记
1.段落标记＜p＞＜/p＞
该标记对用来创建一个段落，插入在这对标记之间的文本将按照段落的格式显示。属性align可以实现段落在水平方向上的左、中、右对齐方式，用法如程序1-6所示。
2.换行标记＜br＞
＜br＞标记很简单，它没有结束标记，也没有任何属性的设置。这是我们遇到的第一个没有结束标记的标记，此外还有＜img＞标记。＜br＞标记用来创建一个回车换行，用法如程序1-6所示。
真功夫 功夫要诀
如果将＜br＞标记加在＜p＞＜/p＞标记对外将创建一个大的回车换行；如果加在＜p＞＜/p＞标记对内部，则生成的换行距离比较小。
3.水平线标记＜hr＞
水平线标记可以在文档中插入一条水平线。属性align设置水平线的对齐方式；color定义水平线的颜色；默认情况下水平线呈现的是空心立体的效果，通过noshade属性将其定义为实心且不带阴影的水平线；width和size分别定义水平线的宽度和高度。用法如程序1-6所示。
4.注释标记＜comment＞＜/comment＞、＜!-- -- ＞
HTML中的注释通常有以下两种形式：
＜comment＞注释内容＜/comment＞
或
＜!—注释内容-- ＞
为了便于源代码编写者检查和维护代码，HTML 提供了这两种方式的注释语句，这些注释语句不会出现在浏览器中。用法如程序1-6所示。
5.列表标记
通过建立列表，我们可以使得页面内容的逻辑清晰，且便于阅读。列表分为编号列表、符号列表和定义列表3种类型。
＜dl＞＜/dl＞、＜dt＞＜/dt＞和＜dd＞＜/dd＞被称为定义列表标记（也称为无序号列表标记）。它们用于创建一种两个层次的列表，一般用来解释名词的定义。＜dl＞＜/dl＞标记对用来定义列表的声明，＜dt＞＜/dt＞标记对作为名词的标题，＜dd＞＜/dd＞用来解释名词。列表标记的使用方法如程序1-7所示。
【程序1-7】定义列表的应用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞
05 定义列表的应用
06 ＜/title＞
07 ＜/head＞
08 ＜body＞
09 ＜dl＞
10 ＜dt＞Dreamweaver＜/dt＞ \注：列表声明
11 ＜dd＞网页编辑器＜/dd＞ \注：名词标题
12 ＜dt＞JDK＜/dt＞
13 ＜dd＞java开发包＜/dd＞
14 ＜dt＞Tomcat＜/dt＞
15 ＜dd＞网站服务器＜/dd＞ \注：名词解释
16 ＜/dl＞
17 ＜/body＞
18 ＜/html＞
程序的运行效果如图1-6所示。
图1-6 定义列表的应用
标签＜ol＞＜/ol＞、＜ul＞＜/ul＞和＜li＞＜/li＞可以创建有序号列表。其中＜ol＞＜/ol＞标记对用来创建一个各项之间有逻辑顺序的列表，列表中的项目是以数字或者英文字母开头的；＜ul＞＜/ul＞标记对默认情况下创建一个标有圆点的列表（即各项之间没有序列要求）；而＜li＞＜/li＞标记对则只能在＜ol＞＜/ol＞或＜ul＞＜/ul＞标记对之间使用，该标记用来创建一个列表项。
标签＜ol＞＜/ol＞标记对有两个属性：type 和 start。在默认情况下，＜ol＞＜/ol＞标记对使用数字序号作为列表的开始，但是可以通过type属性将其类型设置为英文或者罗马数字，如表1-8所示；start属性用来设置列表的起始值。
表1-8 ＜ol＞＜/ol＞标记对的类型
在默认情况下，＜ul＞＜/ul＞标记对使用“●”作为列表的开始，可以通过type属性将其设置为“○”或者“■”。
程序1-8所示的是有序号列表的应用。
【程序1-8】有序号列表的应用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞有序号列表的应用＜/title＞
05 ＜/head＞
06 ＜body＞
07 ＜ol start="3"＞
08 ＜li＞项目一＜/li＞ \注：编号列表标记
09 ＜li＞项目二＜/li＞
10 ＜li＞项目三＜/li＞
11 ＜/ol＞
12 ＜ol type="a"＞
13 ＜li＞项目一＜/li＞
14 ＜li＞项目二＜/li＞ \注：列表项＜li＞＜/li＞
15 ＜li＞项目三＜/li＞
16 ＜/ol＞
17 ＜ul type="square"＞
18 ＜li＞项目一＜/li＞
19 ＜li＞项目二＜/li＞
20 ＜li＞项目三＜/li＞
21 ＜/ul＞
22 ＜/body＞
23 ＜/html＞
程序的运行效果如图1-7所示。
图1-7 有序号列表的应用
6.层标记＜div＞＜/div＞
＜div＞＜/div＞标记对经常用来排版整个HTML页面，此标签对的用法和＜p＞＜/p＞标签对非常相似，同样也具有align属性，读者可以尝试一下。
1.3.5 超级链接标记
超级链接标记对＜a＞＜/a＞是HTML页面中最重要的元素之一。HTML语言使用超级链接将网络上各个文件组织在一起。单击网页上的链接文字或者图像后，就可以跳转到另一个页面。超级链接标记的属性如表1-9所示。
表1-9 超级链接标记＜a＞＜/a＞的属性
超级链接根据不同的属性，有两种使用方法：文件链接和书签链接。
1.文件链接
＜a href="file_name" target="value"＞链接文字＜/a＞
其中属性href用来设置一个超文本链接。它可以是URL地址（网址或者相对路径），也可以是“ftp:”、“mailto:”、“telnet”等形式。
另外，该标记还存在一个target属性，它用来设置链接页面的显示窗口。在默认情况下，单击页面链接后，会在当前页面上出现新的页面。target的value取值如表1-10所示。
表1-10 target属性的value取值
关于框架的使用，我们将在将在1.3.8节中详细介绍。
下面的示例是文件链接的应用，我们在程序1-9所示的“文件链接应用1.html”中建立一个链接，单击链接文字链接到如程序1-10所示的“文件链接应用2.html”。
【程序1-9】文件链接应用1.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞文件链接应用1＜/title＞
05 ＜/head＞
06 ＜body＞
07 这是文件链接应用1页面！
08 ＜hr＞
09 ＜a href="文件链接应用2"＞文件链接应用2＜/a＞ \注：链接标记对＜a＞＜/a＞
10 ＜/body＞
11 ＜/html＞
【程序1-10】文件链接应用2.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞文件链接应用2＜/title＞
05 ＜/head＞
06 ＜body＞
07 欢迎你来到文件链接2页面！
08 ＜/body＞
09 ＜/html＞
2.书签链接
在浏览页面的时候，如果页面的内容比较多，页面过长，那浏览的时候需要不断地拖动滚动条，很不方便。书签链接就可以创建这样一个链接，这个链接可以指向该页面中的任何一部分，同时也可以指向其他页面的特定部分。
一般来说，我们可以通过＜a name="tagname"＞＜/a＞和＜a href="#tagname"＞＜/a＞的配合使用来实现书签链接。＜a name = "tagname"＞＜/a＞用来建立书签，以便能定位到该标记的文本信息；而＜a href="#tagname"＞＜/a＞则提供定位到该标记位置的链接。
下面通过一个实例来形象地展示该标记的使用，源代码如程序1-11所示。
【程序1-11】书签链接应用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞书签链接＜/title＞
05 ＜/head＞
06 ＜body＞
07 ＜ul type="square"＞
08 ＜li＞＜a href="#chapter1"＞第1章 JSP简介＜/a＞＜/li＞
09 ＜li＞＜a href="#chapter3"＞第3章 JSP基本语法＜/a＞＜/li＞ \注：链接到书签（名称为chapter3）
10 ＜/ul＞
11 ＜pre＞
12 ＜a name="chapter1"＞
13 ＜h1＞第1章 JSP简介＜/h1＞
14 1.1 案例场景
15 1.2 网页开发技术概述
16 1.3 Web编程基础——HTML语言
17 1.4 动态网页技术简介
18 1.5 JSP页面结构和技术原理
19 1.6 回到案例场景
20 1.7 本章小结与习题
21 1.8 案例场景
22 ＜/a＞
23 ＜a name="chapter2"＞
24 ＜h1＞第2章 搭建JSP运行环境＜/h1＞
25 2.1 案例场景
26 2.2 需要安装的工具软件
27 2.3 安装和配置JDK
28 2.4 安装和配置Tomcat Eclipse开发工具
29 2.5 安装和配置MySQL
30 2.6 回到案例场景
31 2.7 本章小结与习题
32 ＜/a＞
33 ＜a name="chapter3"＞ \注：定义书签（名称为chapter3）
34 ＜h1＞第3章 JSP基本语法＜/h1＞
35 3.1 案例场景
36 3.2 Java的数据类型和变量
37 3.3 运算符和表达式
38 3.4 程序流程控制语句
39 3.5 类、对象和包
40 3.6 Java常用类
41 3.7 异常处理
42 3.8 JSP中变量的作用域与多线程问题
43 3.9 回到案例场景
44 3.10 本章小结与习题
45 ＜/a＞
46 ＜/pre＞
47 ＜/body＞
48 ＜/html＞
如程序1-11所示，我们在页面中使用了预定义标记＜pre＞＜/pre＞标记对，它将内容不变地显示在浏览器上。单击页面中的两个标签链接会定位到相应的位置，该标签的使用在篇幅较长的页面（类似于目录）中非常有效。
1.3.6 表格标记
表格标记在HTML的编写中是使用最多的标记之一，它是页面排版的灵魂。在页面中使用表格显示信息，直观清晰。现在大部分的网页都使用多重表格来进行排版。下面我们详细介绍表格的制作及应用，在表1-11中列出了关于表格制作的各种标记。
表1-11 表格标记
其中最常用、最重要的标记对是＜table＞＜/table＞、＜tr＞＜/tr＞和＜td＞＜/td＞这3个标记对。
在程序 1-12 中我们演示了表格标记使用的框架结构，很多复杂的页面布局都是以这个基本的框架为基础的。
【程序1-12】表格标记结构.html
01 ＜table＞ \注：创建表格
02 ＜tr＞
03 ＜td＞...＜/td＞
04 ...
05 ＜/tr＞
06 ＜tr＞ \注：行标记
07 ＜td＞
08 ...
09 ＜/td＞ \注：列标记
10 ...
11 ＜/tr＞
12 ＜/table＞
1.表格标记＜table＞
利用表格标记丰富的属性，我们可以设计出各种风格的表格，增加页面的显示效果。表格的属性如表1-12所示。
表1-12 表格标记＜table＞属性
2.行标记＜tr＞
＜tr＞＜/tr＞标记对用来在表格中定义一行，tr是Table Row首字母的缩写。行标记＜ tr ＞的属性用来设定表格中某一行的属性。行标记＜tr＞的属性如表1-13所示。
表1-13 行标记＜tr＞属性
3.列标记＜td＞
＜td＞＜/td＞标记对用来创建一个列，其属性如表1-14所示。
表1-14 行标记＜tr＞属性
程序1-13演示了如何在网页中制作表格。
【程序1-13】表格应用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞
04 ＜title＞制作表格＜/title＞
05 ＜/head＞
06 ＜body topmargin="0"＞
07 ＜!--表格宽度为80%,边框宽为1,居中对齐,单元格间距为10,边距6,
08 背景颜色为#3399FF--＞
09 ＜table width="80%" border="2" align="center" cellpadding="10" \注：创建表格
10 cellspacing="6" bordercolor="#3399FF"＞
11 ＜caption align="center"＞网上书店-会员中心＜/caption＞ \注：定义表格标题
12 ＜tr＞
13 ＜th height="35" colspan="3" scope="col"＞会员注册＜/th＞
14 ＜/tr＞
15 ＜!--表主体标记＜tbody＞--＞
16 ＜tbody＞
17 ＜tr＞ \注：创建行
18 ＜td width="6%" rowspan="3" background="01. 01.jpg"＞＜/td＞
19 ＜td width="42%" height="25" valign="middle" bgcolor="#D8E1F8"＞
20 姓名：＜/td＞
21 ＜td width="52%" height="25" valign="middle"＞ ＜/td＞
22 ＜/tr＞
23 ＜tr＞
24 ＜td height="25" valign="middle" bgcolor="#D8E1F8"＞ 密码：＜/td＞
25 ＜td height="25" valign="middle"＞ ＜/td＞ \注：创建列
26 ＜/tr＞
27 ＜tr＞
28 ＜td height="25" valign="middle" bgcolor="#D8E1F8"＞ E-mail：＜/td＞
29 ＜td height="25" valign="middle"＞ ＜/td＞
30 ＜/tr＞
31 ＜/tbody＞
32 ＜!--表尾标记＜tfoot＞--＞
33 ＜tfoot＞
34 ＜tr＞
35 ＜td height="25" colspan="3" align="center"＞欢迎来到网上书店！＜/td＞
36 ＜/tr＞
37 ＜/tfoot＞
38 ＜/table＞
39 ＜/body＞
40 ＜/html＞
程序1-13的运行效果如图1-8所示。
图1-8 表格标记应用
1.3.7 表单标记
表单是HTML页面实现动态效果的重要手段。利用表单，我们可以收集客户端用户提交的数据信息。例如，如图1-8所示，在一个网上书店网站中申请成为会员，用户需要填写网站提供的表单，其中包括用户名、密码、电子邮件等个人信息。
表单信息的处理过程：当用户单击表单中的“提交”按钮时，浏览器会通过HTTP传输协议将表单信息传到服务器；然后由服务器的后台程序（例如CGI、ASP、PHP、JSP等）进行处理。一般来说，服务器会把用户提交的信息存储在服务器端的数据库中，然后再将有关信息返回到客户端浏览器上。
1.表单的结构
表单是页面中的一个特定区域，该区域是通过＜form＞＜/form＞标记对定义的。其他的表单对象都要插入到表单中。＜form＞＜/form＞标记对主要有两方面作用：一方面限定提交的内容，即表单范围内的内容；另一方面，通过设置相关属性来决定处理表单的脚本程序的位置、提交表单的方式等。
表单标记＜form＞的属性如表1-15所示。
表1-15 表单标记＜form＞属性
真功夫 功夫要诀
action属性是必需的属性，它用来指定处理表单的页面。
表单中的控件有输入域标记＜input＞＜/input＞、文本域标记＜textarea＞＜/textarea＞，以及下拉列表标记＜select＞＜/select＞和＜option＞＜/option＞。下面我们将详细地介绍如何使用这些标记。
2.输入域标记＜input＞
输入域标记是表单中最常用的标记之一，它的一般格式是：
＜input name="field_name" type="value" /＞
除了文本域和下拉列表标记，其他的控件，例如，文本域（单行文本域）、密码域、单选域等都是根据输入域标记的type属性区别的。表1-16中列出了type的各属性值。
表1-16 type属性值
下面，我们对以上type属性的部分属性值进行详细介绍。
1）文本域text
text属性用来设置表单的文本域，可以输入任何类型的文本、数字、字母等字符串。与textarea域区别是其输入的内容只能以单行显示。
2）密码域password
它与文本域唯一的区别是在网页上以星号或者圆点显示。
3）文件域file
文件域的外观类似于VC++或者Java语言中的文件控件，用来选择要上传到服务器的文件。
4）隐藏域hidden
隐藏域对用户而言是透明的，它是为了满足后台编程需要的。
3.文本域标记＜textarea＞
文本域的一般格式是：
＜textarea name="name" cols="value" rows="value"＞＜/textarea＞
文本域标记用来制作多行的文本域，可以在其中输入更多的文本信息。属性 cols 定义了文本的行数；rows定义了文本的列数。
4.列表域标记＜select＞和＜option＞
列表域标记用来建立一个下拉列表框，通过其属性可以定制下拉列表框的显示。列表域标记的属性如表1-17所示。
表1-17 列表域的属性
下面我们通过一个填写个人信息的实例来演示如何使用这些表单标记，程序片段如程序1-14所示，完整程序请参照本书所附光盘。
【程序1-14】表单应用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞
04 ＜title＞表单的应用＜/title＞
05 …
06 ＜/head＞
07 ＜body topmargin="0"＞
08 ＜form enctype="multipart/form-data"＞ \注：表单标记
09 ＜table width="550" border="0" align="center" cellpadding="2" cellspacing="1"
10 bgcolor="#3399FF"＞
11 ＜tr align="center" valign="middle" bgcolor="#FFFFFF"＞
12 ＜td height="30" colspan="4" bgcolor="#B7DAF9"＞个人信息＜/td＞
13 ＜/tr＞
14 ＜tr bgcolor="#FFFFFF"＞
15 ＜td width="16%" height="30"＞真实姓名:＜/td＞
16 ＜td height="30" colspan="3"＞＜input name="name" type="text" id="name" \注：文本框标记
17 maxlength="50"＞＜/td＞
18 ＜/tr＞
19 ＜tr bgcolor="#FFFFFF"＞
20 ＜td height="30"＞年龄:＜/td＞
21 …
22 ＜td width="39%" height="30"＞
23 ＜input name="sex" type="radio" value="0" checked＞男 \注：单选按钮
24 ＜input type="radio" name="sex" value="1"＞女
25 ＜/td＞
26 ＜/tr＞
27 …
28 ＜tr bgcolor="#FFFFFF"＞
29 ＜td height="30"＞所学专业:＜/td＞
30 ＜td height="30" colspan="3"＞
31 ＜select name="spe" id="spe"＞ \注：列表域
32 ＜option value="0"＞选择专业＜/option＞
33 …
34 ＜/select＞＜/td＞
35 ＜/tr＞
36 …
37 ＜tr bgcolor="#FFFFFF"＞
38 ＜td height="30"＞爱好:＜/td＞
39 ＜td height="30" colspan="3"＞
40 ＜input name="favorite" type="checkbox" id="favorite" value="0"＞ 计算机 \注：复选框
41 …
42 ＜/td＞
43 ＜/tr＞
44 ＜tr bgcolor="#FFFFFF"＞
45 ＜td height="30"＞个人评价:＜/td＞
46 ＜td height="30" colspan="3"＞＜textarea name="summery" cols="60" \注：文本域
47 rows="8" id="summery"＞＜/textarea＞＜/td＞
48 ＜/tr＞
49 ＜tr bgcolor="#FFFFFF"＞
50 ＜td height="30"＞ ＜/td＞
51 ＜td height="30" colspan="3"＞＜input type="submit" name="Submit" \注：提交按钮
52 value="提交"＞
53 ＜input type="reset" name="Submit2" value="重置"＞＜/td＞ \注：重置按钮
54 ＜/tr＞
55 ＜/table＞
56 ＜/form＞
57 ＜/body＞
58 ＜/html＞
程序1-14的运行效果如图1-9所示。
图1-9 表单应用
1.3.8 框架结构标记
框架的使用可以在同一个页面上显示多个 Web 页，每个页面叫做一个框架，页面之间互相独立。框架技术普遍应用于页面导航。基本框架的源代码如程序1-15所示。
【程序1-15】框架结构.html
01 ＜html＞
02 ＜head＞
03 ＜title＞框架页面的结构＜/title＞
04 ＜/head＞
05
06 ＜frameset＞ \注：框架结构
07 ＜frame＞
08 ＜frame＞
09 ...
10 ＜/frameset＞
11 ＜/html＞
1.框架集标记对＜frameset＞＜/frameset＞
框架集标记对用于框架的声明。细心的读者可能已经发现程序1-15 所示的框架页面的结构中没有＜body＞＜/body＞，在框架网页中，将＜frameset＞标记置于头部标记之后，以取代＜body＞的位置。
框架集标记不仅定义了框架的开始和结束，它还通过属性设置框架的尺寸等。框架集的属性如表1-18所示。
表1-18 框架集的属性
2.框架标记对＜frame＞＜/frame＞
＜frame＞＜/frame＞框架标记对，定义框架的内容。在框架页面中有几个框架，就定义几个＜frame＞＜/frame＞对，在框架标记对中间还可以嵌套定义框架集标记对。框架标记对的属性如表1-19所示。
表1-19 框架的属性
在程序1-16中，我们定义了一个上方固定、左侧嵌套的的框架。
【程序1-16】框架集应用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞框架集标记＜/title＞
05 ＜/head＞
06 \注：框架集的声明，定义了上下两个框架
07 ＜frameset rows="80,＊" cols="＊" frameborder="yes" \注：上框架
08 framespacing="2"＞
09
10 ＜frame src="top.html" name="topFrame" scrolling="No"
11 noresize="noresize" title="topFrame" /＞
12
13 ＜frameset cols="180,＊" frameborder="no" framespacing="0"＞ \注：下框架被分为两列
14 ＜frame src="left.html" name="leftFrame" scrolling="No"
15 noresize="noresize" title="leftFrame" /＞
16 ＜frame src="main.html" name="mainFrame" title="mainFrame" /＞
17 ＜/frameset＞ \注：下框架的结束标记
18
19 ＜/frameset＞ \注：整个框架集的结束标记
20
21 ＜noframes＞
22 ＜/noframes＞＜/html＞
3.框架与超级链接
框架技术常常用于页面导航。为了实现导航，在框架中需要建立超级链接，然后把框架的名称赋给超级链接的target属性，则页面就会在相应名称的框架中显示。
如图1-10所示，该页面使用程序1-17中定义的框架，在左框架文件left.html中，建立超级链接，链接页面显示在主框架mainFrame中。
图1-10 框架与超级链接
左框架文件left.html源代码如程序1-17所示。
【程序1-17】left.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞leftframe应用＜/title＞
05 ＜/head＞
06 ＜body＞
07 ＜ul＞
08 ＜li＞＜a href="main.html" target="mainFrame"＞ 框架集的声明＜/a＞＜/li＞ \注：main.html将在mainFrame框架中显示
09 ＜li＞＜a href="main02.html" target="mainFrame"＞ 框架的定义＜/a＞＜/li＞
10 ＜/ul＞
11 ＜/body＞
12 ＜/html＞
1.3.9 CSS样式
CSS是Cascading Style Sheets（层叠样式表）的缩写。CSS是W3C协会为了弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。在讲解CSS之前，我们先通过一个实例看看CSS的作用。
如图1-11所示的是没有采用任何CSS的HTML页面。
图1-11 没有使用CSS的HTML的页面
而如图1-12所示的则是添加了CSS后的HTML页面。
图1-12 加入CSS的HTML页面
从上面的两张图的对比，我们可以明显地看到，采用了CSS后的HTML页面更为美观。此外，CSS还有很多优点：
● 将显示格式和文档结构分离。
● 弥补HTML在显示属性设定上的不足，如字体、段落间距等。
● 使得网站的体积更小，网页的下载速度加快。
● 实现网页的动态更新。可以通过简单地更改 CSS 文件，改变网页的整体表现形式，可以减少我们的工作量，所以它是每一个网页设计人员的必修课。
1.CSS样式表的设计
CSS的定义由3个部分构成：选择符（selector）、属性（properties）和属性的取值（value）。它的语法：
selector {property: value} (选择符{属性:值})
常用的样式表的选择符有标记选择符、类选择符和ID选择符。下面我们详细介绍这3类选择符。
1）标记选择符
一般是你要定义样式的HTML标记，例如，body、p、table等。可以通过此方法定义它的属性和值，属性和值要用冒号隔开。它的使用方法如下：
body {color：black}
使用该示例的效果是使页面中的文字变为黑色。
2）类选择符
如果在页面中不希望一种标记遵循同一种样式或者希望不同的标记遵循相同的样式，利用类选择符和标记的class属性就可以实现这些效果。定义类选择符时需要在自定义类之前加一个“.”号。它的使用方法如下：
p.center{text-align:center}
或者
.center{ text-align:center }
3）ID选择符
与类选择符相似，只是在定义ID选择符时需要在前面加“#”号。它的使用方法如下：
p#center{text-align:center}
或者
#center{ text-align:center }
2.加载CSS样式表
我们可以通过链接外部样式表、引入外部样式表、嵌入样式表和内联样式表4种方式来加载样式表。
1）链接外部样式表
如果多个HTML文件要共享样式表，可以先定义好样式表，然后在HTML文件的头部用＜link＞标记引入CSS样式表。它的使用方法如下：
＜link rel="stylesheet" href="style.css" type="text/css"＞
2）引入外部样式表
在＜style＞＜/style＞标记间使用@import关键字将外部文件导入。它的使用方法如下：
＜style＞
@import url("CSS文件名");
……
＜/style＞
3）嵌入样式表
这种方式只要在＜head＞＜/head＞标记间加上＜style＞＜/style＞标记对就可以了，然后在其中定义各种标记的显示样式，如程序1-18所示。
【程序1-18】CSS应用.html
01 ＜html＞
02 ＜head＞
03 ＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞
04 ＜title＞CSS应用.html＜/title＞
05 ＜style＞ \注：嵌入样式表
06 p.center{text-align:center; font-family:"宋体"}
07 .warning{color:#FF0000; font-size:14px} \注：类选择符
08 #bkground{background:#00cc66} \注：ID选择符
09 ＜/style＞
10 ＜/head＞
11 ＜/html＞
4）内联样式表
这种方式是在HTML标记中引用style标记的属性值。样式定义的作用范围仅限于此标记范围内。内联样式表失去了CSS格式和内容分离的优点，所以我们不建议读者使用这种方式。