HTML基础语法
作为一种组织网页内容的语言，HTML主要包括标记和属性，标记用来支持网页中各种元素的显示，比如文本、超级链接、图像、多媒体、表格、表单、表单域等，属性对这些元素的行为特征进行修饰，比如表格的背景。HTML基础语法介绍了HTML文档的组成、HTML标记的语法规则、常用的网页元素等。
2.1 HTML文档的组成
2.1.1 HTML概述
HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是HTML的语句。我们上网浏览一个网页时，实际上是把该网页所对应的HTML文件下载到我们的计算机中，然后由本地计算机中的浏览器（如IE）再解释、显示。一个HTML程序由文档头部和正文两部分构成，HTML基本结构如图2-1所示。
2.1.2 编辑HTML文件
HTML文件是一个ASCII格式的文件。它可以在任何一种可以编辑ASCII文件的编辑器中编辑（如果HTML文件中包含汉字，则要在支持汉字的编辑器中编辑）。我们通常可以用Windows中的“记事本”和Editplus等文本编辑器来编辑HTML文件。
除了这些通用的编辑器外，还有FrontPage、Dreamweaver等可视化的编辑器，就像在Word中编辑文档一样，可以编辑出漂亮的界面（编辑过程中可以查看源代码）。
例2-1 编辑写如下内容，并形成名为exa2_1.html的HTML文件。
<html>
<head>
<base href="http://www.jmu.edu.cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>第二章 HTML基础</title>
</head>
<body>HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”。它实际上是专门用来编写网页的一种编成语言。大多数网页的构成基础就是HTML的语句。
</body>
</html>
保存文件时，注意文件的扩展名应该为htm或html。不要在文件名中使用一些特殊的符号（如空格）。若用Windows所带的“记事本”中输入、编辑并保存此文件，则保存时文件名时必须要有.html的扩展名，并选择“所有文件”格式来保存，
2.1.3 使用IE浏览器观看网页程序
一个HTML文件编写、录入完毕后，其执行效果到底如何，可在浏览器中查看到。通过双击该文件图标，系统自动用IE打开此文件，并运行它。上述文件的运行效果如图2-2所示。
图2-2 简单的HTML网页
值得注意的是，同一个文件在不同的浏览器中显示的效果可能不同。因此，应尽可能多用几种浏览器查看。
2.2 HTML的标记
2.2.1 标记的一般特性
作为一种标识语言，构成它的要素是标记，用标记符号来描述信息。浏览器会根据标记的意义，自动显示效果。概括地说，HTML文件中由两大类元素组成：一是标记，二是标记的作用对象（如文字、图形等）。
标记往往是具有特殊含义的英语词组或字母组合（如title、html等），标记通常放在“<>”中，标记中的字母可以不区分大小写，即大、小写的意义一样。
对于大多数标记而言，标记是成对的，一个表示开始，一个表示结束。如例2-1中的<title>与</title>就是一对。在这种情况下，往往使用如下的格式：
<标记符>内容</标记符>
应该注意的是，表示结束的标记符前面有一个斜杠“/”。
2.2.2 常用的标记
HTML所使用的标记很多，以下讲述的是最常用的几种标记。
（1）<html>和</html>
这是HTML文件所必需的一对标记。<html>居于文件最前面，</html>居于文件最后面。HTML文件的其他内容都镶嵌在这对标记中，如例2-1中所示。
（2）<head>和</head>
这对标记用来指定网页的头部，即文件信息。文件信息和文本信息共同构成了一个HTML文件，或者说，一个HTML文件主要由文件信息和文本信息两部分组成。
使用格式如下：
<head>
文件信息
</head>
“文件信息”可以使用下列标记：
① 使用<title>和</title>设定标题栏名称。
② 使用<base href="http://www.jmu.edu.cn">来设置文件中超级链接的网址。
③ 使用<meta http-equiv="Content-Type" content="text/html; charset=gb2312">来告知本文件使用何种编码方式。
（3）<title>和</title>
这对标记用来指定网页的标题。它们要包含在<head>和</head>标记之间。使用格式如下：
<title>文字说明</title>
这样一来，“文字说明”就会作为网页的标题，显示在屏幕顶端。例2-1就是在标题栏上显示“第二章 HTML基础”的标题。
如果一个网页没有标题，则IE会把该网页的路径作为该网页的标题。
（4）<body>和</body>
这对标记用来包含网页的文本内容，这是一个网页中最丰富的部分。
（5）<table>和</table>
这对标记表示一个表格，主要用于显示报表数据。但也可以通过设计表格的行和列，用来规整网页上显示的文本或图片。<table>标记的常用子标记有<tr>和<td>等。
（6）<form>和</form>
这对标记表示一个表单。为了获取用户在网页上的输入，表单提供了多种类型的表单域，这些表单域可以将数据传输到服务器，从而进行进一步的处理。<form>标记的常用子标记有<input>、<select>和<textaera>等。
（7）<a>和</a>
这对标记表示超级链接，比如<a href=”product.html”>产品信息</a>，当鼠标单击“产品信息”文本时，跳转到页面product.html。它也可以实现对其它对象设置超级链接，比如对图像对象。超级链接主要用于实现跳转到不同的页面，它也应用于其他场合，如链接硬盘文件，链接页面的不同部分以及运行JavaScript脚本函数等。
（8）<hn>和</hn>
这对标记用来指定网页的子标题。其格式为<hn>子标题内容</hn>。n可以取1～6之间的值，即按字体大小分为6级，n的值越大，浏览器显示的字体越小。子标题将以不同于正文的方式显示，即以加黑形式突出显示。子标题的长度不限，可以跨行。
例2-2 下列exa2_2.html文件以不同于正文的方式显示各级子标题，其执行结果如图2-3所示。
<html>
<head><title>网页子标题标题字体大小</title></head>
<body>
<h1>h1级子标题内容</h1>
<h2>h2级子标题内容</h2>
<h3>h3级子标题内容</h3>
<h4>h4级子标题内容</h4>
<h5>h5级子标题内容</h5>
<h6>h6级子标题内容</h6>
这是正文
</body>
</html>
（9）<br>
这是单个的标记。其作用是产生换行，相当于Word中的硬回车。如果在HTML文件中没有使用<br>，文本显示到窗口的边界时会自动换行。
（10）<hr>
此标记用于显示一条横线。这样可以分隔文件中不同部分的文本，使得显示的网页内容更加清晰。
例2-3 下列的exa2_3.html文件说明标记<br>、<hr>的使用。其运行效果如图2-4所示。
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
望庐山瀑布<br>
唐·李白
<hr>
日照香炉升紫烟，<br>
遥看瀑布挂前川。<br>
飞流直下三千尺，<br>
疑是银河落九天。<br>
</body>
</html>
`
图2-3 子标题的分级 图2-4 水平线的使用
2.3 文字修饰
一个网页大多由以下元素构成：文字、图片、表格、动画及声音。在这些元素中，文字是十分重要的。下面我们就逐一讲述涉及文字的标记。
2.3.1 字号
我们可以采用多种方式设置文字的大小。不过设置文字的大小后，其效果会受到IE中选项的影响。如图2-4所示是“文字大小”设置为“中”时显示的效果。
当我们把“文字大小”设置为“大”时，显示效果如图2-5所示。
图2-5 在IE浏览器中设置文字大小
对比图2-4与图2-5发现，图2-5中的文字比图2-4中的大。这就说明了IE中设置的影响。因此，文字大小设置标记的作用都是相对的。
下面我们讲述关于字号的标记。
（1）<small>和</small>
把文字以小一些的字号显示（默认的字号为“中”）。具体效果参看例2-4。
（2）<big>和</big>
把文字以大一些的字号显示。具体效果参看例2-4。
（3）<font size=n>
本标记也用来设置文字的大小。这里n是数字，可以为1，2，3，4，5，6，7。数字越大，显示的文字也越大。n的默认值是3。
此标记一直有效，直到遇到一个新的n值或</font>时为止。
如果给出的n值有正负号，则表示在当前字号的基础上增大或缩小字号。如“+1”表示大1号。
（4）<basefont size=n>
本标记用来设置文字的默认大小。这里n的意思与<font size>标记中的相同。
例2-4 设置文字的默认大小，源代码文件exa2_4.html，其执行结果如图2-6所示。
<html>
<head><title>设置文字的默认大小</title></head>
<body>
显示效果正常字号
<small>小号字</small>
<big>大号字</big><br>
<font size=1>1号字<br>
<font size=2>2号字<br>
<font size=3>3号字<br>
<font size=4>4号字<br>
<font size=5>5号字<br>
<font size=6>6号字<br>
<font size=7>7号字<br>
<font size=-5>相对小5号<br>
<font size=+2>相对大2号
</body>
</html>
图2-6 设置文字大小的效果
2.3.2 字体式样
除了可以设置文字的大小之外，我们还可以设置字体式样（包括颜色）。字体式样如表2-1所示。如果只有开始标记，而没有结束标记，则显示的效果将持续进行，直到遇到新的开始标记为止。字体式样的使用效果见例2-5。
表2-1 字体式样表
标记 | 功能 | 格式 |
<b>和</b> | 粗体 | <b>要粗体显示的文字</b> |
<I>和</I> | 斜体 | <I>要斜体显示的文字</I> |
<u>和</u> | 下划线 | <u>要下划线显示的文字</u> |
<strike>和</strike> | 上删除线 | <strike>要加上删除线显示的文字</strike> |
<sub>和</sub> | 下标 | <sub>要以下标形式显示的文字</sub> |
<sup>和</sup> | 上标 | <sup>要以上标形式显示的文字</sup> |
2.3.3 特殊标记
因为小于号“<”和大于号“>”作为标记的边界符使用了，所以要显示这两个符号，必须转义。具体情况为：“<”用“&It;”表示，“>”用“>”表示，“&”用“&”表示，““”用“quot;”表示。
例2-5 使用字体样式和特殊标记，源代码文件exa2_5.html。
<html>
<head><title>使用字体样式和特殊标记</title></head>
<body>
<b>要粗体显示的文字</b>
<I>要斜体显示的文字</I>
<u>要下划线显示的文字</u>
<strike>要加上删除线显示的文字</strike><br>
正常文字<sub>下标形式显示的文字</sub><br>
正常文字<sup>上标形式显示的文字</sup><br>
小于号<<br>
大于号><br>
</body>
</html>
其执行结果如图2-7所示。
图2-7 使用字体样式和特殊标记的效果
2.4 列表
列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。列表标记使用的通用格式如下：
<标记>
<条目标记1>条目内容1
<条目标记2>条目内容2
……
</标记>
值得注意的是，在“条目内容”后不用加换行标记<br>
（1）<dir>和</dir>
把其间包含的内容以列表方式显示，并在每个条目前加上一个标记符号。
（2）<menu>和</menu>
与<dir>作用相同。这两个标记比较简单，不能实现一些复杂的变化。
（3）<UL>和</UL>
其效果与上述两个命令的列表效果相似。不过，此命令可以带属性，变成<UL type=f>的形式。此处f为单词，具体情况有如下几种：
f为disk：条目以符号“●”引导。
f为circle：条目以符号“○”引导。
f为square：条目以符号“■”引导。
（4）<OL>与</OL>
使用此对标记，也可实现与以上命令相似的列表。不同之处在于，本标记会自动给条目排序并加上序号。
此标记也可带有属性，有如下两种：
1）<OL type=f>。此处，f是一个字符，不同的字符表示不同的编号方式，主要有以下几种情况：
f为A：以大写字母顺序排序。如：A，B，C，D等。
f为a：以小写字母顺序排序。如：a，b，c，d等。
f为I：以大写罗马数字顺序排序。如：I，II，III，IV等。
f为i：以小写罗马数字顺序排序。如：i，ii，iii，iv等。
f为1：以阿拉伯数字顺序排序。如：1，2，3，4等。
2）<OL start=n>。n是一个数字，此标记符表示重新定义的起始号。这样一来，就可以随时指定起始的序号。
（5）列表的嵌套
例2-6 源代码文件exa2_6.html用于说明列表标记的使用及列表的嵌套。其执行效果如图2-8所示。
<html>
<head>
<title>列表嵌套</title>
</head>
<body>
<h3>唐诗选读</h3>
<OL>
<LI>李白
<UL>
<LI>春思
<LI>月下独酌
<LI>赠孟浩然
</UL>
<LI>杜甫
<OL type=A>
<LI>望月
<LI>佳人
<LI>梦李白
</OL>
<LI>杜牧
<OL type=i>
<LI>赤壁
<LI>泊秦淮
<LI>秋夕
</OL>
</OL>
</body>
</html>
图2-8 列表的效果
2.5 表格
HTML对页面元素的排版基本就是按照元素在文档中出现的先后顺序，从头至尾依次排下来，唯一能控制页面元素位置的只有Align属性，而它所能控制的情况只有三种：左、中、右，要编制复杂的页面布局仅仅依靠基本的HTML几乎是不可能实现的。
表格就解决了这个问题，使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。
表格一般由以下几部分组成：表格名称、表格栏及表中数据。这与其他软件（如Word）中所说的表格十分相同。
以下讲述建立、修改表格所涉及的标记。
2.5.1 <table></table>
这是一对用来指明表格范围的标记。通常使用的格式如下：
<table>
表格内容
</table>
1．border属性
使用表格的这一属性可以给表格加上框线。如<table border>表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。
一般用<table border=n>来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框，具体参见例2-7。
例2-7 表格和表格边框，源代码文件exa2_7.html。
<html>
<head>
<title>这是表格和表格边框的例子</title>
</head>
<body>
<table border="2">
<caption>表格标题</caption>
<tr>
<th>栏目名称1</th>
<th>栏目名称2</th>
<th>栏目名称3</th>
</tr>
<tr>
<td>数据1-1</td>
<td>数据2-1</td>
<td>数据3-1</td>
</tr>
<tr>
<td>数据1-2</td>
<td>数据2-2</td>
<td>数据3-2</td>
</tr>
</table>
</body>
</html>
其执行结果如图2-9所示。
图2-9 表格和表格边框实例
2．width属性
这一属性可以用来设置“有线表格”占整个页面的相对宽度，写法为<table width=n>。n是一个具体的数字，可以是一个百分数（如100%），也可以是一个具体的数值，单位是像素（如80，表示表格占80个像素单位的宽度）。
3．height属性
这一属性可以用来设置“有线表格”占整个页面的相对高度。其用法与<table width=n>相似。
使用相对方式来设置表格大小时，浏览器窗口大小的变化会影响到表格大小的变化。表格宽度、高度设置要合理，在视觉上要有美感。
例2-8 使用相对方式来设置表格大小，源文件为exa2_8.html。
<html>
<head>
<title>这是表格占页面相对大小的例子</title>
</head>
<body>
<table border="5" width=80%, height=30%>
<caption>表格占页面宽度的80%，高度的30%</caption>
<tr>
<th>栏目名称1</th>
<th>栏目名称2</th>
<th>栏目名称3</th>
</tr>
<tr>
<td>数据1-1</td>
<td>数据2-1</td>
<td>数据3-1</td>
</tr>
<tr>
<td>数据1-2</td>
<td>数据2-2</td>
<td>数据3-2</td>
</tr>
</table>
</body>
</html>
其执行结果如图2-10所示。
图2-10 设置表格在页面中的相对大小
4．cellspacing属性
这一属性可以用来设置有线表格的单元格线的宽度，用法为<table cellspacing=n>。n是一个具体的数值，单位是像素。
5．cellpddeing
这一属性可以用来设置单元格线与数据之间的距离，用法为<table cellpddeing=n>。n是一个具体的数值，单位是像素。默认值为1。
2.5.2 <caption>和</caption>
这是一对用来指明表格标题的标记。通常使用的格式如下：
<caption>
表格标题内容
</caption>
默认的情况下，标题以居中的形式显示，而且显示在表格的上面。标题也可以显示在表格的下面，这要使用align属性，具体格式如下：
<caption align=f>
此处，f为以下两个单词：top，标题显示在表格之上；bottom，标题显示在表格之下。
2.5.3 <tr>和</tr>
这对标记用来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。
2.5.4 <th>和</th>
这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字会突出显示。
2.5.5 <td>和</td>
这对标记用来指明表格数据行中的一项。一行可以由多项组成，它也必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字不会突出显示。
本标记的用法参见例2-7和例2-8。
1．align属性
以上<tr>，<th>及<td>也可以带属性align。
align=left：表示居左，如：<th align=left>；
align=center：表示居中，如：<th align=center>；
align=light：表示居右，如：<th align=right>；
特别值得注意的是，这种调整可以针对每一表格单元，因此可以十分灵活地使用。
2．nowrap属性
在执行<th>及<td>时，当数据较多，一行显示不下时，浏览器会自动换行显示。如果不要自动换行，可以使用<nowrap>属性。
3．width属性
在执行<th>及<td>时，使用此属性可以指定宽度。具体用法与在<table>中一样。
4．valign=f属性
在执行<th>及<td>时，使用此属性可以指定文字显示在本行的上、中、下位置，用法是valign=f。此处，f为以下单词：top，文字显示在本行偏上位置；middle，文字显示在本行中间位置；bottom，文字显示在本行偏下位置。
5．colspan属性
在执行<th>及<td>时，使用此属性可以实现单元格的横向合并，用法为colspan=n。这里，n是数值，默认为1（此时可以省略此参数）。如果要实现两栏合并，则让n的值为2即可。
6．rowspan属性
在执行<th>及<td>时，使用此属性可以实现单元格的纵向合并，用法为rowspan=n。这里，n是数值，默认为1（此时可以省略此参数）。如果要实现两栏合并，则让n的值为2即可。
例2-9 实现栏目合并，源代码文件exa2_9.html，其执行结果如图2-11所示。
<html>
<head>
<title>这是表格栏目合并的例子</title>
</head>
<body>
<table border="2">
<caption>表格标题</caption>
<tr>
<th>栏目名称1</th>
<th colspan=2>栏目名称2和3</th>
<tr>
<th rowspan=2>数据1-1</th>
<td>数据2-1</td>
<td>数据3-1</td>
<tr>
<td>数据2-2</td>
<td>数据3-2</td>
</table>
</body>
</html>
图2-11 表格栏目合并的效果
2.6 图像与多媒体
2.6.1 图像
HTML文档中，图像用<img>元素表示。通过<img>元素，可以指定图像文件的URL，图像与文本的对齐方式，图像大小以及图像的其他属性等等。<img>标记的常用属性见表2-2。以下是图像元素的语法格式：
<img src= width="80" height="50" align="left" hspace=”” vspace=”” alt=”” border=”” />
表2-2 <img>标记的常用属性
属性 | 用途 |
src | 指定要显示的图像的URL，可以是相对地址 |
width | 指定要显示的图像的宽度 |
height | 指定要显示的图像的高度 |
align | 指定要显示的图像左右空白宽度 |
hspace | 指定要显示的图像上下空白高度 |
vspace | 指定要显示的图像与周围文本的对齐方式 |
alt | 鼠标指向该图像时，显示的提示文本信息 |
border | 图像边框的宽度 |
以下是一个在HTML文件中嵌入图像的例子：
<img src="c：\temp\nature06.jpg" width="360" height="292" alt="图像文件" align="right">
上述代码将c：\temp\nature06.jpg这个图像以宽度360像素，高度292像素的格式显示在所在HTML文档的右边，此时，图像的大小与原大小无关，该图像将根据<img>元素的属性定义重新调整大小。也可以将一个图像作为一个超级链接，当鼠标单击该图像时，跳转到链接所指定的资源。语句如下所示：
<a href="nature.html">
<img src="c：\temp\nature06.jpg" width="360" height="292" alt="图像文件" align="right">
</a>
2.6.2 多媒体
HTML文档中播放各种多媒体文件，一般可以<object>和<embed>两个元素。通过这两个元素可以在HTML文档中调用客户端的应用程序播放指定的多媒体文件，比如声音和电影。以下例子通过object元素在HTML页面中插入对象。其中，classid设置或获取对象的类标识符，codebase设置或获取组件的URL。其它设置都可以在单独的名为param元素内的参数，如下例所示。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="100" height="100" codebase="">
<param name="movie" value="moviename.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
</object>
embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU等等，Netscape及新版的IE都支持。embed元素也可以包含param元素，以下例子中，所有的设置（如height、width、quality和loop）都是显示在起始embed元素的尖括号之间的属性，表2-3列出了<embed>标记的常用属性。
<embed src="moviename.swf" width="100" height="100" play="true"
loop="true" quality="high" pluginspage="">
</embed>
表2-3 <embed>标记的常用属性
属性 | 用途 |
src | 设定midi档案及路径，可以是相对或绝对 |
autostart | 是否在音乐档下载完之后就自动播放 |
loop | 是否自动反复播放 |
hidden | 是否完全隐藏控制画面 |
starttime | 设定歌曲开始播放的时间 |
volumn | 设定音量的大小 |
width | 设定控制面板的高度 |
high | 设定控制面板宽度 |
align | 设定控制面板和旁边文字的对齐方式 |
controls | 设定控制面板的外观 |
也可以同时使用两种元素，如下例所示：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="100"height="100" codebase="">
<param name="movie" value="moviename.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<embed src="moviename.swf" width="100" height="100" play="true" loop="true" quality="high" pluginspage=" ">
</embed>
</object>
2.7 HTML表单
表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交（submit）操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的ASP或CGI等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用HTML标志来设计表单。
表单是由窗体和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交和按钮等，这些输入框，按钮叫做控件，表单很像容器，它能够容纳各种各样的控件。
一个表单用<form></form>标志来创建。也即定义表单的开始和结束位置，在开始和结束标志之间的一切定义都属于表单的内容。<form>标志具有action、method和target属性。action的值是处理程序的程序名（包括网络路径：网址或相对路径），如：<form action="用来接收表单信息的url">，如果这个属性是空值（""）则当前文档的url将被使用.当用户提交表单时，服务器将执行网址里面的程序（一般是CGI程序）。method属性用来定义处理程序从表单中获得信息的方式，可取值为GET和POST的其中一个。GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB（255个字节）以下。POST方式传送的数据比較大，它是当前的HTML文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。target属性用来指定目标窗口或目标帧。可选当前窗口_self，父级窗口_parent，顶层窗口_top，空白窗口_blank。
表单元素的格式：
<FORM name="myform" action="url" target="_blank" method="get|post" onSubmit="functionName">... </FORM>
在HTML语言中，元素<input>具有重要的地位，它能够将浏览器中的控件加载到HTML文档中，该元素是单个元素，没有结束元素。<input type="">标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在 <form></form>标志对之间。<input type="">标志中共提供了七种类型的输入区域，具体是哪一种类型由type属性来决定。
（1）type="TEXT"
type="TEXT"表示文本输入区域，它的属性如下：
① name定义控件名称。
② value指定控件初始值，该值就是浏览器被打开时在文本框中的内容
③ size指定控件宽度，表示该文本输入框所能显示的最大字符数。
④ maxlength表示该文本输入框允许用户输入的最大字符数。
⑤ onchang当文本改变时要执行的函数
⑥ onselect当控件被选中时要执行的函数
⑦ onfocus当文本接受焦点时要执行的函数
（2）type="button"、type="SUBMIT"和type="RESET"
type="button"、type="SUBMIT>和type="RESET>分别表示普通按钮、提交按钮和重置按钮，当这个按钮被点击时，就会调用属性onclick指定的函数；在使用这个按钮时，一般配合使用value指定在它上面显示的文字，用onclick指定一个函数，一般为JavaScript的一个事件。这三个按钮有下面共同的属性：
① name指定按钮名称。
② value指定按钮表面显示的文字。
③ onclick指定单击按钮后要调用的函数。
④ onfocus指定按钮接受焦点时要调用的函数。
（3）type="CHECKBOX"
type="CHECKBOX"表示复选框，checked属性用来设置该复选框缺省时是否被选中，它有以下属性：
① name定义控件名称。
② value定义控件的值。
③ checked设定控件初始状态是被选中的。
④ onclick定义控件被选中时要执行的函数。
⑤ onfocus定义控件为焦点时要执行的函数。
（4）type="RADIO"
type="RADIO"表示单选按钮类型，checked属性用来设置该单选框缺省时是否被选中，若设置几个单选按钮为一个组，应该设置它们的name属性相同。它有以下属性：
① name定义控件名称。
② value定义控件的值。
③ checked设定控件初始状态是被选中的。
④ onclick定义控件被选中时要执行的函数。
⑤ onfocus定义控件为焦点时要执行的函数。
（5）type="HIDDEN"
type="HIDDEN"表示隐藏区域，用户不能在其中输入，用来预设某些要传送的信息，该控件也称为隐藏控件，对用户来说是不可见的。它有以下属性：
① name控件名称。
② value控件默认值。
③ hidden隐藏控件的默认值会随表单一起发送给服务器
（6）type="PASSWARD"
type="PASSWARD"表示输入密码的区域，当用户输入密码时，区域内将会显示"*"号，表示该输入项的输入信息是密码。它有以下属性：
① name定义控件名称。
② value指定控件初始值，该值就是浏览器被打开时在文本框中的内容。
③ size指定控件宽度，表示该文本输入框所能显示的最大字符数。
④ maxlegnth表示该文本输入框允许用户输入的最大字符数。
（7）type="IMAGE"
type="IMAGE"表示使用图像来代替Submit按钮，图像的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器
① name指定图像按钮名称。
② src指定图像的url地址。
HTML称为超文本元素语言，用HTML编写的超文本文档称为HTML文档，HTML语言描述的文件，需要通过Web浏览器显示出效果。HTML文档一般由HTML版本信息、文档头和文档体三部分组成，每个HTML文档由若干元素及其属性组成。
HTML语言中提供了多种元素以组织其表现的内容，比如文本、超级链接、图像、多媒体、表格、表单、表单域等。这些元素用它们的属性限定了HTML文档内容的格式。其中，表格一般用以对HTML文档内容提供整齐的显示风格，表单和表单域提供了在HTML文档中和用户进行应答的一般方法。
