当前位置： →
→ 资料总结html开发小实例
资料总结html开发小实例
& 作者及来源： Powerful Man - 博客园 &
&收藏到→_→：
摘要: 【资料总结】html开发小实例
"资料总结html开发小实例"：：
html的基本标签 1
表格基础 25
表单和框架 53
css样式表 77
使用dreamweaver制作网页 104
和页面布局技术（一） 134
和页面布局技术（二） 156
lab guide 183
html的基本标签 184
html的基本标签
本章工作任务
&制制作图文并茂的& &页面
本章技能目标
&会使用html的基本结构创建网页
&会使用文本相关标签实现文字修饰和布局
&会使用图像相关标签实现图文并茂的页面
&会使用相关标签实现页面的跳转
²&&本章简介
在当今社会中，网络已成为人们生活的一部分，网络提供的服务主要是以网页的形式展现出来。html是创建网页的基础语言。如果不了解html（超文本标记语言），就谈不上 。html也是web用于创建和识别文档的标准语言。这些标记都是通过使用标签来完成的，标签可指定网页的浏览器中的显示方式。本章就来介绍html的基本结构。文本相关标签，图像&img&标签，页面链接&a&&标签，滚动&marquee&标签等，使大家对html的基本标签有深入的了解，为后面的学习打下坚实的基础，其中重点是文本，图像，链接标签的应用，难点是各种标签的 应用。
²&&&本章单词
请在预习前完成下列单词：
已学单词复习：
本章新单词：
1.head:&________________&&&&&&&&&&&&&&&&2.title_______________________
3.body:_______________&&&&&&&&&&&&&&&&&4.font:&______________________
5.align:&______________&&&&&&&&&&&&&&&&&6.image:&______________________
7.marquee:&_________________&&&&&&&&&&&8.scrolldelay:&___________________
9.direction:&____________&&&&&&&&&&&&&&&
&1.1&&&html文件的基本结构
完整的html文件至少包括&html&标签、&title&标签和&body&标签，并且这些标签都是成对出现的，并且这些标签都是成对出现的，开头标签为&&，结束标签为&/&,在这两个标签之间添加内容。通过这些标签中的相关属性可以设置页面的背景色，背景图像等。
&1.1.1&&&为什么要使用表格
html文件主要由3部分组成。
&&html部分：html部分以&html&标签开始，以&/html&标签结束。
&&头部：头部以&head&标签开始，以&/head&标签结束。这部分包括显示在网页标题栏中的标题和其他在网页中不显示的信息。标题包含在&title&和&/title&标签之间。
&title&&&&title&
&&主体部分：主体部分包含在网页中显示的文本，图像和链接。主体部分以&body&标签结束。
html文档的结构：
&1.1.2&&&使用记事本创建网页
创建一个html文档，需要两个工具：一个是文本（如记事本、ue等），一个是用户查看html文档效果的（如&explorer）。下面我们就使用windows自带的记事本来快速编写第一个html文件效果。
（1）单击&开始&&&程序&&&附件&&&记事本&&&菜单&
（2）在记事本中输入如图1.2所示的html代码，输入代码后的记事本如图1.2所示。
（3）&单击记事本菜单中的&文件&保存&菜单，弹出&另存为&对话框，在对话框中选择存盘的文件夹，然后在&保存类型&下拉列表框中选择&所有文件&选项，在&编码&下列框中选择的&ansi&选项，保存文件名为my_firstpage.html,如图1.3所示，最后单击&保存&按钮。
（4）回到存盘的文件夹，使用打开my_firstpage.html文件，可以看到最终的页面效果，如图1.4所示。
图&另存为&对话框&&&&&&&&&&&&&&&&&&&&图查看效果
&1.1.3&&&使用记事本创建网页
&meta&标签出现在网页的标题部分。这是一个特殊的html标签，提供相关网页的信息，有时候在网上冲浪，发现有些网页中的文字是乱码，这是怎么回事呢？其实就是&meta&标签中charset属性没有正确地设置编码语系。如果我们正确地设置了网页语言编码方式，浏览器就会正确地显示网页中的内容，而不会出现乱码。要将gb2312指定为，默认字符集类型，则使用以下&meta&标签：
&meta&http_equiv=&content_type&&content=&text/charset=gb2312&&
&title&网页标题&/title&
其中charset用于设置网页的编码语序，网页使用charset=gb2312,使用charset=big5,英文网页建议使用 -8859-1,或者不设置编码也可。根据自己所在的国家或页面主体使用的语言类型所对应的编码语系来正确地设置charset,这样可以避免网页中的乱码。像在中国建议把charset设置为&gb2312&。
&1.1.4&&&页面背景色或背景图像
在默认情况下，使用浏览网页时，其背景色为白色，如果我想把背景色换成好看的颜色或图片怎么办？其实很简单，使用bgcolor属性可以改变网页的背景色，使用backgroud属性可以把网页的背景设计为图片。
设置网页的背景色或背景图像：
&body&bgcolor=&#ffccff&&background=&back_image.gif&&///背景颜色
hello&world！
如示例1所示为设置网页背景的代码。
&title&我的第一个网页&
&&&&&&&hello&world!
示例1在浏览器中浏览效果如图1.5所示。若把示例1中&body&bgcolor=&#ffccff&&这一部分改为&body&backgroud=&back_image.gif&&之后，在浏览器中浏览效果如图1.6所示。
图1.5&设置网页的背景色&&&&&&&&&&&&&&&&&&&&图1.6&设置网页的背景图像
&1.2&&&使用记事本创建网页
文本是网页不可缺少的元素之一，是网页发布信息所使用的主要形式。为了让网页中的文本看上去编排有序，整齐美观，错落有序，我们就要设置文本的大小、颜色、字体类型以及换行换段等。
&1.2&&&字体字号相关标题
1、标题标签
标题能分为分隔大段文字，概括下文内容，根据安排信息。标题具有吸引读者的提示作用，而且表明了文章的内容，读者会根据标题据顶是否阅读此文章。标题的重要性由此可见一斑。
html提供了六级标题，&h1&为最大，&h6&为最小。用户只需定义从h1到h6中的一种大小，浏览器将负责显示过程。
示例2显示了指定各级标题的html文件。
&title&不同等级标题标签对比
&&&&h1&一级标题
&&&&h2&二级标题
&&&&h3&三级标题
&&&&h4&四级标题
&&&&h5&五级标题
&&&&h6&六级标题
示例2在浏览器中预览效果如图1.7所示。
图1.7&不同级别的标题输出结果
2.&font&标签
&font&标签用于控制网页上下文本的显示外观。文本大小，字体类型和颜色等属性都可以使用&font&标签指定。
&&font&size=&&+2&&color=&red&face=&隶书&&
其中,size属性用来设置字体大小，可以为字体指定的大小范围1~7.最大为7，最小为1.也可以使用一个默认字体大小，然后相对于默认大小指定后续字体的大小例如：size默认大小为3，则size=+4将使大小增加到7，size=-1将使大小减少到2。color属性用于指定字体的颜色，可以指定颜色名称或十六进制值。face属性用于指定字体的类型。
2.特殊符号
某些字符在html中具有特殊意义，如小于号（&）即定义html标签的开始。要在浏览器中显示这些特殊字符，就必须在html文档中使用字符实体。
字符实体由3个部分组成：&号，实体名和分号；。
例如，要在html文档中显示小于号，则使用&；
表1-1显示的字符实体用于显示html文档中的特殊字符。
表1-1用于显示html文档中的特殊字符
&p&移动&|&&100|&联通|&50&/p&
if&a&&b&then&&br&&a=a+1
if&a&；b&then&&br&&a=a+1
&p&""&/&p&&
&p&&2007&/&p&&
&title&文本相关标记的应用
&&p&&font&size="+2"&color="red"&face="黑体
手机充值、卡电话卡&
&copyright&&&2007&"
示例3在浏览器中预览效果如图1.8所示。
图1.8&font标签和特殊字符应用效果
&1.2.2&&&行的控制相关标签
1．段落标签&br&
如果是在写一篇文章，则要将这些内容分组成一系列段落。目的是要将这些逻辑思想组合一起，并对其内容应用某些格式和布局。在html文档中，可以将文本内容组合为多个段落。段落标记&/p&用于标记段落的开始，段落结束标记&/p&是可选的，为了养成良好的编程习惯，建议不要省略段落结束标记&/p&.
你还可以通过段落的align属性，设置段落的对齐方式，如左对齐、居中、右对齐，如示例4所示，输出结果如图1.9所示。
2.换行标签&br&
&br&标签在用户要结束一行但又不想开始一个新的段落时使用。只要在文本中放入&br&标签，就会强制换行。
&title&文本相关标记的应用
&&p&&font&size="+2"&color="red"&&
手机充值、卡电话卡&
&&p&align="center"& 集市欢迎您！
&&p&align="left"&首届翠友会！
&&&想做最闪亮的吗&
&&&千余中奖机会有你吗&
&&& 入选平安网站&
&copyright&&&2007&"
示例4在浏览器中预览效果如图1.9所示。
图1.9&换行换段标签应用效果
&1.3&&&图像标签
文本使用网页的内容得到充实，那图像使用网页的内容更加丰富多彩。使用图像不仅能够使用网页更加美观、大方、整洁、形象和生动，而且能给网页增添无限生机，从而吸引更多的浏览者。因此图像在网页中的作用是举足轻重的。作为一个 者，掌握好网页中的图像的应用尤为重要。下面我们就开始介绍常用的图片格式，以及如何在网页中实现图文并茂的页面。
&1.3.1常见的图片格式
jpg(jpge)格式图像是在上被广泛支持的图像格式，它是联合图像专家组文本格式(joint&photographic&experts&group)的英文缩写。jpg格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。
此格式最合适用于摄影或连续色调图像的高级格式，这是因为jpg文件可以包含数百万中颜色。随着jpg文件品质的提供，文件的大小和下载事件会随之增加。通常可以通过压缩jpg文件在图像品质和问价大小之间达到良好的平衡。
制作jpg文件的 很多，比较常见的有photoshop、hypersnap等。
gif图像是网页中使用最广泛，最普通的一种格式，它是图像交换格式(graphics&interchange&format)的英文缩写。gif文件的众多特点恰恰适应了的需要，于是成了上最流行的图形格式，它的出现成为了注入了一股新鲜的活力。gif格式图像采用的是无损压缩，由于只支持256色，所以gif格式图像体积很小。支持透明色，使得gif在网页的背景和一些多层特效的显示上用的非常多，还支持帧动画，这是它最突出的一个特点。要设计gif动画，首先要用图像处理 做好gif动画中的每一幅画面，然后再用专门的gif动画 把这些静止的画面连在一起，在定好帧与帧之间的时间间隔，最后保存成gif格式就可以了。
制作gif文件的 也很多，比较常见的有photoshop、gif&contruts&set等。
swf动画是网页中应用非常广泛的一种图像动画，这中格式的动画图像能够用比较小的体积来表现丰富的形式。在图像的传输方面，可以边传输边观看，因此特别适合网络存数，特别在传输速率不佳的情况下，能够取得较好的效果。事实也证明了这一点，swf如今已被大量应用于web网页进行播放与交互设计。此外，swf动画是基于矢量技术制作的，因此不管将画面放大多少倍，画面不会因此而有任何失真。综上所述，swf格式作品成为以高清晰的画质和小巧的体积，受到了越来越多页面设计者的青睐，也越来越成为网页动画和网页图片设计制作的主流，目前已成为网页上动画的事实标准。swf文件的缺点就是制作起来非常耗时耗力。
制作swf文件的 也很多，比较常见的有flash、swftext等。
bwp图像是在windows中使用得比较多，它是&位图&的英文缩写。bwp图像可以用任何颜色深度（从黑白到24为颜色）存储单个光栅图像。bwp图像文件格式与其他microsoft&windows程序兼容。它不支持文件压缩，也不适用于web页。从总体上看，bmp图像格式的缺点超过它的有点，为了保证照片图像的质量，请使用jpg文件。bmp文件使用于windows中的墙纸。bmp的优点支持1位到24位颜色深度，并且与现有windows程序广泛兼容。bmp的缺点是不支持压缩，这会造成文件非常大。
制作bmp文件的 很多，比较常见的有photoshop、windows自带的&图画& 等。
&1.3.2图像的基本语法
&img&标签用于在html文档中插入图像，该标签可以放在要显示图像的位置。&img&标签不包含任何内容，它使用src属性指定图像文件所在的路径。
&img&src&=&&images/adv_2.jpg&&width=&300&&height=&150&&alt=&明星演唱会开幕&&
其中，src参数用来设置图像文件所在的位置，width和height属性来指定图像的宽度和高度,alt属性有两个作用：第一个是在网页中，如果图像没有被下载，在图像位置上出现指定文字；第二个是在网页中，如果图片下载完，将鼠标放在该图像上，在鼠标旁边提示的文字。
&meta&http-equiv="content-type"&content="text/&charset=gb2312"&
&title&为图像添加提示性文字
&img&src="images/adv_2.jpg"&alt="明星演唱会开幕
示例5在浏览器中预览效果如图1.10所示，把鼠标只想图像上方，稍等片刻，稍等片刻就会提示文字&明星演唱会开幕&。
图1.10 给图像添加指示文字效果
&1.3.3图像的基本语法
&img&标签的align属性可用于调整图像相对于周围文字的对齐方式。align属性可取下面的值：top、bottom、left或right.
&img&align=&middle&&
其中，align=&top&表示图片的顶部和当前行文字顶端对齐，align=&bottom&表示图片的底部和当前行文字底部对齐，align=&middle&表示图片的中部和当前文字中部对齐，align=&left&表示图片左对齐，align=&right&表示图片右对齐。
&meta&http-equiv="content-type"&content="text/&charset=gb2312"&
&title&图像与文本的对齐方式
&img&&align="middle"&src="images/adv_2.jpg"&width="180"&height="95"&border="0"&/&请点击 进入明星专区
&&img&&align="top"&src="images/adv_2.jpg"&width="180"&height="95"&border="0"&/&请点击 进入明星专区
示例6在浏览器中预览效果如图1.11所示。
图1.11 图像与文本的对齐方式
&1.4文字布局
文字布局就是使用网页中的文字合理分隔，排列有序或按设计者想要的格式去布局，对于这些要求，在html语言中，可以使用&hr&标签对文字内容进行分隔，使用列表对文本内容进行整齐排列，使用&pre&标签让指定的文本内容以指定的格式在网页中显示。下面就分别介绍不同的标签对文本内容进行布局。
&1.4.1图像的基本语法
&hr&（水平线）标签用于在网页上绘制水平线的高度，以像素为单位：color可以来设置水平线的颜色width用于改变水平线的高度，可以以像素为单位，也可以是窗口上的百分比。
&title&水平分隔线
&hr&size="5"&color="red"&width="300"&
&hr&size="10"&color="black"&width="200"&
&hr&size="5"&&color="#0000ff"&width="50%"&
示例7在浏览器中预览效果如图1.12所示。
图1.12 水平线效果
&1.4.2如何使用列表&
在html文档中可创建以下不同类型的列表：
&&无序列表
&&有序列表
1.&无序列表
有序列表就是&项目列表&。列表项前面带有项目符号，包含在无序列表标签&ul&&&/ul&内。列表中每项都用标签&li&,其中li表示列表项，结束标签&/li&为可选项。
&ul&type=&circle&&
&&&&li&&/li&&&
其中，type属性决定了列表项开始的符号，它可以取disc（默认值，表示实心圆点）、
circle（空心圆环）、square(空心正方形)这3个值
2.&有序列表
有序列表包含在&ol&&&/ol&标签内。有序列表也显示列表项，区别在于有序列表的列表项以自动生成的顺序显示。
&ol&type=&1&&
&li&填写信息&/li&
&&&&li&收&/li&
其中，type属性决定有序列表的序号类型，它可以取如下5个值：1、a、a、1。分别表示数字序列，大写英文字母序列、写英文字母序列、小写罗马数字序列。
&title&无序列表和编号
&&&h4&注册步骤：
&&&ol&type="1"&
&&&&&li&填写信息
&&&&&li&收
&&&&&li&注册成功&
&&新人上路指南
&&&ul&type="circle"&
&&&&&li&如何激活会员名？&
&&&&&li&如何注册 会员？&
&&&&&li&注册时密码设置有什么要求？&
&&&&&li&认证
图&1.13&有序列表和无序列表效果
&1.4.3如何使用列表&
&pre&标签用于显示预先在html中已定义好格式的文本。文档显示在浏览器中时，会遵循已在html源文档中定义的格式。
&meta&http-equiv="content-type"&content="text/&charset=gb2312"&
&title&显示预先已定义好格式的文本
&pre&&img&src="images/qq.jpg"&width="159"&height="133"&align="left"&
&&&&&&&腾讯币幻想元卡&
&&&&&&&&一&口&价：元&&&&
&&&&&&&&运　费：卖家承担运费&&
&&&&&&&&剩余时间：天&&
&&&&&&&&宝贝类型：&全新&
&&&&&&&&卖主声明：货到付款，可试用天！
&pre&标签的效果如图1.14所示。
图1.14 &pre&标签的效果
&1.5页面链接&a&标签&
&/a&标签用于创建超级链接（简称为），它是到另一个文档或文件(图形、音频、视频)甚至在同一个文档的另一部分的链接。当用户单击超级链接时，就会进入链接中指定的url。超级链接可链接到；同一个文档的特定部分，其他文档，其他文件&&图像、音频、视频剪切，其他站点等。
要创建超级链接，应指定以下两个组件：
（1）&要链接文件的完整地址或url。
（2）&将提供链接的热点。热点可以是文本行，也可以是图像。当用户单击热点时，浏览器将读取url中指定的地址并&跳&到新的位置。
锚记&/a&标签用于标识充当html文档中文本或图像的超级连接。href（超文本引用）参数用于指定要连接文档的地址或url。
&1.5.1页面链接&a&标签&
链接到其他页面，就是单击此超级链接，打开一个新的html文档。
&a&href=&re ter/re ter.html&&&【免费注册】&/a&
其中，href属性用来指定要链接的地址，&【免费注册】&是热点文本。
&title&链接到其他页面
&a&&href="re ter/re ter.html"&[免费注册
&a&&href="login/login.htm"&[登录
示例10在浏览器中预览效果如图1.15所示，单击&【免费注册】&超级链接，用户就打开如图1.16所示的页面，即re ter.html文档，如图1.16所示。
图1.15&链接到其他页面&&&&&&&&&图1.16&单击【免费注册】打开的页面
在示例10中，3个文件处在不同目录下，因此href参数可提供链接到其他目录中的文件。应指定绝对或相对路径名。
绝对路径名：指定从根目录到文件的完整路径。例如，要指向文件re ter.html，绝对路径名为d:\re ter\re ter.html.
相对路径，指定相对与当前文件夹的文件位置。假设doc1.html和doc2.html在同一文件夹下，则从doc1.html到doc2.html的相对路径为：&a&href=&doc2.html&&文档2的详细资料&/a&.
&1.5.2链接到本页面
如果一个页面的内容过多，导致页面过长，用户需要不停地滚动条来查看文档中的内容，为了方便用户阅读过长的页面内容，可以使用锚点链接。
命名锚记也称为锚点，&a&标签的name属性用于创建，锚点。
&a&name&=&&marker&&主体名称&/a&
为了达到这种跳转效果，请在href参数中使用如下标记。
&a&href&=&&#marker&&主题名称&/a&
超级链接名称前面的符号&#&告诉浏览器当前链接是文档的一个锚点。由于在符号&#&前未指定任何文档，浏览器由此知道该链接位于同一文档内。示例11演示了如何链接到同一文档的各个部分。
&title&主页
&body&bgcolor="#ffccff"&
&img&src="images/logo.gif"&width="240"&height="31"&[免费注册登录
&a&href="#helpme"&[新人上路
&&h1&align="center"&您好，欢迎来 ！&
&&p&&font&size="+2"&color="red"&&
&&&&手机充值、卡电话卡&
&&&&移动联通&
&&p& 集市欢迎您！
&&p&首届翠友会！
&&&想做最闪亮的吗&
&&&千余中奖机会有你吗&
&&& 入选平安网站&
&&p&&img&src="images/adv_2.jpg"&width="360"&height="190"&border="0"&align="middle"&/&请点击 进入明星专区
&&&&&&&&&&hr&size="1"&color="red"&
&&&h3&注册步骤：
&&&&&li&&&&&&&填写信息
&&&&&li&&&&&&&收
&&&&&li&&&&&&&注册成功&
&a&name="helpme"&新人上路指南
&&&ul&type="circle"&
&&&&&li&如何激活会员名？&
&&&&&li&如何注册 会员？&
&&&&&li&注册时密码设置有什么要求？&
&&&&&li&认证
示例11在浏览器中预览效果如图1.17所示。
图1.17&锚点链接
单击&【新人上路】&超级链接，就会在同一页面中出现如图1.18所示的窗口。
图1.18&锚点链接到的位置
&1.5.3链接
用户可以从网页发送。要做到这一点，可以链接标签中插入&mailto:邮箱地址&
例如：&a&href=&mailto:&&站点信箱&/a&
&title&主页
&body&bgcolor="#ffccff"&
&img&src="images/logo.gif"&width="240"&height="31"&[免费注册登录
&a&href="mailto:"&站长信箱
示例12在浏览器中预览效果如图1.19所示。
图1.19 邮件链接
单击&站点信箱&邮件链接，将打开用户的程序，并且&收件人：&文本中的地址已经指定为,如图1.20所示。
图1.20&单击&站长邮箱&连接后打开的界面
&1.6滚动&marquee&标签
使用&marquee&标签不仅可以移动文字，还可以移动图片。
&marquee&scrolldelay=&100&&direction=&up&&
滚动文字或图像
&/marquee&
其中，scrolldelay，表示滚动延迟时间，默认值为90ms。direction：表示滚动的方向默认为从左到右。可以取以下4个值:up、down、left、right，使用direction属性来设置文字或图像的滚动方向。
&title&滚动字幕
&&&&marquee&scrolldelay&="100"&水平滚动
&&&&marquee&scrolldelay&="300"&&direction="up"&&onmouseover="this.stop()"&onmouseout="this.start()"&
&&&&&&&a&href="#"&&img&src="images/scroll/1.gif"&border="0"&align="middle"&&avon化妆品
&&&&&&&a&href="#"&&img&src="images/scroll/2.gif"&&border="0"&align="middle"&&雅诗兰黛&
&&&/marquee&
示例13在浏览器中预览效果如图1.21所示。
图1.21&文字和图片滚动效果
²&本章总结
&&html文档是包含标记标签的文本文件，这些标签告诉浏览器如何显示页面。
&&&html&标签不区分大小写。
&&&meta&标签放置在网页的标题处，以提供关于页面的信息。如设置网页编码语系等。
&&&font&标签可改变字体大小、颜色和字体类型，&p&标签和&br&分别实现换行、换段。
&&&img&标签可以实现在网页中插入图片，并可通过align属性来调整图像相对于周围文本的对齐方式。
&&锚记&a&标签用于标识充当html文档中文本或图像的超级链接。href参数指定要链接的文本地址。
&&&marquee&标签用于在网页中实现文字、图片、表格等对象的滚动效果。
一、选择题
1.下列代码片段用于（）
...&body&background=&back_image.gif&&...
a.在页面左边的背景中显示图像&back_image.gif&。
b.将&back_image.gif&图像平铺填充到整个页面的背景中。
c.在页面顶部显示图像&back_iamge.gif&
d.在页面背景的中间显示图像&back_image.gif&
2以下html代码中，说法（）是正确的。
&title&时装街
享受在时装街购物的乐趣
a．&p&标签没有以&/p&标签结束。
b．&br&标签没有以&/br&标签结束。
c.&&&title&元素没有以&/title&标签结束。
d．&font&标签不能与&pre&标签一起使用。
3.在网页中最为常见的两种图像格式是（）
a.jpg和gif
b.jpg和psd
c.gif和bmp
d.bmp和swf
4.关于下列代码片段的说法中，（）是正确性。
&&hr&size=&5&&color=&#0000ff&&width=&50%&&&
a.size是水平线长度。
b.size是水平先的宽度。
c.width是水平线的宽度。
d.width是水平线的宽度。
1.html文档的基本结构由那些部分组成？
2.使用记事本创建网页有那几个主要步骤。
3.请用html实现如图1.22所示的页面。
图1.22&图文排列
使用到&pre&预格式化标签，&img&标签及相关属性，还有&font&和&a&标签。
3.&请用html实现如图1.23所示页面，并且页面中的图片是从左到右匀速移动。
图1.23&图片移动效果
使用&marquee&标签移动多幅图片，移动的方向默认方向，移动速度是通过scrolldelay属性来设置的。
本章工作任务
&制作&宝贝分类&页面
&制作&公告栏&页面
本章技能目标
&会使用表格的基本结构实现简单表格
&会使用表格相关标签实现跨行、跨列的复杂表格
&会使用表格相关设置进行美化修饰
²&&&&&本章简介
上一章已经介绍了html基本标签，既介绍了如何使用html文件的基本结构创建网页，又介绍了文本相关标签实现文字修饰和布局，还讲解了图象相关标签如何实现图文并茂的页面，相关标签如何实现页面间的跳转。
本章开始讲解表格的基础，其中重点是表格的基本结构，难点是如何创建跨多行跨多列的表格。为了使我们制作的页面更精致、表格更美观，我们还要研究表格布局，以及如何对表格进行美化修饰。
²&&&&&本章单词
请在预习前完成下列单词：
已学单词复习：
1.html&:_________________&&&&&&&&&&&&&&2.title:&________________________
3.body:&_________________
本章新单词：
1.table:&________________&&&&&&&&&&&&&&&&2.width&_______________________
3.height&:_______________&&&&&&&&&&&&&&&&4.border:&______________________
5.rowspan:&______________&&&&&&&&&&&&&&&6.colspan:&______________________
7.align:&_________________&&&&&&&&&&&&&&&8.cellpadding:&___________________
9.cellspacing:&____________&&&&&&&&&&&&&&&10.background:&___________________
&2.1&&&表格基础
表格是中使用最多的技术之一，它通常用来显示分类数据，在网页中表格更多地用在网页布局和定位上。通过使用表格相关属性，可实现对网页中的文字和图片进行合理的布局和定位，使得网页在形式上丰富多彩，在组织上井然有序。真是表格在手，一清二楚。
在html语言中，表格至少由&table&标签、&tr&标签和&td&标签这3对标签组成，否则，就不能成为表格。&table&&&/table&标签中间将包括所有表格元素，表格元素主要有行、列、单元格等。了解表格的基本结构之后，我们就可以创建一个简单的表格。
&2.1.1&&&为什么要使用表格
当我们在网上冲浪时，会看到论坛页面（如图2.1所示）、门户网站网页（如图2.2所示）、购物网站页面（如图2.3所示）等。这些图文并茂、绚丽多姿、整齐有序的页面效果是如何实现的呢？其实很简单，就是用表格来实现的，既然表格有如此广泛的应用和如此强大的功能，下面我们就抓紧时间开始对表格的学习吧。
图2.1&&论坛页面
图2.2&&门户网站页面
图2.3&&购物网站页面
&2.1.2&&&表格的基本结构
看到这么多使用表格进行布局、定位的精美页面，你是不是很想体验一把呢？不用急，万丈高楼平地起，先让我们来看一看表格的最基本结构。表格是由指定数目的行和列组成，如图2.4所示。文字或图片按照相应的列或行进行分类和显示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&表格列
&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&
图2.4表格的布局
可以使用有行和列的表格格式来显示数据。表格可在一定程度上控制文本和图像在网页中的位置，而不是完全由浏览器对此进行控制。
在html中。用于创建表格的标签如下：
1.&&table&
&table&&&/table&标签用于在html文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用&td&&&/td&标签定义。
表格行用&tr&标签定义，由单元格构此文来自: 马开东博客
转载请注明出处 网址：
成。多个行结合在一起就构成一个表格，这反映在用于创建表格的html语法中。表格的每一行都用&tr&标签表示，并用相应的&/tr&标签结束。
表格的每一行又有若干表格单元，用&td&&&/td&标签来表示。td是&表格数据(table&data)&的英文缩写。&td&标签定义一个列，嵌套于&tr&标签内。
border属性是最常用属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。
&2.1.3&&&如何创建表格
所有表格都包括3个基本标签，即表格标签&table&&&/table&、行标签&tr&&&/tr&和单元格标签&td&&&/td&。可以说，在页面中如果要创建一个完整的表格，至少要包含这3对标签。
创建表格的基本语法
&&&&&&&td&单元格内容&/td&
创建表格时，一般情况下分3步：
第一步：创建表格标签&table&&&/table&。
第二步：在表格标签&table&&&/table&里创建行标签&tr&&&/tr&，可以有多行。
第三步：在行标签&tr&&&/tr&里创建单元格标签&td&&&/td&，可以有多个单元格。
如示例1所示为在页面中添加一个2行3列的表格的代码。
&title&基本表格
&table&border=&2&&
&&&&&&td&ibm&/td&
&&&&&&td&惠普
&&&&&&td&华硕
运行示例1代码，其效果如图2.5所示。
图基本表格
&2.2&&&跨多行跨多列的表格
图2.5所示的表格比较简单，如果我们要插入一张图片，并且要占4个单元的空间，那怎么办？这就是要用到跨多行跨多列的表格，本节就开始讲解如何实现把多个单元格合并成一个单元格。
&2.2.1&&什么是跨多行跨多列的表格
有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。要实现如图2.6所示的跨多行跨多列表格，怎么办？不急，我们先来看看跨多列的表格是如何实现的。
图2.6&&跨多行多列表格
&2.2.2&&跨多列的表格
跨多列的表格是单元格在水平方向上跨多列。
创建跨多列的表格基本语法：
&&&&&&&td&colspan=&所跨的列数&&&单元格内容&
下面通过示例2来说明colspan这一属性的用法。
&title&跨多列的表格
&table&border=&2&&
&&&&&&&td&colspan=&3&&学生成绩表
&&&&&&&td&英语
&&&&&&&td&数学
&&&&&&&td&95&/td&
&&&&&&&td&98&/td&
&&&&&&&td&89&/td&
这里，将第一行单元格在水平方向上所跨的列数为，因为表格共包括列，所以第一行只有一个单元格，运行效果如图所示。跨多列表格已经实现了，下面我们想想如何实现跨多行的表格？
图2.7&&跨多列表格
&2.2.3&&跨多行的表格
单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行。
创建跨多行的表格基本语法：
&&&&& &td&rowspan=&所跨的行数&&&&&单元格的内容&&
下面通过示例3来说明rowspan这一属性的用法。
&title&跨行表格
&table&border=&2&&
&&&&&&&td&colspan=&3&&早餐菜普
&&&&&&&td&饮料
&&&&&&&td&牛奶
&&&&&&&td&开心粉
这里，由于第一行第一个单元格垂直跨了3行，还剩2个单元格，因此在接下来的两行都只有2个单元格，运行效果如图2.8所示。
图2.8&&跨多行表格
&2.2.4&&如何创建跨行跨列的表格
创建了跨多列的表格，也创建了跨多行的表格，但是在有些情况下要在一张表中既有跨多行又有跨多列的单元格，那将如何实现？这要说简单真的很简单，说难还真的不容易，下面我们就以示例和示例来说明如何创建跨多行跨多列的表格。
&title&跨多行多列表格
&table&&border=&1&&
&&&&&&&td&手机充值卡、卡
&&&&&&&td&colspan=&2&&办公设备、文具
&&&&&&&td&rowspan=&2&&各种卡的总汇
&&&&&&&td&铅笔
&&&&&&&td&彩笔
&&&&&&&td&打印
&&&&&&&td&刻录
示例4在浏览器中运行的结果如图2.9所示。在创建如图2.9所示的表格时，应先创建表格标签&table&&&/table&；然后在表格标签里创建行标签&tr&&&/tr&，这里一共创建了3行；最后在每行里创建列标签&td&&&/td&，并设置跨多行跨多列的属性，即可实现跨多行跨多列的表格。
图2.9&&跨多行多列表格1
&title&跨多行多列表格
&table&&border=&1&&
&td&rowspan=&3&&产品名称
&&&&&&&td&掌上电脑
&td&彩音盒
&&&&&&&td&colspan=&2&&&p&欢迎光临本购物网站
示例在浏览器中运行的结果如图所示。大家可以试试修改和属性值的大小，如果把和的值改得过小，表格中会出现空白区域，这样会使表格的编辑变得困难，因此在设置表格时，要注意各行的单元格列数应相同。
图2.10&&跨多行多列表格
&2.3&&&表格的美化修饰
不知道大家发现没有？这之前创建的表格都非常丑陋、简单
难看。如何创建一个布局协调、色调统一、美观、大方的表格？这就涉及到对表格的美化修饰。
&2.3.1&&什么是表格的美化修饰
表格的美化修饰就是从多方面对表格进行美化修饰，使表格看上去更漂亮、更美观、更合理。对表格进行美化修饰时，主要从以下己方面进行：
&&表格的高度、宽度和边框。
&&表格、行、列的背景。
&&表格、行、列的对齐方式。
&&表格的填充、间距属性。
如图2.11所示就是经过美化修饰之后的表格。
图2.11&&美化修饰后的表格
&&&&2.3.2&如何对表格进行美化修饰
&&&1.如何设置表格的尺寸和边框
如果不指定表格的高度和宽度，浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格的边框的宽度（border属性），则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度，又想设置表格边框的宽度，那么就得设置表格的高度、宽度和边框属性。
设置表格的宽度、高度和边框的基本语法：
&table&width=&表格宽度&&&height=&表格高度&&&border=&表格边框宽度&&
其中，表格的宽度和高度可以用像素来表示，也可以用百分比（与浏览器当前窗口相比的大小比列）来表示。表格边框宽度只能用像素来表示。
例加：&table&&width=&200&&&height=&100&&表示一个宽为200像素，高为100像素的表格。&table&&width=50%&&height=&100&&表示一个宽为当前浏览窗口宽度的50%，高为当前浏览器窗口高度的25%的表格。
&title&表格的高度、宽度和边框
&table&width=&400&&&heitht=&200&&&border=&15&&&bordercolor=&red&&
&td&colspan=&4&&品牌商城
&td&colspan=&2&&&&笔记本电脑
&td&colspan=&2&&&&办公设备、文具、耗材
&td&&&惠普
&td&&&华硕
&td&&&打印机
&td&&&刻录盘
示例6运行效果如图2.12所示。
图表格的尺寸和边框
表格中border属性只能影响表格四周的边框宽度，而不影响表格内单元格之间边框尺寸。过席的边框会影响表格的整体美观，因此一般边框宽度设置不应超过5像素。
2.&如何设置背景
（1）表格背景
表格背景包括表格的背景颜色和背景图象的设置，表格的背景颜色属性bgcolor是针对整个表格的，表格的背景图像属性background也是针对整个表格的，背景图象会令表格更加美观、更加活泼生动。
设置表格背景基本语法：
&table&&bgcolor=&整个表格背景颜色&&&background=&表格背景图像地址&&
（2）行背景色
不仅可以对表格整体设置背景，还可以对单独一行设置背景色，行的bgcolor颜色可以覆盖&table&的bgcolor或background属性。
设置行的背景色基本语法
&tr&&bgcolor=&行的背景颜色&&&&
（3）单元格背景色
不仅可以对表格中行设置背景色，还可以对表格中每一个单元格设置背景色，单元格的bgcolor颜色可以覆盖行的bgcolor属性。
设置单元格的背景色基本语法&
&td&&bgcolor=&单元格的背景颜色&单元格内容
&title&表格的美化
&table&width="360"&height="120"&border="2"&background="images/type_back.jpg"&&
&&&&&td&colspan="6"&&&/td&
&&&tr&bgcolor="#ebefff"&
&&&&&td&colspan="3"&&笔记本电脑
&&&&&td&colspan="3"&&bgcolor="yellow"&办公设备、文具、耗材
&&&tr&bgcolor="#ebefff"&
&&&&&td&&ibm&/td&
&&&&&td&&惠普
&&&&&td&&华硕
&&&&&td&&打印机
&&&&&td&&刻录盘
&&&&&td&&墨盒
示例7运行效果如图2.13所示
图2.13&背景色的设置
3．如何设置对齐方式
为了美观大方，表格中的数据一般此文来自: 马开东博客
转载请注明出处 网址：
需要设置对齐方式。
设置表格、行或列的对齐方式，修改align属性为right（右对齐）、center(居中)、left（左对齐）就可以了，默认为&左对齐&。
修改示例7，设置&笔记本电脑&列和&办公设备、文具、耗材&列居中显示，代码如示例8所示。
&title&表格的对齐方式
&table&width="350"&height="100"&border="2"&background="images/type_back.jpg"&&
&&&&&td&colspan="4"&&&/td&
&&&tr&bgcolor="#ebefff"&
&&&&&td&colspan="2"&align="center"&&笔记本电脑
&&&&&td&colspan="2"&align="center"&bgcolor="yellow"&&办公设备、文具、耗材
&&&tr&bgcolor="#ebefff"&
&&&&&td&&惠普
&&&&&td&&华硕
&&&&&td&&打印机
&&&&&td&&刻录盘
&title&表格的对齐方式
&table&width="350"&height="100"&border="2"&background="images/type_back.jpg"&&
&&&&&td&colspan="4"&&&/td&
&&&tr&bgcolor="#ebefff"&
&&&&&td&colspan="2"&align="center"&&笔记本电脑
&&&&&td&colspan="2"&align="center"&bgcolor="yellow"&&办公设备、文具、耗材
&&&tr&bgcolor="#ebefff"&
&&&&&td&&惠普
&&&&&td&&华硕
&&&&&td&&打印机
&&&&&td&&刻录盘
示例8运行效果如图2.14所示。
图2.14&单元格对齐方式
4.&如何设置填充、间距属性
如图2.15所示，由于这张表格既没有设置高度，又没有设置宽度，也没有设置填充（cellpadding）和间距(cellspacing)属性，所以非常难看。如果你既不想设置表格的高度，也不想设置表格的宽度，但还要使表格内框宽度(cellsapcing)变宽
使文字与边框距离(cellpadding)拉大，该怎么办？其实很简单，可以通过cellspacing和cellpadding属性进行调整实现。下面我们就先了解一下cellspacing和cellpadding是何方神圣？请你参看图2.16,图2.16中的&内容&相当于图2.15中的&笔记本电脑&，其他部分类同。
图2.15&没有设置填充和间距属性的表格
图表格的填充和间距属性
内框宽度(cellspacing)和文字与边框的距离（cellpadding）均以像素这单位，下面示例9就演示了这两个属性的使用方法。
&title&表格的内框宽度和填充属性
&table&&border=&20&&&bordercolor=&red&&&cellpadding=&30&&&cellspacing=&40&&
&td&colspan=&4&&品牌商城
&td&&colspan=&2&&笔记本电脑
&&&td&&colspan=&2&&办公设备、文具、耗材
&&&td&惠普
&&&td&华硕
&&&td&打印机
&&&td&刻录盘
示例9运行效果如图2.17所示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&图2.17&表格的填充和间距示例说明
图2.15所示的表格如此难看、拥挤，相信大家还记忆犹新！下面我们就运用刚才所学的cellspacing和cellpadding属性，对其进行改造和调整，使其达到美观、大方的效果。
&title&表格的美化
示例10运行效果如图2.18所示。
&&&&&&&&&&&&&&&&&&&&&&&&图2.18&表格的填充和间距示例
&2.4&表格用于布局
网页可以说是构成网站的基本元素。当我们在网络中遨游时，轻点鼠标，一幅幅精彩的网页会呈现在我们面前，那么，网页精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素&&网页的布局。目前网页布局主要还是采用表格进行布局，表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置。
&2.4.1&什么是表格布局
表格在网页布局方面起到了举足轻重的作用，表格布局好像已经成为一个标准，随便浏览一些站点，它们大多是用表格布局的。使用表格设计网页布局，可以使网页看上去更加整齐，适用于一般比较正规的网页。网页中的表格是由若干行和列组成，每一行（或者列）又由多个单元格组成，每个单元格中又可以反复地插入表格，以满足 人员的布局需要。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。如图2.19所示，就是一幅完全使用表格进行布局的网页。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图2.19&使用表格布局的页面
&2.4.2&&如何使用表格进行布局
下面我们通过一个具体的示例,来说明如何使用表格进行布局。假如我们要用表格布局出如图2.20所示的页面。
图2.20&采用表格布局的简单页面
（1）&根据需求创建表格
大家仔细考察图2.20所示的页面，能看出此图中页面表格一共有7行2列，第一行占2列，第二行左边的单元格跨6行，其他单元格都是没有跨多行跨多列的单元格。所以我们应该首先创建一个7行2列的表格，然后合并第一行2个单元格，设置第二行的第一个单元格跨6行，具体代码如下：
&&&tr&&&&td&&colspan=&2&&&&&/td&&&&/tr&
&td&&rowspan=&6&&&&&/td&
&td&&&&/td&
&&&tr&&&&td&&&&/td&&&&/tr&
&&&tr&&&&td&&&&/td&&&&/tr&
&&&tr&&&&td&&&&/td&&&&/tr&
&&&tr&&&&td&&&&/td&&&&/tr&
&&&tr&&&&td&&&&/td&&&&/tr&
（2）&设置表格属性
根据图片的大上以及文字的多少和大小来设计表格、行、单元格的高度、宽度、对齐方式。根据图2.20所示我们来给表格设置相关属性，具体代码如下：
&table&&width=&280&&
&&&&tr&&&&td&&colspan=&2&&&&&/td&&&&/tr&
&td&&rowspan=&6&&&width=&116&&&align=&left&&&&&/td&
&td&&&&/td&
&&&&tr&&&&td&&&&/td&&&&/tr&
&&&&tr&&&&td&&&&/td&&&&/tr&
&&&&tr&&&&td&&&&/td&&&&/tr&
&&&&tr&&&&td&&&&/td&&&&/tr&
&&&&tr&&&&td&&&&/td&&&&/tr&
（3）&给表格填充内容
根据需要，在对应单元格里添加文字和图片，添加完文字和图片之后的页面，所对应的完整代码如示例11所示。
&title&表格布局
&table&width="280"&
&&&td&colspan="2"&&img&src="images/adv.jpg"&/&&/td&
&&&td&width="116"&rowspan="6"&align="left"&
&img&src="images/wangyou.jpg"&width="116"&height="142"/&
&&&td&&a&href="#"&超值变形金钢折
&&td&&a&href="#"&人们为啥对电视吼叫&
&&&&&&td&&a&href="#"&首届翠友会！
&&&&&&td&&a&href="#"&比基尼美女激情海滩&
&&&&&&td&&a&href="#"&想做最闪亮的吗&
&&&&&&td&&a&href="#"&千余中奖机会有你吗
示例11运行效果如图2.20所示。
²&&本章总结
&&创建表格至少需要3对标签,即表格标签&table&&&&/table&,行标签&/tr&&&&/tr&和单元格标签&td&&&&/td&。
&&创建跨多列的表格是在单元格里使用colspan属性进行设置，创建跨多行的表格是在单元格里使用rowspan属性进行设置。
&&表格的美化修饰主要从以下几个方面进行。
l&表格的高度(height)、宽度(width)和边框(border)。
l&表格的背景(becolor和background)、行的背景色(bgcolor)、列的背景色(bgcolor)。
l&表格、行、列的对齐方式(align)。
l&表格的填充(cellpadding)、间距(cellspacing)属性。
&&表格可在一定程度上控制文本和图像在网页中的位置，而不是完全由浏览器对此进行控制。
一、&选择题
1、&运行下面创建表格的代码，在浏览器里会看到（&&）的表格。
&table&&width=&20%&&&border=&1&&
&&&&&&td&&&/td&
&&&&&&&&&td&&&/td&
&&&&&&&&&td&&&/td&
&&&&&&&/tr&
&&&&&&&tr&
&&&&&&&&&td&&&/td&
&&&&&&&&&td&&&/td&
&&&&&&&&&td&&&/td&
&&&&&&&&/tr&
2．指出下面创建表格的html代码中的错误，一共有（&&）错误。
&table&&width=&20%&&&border=&1&&&height=&200&&&bordercolor=&red&&
&&&&&&&&&&td&
&&&&&&&&&&tr&&&&&/tr&
&&&&&&&&&&/td&
&&&&&&/td&&&&&td&
a.5处&&&&&&&&b.&4处&&&&&&&&c.&3处&&&&&&&d.&2处
3.运行下面代码,在浏览器里会看到(&&&)。
&&table&&width=&20%&&&border=&1&&
&&&td&&colspan=&2&&&rowspan=&2&&&&/td&
&&&td&&&/td&
&&&td&&&/td&
a.&6个单元格
b.&5个单元格
c.&4个单元格
d.&3个单元格
4．运行下面代码，在浏览器里会看到（&&）。
&table&&width=&20%&&&border=&1&&
&&&&&td&&colspan=&2&&&&/td&
&&&&&td&&rowspan=&2&&&&/td&
&&&&&td&&&/td&
&&&td&&&/td&
a．&6个单元格
b．&5个单元格
c．&4个单元格
d．&3个单元格
5．html语言中，设置表格中文字与边框距离的标签昌（&&）。
a．&table&&&border=#&
b．&table&&&cellspacing=#&
c．&table&&&cellpadding=#&
d．&table&&&width=#&or&%&
二、&简答题
1．&请用html实现如图2.21所示的表格。
图2.21&跨列表格
先创建3行3列的表格，然后把第一行合并成一个单元格，最后给单元格添加内容。
2．请用html实现如图2.22所示的表格。
图2.22&跨行表格
先创建3行2列的表格，然后把第一列合并成一个单元格，并把它放在第一行里，最后给单元格添加内容。
3．请用html实现如图2.23所示的表格
图2.23&详细订单表格
先创建5行6列的表格，然后把第一行合并成一个单元格，并为其设置背景色，最后一行左边的单元格设为跨5列，最后给所有的单元格添加内容
4．请用html实现如图2.24所示的表格。
&&&&&&&&图2.24&学生基本信息表格
先创建4行3列的表格，然后把第一行合并成一个单元格，再把第三行第三列与第四行第三列合并成一个单元格，接着为表格设置背景图片、对齐方式、边框颜色，还要为表格设置填充和间距属性，最后给所有的单元格添加内容。
表单和框架
本章工作任务
&制作&注册&页面
&制作&客户中心&页面
本章技能目标
&会使用表格的基本结构制作表单页面
&会使用各种表单元素实现注册页面
&能理解post和get两种提交方式的区别
&会使用框架结构实现多窗口展示页面
²&本章简介
上一章已介绍了表格的基本结构，既讲解了如何创建一个简单的表格，又讲解了如何创建更加复杂的跨多行跨多列表格，我们一开始创建的表格还是比较丑陋，所以随后我们就对表格从多方面进行了美化修饰，不过，为了实现图文并茂的页面，我们还学习了表格布局。
本章开始讲解表单和框架，其中重点是如何使用表单中的各种元素，如何使用框架制作多窗框页面；难点是表单中的post方法和get方法的区别，窗口的target属性。为了能在一个页面中显示多个html文档，我们还介绍了框架。
²&本章单词
请在预习前完成下列单词。
已学单词复习
1．colspan:&______________________&&&&&&&&2.&rowspan:&_________________
3.&cellpadding:&____________________&&&&&&&&4.&cellspacing:&_______________
5.&background:&____________________&&&&&&&&
本章新单词
1.&target:&_________________________&&&&&&&&2.&form:&____________________
3.&method:&________________________&&&&&&&&4.&action:&___________________
5.&checkbox:&______________________&&&&&&&&6.&radio:&____________________
7.&textarea:&_______________________&&&&&&&&8.&frameset:&__________________
9.&frame:&_________________________
&3.1&&&&表单
热衷于上网的用户经常会在网上看到一些会员注册页面、购买某个商品收集信息页面、网上调查问卷页面、搜索工具页面等，这些页面是什么做的呢？我不敢说完全是用表单做的，但我敢肯定至少包含有表单，所以表单主要用来收集客户端相关信息，使网页具有交互功能。本节主要讨论如何使用html来创建表单，然后向表单中添加表单元素。
网页中的表单用途很广，而且还在不断发展。下面我们就列举一些典型的表单应用：
在用户注册某种服务或事件时收集姓名、地址、电话号码、和其他信息。
为收集购买某个商品的订单信息。例如，如果想通过购买一本书，则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。
收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷，提供反馈信息。这些反馈信息除了维系良好的客户关系外，它还有助于改进和提高网站的服务质量，从而使网站的服务更具人性化，吸引更多的浏览者。
为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到想要的信息，如比较著名的搜索网站： ()、 （）等。
如图3.1所示是网页上的一个典型表单。
&&&&&&&&&图3.1&典型的表单
&&3.1.1&表单包含的控件
创建表单后，就可以在表单中放置控件以接受用户的输入。这些控件通常放在&form&&/form&标签对之间一起使用，也可以在表单之外用来创建用户界面。在网上冲浪时，我们经常会见到一些常用控件，例如：让用户输入姓名的单行，让用户输入密码的密码框，让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。
不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息，如&姓名&、&备注&、&留言&等，一般使用单行或多行：如果要求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框，如图3.1中&性别&、&爱好&、&出生日期&中的月份选择等常采用这些控件。如果要把填写好的表单信息提交给服务器，一般使用&提交&按钮，如图3.1中的&同意以下服务条款，提交注册信息&按钮。除此之外，还有一些不太常用的表单控件，在这里就不一一列举了。
&3.1.2&表单页面的基本结构
&form&标签用于在网页中创建创建表单区域，属于一个容器标签，表示其他表单标签需要在它的包围中才有效，&input&便是其中的一个。用以设定各种输入资料的方法，其属性见表3-1。
&&&&&&表3-1&&form&元素的属性
此属性指示服务器处处理表单输出的程序。一般来说，当用户单击表单上的&提交&按钮后，信息发送到 上，由action属性所指定的程序处理。语法为：action=&url&
此属性告诉浏览器如何将数据发送给服务器发送数据方法（用postt方法还是用get方法）。如果值为get,浏览器将创建一个请求，该请求包含页面url，一个问号和表单的值。浏览器会将该请求返回给url中指定的脚本，以进行处理。如果将值指定为post，表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。语法为：method=(get︱post)
使用post方法将表单提交给&processform&程序处理，代码如示例1所示。
&form&&name=&form1&&&method=&post&&&action=&/processform&&
&p&&&名字：&name&&&type=&text&&&&&/p&
&p&&&密码：&pass&&&type=&pass &&&&&/p&
&&&&&input&&type=&submit&&&name=&button&&&value=&提交&&
&&&&&input&&type=&reset&&&name=&reset&&&value=&重填&&
示例1中，若把method=&post&改为method=&get&就变成了使用get&方法将表单提交给&&程序处理。这两种方法都是将表单数据提交给服务器上指定的程序进行处理，那有什么区别呢？
先让大家看看采用和方法提交表单信息后浏览器地址栏的变化，如图和图所示。在&名字&和&密码&标签后，分别输入用户名和密码，然后单击&提交&按钮。采用方法提交表单信息之后，浏览器地址栏前后没变化，如图所示，并且在浏览器地址栏中能看到信息&&&这其实就是我刚才输入的用户名和密码信息，是不是很恐怖？密码都能看得见。由此可以看出，使用方法提交表单信息更安全，相反，使用方法提交表单信息极其不安全，建议大家在使用表单时尽可能地使用方法来传送数据。
图3.2&post方法提交表单信息后&&&&&&&&&&&&&&&图3.3&get方法提交表单信息后
&3.1.3&表单元素原统一格式
网页中的表单由许多不同的表单元素组成，这些表单元素各自都有很多属性，要一一介绍，篇幅不允许，下面就把这些表单元素中的一些常用的属性作一个统一的介绍。
下面给出了表单元素的统一格式：
&form&&name=&form3&&&method=&post&&&action=&&&&
&input&&type=&checkbox&&&name=&gen&&&value=&男&&&size=&21&&&maxlength=4&&checked=&checked&&
&input&&元素定义要在表单中显示的控件类型和外观。此元素包括的属性见表3-2。
&&&&&&&&&&&&&&&&&&&&&&&&&&表3-2&&input&元素属性
此属性指定表单的类型。可用的选项有：text、、、o、submit、、、、和button。默认选择为text
此属性指定表单元素名称。例如，如果表单上有几个，可以按名称来标识它们，如text1、等。名称属性的作用域为form元素内
此属性是可选属性，它指定表单元素牟初始值。但如果type为radio，则必须指定一个值
此属性指定表单元素的初始宽度。如果type为text或pass ，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位
此属性用于指定可在text或pass 元素中输入的最大字符数。默认值为无限大。
此属性是boolean属性，指定按钮是否是被选中的。当输入类型为radio或checkbox时，使用此属性。
&3.1.4&表单元素的逐一介绍
下面讨论表单元素的类型及常用的属性。
在表单中最常用最常见的表单输入元素就是（text）,它提供给用户输入单行文本信息，例如用户名的输入框。若要在文档的表单里创建一个，将图3.4中的表单元素type属性设为text就可以了。
&form&&name=&form1&&&method=&post&&&action=&&&&
&&&&&&&&input&&type=&text&&&value=&张三&&&size=&20&&&name=&fname&&
&input&&name=&lname&&&type=&text&&&&/p&
&p&登录名：
&input&&name=&sname&&&type=&text&&&size=&20&&&
示例2在浏览器中预览效果如图3.4所不。
图3.4&的效果
将图3.4中的表单元素的type属性设为pass 就可以创建一个密码框。密码框的各属性和一样，唯一不同的是，密码框输入的字符全都以&*&显示。
&form&&name=&form2&&&method=&post&&&action=&&&&
&p&用户名：&name&&&type=&text&&&size=&21&&&&/p&
&input&&name=&pass&&&value=&123456&&&type=&pass &&&size=&22&&
示例3在浏览器中预览效果如图3.5所示。
&&&&&&&&&&&&&&&&&&&&&&&&图3.5&密码框的效果
密码框能保证输入数据的安全吗？
不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入的数据安全。为了使数据安全，应该加强人为管理，采用数据加密技术等。
3.&单选按钮
将图3.4中的表单元素的type属性设为radio就可以创建一个单选按钮。单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应该具有相同的名称，用户一次只能选择一个选项。只有从组中选定的单选按钮才会提交的数据中生成name/value对，单选按钮需要一个显式的value属性。
&form&&name=&form3&&&method=&post&&&action=&&&&
&br&性别：
&input&&name=&gen&&&type=&radio&&&class=&input&&&value=&男&&&
checked=&checked&&
&&&&&&img&&src=&images/male.gif&&&width=&23&&&height=&21&&男
&&&&&&input&&name=&gen&&&type=&radio&&value=&&女&&&class=&input&&
&&&&&&img&&src=&images/female.gif&&&width=&23&&&height=&21&&女
示例4在浏览器中预览效果如图3.6所示。
图3.6&单选按钮效果
将图3.4中的表单元素的type属性设为checkbox就可以创建一个复选框。用户可以选择多个复选框，选择了复选框时，会将一个name/value对与form一起提交。
&form&&name=&form4&&&method=&post&&&action=&&&&
爱好：&&&input&&type=&checkbox&&&name=&cb1&&&value=&sports&&运动
&input&&type=&checkbox&&&name=&cb2&&&value=&talk&&checked=&checked&&
&input&&type=&checkbox&&&name=&cb3&&&value=&play&&玩游戏
示例5在浏览器中预览效果如图3.7所示。
&&&&&&&&&&&&&&&&&&&&&&&&图3.7&复选框效果
单选按钮应具有相同的名字，便于互斥选择；而复选框可以有不同的名字，并不需要属于一组。
列表框主要是为了用户快速、方便、正确地选择一些选项，而且还能节省此文来自: 马开东博客
转载请注明出处 网址：
页面空间，它是通过&select&和&option&标签来实现的。&select&标签用于显示可供用户选择的下拉列表，每个选项由一个&option&标签表示，&select&标签必须包含至少一个&option&标签。
&select&&name=&指定列表名称&&&size=&行数&&
&option&&value=&可选项的值&&&selected&&
&option&&value=&可选项的值&&&
其中，在有多种选项可供用户滚动查看时，size确定列表中可同时看到的行数不胜数；stlected表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。
&form&&name=&form5&&&method=&post&&&action=&&&&
出生日期：
&&&&&input&&name=&byear&&&value=&yyyy&&&size=4&&maxlength=4&&&年
&&&&&select&&name=&bmon&&
&option&&value=&&&&&selected=&selected&&[选择月份
&&&&&&&option&&value=0&一月
&&&&&&&option&&value=1&二月
&&&&&&&option&&value=2&三月
&&&&&&&option&&value=3&四月
&&&&&&&option&&value=4&五月
&&&&&&&option&&value=5&六月
&&&&&&&option&&value=6&七月
&&&&&&&option&&value=7&八月
&&&&&&&option&&value=8&九月
&&&&&&&option&&value=9&十月
&&&&&&&option&&value=10&十一月
&&&&&&&option&&value=11&十二月
&&&/select&&&月
&&&input&&name=&bday&&&value=&dd&&&size=2&&maxlength=2&&日
示例6在浏览器中预览效果如图3.8所示。
&&&&&&&&&&&&&&&&&&&&&&&&&图3.8&列表框效果
按钮在表单中经常用到，在html中按钮分为3种，分别是普通按钮(button)、提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。
&input&&type=&reset&&&name=&reset&&&value=&重填&&
其中，若type=&button&表示是普通按钮；若type=&submit&表示是提交按钮；若&type=&reset&表示是重置按钮。name是用来给按钮起名字，用来设置显示在按钮上的文字。
&form&&name=&form1&&&method=&post&&&action=&&&&
&p&用户名：&name&&&type=&text&&&size=&21&&&&/p&
&p&密码：&pass&&&type=&pass &&&size=&22&&
&&&&&&input&&type=&reset&&&name=&reset&&&value=&重填&&
&&&&&&input&&type=&submit&&&name=&button&&&value=&提交&&&
&&&&&&input&&type=&button&&&name=&confirm&&&value=&点播&&
&&&&&&input&&type=&button&&&name=&cancel&&&value=&取消&&
示例7浏览器中预览效果如图3.9所示。
&&&&&&&&&&&&&&&&&&&&&&&&&图3.9&按钮预览效果
当我们要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的及其他表单元素都不能满足要求，这就应该使用多行，它使用的标签是&textarea&。
&textarea&&name=&textarea&&&cols=&40&&&rows=&6&&&&文本内容&
&form&&name=&form7&&&method=&post&&&action=&&&&
&h4&&img&&src=&images/read.gif&&&width=&35&&&height=&26&&阅读服务协议
&&&&textarea&&name=&textarea&&&cols=&40&&&rows=&6&&
&&&&&&&欢迎阅读服务条款协议&
&&&&/textarea&
示例8在浏览中预览效果如图3.10所示。
图3.10&多行效果
&3.2&&&&框架
在一个网页中，并不是所有的内容都需要改变，如网页的导航栏、网页页脚等部分是不需要改变的，如果在每一个网页中都重复添加这些元素，不仅会浪费时间，而且在浏览进也会带来不便、耗费更多的时间，为了解决这种问题，我们可以使用框架来对网页进行布局。
使用框架可以把浏览器窗口划分为多个区域，每个区域可以显示不同的网页，每次浏览者在访问框架页面时，只下载框架页面中变化的区域，对于不变的区域，不用重新下载，从而给浏览者带来方便、节省下载页面所需的时间。
一个框架结构是由以下两部分组成的：
框架(frame)：是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中所显示内容无关的网页文件。
框架集(frameset)；是一个网页文件，它将一个窗口通过横向或纵向的方式分割成多个框架，每个框架中要显示的都是不同的网页文件。不同的网页文件可以通过联系起来。
如图3.11所示就是一个比较经典的框架页面。此页面一共有3个区域，每个区域分别显示一个html文档，由于框架集页面也是一个html文档，所以一共有4个html文件。为了浏览方便，当浏览者单击左侧导航栏中的服务列表（如&注册&认证&、&买家帮助&等）时，右侧窗口显示相应的详细帮助信息。
图3.11&框架集页面
&3.2.1&&&为何使用框架
一个网页可以有一个或多个框架。框架的一些用法如下：
在页面的一个固定部分显示logo或静态信息。
左侧框架显示目录，右侧框架显示内容，用户只需要单击左侧窗口的目录，在右侧窗口中就会显示相应内容，如网上在线学习教程、论坛、后台管理、产品介绍等。
框架能有机地把多个页面组合在一起，这多个页面之间可互相独立，却又可相互联系。
&3.2.2&&&框架的基本结构
框架集(frameset)页面的结构是通过属性rows和cols来设置的，根据框架的分割方式可分为：上下分割窗口(使用rows属性来分割)，左右分割窗口（使用cols属性来分割），嵌套分割窗口（同时使用rows和cols属性来分割）。
&frameset&&cols=&25%,50%,*&&&rows=&50%,*&&&border=&5&&
&&&&frame&&src=&the_first.html&&&&
&/frameset&
说明：frameset仅是一框架的集合。frame标签可以提供对单独html文档url引用，其中每个html文档占据一个框架。cols将页面沿垂直方向分割为几个窗口，cols可以取多个值，不同的值用逗号隔开，单位可以是像素，也可以是占浏览器的百分比。rows将页面沿水平方向分割为几个窗口，也可以取多个值，是由逗号分割的像素或百分比。src指定框架窗口的源文件。
&title&rows框架
&frameset&&bordercolor=&red&&&rows=&25%,50%,*&&&border=&5&&&
&&&&frame&&name=&top&&&src=&the_first.html&&
&&&&frame&&name=&middle&&&src=&the_second.html&&
&&&&frame&&name=&bottom&&&src=&the_third.html&&
&/frameset&
示例9在浏览器中预览效果如图3.12所示。
图3.12&水平方向分割为上中下3个窗口
&title&cols框架
&frameset&&cols=&120,&*&&border=&5&&
&&&&frame&&src=&the_first.html&&&name=&topframe&&
&&&&frame&&src=&the_second.html&&&name=&mainframe&&&scrolling=&no&&&noresize&
&/frameset&
示例10在浏览器中预览效果如图3.13所示。
图3.13&垂直方向分割为左右两窗口
&3.2.3&&&如何创建多个复杂的窗口
前面的示例9和示例10要么是水平分割，要么是垂直分割，如果要实现如图3.14所示的框架集页面，那怎么实现？
图3.14&框架集页面
经分析，首先将页面分割为上下两部分，上部分的高度占浏览器高度的30%左右。然后将下面部分分割成左右两部分，宽度大约分别占窗口的20%和80%。注意对其中的一个框架窗口再次分割时，需要使用&frameset&标签代替&frame&标签。下面我们就一步一步地实现如图3.14所示的框架集页面。
第一步：创建或直接提供如图3.14所示的top窗口中所显示的页面文档top.html。
第二步：创建或直接提供如图3.14所示的left窗口中所显示的页面文档left.html。
第三步：创建或直接提供如图3.14所示的right窗口中所显示的页面文档right.html。
第四步：手写如示例11中的代码，然后保存为frame_sets.html文件。
&title&创建多框架页面
&frameset&&border=&5&&&rows=&20%,&*&&&
&&&&frame&&src=&top.html&&&name=&topframe&&&scrolling=&no&&
&frameset&&cols=&20%,&*&&
&frame&&src=&left.html&
&&&&&&&&&&name=&leftrame&&&scrolling=&no&&&&&&&&&
&frame&&src=&right.html&
&&&&&&&&&&name=&rightframe&&
&/frameset&
示例11在浏览器中预览效果如图3.14所示。
&3.2.4&如何设置窗口链接的显示位置
在图3.14中，如果left窗口的导航列表（如&注册&认证&、&买家帮助&等），在right窗口中显示链接的页面内容，其实这就是典型的导航页面，该如何实现？这就需要使用&frame&标签中的name属性和&a&标签的target&属性。
target目标窗口属性分为两类：一类是框架页面之间的链接；另一关是个特殊窗口的。
1.&框架页面之间的链接
要设置框架之间的，需要两步：
第一步：设计好框架集页面，并为每个框架窗口定义名称。
如：&right.html&&&name=&rightframe&&
第二步：设置导航栏中的的目标窗口属性，使其值为框架窗口的名字。
如：&right.html&&&target=&rightframe&&
下面我们就在示例的基础上，来实现框架之间的。
首先根据需要，创建好框架集页面，然后为每个框架窗口定义名称。设置框架集页面（）的代码如下：
&frameset&&rows=&20%,&*&&&frameborder=&0&&
&frame&&src=&top.html&&&name=&topframe&&&scrolling=&no&&&
noresize=&noresize&&
&&&&&&&frameset&&cols=&20%,&*&&
&&&&&&&&&&&&frame&&src=&left.html&&&name=&leftframe&&&scrolling=&no&&
noresize=&noresize&&
&&&&&&&&&&&frame&&src=&right.html&&&name=&rightframe&&
&&&&&&&&/frameset&
&/frameset&
下面设置导航页中的，也就是设置示例11中left.html中的，最关键的是将导航页中的各个链接图片或文字的目标找开方式设置为在框架中打开，即将target属性值设为框架窗口的名字。
由于left.html文档中有多个，而且为了说明框架之间的链接，所以我们先准备几个链接页面，如：buy.html、sale.html、person_info.html。
设置了框架之间链接的left.html文档代码如下：
&title&左侧导航页面
&a&&href=&right.html&&target=&rightframe&&
&img&&src=&images/rge.jpg&&&width=&160&&&height=&31&&&border=&0&/&&/a&
&p&&a&&href=&buy.html&&target=&rightframe&&
&img&&src=&images/buy.jpg&&&width=&160&&&height=&32&&&border=&0&/&&/a&
&p&&a&&href=&sale.html&&target=&rightframe&&
&img&&src=&images/sale.jpg&&&width=&158&&&height=&31&&&border=&0&/&&/a&
&p&&a&&href=&person_info.html&&target=&rightframe&&
&img&&src=&person_info.jpg&&&width=&157&&&height=&31&&&border=&0&/&&/a&
设置左侧导航栏的之后，使用浏览器打开frame_sets.html文档，运行效果如图3.15所示。
单击框架导航栏中的链接图片&买家帮助&，将会打开如图3.16所示的页面效果。同理，单击&卖家帮助&和&个人资料修改&，在内容区都会打开相应的html文档页面。
图3.15&框架页面的默认显示效果
图3.16&在框架窗口中打开&买家帮助&介绍页面
2．4个特殊的窗口
在制作网页中的时，默认情况下会在当前窗口中打开。通过使用target属性，可以将目标页面在一个新的窗口中打开。
&a&&href=&url&&&target=&_blank&&
其中，target属性可以取4个值，这些值的具体含义见表3-3。
表3-3&target目标窗口的打开方式
新启一个窗口打开链接
新启一个窗口中打开，默认取值（指没有设置target属性值时的情况）
在上一级窗口中打开（框架页面中使用较多）
在整个浏览器窗口中打开
我们直接在示例12的基础上进行相关的修改，仅仅修改left.html文档代码，其他html文档都保持不变，修改后的left.html文档代码如下：
&title&在左侧导航页面中演示个特殊窗口
&a&&href=&right.html&&target=&_blank&&
&img&&src=&images/rge.jpg&&&width=&158&&&height=&31&&&border=&0&/&
&a&&href=&buy.html&&target=&_self&&
&img&&src=&images/buy.jpg&&&width=&160&&&height=&32&&&border=&0&/&
&a&&href=&sale.html&&target=&_parent&&
&img&&src=&images/sale.jpg&&&width=&158&&&height=&31&&&border=&0&/&
&a&&href=&person_info.html&&target=&_top&&
&img&&src=&person_info.jpg&&&width=&157&&&height=&31&&&border=&0&/&
设置左侧导航栏的目标页面打开方式之后，使用浏览器打开frame_sets.html文档，单击&注册&认证&之后，可以看到打开一个新的窗口，如图3.17所示。
图3.17&设置目标页面的打开方式
²&本章总结
&&表单主要用来制作动态网页，方便和用户进行交互，例如：会员注册、购物订单、调查问卷、搜索等页面都会用到表单。
&&常用的表单元素有：（text）、密码框（pass ）、单选按钮（radio）、复选框（checkbox）、列表框（&select&和&option&、按钮（button、submit和reset）、多行（&textarea&））。
&&一个框架结构是由两部分组成的：框架集（frameset）和框架（frame）。
&&框架集（frameset）页面被划分的区域多少是通过属性rows和cols来设置的。
&&网页中目标页面的打开方式有5种，可以通过target属性来设置。
一、&选择题
1．（&&）标签用于在网页中创建表单。
a.&&input&
b.&&select&
c.&&optgroup&
2.&（&&）元素用于定义表单中控件的类型和外观。
d．caption
3．&frameset&cols=#&是用来指定（&&）。
a．混合分割
b．纵向分割
c．横向分割
d．任意分割
4．框架中&禁止改变框架窗口大小&的语法是（&&）。
a．&a&&href=&right.html&&&target=&rightframe&&
b．&img&&src=&url&&border=?&
c．&frameset&&rows=&20%,&*&&&frameborder=&0&&
d．&frame&&noresize=&noresize&&
5．想要使用户在单击时，弹出一个新的网页窗口，下面（&&）选项符合要求。
a．&a&&href=&right.html&&target=&_blank&&新闻&/a&
b．&a&&href=&right.html&&target=&_parent&&体育&/a&
c．&a&&href=&right.html&&target=&_top&&财经&/a&
d．&a&&href=&right.html&&target=&_self&&教育&/a&
二．简答题
1．请用html实现如图3.18所示的申请表表单。相关要求如下：
教育程度：默认选中为硕士。
国籍：有美国、澳大利亚、日本、新加坡，默认选中为澳大利亚。
图3.18&申请表表单
2．请用html实现如图3.19所示的电子产品调查表表单。相关要求如下：
&&请输入您的购买日期：月份下拉选项为1月到12月，日下拉选项为1~31。
&&您是否查看过我们的在线产品目录：默认选中为&是&。
图3.19&电子产品调查表表单
3．请用html实现如图3.20所示的注册表单。相关要求如下：
&&性别：男、女前分别有男性图标和女性图标，默认选中为&男&。
&&出生日期：月份默认选中为&[选择月份]&，月份下拉选项为1月到12月。
图3.20&注册表单
4．请用html实现如图3.21所示的框架集页面，要求：选择左边框架中的菜单项，在右边的框架中打开相应的例题页面文档。
图3.21&框架集页面
框架集页面分成左右两个框架窗口，分别占浏览器窗口的25%和75%，&[例3-1]&、&[例3-2]&和&[例3-3]&的目标文档分别为图3.18、图3.19和图3.20所示对应的html文档。
本章工作任务
&制作&宝贝分类&页面
&制作并美化&登录&页面
本章技能目标
&会创建统一外观的字体文本
&会创建无下划线的样式
&会创建个性化的表格
&会创建个性化的表单
²&本章简介
上一章的课程里，我们学习了表单以及表单中的各种元素，常用的表单元素有：（text）、密码框（pass ）、单选按钮（radio）、复选框（checkbox）、列表框（&select&和&option&）、按钮（button、sbumit和reset）、多行（&textarea&）。
另外，还学习了框架，包括框架的基本结构、如何创建多个复杂的窗口、框架窗口之间的链接等。
从本章开始，我们将学习css（cascading&style&sheet,层叠式样式表），其中重点是样式的基本语法和如何创建常见的样式规则（如创建无下划线的样式，设置细边框样式，创建常见的文字，颜色等样式等）；难点是内嵌样式、行内样式、样式表文件的使用场合。
²&本章单词
请在预习前完成下列单词
已学单词复习
1.&target:&________________________&&&&&&2.&form:&_________________________
3.&textarea:&________________________&&&&&&4.&frameset:&______________________
5.&frame:&__________________________&&&&&&
本章新单词
1.&style:&___________________________&&&&&&2.&class:&________________________
3.&padding:&________________________&&&&&&4.&text-decoration:&________________
5.&background-repeat:&_______________&&&&&&&6.&import:&______________________
7.&link:&___________________________
&4.1&为什么需要css样式表
通过定义css样式表，能让网页具有美观一致的界面，可以将得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与之间的分工协作，发挥各自的优势。
为什么需要css样式表主要是基于以下几点原因：
（1）&html标签的外观样式比较单一。
大家在学习前面几章时，不知发现没有？前面几章网页中的文字的字体、颜色、大小、、间距等样式都比较单一，为了弥补这个缺点，就需要使用css样式表来对html标签进行控制，从而实现更加丰富多彩的效果。
（2）&样式表的作用相当于华丽的衣服。
同样的内容，采用不同的css样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图片等，从而实现复杂多变的页面效果，因此样式表相当于一个页面甚至一个网站的华丽的衣服。如图4.1和图4.2所示，就是内容相同，外观不同的两个页面。
图4.1&内容相同样式不同页面1
图4.2&内容相同样式不同页面2
（3）&样式表能实现内容与样式的分离，方便团队开发。
由于当今社会争日趋激烈，分工越来越细，每个人做的事越来越单一，我们开发一个网站也不例外，往往需要美工和人员的配合，美工做样式，写内容，为了迎合这种需要，就出现了样式表。样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过css样式表文件来控制，从而方便美工和分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。
&4.2&样式表的基本语法
样式表由样式规则组成，这些规则告诉浏览器如何显示文档。一个样式（style）的基本语法由3部分构成：selector（中文叫选择器，有点怪怪的，就用英文吧！），属性（property）和属性值（value）。
&4.2.1&样式表的基本结构
&style&和&/style&标签之间的所有内容都是样式规则，样式规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。下面让我们先来看一个样式表的基本结构。使我们对样式表有个感性的认识。
样式表的基本结构为：
&style&&type=&text/css&&
&&color:&&&&&&&&&&&&
&&font-size:30
&&font-family:隶书;
文档样式表一般位于html文件的头部，即&head&和&/head&标签之间，定义的样式规则就可应用到当前的页面中。这些样式规则表示什么意思？下面我们就来了解一下样式规则的组成及其含义。
&4.2.2&样式规则
层叠样式表是一组规则，用于定义文档的样式。例如，可以创建一个样式规则，来指定所有&p&标题的颜色均为浅绿。可以用来修饰网页中所有&p&标签的样式。
样式规则示例如下：
&&&&&&&&&&&&&p&{color:&&font-size:30&&font-family:隶书;}
其中，规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。上面的示例p是规则选择器。括在大括号内的部分称为声明。声明由两部分组成：冒号前面的部分是属性，冒号后面的部分是该属性的值。一个选择器可以有多个属性，它们可以写在一起，用分号隔开。
&&&&&&&&&&&&p&{color:&&font-family:&隶书&;&&font-size:24}
示例1使用文档样式定义了页面中的所有&p&标签的样式。
&title&样式规则
&&&&&&style&&type=&text/css&&
&&&&&&&&&&&&&&&p&{&color:&&font-family:&隶书&;&&font-size:24}
&&&&&&/style&
&h2&静夜思
&p&床前明月光，
&p&疑是地上霜。
&p&我是郭德刚，
&p&低头思故乡。
示例1在浏览器中预览效果，如图4.3所示。
&&&&&&&&&&&&&图4.3&文档样式效果&&&&&&&&&&&&&&&&&&图4.4&类样式效果
&4.2.3&类样式（class）
在示例1中，如果我们想&h2&标签的样式与&p&标签的样式一模一样，那如何实现？有了！要为它们定义一个共享样式。这个共享样式可以使用类样式来实现。
类选择器的定义格式为：
&style&&type=&text/css&&
&&&&&.red&{
&&&&&&&&&color:&&font-family:&隶书&;&&font-size:24
&&&&&&&&&}
注意类名前面有一&.&号，类名可随意命名，最好根据元素的用途来定义一个有意义的名称。某个标签(如&h2&)希望采用该类选择器的样式。语法格式为：
&h2&&class=&类名&&静夜思
&p&&&class=&类名&&床前明月光，
&title&样式规则
&&&&&&&style&&type=&text/css&&
&&&&&&&&&&&&&&&.red&&{&color:&&font-family:&隶书&;&}
&&&&&&&/style&
&h2&&class=&red&&静夜思
&p&&class=&red&&床前明月光，
&p&&class=&red&&疑是地上霜。
&p&&我是郭德刚，
&p&&class=&red&&低头思故乡
示例2在浏览器中预览效果，如图4.4所示。
&h2&、第一个段落&p&、第二个段落&p&和第四个段落&p&都采用了red类选择器，所以字体都为红色，字体类型为隶书。第三段没采用任何样式，按默认的样式显示。
从此例可以看出，不同类别的标签（如&h2&和&p&）可以使用同一类选择器，同一类的标签（如&p&）可以采用不同的类选择器，类选择器实现了样式的灵活共享。
&4.3&常用的样式属性
css的属性非常庞大，庞大得好几本书都写不完，不过，没关系，我们可以从网上搜索相关资料或者查阅相关专著。这里只列出常用的且实用的css属性。下面我们就先来学习文本属性。
&4.3.1&文本属性
文本属性主要用来对网页中的文字进行控制，如控制文字的大小、类型、样式、颜色以及对齐方式等，从而使页面中的文本达到我们想要的外观。表4-1列出了常用的文本属性。
表4-1&常用的文本属性
设置文本的字体大小
font-family
设置文本字体类型
font-style
设置文本的字体样式
设置文本的颜色
text-align
设置文本的对齐方式
下面示例3采用了文档样式和类样式，其中的样式规则使用了文本属性，从而有效地控制了网页中的文本效果。
&title&文本属性样式
&style&&type=&text/csds&&
&&&&&&&&&&{&&font-size:12
&&&&&&&&&&&&&font-family:&宋体&;
&&&&&&&&&&&&&text-align:
&&&&&&&&&&&&}
&&&&&&&.bigfont
&&&&&&&&&&{
&&&&&&&&&&&&&font-size:16
&&&&&&&&&&&&&color:
&&&&&&&&&&}
【新闻】[设搜狐为首页]&9月1日
&&&&&&&&&p&class=&bigfont&&&世锦赛刘翔12秒95夺冠成就大满贯&/p&
&&&&&&&&&p&&我国实施不安全食品召回制度&遏制非法出口&/p&
&&&&&&&&&p&&中国代表向联合国通报军备透明制度举措&/p&
&&&&&&&&&p&class=&bigfont&&&博客︳刘翔：最后胜利的感觉真好！&/p&
示例3在浏览器中预览效果，如图4.5所示。
在示例3中第一个段落&p&和第四个段落&p&都应用了标签样式&p&和类样式bigfont,到底哪个样式起作用？有了，就近原则，当有不同的样式规则应用在同一个标签上时，根据这些样式规则距离修饰的文本的远近，来决定应用哪一个样式规则，如示例3对第一个段落&p&和第四个段落&p&起作用的应该是类样式bigfont,而不是标签样式&p&。
图4.5&文本属性效果
&4.3.2&&&背景属性
恰当地使用背景，可以使页面既美观显示速度又快。背景包括背景颜色、背景图象以及背景图像以何种方式平铺在指定的区域内。表4-2列出了常用的背景属性。
表4-2&常用的背景属性
background-color
设置背景颜色
background-image
设置背景图像
background-repeat
设置一个指定的背景图像如何被重复显示。
可取的值有：repeat（铺满整个区域，默认情况）、no-repeat(不平铺)、repeat-x（只在水平方向上平铺）、repeat-y（只在垂直方向上平铺）
下面示例4对一个表格设置了背景图像，并且背景图像不平铺。
&title&宝贝类目
&style&type="text/css"&
/*&表格单元格小字体的样式
& font-size:&14
font-family:&"宋体
padding-left:10
/*&大字体的样式
font-size:&16
color:&#0000
/*&表格虚线边框的样式
.tableborder&
border-right-width:&2
border-right-style:&&
/*设置无下划线的超连接样式
text-decoration:&
&&&}&&&&&&&
&&a:hover{&/*鼠标在上悬停时变为颜色
&&&color:&
/*设置表格的背景图片样式
background-image:&url(images/type_back.jpg);
background-repeat:no-&
&p&&img&src="images/logo.gif"&width="250"&height="40"&/&您好，欢迎来 ！
&table&width="100%"&&
&&&&&td&width="26%"&&&/td&
&&&&&td&width="36%"&&&/td&
&&&&&td&width="29%"&&&/td&
&&&&&td&width="9%"&&&/td&
&&&&&td&&&/td&
&&&&&td&&&/td&
&&&&&td&&&/td&
&&&&&td&&&/td&
&&&&&td&class="tableborder"&&&&&a&href="#"&class="bigfont"&手机充值、卡电话卡
&&&&&&&&&a&href="#"&移动联通铁通
&&&&&td&class="tableborder"&&&&&a&href="#"&class="bigfont"&网游、点卡、金币&
&&&&&a&href="#"&征途魔兽自动发货
&&&&&td&colspan="2"&class="tablepad"&&&&&a&href="#"&class="bigfont"&电子彩票&
&&&&&a&href="#"&福彩体彩足彩
&&&tr&bgcolor="#ebefff"&
&&&&&td&class="tableborder"&&&&a&href="#"&class="bigfont"&手机诺基亚&
&&&&&a&href="#"&n73&/a&&|&&a&href="#"&n72&/a&&|&&a&href="#"&n95&/a&&/td&
&&&&&td&class="tableborder"&&&&a&href="#"&class="bigfont"& 、网络设备&
&&&&&a&href="#"&cpu&/a&&|&&a&href="#"&主板内存硬盘
&&&&&td&colspan="2"&class="tablepad"&&&&a&href="#"&class="bigfont"&数码相机
&&&&&a&href="#"&索尼佳能三星
示例4在浏览器中预览效果，如图4.6所示。
图4.6&表格背景图像不平铺效果
&4.3.3&方框属性
方框属性其实就是对应css盒子模型，css盒子模型都具备方框属性。常用的方框属性有：边界（margin）、边框（border）、填充（padding）、内容。
这些属性我们可以把它转移到日常生活中的盒子上来理解，日常生活中所见的盒子也都具有这些属性，所以叫它盒子模型。日常生活中的盒子的内容就是盒子里装的东西；填充就是怕盒子里装的贵重瓷器损坏而添加的抗震材料（瓷器周围的软布）；边框就是盒子本身；至于边界则说明盒子摆放的时候不能和别的盒子挨在一起，盒子与盒子之间要留间隙，这间隙相当于边界（相邻纸箱之间的距离）。
下面我们回过头来看看 中的盒子模型，在 中，内容常指图片（如图4.8所示中的&我要投票&图片）、文字等元素；填充就是盒子内容到盒子边框之间的距离，可以理解为生活中盒子里的抗震材料的厚度；而边框有宽度、颜色和样式之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的以及什么样式；边界就是该盒子与其他网页元素之间的距离，如图4.8所示。
表4-3&网页中的盒子模型
margin-top
设置对象的上边距
margin-right
设置对象的右边距
margin-bottom
设置对象的下边距
margin-left
设置对象的左边距
border-style
设置边框的样式
border-width
设置边框的宽度
border=color
设置边框的颜色
padding-top
设置内容与上边框之间的距离
padding-right
设置内容与右边框之间的距离
padding-bottom
设置内容与下边框之间的距离
padding-left
设置内容与左边框之间的距离
用方框属性解决下面的问题。
要用html实现如图4.9所示的页面效果，该如何编写样式规则？
这个问题其实就要用到方框属性中的一些属性，首先表格有背景色，因此要用到背景色属性background；其次图4.9中的虚线，是通过方框属性中的边框属性来实现的，因此要用到边框属性；最后像&手机充值&等内容与表格的边框之间有距离，因此要用到填充属性。
图4.9中的右边框是虚线，虚线样式是用&dashed&属性值来表示的，因此图4.9中的右边框样式可以写为&border-right-style:&。其他属性表示方法类同，就不一一列举了，完整的代码如示例5所示。
&title&表格虚线框的样式
&style&&type=&text/css&&
.tableborder&{
&&&&&&&border-right-width:3
&&&&&&&border-right-color:
&&&&&&&border-right-style:
&&&&&&&padding-top:20
&&&&&&&padding-left:10
&&&&&&&background:
&table&&border=&0&&
&&&&&&td&&class=&tableborder&&手机充值
&&&&&&td&&class=&tableborder&&电子彩票
&td&&class=&tableborder&&
&td&&class=&tableborder&&数码相机
示例5在浏览器中预览效果，如图4.9所示。
用方框属性解决下面的问题。
要用html实现如图4.10所示的效果，该如何编写样式规则？
从图4.10中可以看出这里只涉及到边框属性，因此这里主要用到边框的粗细和边框的样式。因为是细边框，所以应该用&solid&属性来表示，因此图4.10中的边框样式可以写为&border-style:solid&,完整的代码如示例6所示。
&title&细边框的
&style&&type=&text/css&&
&&&&&.textborder&{
&&&&&&&&border-width:
&&&&&&&&border-style:
&form&&name=&form1&&&method=&post&&&action=&&&&
&form&&name=&fname&&&type=&text&&&class=&textborder&&&
&form&&name=&form1&&&type=&pass &&&class=&textborder&&&size=&21&&
示例6在浏览器中预览效果，如图4.10所示。
&&&&&&&&&&&图4.9&虚线框样式&&&&&&&&&&&&&&&&&&&&&&图4.10&细边框样式
&4.3.4&&&特殊样式
除了以上一些常用的样式之外，css样式表中还提供了一种特殊的样式，就是指定某个标签的个别属性的样式。这类样式中最常用的就是css控制样式。表4-4列出了4种状态的样式。
&&&&&&&&&&&&&&&&&&&表4-4&css控制样式
a:link&{color:red}
未被访问的链接样式，红