学习内容
Ø 表格的作用和制作
Ø 表单的制作
入门视频课：H5和JAVASCRIPT实战教程
能力目标
Ø 掌握表格的创建
Ø 掌握设置表格的常用属性；
Ø 理解表单的作用
Ø 熟练掌握表单常用元素
目标：
本章简介
表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量网站广泛应用，例如新闻列表、商品显示等。
除此之外，网站中经常有很多页面的信息需要填写并提交给服务器，例如论坛注册时需填写注册信息、登陆时需提交登陆用户名和密码等。这种由用户填写并提交给服务器的页面元素称为表单，表单在页面设计中主要用于收集和提交客户端的信息，完成客户端与服务器的交互。
本章将学习如何在页面中创建一个表格以及表格的基本操作，例如合并单元格、使用背景图像美化表格、创建表单以及表单元素的基本用法。最后，通过举例讲解表格与表单的综合应用。
核心技能部分
1.1 表格基础表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。
1.1.1 表格的基本结构先让我们来看一看表格的最基本的结构。表格是由指定数目的行和列组成，如图2.1.1所示。文字或图片按照相应的列或行进行分类和显示。
图2.1.1 基本表格结构
在HTML中，用于创建表格的基本标签如下:
1.
… 标签用于在HTML中创建表格，它包含表名和表格本身内
容的代码。表格里面包含行，行中包含单元格。
2.
…标签用于在表格中定义行，要嵌套在标签中使用。多个行结合在一起就构成一个表格。表格的每一行都用标签表示，并用相应的标签结束
3.
标签定义。td是“表格数据( TableData )”的英文缩写。标签内。border属性是最常用的属性，该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。
4. 用于创建表格的其他标签
(1)
标签用于定义表格的标题。该标签必须紧随
表格的每一行又有若干表格单元格，用
. . . 标签定义一个列，嵌套于 标签之后，且每个表格只能定义一个标题。通常将标题置于表格之上的居中位置。
(2)
标签内。1.1.2 创建表格
所有的表格都包括3个基本标签，即表格标签
标签用于定义表格内的表头单元格，其显示的文字效果通常采用粗体居中。大多数表格都包含一行或一列表头，用于说明某一列或一行数据的属性类别，此时可以使用 标签来设置。 标签必须嵌套在 … 、行标签...和单元格标签...。可以说，在页面中如果要创建一个完整的表格，至少要包含这3对标签。
创建表格语法：
table>
<table>
单元格
创建表格时，一般情况下分3步:
第一步:创建表格标签… 。
第二步:在表格标签… 里创建行标签...，可以有多行。
第三步:在行标签...里创建单元格标签，可以有多个单元格。
如示例2.1所示为在页面中添加一个2行3列的表格的代码。
示例2.1
<html>
创建表格
第一行单元格1 第一行单元格2 第一行单元格3 第二行单元格1 第二行单元格2 第二行单元格3
html>
示例2.1的运行结果如图2.1.2所示。
图2.1.2 创建表格
1.1.3 表格的属性1. 用于设置表格的尺寸和边框的属性
如果不指定表格的高度和宽度，浏览器就会根据表格里的内容自动调整高度和宽度。如果不指定表格边框的宽度((border属性)，则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度，又想设置表格边框的宽度，那么就得设置表格的高度、宽度和边框属性。
语法：
其中，表格的宽度和高度可以用像素来表示，也可以用百分比(与浏览器当前窗口相比的大小比例)来表示。表格边框宽度只能用像素来表示。例如:表示一个宽为200像素，高为100像素的表格。 表示一个宽为当前浏览器窗口宽度的50%，高为当前浏览器窗口高度的25%的表格。
示例2.2
<html>
表格的尺寸和边框
第一行单元格1 第一行单元格2 第一行单元格3 第二行单元格1 第二行单元格2 第二行单元格3
html>
示例2.2运行结果如图2.1.3所示。
图2.1.3 表格的尺寸和边框
2. 设置表格背景属性
(1) 整个表格背景
表格背景包括表格的背景颜色和背景图像的设置，表格的背景颜色属性bgcolor是针对整个表格的，表格的背景图像属性background也是针对整个表格的，背景图像会令表格更加美观、更加活泼生动。
(2) 表格单行背景
不仅可以对表格整体设置背景，还可以对单独一行设置背景色，行的bgcolor颜色可以覆盖的bgcolor或background属性。
(3) 单元格背景
不仅可以对表格中行设置背景色，还可以对表格中每一个单元格设置背景色或背景图片，单元格的bgcolor颜色可以覆盖行的bgcolor属性。
示例2.3
<html>
表格的尺寸和边框
第一行单元格1 第一行单元格2 第一行单元格3 第二行单元格1 第二行单元格2 第二行单元格3 第三行单元格1 第三行单元格2 第三行单元格3
html>
示例2.3的运行结果如图2.1.4所示。
图2.1.4 表格背景
3. 设置对齐方式属性
为了美观大方，表格中的数据一般需要设置对齐方式。
设置表格、行或列的对齐方式，修改align属性为right(右对齐)、center(居中)，left(左对齐)就可以了，默认为“左对齐”。
示例2.4
<html>
表格的对齐方式
第一行单元格1 第一行单元格2 第一行单元格3 第二行单元格1 第二行单元格2 第二行单元格3 第三行单元格1 第三行单元格2 第三行单元格3
html>
示例2.4运行结果如图2.1.5所示。
图2.1.5 表格的对齐方式
一般情况下数字是右对齐，性别居中对齐，姓名等内容左对齐。
1.1.4 跨多行和多列的表格大部分情况下表格都不是整齐划一的，例如：学生信息表，第一行是表格的标题，这就需要标题横跨学生信息表的所有列；还有一种情况是需要跨行的，跨列表格如图2.1.6所示。
图2.1.6 跨列表格
1. 跨行和跨列表格的概念
有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。
2. 跨多列的表格
跨多列指的是在水平方向上跨多个单元格，通过设置colspan这个属性来实现的。
示例2.5
<html>
跨行和跨列的表格
联系人薄 姓名 电话 张三 13512345678 68788898 李四 13888888888 66666666
html>
示例2.5运行结果如图2.1.7所示。
图2.1.7 跨列的表格
3. 跨多行的表格
单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行，设置rowspan属性实现。
示例2.6
<html>
跨行和跨列的表格
联系人薄 姓名 张三 电话 13512345678 68788898 姓名 张三 电话 13512345678 68788898
html>
示例2.6运行结果如图2.1.8所示。
图2.1.8 跨多行的表格
1.1.5 表格的嵌套表格内部可以再使用大部分HTML标签从而实现丰富多次的表格。表格还可以嵌套使用，嵌套的表格经常用于设计页面布局。如下图的表格嵌套。
图2.1.9表格的嵌套
示例2.7
<html>
嵌套的表格
这是一个段落。
这是另一个段落。
这个单元包含一个表格：
内部表格 内部表格
这个单元包含一个列表：
- 苹果
- 香蕉
- 菠萝
HELLO
html>
示例2.7运行结果如图2.1.10所示。
图2.1.10表格的嵌套
1.2 表单用户经常在网上看到一些会员注册页面、用户登陆页面、网上调查问卷页面、搜索工具页面等，这些页面是什么做的呢?不敢说完全是用表单做的，但肯定至少包含有表单。可见表单主要用来收集客户端相关信息，使网页具有交互功能。本节主要讨论如何使用HTML来创建表单，然后向表单中添加表单元素。网页中的表单用途很广，而且还在不断发展。下面我们就列举一些典型的表单应用：
Ø 在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。
Ø 搜集客户订单信息，如果想在线购买一本书，则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。
Ø 收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷，提供反馈信息。这些反馈信息除了维系良好的客户关系外，它还有助于改进和提高网站的服务质量，从而使网站的服务更具人性化，吸引更多的浏览者。
Ø 为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到想要的信息，比较著名的搜索网站：谷歌((http://www.google.com)、百度(http://www.baidu.com)等。
如图2.1.11就是一个典型的表单。
图2.1.11 典型的表单
1.2.1 表单包含的元素创建表单后，就可以在表单中放置元素以接受用户的输入。这些元素通常放在标签对之间一起使用，也可以在表单之外用来创建用户界面。在网上冲浪时，我们经常会见到一些常用的元素，例如：让用户输入姓名的单行文本框，让用户输入密码的密码框，让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。不同的表单元素有不同的用途。如果要求用户输入的仅仅是一些文字信息，如“姓名”、“备注”、“留言”等，一般使用单行文本框或多行文本框。如果要求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框，如图2.1.10中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些元素。如果要把填写好的表单信息提交给服务器，一般使用【提交】按钮，如图2.1.10中的【提交】按钮。除此之外，还有一些不太常用的表单元素，在这里就不一一列举了。
1.2.2 标签标签用于创建 HTML文档中的表单。标签除了可以包含表单字段元素之外，还可以包含文本、图像以及其他的HTML元素。
一个表单可以向 Web服务器传递多个信息，但每个信息都需要有唯一的名称标识。因此，表单中的每一个表单元素都应有一个 name属性，用于指定表单元素的名称。这样 Web 服务器可以根据表单元素的名称来获取客户端传递给服务器的信息，未设置name属性的表单元素将不会被提交。如下图淘宝网的登录表单。
图2.1.12 淘宝网的登录表单
表2-1-1标签的属性
属性
说明
action
此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为：action= “URL”
method
此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法(用post方法还是用get方法)。如果值为get，浏览器将创建一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL中指定的处理程序，以进行处理。如果将值指定为post，表单上的数据会作为一个数据块发送到处理程序，而不使用请求字符串。语法为：method = (get | post)
1.2.3 表单元素的统一属性网页中的表单由许多不同的表单元素组成，这些表单元素各自都有很多属性，下面就把这些表单元素中的一些常用的属性作一个统一的介绍。下面给出了表单元素的统一格式：
<form action="register.action">
form>
元素定义要在表单中显示的控件类型和外观。此元素包括的属性见表2-1-2
表2-1-2元素的属性
属性
说明
type
此属性指定表单元素的类型。可用的选项有:text, password, checkbox, radio,
submit, reset, file, hidden, image和button。默认选择为text
name
此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按名称来标识它们，如textl, text2等。名称属性的作用域为form元素内
value
此属性是可选属性，它指定表单元素的初始值。
size
此属性指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位
maxlength
此属性用于指定可在text或password元素中输入的最大字符数。默认为无限大
1.2.4 表单元素逐一介绍1. 单行文本框
在表单中最常用最常见的表单输入元素就是文本框(text)，它提供给用户输入单行文本信息，例如用户名的输入框。若要在文档的表单里创建一个文本框，将元素的type属性设为text就可以了。
2. 密码框
用于在表单中添加密码输入区域，浏览器将密码框中的每个字符都显示为星号 (*)使输入的容不可见。若要在文档的表单里创建一个密码框，将元素的type属性设为password就可以了。
示例2.8
<html>
表单元素
用户名 密码
html>
示例2.8在浏览器中的运行结果如图2.1.13所示。
图2.1.13 单行文本框和密码框
3. 多行文本框
当我们要在网页中输入两行或两行以上的文本时，怎么办?显然，前面学过的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是
语法：
初始值
示例2.9
<html>
表单元素
自我介绍
html>
示例2.9在浏览器中运行结果如图2.1.14所示。
图2.1.14 多行文本框
4. 单选按钮
将元素的type属性设为radio就可以创建一个单选按钮。单选按钮控件用于一组相互排斥的值，组中的每个单选按钮必须具有相同的名称，用户一次只能选择一个选项。单选按钮需要一个显式的value属性。
示例2.10
<html>
表单元素
性别 男
女
html>
示例2.10在浏览器中的运行结果如图2.1.15所示。
图2.1.15 单选按钮
5. 复选框
将元素的type属性设为checkbox就可以创建一个复选框。复选框用于站点访问者从一个列表项目中选择一项或多项内容，例如提交个人爱好信息。如果某信息有多个复选框，可以将它们命名为相同的名称，这样便于客户端脚本编程时访问。当然，也可以用不同的名称命名。属性checked可用于设置复选框的选中状态，只有当复选框为选中状态时，浏览器才会将选中的复选框的值和 name属性一起提交给服务器，否则不会提交任何复选框的内容。
示例2.11
<html>
表单元素
爱好 看书
看电影
旅游
html>
示例2.11在浏览器中的运行结果如图2.1.16所示。
图2.1.16 多选框
6. 下拉列表框
下拉列表框用于帮助用户快速、准确地选择一些选项，通过和标签元素来实现。标签创建可供选择的下拉列表，标签创建列表中的选项，使用 selected属性可以设置下拉列表的默认选项。
示例2.12
<html>
表单元素
地址
北京
上海
广州
html>
示例2.12在浏览器中运行结果如图2.1.17所示。
图2.1.17 下拉列表框
7. 按钮
在表单中按钮可以分为4类，分别为普通按钮、提交按钮、重置按钮和图形按钮。普通按钮由用户通过客户端脚本语言自定义动作；提交按钮用于将当前所在表单中的信息提交给指定服务器程序；重置按钮将当前所在表单中的元素值设置为创建表单时的初始值；图形按钮的功能类似于提交按钮，可用于替代提交按钮，提高视觉的友好性和可视性。
示例2.13
<html>
表单元素
html>
示例2.13在浏览器中运行结果如图2.1.18所示。
图2.1.18 按钮
8. 文件域
文件域的作用是便于Web浏览器通过form表单向 Web 服务器上传文件。使用文件域时，浏览器将自动生成一个单行文本框和一个“浏览”按钮，供用户选择上传到服务器的文件。
应用以上所有表单元素的完整示例见示例2.19。
示例2.14
<html>
表单
用户名
密码 重复密码 性别 男
女
爱好 看书
看电影
旅游
地址
北京
上海
广州
自我介绍 上传头像
html>
示例2.14运行结果如图2.1.19所示。
2.1.19表单
通常情况下，为了保证表单的格式整齐、清晰，在创建表单时，可以使用表格搭建页面的框架。同时页面使用多种元素和设置，比如图片、背景等让页面丰富多彩、图文并茂并有和服务器交互能力，实现动态网站。
本章总结
Ø HTML表格的基本结构
n 标签
n
标签
n
标签
n
标签
n 标签
Ø HTML表单
n action属性：指示服务器上处理表单输出的程序
n method属性：指定向服务器发送数据的方法(用post方法还是用get方法)
Ø HTML表单常用元素
n 单行文本框：
n 密码框：
n 多行文本框：</p><p>n 单选按钮：</p><p>n 复选框：</p><p>n 下拉列表框：</p><p>n 按钮： </p><p>u <inputtype="reset" value="重置"/></p><p>u <inputtype="button" value="按钮"/></p><p>u <inputtype="image" src="login.gif" data-ke-src="login.gif"/></p><p>n 文件域：</p><p><img class="ke-anchor" src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-name="_Toc298934918" />任务实训部分</a></p><h3><img class="ke-anchor" src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-name="_Toc298934919" />实训任务1</a>：实现一个跨行和跨列的表格</h3><p><strong>训练技能点</strong></p><p>Ø 使用<table>标签创建表格</p><p>Ø 使用colspan跨多列</p><p>Ø 使用rowspan跨多行</p><p><strong>需求说明</strong></p><p>实现一个跨行跨列的表格，显示商品分类信息，效果如图2.2.1所示：</p><p>图2.2.1 跨行跨列的表格</p><p><strong>实现思路</strong></p><p>Ø 使用<table>创建表格</p><p>Ø 设置表格的宽度和边框</p><p>Ø 使用colspan跨多列，使用rowspan跨多行</p><p>核心代码如下。</p><table border="0" cellpadding="0" cellspacing="0" class="ke-zeroborder"><tbody><tr><td style="background-color:#f2f2f2;"><p><<span style="background-color:#C0C0C0;">html</span>></p><p>跨行跨列练习</p><p></p><p></p><p><table width="400" border="1"></p><p><tr></p><p><td colspan="3"><h2>商品类目</h2></td></p><p></tr></p><p><tr></p><p><td rowspan="3">虚拟</td></p><p><td>移动</td></p><p><td>联通</td></p><p></tr></p><p><tr></p><p><td>股票</td></p><p><td>彩票</td></p><p></tr></p><p><tr></p><p><td>梦幻</td></p><p><td>QQ</td></p><p></tr></p><p></table></p><p></p><p></<span style="background-color:#C0C0C0;">html</span>></p></td></tr></tbody></table><h3><img class="ke-anchor" src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-name="_Toc298934920" />实训任务2</a>：使用表格实现一个课程表</h3><p><strong>训练技能点</strong></p><p>Ø 创建表格的基本结构</p><p>Ø 表格的跨行和跨列</p><p>Ø bordercolor属性的用法</p><p>Ø 使用bgcolor设置背景颜色</p><p><strong>需求说明</strong></p><p>使用表格知识实现一个小学课程表，效果如图2.2.2 所示。</p><p>图2.2.2 课程表</p><p><strong>实现思路</strong></p><p>Ø 使用EditPlus创建表格的基本结构</p><p>Ø 使用width设置表格的宽度，border属性设置边框的粗细，bordercorder设置边框的颜色</p><p>Ø 使用bgcolor设置单元格的背景颜色</p><p>核心代码如下。</p><table border="0" cellpadding="0" cellspacing="0" class="ke-zeroborder"><tbody><tr><td style="background-color:#f2f2f2;"><p><<span style="background-color:#C0C0C0;">html</span>></p><p>跨行跨列练习</p><p></p><p></p><p><table border="3" width="98%" bordercolor="#FF9933"></p><p><tr></p><p><td height="50" bgcolor="#eeeeee" align="center" colspan="6"><span>课程表</span></td></p><p></tr></p><p><tr></p><p><td bgcolor="#00eecc" width="15%"> </td></p><p><td bgcolor="#00eecc" width="16%">星期一</td></p><p><td bgcolor="#00eecc" width="16%">星期二</td></p><p><td bgcolor="#00eecc" width="19%">星期三</td></p><p><td bgcolor="#00eecc" width="18%">星期四</td></p><p><td bgcolor="#00eecc" width="16%">星期五</td></p><p></tr></p><p><tr></p><p><td bgcolor="#00eecc" rowspan="2">上午</td></p><p><td bgcolor="#00eecc">语文</td></p><p><td bgcolor="#00eecc">英语</td></p><p><td bgcolor="#00eecc">语文</td></p><p><td bgcolor="#00eecc">语文</td></p><p><td bgcolor="#00eecc">数学</td></p><p></tr></p><p><tr></p><p><td bgcolor="#00eecc">英语</td></p><p><td bgcolor="#00eecc">数学</td></p><p><td bgcolor="#00eecc">数学</td></p><p><td bgcolor="#00eecc">英语</td></p><p><td bgcolor="#00eecc">英语</td></p><p></tr></p><p></table></p><p></p><p></<span style="background-color:#C0C0C0;">html</span>></p></td></tr></tbody></table><h3><img class="ke-anchor" src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-name="_Toc298934921" />实训任务3</a>：实现在线商品展示页面</h3><p><strong>训练技能点</strong></p><p>Ø 表格的基本结构</p><p>Ø 使用<img />标签插入图片</p><p>Ø 多选框</p><p><strong>需求说明</strong></p><p>使用表格和<img />标签实现在线商品展示页面，效果如图2.2.3所示</p><p>图2.2.3 在线商品展示</p><p><strong>实现思路</strong></p><p>Ø 使用EditPlus创建表格的基本结构</p><p>Ø 合并第1行的4个单元格，然后使用<img />插入图片</p><p>Ø 第二行显示表头信息</p><p>Ø 从第二行起，在第1个单元格中添加多选框</p><p><strong>实现步骤</strong></p><p>(1) 使用EditPlus创建表格基本结构</p><table border="0" cellpadding="0" cellspacing="0" class="ke-zeroborder"><tbody><tr><td style="background-color:#f2f2f2;"><p><<span style="background-color:#C0C0C0;">html</span>></p><p>表格实现产品列表</p><p></p><p></p><p><table width="80%"></p><p></table></p><p></p><p></p></td></tr></tbody></table><p>(2) 合并第1行的4个单元格，然后使用<img />插入图片</p><table border="0" cellpadding="0" cellspacing="0" class="ke-zeroborder"><tbody><tr><td style="background-color:#f2f2f2;"><p><tr></p><p><td colspan="4"><img src="images/list_bg.gif" data-ke-src="images/list_bg.gif" alt="电子产品" /></td></p><p></tr></p></td></tr></tbody></table><p>(3) 从第二行起，在第1个单元格中添加多选框</p><table border="0" cellpadding="0" cellspacing="0" class="ke-zeroborder"><tbody><tr><td style="background-color:#f2f2f2;"><p><tr></p><p> <td></td></p><p><td><img src="images/232.jpg" data-ke-src="images/232.jpg" alt="alt" width="150" height="120/" /></td></p><p><td><p>推荐商品区</p></p><p><p>卖家：lingture</p></p><p><p><img src="images/buy.gif" data-ke-src="images/buy.gif" alt="alt" /> </p><p><img src="images/fav1.gif" data-ke-src="images/fav1.gif" alt="alt" />收藏</p></td></p><p><td><p>一口价</p><p>283.30</p></td></p><p></tr></p></td></tr></tbody></table><h3><img class="ke-anchor" src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-name="_Toc298934922" />实训任务4</a>：实现购物网站用户注册页面</h3><p><strong>训练技能点</strong></p><p>Ø 表格的使用</p><p>Ø 常用form表单元素的用法</p><p><strong>需求说明</strong></p><p>实现购物网站用户注册页面，效果如图2.2.4所示：</p><p>Ø 使用表格进行布局</p><p>Ø 包含常见的表单元素</p><p><img class="ke-anchor" src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-src="https://www.chaojiit.com/kindeditor/themes/common/anchor.gif" data-ke-name="_Toc298934923" />巩固练习</a></p><p><strong>一、选择题</strong></p><p>1. 以下选项中，哪个全部都是表格标签？ ( )</p><p>A. <table></p><p>B. <table><tr><td></p><p>C. <table><tr></p><p>D. <tr></p><p>2. 请选择可以使单元格中的内容进行左对齐的正确 HTML 标签？ ( )</p><p>A. <tdalign="left"></p><p>B. <tdvalign="left"></p><p>C. <td></p><p>D. </p><p>3. 在下列的 HTML 中，哪个可以产生复选框？( )</p><p>A. <inputtype="check"></p><p>B. </p><p>C. <inputtype="checkbox"></p><p>D. </p><p>4. 在下列的 HTML 中，哪个可以产生单行文本框？( )</p><p>A. <inputtype="textfield"></p><p>B. <textinputtype="text"></p><p>C. <inputtype="text"></p><p>D. </p><p>5. 在下列的 HTML 中，哪个可以产生下拉列表？( )</p><p>A. </p><p>B. <inputtype="list"></p><p>C. <inputtype="dropdown"></p><p>D. </p><p>二<strong>、上机练习</strong></p><p>1. 请用HTML实现如图2.3.1所示的申请表表单。相关要求如下：</p><p>Ø 教育程度:默认选中为本科。</p><p>Ø 国籍:有中国、美国、澳大利亚、日本、新加坡，默认选中为中国。</p></div></div><div id="treeSkill"></div><div id="blogExtensionBox" style="margin:auto;" class="blog-extension-box"></div>
