3.2 HTML常用标签
HTML常用标签是设计HTML页面的主要标签。下面分别介绍常用的HTML标签。
3.2.1 列表标签
列表是一种规定格式的文字排列方式，用于列举内容。常用的列表分为有序列表、无序列表和自定义列表。
1．有序列表
有序列表是指各列表项按一定的编号顺序显示，列表用<ol>开始，以</ol>结束，每一个列表项用<li></li>标签对定义，其语法如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
·
·
·
</ol>
在<ol>中可以使用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。
在<li>中可以使用type、value属性。其中，type属性的作用与<ol>中一致；value属性用来设定该项的编号，其后各项将以此作为起始编号而递增，其值只能是1、2、3等整数，没有默认值。
【例3-3】 有序列表实例（olTag.html）。
运行效果如图3-3所示。
图3-3 有序列表实例运行效果
2．无序列表
无序列表指各列表项之间没有顺序关系，列表项显示时前面有一个项目符号。无序列表用<ul>开始，以</ul>结束，每一个列表项同样也用<li></li>标签对定义，其语法如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
·
·
·
</ul>
在<ul>、<li>中都可以使用type属性，其中，<ul>中的type属性用于设置列表中所有列表项前的项目符号类型；<li>中的type属性用于设置当前列表项前的项目符号类型。type属性取值如下。
（1）disc：实心圆点，默认值。
（2）circle：空心圆点。
（3）square：实心正方形。
【例3-4】 无序列表实例（ulTag.html）。
<html>
<head>
<title>无序列表实例</title>
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
</head>
<body>
Java工程师必备的其他技能:
<hr>
<ul type="disc">
<li>团队精神</li>
<li type="circle">协作能力</li>
<li type="square">创新意识</li>
</ul>
<hr>
</body>
</html>
运行效果如图3-4所示。
图3-4 无序列表实例运行效果
3．自定义列表
除了上述两种列表外，在实际应用中还可以根据需要自定义列表，实现一种分两层的项目清单，其语法如下：
<dl>
<dt>第一个列表项</dt>
<dd>对第一个列表项的说明</dd>
<dt>第二个列表项</dt>
<dd>对第二个列表项的说明</dd>
·
·
·
</dl>
自定义列表用<dl>开始，以</dl>结束，给每一个列表项加上了一段说明性文字，说明性文字独立于列表项另起一行显示。其中，<dt></dt>标签对用来定义列表项；<dd></dd>标签对用来对列表项进行说明。
【例3-5】 自定义列表实例（dlTag.html）。
运行效果如图3-5所示。
图3-5 自定义列表实例运行效果
3.2.2 多媒体和超链接标签
多媒体和超链接在网页中起着非常重要的作用。多媒体有图像、视频、背景音乐等多种形式，可以使网页更加丰富多彩，超链接可以使包含不同信息的网页链接在一起。
1．插入图像
使用<img>标签可以为网页添加.gif、.jpg、.png等格式的图像，<img>的主要属性如下。
（1）src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。
（2）width：指定图像的宽度，单位为像素。
（3）height：指定图像的高度，单位为像素。
（4）hspace：指定图像水平方向的边沿空白，以免文字或其他图片过于贴近，单位为像素。
（5）vspace：指定图像垂直方向的边沿空白，单位为像素。
（6）border：指定图像边框宽度。
（7）align：当文字与图像并排放置时，指定图像与文本行的对齐方式，其属性值可取top（与文本行顶部对齐）、center（水平居中对齐）、middle（垂直居中对齐）、bottom（底部对齐，默认值）、left（图像左对齐）、right（图像右对齐）。
（8）alt：这是用于描述该图像的文字，图像不能显示时将显示该属性值；当鼠标移至图像上时，将该属性值作为提示信息显示。
【例3-6】 插入图像实例（imgTag.html）。
运行效果如图3-6所示。
图3-6 插入图像实例运行效果
备注：src=＂image/scenery.jpg＂中的image是文件夹名，即scenery.jpg在该文件夹中。
2．插入背景音乐
使用<bgsound>标签可以在网页中添加.wav、.mid、.mp3等格式的背景音乐，主要属性如下。
（1）balance：指定音乐的左右均衡。
（2）delay：指定播放延时。
（3）loop：指定音乐循环播放次数。值为-1或infinite时，表示无限次循环播放。
（4）src：指定音乐源文件的路径。
（5）volume：指定音量。
【例3-7】 插入背景音乐实例（soundTag.html）。
运行效果如图3-7所示。
图3-7 插入背景音乐实例运行效果
3．插入超链接
创建超链接是在当前页面与其他页面间建立链接，使用户可以从一个页面直接跳转到其他页面、图像或服务器。基本格式如下：
<a href="资源地址"target="目标窗口">超链接文本及图像</a>
其中，<a></a>标签对用来创建超链接，<a>的主要属性有href和target。
（1）href：指定链接地址。若是链接到网站外部，必须为URL地址；若是链接到网站内部页面，只需指明该页面的绝对路径或相对路径。
（2）target：指定显示链接目标的窗口，其值可取_blank（浏览器总在一个新打开、未命名的窗口中载入目标文档）、_parent（目标文档载入当前窗口的父窗口中）、_self（默认值，目标文档载入并显示在当前窗口中）、_top（清除当前窗口所有被包含的框架并将目标文档载入整个浏览器窗口）。
例如：
<a href="http://www.tup.tsinghua.edu.cn/"target="_blank">清华大学出版社</a>
3.2.3 表格标签
表格是一种能够有效地描述信息的组织方式，由行、列、单元格组成，可以很好地控制页面布局，所以在网页中应用非常广泛。许多网站都用多重表格来构建网站的总体布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置。
在HTML中，使用<table></table>标签对来进行一个完整表格的声明，使用<tr></tr>标签对定义表格中的一行，使用<th></th>标签对定义表格中列标题单元格，使用<td></td>标签对定义行中的一个单元格。<tr></tr>标签对只能放在<table></table>标签对之间使用，<td></td>、<th></th>标签对也只有放在<tr></tr>标签对之间才有效。表格定义基本格式如下：
1．<table>常用属性
（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．<tr>常用属性
（1）bordercolor：设置该行的外边框颜色。
（2）bgcolor：设置该行单元格的背景颜色。
（3）height：设置该行的高度。
（4）align：设置该行各单元格的内容在水平方向的对齐方式，其值可为left、right、center。
（5）valin：设置该行各单元格的内容在垂直方向的对齐方式，其值可为top、middle、bottom。
3．<td>常用属性
（1）colspan：设置单元格所占的列数，默认值为1。
（2）rowspan：设置单元格所占的行数，默认值为1。
（3）background：设置单元格背景图像。
（4）width：设置单元格宽度。
<th></th>定义的列标题的文字以粗体方式显示，其属性使用方法与<td>一致。在表格的定义语法中，也可以不使用<th>定义标题单元格。
【例3-8】 表格实例（tableTag.html）。
运行效果如图3-8所示。
图3-8 表格实例运行效果
3.2.4 表单标签
表单在网页中用来供用户填写信息，以实现服务器获得用户信息，使网页具有交互功能。一般将表单设计在一个HTML文档中，当用户填写完信息执行提交操作后，表单的内容就从客户端浏览器传送到服务器上，经过服务器上的处理程序处理后，再将用户所需信息传送回客户端浏览器上，这样网页就具有交互性。
网页中的可输入项、选择项等实现数据采集功能的控件所组成的就是表单，表单一般由表单标签、表单域、表单按钮组成。表单标签包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；表单域包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等用于用户输入和交互的控件；表单按钮包括提交按钮、复位按钮和一般按钮，用于将数据传送给服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他处理工作。
1．表单标签
<form></form>标签对用来创建一个表单，即定义表单的开始和结束位置。该标签对属于容器标签，表单里所有实现数据采集功能的控件需要定义在该标签对之间。表单标签的基本语法结构如下：
<form action="url"method="get|post"name="value"onsubmit="function"onreset=
"function"target="window"></form>
（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）单行输入域
<input>标签用来定义单行输入域，用户可在其中输入单行信息，主要属性如下。
（1）type属性：设置输入域的类型，取值如表3-1所示。
表3-1 type属性取值
（2）name属性：设置输入域的名字。
（3）value属性：设置输入域的默认值。
（4）align属性：设置输入域的位置，可取值left（靠左）、right（靠右）、middle（居中）、top（靠上）、bottom（靠底）。
（5）onclick属性：设置按下按钮后执行的脚本函数名。
2）多行输入域
<textarea></textarea>标签对用来定义多行文本输入域，主要属性如下。
（1）name属性：设置输入域的名字。
（2）rows属性：设置输入域的行数。
（3）cols属性：设置输入域的列数。
（4）wrap属性：设置是否自动换行，属性值可取off（不自动换行）、hard（自动硬回车换行，换行标记一同被传送到服务器）、soft（自动软回车换行，换行标记不会被传送到服务器）。
3）选择域
<select></select>标签对用来建立一个下拉列表，<option>标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。
（1）<select></select>标签对的主要属性如下。
①name属性：设置下拉列表的名字。
②size属性：设置下拉列表中的选项个数，默认值为1。
③multiple属性：表示下拉列表支持多选。
（2）<option>主要属性如下。
①selected属性：表示当前选项被默认选中。
②value属性：设置当前选项的值，在该项被选中之后，该项的值将被送到服务器。
3．表单按钮
<button></button>标签对用于定义提交表单内容给服务器的按钮，主要属性有type和accesskey。
（1）type属性：设置按钮类型，属性值可取button（一般按钮）、reset（复位按钮）、submit（提交按钮）。它们与<input>中同名的属性具有相同的功能。
（2）accesskey属性：设置按钮热键，即按下Alt键的同时按下该属性值所对应的键便可以快速定位到该按钮。
【例3-9】 表单实例（formTag.html）。
运行效果如图3-9所示。
图3-9 表单实例运行效果
3.2.5 框架标签
在进行网站整体结构布局时，框架也是经常被使用的一种标签，主要用来分割窗口和插入浮动窗口，使同一个浏览器窗口同时显示多个网页，如果能有效地运用将有助于提高网页的浏览效率。
1．框架结构文件格式
框架将浏览器窗口分成多个子窗口，每个子窗口可以单独显示一个HTML文档，各个子窗口也可以相关联地显示某一个内容，如可以将目录放在一个子窗口，而将文件内容显示在另一个子窗口。框架结构文件格式如下：
2．框架结构基本标签
1）<frameset></frameset>
该标签对用来定义一个框架结构容器，即用来定义网页被分割成几个子窗口，各个子窗口是如何排列的。可以嵌套在其他<frameset></frameset>标签对中实现网页多重框架结构。<frameset>常用属性包括如下。
（1）rows：在垂直方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从上到下排列，同时设置每个子窗口所占的高度。该属性值可以是百分数（子窗口高度相对页面高度的相对值）、整数（绝对像素值）或星号（*），其中星号代表那些未说明高度的空间，如果同一个属性中出现多个星号则将剩下的未被说明高度的空间平均分配。各个子窗口高度之间用逗号分隔。
（2）cols：在水平方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从左到右排列，同时设置每个子窗口所占的宽度。该属性取值方式与rows一致。
例如：
rows属性说明框架横向分割的情况，cols属性说明框架纵向分割的情况，所以，使用<frameset></frameset>标签对时，rows和cols这两个属性必须至少选择一个，否则浏览器只显示一个子窗口，即一个网页内容，<frameset></frameset>标签对也就没有起到任何作用。
（3）border：设置子窗口边框宽度。
（4）frameborder：设置子窗口是否显示边框。
（5）onload：设置框架被载入时引发的事件。
（6）onunload：设置框架被卸载时引发的事件。
2）<frame>
<frame>标签放在<frameset></frameset>之间，用来定义框架结构中某一个具体的子窗口。常用属性如下。
（1）src：设置该子窗口中将要显示的HTML文件地址，取值可以是URL地址，也可以是相对路径或绝对路径。
（2）name：设置子窗口的名字。
（3）scrolling：指定子窗口是否显示滚动条，取值可以是yes（显示）、no（不显示）或auto（根据窗口内容自动决定是否显示滚动条）。
（4）noresize：指定窗口不能调整大小，该属性直接加入标签中即可使用，不需赋值。
src和name这两个属性必须赋值。
3）<noframes></noframes>
该标签对中的内容显示在不支持框架的浏览器窗口中。标签中的内容可以是浏览器太旧，无法显示Frame功能的提示性语句，也可以是没有Frame语法的普通版本的HTML文档。这样，不支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。
3．target属性
在框架结构子窗口的HTML文档中如果含有超链接，当用户单击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。target属性常用格式如下：
<a href="目标网页地址"target="显示目标网页的子窗口名字">超链接文字</a>
如框架中定义了一个子窗口main，在main中显示jc.htm网页，则代码为
<frame src="jc.htm"name="main">
若jc.htm中有一个超链接，在单击该链接后，网页new.htm将要显示在名为main的子窗口中，则代码为
<a href="new.htm"target="main">需要链接的文本</a>
【例3-10】 框架实例（framesetTag.html）。
【例3-11】 top.html页面代码。
【例3-12】 bottom.html页面代码。
【例3-13】 right.html页面代码。
运行效果如图3-10所示。
图3-10 框架实例运行效果