2.1 HTML标记语言
相信所有读者都有在互联网获取信息的习惯。在浏览器的地址栏中输入一个网址，就会展示出相应的网页内容。在网页中包含有很多内容，如文字、图片、动画，以及声音和视频等。网页的最终目的是为访问者提供有价值的信息。提到网页设计不得不提到HTML标记语言，HTML全称Hypertext Markup Language，译为超文本标记语言。HTML用于描述超文本中内容的显示方式。使用HTML可以实现在网页中定义一个标题、文本或者表格等。本节将详细介绍HTML标记语言。
2.1.1 创建第一个HTML文件
编写HTML文件可以通过两种方式：一种是手工编写HTML代码；另一种是借助一些开发软件。例如Adobe公司的Dreamweaver或者微软公司的Expression Web这样的网页制作软件。在Windows操作系统中，最简单的文本编辑软件就是记事本。
下面为大家介绍应用记事本编写第一个HTML文件。HTML文件的创建方法非常简单，具体步骤如下：
（1）依次选择“开始”→“程序”→“附件”→“记事本”命令。
（2）在打开的记事本窗体中编写代码，如图2.1所示。
图2.1 在记事本中输入HTML文件内容
（3）编写完成之后，需要将其保存为HTML格式文件。具体步骤为：选择记事本菜单栏中的“文件”→“另存为”命令，弹出“另存为”对话框，首先在“保存类型”下拉列表框中选择“所有文件”选项，然后在“文件名”文本框中输入一个文件名。需要注意的是，文件名的后缀应该是.htm或者.html，如图2.2所示。
图2.2 保存HTML文件
说明
如果没有修改记事本的“保存类型”，那么记事本会自动将文件保存为.txt文件，即普通的文本文件，而不是网页类型的文件。
（4）设置完成后，单击“保存”按钮，则成功保存了HTML文件。此时，双击该HTML文件，就会显示页面内容，效果如图2.3所示。
图2.3 运行HTML文件
这样，就完成了第一个HTML文件的编写。尽管该文件内容非常简单，但是却体现了HTML文件的特点。
技巧
在浏览器的显示页面中右击，在弹出的快捷菜单中选择“查看源代码”命令，这时会自动打开记事本程序，里面显示的则为HTML源文件。
2.1.2 HTML文档结构
HTML文档由4个主要标记组成，这4个标记是<html>、<head>、<title>和<body>。在2.1.1节中为大家介绍的实例里，就包含了这4个标记，这4个标记构成了HTML页面最基本的元素。
1．<html>标记
<html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束。HTML页面的所有标记都要放置在<html>与</html>标记中，<html>标记并没有实质性的功能，但却是HTML文件不可缺少的内容。
说明
HTML标记是不区分大小写的。
2．<head>标记
<head>标记是HTML文件的头标记，作用是放置HTML文件的信息。如定义CSS样式代码可放置在<head>与</head>标记中。
3．<title>标记
<title>标记为标题标记。可将网页的标题定义在<title>与</title>标记中。例如在2.1.1节中定义的网页的标题为“HTML页面”，如图2.4所示。<title>标记被定义在<head>标记中。
图2.4 <title>标记定义页面标题
4．<body>标记
<body>是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的，以<body>标记开头，以</body>标记结束。<body>标记本身也具有控制页面的一些特性，例如控制页面的背景图片和颜色等。
本节中介绍的是HTML页面最基本的结构。要深入学习HTML语言，创建更加完美的网页，必须学习HTML语言的其他标记。
2.1.3 HTML常用标记
HTML中提供了很多标记，可以用来设计页面中的文字、图片，定义超链接等。这些标记的使用可以使页面更加生动，下面介绍HTML中的常用标记。
1．换行标记
要让网页中的文字实现换行，在HTML文件中输入换行符（Enter键）是没有用的，必须用一个标记告诉浏览器在哪里要实现换行操作。在HTML语言中，换行标记为<br>。
与前面为大家介绍的HTML标记不同，换行标记是一个单独标记，不是成对出现的。下面通过实例来介绍换行标记的使用。
【例2.1】 创建HTML页面，实现在页面中输出一首古诗。（实例位置：资源包\TM\sl\2\1）
运行本实例，结果如图2.5所示。
图2.5 在页面中输出古诗
2．段落标记
HTML中的段落标记也是一个很重要的标记，段落标记以<p>标记开头，以</p>标记结束。段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容，不受该标记的影响。
3．标题标记
在Word文档中，可以很轻松地实现不同级别的标题。如果要在HTML页面中创建不同级别的标题，可以使用HTML语言中的标题标记。在HTML标记中，设定了6个标题标记，分别为<h1>~<h6>，其中<h1>代表1级标题，<h2>代表2级标题……<h6>代表6级标题。数字越小，表示级别越高，文字的字体也就越大。
【例2.2】 在HTML页面中定义文字，并通过标题标记和段落标记设置页面布局。（实例位置：资源包\TM\sl\2\2）
运行本实例，结果如图2.6所示。
图2.6 使用标题标记和段落标记设计页面
4．居中标记
HTML页面中的内容有一定的布局方式，默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示，可以使用HTML中的<center>标记。<center>标记以<center>标记开头，以</center>标记结尾。标记中的内容为居中显示。
对例2.2中的代码进行修改，使用居中标记将页面内容居中。
【例2.3】 使用居中标记对页面中的内容进行居中处理。（实例位置：资源包\TM\sl\2\3）
将页面中的内容进行居中后的效果如图2.7所示。
图2.7 将页面中的内容进行居中处理
5．文字列表标记
HTML语言中提供了文字列表标记，文字列表标记可以将文字以列表的形式依次排列。通过这种形式可以更加方便网页的访问者使用。HTML中的列表标记主要有无序列表和有序列表两种。
无序列表
无序列表是在每个列表项的前面添加一个圆点符号。通过符号<ul>可以创建一组无序列表，其中每一个列表项以<li>表示。下面的实例为大家演示了无序列表的应用。
【例2.4】 使用无序列表对页面中的文字进行排序。（实例位置：资源包\TM\sl\2\4）
本实例的运行结果如图2.8所示。
图2.8 在页面中使用无序列表表
有序列表
有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>，每一个列表项前使用<li>。有序列表中的项是有一定顺序的。下面对例2.4进行修改，使用有序列表进行排序。
【例2.5】 使用有序列表对页面中的文字进行排序。（实例位置：资源包\TM\sl\2\5）
运行本实例，结果如图2.9所示。
图2.9 在页面中插入有序列的列表
2.1.4 表格标记
表格是网页中十分重要的组成元素。表格用来存储数据。表格包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格仅使用<table>是不够的，还需要定义表格中的行、列、标题等内容。在HTML页面中定义表格，需要学会以下几个标记。
表格标记<table>
<table>…</table>标记表示整个表格。<table>标记中有很多属性，例如width属性用来设置表格的宽度，border属性用来设置表格的边框，align属性用来设置表格的对齐方式，bgcolor属性用来设置表格的背景色等。
标题标记<caption>
标题标记以<caption>开头，以</caption>结束，标题标记也有一些属性，例如align、valign等。
表头标记<th>
表头标记以<th>开头，以</th>结束，也可以通过align、background、colspan、valign等属性来设置表头。
表格行标记<tr>
表格行标记以<tr>开头，以</tr>结束，一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用，该标记也具有align、background等属性。
单元格标记<td>
单元格标记<td>又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有align、background、valign等属性。
【例2.6】 在页面中定义学生成绩表。（实例位置：资源包\TM\sl\2\6）
运行本实例，结果如图2.10所示。
图2.10 在页面中定义学生成绩表
说明
表格不仅可以用于显示数据，在实际开发中，还常常用来设计页面。在页面中创建一个表格，并设置没有边框，之后通过该表格将页面划分为几个区域，之后分别对几个区域进行设计，这是一种非常方便的设计页面的方式。
2.1.5 HTML表单标记
对于经常上网的人来说，对网站中的登录等页面肯定不会感到陌生，在登录页面中，网站会提供给用户用户名文本框与密码文本框，以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。
1．<form>…</form>表单标记
表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下：
<form action = "url" method = "get'|"post" name = "name" onSubmit = "" target ="">
</form>
<form>标记的各属性说明如下。
action属性
该属性用来指定处理表单数据程序的URL地址。
method属性
该属性用来指定数据传送到服务器的方式。它有两种属性值，即get与post。get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中的post传输方式传送到服务器。
name属性
该属性指定表单的名称，程序员可以自定义其值。
onSubmit属性
该属性用于指定当用户单击提交按钮时触发的事件。
target属性
该属性指定输入数据结果显示在哪个窗口中，其属性值可以设置为_blank、_self、_parent和_top。其中，_blank表示在新窗口中打开目标文件；_self表示在同一个窗口中打开，该项一般不用设置；_parent表示在上一级窗口中打开，一般使用框架页时经常使用；_top表示在浏览器的整个窗口中打开，忽略任何框架。
下面的例子为创建表单，设置表单名称为form，当用户提交表单时，提交至action.html页面进行处理。
【例2.7】 定义表单元素，代码如下：
<form id="form1" name="form" method="post" action="action.html" target="_blank">
</form>
2．<input>表单输入标记
表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、按钮等。<input>标记的语法格式如下：
<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit"
readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">
<input>标记的属性如表2.1所示。
表2.1 <input>标记的属性
type属性是<input>标记中非常重要的内容，决定了输入数据的类型。该属性值的可选项如表2.2所示。
表2.2 type属性的属性值
【例2.8】 在该文件中首先应用<form>标记添加一个表单，将表单的action属性设置为register_deal.jsp，method属性设置为post，然后应用<input>标记添加获取用户名和E-mail的文本框、获取密码和确认密码的密码域、选择性别的单选按钮、选择爱好的复选框、提交按钮、重置按钮。关键代码如下：（实例位置：资源包\TM\sl\2\7）
在页面中添加表单元素后，即形成了网页的雏形。页面运行结果如图2.11所示。
图2.11 博客网站的注册页面
3．<select>…</select>下拉列表框标记
<select>标记可以在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，要使用<option>标记向列表中添加内容。<select>标记的语法格式如下：
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>
<select>标记的属性如表2.3所示。
表2.3 <select>标记的属性
【例2.9】 在页面中应用<select>标记和<option>标记添加下拉列表框和多行下拉列表框。关键代码如下：
运行本程序，可发现在页面中添加了下拉列表框，如图2.12所示。
图2.12 在页面中添加的下拉列表框
4．<textarea>多行文本标记
<textarea>为多行文本标记，与单行文本相比，多行文本可以输入更多的内容。通常情况下，<textarea>标记出现在<form>标记的标记内容中。<textarea>标记的语法格式如下：
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值
</textarea>
<textarea>标记的属性如表2.4所示。
表2.4 <textarea>标记的属性
表2.5 wrap属性的可选值
【例2.10】 在页面中创建表单对象，并在表单中添加一个多行文本框，文本框的名称为content，6行30列，文字换行方式为hard。关键代码如下：
运行本实例，在页面中的多行文本框中可输入任意内容，运行结果如图2.13所示。
图2.13 在页面的多行文本框中输入内容
2.1.6 超链接与图片标记
HTML语言的标记有很多，本书由于篇幅有限，不能一一为大家介绍，只能介绍一些常用标记。除了上面介绍的常用标记外，还有两个标记需要向大家介绍，即超链接标记与图片标记。
1．超链接标记
超链接标记是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这个功能就是通过超链接标记来完成的。超链接标记的语法非常简单。其语法格式如下：
<a href = ""></a>
属性href用来设定链接到哪个页面中。
2．图片标记
大家在浏览网页时通常会看到各式各样的漂亮图片，在页面中添加的图片是通过<img>标记来实现的。<img>标记的语法格式如下：
<img src="uri" width="value" height="value" border="value" alt="提示文字" >
<img>标记的属性如表2.6所示。
表2.6 <img>标记的属性
下面给出具体实例，为读者演示超链接和图片标记的使用。
【例2.11】 在页面中添加表格，在表格中插入图片和超链接。（实例位置：资源包\TM\sl\2\8）
运行本实例，结果如图2.14所示。
图2.14 在页面中添加图像和超链接
页面中的“查看详情”为超链接，当用户单击该超链接后，将跳转至message.html页面，如图2.15所示。
图2.15 message.html页面的运行结果