1.1 HTML技术
1.1.1 HTML简介
HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”，其主要作用是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，所以简单的 HTML 代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”即可生成一个HTML网页。
在实际开发中，项目的静态页面通常由网页制作人员设计和制作，开发人员只需了解页面元素，能够使用和修改页面中的元素，并在项目运行时能够展示出相应的后台数据即可。网页制作人员通常会使用一些专业软件来创建HTML页面，由于本教材中HTML技术只作为Java Web学习的辅助技术，所以这里不会详细介绍如何使用专业工具制作网页，只需要读者了解页面元素的构成，会调试基本的页面效果即可。
了解了什么是HTML后，接下来通过一个基本的HTML文档来讲解其内部的构成，如文件1-1所示。
文件1-1 htmlDemo01.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>Insert title here</title>
6 </head>
7 <body>
8 </body>
9 </html>
在文件1-1中，主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记和<body>主体标记。在HTML页面中，带有“< >”符号的元素被称为HTML标记，如上面文件中<html>、<head>、<body>都是HTML标记。标记就是放在“< >”标记符中表示某个功能的编码命令，也称为HTML标签或HTML元素，本书统一称作HTML标记。文件1-1中各个标记的具体介绍如下。
1.<!DOCTYPE>标记
<!DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 标准规范，如文件1-1中使用的是HTML 4.01版本。网页必须在开头处使用<!DOCTYPE>标记为所有的HTML文档指定HTML版本和类型，只有这样浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。<!DOCTYPE>标记和浏览器的兼容性相关，删除<!DOCTYPE>后，会把如何展示HTML页面的权利交给浏览器，这时，有多少种浏览器，页面就有可能有多少种显示效果，在实际开发中，这是不被允许的。
2.<html>标记
<html>标记位于<!DOCTYPE>标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
3.<head>标记
<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，其中<title>标记用来描述文档的标题，<meta>标记可提供有关页面的元信息，<link>标记用于定义文档与外部资源的关系，其最常见的用途是链接样式表，<style>标记用于为HTML文档定义样式信息。一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
4.<body>标记
<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。
了解了文件1-1中的HTML标记后，接下来讲解一下HTML文件的创建以及运行，具体如下。
以文件1-1 htmlDemo01.html为例。首先，创建一个名称为chapter01的文件夹，然后在该文件夹中新建一个．txt文本文件，将文件1-1中的内容编写到该文件中，保存文件后，将文件的名称更改为htmlDemo01，后缀名改为．html，此时该文件即是一个HTML页面，如图1-1所示。
图1-1 HTML页面
双击图1-1所示的htmlDemo01.html文件，即可通过浏览器打开页面。由于HTML页面中没有添加任何内容，此时打开的只是一个空白页面，为了查看页面效果，可以使用记事本打开该文件，在两个<body>标记之间添加一句话，具体如下。
<body>
这是我的第一个HTML
</body>
保存后，使用浏览器再次打开页面，浏览器的显示结果如图1-2所示。
图1-2 第一个HTML页面
从图1-2中可以看出，<body></body>标记中的内容在浏览器中已经显示了出来。
需要注意的是，读者在编写 HTML 文件时，可以使用系统自带的记事本编写，也可以使用EditPlus、UltraEdit或Eclipse等工具编写。当使用工具创建HTML文件时，文件中的基本标记会被自动创建，编辑工具还会有代码颜色区分或者代码提示功能，开发者只需根据需求完善功能代码即可。工具的使用有助于提高编码效率，减少出错率。本章中的HTML都是在记事本中编写的，读者学习时可自己选择是否使用工具辅助编写。
1.1.2 单标记和双标记
不同标记描述的内容在浏览器中的显示效果是不一样的。页面中的信息必须放在相应的HTML 标记中，才能被浏览器正确解析。大部分标记都是成对出现的，如头部标记<head>、主体标记<body>，然而也有单个出现的标记，如水平线标记<hr />。通常将HTML标记分为两大类，分别是“单标记”与“双标记”，对这两个标记的具体介绍如下。
1．单标记
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下。
<标记名 />
例如，标记<hr />就是单标记，该标记用于定义一条水平线。需要注意的是，在标记名与“/”之间有一个空格，虽然在显示效果上有没有空格都一样，但是按照规范的要求，建议加上空格。
2．双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名>内容</标记名>
在上述的语法中，<标记名>表示该标记的作用开始，一般称为开始标记（Start Tag）,</标记名>表示该标记的作用结束，一般称为结束标记（End Tag）。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。例如，文件1-1中的<html></html>、<head></head>等都是双标记。
多学一招：为什么要有单标记？
HTML标记的作用原理就是选择网页内容，从而进行描述，也就是说需要描述谁，就选择谁，所以才会有双标记的出现，用于定义标记作用的开始与结束。而单标记本身就可以描述一个功能，不需要选择谁，例如水平线标记<hr />，按照双标记的语法，它应该写成“<hr></hr>”，但是水平线标记不需要选择谁，它本身就代表一条水平线，此时写成双标记就显得有点多余，但是又不能没有结束符号。所以，单标记的语法格式就是在标记名称后面加一个关闭符，即为<标记名 />。
1.1.3 文本控制与文本样式标记
1．段落标记<p></p>和换行标记<br />
为了使网页中的文字有条理地显示出来，HTML提供了段落标记<p></p>，如果希望某段文本强制换行显示，就需要使用换行标记<br />。接下来，通过案例来演示这两种标记的使用。在chapter01文件夹中新建HTML文件htmlDemo02，其关键代码如文件1-2所示。
文件1-2 htmlDemo02.html
1 <body>
2 <p>使用HTML制作网页时通过br标记<br />可以实现换行效果</p>
3 </body>
使用浏览器打开文件1-2，显示结果如图1-3所示。
图1-3 换行标记的使用
从图1-3中可以看出，使用换行标记<br />的文本实现了强制换行的效果。
2．文本样式标记
在HTML中，使用<font>标记来控制网页中文本的样式，如字体、字号和颜色。其基本语法格式如下：
<font 属性="属性值">文本内容</font>
接下来通过一个案例来演示<font>标记的使用。在 chapter01文件夹中新建 HTML 文件htmlDemo03，其关键代码如文件1-3所示。
文件1-3 htmlDemo03.html
1 <body>
2 我是默认样式的文本<br />
3 <font face="微软雅黑" size="7" color="green"><br />
4 我是7号绿色文本，我的字体是微软雅黑哦</font>
5 </body>
在文件1-3中，第2行的文本为HTML默认文本样式，第3行代码使用<font>标记的face、size以及color属性分别设置了文本的字体、大小以及颜色。使用浏览器打开文件1-3，显示结果如图1-4所示。
图1-4 使用<font>标记设置文本样式
1.1.4 图像标记
要想在HTML网页中显示图像就需要使用图像标记<img />。其基本的语法格式如下：
<img src="图像URL" />
在上述的语法中，src属性用于指定图像文件的路径，其属性的值可以是绝对路径，也可以是相对路径，它是<img/>标记的必需属性。要想在网页中灵活地应用<img />标记，只使用src属性是不行的，还需要其他属性的配合。
接下来通过一个案例来演示<img />标记的用法。在 chapter01文件夹中添加一个名称为106.jpg的图片文件，然后创建一个HTML文件htmlDemo04，其关键代码如文件1-4所示。
文件1-4 htmlDemo04.html
1 <body>
2 显示图片：<img src="106.jpg" width="102" height="130" border="0" />
3 </body>
在文件1-4中，width和height属性分别用来设置图像的宽度和高度，单位为像素，border属性用来设置图像的边框，border="0"表示无边框。使用浏览器打开文件1-4，显示结果如图1-5所示。
图1-5 使用<img />标记显示图片
从图1-5中可以看出，浏览器中已经显示出了相应的图片。
1.1.5 表格标记
在制作网页时，为了使网页中的数据能够有条理地显示，可以使用表格对网页进行规划。在Word文档中，可通过插入表格的方式来创建表格，而在HTML网页中要想创建表格，需要使用相关的表格标记才能创建表格。
在HTML网页中创建表格的基本语法格式如下所示。
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
在上述的语法中，包含3对HTML标记，分别为<table></table>、<tr></tr>、<td></td>，它们是创建表格的基本标记，缺一不可。<table></table>用于定义一个表格；<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标记中；<td></td>用于定义表格中的单元格，也可称为表格中的列，必须嵌套在<tr></tr>标记中。接下来，通过一个案例来演示<table>标记的使用。
在chapter01文件夹中创建一个HTML文件htmlDemo05，其关键代码如文件1-5所示。
文件1-5 htmlDemo05.html
1 <body>
2 <table border="1">
3 <tr>
4 <td>姓名</td>
5 <td>语文</td>
6 <td>数学</td>
7 <td>英语</td>
8 </tr>
9 <tr>
10 <td>itcast</td>
11 <td>95</td>
12 <td>80</td>
13 <td>90</td>
14 </tr>
15 </table>
16 </body>
在文件1-5中，<table>标记的border属性会为每个单元格应用边框，并用边框围绕表格。这里将border的属性设置为1，单位是像素，表示该表格边框的宽度为1像素。如果border属性的值发生改变，那么只有围绕表格的边框尺寸会发生变化，表格内部的边框还是1像素宽。如果将border的属性值设置为0或者删除border属性，将显示没有边框的表格。使用浏览器打开文件1-5，显示结果如图1-6所示。
图1-6 有边框表格的显示效果
将border属性值设置为0，保存后刷新页面，浏览器的显示结果如图1-7所示。
图1-7 无边框表格的显示效果
从图1-7的显示效果可以看出，表格中的内容依然整齐有序地排列着，但是这时已看不到边框。在实际开发中，建议使用CSS来添加边框样式和颜色。
1.1.6 表单标记
学习表单标记之前，首先需要理解表单的概念。简单地说，表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。其实表单在互联网上随处可见，例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标记定义的。
表单主要由3部分构成，分别为表单控件、提示信息和表单域，详细介绍如下所示。
• 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框提交按钮等。
• 提示信息：一个表单中通常还需要包含一些说明性的文字，即表单控件前的文字说明，用于提示用户进行填写和操作。
• 表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息。
1．创建表单
在HTML中，<form>标记用于定义表单域，即创建一个表单，其基本语法如下所示。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
在上述的语法中，action、method、name为<form>标记的常用属性，action属性用于指定表单提交的地址，例如 action="login.jsp"表示表单数据会提交到名为 login.jsp 的页面去处理。method属性用于设置表单数据的提交方式，其取值为GET或POST。其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制。而使用POST提交方式不但保密性好，还可以提交大量的数据，所以开发中通常使用POST方式提交表单。
2．表单控件<input>
浏览网页时，读者经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用<input />控件可以在表单中定义这些元素，其基本语法格式如下。
<input type="控件类型" />
在上述语法中，type 属性为其最基本的属性，取值有多种，用来指定不同的控件类型。除type属性外，<input />控件还可以定义很多其他属性，其中，比较常用的如id、name、value、size，它们分别用来指定input控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。接下来通过一个案例来演示<input />控件的使用。
在chapter01文件夹下创建一个HTML文件htmlDemo06，在该文件中使用表单控件来显示注册页面，其关键代码如文件1-6所示。
文件1-6 htmlDemo06.html
1 <body>
2 <fieldset>
3 <legend>注册新用户</legend>
4 <!-- 表单数据的提交方式为POST -->
5 <form action="#" method="post">
6 <table cellpadding="2" align="center">
7 <tr>
8 <td align="right">用户名：</td>
9 <td>
10 <!-- 1．文本输入框控件 -->
11 <input type="text" name="username" />
12 </td>
13 </tr>
14 <tr>
15 <td align="right">密码：</td>
16 <!-- 2．密码输入框控件 -->
17 <td><input type="password" name="password" /></td>
18 </tr>
19 <tr>
20 <td align="right">性别：</td>
21 <td>
22 <!-- 3．单选输入框控件，由于无法输入value, 所以预先定义好 -->
23 <input type="radio" name="gender" value="male" /> 男
24 <input type="radio" name="gender" value="female" /> 女
25 </td>
26 </tr>
27 <tr>
28 <td align="right">兴趣：</td>
29 <td>
30 <!-- 4．复选框控件 -->
31 <input type="checkbox" name="interest" value="film" /> 看电影
32 <input type="checkbox" name="interest" value="code" /> 敲代码
33 <input type="checkbox" name="interest" value="game" /> 玩游戏
34 </td>
35 </tr>
36 <tr>
37 <td align="right">头像：</td>
38 <td>
39 <!-- 5．文件上传控件 -->
40 <input type="file" name="photo" />
41 </td>
42 </tr>
43 <tr>
44 <td colspan="2" align="center">
45 <!-- 6．提交按钮控件 -->
46 <input type="submit" value="注册" />
47 <!-- 7．重置按钮控件，单击后会清空当前form -->
48 <input type="reset" value="重填" />
49 </td>
50 </tr>
51 </table>
52 </form>
53 </fieldset>
54 </body>
在文件1-6中，分别使用<input />标记定义了文本输入框控件、密码输入框控件、单选框和复选框控件、文件上传控件以及提交和重置按钮控件。在上述控件中，name属性代表控件名称，value属性表示该控件的值。需要注意的是，单选框控件和复选框控件必须指定相同的name值，这是为了方便在处理页面数据时获取表单传递的值（表单所传递的就是该控件的value值）。上述代码中，还使用了<fieldset>和<legend>标记。<fieldset>标记的作用是将表单内的元素分组，而<legend>标记则为<fieldset>标记定义标题。
使用浏览器打开文件1-6，显示结果如图1-8所示。
图1-8 表单控件的使用
填写完图1-8中所示的表单数据后，页面如图1-9所示。
图1-9 表单控件的使用
从图1-9可以看出，密码输入框中内容为不可见状态，单选按钮只能选择一个值，而复选框可以选择多个值。
与其他语言类似，HTML 中也提供了代码注释，它以“<!--”开头，以“-->”结束，其语法如下所示。
<!--注释内容-->
在文件1-6中，就大量地使用了HTML注释，被注释的内容不会显示到浏览器页面上，但是通过查看浏览器中的源代码可以看到HTML中的注释信息。
多学一招：HTML的多行文本标记
通过前面的学习可知，使用<input />标记可以定义单行文本输入框。但是，如果需要输入大量的文本信息，单行文本框将无法显示全部的输入信息，为此 HTML 语言提供了<textarea></textarea>标记。通过此标记可以创建多行文本框，其基本语法格式如下。
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
接下来通过一个案例来演示<textarea></textarea>标记的使用。
在chapter01文件夹中创建一个名称为htmlDemo07的HTML文件，其关键代码如文件1-7所示。
文件1-7 htmlDemo07.html
1 <body>
2 <form action="#" method="post">
3 评论： <br />
4 <textarea cols="60" rows="5">
5 评论时，请注意文明用语。
6 </textarea>
7 <br /> <br />
8 <input type="submit" value="提交" />
9 </form>
10 </body>
在文件1-7中，cols属性用于设置文本框每行的字符数为60,rows属性用于设置文本框的行数为5行，<textarea>标记之间的文字为默认显示文本，该文字可以被用户修改或删除，这里起提示作用。使用浏览器打开文件htmlDemo07，显示结果如图1-10所示。
图1-10 多行文本框的使用
1.1.7 列表标记和超链接标记
1．无序列表<ul>
列表标记分为有序列表和无序列表，由于在HTML中无序列表较为常用，所以下面针对无序列表进行详细的讲解。为了使网页更易读，经常将网页信息以列表的形式呈现，例如淘宝商城首页的商品分类就是以列表的形式呈现的。无序列表的各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下所示。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
在上述语法中，<ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。接下来通过一个案例来演示<ul></ul>标记的使用。
在chapter01文件夹中创建一个HTML文件htmlDemo08，其关键代码如文件1-8所示。
文件1-8 htmlDemo08.html
1 <body>
2 <font size="5">传智播客学科</font><br />
3 <ul>
4 <li>web前端</li>
5 <!-- 指定type属性值 ,disc为默认值-->
6 <li type="disc">JAVA</li>
7 <li type="square">PHP</li>
8 <li type="circle">.NET</li>
9 </ul>
10 </body>
在文件1-8中，<li></li>标记的type属性用来指定列表项目符号。type常用的属性值有3种：disc、square 和 circle，它们的显示效果分别是●、■和○,type 属性的默认值是 disc，在代码的第4行使用了默认值，代码的第6行显示设置的type属性值为"disc"。使用浏览器打开文件1-8，显示结果如图1-11所示。
图1-11 无序列表的显示效果
2．超链接标记
一个网站通常由多个页面构成，进入网站时首先看到的是其首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在 HTML 中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。其基本语法格式如下所示。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
在上述语法中，<a></a>标记是一个行内标记，用于定义超链接，href 属性用于指定链接指向的页面的URL，当在<a></a>标记中使用href属性时，该标记就具有了超链接的功能；target属性用于指定页面的打开方式，其取值有_self、_blank、_parent和_top（_self和_blank较为常用），其中_self为默认值，意为在原窗口打开，_blank为在新窗口打开，_parent是在父框架集中打开被链接文档，_top是在整个窗口中打开被链接文档。接下来通过一个案例来演示<a></a>标记的使用。
在chapter01文件夹中创建一个HTML文件htmlDemo09，其关键代码如文件1-9所示。
文件1-9 htmlDemo09.html
1 <body>
2 在新窗口打开：
3 <a href="http://www.itcast.cn/" target="_blank">传智播客</a><br />
4 在原窗口打开：
5 <a href="http://www.baidu.com/" target="_self">百度</a>
6 </body>
在文件1-9中，使用<a></a>标记定义了两个超链接，其中传智播客首页链接的打开方式设置为在新窗口打开，百度首页面的打开方式设置为在原窗口打开，使用浏览器打开文件1-9，显示效果如图1-12所示。
图1-12 带有超链接的页面
从图1-12中可以看到两个超链接，单击“传智播客”链接后，页面跳转效果如图1-13所示。
图1-13 链接页面在新窗口打开
从图1-13中可以看出，当单击“传智播客”链接时，“传智播客”首页面在新窗口打开了。关闭新窗口，回到原窗口再单击“百度”链接时，页面跳转效果如图1-14所示。
图1-14 链接页面在原窗口打开
从图1-14中可以看出，当单击“百度”链接后，“百度”首页面会在原窗口打开。
1.1.8 <div>标记
div是英文Division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。在HTML页面中，它以<div>开头，并以</div>结尾，在<div>与</div>之间可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，并且<div>还可以嵌套多层<div>。在实际开发中<div>标记常常与 CSS 技术搭配使用，在下一小节讲解 CSS 技术的过程中会对<div>标记的使用进行举例，这里不多赘述。