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