注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

HTML教程(下)  

2008-05-24 07:46:39|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


 

第六章 图像的处理

    图像可以使html页面美观生动且富有生机。浏览器可以显示的图像格式有jpeg,bmp,gif。其中bmp文件存储空间大,传输慢,不提倡用,常用的jpeg和gif格式的图像相比较,jpeg图像支持数百万种颜色,即使在传输过程中丢失数据,也不会在质量上有明显的不同,占位空间比gif大,gif图像仅包括265色彩,虽然质量上没有jpeg图像高,但占位储存空间小,下载速度最快、支持动画效果及背景色透明等特点。因此使用图像美画页面可视情况而决定使用那种格式。

6-1< P 背景图像的设定

    在网页中除了可以用单一的颜色做背景外,还可用图像设置背景。

    设置背景图像的格式:

         <body background= "image-url">

    其中 "image-url" 指图像的位置。

实例:6-1.html

<html>
<head>
<title>设置背景图像</title>
</head>
<body background="imge/11.gif">
<center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font color="#006600" size="+6">盼望着,盼望着,东风来了,春天脚步近了.</font>
</p>
</center>
</body>
</html>

6-2 网页中插入

    网页中插入图片用单标签<img>,当浏览器读取到<img>标签时,就会显示此标签所设定的图像。如果要对插入的图片进行修饰时,仅仅用这一个属性是不够的,还要配合其它属性来完成。

    插入图片标签<img>的属性

属 性 描 述
src 图像的url的路径
alt 提示文字
width 宽度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
height 高度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
dynsrc avi文件的url的路径
loop 设定avi文件循环播放的次数
loopdelay 设定avi文件循环播放延迟
start 设定avi文件的播放方式
lowsrc 设定低分辨率图片,若所加入的是一张很大的图片,可先显示图片。
usemap 映像地图
align 图像和文字之间的排列属性
border 边框
hspace 水平间距
vlign 垂直间距

    <IMG> 的格式及一般属性设定:

    <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

6-1-1 普通< STRONG>

实例:6-2-1.html

<html>
<head>
<title>普通插入图片</title>
</head>
<body>
<BODY>
<CENTER>
<H2>爱在深秋</H2>
<IMG src="../../imge/6-5.gif">
</CENTER>
<WBR>
<p>秋雨无声无息地下着。<BR>
飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶,只能带着丝丝牵挂,无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了,地上落叶多了……<BR>
黄昏,我漫步在郊外的林间,想细细地品味秋雨的凄冷。<BR>
然而,“雨到深秋易作霖,萧萧难会此时心”,此时,又有谁能听我诉说心中的那份情怀呢?<BR>
</p>
</WBR>
</body>
</html>

6-2-2 设定< hspace>

实例:6-2-2.html

<html>
<head>
<title>设定图像与文本之间的距离</title>
<body>
<img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">
<font size="+3">秋雨无声无息地下着。<BR>
飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶,只能带着丝丝牵挂,无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了,地上落叶多了……<BR>
黄昏,我漫步在郊外的林间,想细细地品味秋雨的凄冷。
然而,“雨到深秋易作霖,萧萧难会此时心”,此时,又有谁能听我诉说心中的那份情怀呢?</font><BR>
</body>
</html>

6-2-3 设定字

   图像和文字的之间的对齐是通过align属性来设定的, align的对齐方式有两种:即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样,只有三种:居中(middle)、居左(left)、居右(right)。相对文字对齐方式是指图像与一行文字的相对位置。

对其属性align的设定

属 性 值
对 齐 方 式
top 上对齐
middle 居中对齐
bottom 下对齐
left 左对齐
right 右对齐

实例:6-2-3.html

<html>
<head>
<title>控制图像相对于文字基准线的水平对齐方式</title>
</head>
<body>
<img src="../../imge/6-2.jpg" align="left">
此图像相对于文字基准线为靠上对齐的多行文字<br>试想在圆月朦胧之夜,海棠是这样的妩媚而嫣润;枝头的好鸟为什么却双栖而各梦呢?在这夜深人静的当儿,那高踞着的一只八哥儿,又为何尽撑着眼皮儿不肯睡去呢?他到底等什么来着?舍不得那淡淡的月儿么?舍不得那疏疏的帘儿么?不,不,不,您得到帘下去找,您得向帘中去找——您该找着那卷帘人了?他的情韵风怀,原是这样这样的哟!朦胧的岂独月呢;岂独鸟呢?但是,咫尺天涯,教我如何耐得?<br>我拚着千呼万唤;你能够出来么?
<br>这页画布局那样经济,设色那样柔活,故精采足以动人。虽是区区尺幅,而情韵之厚,已足沦肌浃髓而有余。我看了这画。瞿然而惊:留恋之怀,不能自已。故将所感受的印象细细写出,以志这一段因缘。但我于中西的画都是门外汉,所说的话不免为内行所笑。——那也只好由他了。
<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="right">
此图像相对于文字基准线为靠上的多行文字对齐<br>试想在圆月朦胧之夜,海棠是这样的妩媚而嫣润;枝头的好鸟为什么却双栖而各梦呢?在这夜深人静的当儿,那高踞着的一只八哥儿,又为何尽撑着眼皮儿不肯睡去呢?他到底等什么来着?舍不得那淡淡的月儿么?舍不得那疏疏的帘儿么?不,不,不,您得到帘下去找,您得向帘中去找——您该找着那卷帘人了?他的情韵风怀,原是这样这样的哟!朦胧的岂独月呢;岂独鸟呢?但是,咫尺天涯,教我如何耐得?<br>我拚着千呼万唤;你能够出来么?
<br>这页画布局那样经济,设色那样柔活,故精采足以动人。虽是区区尺幅,而情韵之厚,已足沦肌浃髓而有余。我看了这画。瞿然而惊:留恋之怀,不能自已。故将所感受的印象细细写出,以志这一段因缘。但我于中西的画都是门外汉,所说的话不免为内行所笑。——那也只好由他了。
<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="top">
此图像相对于文字基准线为顶部单行对齐<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align=bottom>
此图像相对于文字基准线为底线单行对齐</p>
<p>
<hr color="#00ff00">
<p><img src="../../imge/6-2.jpg" align="middle">
此图像相对于文字基准线为置中单行对齐</p>
<p>&nbsp;</p>
<p><a href="#" >返回</a></p>
<p>
</body>
</html>

6-2-4 图片大小< STRONG>

实例:6-2-4.html

<html>
<head>
<title>图像大小的设定</title>
</head>
<body>
<center>
<p>
缩小图像
<p><img src="../../imge/6-3.gif" width="350" height="200">
<p>原图显示
<p>
<img src="../../imge/6-3.gif" width="400" height="236">
<p>放大图像
<p>
<img src="../../imge/6-3.gif" width="500" height="250">
</p>
</center>
</body>
</html>

6-2-5 图像边框

实例:6-2-5.html

<html>
<head>
<title>设定图像的边框</title>
</head>
<body>
<center>
<div align="center">
<pre><img src="../../imge/xjbjtp22.jpg" border="10"></pre>
</div>
</body>
</html>

6-3 图像的< STRONG>

    图像的链接和文字的链接方法是一样的,都是用<a>标签来完成,只要将<img>标签放在<a>和</a>只见就可以了。用图像链接的图片的上有蓝色的边框,这个边框颜色也可以在<body>标签中设定。

实例:6-3-1.html

<html>
<head>
<title>使用图像为选取的对象</title>
</head>
<body>
<p align="center">&nbsp;</p>
<h1 align="center">图片的超链接</h1>
<P>
<center>
<a href="http://www.sohu.com/" target="_blank"><img alt="搜狐网站" src="../../imge/logo[1].gif"></a><p>
<a href="http://www.baidu.com/"><img alt="百度搜索" src="../../imge/logo[2].gif"></a><p>
<a href="http://www.sina.com.cn"><img alt="新浪网站" src="../../imge/logo(3).gif"></a>
</center>
</body>
</html>

6-3-2 图像的影像地图超链接

   在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法:

   影像地图(Image Map)标签的使用格式:

    <img src="图形文件名" usemap="#图的名称">
         
      <!-- 插入图片时要在<img>标记中设置参数usemap="#图的名称" ismap,以表示对图像地图(图的名称)的引用;-->

    <map >

       <!--用<map>标记设定图像地图的作用区域,并用name属性爲图像起一个名字-->

     <area shape=形状 coords=区域座标列表 href="URL资源地址">
     ......可根据需要定义多少个热点区域
     <area shape=形状 coords=区域座标列表 href="URL资源地址">

    </map>

【1】shape -- 定义热点形状
         shape=rect:  矩形
         shape=circle:圆形
         shape=poly:  多边形

【2】coords -- 定义区域点的坐标

    a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
        例:<area shape=rect coords=100,50,200,75 href="URL">

    b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
        例:<area shape=circle coords=85,155,30 href="URL">

    c.任意图形(多边形):将图形之每一转折点座标依序填入
        例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

在制作本文介绍的效果时应注意的几点:
   1、在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,“图像地图名称”要一致;
   2、同一“图像地图”中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间;
   3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。

实例 6-3-2.html


<html>
<head>
<title>影像地图</title>
</head>

<body>
<img src="../../imge/yxlj.jpg" alt="影像地图" hspace="10" align="left" usemap="#yxdt" border="0">
<map >
<area shape="rect" coords="80,69,180,120" href="http://www.baidu.com/" target="_blank" alt="点击链接到百度搜索">
<area shape="circle" coords="283,95,45" href="http://www.sina.com.cn" target="_blank" alt="点击链接到新浪网站">
</map>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="#" >返回</a></p>
</body>
</html>

6-4 用< STRONG>

格式:<img dynsrc="avi文件地址">

<img>标签插入avi文件的属性

属 性 描 述
dynsrc 指定avi文件所在路径
loop 设定avi文件循环次数
loopdelay 设定avi文件循环延迟
start 设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放)

实例:6-4.html

<html>
<head>
<title>设定图像的边框</title>
</head>
<body>
<center>
<p align="center">
<img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover">
</p>
</center>
</body>
</html>

 

第七章 TABLE表格

    表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格

7-1 定义表格

    在html文档中,表格是通过<table>,<th>,<tr>,<td>标签来完成的,如下表所示:

表格标记

标 签
描 述
<table>...</table> 用于定义一个表格开始和结束
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示,在表格中也可以不用此标签,<th>标签必须放在<tr>标签内
<tr>...</tr>

定义一行标签,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<td>...</td> 定义单元格标签,一组<td>标签将将建立一个单元格,<td>标签必须放在<tr>标签内

    在一个最基本的表格中,必须包含一组<table>标签,一组标签<tr>和一组<td>标签或<th>。

实例:7-1.html

<HEAD>
<TITLE>一个简单的表格</TITLE>
</HEAD>
<BODY>
<center>
  <table>
    <tr>
      <td>第1行中的第1列</td>
      <td>第1行中的第2列</td>
      <td>第1行中的第3列</td>
    </tr>
    <tr>
      <td>第2行中的第1列</td>
      <td>第2行中的第2列</td>
      <td>第2行中的第3列</td>
    </tr>
  </table>
</center>
</BODY>
</HTML>

7-2(1)表格<table>标签的属

    表格标签<table>有很多属性,最常用的属性有:

<table>标签的属性

属 性 描 述
width 表格的宽度
height 表格的高度
align 表格在页面的水平摆放位置
background 表格的背景图片
bgcolor 表格的背景颜色
border 表格边框的宽度(以像素为单位)
bordercolor 表格边框颜色
bordercolorlight 表格边框明亮部分的颜色
bordercolordark 表格边框昏暗部分的颜色
cellspacing 单元格之间的间距
cellpadding 单元格内容与单元格边界之间的空白距离的大小

实例:7-2-1.html

<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table border=10 bordercolor="#006803" align="center" bgcolor="#DDFFDD" width=500 height="200"bordercolorlight="#FFFFCC" bordercolordark="#660000" background="../../imge/b0024.gif" cellspacing="2" cellpadding="8">

<tr>
<td>第1行中的第1列</td>
<td>第1行中的第2列</td>
<td>第1行中的第3列</td>
</tr>

<tr>
<td>第2行中的第1列</td>
<td>第2行中的第2列</td>
<td>第2行中的第3列</td>
</tr>
</table>
</body>
</html>

7-2(2) 表格的边框显示状态 frame

    表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态

    语法格式:<table frame="边框显示值">

表格边框显示状态frame的值的设定

frame的值 描 述
box 显示整个表格边框
void 不显示表格边框
hsides 只显示表格的上下边框
vsides 只显示表格的左右边框
alove 只显示表格的上边框
below 只显示表格的下边框
lhs 只显示表格的左边框
rhs 只显示表格的右边框

实例:7-2-2.html

<HTML>
<HEAD>
<TITLE>表格边框的显示状态</TITLE>
</HEAD>
<BODY >
<TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF" width="400" height="160">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>卡卡</TD>
<TD>男</TD>
<TD>50</TD>
<TD>计算机</TD>
</TR>
</TABLE>
</BODY>
</HTML>

< 设置分隔线的显示状态>

  语法格式:<table rules="值">

分隔线的显示状态rules的值的设定

rules的值 描 述
all 显示所有分隔线
groups 只显示组与组的分隔线
rows 只显示行与行的分隔线
cols

只显示列与列的分隔线

none 所有分隔线都不显示

实例:7-2-3.html

<html>
<head>
<title>无标题文档</title>
</head>
<body>
<TABLE border=6 bgcolor="#FFFFCC" rules="cols" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>笨笨猫</TD>
<TD>女</TD>
<TD>99</TD>
<TD>计算机</TD>
</TR>
</TABLE><p>
<TABLE border=6 bgcolor="#FFFFCC" rules="rows" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>笨笨猫</TD>
<TD>女</TD>
<TD>99</TD>
<TD>计算机</TD>
</TR>
</TABLE>
</body>
</html>

表格是按行和列(单元格)组成的,一个表格有几行组成就要有几个行标签<tr>,行标签用它的属性值来修饰,属性都是可选的。

<tr>标签的属性

属 性 描 述
align 行内容的水平对齐
valign 行内容的垂直对齐
bgcolor 行的背景颜色
bordercolo 行的边框颜色
bordercolorlight 行的亮边框颜色
bordercolordark 行的暗边框颜色

<TR> 的参数设定(常用):
  <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

实例:7-3.html

<HTML>
<HEAD>
<TITLE>表格行的控制</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" width="80%" height="150">
<TR ALIGN="CENTER">
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>年 龄</TH>
<TH>专 业</TH>
</TR>
<TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1">
<TD>咚 咚</TD>
<TD>男</TD>
<TD>18</TD>
<TD>学 生</TD>
</tr>
<tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottom bordercolorlight="#E1F0FD" bordercolordark="#002346">
<TD>楠 楠</TD>
<TD>女</TD>
<TD>17</TD>
<TD>学 生</TD>
</TR>
</TABLE>
</BODY>
</HTML>

<th>和<td>都是插入单元格的标签,这两个标签必须嵌套在<tr>标签内。是成对出现的。<th>用于表头标签,表头标签一般位于首行或首列,标签之间的内容就是位于该单元格内的标题内容,其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容,<th>和<td>标签的属性都是一样的,属性设定如下:

<th>和<td>的属性

属 性 描 述
width/height 单元格的宽和高,接受绝对值(如 80)及相对值(如 80%)。
colspan 单元格向右打通的栏数
rowspan 单元格向下打通的列数
align 单元格内字画等的摆放贴,位置(水平),可选值为: left, center, right。
valign 单元格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。
bgcolor 单元格的底色
bordercolor 单元格边框颜色
bordercolorlight 单元格边框向光部分的颜色
bordercolordark 单元格边框背光部分的颜色
background 单元格 背景图片


<TD> 的参数设定格式:
例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

实例:7-4.html

<HTML>
<HEAD>
<TITLE>单元格的设定</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" height="150" width="80%">
<TR>
<TH width=70 bgcolor="#FFCC00">姓 名</TH>
<TH bgcolor="#FFCCFF">性 别</TH>
<TH background="../../imge/b0024.gif">年 龄</TH>
<TH background="../../imge/aki-5.gif">专 业</TH>
</TR>
<TR>
<TD bordercolor=red align="left">笨笨猫</TD>
<TD bordercolorlight="#FFCCFF" bordercolordark="#FF0000" align="center">女</TD>
<TD bgcolor="#FFFFCC" valign="bottom" align="center">18</TD>
<TD bgcolor="#CCFFFF" align="right">学生</TD>
</TR>
</TABLE>
</BODY>
</HTML>

    要创建跨多行、多列的单元格,只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性的属性值,默认值为1。表明了表格中要跨越的行或列的个数。

   跨多列的语法: <th colspan=#> <td colspan=#>

  colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度。

   跨多行的语法: <th rowspan=#> <td rowspan=#>
 
   rowspan所要表示的意义是指跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度。

实例:7-5.html

<html>
<head>
<title>跨多行跨多列的单元格</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">

<TR ALIGN=center>
<TH colspan=3> 学生基本信息</TH>
<TH colspan=2>成 绩</TH>
</TR>

<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>专 业</TH>
<TH>课 程</TH>
<TH>分 数</TH>
</TR>

<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD>
<TD>68</TD>
</TR>

<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>

</table>
</body>
</html>

< <tbody> 表格的行分组<thead> 表格的分

    html文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个部分组成的。其中尾注标签很少用。<thead>标签是成对标签,其标签内是由表头标签标识的表头元素。<tbody>标签用于规定表格主体部分的元素。<thead>和<tbody>标签的属性和<th><td>标签是一样的。

实例:7-6-1.html

<html>
<head>
<title>表格按行分组</title>
</head>
<body>
<center>
<table border=3 width=60% align="center" height="150">
<thead bgcolor="#CCFFCC">
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>专 业</TH>
</TR>
</thead>
<tbody bgcolor="#448FBD">
<TR ALIGN=center>
<TD>咚 咚</TD><TD>男</TD><TD>计算机</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD><TD>女</TD><TD>园 林</TD>
</TR>
</tbody>
</table>
</body>
</html>

<>

    html使用<colgroup>标签来将表格分组。

    语法格式:<colgroup span="数值" align="参数">

   说明:<colgroup>标签有两个属性,span和align, 他们都是可选的。span属性的值是数字,表示该组包含的列数,默认值为1。align属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为left,center,right之一。它们表示单元格的内容是左对齐,水平居中还是右对齐。

实例:7-6-2.html

<html>
<head>
<title>表格按列分组</title>
</head>
<center>
<table border=10 width=80% height="160" align="center" bordercolorlight="#CCCCFF" bordercolordark="#9900FF">
<tr>
<th>姓名</th><th>性别</th><th>专业</th><th>分数</th>
</tr>
<colgroup span=2 align=center>
<colgroup align =left>
<colgroup align=right>
<tr>
<td>咚 咚</td><td>男</td><td>计算机</td><td>79</td>
</tr>
<tr>
<td>喃 喃</td><td>女</td><td>园 林</td><td>90</td>
</tr>
<tr>
<td>依 依</td><td>女</td><td>微波通信</td><td>76<td>
</tr>
</table>
</body>
</html>

<>

实例:7-6-3.html 

<HTML>
<HEAD>
<TITLE>同时进行行列分组</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>
<TR>
</THEAD>
<COLGROUP SPAN=2 ALIGN=CENTER>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=RIGHT>
<TBODY bgcolor="#FFCCFF">
<TR>
<TD>咚 咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD>
</TR>
<TR>
<TD>喃 喃</TD><TD>女</TD><TD>园 林</TD><TD>94</TD>
</TR>
<TR>
<TD>依 依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

表格标题的位置,可由ALIGN属性和VALIGN属性来设置,ALIGN属性设置标题位于文档的左,中,右。 VALIGN属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。

  语法格式:

    <caption align="值" valign="值" >表哥标题</caption>

   <caption>应放在<table>标签内,在表格行标签<tr>标签之前。

    <caption>标签的默认属性是标题位于表格的上方中间

实例:7-7.html

<html>
<head>
<title>表格的标题标签</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">

<caption>学生信息表</caption>

<TR ALIGN=center>
<TH colspan=3> 学生基本信息</TH>
<TH colspan=2>成 绩</TH>
</TR>

<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>专 业</TH>
<TH>课 程</TH>
<TH>分 数</TH>
</TR>

<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD>
<TD>68</TD>
</TR>

<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>

</body>
</html>

    在html页面中,使用表格排版是通过嵌套来完成的,即一个表格内部可以嵌套另一个表格,用表格来排版页面的思路是:由总表格规划整体的结构,由嵌套的表格负责各个子栏目的排版,并插入到表格的相应位置,这样就可以使页面的各个部分有条不紊,互不冲突,看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚,都设置了有边框。

实例7-8.html

<html>
<head>
<title>表格嵌套</title>
</head>

<body bgcolor="#555555" text="#FFFFFF">
<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">
<tr>
<td width="100" height="69">网页标志</td>
<td colspan="2"><div align="center">广告条</div></td>
</tr>
<tr>
<td height="330"><table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1">
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td height="90">内容六</td>
</tr>
</table></td>
<td width="275"><table width="275" height="325" border="3" cellpadding="1" cellspacing="1">
<tr>
<td width="263">内容一</td>
</tr>
<tr>
<td>内容二</td>
</tr>
</table></td>
<td width="163"><table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center">
<tr>
<td width="136" height="94">内容三</td>
</tr>
<tr>
<td height="62">内容四</td>
</tr>
<tr>
<td height="160">内容五</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

 

第八章网页的动态、多媒体效果

    在网页的设计过程中,动态效果的插入,会使网页更加生动灵活、丰富多彩。

8-1 滚动字幕

<marquee>

   <marquee>标签可以实现元素在网页中移动的效果,以达到动感十足的视觉效果。<marquee>标签是一个成对的标签。应用格式为:
     
    <marquee>...</marquee>

    <marquee>标签有很多属性,用来定义元素的移动方式:

<marquee>的属性

属 性 描 述
align 指定对齐方式top,middle,bottom
scroll 单向运动
slide 如幻灯片,一格格的,效果是文字一接触左边就停止。
alternate
左右往返运动
bgcolor 设定文字卷动范围的背景颜色
loop 设定文字卷动次数,其值可以是正整数或 infinite表示无限次 默认为无限循环
height 设定字幕高度
width 设定字幕宽度
scrollamount 指定每次移动的速度,数值越大速度越快
scrolldelay 文字每一次滚动的停顿时间,单位是毫秒。时间越短滚动越快
hspace 指定字幕左右空白区域的大小
vspace 指定字幕上下空白区域的大小
direction 设定文字的卷动方向,left表示向左,right表示向右,up表示往上滚动
behavior 指定移动方式,scroll表示滚动播出,slibe表示滚动到一方后停止,alternate表示滚动到一方后向相反方向滚动。

8-1 实例h8-1.html

<html>
<body>
<center>
<font face="字体2" size=6 color="#ff0000">
滚动字幕
</font><br>
<marquee>啦啦啦~~~我会跑了</marquee>
<p>
<marquee height="200" direction="up" hspace="200">啦啦啦~~~我会往上跑了<br>啦啦啦~~~我会往上跑了</marquee>
<p>
<marquee direction="right">啦啦啦~~~我会往右跑了</marquee>
<p>
<marquee height="200" direction="down"><center>啦啦啦~~~我会往下跑了</center></marquee>
<p>
<marquee width="500" behavior="alternate">啦啦啦~~~我来回的跑</marquee>
<p>
<marquee behavior="slide">啦啦啦~~~我跑到目的地就该休息了</marquee>
<P>
<marquee scrollamount="2">啦啦啦~~~我累了,要慢慢的溜达</marquee>
<P>
<marquee scrolldelay="300">啦啦啦~~~我累了,我要走走停停</marquee>
<p>
<marquee scrollamount="20">哈哈~都没有我跑得快</marquee>
<p>
<marquee><img src="../../imge/6-2.jpg">啦啦啦~~图片也可以啊</marquee>
<p>
<marquee bgcolor="#FFFFCC" width="700" vspace="30"><font size="+3" color="#FF0000">啦啦啦~~滚动文字有背景了</font></marquee>
</center>
</body>
</html>

8-2 插入多媒体文件

  在网页中可以用<embed>标签将多媒体文件插入,比如可以插入音乐和视频等。 用浏览器可以播放的音乐格式有:MIDI音乐、WAV音乐、mp3、AIFF、AU格式等。另外在利用网络下载的各种音乐格式中,MP3是压缩率最高,音质最好的文件格式。但要说明一点,虽然我们用代码标签插入了多媒体文件,但IE浏览器通常能自动播放某些格式的声音与影像,但具体能播放什么样格式的文件.取决于所用计算机的类型以及浏览器的配置.浏览器使用Hn7或n7协议获取多媒体文件,(可能得花很长时间,因为多媒体文件通常比较大),浏览器既就决定如何播放。通常是调用称为括件的内置程序来播放的。事实上.浏览器仅仅能显示几种文件格式。是括件扩展了浏览器的能力.有许多种不同的括件程序,每种都能赋予浏览器一种新的能力。有时,不得不分别下栽每个浏览器的多媒体插什程序.系统最小化的安装一般不包括声音与影像播放器。另外在播放影音文件时,若是使用一小部分窗口播放,大多数的计算机还比较快。若是全屏幕播放.就需要专用的硬件或是性能好的计算机.对于IE,若无预先安装好的插件程序,它会提示你或是打开文件或是保存文件或是取消下载。若打开未知类型的文件,浏览器会试图使用外部的应用程序显示此文件.但这要取决于操作系统的配置。

<embed>标签的使用格式:

<EMBED SRC="音乐文件地址">

常用属性如下:


SRC="FILENAME" 设定音乐文件的路径
AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSE
LOOP=TRUE/FALSE 设定播放重复次数,LOOP=6表示重复6次,TRUE表示无限次播放,FALSE播放一次即停止。
STARTIME="分:秒" 设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20
VOLUME=0-100 设定音量的大小。如果没设定的话,就用系统的音量。
WIDTH HEIGHT 设定播放控件面板的大小
HIDDEN=TRUE 隐藏播放控件面板
CONTROLS=CONSOLE/SMALLCONSOLE 设定播放控件面板的样子

实例 h8-2-1.html

<HTML>
<HEAD>
<TITLE>插入多媒体文件</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/一千零一夜.mid" height=150 width=400 loop="false">
</center>
</BODY>
</HTML>

实例 h8-2-2.html

<HTML>
<HEAD>
<TITLE>插入多媒体文件</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/mmm.avi" width="400" height="500" loop="false">
</center>
</BODY>
</HTML>

实例 h8-2-3.html

<HTML>
<HEAD>
<TITLE>插入flash</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/023.swf" height="500" width="550"><!--插入flash-->
<embed src="../../imge/023.swf" height="500" width="550" wmode="transparent"><!--插入透明flash-->
</center>
</BODY>
</HTML>

实例 h8-2-4.html

<html>
<head>
<title>在图片上插入透明flash</title>
</head>
<body bgColor=lightblue>
<br><center>在图片上插入透明Flash动画</center><br>
<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolorlight="#00CC99" bordercolordark="#009933" background="../../imge/hai.jpg"><TBODY><TD><EMBED src="../../imge/016.swf" width=630 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed></TD></TBODY></table></center>
</body>
</html>

注意  长和宽的设定要根据图片的实际大小来设定

8-3 嵌入多媒体文件

   除了可以使用上述方法插入多媒体文件外,还可以在网页中嵌入多媒体文件,这种方式将不调用媒体播放器

8-3-1 嵌入背景音乐

 <bgsound>标签用来设置网页的背景音乐。但只适用於 IE,其参数设定不多。格式如下:

 <BGSOUND src="your.mid" autostart=true loop=infinite>

  • src="your.mid"
    设定 midi 档案及路径,可以是相对或绝对。声音文件可以是wav,midi,mp3等类型的文件
  • autostart=true
    是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
  • loop=infinite
    是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。直到网页关闭为止。

实例 8-3-1.html

<HTML>
<HEAD>
<TITLE>背景声音</TITLE>
</HEAD>
<body>
<H4 ALIGN="CENTER" >网页的背景声音<H4>
<HR>
<bgsound src="../../imge/小三和弦.mp3" LOOP="3">
</BODY>
</HTML>

背景音乐可以放在<body></body>或<head></head>之间

8-3-2 在网页中嵌入视屏文件使用前面学过的标签<img src="路径">,在此就不重述了。

8-4 点播音乐

将音乐做成一个链接,只需用鼠标在上面单击,就可以听到动人的音乐了,这样做的方法很简单:

   <A HREF="音乐地址">乐曲名</A>

例如:播放一段MIDI音乐:

   <A HREF="imge/一千零一夜.mid">MIDI音乐</A>  MIDI音乐

   播放一段AU格式音乐:

   <A HREF="imge/小三和弦.mp3">小三和弦-mp3音乐</A> 小三和弦-mp3音乐

  把我们喜欢的音乐收集起来,作成一个音乐库,随时都可以让自己和别人徜徉在音乐的海洋中,已经有人这样做了,你一定已经遇到很多,而且自己也可以试着去做了!

 

第九章 多视窗口框架

9-1 框架的含义和基本构成

    框架就是把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果,也可以非常方便的完成导航工作。

    而所有的框架标记 要放在一个 html 文档中。html页面的文档体标签<body>被框架集标签<frameset>所取代,然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。

   语法格式:

           <html>
           <head>
           </head>
           <frameset>
               <frame src="url地址1">
               <frame src="url地址2">
               ......
           <frameset>
           </html>

Frame子框架的src属性的每个URL值指定了一个html文件(这个文件必须事先做好)地址,地址路径可使用绝对路径或相对路径,这个文件将载入相应的窗口中。

框架结构可以根据框架集标签<frameset>的分割属性分为3种:

  1. 左右分割窗口
  2. 上下分割窗口
  3. 嵌套分割窗口

9-2 框架集<frameset>控制

<frameset>的属性

属 性 描 述
border 设置边框粗细,默认是5象素.
bordercolor 设置边框颜色
frameborder 指定是否显示边框 :"0"代表不显示边框,"1"代表显示边框
cols 用"象素数" 和 "%"分割左右窗口,"*"表示剩余部分
rows 用"象素数" 和 "%"分割上下窗口,"*"表示剩余部分
framespacing="5" 表示框架与框架间的保留空白的距离
noresize

设定框架不能够调节,只要设定了前面的,后面的将继承

  1. 左右分割窗口属性:cols

    如果想要在水平方向将浏览器分割多个窗口,这需要使用到框架集的左右分割窗口属性cols.分割几个窗口其cols的值就有几个,值的定义为宽度,可以是数字(单位为像素),也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用"*"号表示,剩余值表示所有窗口设定之后的剩余部分,当"*"只出现一次时,表示该子窗口的大小将根据浏览器窗口的大小自动调整,当"*"出现一次以上时,表示按比例分割剩余的窗口空间。cols的默认值为一个窗口

如:  <frameset cols="40%,2*,*">    将窗口分为40%,40%,20%
      <frameset cols="100,200,*">
   <frameset cols="100,*,*">   将100像素以外的窗口平均分配
   <frameset cols="*,*,*">    将窗口分为三等份

  2. 上下分割窗口属性:rows

    上下分割窗口的属性设置和左右窗口的属性设定是一样的,参照上面所述就可以了。

9-3 子窗口<frame>标签的设定

<frame>常用属性

属 性 描 述
src 指示加载的url文件的地址
bordercolor 设置边框颜色
frameborder 指示是否要边框,1显示边框,0不显示(不提倡用 yes 或 no)
border 设置边框粗细
name 指示框架名称,是连结标记的 target所要的参数
noresize 指示不能调整窗口的大小,省略此项时就可调整,
scorlling 指示是否要滚动条,auto根据需要自动出现,Yes有,No无
marginwidth 设置内容与窗口左右边缘的距离,默认为1
marginheight 设置内容与窗口上下边缘的边距,默认为1
width 框窗的宽及高 默认为width="100" height="100"
align 可选值为 left, right, top, middle, bottom

子窗口的排列遵循从左到右,从上到下的次序规则。

实例一 sl9-1.html

首先我们新建一个文件夹,然后做四个要放到子窗口中的页面,sl1.html、sl2.html、sl3.html、sl4.html。

<html>
<head>
</head>
<frameset rows="20%,2*,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset><noframes></noframes>
</html>

实例二 sl9-2.html

<html>
<head>
</head>
<frameset rows="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html" noresize="noresize">
</frameset><noframes></noframes>
</html>

实例三 sl9-3.html

<html>
<head>
</head>
<frameset cols="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset rows="300,500"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>

实例四 sl9-4.html

<html>
<head>
</head>
<frameset rows="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>

实例五 sl9-5.html

<html>
<head>
</head>
<frameset rows="20%,*,15%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
<frame src="sl4.html">
</frameset><noframes></noframes>
</html>

    大家看到上面的文件中还有一对<noframes></noframes>标签,即使在做框架集网页时没有这对标签,文件在很多浏览器解析时也会自动生成<noframes>标签,这对标签的作用是当浏览者使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 <NOFRAMES> 这个标记,当使用的浏览器看不到框架时,他就会看到 <NOFRAMES>你的浏览器不支持框架网页</NOFRAMES>之间的内容,而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本。

    如果在窗口中要做链接,就必须对每一个子窗口命名,以便于被用于窗口间的链接,窗口命名要有一定的规则,名称必须是单个英文单词,允许使用下滑线,但不允许使用"—","句点"和空格等,名称必须以字母开头,不能使用数字,还不能使用网页脚本中保留的关键字,在窗口的链接中还要用到一个新的属性"targe",用这个属性就可以将被链接的内容放置到想要放置的窗口内。

下面的实例就是窗口内的命名和链接方法

    文件一中的片断代码格式为:

     <a href="sl1.html" target="aa2">爱在深秋</a>
     <a href="sl2.html" target="aa3">图像对文字的水平居中</a>
     <a href="sl3.html" target="aa2">图像与文本之间的距离</a>
     <a href="sl4.html" target="aa3">图像大小的设定</a>
     <a href="http://www.sina.com.cn" target="aa3">新浪网站</a>

   文件二的片断代码格式为:

     <frame src="ml.html" >
     <frame src="sl1.html" >
     <frame src="sl2.html" noresize="noresize">

文件一:

ml.html

<html>
<head>
<title>无标题文档</title>
</head>
<body>
<center>
<h2>目录</h2>
<hr>
<p><a href="sl1.html" target="aa2">爱在深秋</a></p>
<p><a href="sl2.html" target="aa3">图像对文字的水平居中</a></p>
<p><a href="sl3.html" target="aa2">图像与文本之间的距离</a></p>
<p><a href="sl4.html" target="aa3">图像大小的设定</a></p>
<p><a href="http://www.sina.com.cn" target="aa3">新浪网站</a></p>
</center>
</body>
</html>

文件二:

sl94.html

<html>
<head>
</head>
<frameset cols="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#99CCFF">
<frame src="ml.html" >
<frame src="sl1.html" >
<frame src="sl2.html" noresize="noresize">
</frameset><noframes></noframes>
</html>

    <iframe>这标记只适用於IE浏览器。 它的作用是在浏览器窗口中可以嵌入一个框窗以显示另一个文件。它是 一个围堵标记,但围著的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好,若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。

<iframe> 的参数设定格式:
    <iframe src="iframe.html" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">

<iframe>属性的含义

属 性 含 义
src 浮动窗框中的要显示的页面文件的路径,可以是相对或绝对。
name 此框窗名称,这是连结标记的 target 参数所 要的,
align 可选值为 left, right, top, middle, bottom,作用不大
height 框窗的高,以 pixels 为单位。
width 框窗的宽,以 pixels 为单位。
marginwidth 该插入的文件与框边所保留的空间。
marginheight 该插入的文件与框边所保留的空间。
frameborder 使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling 使用 Yes 表示容许卷动(内定), No 则不容许卷动。

sl95.html

<html>
<head>
<title>浮动框架</title>
</head>
<body bgcolor="#E1FFE1">
<center>
<iframe src="ml1.html" width="600" height="400" marginwidth="30" marginheight="20" align="middle" allowtransparency="true">
这是一个浮动窗口
</iframe>
<p><a href="sl1.html" target="aa">爱在深秋</a></p>
<p><a href="sl2.html" target="aa">图像对文字的水平居中</a></p>
<p><a href="sl3.html" target="aa">图像与文本之间的距离</a></p>
<p><a href="sl4.html" target="aa">图像大小的设定</a></p>
<p><a href="http://www.sina.com.cn" target="aa3">新浪网站</a></p>
</center>
</body>
</html>

注意: Internet Explorer 5.5 支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件。

与 IFRAME 元素一起使用的 ALLOWTRANSPARENCY 标签属性必须设置为 true。
在 IFRAME 内容源文档,background-color 或 BODY 元素的 BGCOLOR 标签属性必须设置为 transparent。

 

第十章表单的设计

10-1 表单标记<form>

    表单在Web网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上的 ASP 或 CGI 等处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。

    表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交和按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

    一个表单用<form></form>标志来创建。也即定义表单的开始和结束位置,在开始和结束标志之间的一切定义都属于表单的内容。<form>标志具有action、method和target属性。action的值是处理程序的程序名(包括 网络路径:网址或相对路径),如:<form action="用来接收表单信息的url">,如果这个属性是空值("")则当前文档的url将被使用.当用户提交表单时,服务器将执行网址里面的程序(一般是CGI程序)。method属性用来定义处理程序从表单中获得信息的方式,可取值为 GET 和 POST 的其中一个。GET方式是处理程序从当前Html文档中获取数据,然而这种方式传送的数据量是有所限制的,一般限制在1KB(255个字节)以下。POST方式傳送的數據比較大,它是当前的Html文档把数据传送给处理程序,传送的数据量要比使用GET方式的大的多。target属性用来指定目标窗口或目标帧。可选当前窗口_self,父级窗口_parent,顶层窗口_top,空白窗口_blank。

表单标签的格式: <FORM action="url" method=get|post target="_blank">... </FORM>

10-2 写入标记<input>

    在html语言中,标记<input>具有重要的地位,它能够将浏览器中的控件加载到html文档中,该标记是单个标记,没有结束标记。<input type="">标志用来定义一个用户输入区,用户可在其中输入信息。此标志必须放在 <form></form>标志对之间。<input type="">标志中共提供了九种类型的输入区域,具体是哪一种类型由type属性来决定。请看下边列表:

type属性值定义

type属性取值

输入区域类型

控件的属性及说明

<input type="TEXT" size="" maxlength=""> 单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数 (1)name 定义控件名称
(2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容
(3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。
(4)maxlength 表示该文本输入框允许用户输入的最大字符数。
(5)onchang 当文本改变时要执行的函数
(6)onselect 当控件被选中时要执行的函数
(7)onfocus 当文本接受焦点时要执行的函数

<input type="button">

普通按钮,当这个按钮被点击时,就会调用属性onclick指定的函数;在使用这个按钮时,一般配合使用value指定在它上面显示的文字,用onclick指定一个函数,一般为JavaScript的一个事件。 这三个按钮有下面共同的属性:
(1)name 指定按钮名称
(2)value 指定按钮表面显示的文字
(3)onclick 指定单击按钮后要调用的函数
(4)onfocus 指定按钮接受焦点时要调用的函数
<input type="SUBMIT"> 提交到服务器的按钮,当这个按钮被点击时,就会连接到表单form属性action指定的url地址。
<input type="RESET"> 重置按钮,单击该按钮可将表单内容全部清除,重新输入数据。
<input type="CHECKBOX" checked> 一个复选框,checked属性用来设置该复选框缺省时是否被选中,右边示例中使用了三个复选框 checkbox用于多选,有以下属性:
(1) name 定义控件名称
(2) value 定义控件的值
(3) checked 设定控件初始状态是被选中的
(4) onclick 定义控件被选中时要执行的函数
(5) onfocus 定义控件为焦点时要执行的函数
<input type="HIDDEN"> 隐藏区域,用户不能在其中输入,用来预设某些要传送的信息 hidden 隐藏控件,用于传递数据,对用户来说是不可见的;属性有:
(1)name 控件名称,
(2)value 控件默认值
(3)hidden隐藏控件的默认值会随表单一起发送给服务器,例如:
<input type="Hidden" value="688">
控件的名称设置为ss,设置其数据为"688",当表单发送给服务器后,服务器就可以根据hidden的名称ss,读取value的值688;
<input type="IMAGE" src="URL"> 使用图像来代替Submit按钮,图像的源文件名由src属性指定,用户点击后,表单中的信息和点击位置的X、Y坐标一起传送给服务器 (1)name 指定图像按钮名称
(2)src 指定图像的url地址
<input type="PASSWARD"> 输入密码的区域,当用户输入密码时,区域内将会显示"*"号 password 口令控件
表示该输入项的输入信息是密码,在文本输入框中显示"*",属性有:
(1)name 定义控件名称
(2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容
(3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。
(4)maxlegnth 表示该文本输入框允许用户输入的最大字符数。
<input type="RADIO"> 单选按钮类型,checked属性用来设置该单选框缺省时是否被选中,右边示例中使用了三个单选框

radio用于单选,有以下属性:
(1) name 定义控件名称
(2) value 定义控件的值
(3) checked 设定控件初始状态是被选中的
(4) onclick 定义控件被选中时要执行的函数
(5) onfocus 定义控件为焦点时要执行的函数

当为单选项时,所有按钮的name属性必需相同,如:都设置为my_radio。

    以上类型的输入区域有一个公共的属性name,此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的,即一个输入区域对应一个名字。服务器就是通过调用某一输入区域的名字的value值来获得该区域的数据的。而value属性是另一个公共属性,它可用来指定输入区域的缺省值。

应用格式

<input 属性1 属性2......>

常用属性:

1 name 控件名称

2 type控件类型 如:botton 普通按钮,texe 文本框等

3 align 指定对齐方式,可取top, bottom, middl

4 size 指定控件的宽度

5 value 用于设定输入默认值

6 maxlength在单行文本的时候允许输入的最大字符数

7 src 插入图像的地址

8 event 指定激发的事件

实例:10-2.html

<html>
<head>
<title>&lt;input&gt;的控件</title>
</head>
<body>

<center>
<h2><font color="#339933">&lt;input&gt;控件的使用</font></h2></center>

<pre>

<form action="" method="post" target="_parent">
单行的文本输入区域: <INPUT type=text>
普通按钮: <INPUT type=button value=button>
提交按钮: <INPUT type=submit value=Submit>
重置按钮: <INPUT type=reset value=Reset>
复选框: 你喜欢哪些教程:<INPUT type=checkbox value=ON> Html入门 <INPUT CHECKED type=checkbox value=ON> 动态Html <INPUT type=checkbox value=ON> ASP
图像来代替Submit按钮: <INPUT border=0 height=20 src="../../imge/nnn.gif" type=image width=65>
密码的区域: <INPUT
type=password> </P>
单选按钮: 你的休闲爱好是什么:<INPUT CHECKED type=radio value=V1> 音乐 <INPUT type=radio value=V2> 体育 <INPUT type=radio value=V3> 旅游
</form>
</pre>
<a href="#" ><FONT size=4>返回</FONT></A></SUB>
</PRE>
</body>
</html>

10-3 菜单下拉列表框<select></select><option>

    <select></select>标志对用来创建一个菜单下拉列表框。此标志对用于<form></form>标志对之间。<select>具有multiple、name和size属性。multiple属性不用赋值,直接加入标志中即可使用,加入了此属性后列表框就成了可多选的了;name是此列表框的名字,它与上边讲的name属性作用是一样的;size属性用来设置列表的高度,缺省时值为1,若没有设置(加入)multiple属性,显示的将是一个弹出式的列表框。
    <option>标志用来指定列表框中的一个选项,它放在<select></select>标志对之间。此标志具有selected和value属性,selected用来指定默认的选项,value属性用来给<option>指定的那一个选项赋值,这个值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。

实例:10-3-1.html

<html>
<head>
<title>下拉列表框</title>
</head>
<body>
<form action="" method="post">
<p>请选择最喜欢的男歌星:
<select size="1">
<option value="ldh">刘德华
<option value="zhxy" selected>张学友
<option value="gfch">郭富城
<option value="lm">黎明
</select>
</form>
</body>
</html>

实例:10-3-2.html

<html>
<head>
<title>复选的列表框</title>
</head>
<body>
<form action="" method="post">
<p>请选择最喜欢的女歌星:
<select multiple size="4">
<option value="zhmy">张曼玉
<option value="wf" selected>王菲
<option value="tzh">田震
<option value="ny">那英
</select>
</form>
</body>
</html>

10-4 多行的文本框.<textarea></textarea>

    <textarea></textarea>用来创建一个可以输入多行的文本框,此标志对用于<form></form>标志对之间。<textarea>具有以下属性:

(1)onchange指定控件改变时要调用的函数
(2)onfocus当控件接受焦点时要执行的函数
(3)onblur当控件失去焦点时要执行的函数
(4)onselect当控件内容被选中时要执行的函数
(5)name这文字区块的名称,作识别之用,将会传及 CGI。
(6)cols这文字区块的宽度。
(7)rows这文字区块的列数,即其高度。
(8)wrap属性 定义输入内容大于文本域时显示的方式,可选值如下:
*默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
*Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动;
*Virtual,允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
*Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。
这里列与行是以字符数为单位的。

实例:10-4.html

<html>
<head>
<title>多行的文本框</title>
</head>
<body>
<form action="" method="post">
<p>您的意见对我很重要:
<textarea clos="20" rows="5">
请将意见输入此区域
</textarea>
</form>
</body>
</html>

  评论这张
 
阅读(392)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017