HTML表格与表单元素详解：图像映射技术及HTML4中Flash的引入与应用

表格（table）初步

表格是一种在网页上实现内容“行列完全对齐”的技术。其基本实现模式如下：

        

（一对tr是一行，一对td是一列）

                  

                  

        

                  

                  

……………

这是第1行的第1列	这是第1行的第2列
这是第2行的第1列	这是第2行的第2列

 

table标签常见属性：

         border=”宽度值”          ：设定表格线的宽度值，包括每个单元格的边框线

         width=”宽度值”                ：可以使用数字值或百分数，比如： width=”500”,   width=”80%”

         height=”高度值”

         cellspacing=”数值”          ：设定表哥中的单元格之间的间隙，单位是px（边框与字的间距）

         cellpadding=”数值”                   ：设定单元格中的内容跟单元格的边框线之间的间隙（边框自身间隙）

         align=”left||center||right”     :设定表格的水平对齐方式

         bgcolor=”颜色值”            ：设定表格的背景颜色

         background=”图片地址url”   ：设定表格的背景图片。注意：图片或自动完全填充表格区域，并如果需要，也会自动重复（不可以控制不重复），此时会将背景颜色覆盖（如果有）。

         bordercolor=”颜色值”    ：设定表格的边框线的颜色

        

td标签常见属性：

         width=”宽度值”                ：可以使用数字值或百分数，比如： width=”500”,   width=”80%”

         height=”高度值”

         align=”left||center||right”     :设定单元格中的内容的水平对齐方式

         valign=”top||middle||bottom”：设定单元格中的内容的垂直对齐方式        

bgcolor=”颜色值”            ：设定表格的背景颜色

         background=”图片地址url”   ：设定表格的背景图片。注意：图片或自动完全填充表格区域，并如果需要，也会自动重复（不可以控制不重复），此时会将背景颜色覆盖（如果有）。

         colspan=”数字值”                    ：设定一个单元格“向右”跨过多少个单元格（也就是类似合并掉多少个）

         rowspan=”数字值”         ：设定一个单元格“向下”跨过多少个单元格（也就是类似合并掉多少个）

 

tr标签常见属性：tr的属性通常影响的是其中所包括的td的属性

         align=”left||center||right”     :设定单元格中的内容的水平对齐方式

         valign=”top||middle||bottom”：设定单元格中的内容的垂直对齐方式        

bgcolor=”颜色值”            ：设定表格的背景颜色

         background=”图片地址url”   ：设定表格的背景图片。注意：图片或自动完全填充表格区域，并如果需要，也会自动重复（不可以控制不重复），此时会将背景颜色覆盖（如果有）。

        

表格深入

在表格应用中，还有如下一些标签：

th：

其同样表示单元格，同样放在tr中——凡是能用td的地方，就可以用th——其除了表示单元格之外，还同时表示是“标题性质的单元格”——其表现上是会自动居中并且文字粗体。

 

caption:

         用于设定表格的标题文字，放在table标签中

 

thead:

         代表表格的“头部区域”。

tbody:

         代表表格的“主体区域”。

         所有没有人为归到某个区域中的tr，都自动隶属于一个“tbody”标签。

tfoot:

         代表表格的“尾部区域”

 

一个表格(table)本质上其实只是由若干个行(tr)组成，每个行由若干个列（td||th）组成。

但：

我们可以人为地将一个表格的某些行定义为某种区域，这种区域划分只是出于现实逻辑上的需要，或现实数据划分的需要，但其实表格的本质并没有变化：tbody，thead,tfoot就是用来划分一个表格的区域用的，其本身不会改变表格的外观特征（表现）。此3个标签应该写在table标签中，tr标签外。

一个表格只能有一个thead和一个tfoot区，但可以有多个tbody区。

 

则表格标签嵌套关系总结：

                   caption

table è  thead                          th

                   tbody        è tr è   td

                   tfoot

表单元素

表单是什么？表单通常就是指在网页上可以供用户输入，选择，点击的一些“控件”。

通常，一个表单包含多个“表单项”：比如输入框，单选框，多选框，下拉选项，按钮，…..

这些表单项，每一个都是一个标签。他们都要包在一个整体的表单标签中，如下所示：

网页文件地址url”  method=”提交方式” >

         <输入框标签>

<单选框>

<多选框>

<下拉选项>

<按钮>

         action=”网页文件地址url”：  用于设定该表单中填写的数据提交给哪个文件来接收（处理），通常是php文件

         method=”提交方式”： 用于设定这个表单的数据提交的方式，只有两种：post,  get,

在html4中，有如下一些表单项：value会显示的有text,password,submit,reset,button

单行文本框：

         ”text”  name=”n1” value=”初始文字” />

密码框：

         ”password”  name=”n2” />

单选项：

         ”radio”  name=”n3” value=”1” />

        

                   …….

         说明：一组的单选项必须name相同，value不同

                   checked=”checked”属性可以设定该选项被选中

多选项：

         ”checkbox”  name=”n4” value=”1” />

        

                   …….

         说明：一组的多选项必须name相同，value不同

                   checked=”checked”属性可以设定该选项被选中

 

文件选择域：

         ”file”  name=”n5” />

 

隐藏域：

         ”hidden”  name=”n6” value=”1” />   (由于用户不可见，一般value有值)

 

提交按钮：

         =”submit”  name=”n7” value=”提交||注册||登录||发飙……” />

         说明：该类型的按钮一点击，则表单的数据就会被提交到action所设定的文件中去。

 

图片按钮：

     ”image”  src=”图片地址url”  name=”n8” />

         说明：该按钮显示的其实就是src设定的图片，但其具有提交按钮的作用：提交表单。

 

重置按钮：

         ”reset”  name=”n8” value=”重置” />

         说明：点击该按钮，则该表单中的所有用户填写或选择的数据都会被恢复到初始状态——不是清空

 

普通按钮：

         ”button”  name=”n8” value=”xxx” />

         说明：该按钮点击之后对该表单或该网页都没有任何影响。

 

多行文本框：

        

         说明：cols用于设定该输入框的宽度值，但其单位是“字符”，即上面是60个字符宽。 rows设定高度值，也是字符为单位，即上面是10个字符高。

 

下拉选项：

        

                   项目1

                   项目2

                   项目3

                            。。。。。

        

         说明： selected属性用于设定某个选项是初始被选中的（可见的）选项。

多行列表选项：

         name=”n12”  size=”3” >

                   项目1

                   项目2

                   项目3

                            。。。。。

        

下拉选项和多行列表选项区别在此，

一些解释：

1，  通常，每个表单项都需要一个name属性——出于编程的考虑。

2，  表单项通常都可以使用disabled这个属性来将其设置为“无效”（不可操作）

3，  readonly（只读）通常可以使一个输入性表单不可输入。

4，  size属性可以用于单行文本框或密码框来设置其“宽度”，也是以字符为单位。

5，  maxlength属性可以用于单行文本框或密码框来设置其中可输入的最多的字符数。

图片标签

在一个网页中显示图片，可以使用img标签，则该图片作为“外部文件”，会嵌入到当前网页中来。

图片地址url” alt=”图片的说明性文字”  title=”图片的提示性文字” width=”宽度值” height=”高度值”  border=”边框粗细值” />  （一般来讲，width和weight只写一个，系统会自动锁定纵横比）

         区分2个文字信息：

                   说明性文字：说明该图片的具体内容，其实其主要是给搜索引擎使用，以使搜索引擎“知道”该图片具体是什么。

                   提示性文字：鼠标放到该图片（标签||元素）上，会出来的提示文字。
         通常，一个图片的宽度值和高度值只设置一个（即保证宽度是合适的或高度是合适的），则灵一个方向的数据由浏览器来按图片的实际宽高比例自动调整

Eg:

        

        

在一个实际网站中，通常将网站界面所需要的图片集中放在一个文件夹中，便于统一管理，通常使用images这一个文件夹。

图像映射技术

通过a标签，对一张图片可以实现链接，以链接到其他网页，它其实是a标签的应用。

但：

我们通过img的图像映射技术，却可以实现在一张图上实现多个链接，链接到不同的网页去。

其实现方式为：

图像地图名” />

图像地图名”>

         在此标签中，使用area标签来设定该图片的“局部区域范围”并形成链接。有3种区域形式：

         1：矩形：

                  

                   注意：上述坐标值的格式是：x坐标,y坐标。

                            坐标的参考是当前这张图片，其左上角是原电（0点）（0,0），往右是x的正方向，往下是y的正方向。

         2：圆形：

                 

         3：多边形：

                  

 

html4中的多媒体的展现

多媒体通常指音频和视频，广义的还包括图片。

实际上，在html4中，并没有多媒体内容的解决方案！

在实际应用中，多媒体基本上都是通过浏览器安装外部插件来实现多媒体的播放，最广泛流行的插件就是flash。

引入flash插件通常类似这样：