第3章HTML 与CSS 简介 为了设计出美观、漂亮、赏心悦目的网站,HTML 和CSS 是必不可少的技术,将它们和 JSP 结合起来能够开发出漂亮且功能强大的动态网页。本章主要介绍网页制作的基础 知识。 本章主要内容如下所示。 (1)HTML 。 (2)CSS 。 1 HTML 页面的基本构成 3. 超文本标记语言(HypertextMarkupLanguage,HTML)是目前网络上应用最为广泛 的标记语言,也是构成网页文档的主要语言。HTML 是一种用来制作超文本文档的简单标 记语言,它不是一种真正的编程语言,只是一种标记符。通过一些约定的标签符号对文件的 内容进行标注,指出内容的输出格式,如字体大小及颜色、背景颜色、表格形式、各部分之间 逻辑关系等。当用户浏览WWW 信息时,浏览器会自动解释这些标签的含义,并按照一定 的格式在屏幕上显示这些被标记的信息。 用HTML 编写的超文本文档称为HTML 文档,它是一个放置了标签的文本文件,通 常带有html或htm 的文件扩展名,是能独立于各种操作系统平台的、可供浏览器解释浏览 的网页文件。 下面通过一个HTML 页面来了解其基本构成。页面实例运行效果如图3-1所示。 图3-1 页面实例运行效果 53 【例3-1】 唐诗欣赏页面实例(TangShiTML.html)。 唐诗欣赏页面实例

欢迎光临本网站


这是唐诗欣赏页面,欢迎你的访问!

请欣赏唐诗

 
《客中行》 
兰陵美酒郁金香 
玉碗盛来琥珀光 
但使主人能醉客 
不知何处是他乡
在上边这段代码中,一些字母或单词用<>括起来,如、等,这些称为 “标签”。标签用来分割和标记网页中的元素,以形成网页的布局、格式等,通过标签可以在 网页中加入文本、图片、声音、动画、影视等多媒体信息,还可以实现页面之间的跳转等。每 种标签的作用均不同,当用户需要对网页某处进行修改时,把标签放置在该处前面,浏览器 就知道用户希望下面的内容应如何显示。 标签分为单标签和双标签。单标签只需单独使用就能完整地表达意思,控制网页效果, 如、
、
。双标签成对使用,由一个开始标签和一个结束标签构成。开 始标签告诉Web浏览器从此处开始执行该标签所代表的功能,而结束标签告诉Web浏览 54 器在这里结束该功能,结束标签的形式是在开始标签前加上一个斜杠。如和 就是一对双标签。在单标签和双标签的开始标签里,还可以包含一些属性,以达 到个性化的效果,如<标签属性1属性2属性3…>,各属性之间无先后次序,属性也可省 略(即取默认值)。 HTML不区分大小写,如
和
都表示换行。另外,使用HTML标签时,被 使用标签不可以交错,即标签需正确进行嵌套,如
, 应改为
。 HTML标签有多种,下面先来了解基本标签。 1.页面结构标签 通过上面的例子可以看出,HTML文档分为文档头和文档体两部分。在文档头里,对 这个文档进行一些必要的定义,文档体中才是要显示在网页中的各种正文信息。通常由3 对标签来构成一个HTML文档的框架。 1) 这个标签告诉浏览器本文件是HTML文档。用于HTML文档的最前处,用 来标识HTML文档的开始;放在HTML文档的最后处,用来标识HTML文档 的结束。 2) 这个标签中的内容是文档的头部信息,说明一些文档的基本情况,如文档的标题等,其 内容不会显示在网页中。在此标签之间可使用、、等描述HTML文档相关信息的标签对。 标签用来描述HTML网页文档的属性,如日期和时间、网页描述、关键词、页 面刷新等。 例如: 属性http-equiv用于向浏览器提供一些说明信息,从而可以根据这些说明做出相应处 理。http-equiv其实并不仅仅只有说明网页的字符编码这一个作用,常用的http-equiv类型 还包括网页到期时间、默认的脚本语言、网页自动刷新时间等。 属性charset的作用是指定当前文档所使用的字符编码为UTF-8,也就是支持中文简 体字符。根据这一行代码,浏览器就可以识别出网页中的中文字符。 3) 这个标签中的内容是HTML文档的主体部分,可包含

、

、
、
等标签,它们所定义的文本、图像等将会在网页中显示出来。 2.页头标签 标签对用来设定网页标题,浏览器通常会将标题显示在浏览器窗口 的标题栏左边。标签放在标签对之间。 3.标题标签 在HTML文档中,标签可以定义不同显示效果的标题,n表示标题的 级数,取值范围为1~6,n越小,标题字号越大。 55 可以使用属性align,用于设置标题文字的对齐方式,其取值如下所示。 (1)left:左对齐。 (2)right:右对齐。 (3)center:居中对齐。 未设置该属性时,默认为左对齐。 【例3-2】 标题标签实例(title.html)。 标题标签实例

一级标题的效果

二级标题的效果

三级标题的效果

四级标题的效果

五级标题的效果
六级标题的效果
运行效果如图3-2所示。可以看出,每级标题的字体均为“黑体”。 图3-2 标题标签实例运行效果 4.格式排版标签 1)
该标签强制文本换行,但不会在行与行之间留下空行。如果把
加在

56 标签对的外部,将创建一个大的回车换行,即
前面和后面文本的行与行之间的距离比 较大;若放在

的内部,则
前面和后面文本的行与行之间的距离将比较小。 2)
该标签在网页中加入一条横跨网页的水平线,具有以下多种属性,用于设置水平线的宽 度、长度及显示效果等。 (1)size:设置水平线的粗细,默认单位是像素。 (2)width:设置水平线的宽度,默认单位是像素,也可以使用相对屏幕的百分比表示。 (3)noshade:该属性不用赋值,直接加入标签即可使用,用来取消水平线的阴影(不加 入此属性水平线默认有阴影)。 (4)align:设置水平线的对齐方式。 (5)color:设置水平线的颜色。 例如:
5.文字格式标签 标签通过设置属性来控制文字的样式、大小和颜色,属性功 能如下所示。 (1)face:设置文字样式。 (2)size:设置文字大小,值为整数,分为7个级别,默认文字大小为3磅。 (3)color:设置文字颜色。 6.段落标签

标签用来创建一个新的段落,在此标签对之间加入的文本将按照段落的 格式显示在浏览器上。

表示一个段落的开始,结尾标记

可以省略。

标签 可以有多种属性,如align属性控制其内容的对齐方式;clear属性控制图文混排方式,其取 值如下所示。 (1)left:下一段显示在左边界处的空白区域。 (2)right:下一段显示在右边界处的空白区域。 (3)center:下一段的左右两边都不允许有其他内容。 为了防止文档出错,尽量不要省略结尾标记

。 7.预定格式标签 在编辑文档时,如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式,可以 使用
标签。使用该标签时,默认字号为10磅。
8.注释标签
在编写HTML文件时,为提高文件的可读性,可以使用标签注释文
字,其语法如下: 
 
注释内容不会在浏览器中显示。

57 
3.2 HTML常用标签
本节介绍在设计HTML页面时一些常用的HTML标签。
3.2.1 列表标签及其应用实例
列表是一种规定格式的文字排列方式,用于列举内容。常用的列表分为有序列表、无序
列表和自定义列表。
1.有序列表
有序列表是指各列表项按一定的编号顺序显示,列表用
    开始,以
结束,每
一个列表项用
  • 标签定义,其语法如下: 

       

    1. 列表项1
      2.  

    2. 列表项2
      3.  
. 

     
在
      中可以使用type、start属性。其中,type属性用于设置编号的种类,其取值如
下所示。
(1)l:编号为数字,默认值,如1、2、3… 
(2)A:编号为大写英文字母,如A、B、C… 
(3)a:编号为小写英文字母,如a、b、c… 
(4)I:编号为大写罗马字符,如Ⅰ、Ⅱ、Ⅲ… 
(5)i:编号为小写罗马字符,如ⅰ、ⅱ、ⅲ… 
start属性用于设置编号的开始序号,无论type取值是什么,start值只能是1、2、3等整
数,默认值为1。
在
    1. 中可以使用type、value属性。其中,type属性的作用与
        中的一致;value 
属性用来设定该项的编号,其后各项将以此作为起始编号而递增,其值只能是1、2、3等整
数,没有默认值。
【例3-3】 有序列表实例(olTag.html)。 
 
 
有序列表实例 
 
 
 
Java 方向核心专业课程: 

           

        1. Java 程序设计
          2.  

        2. JSP 程序设计
          3.  

        3. Java Web 框架技术(Struts、Spring、Hibernate)
          4.  

        4. 数据库技术
          5.  

        

58 
 
 
运行效果如图3-3所示。
图3-3 有序列表实例运行效果
2.无序列表
无序列表指各列表项之间没有顺序关系,列表项显示时前面有一个项目符号。无序列
表用
          开始,以
        结束,每一个列表项同样也用
      1. 标签定义,其语法
如下: 

           

        • 列表项1
          •  

        • 列表项2
          •  
. 

         
在
          、
        • 中都可以使用type属性,其中,
            中的type属性用于设置列表中
所有列表项前的项目符号的类型;
          • 中的type属性用于设置当前列表项前的项目符号
的类型。type属性取值如下。
(1)disc:实心圆点,默认值。
(2)circle:空心圆点。
(3)square:实心正方形。
【例3-4】 无序列表实例(ulTag.html)。 
 
 
无序列表实例 
 
 
 
Java 方向其他专业课程: 

               

            • 计算机网络
              •  

            • 数据结构
              •  

            • 专业英语
              • 

59 

             
 
 
运行效果如图3-4所示。
图3-4 无序列表实例运行效果
3.自定义列表
除了上述两种列表外,在实际应用中还可以根据需要自定义列表,实现一种分两层的项
目清单,其语法如下: 

             

            第一个列表项
             

            对第一个列表项的说明
             

            第二个列表项
             

            对第二个列表项的说明
             
. 

             
自定义列表用
            开始,以
            结束,给每一个列表项加上了一段说明性文字,说
明性文字独立于列表项另起一行显示。其中,
            标签用来定义列表项;
             

            标签用来对列表项进行说明。
【例3-5】 自定义列表实例(dlTag.html)。 
 
 
自定义列表实例 
 
 
 
Java 方向核心专业课程介绍: 

             

            Java 程序设计
             

            该课程主要讲述…
             

            JSP 程序设计
             

            该课程主要讲述…
             

            Java Web 框架技术(Struts、Spring、Hibernate)
             

            该课程主要讲述…
            

60 

            数据库技术
             

            该课程主要讲述…
             

             
 
 
运行效果如图3-5所示。
图3-5 自定义列表实例运行效果
3.2.2 多媒体和超链接标签及其应用实例
多媒体和超链接在网页中起着非常重要的作用。多媒体有图像、视频、背景音乐等多种
形式,可以把网页更加丰富多彩,超链接可以把包含不同信息的网页链接在一起。
1.插入图像
使用标签可以为网页添加.gif、.jpg、.png等格式的图像,的主要属性如
下所示。
(1)src:指定图像的源文件路径,可以使用相对路径、绝对路径或URL。
(2)width:指定图像的宽度,单位为像素。
(3)height:指定图像的高度,单位为像素。
(4)hspace:指定图像水平方向的边沿空白,以免文字或其他图片过于贴近,单位为
像素。
(5)vspace:指定图像垂直方向的边沿空白,单位为像素。
(6)border:指定图像的边框厚度。
(7)align:当文字与图像并排放置时,指定图像与文本行的对齐方式,其属性值可取
top(与文本行顶部对齐)、center(水平居中对齐)、middle(垂直居中对齐)、bottom(底部对
齐,默认值)、left(图像左对齐)、right(图像右对齐)。
(8)alt:用于描述该图像的文字,图像不能显示时将显示该属性值;当鼠标移至图像上
时,将该属性值作为提示信息显示。

61 
【例3-6】 插入图像实例(imgTag.html)。 
 
 
插入图像实例 
 
 
 
听得到的微笑! 
< img src ="image/t2.jpg" alt="美女" width ="360" height ="200" align = 
"left"> 
 
 
运行效果如图3-6所示。
图3-6 插入图像实例运行效果
2.插入视频
使用标签可以在网页中插入视频,主要属性如下所示。
(1)src:指定视频的源文件路径。
(2)width:视频宽度。
(3)height:视频高度。
【例3-7】 插入视频实例(embedTag.html)。 
 
 
插入视频实例 
 
 
 
笨笨熊的故事! 

             
 


62 
 
运行效果如图3-7所示。鼠标未移到播放区域之上时不播放,鼠标移到播放区域之上
时将播放“笨笨熊.wmv”。
图3-7 插入视频实例运行效果
备注:如果播放视频时出现无法播放的情况,首先检查一下是否安装了播放器,其次可
以换一下浏览器再播放。有的IE浏览器版本无法播放。
3.插入背景音乐
使用标签还可以在网页中添加.wav、.mid、.mp3等格式的背景音乐。
【例3-8】 插入背景音乐实例(embedTag1.html)。 
 
 
插入背景音乐实例 
 
 
 

            传奇
             

             
歌手.王菲 

             
 
 
 
运行效果如图3-8所示。
4.插入超链接
创建超链接是在当前页面与其他页面间建立链接,使用户可以从一个页面直接跳转到
其他页面、图像或服务器。基本格式如下:

63 
图3-8 插入背景音乐实例运行效果 
超链接文本及图像 
其中,标签对用来创建超链接。的主要属性如下所示。
(1)href:指定链接地址。若是链接到网站外部页面,必须为URL地址;若是链接到网
站内部页面,只需指明该页面的绝对路径或相对路径。
(2)target:指定显示链接目标的窗口,其值可取_blank(浏览器总在一个新打开、未命
名的窗口中载入目标文档)、_parent(目标文档载入当前窗口的父窗口中)、_self(默认值,目
标文档载入并显示在当前窗口中)、_top(清除当前窗口所有被包含的框架并将目标文档载
入整个浏览器窗口)。
例如: 
学校网站 
清华大学出版社 
3.2.3 表格标签及其应用实例
表格是一种能够有效描述信息的组织方式,由行、列、单元格组成,可以很好地控制页面
布局,所以在网页中应用非常广泛。许多网站都用多重表格来构建网站的总体布局,固定文
本或图像的输出,并可以任意进行背景和前景颜色的设置。
在HTML中,使用
            标签来进行一个完整表格的声明,使用 
标签定义表格中的一行,使用定义表格中列标题单元格,使用 
标签定义行中的一个单元格。只能放在
            标签之
间使用,、也只有放在标签之间才是有效的。表

64 
格定义基本格式如下所示。 
 
. 
 
. 
 
. 
 
. 

             

             
表格第一列的标题 
表格第二列的标题
             

             
表格第一行的第一个单元格内容 
表格第一行的第二个单元格内容
             

             
表格第二行的第一个单元格内容 
表格第二行的第二个单元格内容
             
1.常用属性
(1)border:设置表格边框的宽度,值为非负整数,若为0表示边框不可见,单位为
像素。
(2)cellspacing:设置单元格边框到表格边框的距离,单位为像素。
(3)cellpadding:设置单元格内文字到单元格边框的距离,单位为像素。
(4)width:设置表格宽度。其值可为整数,单位为像素,如100表示100像素;也可以
是相对页面宽度的相对值,如20%表示表格宽度为整个页面宽度的20%。
(5)height:设置表格高度,取值方式与width一致。
(6)bgcolor:设置表格背景色。其值可以是十六进制代码,也可以是英文字母,如
silver为银色。
(7)bordercolor:设置表格边框颜色。
(8)align:设置表格在水平方向的对齐方式,其值可为left、right和center。
(9)valign:设置表格在垂直方向的对齐方式,其值可为top、middle和baseline。
2.常用属性
(1)bordercolor:设置该行的外边框颜色。
(2)bgcolor:设置该行单元格的背景颜色。
(3)height:设置该行的高度。
(4)align:设置该行各单元格的内容在水平方向的对齐方式,其值可为left、right和
center。
(5)valin:设置该行各单元格的内容在垂直方向的对齐方式,其值可为top、middle和
bottom。
3.定义的列标题的文字以粗体方式显示,其属性使用与
            常用属性
(1)colspan:设置单元格所占的列数,默认值为1。

65 
(2)rowspan:设置单元格所占的行数,默认值为1。
(3)background:设置单元格背景图像。
(4)width:设置单元格宽度。
一致,在表
格的定义语法中,也可以不使用定义标题单元格。
【例3-9】 表格实例(tableTag.html)。 
 
 
表格实例 
 
 
 

             

             
Java 方向 
软测方向 
.NET 方向 

             

             
Java 程序设计 
JSP 程序设计 
Java 程序设计 
JSP 程序设计 
C#程序设计 
ASP.NET 

             

             
Java Web 框架技术 
数据库技术 
软件测试理论 
软件测试技术 
.NET Framework 技术 
数据库技术 

             

             
 
 
运行效果如图3-9所示。
3.2.4 表单标签及其应用实例
表单在网页中用来供用户填写信息,以实现服务器获得用户信息,使网页具有交互功
能。一般是将表单设计在一个HTML文档中,当用户填写完信息执行提交操作后,表单的
内容就从客户端浏览器传送到服务器上,经过服务器上的处理程序处理后,再将用户所需要
的信息传送回客户端浏览器上,这样网页就具有了交互性。
网页中的可输入项、选择项等实现数据采集功能的控件所组成的就是表单,表单一般由

66 
图3-9 表格实例运行效果
表单标签、表单域、表单按钮组成。表单标签包含了处理表单数据所用CGI程序的URL以
及数据提交到服务器的方法;表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单
选框、下拉选择框和文件上传框等用于用户输入和交互的控件;表单按钮包括提交按钮、复
位按钮和一般按钮,用于将数据传送给服务器上的CGI脚本或者取消输入,还可以用表单
按钮来控制其他处理工作。
1.表单标签

            标签对用来创建一个表单,即定义表单的开始和结束位置。该标
签属于容器标签,表单里所有数据采集功能的控件需要定义在该标签对之间。表单标签的
基本语法结构如下: 

             
(1)action:设置服务器上用来处理表单数据的处理程序地址,处理程序可以是JSP程
序、CGI程序、ASP.NET 程序等,该属性值可以是URL 地址,也可以是电子邮件地址。
例如: 
action="http://localhost: 8080/ch03/ShopCart.jsp" 
表示当用户提交表单后,将调用服务器上的JSP页面ShopCart.jsp来处理用户的输入。
另外,采用电子邮件地址的格式是action="mailto:接收用户输入信息的邮件地址"。
例如,action="mailto:youremail@163.com",表示把用户的输入信息发送到电子邮件
地址youremail@163.com。
(2)method:设置处理程序从表单中获得信息的方式,取值可为get或post。
get方法将表单中的输入信息作为查询字符串附加在action指定的地址后(中间用“?” 
隔开)传送到服务器。查询字符串使用key="value"的形式定义,如果有多个域,中间用& 
隔开,如http://localhost:8080/ch03/ShopCart.jsp?flowerid="0169"&count="16",问号
后面的内容即为查询字符串。get方法在浏览器的地址栏中以明文形式显示表单中各个表
单域的值,对数据的长度有限制。

post方法将表单中用户输入的数据进行包装,按照HTTP中的post方式传送到服务

器,且对数据的长度基本没有限制,目前大都采用此方式。
(3)name:设置表单的名字。
(4)onsubmit、onreset:设置在单击submit或reset按钮后要执行的脚本函数名。
(5)target:设置显示表单内容的窗口名。
HTML对表单的数量没有限制,但一个页面中如果有太多的表单将不易于阅读,因此

需要合理设置。

2.表单域
1)单行输入域
标签用来定义单行输入域,用户可在其中输入单行信息。主要属性如下
所示。
(1)type:设置输入域的类型,取值如表3-1所示。

表3-
1 
单行输入域类型

type属性取值

 

 

 

 

 

 

 

 

输入域类型

单行文本输入区域,e与mah属性用来定义此区

sizxlengt

域显示的尺寸大小与输入的最大字符数

将表单内容提交给服务器的按钮

将表单内容全部清除,重新填写的按钮

一个复选框,d属性用来设置该复选框默认状态是

checke

否被选中

隐藏区域,用户不能在其中输入,用来预设某些要传送的
信息

使用图像来代替submit按钮,图像的源文件名由src属
性指定,用户单击后,表单中的信息和单击位置的X、
Y 
坐标一起传送给服务器

输入密码的区域,当用户输入密码时,区域内将会用*代
替用户输入的内容

单选按钮,d属性用来设置该单选按钮默认状态是

checke

否被选中

(2)name:设置输入域的名字。

(3)value:设置输入域的默认值。

(4)align:设置输入域位置,可取值为left(靠左)、right(靠右)、middle(居中)、top(靠
上)和botom(靠底)。

(5)onclick属性:设置按下按钮后执行的脚本函数名。

2)多行输入域

标签对用来定义多行文本输入域,主要属性如下所示。

(1)name:设置输入域名字。

(2)rows:设置输入域的行数。

(3)cols:设置输入域的列数。

67 


68 
(4)wrap:设置是否自动换行,属性值可取off(不自动换行)、hard(自动硬回车换行,换
行标记一同被传送到服务器)、soft(自动软回车换行,换行标记不会被传送到服务器)。
3)选择域
标签对用来建立一个下拉列表,