2.2 HTML标签
2.2.1 文字与段落
文本在网页中的应用是很重要的。文本是网页中最基本的元素之一，也是浏览者通过网络获取信息的一种最主要的方式之一。网页中常见的文本标签有标题标签、段落标签和其他的一些为了展示特殊文本格式的常用标签。
1．标题文字标签
网页的内容页中通常用一篇文章来描述信息，该信息一定存在标题，有可能还有多个标题。因此网页中提供了标题标签来表达网页中的标题。所谓标题文字就是以某种固定的字号显示的文字。标题文字包含6种层级，分别用标签h1～h6来描述，从1级到6级依次减小。
【例2-1】标题文字。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>标题文字</title>
</head>
<body>
<h1>1级标题文字</h1>
<h2>1级标题文字</h2>
<h3>1级标题文字</h3>
<h4>1级标题文字</h4>
<h5>1级标题文字</h5>
<h6>1级标题文字</h6>
</body>
</html>
程序的运行结果如图2-1所示。
图2-1 标题文字
2．段落文字标签
段落文字在页面内容中也是经常用到的。在HTML页面中，段落是通过＜p＞标签来表示的。段落标签是双标签，在使用时最好采用成对的＜p＞标签来包含段落。
【例2-2】段落文字。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>段落文字</title>
</head>
<body>
<p>段落文字在页面内容中也是最常用到的。在HTML页面中，段落是通过p标签来表示的。
段落标签是双标签，在使用时最好采用成对的p标签来包含段落。</p>
</body>
</html>
程序的运行结果如图2-2所示。
图2-2 段落文字
3．其他常用文字标签
除标题标签和段落标签外，页面内容还有很多格式需要展现。因此，HTML还提供了一些其他的常用文字标签，如表2-2所示。
表2-2 其他常用的文字标签
由于以上除span标签外的其他文字标签所展现出来的文字格式都可以通过样式设置来完成，因此，在HTML 5中，这些标签都被取缔，而通过样式设置来实现特殊的文字格式。
4．转义字符
HTML页面所使用的标签是一些带有“＜”“＞”尖括号的普通字符，如果页面内容中需要显示出尖括号或带有尖括号的字符，浏览器则会将这些带有尖括号的符号识别为HTML的标签，不会显示在页面内容中。因此，HTML提供了一些转义字符来表达这些特殊字符， 见表2-3。
表2-3 转义字符
在HTML中，转义字符的编码是以“＆”符号开始，以“; ”符号结束，中间为相关转义字符的编码。“＆”和“; ”符号是不可省略的。
页面中的空格符号也是需要转义字符来实现的。文字换行也需要换行标签＜br＞，直接通过文字的换行排版是行不通的。
2.2.2 图片与超链接
除文字外，图片也是网页中最重要的元素之一。合理使用图片可以使网页增添不少色彩。网页支持多种图片格式，可以是GIF、JPEG、PNG、BMP等格式。其中GIF和JPEG格式是网页中最常用的。近年来具有不失真且支持透明的PNG格式图片也经常用在网页中，特别是移动端的网页应用最为广泛。
1．插入图片
网页中使用图片有两种形式，一种是在网页中直接插入图片；另一种是将图片作为背景样式设置在网页中。网页中插入图片使用＜img＞标签（见表2-4）。＜img＞标签是单标签，仅使用该标签并不能将图片插入网页中，必须要有图片来源的标签属性src。
表2-4 ＜img＞标签的属性及描述
src属性用于指定图片源文件的路径，它是＜img＞标签必不可少的属性，使图片显示在网页中。
【例2-3】插入图片。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>插入图片</title>
</head>
<body>
<img src="images/hua.jpg"width="240"height="170"title="鲜花"alt="美丽的花
朵"/>
</body>
</html>
程序的运行结果如图2-3所示。
图2-3 插入图片（正常显示）
＜img＞标签中的src属性指定了图片源的路径，width属性指定图片在网页中的显示宽度，height属性指定图片在网页中的显示高度，title属性是鼠标光标移到网页中显示图片上时所展示出来的文本描述，alt属性是图片在浏览器中无法正常显示时代替图片所显示的文本信息，如图2-4所示。
图2-4 插入图片（不能正常显示图片）
2．超链接
Web上的网页都是互相链接的，通过点击一个页面上的超链接可以进入其他页面。
网页中超链接是通过＜a＞标签（见表2-5）完成的。＜a＞标签是双标签。在成对的＜a＞标签之间的内容即为网页上所显示的可单击的超链接对象，该对象可以是文字，也可以是图片。与＜img＞标签类似，超链接也不仅仅是通过＜a＞标签实现的，必须要有链接的目标属性href。
表2-5 ＜a＞标签的属性及描述
href属性指定超链接将要链接到的目标文件的路径，target属性指定链接目标的窗口打开方式。在使用＜a＞标签时，target属性可以省略，省略时链接将在当前窗口打开。若要在新的浏览器窗口中打开链接，target属性值设置为：target＝＂＿blank＂。由于HTML 5已经取消了框架集（frameset），所以target的其他三个属性值（target＝＂＿parent＂、target＝＂＿self＂、target＝＂＿top＂）也基本没有用。
【例2-4】文字和图片超链接。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>文字和图片超链接</title>
</head>
<body>
<a href="例2-2.html"target="_blank">文字链接</a>
<a href="例2-3.html"><img src="images/hua.jpg"width="240"height="170"/>
</a>
</body>
</html>
程序的运行结果如图2-5所示。
图2-5 文字和图片超链接
超链接＜a＞标签的href属性指向链接的目标文件，而链接的目标文件可以是各种类型的文件。超链接不仅可以链接到图片文件、声音文件、视频文件、Word文档等，还可以链接到其他网站、FTP服务器、电子邮件等。
2.2.3 列表标签
列表标签也是网页中常用的标签。列表可以有序地对信息资源进行排版，使页面结构具有条理性。HTML提供了无序列表、有序列表和定义列表三种列表标签。
1．无序列表
无序列表就像是Word中的项目符号，列表项没有排列顺序，只有列表项目符号。无序列表用一对＜ul＞＜/ul＞标签表示，列表项用一对＜li＞＜/li＞标签表示。项目符号则用＜ul＞标签的type属性表示。
无序列表＜ul＞的type属性见表2-6。
表2-6 无序列表＜ul＞的type属性
在一个无序列表中可以包含多个列表项，列表项的结尾标记＜/li＞可以省略，但为了结构的完整性，最好不要省略。列表项中可以嵌套列表。
【例2-5】无序列表。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>无序列表</title>
</head>
<body>
<ul>
<li>一级标题</li>
<li>一级标题</li>
<li>一级标题
<ul>
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<li>一级标题</li>
<li>一级标题</li>
<li>一级标题</li>
</ul>
</body>
</html>
程序的运行结果如图2-6所示。
图2-6 无序列表
嵌套列表在未设置项目符号时，会默认以另一种符号显示。
2．有序列表
有序列表类似于Word中的编号列表，列表项按照一定的顺序排列。有序列表采用一对＜ol＞＜/ol＞标签表示，列表项依然采用一对＜li＞＜/li＞标签表示，但列表项具有一定的顺序。列表项符号通过type属性设置，如表2-7所示。
表2-7 有序列表＜ol＞的type属性
有序列表项中也可以嵌套列表，嵌套的列表可以是有序列表，也可以是无序列表。有序列表的列表符号从前到后依次排序，默认情况下都是从1开始。如果第一个列表项的项目符号不从1开始，则使用start属性设置。然而start属性的属性值只能是数字“1,2,3, …”。如果第一个列表项符号从“F”开始，并不是将start属性值设置为：start＝＂F＂，而是将start属性值设置为：start＝＂6＂。
【例2-6】有序列表。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>有序列表</title>
</head>
<body>
<ol>
<li>有序列表一级列表
<ul>
<li>有序列表二级列表</li>
<li>有序列表二级列表</li>
<li>有序列表二级列表</li>
</ul>
</li>
<li>有序列表一级列表</li>
<li>有序列表一级列表
<ol type="A"start="6">
<li>有序列表二级列表</li>
<li>有序列表二级列表</li>
<li>有序列表二级列表</li>
</ol>
</li>
<li>有序列表一级列表</li>
<li>有序列表一级列表</li>
<li>有序列表一级列表</li>
</ol>
</body>
</html>
程序的运行结果如图2-7所示。
图2-7 有序列表
3．定义列表
定义列表用来展示术语及其解释。定义列表用一对＜dl＞＜/dl＞标签表示，列表项中的术语用＜dt＞＜/dt＞标签表示，列表项中的解释用＜dd＞＜/dd＞标签表示。术语和解释都各占一行，术语顶格显示，解释则换行缩进显示。
【例2-7】定义列表。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>定义列表</title>
</head>
<body>
<dl>
<dt>名词解释</dt>
<dt>无序列表</dt>
<dd>无序列表就像是Word中的项目符号，列表项没有排列顺序，只有列表项目符号。
</dd>
<dt>有序列表</dt>
<dd>有序列表类似于Word中的编号列表，列表项按照一定的顺序排列。</dd>
<dt>定义列表</dt>
<dd>定义列表用来展示术语及其解释。</dd>
</dl>
</body>
</html>
程序的运行结果如图2-8所示。
图2-8 定义列表
定义列表中的列表项“术语”和“解释”并不一定要交替列示，可以连续出现多对＜dt＞＜/dt＞标签，也可以连续出现多对＜dd＞＜/dd＞标签，还可以交替出现。
2.2.4 表格标签
在HTML中创建表格的语法是完全按照表格的自然构成来组织的。
1．创建表格
在Word或者Excel中的表格具有行和列，在网页中表格同样具有行和列。在HTML文档中创建表格时，首先需要确定创建几行几列的表格，然后才开始创建。因此，表格由三个基本元素组成：table元素、tr元素、td元素。
（1）table元素：用来定义表格，整个表格包含在＜table＞和＜/table＞标签中。
（2）tr元素：用来定义表格中的行。一对＜tr＞和＜/tr＞标签表示表格中的一行。它也是单元格容器，一行中可以包含若干个单元格。
（3）td元素：表格的列标记，也是表格的单元格，包含在表格的行标记＜tr＞中。每个单元格用一对＜td＞和＜/td＞标签表示。
（4）th元素：有时候会看到表格中存在th元素，其实它跟td元素一样也可以表示表格的单元格，所不同的是，它可以用来创建表格的头信息单元格，俗称表头元素，一般用在表格的第一行或者第一列。表头元素从样式上看，其实就是对单元格内的文字进行了加粗设置。因此，在使用表格时不常用表头元素，而直接采用单元格td元素，只需要设置样式来达到表头的显示效果。
（5）caption元素：表格的标题标签。通过它可以对创建表格的目的和作用进行一个简单的说明。caption元素内的内容即为该表格的标题。caption元素只能被定义在table元素的开始标签之后，tr元素之前，并且一个表格即一个table元素中仅能定义一个caption元素。
表格在网页中的结构表现与自然结构是相同的，具有行和列。因此表格的基本结构如下：
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
表格＜table＞标签中包含行＜tr＞标签，在行标签中包含列＜td＞标签。
2．单元格的合并与拆分
（1）横向合并单元格
横向合并单元格就是将一行中的几个单元格进行合并，合并的是单元格的列数，用colspan属性来进行设置，相应的这一行中的单元格个数对应减少。属性值是一个数字，表示合并的单元格的个数。
（2）纵向合并单元格
纵向上的单元格合并是将同一列中的几个单元格进行合并，合并的是这一列单元格的行数，用rowspan属性来进行设置，相应的其他行中的单元格个数对应减少。它的属性值也是一个数字，表示合并的单元格的个数。
在我们对单元格合并的实际应用中，并不一定只有横向的合并或者只有纵向的合并，有时候既有横向的合并，也有纵向的合并，即将相邻的多行多列单元格进行合并。合并后的单元格中既有colspan属性，也有rowspan属性。
（3）单元格的拆分
一个单元格可以拆分成多个单元格。单元格拆分时可以拆分成多行，也可以拆分成多列，但是一次拆分只能操作一个单元格，并且一次拆分要么拆分成多行，要么拆分成多列，不能一次操作既有多行又有多列的拆分。既有多行又有多列的拆分可以分多次进行。
单元格的拆分，其实质是将其他相关的单元格进行合并操作。如：将一行中的一个单元格拆分成两行的两个单元格，而这一行中其他的所有单元格，都在纵向上合并了两个单元格，分别增加了rowspan＝＂2＂的属性，并且表格会增加一行，即多了一对＜tr＞标签，＜tr＞标签中只有一对＜td＞标签。
3．表格的嵌套
表格可以用来布局网页，但是网页的栏目板块有时候是以不规则形式展现的。因此，要用标准的表格去布局不规则的网页栏目时，会采用一定的表格嵌套来完成。
表格的嵌套就是在建立的表格中的某一个单元格当中，再创建一个表格。
<table width="600"border="1">
<tr>
<td width="150"height="200"> </td>
<td width="150"height="200"> </td>
<td width="150"height="200"> </td>
<td width="150"height="200"> </td>
</tr>
<tr>
<td height="100"colspan="4"><table width="100%"border="1">
<tr>
<td width="200"height="200"> </td>
<td width="200"height="200"> </td>
<td width="200"height="200"> </td>
</tr>
</td>
</tr>
</table>
表格的嵌套常用在网页的布局中。
2.2.5 表单标签
HTML表单通常在网页中表现为注册、登录页面，调查信息表、订单页面以及一些搜索界面等。这些页面主要是用来搜集用户信息，并且将这些收集来的信息发送到服务器端进行处理。因此，表单是客户端与服务器端传递数据的桥梁，也是用户与服务器之间实现相互交互的最主要的方式。
1．创建表单
网页中的表单用＜form＞＜/form＞标签进行创建。表单标签是双标签，用一对标签分别定义表单的开始位置和结束位置，在标签对之间创建表单控件。在表单的开始标签＜form＞中，可以设置表单的基本属性，包括表单的名称name属性，处理表单数据的目标程序action属性以及传送数据的方法method属性等。表单＜form＞标签相当于是表单的容器，里面除了包含表单控件外，还可以包含其他的文本元素，如段落、列表等。表单标签中常用的属性如表2-8所示。
表2-8 表单标签中常用的属性
表单标签中的method属性如表2-9所示。
表2-9 表单标签中的method属性
2．表单控件
用户与表单交互是通过表单的控件进行的。表单控件通过name属性进行标识，通过value属性值获取输入数据。表单的“提交”是通过表单的“提交”按钮完成的。
表单控件中，input元素可以定义表单中的大部分的控件，控件的类型由type属性（见表2-10）决定，不同的值对应不同类型的表单控件。
表2-10 input元素的type属性
除了type属性，input元素还有以下一些常用的属性。
（1）name属性：为表单控件定义一个名称标识，这个名称将与控件的当前值组成“＆名称＝值”对，并一同随着表单数据进行提交。
（2）value属性：用于指定初始值，即默认的显示值。当文本框中没有输入信息时，在网页中显示出来的是初始值。它是可选的，可以不设置。但是value属性非常重要，因为它的值将会被发送到服务器，即使是单选框或复选框，最好都设置好value属性，这样提交数据时也可以将单选按钮和复选框中用户所选择的信息提交出去。
（3）size属性：设置表单控件的初始宽度，值是以字符的个数为单位。
（4）checked属性：这个属性只针对单选按钮和复选框进行设置。它是一个逻辑值，指定单选按钮或复选框是否处于选中状态。当表单控件（单选按钮或复选框）中设置该属性时，表示该选择框被选中；没有设置则表示该选择框没有被选中。checked属性只用于单选按钮和复选框，且只有一个属性值checked。
（5）maxlength属性：指定表单控件中可以输入的最大字符数，数值可以超过size属性设置的数值。该属性常用于单行输入文本框和密码框。如果控件中不设置该属性，表示该控件对输入的字符数没有限制。
（6）src属性：只针对type＝＂image＂的图像按钮，用来设置图像文件的路径。
还可以设置readonly属性，用于在文本框中显示文本，而不能输入数据。
2.2.6 注释标签
网页稍大一些，结构就会显得复杂。在HTML源代码中适当加入注释语句，能够使网页结构代码更清晰，更具有可读性，这也是设计者编写代码的一种好习惯，便于以后修改。另外，其他的设计者拿到具有注释的源代码也很容易上手。
所谓注释，是在HTML代码中插入用来解释或提示性的描述信息文本。注释语句只出现在代码中，浏览器不会对注释代码进行解释从而显示在浏览器的展示区域。
HTML中的注释标签为“＜!--注释的内容--＞”，可以注释一行或多行代码，而且可以注释HTML代码。只要将要注释的代码放在“＜!--”和“--＞”之间，这些代码就不会在浏览器中显示出来。
【例2-8】注释标签。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>注释标签</title>
</head>
<body>
<h3>以下是注释内容</h3>
<!--注释内容
<a href="例 -2.html"target="_blank">文字链接</a>
<a href="例2-3.html"><img src="images/hua.jpg"width="240"height="170"/>
</a>
-->
</body>
</html>
程序的运行结果如图2-9所示。
图2-9 注释标签
源代码中被注释的代码不会在浏览器中显示。