《中国计算机报》出版日期：1999-05-10 总期号：821 本年期号：31
欲穷千里目 更上一层楼
网页高级技术
Iris
一、表格
1. 表格的基本语法
表格用table元素定义。表格的开始是标题（可以省略），后面是一个或多个表行。
在html中，表格可包含段落、列表、标题、表单、数字和预格式化文本等。
除必须用table元素定义表格外，还需要用另一些元素定义表格组件。它们是：
● tr：用来定义表行（table row）；
● th：用来定义表头（table head）；
● td：用来定义表格数据（table data），也就是表头以外各行的表元。
下面的示例定义了一个两行三列的表格：
〈table〉
〈tr〉〈th〉food〈/th〉〈th〉drink〈/th〉〈th〉sweet〈/th〉
〈tr〉〈td〉a〈/td〉〈td〉b〈/td〉〈td〉c〈/td〉
〈/table〉
没有属性的〈table〉标记生成的表格没有边框。可以使用border属性定义表格边框及其宽度（其中＃为边框线尺寸的像素值）：
〈table border = ＃〉
2. 跨多行、多列的表元
html的表元也可跨多列或多行，跨列用属性colspan实现，跨行用属性rowspan实现，其属性值为所跨的列或行数。
3. 表格尺寸设置
表格尺寸用width属性和height属性来规定：
〈table border width=＃ height=＃ 〉
表元间隙可以通过cellspacing来定义：
〈table border cellspacing=＃〉
还可以用cellpadding属性设置表元内部空白的大小：〈table border cellpadding=＃〉
4. 表格的标题
表格通过caption元素规定标题。
二、表单
表单的作用是从用户方面收集信息，当用户填好表单上所需信息并将表单交付处理后，服务器就可以得到表单中包含的信息，并经公共网关接口cgi（common gateway interface）程序进行处理。
1. 表单基本用法
表单由表单元素form定义，表单元素最重要的两个属性是method和action。method说明应该如何处理来自表单的输入数据，最常用的属性值是get和post。action则指定负责处理表单数据的程序（程序的url）。表单的基本结构为：
〈form action=url method=get | post〉
……
〈input type=submit〉 〈input type=reset〉
〈/form〉
也就是说，表单除开始定义其method和action属性外，通常在结束前会使用type=submit和type=reset设计提交（寄送）和
重新设置两个按钮。这两个按钮上显示的文字可用value属性指定，不指定时其默认值分别为“submit query”和“reset”。
表单中用input元素来收集数据。input元素决定了表单提供给用户的输入形式，它支持type、name和其它属性。
〈input type=”type” name=”name”〉
“type”=text, password, checkbox, radio, image, hidden, submit, reset
“name”=cgi程序所需的符号名
2. 文字和密码输入
需要用户输入文字时，应将input的type属性设置为text（这是type属性的默认值）。希望用户输入密码时，则应使用type=password。
3. 复选框和单选框
input元素支持的另外两个type属性是复选框和单选框，其对应的type属性值分别为checkbox和radio。如果要将复选框或单选框初始化为选中，则可以在input元素中使用checked属性。
〈input type=checkbox | radio〉
〈input type=checkbox | radio checked〉
〈input type=checkbox | radio value=”value”〉
4. 图像输入
图像表单输入需要将input元素的type属性设置为image，并使用name属性指定输入区域的名字，用src属性指定图像资源的url。
〈input type=image src=url〉
5. 列表框
html表单还允许设计列表框，包括下拉式列表和滚动式列表两种。列表框用select和option两种元素实现，基本格式为：
〈select name=”name”〉
〈option〉 ……
〈/select〉
select元素用来定义列表框。它支持name、size和multiple三种属性。option元素定义列表框的各选项。
6. 文本框
当预计用户的输入文本超过一行时，可使用文本框。文本框由textarea元素定义，它的常用属性有三个：由name规定文本框的名字，rows定义文本框的行数，cols定义文本框的列数。
三、窗框
frame的作法是将窗口划分为几块，每块称为一个窗框，所有窗框总称窗框集（frameset）。因此，在html文档中首先是定义一个窗框集，然后逐个定义窗框，并应保证支持窗框功能的浏览器能够正常浏览。
1.窗框的基本用法
设计html窗框时使用的三个主要元素分别是：frameset元素定义窗框集，它是一个整体框架；frame元素定义每一个窗框；考虑到有的浏览器不支持窗框功能，使用noframe元素来显示没有窗框时的信息（对于支持窗框功能的浏览器，这一部分内容不会显示）。
〈frameset〉 … 〈/frameset〉
〈frame src=”url”〉
〈noframes〉 … 〈/noframes〉
由于窗框功能从根本上改变了html文档的结构，所以规定：出现fraemset元素的文档中，不再使用body元素。
2.窗框的排列与尺寸设置
frameseet元素的cols属性规定窗口按纵向将窗口划分为若干窗框，rows属性指定窗口按横向将窗口划分为若干窗框。它们的属性值可以按窗
口尺寸的百分比给定，通常几个百分比之和应该等于100％；也可以按窗框尺寸的实际像素值给定。两种情况下都可以只给定希望严格限制的值，而将所剩之值以
星号（）表示。
〈frameset cols=n％, n％, …〉
〈frameset rows=n％, n％, …〉
3.窗框的互操作
每一个窗框都可以用name属性给予一个名字，并通过超链接元素a的target属性加以引用。这样，就可以实现各窗框之间的互操作。
窗框有四个预定义名，它们可加强窗框操作的便利：
●—blank：弹出新的无名窗框；
●—self：将链接指向本窗框；
●—parent：将链接指向父窗框（如果没有父窗框，就指向自身）；
●—top：指向最顶层，实际上就是整个浏览器窗框。
四、图像
1.基本用法
图像元素img用来将图像嵌入html文档。嵌入的图像称为内联图像。
img元素需要使用src属性来指定图像的url：〈img src=”url”〉
对img元素来说，src属性是必须的。img元素允许放入超链接元素中，因而可通过内联图像建立对其它文档的链接。img元素不需要结束标记。
img元素的另一个常用属性是alt，它指定对图像进行说明的一段文字，也就是浏览器尚未完全读入图像、或浏览器不支持内联图像、或用户为加快浏览速度时将图像置为不显示时，在图像位置显示的文字。
〈img alt=”text”〉
还可以使用border属性给图像添加边框和指定边框线的厚度。
〈img src=url border=number〉
2.图像质量控制
为了加速文档显示过程，可使用img元素的width属性和height属性来重新定义图像的尺寸：
〈img width=value height=value〉
另一个控制图像质量的属性是lowsrc。使用此属性可以在同一位置显示两个图像：
〈img src=”highres.gif” lowsrc=”lowres.jpg”〉
3.图像对齐与布局
img元素的另一个重要属性是align，它指定图像的对齐与布局方式：
〈img src=”url” align=left | right | top | texttop | middle | absmiddle | baseline | bottom | absbottom〉
align=left和align=right使图像浮动，并向页面窗口左侧或右侧对齐。此时图像附近的文本则相应在图像右侧或左侧环绕。其它属性值则指定图像与文本的相对对齐方式（垂直方向）。
4.图像映射
img元素的ismap（意为is map）属性将图像指定为图像映射。图像映射是其某些区域可映射到url的图形，通过点击图像映射的不同部位，可从同一图形访问不同的资源：
〈a href=”http://www.bh.com/htbin/imagemap/sample”〉
〈img src=”sample.gif” ismap〉 〈/a〉
在html文档中使用图像映射时，控制文档访问的http服务器必须正确安装控制图像映射特性的cgi软件。也就是说，文档必须能够访问图像映射软件，而图像映射软件则应指向定义图形热点（hot－spot）的 .map文件。
后来，人们又开发了较为简单的图像映射，称作客户端图像映射，作为html的延伸。它允许浏览器自行处理图像映射，可以通过映射关系访问html文件和ftp等机制的其它文件，而不需服务器端软件支持。
使用客户端图像映射时，必须给img元素添加usemap属性。usemap属性还可以与ismap同时使用，以指明图像可处理为客户端图像映射，也
可处理为服务器端图像映射。usemap的参数指定所用图像的位置，其格式类似于锚元素的href属性。如果usemap参数以 ＃
号开始，则表明与img标记处于同一文档：
〈img src=”../images/tech/pic1.gif” usemap=”maps.html＃map1″〉
图像的不同部位用map元素来描述。也就是说，map元素说明图像中的每一个希望建立链接的部位，并指明链接关系。