《中国计算机报》出版日期: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元素说明图像中的每一个希望建立链接的部位,并指明链接关系。