1.2.4 XHTML基本应用
XHTML的基本应用包括表格的制作、表单的应用和超链接的应用等。
1.表格的制作
一个表格由表头、行和单元格组成，常用于组织、显示信息或安排页面布局。一个表格通常由<table>标记开始，到</table>标记结束。表格的内容由<tr>、<th>和<td>标记定义。<tr>说明表的一个行，<th>说明表的列数和相应栏目的名称，<td>用来填充由<tr>和<th>标记组成的表格。
一个典型的表格格式如下：
<table属性="值"…>
<caption>表格标题文字</caption>
<tr属性="值"…>
<th>第1个列表头</th> <th>第2个列表头</th>… <th>第n个列表头</th>
</tr>
<tr>
<td属性="值"…>第1行第1列数据</td>
<td>第1行第2列数据</td>
…
<td>第1行第n列数据</td>
</tr>
……
<tr>
<td>第n行第1列数据</td>
<td>第n行第2列数据</td>
…
<td>第n行第n列数据</td>
</tr>
</table>
（1）<table>标记的属性
用<table>标记创建表格时可以设置如下属性。
● align：指定表格的对齐方式，取值为left（左对齐）、right（右对齐）、center（居中对齐），默认值为left。
● background：指定表格背景图片的URL地址。
● bgcolor：指定表格的背景颜色。
● border：指定表格边框的宽度（像素），默认值为0。
● bordercolor：指定表格边框的颜色，border不等于0时起作用。
● bordercolordark：指定3D边框的阴影颜色。
● bordercolorlight：指定3D边框的高亮显示颜色。
● cellpadding：指定单元格内数据与单元格边框之间的间距。
● cellspacing：指定单元格之间的间距。
● width：指定表格的宽度。
（2）<tr>标记的属性
表格中的每一行都是由<tr>标记来定义的，它有如下属性。
● align：指定行中单元格的水平对齐方式。
● background：指定行的背景图像文件的URL地址。
● bgcolor：指定行的背景颜色。
● bordercolor：指定行的边框颜色，只有<table>标记的border属性不等于0时起作用。
● bordercolordark：指定行的3D边框的阴影颜色。
● bordercolorlight：指定行的3D边框的高亮显示颜色。
● valign：指定行中单元格内容的垂直对齐方式，取值为top、middle、bottom、baseline（基线对齐）。
（3）<th>和<td>标记的属性
表格的单元格通过<td>标记来定义，标题单元格可以使用<th>标记来定义，<th>和<td>标记的属性如下。
● align：指定单元格的水平对齐方式。
● bgcolor：指定单元格的背景颜色。
● bordercolor：指定单元格的边框颜色，只有<table>标记的border属性不等于0时起作用。
● bordercolordark：指定单元格的3D边框的阴影颜色。
● bordercolorlight：指定单元格的3D边框的高亮显示颜色。
● colspan：指定合并单元格时一个单元格跨越的表格列数。
● rowspan：指定合并单元格时一个单元格跨越的表格行数。
● valign：指定单元格中文本的垂直对齐方式。
● nowrap：若指定该属性，则要避免Web浏览器将单元格里的文本换行。
【例1.5】创建一个统计学生课程成绩的表格。
新建1_5ex.html文件，输入以下代码：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>学生成绩显示</title>
</head>
<body>
<table align="center" border="1" bordercolor="red">
<caption><font size="5" color="blue">学生成绩表</font></caption>
<tr bgcolor="#CCCCCC">
<th width="80">专业</th>
<th width="80">学号</th>
<th width="80">姓名</th>
<th width="90">计算机导论</th>
<th width="90">数据结构</th>
</tr>
<tr>
<td rowspan="3"><font color="blue">计算机</font></td>
<td>081101</td>
<td>王 林</td>
<td align="center">80</td>
<td align="center">78</td>
</tr>
<tr>
<td>081102</td>
<td>程 明</td>
<td align="center">90</td>
<td align="center">60</td>
</tr>
<tr>
<td>081104</td>
<td>韦严平</td>
<td align="center">83</td>
<td align="center">86</td>
</tr>
<tr>
<td><font color="green">通信工程</font></td>
<td>081201</td>
<td>王 敏</td>
<td align="center">89</td>
<td align="center">100</td>
</tr>
</table>
</body>
</html>
其运行结果如图1.10所示。
图1.10 1_5ex.html运行结果
2.表单的应用
表单用来从用户（站点访问者）处收集信息，然后将这些信息提交给服务器处理。表单中可以包含各种交互的控件，如文本框、列表框、复选框和单选按钮等。用户在表单中输入或选择数据后提交，该数据就会提交到相应的表单处理程序，以各种不同的方式进行处理。
表单定义格式如下：
<form定义>
[<input定义 />]
[<textarea定义>]
[<select定义>]
[<button定义 />]
</form>
（1）表单标记<form>
在XHTML语言中，表单内容用<form>标记来定义，格式如下：
<form属性="值"…事件="代码">…</form>
<form>标记的常用属性如下。
● name：指定表单的名称。命名表单后可以使用脚本语言来引用或控制该表单。
● id：指定表示该标记的唯一标识码。
● method：指定表单数据传输到服务器的方法，取值是post或get。post表示在HTTP请求中嵌入表单数据；get表示将表单数据附加到该页请求的URL中。例如，某表单提交一个文本数据id值至page.htm页面。如果以post方法提交，新页面的URL为“http://localhost/page.htm”，而若以get方式提交相同表单，则新页面的URL为“http://localhost/page.htm?id=...”。
● action：指定接收表单数据的服务器端程序或动态网页的URL地址。提交表单之后，即运行该URL地址所指向的页面。
● target：指定目标窗口。target属性的取值有_blank、_parent、_self和_top，分别表示：在未命名的新窗口中打开目标文档；在显示当前文档的窗口的父窗口中打开目标文档；在提交表单所使用的窗口中打开目标文档；在当前窗口中打开目标文档。
<form>标记的主要事件如下。
● onsubmit：提交表单时调用的事件处理程序。
● onreset：重置表单时调用的事件处理程序。
（2）表单输入控件标记<input>
表单输入控件的格式如下：
<input属性="值"… 事件="代码"/>
为了让用户通过表单输入数据，在表单中可以使用<input>标记来创建各种输入型表单控件。表单控件通过<input>标记的type属性设置成不同的类型，包括单行文本框、密码框、隐藏域、复选框、单选按钮、按钮和文件域等。
① 单行文本框。在表单中添加单行文本框可以获取站点访问者提供的一行文本信息，格式如下：
<input type="text" 属性="值"… 事件="代码"/>
单行文本框的属性如下。
● name：指定单行文本框的名称，通过它可以在脚本中引用该文本框控件。
● id：指定表示该标记的唯一标识码，通过id值就可以获取该标记对象。
● value：指定文本框的值。
● defaultvalue：指定文本框的初始值。
● size：指定文本框的宽度。
● maxlength：指定允许在文本框内输入的最大字符数。
● form：指定所属的表单名称（只读）。
例如，要设置如图1.11所示的文本框可以使用以下代码：
姓名：<input type="text"size="10"value="王小明"/>
图1.11 文本框
单行文本框的方法如下
● Click()：单击该文本框。
● Focus()：得到焦点。
● Blur()：失去焦点。
● Select()：选择文本框的内容。
单行文本框的事件如下。
● onclick：单击该文本框执行的代码。
● onblur：失去焦点执行的代码。
● onchange：内容变化执行的代码。
● onfocus：得到焦点执行的代码。
● onselect：选择内容执行的代码。
② 密码框。密码框也是一个文本框，当访问者输入数据时，大部分浏览器会以星号显示密码，使别人无法看到输入内容，如图1.12所示，格式如下：
<input type="password" 属性="值"…事件="代码" />
图1.12 密码框
其中，属性、方法和事件与单行文本框基本相同，只是密码框没有onclick事件。
③ 隐藏域。在表单中添加隐藏域是为了使访问者看不到隐藏域的信息。每个隐藏域都有自己的名称和值。当提交表单时，隐藏域的名称和值就会与可见表单域的名称和值一起包含在表单的结果中，格式如下：
<input type="hidden" 属性="值"…/>
隐藏域的属性、方法和事件与单行文本框基本相同，只是没有defaultvalue属性。
④ 复选框。在表单中添加复选框是为了让站点访问者选择一个或多个选项，格式如下：
<input type="checkbox" 属性="值"…事件="代码"/>选项文本
复选框的属性如下。
● name：指定复选框的名称。
● id：指定表示该标记的唯一标志码。
● value：指定选中时提交的值。
● checked：如果设置该属性，则第一次打开表单时该复选框处于选中状态。被选中时其值为TRUE，否则为FALSE。
● defaultchecked：判断复选框是否定义了checked属性。已定义时其值为TRUE，否则为FALSE。
例如，要创建如图1.13所示的复选框，可以使用如下代码：
兴趣爱好： <input type="checkbox" name="box" checked="checked"/>旅游 <input type="checkbox" name="box" checked="checked"/>篮球 <input type="checkbox" name="box"/>上网
图1.13 复选框
复选框的方法如下。
● Click()：单击该复选框。
● Focus()：得到焦点。
● Blur()：失去焦点。
复选框的事件如下。
● onclick：单击该复选框执行的代码。
● onblur：失去焦点执行的代码。
● onfocus：得到焦点执行的代码。
⑤ 单选按钮。在表单中添加单选按钮是为了让站点访问者从一组选项中选择其中一个选项。在一组单选按钮中，一次只能选择一个，格式如下：
<input type="radio" 属性="值" 事件="代码"…/>选项文本
单选按钮的属性如下。
● name：指定单选按钮的名称，若干名称相同的单选按钮构成一个控件组，在该组中只能选择一个选项。
● value：指定提交时的值。
● checked：如果设置了该属性，当第一次打开表单时该单选按钮处于选中状态。
单选按钮的方法和事件与复选框相同。
当提交表单时，该单选按钮组名称和所选取的单选按钮指定值都会包含在表单结果中。
例如，要创建如图1.14所示的单选按钮，可以使用如下代码：
<input type="radio"name="rad" value="1"checked="checked"/>男 <input type="radio"name="rad" value="0"/>女
图1.14 单选按钮
⑥ 按钮。使用<input>标记可以在表单中添加三种类型的按钮：“提交”按钮、“重置”按钮和“自定义”按钮，格式如下：
<input type="按钮类型" 属性="值"onclick="代码"/>
其中，事件oncilck的值是单击按钮后执行的脚本代码。
根据type值的不同，按钮的类型也不一样。
● type="submit"：创建一个“提交”按钮。单击该按钮，表单数据（包括提交按钮的名称和值）会以ASCII文本形式传送到由表单的action属性指定的表单处理程序中。一般来说，一个表单必须有一个“提交”按钮。
● type="reset"：创建一个“重置”按钮。单击该按钮，将删除所有已经输入表单中的文本并清除所有选择。如果表单中有默认文本或选项，将会恢复这些值。
● type="button"：创建一个“自定义”按钮。在表单中添加自定义按钮时，必须为该按钮编写脚本以使按钮执行某种指定的操作。
按钮的其他属性还有name（按钮的名称）和value（显示在按钮上的标题文本），例如：
<input type="submit" name="bt1 value="提交"/> <input type="reset" name="bt2" value="重置"/> <input type="button" name="bt3" value="自定义"/>
⑦ 文件域。文件域由一个文本框和一个“浏览”按钮组成，用户可以在文本框中直接输入文件的路径和文件名，或单击“浏览”按钮从磁盘上查找、选择所需文件，格式如下：
<input type="file" 属性="值"…>
文件域的属性有name（文件域的名称）、value（初始文件名）和size（文件名输入框的宽度）。
例如，要创建如图1.15所示的文件域（普通IE浏览器的显示效果），可以使用如下代码：
<input type="file"name="fl" size="20"/>
图1.15 文件域
（3）其他表单控件
① 滚动文本框。在表单中添加滚动文本框是为了使访问者可以输入多行文本，格式如下：
<textarea属性="值"…事件="代码"…>初始值</textarea>
说明：<textarea>标记的属性有name（滚动文本框控件的名称）、rows（控件的高度，以行为单位）、cols（控件的宽度，以字符为单位）和readonly（滚动文本框中的内容是否能被修改）。
滚动文本框的其他属性、方法和事件与单行文本框基本相同。
例如，要创建如图1.16所示的滚动文本框（普通IE浏览器的显示效果），可以使用如下代码：
<meta http-equiv="content-type" content="text/html; charset=gb2312"> <textarea name="ta"rows="8"cols="20"readonly="readonly">这是本文本框的初始内容，是只读的，用户无法修改 </textarea>
图1.16 滚动文本框
② 选项选单。表单中选项选单（下拉菜单）的作用是使访问者从列表或选单中选择选项，格式如下：
<select name="值" size="值" [multiple ="multiple"]>
<option [selected ="selected"] value="值">选项1</option>
<option [selected ="selected"] value="值">选项2</option>
…
</select>
其中：
● name：指定选项选单控件的名称。
● size：指定在列表中一次可看到的选项数目。
● multiple：指定允许做多项选择。
● selected：指定该选项的初始状态为选中。
例如，要创建如图1.17所示的选项选单，可以使用如下代码：
学历：<select name="se" size="1" >
<option>研究生</option>
<option selected="selected">大学</option>
<option>高中</option>
<option>初中</option>
<option>小学</option>
</select>
图1.17 选项选单
③ 对表单控件进行分组。可以使用<fieldset>标记对表单控件进行分组，将表单划分为更小、更易于管理的部分，格式如下：
<fieldset>
<legend>控件组标题</legend>
组内表单控件
</fieldset>
【例1.6】制作一个学生个人资料的表单，包括姓名、学号、性别、出生日期、所学专业、选修课程、备注和兴趣等信息项。要求综合运用前面所讲的各类表单控件，使得页面简洁美观。
创建文件1_6stu.html，输入以下代码：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>学生个人信息</title>
</head>
<body>
<form name="form1" method="post" action="xsServlet">
<fieldset style="width:450px" align="center">
<legend><b>学生个人信息</b></legend>
<fieldset style="width:400px" align="left">
<legend><b>基本资料</b></legend>
<table width="400" border="0" align="center" bgcolor="#CCFFCC">
<tr>
<td width="120">学号：</td>
<td><input name="XH" type="text" value="081101"></td>
</tr>
<tr>
<td>姓名：</td>
<td><input name="XM" type="text" value="王林"></td>
</tr>
<tr>
<td>性别：</td>
<td><input name="SEX" type="radio" value="男" checked="checked">男
<input name="SEX" type="radio" value="女">女</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input name="Birthday" type="text" value="1989-05-06"></td>
</tr>
</table>
</fieldset>
<fieldset style="width:400px" align="left">
<legend><b>详细资料</b></legend>
<table width="400" border="0" align="center" bgcolor="#CCFFFF">
<tr>
<td>专业：</td>
<td><select name="ZY">
<option>计算机</option>
<option>软件工程</option>
<option>信息管理</option>
<option>通信工程</option>
<option>信息网络</option>
</select></td>
</tr>
<tr>
<td>选修课程：</td>
<td><select name="KC" size="3" multiple="multiple">
<option selected>计算机导论</option>
<option selected>数据结构</option>
<option>数据库原理</option>
<option>操作系统</option>
<option>计算机网络</option>
</select></td>
</tr>
<tr>
<td>备注：</td>
<td><textarea name="BZ">团员</textarea></td>
</tr>
<tr>
<td>兴趣：</td>
<td><input name="XQ" type="checkbox" value="听音乐" checked="checked" >听音乐
<input name="XQ" type="checkbox" value="看小说">看小说
<input name="XQ" type="checkbox" value="上网" checked="checked">上网</td>
</tr>
</table>
</fieldset>
<input type="submit" name="BUTTON1" value="提交" align="center">
<input type="reset" name="BUTTON2" value="重置" align="center">
</fieldset>
</form>
</body>
</html>
运行结果如图1.18所示。
图1.18 1_6stu.html运行结果
3.超链接的应用
在网页中，超链接通常以文本或图像形式呈现。当鼠标指针指向网页中的超链接时，会变成手的形状。单击超链接，浏览器会按照超链接所指示的目标载入另一个网页，或者跳转到同一网页的其他位置，格式如下：
<a属性="值"…>超链接内容</a>
按照目标地址的不同，超链接分为文件链接、锚点链接和邮件链接。
（1）文件链接
文件链接的目标地址是网页文件，目标网页文件可以位于当前服务器或其他服务器上。超链接使用<a>标记来创建，其常用的属性如下。
● href：指定目标地址的URL，这是必选项。
● target：指定窗口或框架的名称。该属性指定将目标文档在指定的窗口或框架中打开。如果省略该属性，则在当前窗口中打开。target属性的取值可以是窗口或框架的名称，也可以是如下保留字。
_blank：未命名的新浏览器窗口。
_parent：父框架或窗口。
_self：所在的同一窗口或框架。
_top：整个浏览器窗口中，并删除所有框架。
● title：指定超链接时所显示的标题文字，例如：
<a href="http://www.qq.com">腾讯</a> <a href="1_6stu.html">链接到本文件夹中的1_6stu.html文件</a> <a href="../index.html">链接到上一级文件夹中的index.html文件</a> <a href="image/tp.jpeg">链接到图片</a> <a href="http://www.163.com" title="图片链接"><img src=" image/tp.jpg " /></a>
（2）锚点链接
锚点链接的目标地址是网页中的一个位置。创建锚点链接时，要在页面的某一处设置一个位置标记（锚点），并给该位置指定一个名称，以便在同一页面或其他页面中引用。
要创建锚点链接，首先要在页面中用<a>标记为要跳转的位置命名，例如，在1_6stu.html页面中进行如下设置：
<a id="xlxq"></a>
说明：<a>和</a>标记之间不要放置任何文字。
创建锚点后如果在同一页面中要跳转到名为“xlxq”的锚点处，可以使用如下代码：
<a href="#xlxq">去本页面的锚点处</a>
如果要从其他页面跳转到该页面的锚点处，可以使用如下代码：
<a href="1_6stu.html #xlxq">去该页面的锚点处</a>
（3）邮件链接
通过邮件链接可以启动电子邮件客户端程序，并由访问者向指定地址发送邮件。创建邮件链接也使用<a>标记，该标记的href属性由三部分组成：电子邮件协议名称mailto，电子邮件地址，可选的邮件主题（其形式为“subject=主题”）。前两部分之间用冒号分隔，后两部分之间用问号分隔，例如：
<a href="mailto:163@163.com?subject=XHTML教程">当前教程答复</a>
当访问者在浏览器窗口中单击邮件链接时，会自动启动电子邮件客户端程序，并将指定的主题填入主题栏中。
【例1.7】使用<a>标记在【例1.1】网页上创建超链接。
（1）准备
上网搜集南京师范大学徽标（njnu-logo.jpg）、东南大学主页标头图片（seu.gif）及南京师范大学主页（njnu.htm），将它们保存在“桌面\XHTML”文件夹下。
（2）编辑XHTML文档
打开【例1.1】的源文档1_1njnu.html，修改如下：
<!DOCTYPE html
…>
<html>
<head>
…
</head>
<body background="njnu.jpg" onload="myp()">
<a href="http://www.nju.edu.cn">南京大学</a>
<a href="seu.gif">东南大学</a></p>
<div align="center">
…
</div>
<p><a href="njnu.htm"><img src="njnu-logo.jpg"></a></p>
</body>
</html>
（3）运行
运行文件，将显示如图1.19所示的页面。
图1.19 在页面上增加超链接
可以看到，图1.19的页面上多了三个超链接：“南京大学”和“东南大学”两个文字链接、南京师范大学徽标图片链接。可以试着单击这些链接，看看它们都去往哪里。