1.1 HTML简介
在Java Web应用中，所有的参数输入界面和结果输出界面，最终都要通过HTML网页展现在用户的浏览器中。我们经常访问各大网站，也是由HTML网页展现的。浏览器中显示的网页（见图1.1）实际上是HTML代码（见图1.2）被浏览器解析渲染后的结果。
图1.1 百度首页
图1.2 百度首页的HTML代码
HTML是一种用来描述网页的超文本标记语言（Hyper Text Markup Language），超文本是指页面内可以包含图片、链接、程序等非文字元素。HTML不是一种编程语言，而是一种使用标签的标记语言，也就是说，HTML是使用标记标签来描述网页的。
HTML标记标签通常被称为HTML标签（HTML Tag），是由尖括号包围的关键词组成，一般成对出现，如<html>和</html>。其中，第一个标签称为开始标签（也称开放标签），第二个标签称为结束标签（也称闭合标签）。
1.1.1 HTML文档结构
HTML文档是由HTML元素定义的，HTML元素指的是从开始标签到结束标签的所有代码。HTML元素（以下简称元素）分为两大类：一类用于确定超文本在浏览器中显示的方式；另一类用于确定超文本在浏览器中显示的内容。元素在文本中的格式为：<元素名>内容</元素名>。元素可以拥有属性，属性提供了有关HTML元素的更多信息，一般以名称/值对的形式出现，且总是在HTML元素的开始标签中定义。
HTML文档的基本结构包括头部和主体部分。头部提供关于网页的信息，包含页面的标题、序言、说明等内容，其本身不作为内容来显示，但影响网页显示的效果。HTML使用<head></head>标签表示头部信息的开始和结尾。主体部分提供网页的具体内容，使用<body>和</body>标签进行标记，网页中显示的实际内容均需要包含在这两个标记之间，如文字、表格、图像、声音、动画及相关的格式化标记等。如下代码描述了HTML的基本结构。
1 <html>
2 <head>
3 <title>网页标题</title>
4 </head>
5 <body>
6 网页内容
7 </body>
8 </html>
当使用Web浏览器打开一个文件时，首先会识别文件的扩展名并据此判定文件类型，然后根据文件类型确定其打开方式。HTML文档本身是一种文本文件，它的文件扩展名通常为“.htm”或“.html”。用户可以使用任何能够生成．txt类型源文件的文本编辑器来编译超文本标记语言文件，然后将文件扩展名修改为“.htm”或“.html”即可。需要注意的是，Web浏览器对HTML注释之间的部分不予显示，但优秀的网页应该有详尽的注释，以帮助其他开发者理解页面源代码。
下面，我们将通过一个简单的程序演示HTML的基本结构。新建一个文本文档，将其命名为“html_first.html”，在该文档中输入如下代码并保存。其中，<html>和</html>之间的内容用于描述整个网页；<head>和</head>之间的内容用于描述网页的头部信息；<title>和</title>之间的文本用于定义页面的标题，位于<head>和</head>标记之间。<body>和</body>之间的文本是可见的页面内容。
1 <html>
2 <head>
3 <title>first html </title>
4 </head>
5 <body>
6 welcome to HTML
7 </body>
8 </html>
使用浏览器方式打开html_first.html文件，页面展现结果如图1.3所示。也就是说，Web浏览器的作用是读取HTML文档并进行解析，最终以网页的形式显示出解析结果。
图1.3 html_first.html页面效果
1.1.2 HTML常用标签
1．基本标签
基本标签包括文本、字体、图片等相关标签。下面逐一进行介绍。
（1）注释
注释标签的格式为：<!-- 注释内容 --＞，注释并不局限于一行，其长度不受限制。结束标记与开始标记可以不在同一行上。
（2）标题
标题是一段文字内容的核心，通常用加强的效果来表示。在网页中，可以通过设置不同大小的标题来增加文档结构的条理性。HTML是通过<h1>～<h6>等标签定义标题的，其中，<h1>定义字号最大的标题，<h6>定义字号最小的标题。新建一个文本文档，将其命名为html_second.html，并在其中输入以下代码。
1 <html>
2 <head>
3 <title>second html </title>
4 </head>
5 <body>
6 <h1>网页内容标题1</h1>
7 <h2>网页内容标题2</h2>
8 <h3>网页内容标题3</h3>
9 <h4>网页内容标题4</h4>
10 <h5>网页内容标题5</h5>
11 <h6>网页内容标题6</h6>
12 </body>
13 </html>
使用浏览器方式打开html_second.html文件，页面展现结果如图1.4所示。从图中可以看出，<h1>定义的标题最大，之后依次递减，<h6>定义的标题最小，且浏览器会自动在标题的前后添加空行。一般情况下，用户是通过标题快速浏览网页的，所以标题是呈现文档结构的重要手段。大家在应用该标签时要确保将标题标签仅用于标题，不要仅仅为了产生粗体或大字号文本而使用标题。此外，应该首先将h1用作主标题（最重要的），其次是h2（次重要的），再其次是h3，依此类推。
图1.4 html_second.html页面效果
（3）换行
对网页中的内容进行换行和分段是常见的操作。在用浏览器浏览一个网页时，浏览器只有在HTML文件中遇到换行或分段的标签时，才会进行换行或分段的操作。HTML分段是通过<p>元素定义的，该元素拥有一个开始标签<p>，以及一个结束标签</p>。同标题标签一样，浏览器会自动在段落的前后添加空行。
如果用户希望在不产生新段落的情况下进行换行，可以使用<br/>标签。由于<br/>元素是一个空的HTML元素，且关闭标签没有任何意义，因此它没有结束标签。
分割内容的另外一个方法是使用分割线，<hr/>标签用于在HTML页面中创建水平线。
下面将新建html_third.html文档演示分段和换行，代码如下。
1 <html>
2 <head>
3 <title>Third html </title>
4 </head>
5 <body>
6 <p>这是第一段</p>
7 <hr/>
8 <p>欢迎
9 <br/>使用HTML分段和换行标签
10 </p>
11 </body>
12 </html>
使用浏览器方式打开html_third.html文件，页面展现结果如图1.5所示。从图中可以看出，<p>能在浏览器中生成一个段落，且段前段后都有空行。<hr/>能在页面中创建一条水平线。<br/>使得“使用HTML分段和换行标签”出现在下一行。要注意的是，使用<p></p>插入一个空行并不推荐，需要产生新一行时请使用<br/>标签代替。
图1.5 html_third.html页面效果
（4）样式
HTML的style属性提供了一种改变所有HTML元素样式的通用方法。其中，background-color属性为元素设置了背景颜色，font-family属性设置了文本的字体系列，color属性设置了文本的字体颜色，font-size属性设置了文本的字体大小，text-align属性设置了元素中文本的水平对齐方式。
（5）超链接
超链接可以是一个字、一个词或者一句话，用户可以单击超链接跳转到新的文档或当前文档中的某个位置。当鼠标指针移动到超链接时，箭头会变为手型。在HTML文档中，可以使用<a>标签在HTML中创建链接，并使用href属性表明链接所指向的目标URL地址，该URL地址可以是绝对地址、相对地址或页内书签。
下面将创建html_fourth.html文件，对style属性及超链接进行验证，代码如下。
1 <html>
2 <head>
3 <title>唐诗宋词</title>
4 </head>
5 <body style="background-color:green">
6 <h1 style="text-align:left">绝句二首</h1>
7 <h2 style="background-color:red">杜甫</h2>
8
9 <p style="background-color:yellow;font-family:arial;color:red;font-size:20px;">
10 绝句·迟日江山丽</p>
11 <p style="background-color:green;font-family:arial;color:red;font-size:20px;">
12 迟日江山丽
13 <br/>春风花草香
14 <br/>泥融飞燕子
15 <br/>沙暖睡鸳鸯
16 </p>
17 http://www.baidu.com;百度搜索</a>
18 </body>
19 </html>
使用浏览器方式打开html_fourth.html文件，页面展现结果如图1.6所示。从图中可以看出，标题和段落都按照要求进行了格式化，且在网页下方出现了超链接。单击“百度搜索”，浏览器会跳转到百度首页。
图1.6 html_fourth.html页面效果
（6）图片
使用图片标签，不仅可以把一幅图片加入网页中，还可以设置图片的尺寸、布局等属性。图片标签的格式如下。
1 <img src="图片文件名"
2 alt="简单说明"
3 width="图片宽度" height="图片高度"
4 border="边框宽度"
5 />
如果不设置图片的尺寸，图片将按照其本身的大小显示。使用<img>标签的width和height属性可以设置图片的大小，width和height的属性值既可取像素数，也可取百分数。
2．表格
表格是将文本和图像按一定的行、列规则进行排列，是显示长信息的一种优秀元素。
HTML使用<table>标签定义表格，每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。td指表格数据（Table Data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。表1.1列出了和表格相关的标签，其中，<table>定义表格，<caption>是表格的标题说明，<tr>定义了表格中的一行，<tr>…</tr>中间的内容显示在一行中，<th>定义了表格中的表头，大多数浏览器会把表头显示为粗体、居中的文本，<td>定义了表格中每个单元格的具体内容。在日常应用中，经常会遇到单元格内容为空的情况，可以使用<td> </td>进行标记， 代表空格。
表1.1 表格相关标签
如果不定义边框属性，表格在显示时将不显示边框，为了使得边框可见，可以使用“border”属性指明边框的宽度。若要指明表格的背景，可以使用“bgcolor”属性。进一步地，可以使用“background”属性指明表格的背景图像。当然，这些属性也可应用于<td>标签，以设置单元格的背景颜色和背景图像。同设置文本一样，表格也可以设置排列方式，用户可以通过“align”属性排列单元格内容，以便创建一个美观的表格。
下面通过一个例子演示表格的相关标签。新建html_fifth.html文档，代码如下。
1 <html>
2 <body>
3 <h4>学生基本信息</h4>
4 <table border="2" bgcolor="red">
5 <caption>表1 学生基本信息</caption>
6 <tr>
7 <th>序号</th>
8 <th>姓名</th>
9 <th>年龄</th>
10 <th>居住城市</th>
11 </tr>
12 <tr>
13 <td bgcolor="blue">1 </td>
14 <td>张三</td>
15 <td>18</td>
16 <td>北京</td>
17 </tr>
18 <tr>
19 <td>2</td>
20 <td>王曼</td>
21 <td>20</td>
22 <td>广州</td>
23 </tr>
24 </table>
25 <table border="2" bgcolor="green">
26 <caption>表2 学生成绩信息</caption>
27 <tr>
28 <th align="center">序号</th>
29 <th align="center">姓名</th>
30 <th align="center">课程</th>
31 <th align="center">分数</th>
32 </tr>
33 <tr>
34 <td align="left" >1</td>
35 <td align="center">张三</td>
36 <td align="right">Java Web</td>
37 <td align="right">90</td>
38 </tr>
39 <tr>
40 <td align="left" >2</td>
41 <td align="center">王曼</td>
42 <td align="right">English</td>
43 <td align="right">96</td>
44 </tr>
45 <tr>
46 <td align="left" >2</td>
47 <td align="center">王曼</td>
48 <td align="right">思想道德修养</td>
49 <td align="right"> </td>
50 </tr>
51 </table>
52 </body>
使用浏览器方式打开html_fifth.html文件，页面效果如图1.7所示。从图中可以看出，表1和表2按照标签的设定进行了展示。
图1.7 html_fifth页面效果
3．表单
HTML表单用于搜集不同类型的用户输入，当用户填好表单所需信息并将表单提交后，服务器就可以得到表单中的信息并进行处理。HTML表单通过<form>元素进行定义，<form>常用的属性如表1.2所示。
表1.2 <form>常用属性
HTML表单可以包含多种表单元素，如输入框、复选框、单选按钮、提交按钮等。表1.3列出了表单中的常用元素。
表1.3 表单常用元素
其中，<input>元素是表单中最重要的元素，用来定义表单中的各类输入域，供用户输入信息。该元素有很多属性，常见的有name属性、type属性、value属性、readonly属性、disabled属性、size属性等。
（1）name属性定义了<input>元素的名称，该属性用于对提交到服务器的表单数据进行标识。在提交表单数据时，只有设置了name属性的表单元素才能在提交表单时传递它们的值。
（2）type属性描述了<input>元素的输入类型，常见的type属性取值有以下几种。
<input type = "text">：定义单行文本输入字段，当用户要在表单中输入字母、数字等内容时，就会用到文本域。以下代码定义了firstname和lastname两个单行文本输入框供用户输入。
1 <form>
2 First name: <input type="text" name="firstname"><br>
3 Last name: <input type="text" name="lastname">
4 </form>
<input type = "password">：定义密码字段，该字段字符不会明文显示，而是以星号或圆点代替。以下代码在网页中定义了密码输入字段，用户输入的密码将在浏览器中以星号或圆点显示。
1 <form>
2 Password: <input type="password" name="pwd">
3 </form>
<input type = "radio">：定义单选框表单控件，允许用户在多个选项中选择其中一个。以下代码声明了一组单选框表单控件，名称为“radio1”。这组单选框有3个选项，选项的名称分别为“选项1”“选项2”“选项3”,3个选项对应的值分别为“value1”“value2”“value3”。
也就是说，通过统一单选框表单的名字，可以实现选项的互斥。
1 <input type="radio" name="radio1" value="value1" />选项1
2 <input type="radio" name="radio1" value="value2" />选项2
3 <input type="radio" name="radio1" value="value3" />选项3
<input type = "checkbox">：定义复选框，允许用户从多个选项中选择多个。以下代码声明了一组复选框，名称为“vehicle”，允许用户在“I have a bike”和“I have a car”两个选项中进行选择。
1 <form>
2 <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
3 <input type="checkbox" name="vehicle" value="Car">I have a car
4 </form>
<input type = "submit">：提交按钮。当用户单击提交按钮时，表单的内容会被传送到另一个文件中。表单的动作属性定义了目的文件的文件名，该目的文件通常会对接收到的输入数据进行相关的处理。在以下代码中，当用户单击“Submit”按钮时，表单中用户输入的username会以get方式提交到“html_form_action.php”文件中进行处理。
1 <form name="input" action="html_form_action.php" method="get">
2 Username: <input type="text" name="user">
3 <input type="submit" value="Submit">
4 </form>
（3）value属性规定输入字段的初始值。
（4）readonly属性规定输入字段为只读（不能修改），该属性不需要赋值，它等同于readonly="readonly"。
（5）disabled属性规定输入字段是禁用的，被禁用的元素是不可用和不可单击的，且被禁用的元素不会被提交。此外，该属性同readonly属性一样，不需要赋值，等同于disabled="disabled"。
（6）size属性定义了输入域分配的显示空间大小，它以字符为单位。
（7）maxlength属性限定了用户能够输入的字符数。
<select>元素定义了下拉列表，以下代码定义了下拉列表“cars”，并定义了4个选项。
1 <form action="">
2 <select name="cars">
3 <option value="volvo">Volvo</option>
4 <option value="saab">Saab</option>
5 <option value="fiat">Fiat</option>
6 <option value="audi">Audi</option>
7 </select>
8 </form>
<textarea>元素定义了多行文本输入域，允许用户通过rows和cols属性指定文本输入域的行数和列数。以下代码定义了一个10行30列的文本输入域，供用户输入大量文字。
1 <textarea rows="10" cols="30">
2 我是一个文本框。
3 </textarea>
下面，通过一个例子来演示表单的综合应用，新建文本文档，将其命名为html_sixth.html，代码如下。
1 <html>
2 <head>
3 <title>学生基本信息</title>
4 </head>
5 <body>
6 <h2>学生基本信息录入</h2>
7 <form>
8 账 号：<input type="text" name="username" size=20>
9 <br/>
10 密 码：<input type="password" name="password" size=20>
11 <br/>
12 性 别：
13 <input type="radio" name="sex" value="male">男
14 <input type="radio" name="sex" value="female">女
15 <br/>
16 兴 趣：
17 <input type="checkbox" name="interest" value="ball">打球
18 <input type="checkbox" name="interest" value="drawing">画画
19 <input type="checkbox" name="interest" value="learning">学习
20 <br/>
21 学 历：
22 <select>
23 <option value="1">高中</option>
24 <option value="2">大专</option>
25 <option value="3">本科</option>
26 <option value="4">研究生</option>
27 </select>
28 <br/>
29 <p>简 介：</p>
30 <textarea rows="10" cols="30">
31 </textarea>
32 <br/>
33 <p>照片上传：</p>
34 <input type="file">
35 <br/>
36 <br/>
37 <input type="submit" value="确定"/>
38 <input type="reset" value="重置"/>
39 </form>
40 </body>
41 </html>
使用浏览器方式打开html_sixth.html文件，页面展现结果如图1.8所示。对应于账号输入框的是username输入域，类型为text；对应于密码输入框的是password输入域，类型为password；页面中定义的性别输入域，名称为sex，类型为radio；兴趣输入域的类型为checkbox，名称为interest；学历通过下拉列表进行控制；简介是一个行数为10、列数为30的输入域；照片上传文件输入域的类型为file。
图1.8 html_sixth.html页面效果