第2章 HTML入门
HTML，全称是Hypertext Mark-up Language，即超文本标记语言，是一种用于描述网页的语言。HTML是整个WWW的基础，整个Web就是由不计其数的用HTML编写的网页组成的。
随着可视化网页制作工具的功能完善，有人提出，不懂HTML也可以制作网页，这是错误的。尽管网页制作工具提供了丰富的功能，但是，还有很多工具不能提供的功能，这就需要手工编写HTML代码。因此，学习并掌握HTML是制作网站的基础，专门制作网页的人员都是从了解HTML开始的。
本章主要介绍HTML相关的知识。涉及的知识点如下。
◆ 网页的结构：标准的网页由哪些部分构成。
◆ 常见的HTML标签：介绍各种类型的HTML标签的使用方法。
2.1 HTML的基本语法
了解并掌握HTML的基本语法是开始制作网页的基础。本节介绍网页的组成要素，以及如何直接使用HTML源代码来设计一个网页。
2.1.1 HTML静态网页结构
静态网页一般都以html或者htm作为后缀，以区别于动态网页。HTML文件实际上是一种文本文件，因此，可以用普通的文本编辑工具来查看或修改HTML文件。
一个最基本的静态网页的源代码如下：
01 <html>
02 <head>
03 <title>网页标题</title>
04 </head>
05 <body>
06 <p>
07 这是第一个网页。
08 </p>
09 </body>
10 </html>
在上面的代码中，第1行是<html>，最后1行是</html>，这两个标签组成一个完整的html元素，所有的内容都位于这两个标签之间。其中第1行表示HTML文件的开始，最后1行表示HTML文件结束。第2行是一个<head>标签，这个标签跟第4行的</head>标签配对，一起组成head元素。在head元素中是一些关于本HTML文档本身的描述信息。在本例中，head元素里面有一个title元素。title元素是文档的标题信息，这个信息会显示在浏览器的最上面的标题栏里。
head元素后面是<body>标签，这个标签表示文档正文的开始，而倒数第2行的</body>标签表示文档正文的结束，这两个标签组成body元素。在body元素内部，有一个p元素。p元素表示HTML文档中的段落。<p>标签和</p>标签之间的文本构成一个段落。
打开记事本程序，输入前面所示的源代码，保存为firstPage.html。然后用浏览器打开该文件，就可以看到网页内容，如图2-1所示。
图2-1 一个基本的html网页
注意
由于每种Web服务器都可以设置资源类型的处理程序映射，因此后缀为html或者htm的不一定是HTML静态网页。
2.1.2 创建HTML静态网页
在2.1.1节中，介绍了静态网页的基本构成，以及如何用记事本来编写一个简单网页。本节介绍如何使用可视化网页设计工具Adobe Dreamweaver来创建一个静态网页，其操作步骤如下。
step 1 打开Adobe Dreamweaver CS5，选择“文件”→“新建”命令，打开“新建文档”对话框。在“页面类型”列表框中选择“HTML”选项，在“布局”列表框中选择“<无>”选项，单击“创建”按钮，关闭对话框，如图2-2所示。
图2-2 “新建文档”对话框
step 2 Dreamweaver CS5工作区的左边是文档窗口，在这里可以显示代码视图、设计视图或者两者同时显示。在文档工具栏里面单击“拆分”按钮，则文档窗口被拆分成两部分，上面一部分是代码视图，下面一部分是设计视图。在设计视图里面，输入如图2-3所示的第一行内容，然后按回车键，再输入第二行内容。在设计视图里面输入文字的同时，上面的代码视图里面的内容也随之改变。
图2-3 Dreamweaver CS5工作区
step 3 选择“文件”→“保存”命令，在出现的“另存为”对话框里面输入secondPage.html作为文件名，单击“保存”按钮，如图2-4所示。
图2-4 “另存为”对话框
step 4 找到刚才保存的secondPage.html文件，双击该文件用浏览器打开它，显示效果如图2-5所示。
图2-5 用Dreamweaver制作的网页
2.2 常见的HTML标签
HTML文档是由HTML元素构成的，而HTML元素是由HTML标签标记的。每个HTML标签都有相应的作用和使用方法。本节将介绍网页设计中经常遇到的HTML标签的使用方法。
2.2.1 基础类标签（html、head、title、style、link、body）
1.html标签
该标签代表HTML文档的开始。html标签是成对出现的，以<html>开始，以</html>结束。该标签常用的属性如下。
◆ xml:lang：该属性是国际化属性，代表整个网页的语言。其取值可以参考RFC3066标准。常用的值有简体中文（zh-CN）、繁体中文（zh-HK）及英文（en）。
◆ xmlns：该属性代表文档的命名空间。一般可以设置为：
xmlns="http://www.w3.org/1999/xhtml"
◆ dir：该属性定义文本元素的对齐方式，可以取的值有ltr（代表左到右的排列方式）和rtl （代表右到左的排列方式）。其中ltr是默认值。例如把secondPage.html中的dir属性设置为rtl，显示效果如图2-6所示。
图2-6 html标签的dir属性
2.head标签
该标签代表HTML文档的头信息，也是成对出现的，以<head>开始，以</head>结束。该标签本身没有什么重要属性。但是它里面包含了一些重要的标签，如title、meta等，这些信息主要提供给浏览器使用。
3.title标签
该标签代表HTML文档的标题，即在浏览器标题栏里面显示的内容。当把网页添加到收藏夹里面的时候，收藏夹内显示的名称也是title标签的内容。title标签位于head标签之内，成对出现，以<title>开始，以</title>结束，位于之间的是文档的标题内容。例如，一个产品列表网页的标题可以按以下方法设置：
<title>产品列表</title>
由于title标签通常代表了网页的主要内容，所以title标签非常重要。它在搜索引擎优化（SEO）方面有非常重要的作用。从搜索引擎搜索到的内容往往是title标签的内容。设置好title标签，可以方便搜索引擎索引网页。
4.base标签
该标签定义基URL用于页面的链接与引用。当在网页中使用相对路径定义链接时，可以使用base标签定义基URL，便于解析文档中定义的相对路径。该标签单独使用。其常用的属性如下。
◆ href：该属性代表基URL。
◆ target：该属性代表链接目标。
例如，在网页的head标签内部加入以下代码：
01 <head> <!--head标记开始-->
02 <base href="http://www.demo.com/" target="_blank"> <!--base标签-->
03 </head> <!--head标签结束-->
则该网页中所有的相对路径都以 http://www.demo.com/作为基地址，并且，单击网页中的相对路径的链接，会弹出一个新的窗口。
5.style标签
该标签用于在文档中声明样式表。该标签成对使用，以<style>开始，以</style>结束，开始标签和结束标签之间是样式的声明。该标签的重要属性如下。
◆ type：该属性包含内容的类型，在声明样式的时候一般使用type="text/css"。
例如：
01 <head> <!--head标签开始-->
02 <style type="text/css"> <!--style标签开始-->
03 ad /＊--定义一个css类＊/
04 {
05 font-size: 12px; ＊设置字体大小为12px＊/
06 }
07 .note /＊定义名称为note的css类＊/
08 {
09 font-size: 10px; /＊设置字体大小为10px＊/
10 color: #FFFFFF; /＊设置文字颜色为白色＊/
11 }
12 </style> <!--style标签结束-->
13 </head>
以上代码声明了两个CSS类，其中一个名称为ad，另外一个名称为note。
6.link标签
该标签用于在文档中声明外部资源，同时标签还是单独出现的。该标签常用的属性如下。
◆ href：该属性指定外部资源的URL。
◆ rel：该属性指定外部资源的类型。
◆ type：该属性指定外部资源中包含内容的类型。
例如，以下代码引入了一个外部的样式表文件到当前文档。
<head>
<link rel="stylesheet" type="text/css" href="style.css" /> <!--引入外部样式表文件-->
</head>
7.script标签
该标签用于在文档中使用脚本。脚本主要有JavaScript和VBScript。脚本代码可以书写在网页内部，也可以是引用的外部脚本文件。该标签成对使用，以<script>开始，以</script>结束。其常用的属性如下。
◆ src：该属性指定需要加载的脚本文件的URL。
◆ type：该属性指定媒体类型，例如type="text/javascript"。
以下代码引入了一个名称为jquery.js的JavaScript脚本文件。
<head>
<script type="text/javascript" src="jquery.js"></script> <!--引入外部脚本文件-->
</head>
8.meta标签
该标签用于指定文档中的额外信息。该标签单独使用。其属性主要分为两组。
◆ name属性与content属性：name属性是以名称/值形式出现的，name属性的值所描述的内容（值）通过content属性表示。其中最重要的是description、keywords和robots。这些属性主要是为便于网络机器人分析网页。
◆ http-equiv属性与content属性：http-equiv属性用于提供HTTP协议的响应头报文（MIME文档头），它也是以名称/值形式出现的。http-equiv属性的值所描述的内容（值）通过content属性表示，通常在网页加载前提供给浏览器等设备使用。其中最重要的是charset属性提供编码信息，refresh属性告诉浏览器刷新与跳转页面，no-cache属性告诉浏览器不缓存页面，expires属性通知浏览器网页缓存过期时间。
例如，以下代码表示网页的字符集为utf-8：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--定
义内容类型及编码-->
<title>无标题文档</title>
<script type="text/javascript">
</script>
</head>
9.body标签
该标签表示文档的主体。body标签成对使用，以<body>开始，以</body>结束。网页中所有的文字、图像、视频等内容全部位于body标签之内。
2.2.2 窗体类标签（frameset、frame、iframe）
窗体又称为框架（Frame）。使用框架可以把一个浏览器窗口分成几个页面的组合来显示，其中每个页面都是相对独立的，都是一个完整的HTML文档。当然，因为这些页面都是属于同一个总的框架网页里面，所以各个页面之间可以相互传递数据。
1.frameset标签
在框架网页里面，frameset标签代替body标签，并且定义了框架将分为多少行与多少列。因此框架页里面不能再含有body标签。frameset标签成对使用，开始标签为<frameset>，结束标签为</frameset>。在使用框架的时候，应该声明支持框架的文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-frameset.dtd">
frameset标签的主要属性如下。
◆ cols：该属性定义了框架含有多少列与列的大小。每个值使用逗号分隔，取值为像素px或者百分比%，剩余的宽度使用＊代替。
例如：
<frameset cols="50,＊">
上面的代码把浏览器窗口划分成左右两部分，左边占据50像素，右边占据剩下的全部宽度。
<frameset cols="50%,＊"></frameset>
上面代码把浏览器窗口平均分成左右两部分，各占整个浏览器窗口50%的宽度。
<frameset cols="20,50,＊"></frameset>
上面代码把浏览器窗口垂直分成3列，左边1列宽度为20像素，中间1列宽度为50像素，
右边1列占据剩下宽度的像素。
<frameset cols="20,50%,＊"></frameset>
上面代码把浏览器窗口垂直分成3列，左边1列宽度为20像素，中间1列占剩下宽度的50%，右边1列占剩下的另外50%。
<frameset cols="1＊,250,3＊">
上面的代码使用相对百分比来设置框架的宽度，把浏览器窗口垂直分成3列，中间1列占250像素，左边1列和右边1列分别占剩下的25%和75%。
◆ rows：该属性定义了框架含有多少行与行的大小。每个值使用逗号分隔，取值为像素px或者百分比%。
例如：
<frameset rows="50, ＊">
上面代码把浏览器窗口水平分成两栏，上面1栏高度为50像素，下面1栏占据剩下的高度。
<frameset rows="50, 50, 50">
上面代码把浏览器窗口水平分成3栏，高度都是50像素。
<frameset rows="1＊, 3＊">
上面代码把浏览器窗口垂直分成两栏，上下高度分别占25%和75%。
◆ frameborder：该属性定义框架页是否有边框，取值是yes或者no。
◆ border：该属性用来设置通过frame标签定义的框架页的边框宽度，单位是像素。
◆ framespacing：该属性定义框架页之间间隔的距离，单位是像素。
2.frame标签
frameset标签定义了总的框架页，frame标签则定义了框架页中的一个页面。该标签单独出现，主要属性如下。
◆ frameborder：该属性定义了框架内容页的边框是否显示。取值范围是0或者1，0表示不显示边框，1表示在每个页面之间都显示边框。默认情况值是1。
◆ marginwidth：该属性定义了框架中HTML文档显示的左右边界的宽度，单位为px。该属性的默认值由浏览器决定，每个浏览器的情况可能有所不同。如果需要避免网页在不同的浏览器下显示效果不同，应明确指定该属性的值。
◆ marginheight：该属性定义了框架中HTML文档显示的上下边界的宽度，单位为px。该属性的默认值同样由浏览器决定，每个浏览器的情况可能有所不同。如果需要避免网页在不同的浏览器下显示效果不同，应明确指定该属性的值。
◆ name：该属性定义了每个框架页的名字，当在总页面中引用该框架页时，需要用到这个名字。
◆ noresize：该属性定义了用户是否可以通过拖曳改变框架页的尺寸，取值为noresize。如果框架页的尺寸可以拖曳改变，则应该省略该属性。
◆ scrolling：该属性定义了框架页是否有滚动条，取值为yes、no或者auto，默认值为auto。其中yes表示总是显示滚动条，不管内容是否超出显示范围；no表示总是不显示，不管内容是否超出显示范围；auto则表示根据内容是否超出范围来自动决定是否显示滚动条。
◆ src：该属性定义了框架页中HTML文档的URL，是框架页中显示的实际内容。
以下代码定义了一个上方固定、左边嵌套的框架页。
01 <frameset rows="80,＊" cols="＊" frameborder="1" border="1" framespacing="0">
02 <!--指定框架src为top.html-->
03 <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize"
id="topFrame" title="topFrame" />
04 <frameset cols="120,＊" frameborder="1" border="1" framespacing="0">
05 <!--指定框架src为left.html-->
06 <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize"
id="leftFrame" title="leftFrame" />
07 <!--指定框架src为main.html-->
08 <frame src="main.html" name="mainFrame" id="mainFrame" title="" />
09 </frameset>
10 </frameset>
11 <!--当浏览器不支持框架时，显示此内容-->
12 <noframes><body>
13 </body></noframes>
其中top.html文件的代码如下：
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>无标题文档</title>
06 </head>
07 <body>
08 顶部页面
09 </body>
10 </html>
left.html文件的代码如下：
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>无标题文档</title>
06 </head>
07 <body>
08 左边页面
09 </body>
10 </html>
main.html文件的代码如下：
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>无标题文档</title>
06 </head>
07 <body>
08 主页面
09 </body>
10 </html>
在浏览器中的显示效果如图2-7所示。这是一个非常实用的页面布局，最上面的页面用于显示网站的Logo或者横幅广告，左边的页面用于放置网站栏目，右边的页面用于放置内容。
图2-7 框架页
3.iframe标签
该标签定义HTML文档内的内联框架。与frame不同，它不需要与frameset结合使用，而是直接用在body元素中。此外这个标签所引用的HTML文档不是与另外的HTML文档相互独立显示的，而是可以直接嵌入在一个HTML文档中，与这个HTML文档内容相互融合，成为一个整体。实际上，目前出现的很多JavaScript框架，例如JQuery，都是利用iframe标签技术实现的。
该标签成对使用，开始标签是<iframe>，结束标签是</iframe>。两个标签之间的内容是当浏览器不支持iframe时，显示给用户的信息。该标签的属性如下。
◆ name：该属性定义了框架页的名称，此名称在引用框架页时使用。
◆ src：该属性定义了框架页要显示的HTML文档的URL。
◆ frameborder：该属性定义了框架页的边框是否显示，取值为0或者1，0表示不显示边框， 1表示显示边框，默认值为1。
◆ height：该属性定义框架页的高度，取值为像素或百分比。
◆ width：该属性定义了框架页的宽度，取值为像素或百分比。
◆ marginwidth：该属性定义了框架页中HTML文档显示的左右边界的宽度，取值为px。默认值由浏览器决定。为了保证显示效果的统一，应明确指定该属性的值。
◆ marginheight：该属性定义了框架页中HTML文档显示的上下边界的宽度，取值为px，默认值由浏览器决定。为了保证显示效果的统一，应明确指定该属性的值。
◆ scrolling：该属性定义是否有滚动条，取值为yes、no或者auto，yes表示总是显示滚动条，no表示总是不显示滚动条，auto表示当需要时再显示滚动条，默认值为auto。
◆ align：该属性定义框架页的垂直或水平对齐方式。
例如：
<iframe src="http://news.163.com/10/0806/02/6DCCLHKL00014AED.html" width="200"
height="500">
本网页使用了框架技术，你的浏览器不支持该技术。
</iframe>
以上代码把一条网易的新闻嵌入到当前网页当中。
2.2.3 容器类标签（div、table、tbody、tr、td、th、tfoot）
所谓容器类标签，就是指该类标签内可以放置其他的标签或者数据，可以作为其他元素的容器使用。
1.div标签
div标签表示一个块，该元素本身并无实际语义上的意义，但是用户可以通过CSS样式为其赋予不同的表现，从而实现布局的需要。除了id之外，div标签本身也没有其他的重要属性。该标签成对出现，开始标签是<div>，结束标签是</div>，两者之间是div容器里面的内容。
该标签在当前的网页布局当中发挥了举足轻重的作用，div元素结合CSS是目前网页布局的标准。本书在网页布局的章节里面会详细介绍这个标签的使用方法。
2.table标签
table标签定义HTML文档中的表格。该标签成对出现，开始标签是<table>，结束标签是</table>。
因为table标签有很多的属性，易于排版布局，所以在以前的网页里面，很多都是使用table标签来布局整个网页的。但是，这样带来了一些问题，例如浏览器的兼容性、搜索引擎的优化等。
table标签的最初目的是展示数据，而不是用来布局。所以，现在提倡用div结合CSS来实现布局，而用table标签来把数据罗列出来。table标签的常用属性如下。
◆ width：该属性定义表格的宽度，可以使用像素或者百分比。
◆ height：该属性定义表格的高度，可以使用像素或者百分比。
◆ border：该属性定义表格的边框的宽度，单位是像素。
◆ cellspacing：该属性定义单元格之间的空间，单位是像素。
◆ cellpadding：该属性定义单元格内部内容与单元格边框之间的空白，单位是像素。
◆ align：该属性定义表格的对齐方式，取值有left、center和right，分别表示左对齐、居中和右对齐。
关于表格的属性，可以参考图2-8，图中最外面的深色部分代表border属性，浅灰色部分代表cellspacing属性，白色部分代表cellpadding属性，深灰色部分代表单元格的内容。
图2-8 表格的属性
以下代码定义了一个如图2-9所示的表格。
图2-9 表格
01 <table width="46%" height="180" border="1" align="center" cellpadding="1"
cellspacing="1" >
02 <tr>
03 <td align="center">姓名</td>
04 <td align="center">成绩</td>
05 </tr>
06 <tr>
07 <td width="32%" align="center">张三</td>
08 <td width="68%" align="center">92</td>
09 </tr>
10 <tr>
11 <td align="center">李四</td>
12 <td align="center">76</td>
13 </tr>
14 <tr>
15 <td align="center">王五</td>
16 <td align="center">78</td>
17 </tr>
18 </table>
3.thead、tbody和tfoot标签
thead标签用于对HTML表格中的表头内容进行分组；tbody标签定义表格主体（正文），该标签用于组合HTML表格的主体内容；tfoot标签用于对HTML表格中的表注（页脚）内容进行分组。
这3个标签使得用户有能力对表格中的行进行分组。当用户创建某个表格时，希望拥有1个标题行，若干带有数据的行，以及位于底部的1个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
提示
由于浏览器对该标签的支持问题，实际上这3个标签很少使用。
以下代码定义了一个含有这3个标签的表格。
01 <table border="1">
02 <thead>
03 <tr>
04 <th>月份</th>
05 <th>收入</th>
06 </tr>
07 </thead>
08 <tfoot>
09 <tr>
10 <td>三</td>
11 <td>7200</td>
12 </tr>
13 </tfoot>
14 <tbody>
15 <tr>
16 <td>一</td>
17 <td>5000</td>
18 </tr>
19 <tr>
20 <td>二</td>
21 <td>5300</td>
22 </tr>
23 </tbody>
24 </table>
4.tr标签
该标签定义表格中的1行。tr在HTML文档中成对出现，开始标签是<tr>，结束标签是</tr>。该标签常用的属性如下。
◆ align：该属性定义行的水平对齐方式，取值有left（左对齐）、center（居中对齐）、right （右对齐）及justify（两端对齐）。
◆ valign：该属性定义行的垂直对齐方式，取值有top（顶部对齐）、middle（中部对齐）、bottom （底部对齐）及baseline（基线对齐）。
5.td标签
该标签定义HTML表格中的1个单元格。td标签是成对出现的，以<td>开始，</td>结束，两者之间是要显示的数据。该标签常用属性如下。
◆ colspan：该属性定义1行跨越多少列。取值为整数。
◆ rowspan：该属性定义1列跨越多少行。取值为整数。
◆ align：该属性与tr的align用法相同。
◆ valign：该属性与tr的valign用法相同。
6.th标签
该标签定义HTML表格中的表头。该标签成对出现，以<th>开始，以</th>结束，两者之间是表头的内容。该标签的常用属性与td完全相同。
以下代码定义了一个课程表。
01 <table width="60%" border="0" align="center">
02 <tr>
03 <th>星期一</th>
04 <th>星期二</th>
05 <th>星期三</th>
06 <th>星期四</th>
07 <th>星期五</th>
08 <th>星期六</th>
09 </tr>
10 <tr>
11 <td align="center">语文</td>
12 <td align="center">数学</td>
13 <td align="center">英语</td>
14 <td align="center">政治</td>
15 <td align="center">化学</td>
16 <td align="center">生物</td>
17 </tr>
18 <tr>
19 <td align="center">地理</td>
20 <td align="center">英语</td>
21 <td align="center">政治</td>
22 <td align="center">数学</td>
23 <td align="center">数学</td>
24 <td align="center">语文</td>
25 </tr>
26 <tr>
27 <td align="center">数学</td>
28 <td align="center">英语</td>
29 <td align="center">政治</td>
30 <td align="center">化学</td>
31 <td align="center">语文</td>
32 <td align="center">生物</td>
33 </tr>
34 <tr>
35 <td align="center">语文</td>
36 <td align="center">生物</td>
37 <td align="center">化学</td>
38 <td align="center">政治</td>
39 <td align="center">地理</td>
40 <td align="center">数学</td>
41 </tr>
42 </table>
2.2.4 列表类标签
该类标签是关于HTML文档中列表的，包含dl、dt、dd、ol、li、ul等标签。
1.dl标签
该标签代表HTML自定义列表。在HTML文档中，该标签成对出现，开始标签是<dl>，结束标签是</dl>。自定义列表的开始使用<dl>标签，列表中每个元素的标题使用<dt>标签定义，后面跟随<dd>标签用于描述列表中元素的内容。
2.dt标签
该标签代表HTML自定义列表项目，即dl标签中的项目名称。dt成对出现，以<dt>标签开始，以</dt>标签结束。
3.dd标签
该标签代表HTML自定义列表描述，即dl标签中的项目描述。dd成对出现，以<dd>标签开始，以</dd>标签结束。
以下代码定义了一个关于水果的自定义列表。
01 <dl>
02 <dt>荔枝</dt>
03 <dd>实心脏形或球形，果皮具多数鳞斑状突起，呈鲜红、紫红、青绿或青白色，假种皮新鲜时呈半透明
凝脂状，多汁，味甘甜。
04 </dd>
05 <dt>龙眼</dt>
06 <dd>俗称“桂圆”，是我国南亚热带名贵特产，历史上南方“桂圆”北“人参”之称。龙眼果实富含营
养，自古受人们喜爱，更视为珍贵补品，其滋补功能显而易见。
07 </dd>
08 <dt>柑橘</dt>
09 <dd>柑橘是凉性水果，也是世界上最重要的商品水果，是我国亚热带地区栽培面积最广的果树，也是广
西最重要的果树。它包括的种类很多，广西主要栽培的有甜橙、宽皮柑橘、柚、金橘、柠檬等，而每一种类
又有许多优良品种。
10 </dd>
11 <dt>甘蔗</dt>
12 <dd>甘蔗是一年生宿根热带和亚热带草本植物，属C4作物。秆直立，粗壮多汁，表面常披白粉，叶为
互生，边缘具小锐齿，花穗为复总状花序。甘蔗为喜温、喜光作物，年积温需5500℃～8500℃，无霜期330d
以上，年均空气湿度60%，年降水量要求800mm～1200mm，日照时数在1195小时以上。
13 </dd>
14 </dl>
4.ol标签
该标签代表HTML的有序列表。ol成对出现，以<ol>开始，</ol>结束。列表中的每一列使用<li>标签定义，这一点与无序列表相同。每列使用数字或字母开头。
以下代码定义了一个关于水果的有序列表。
01 <ol>
02 <li>苹果</li>
03 <li>香蕉</li>
04 <li>橘子</li>
05 <li>梨</li>
06 <li>桃子</li>
07 </ol>
5.li标签
该标签代表HTML列表中的项目。li成对出现，以<li>标签开始，以</li>标签结束。中间是项目名称。
6.ul标签
该标签代表HTML无序列表。ul成对出现，以<ul>标签开始，以 </ul>标签结束。列表中的项目用li标签表示，每列使用圆点或其他符号开头。
以下代码定义了一个无序列表。
01 <ul> <!--无序列表开始-->
02 <li>苹果</li> <!-- 列表项 -->
03 <li>香蕉</li> <!-- 列表项 -->
04 <li>橘子</li> <!-- 列表项 -->
05 <li>梨</li> <!-- 列表项 -->
06 <li>桃子</li> <!-- 列表项 -->
07 </ul> <!-- 无序列表结束 -->
2.2.5 排版类标签
排版类标签是关于HTML内容的版面分布的标签。该类标签包含br、center、p、span、pre、hr等。
1.br标签
该标签代表HTML中的换行。br标签单独出现，形式为<br />。当使用br标签时，其后面的所有内容都将在下一行出现。
以下代码使用br标签把文字分成几行。
01 <p> <!--段落开始-->
02 鹅鹅鹅<br /> <!--换行-->
03 曲项向天歌<br /> <!--换行-->
04 白毛浮绿水<br /> <!--换行-->
05 红掌拨青波<br /> <!--换行-->
06 </p> <!--段落结束-->
2.center标签
该标签定义内容居中。center标签成对出现，开始标签是<center>，结束标签是</center>。该标签不符合标准，建议使用CSS的text-align代替。
例如：
01 <center> <!--居中开始-->
02 文字居中 <!--内容-->
03 </center> <!--居中结束-->
3.p标签
该标签代表HTML中的段落。p标签总是成对出现，以<p>标签开始，以</p>标签结束，两者之间是段落的内容。
例如：
01 <!--段落开始-->
02 <p>
03 <!--段落内容-->
04 2010年8月18日，"框计算"(Box Computing)诞生一周年之际，在搜索"天气"，"列车时刻表"、"
工程师招聘"等特定关键词时，一个全新的框计算LOGO标识现身百度相关搜索结果中。
05 <!--段落结束-->
06 </p>
4.span标签
该标签代表内联行，本身并无实际意义。span主要起一个容器的作用，在实际开发中使用CSS赋予不同的表现。内联元素的高度和宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。内联元素的显示特点就是像文本一样显示，不会独自占据一行。
技巧
当然内联元素也能变成块级元素，但这需要通过CSS的display:block和float来实现。
内联元素依附其他块级元素存在，紧接于被联元素之间显示，而不换行。
例如：
01 <!--段落开始-->
02 <p>
03 <!--段落内容-->
04 <span>第一个span元素</span>
05 <span>第二个span元素</span>
06 <span>第三个span元素</span>
07 <!--使用样式表改变内联元素的显示方式-->
08 <span style="display:block">第四个span元素</span>
09 <div>第一个块元素</div>
10 <div>第二个块元素</div>
11 <!--段落结束-->
12 </p>
在以上代码中定义了4个span标签，其中前3个没有指定显示样式，第4个span指定其样式为display:block。此外，还定义了两个div标签。该代码显示效果如图2-10所示。
图2-10 span标签的显示效果
从图2-10可以看出，前面3个span标签位于同一行内，第4个span标签却单独占据一行，两个div标签都各自占据一行。
以上结果显示出了内联标签的显示特性，那就是多个相邻的内联标签都会位于同一行内，直至显示不下才会换行。内联标签的显示方式可以通过CSS来改变，使其按照块级标签的方式来显示。
5.pre标签
该标签表示把其中的内容按照原始的格式显示。在HTML文档里面，空格、回车、换行及Tab键等格式符都不起作用。如果用户想把这些格式保留下来，可以使用pre标签。pre标签总是成对出现，以<pre>开始，以</pre>结束，两者之间是要显示的内容。
例如，以下代码试图把一首诗显示在网页里面。
01 <p>
02 白日依山尽
03 黄河入海流
04 欲穷千里目
05 更上一层楼
06 </p>
尽管在HTML源代码里面，用户已经用回车符把四句诗分成四行显示，但是这个文档在浏览器中却没有按照预期的效果显示，而是挤在一行，如图2-11所示。
图2-11 回车符在HTML文档中不起作用
其原因在于虽然源代码中确实存在回车符，但是浏览器在解析HTML文档的时候，却把这些回车符忽略掉了。
如果把这些内容置于pre标签之中，则可以按照原文的格式显示。代码如下：
01 <p>
02 <pre>
03 白日依山尽
04 黄河入海流
05 欲穷千里目
06 更上一层楼
07 </pre>
08 </p>
显示效果如图2-12所示。由于每行的前面有一些Tab键，所以文字并不是从边缘开始显示。
图2-12 pre标签
6.hr标签
该标签定义HTML文档中的水平分割线。hr标签单独出现，语法为<hr/>。当文档中出现hr标签时，整个文档被分成上下两部分。hr标签的重要属性如下。
◆ align：该属性定义hr标签的对齐方式，取值为left、center或者right，分别代表左对齐、居中和右对齐。
◆ noshade：该属性定义hr标签的显示方式，定义该属性之后，则水平线的颜色呈现为纯色，而不是有阴影的颜色。省略该属性，则标签会以带阴影的立体效果显示。
◆ size：该属性定义hr标签的高度，以百分比或者像素为单位。
◆ width：该属性定义hr标签的宽度，以百分比或者像素为单位。如果省略该属性，则hr标签的宽度为100%。
01 <hr size="1px" />
02 <hr size="1px" noshade="noshade" />
03 <hr size="1px" width="500px" />
04 <hr size="20px"/>
05 <hr noshade="noshade" size="20px" color="#0033FF"/>
以上代码定义了5个hr标签，其中第1个设置其高度为1px，第2个设置其高度为1px，noshade属性为noshade，第3个设置其高度为1px，宽度为500px，第4个设置其高度为20px，第5个设置其高度为20px，noshade属性为noshade。显示效果如图2-13所示。
图2-13 hr标签
2.2.6 文字样式类标签
该类标签用于修饰文本的显示样式，有h、b、em、font、strong、sup及sub等。
1.h标签
该标签代表HTML中的文章标题，包含h1～h6共6个级别。h标签成对出现，例如h1标签以<h1>开始，以</h1>结束，两者之间是标题的内容。
例如：
01 <h1>标题1</h1>
02 <h2>标题2</h2>
03 <h3>标题3</h3>
04 <h4>标题4</h4>
05 <h5>标题5</h5>
06 <h6>标题6</h6>
以上代码定义了h1～h6共6个标题。显示效果如图2-14所示。
图2-14 h标签
2.b标签
该标签定义粗体（bold）文字。该标签成对出现，以<b>标签开始，以</b>标签结束，两者之间为要粗体显示的内容。
例如：
01 <p>白日依山尽</p>
02 <p>
03 <b>白日依山尽 </b>
04 </p>
以上代码的显示效果如图2-15所示。
图2-15 b标签
在图2-15中，上面一行为普通格式，下面一行为使用b标签加粗的文字。
3.em标签
该标签代表HTML文档中需要强调突出（emphasis）的文字。em总是成对出现，开始标签为<em> ，结束标签为</em>，两者之间是需要强调的部分。
例如：
01 <p>
02 成功引入<em>可信云安全技术</em>的金山毒霸2011版本，采用毒霸“蓝芯II”代反病毒引擎。不但
有效提升产品的实际速度和精度，更可将客户端中的潜在威胁程序，快速上传至毒霸云安全服务器中，毫秒
间返回相应查询结果。可有效提升整体的检测性能。
03 </p>
在以上代码中，为了突出“可信云安全技术”的重要性，在这个词组上加上了em标签。显示效果如图2-16所示。
图2-16 em标签
从图2-16可以看出，加了em标签的部分变成了斜体，从而与其他的文字区分开来。
4.strong标签
该标签代表HTML文档中需要重点强调的部分。strong标签总是成对出现，以<strong>标签开始，以</strong>标签结束，两者之间是重点强调的部分。strong标签是从语义上指出需要强调的部分，而b标签只是从视觉上对某些部分加粗。
同样一段文字，用strong标签突出强调之后，代码如下，效果如图2-17所示。
图2-17 strong标签
01 <p>
02 成功引入<strong>可信云安全技术</strong>的金山毒霸2011版本，采用毒霸“蓝芯II”代反病毒
引擎。不但有效提升产品的实际速度和精度，更可将客户端中的潜在威胁程序，快速上传至毒霸云安全服务
器中，毫秒间返回相应查询结果。可有效提升整体的检测性能。
03 </p>
5.sup标签
该标签代表HTML文档中的上标（super script）。sup总是成对出现，以<sup>开始，以</sup>结束，两者之间是作为上标的部分。
例如，要在HTML文档中显示一个多项式：
x2 + y2 = 1
可以使用以下代码：
x<sup>2</sup> + y<sup>2</sup> = 1
显示效果如图2-18所示。
图2-18 sup元素
6.sub标签
与sup标签相对应，该标签代表HTML文档中的下标。sub标签的用法与sup完全相同。例如，欲在HTML文档中显示一个多项式：
x1 + x2 + x3 = 100
可以使用以下代码：
x<sub>1 </sub>+ x<sub>2</sub> + x<sub>3</sub> = 100
显示效果如图2-19所示。
图2-19 sub标签
2.2.7 功能类标签
该类标签实现HTML文档中的某些特殊的功能，主要包括a、img、map、area和marquee等。
1.a标签
该标签代表HTML链接。在HTML文档中，a标签是使用非常频繁的一个标签。该标签成对出现，以<a>开始，以</a>结束。该标签的重要属性如下。
◆ charset：该属性指定了被链接到的页面所使用的编码方式，比如UTF-8及GB2312等。
◆ href：该属性代表一个链接目标，通常是一个URL。所链接到的目标可以是HTML文档、其他类型的文件及E-mail地址等。
◆ target：该属性用来指定目标链接在哪个窗口或框架打开。
◆ title：该属性代表链接的附加提示信息，当把鼠标放在一个链接上时，会把title属性的值作为提示显示出来。
例如：
<p><a href="http://www.163.com/">链接到网页的a标签</a></p>
<p><a href="http://www.example.com/files/example.pdf">链接到pdf文件的a标签</a></p>
<p><a href="mailto:exampe@example.com">链接到Email地址的a标签</a></p>
以上代码定义了3个a标签，分别链接到URL、文件和E-mail地址。
2.img标签
该标签代表HTML文档中的图像。img标签单独出现，其语法为<img />。该标签的重要属性如下。
◆ alt：该属性表示图像的代替文字。有的时候，如果浏览器被设置为不显示图像，或者网站的图像文件找不到了，此时，浏览器会把alt属性中的文字显示出来，以代替图像。
◆ src：该属性通常是一个URL，指向一个图像文件，即告诉浏览器图像文件的具体位置。该文件可以位于本地主机上，也可以位于其他主机上。
◆ height：该属性定义浏览器在显示图像时的高度，以像素为单位。当图像的实际高度超过height的值时，图像高度被压缩成height的值；如果实际高度比height的值小，则图像高度被拉伸到height的值。
◆ width：该属性定义浏览器在显示图像时的宽度，以像素为单位。如果图像的实际宽度超过width的值，则图像宽度被压缩成width的值；如果实际宽度比width的值小，则图像宽度被拉伸到width的值。
◆ title：该属性定义图片的提示文字，当鼠标停留到图片上时，会提示相关文字。
例如，以下代码定义了一个img元素。
<img src="uploadfile/2010/0819/101650920.jpg" width="130" height="90" alt="蓝芯
二代显神威 金山毒霸2011技术引擎解读" />
3.map标签
该标签定义HTML文档中图像单击区域的集合。map标签总是成对出现，以<map>开始，以</map>结束，两者之间是由area标签定义的热区。
4.area标签
该标签定义HTML文档中图像的可单击区域（热区）。area标签单独出现，其语法为<area />。该标签的重要属性如下。
（1）coords：该属性定义图像中可单击区域的坐标，以像素为单位。坐标的数字及其含义取决于shape属性中决定的区域形状。
◆ 当shape为circIe时，coords的坐标格式为“x, y, r”。这里的x和y定义了圆心的位置， r是以像素为单位的圆形半径。其中，“0,0” 是图像左上角的坐标。
◆ 当shape为poly时，coords的语法为“x1, y1, x2, y2, x3, y3, ...”。每1对“x, y”坐标都定义了多边形的一个顶点。定义三角形至少需要3组坐标；高维多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
◆ 当shape为rect时，coords的语法为“x1, y1, x2, y2”。第1个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，定义矩形实际上是定义带有4个顶点的多边形的一种简化方法。
（2）href：该属性定义图像可单击区域要链接到的URL。
（3）shape：该属性定义图像中可单击区域的形状，其取值为circIe（圆）、poly（多边形）或rect（矩形）。
（4）target：该属性与a标签中的target属性相同。
以下代码定义了3个热区。
01 <img src="012000000333291194605.jpg" width="358" height="435" border="0"
usemap="#Map" />
02 <map name="Map" id="Map">
03 <area shape="rect" coords="224,48,319,133" href="head.html" />
04 <area shape="circle" coords="78,384,42" href="hand.html" />
05 <area shape="poly" coords="150,115,176,127,181,184,135,211,102,167,111,135"
href="liver.html" />
06 </map>
当在浏览器中单击这3个区域时，会分别链接到不同的网页。
2.2.8 表单类标签
该类标签主要是为了与Web服务器交互，把用户在浏览器中输入的数据提交给Web服务器。主要包括form、input、select、option、textarea等。
1.form标签
该标签代表HTML文档中的表单。form标签总是成对出现，以<form>标签开始，以</form>标签结束，两者之间是表单的内容。该标签的重要属性如下。
（1）action：该属性定义接受用户在浏览器中输入到表单的数据的地址，一般是位于Web服务器上的一个可以执行的文件，例如asp文件或者php文件。
（2）method：该属性定义表单数据的传递方法，其取值为get或者post。关于get和post的区别有很多，主要有以下几点。
◆ get将表单中的数据按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
◆ get是不安全的，因为在传输过程中，数据被放在请求的URL中。post的所有操作对用户来说都是不可见的。
◆ get传输的数据量小，这主要是因为受URL长度限制；而post可以传输大量的数据，所以上传文件只能使用post。
get限制表单的数据集的值必须为ASCII字符；而post支持整个ISO10646字符集。
（3）enctype：该属性定义表单数据的编码方式。其取值为application/x-www-form-urlencoded、multipart/form-data或者text/plain。其中第1个表示表单数据被编码为名称/值对，这是标准的编码格式；第2个表示表单数据被编码为一条消息，页上的每个控件对应消息中的一部分；第3个表示表的数据以纯文本形式进行编码，其中不含任何控件或格式字符。
2.input标签
该标签代表HTML表单的单行输入域。input标签是单独出现的，其语法为<input />。该标签的重要属性如下。
（1）type：该属性定义单行输入域的表现方式。根据不同的取值，表单域会有不同的表现。常见的取值如下。
◆ text：文字输入域。
◆ password：密码输入域。
◆ file：文件域。
◆ checkbox：复选框，可以选择0个或多个选项。
◆ radio：单选框，用户只可以选择1个选项。
◆ hidden：隐藏域，可以传送一些隐藏的信息到服务器。
◆ button：普通按钮。
◆ image：使用图片来显示按钮，使用src属性指定图像的位置。
◆ submit：提交按钮，表单填写完毕可以提交，把信息传送到服务器。可以使用value属性来显示按钮上的文字。
◆ reset：重置按钮，可以把表单中的信息清空，恢复到最初状态。
（2）value：该属性定义表单域的值。
（3）size：该属性定义输入型表单域的长度。
（4）maxlength：该属性定义输入型表单域最多可以输入字符的长度。
（5）checked：该属性用于选择性表单域，代表已经被选择。
（6）readonly：该属性表示输入型表单域的值为只读。
（7）disabled：该属性表示表单域处于无效状态，无法选择，以灰色显示，在表单中不起任何作用。
（8）src：该属性定义图片型按钮中图片的地址。
（9）alt：该属性用来作为图片型按钮的图片的替代文本。
2.select标签
该标签代表HTML文档中的选择列表。select标签是成对出现的，以<select>标签开始，以</select>标签结束。该标签的重要属性如下。
◆ size：该属性定义选择域的高度。
◆ multipIe：该属性定义选择域是否可以多选。
◆ disabled：该属性表示select标签处于无效状态，灰色，不起任何作用。
3.option标签
该标签代表选择列表的一个选择项。option标签是成对出现的，以<option>标签开始，以</option>标签结束。该标签的重要属性如下。
◆ label：该属性定义选择项的标签，即选择列表中每个选项显示给用户看的部分。
◆ value：该属性定义选择项的值。
◆ selected：该属性表示此选择项已经被选择。
4.textarea标签
该标签代表HTML文档中的多行输入域。textarea标签是成对出现的，以<textarea>标签开始，以</textarea>标签结束。该标签的重要属性如下。
◆ cols：该属性定义多行输入域的列数。
◆ rows：该属性定义多行输入域的行数。
◆ disabled：该属性使输入域无法获得焦点，无法选择。以灰色显示，在表单中不起任何作用。
◆ readonly：该属性表示option为只读状态。
以下代码定义了一个HTML表单。
01 <form id="form1" name="form1" method="get" action="" enctype="">
02 <p>
03 <label for="textfield">姓名</label>
04 <input type="text" name="textfield" id="textfield" />
05 </p>
06 <p>
07 <label for="textfield2">年龄</label>
08 <input type="text" name="textfield2" id="textfield2" />
09 </p>
10 <p>
11 <input type="radio" name="radio" id="radio" value="radio" />
12 <label for="radio">男</label>
13 <input type="radio" name="radio2" id="radio2" />
14 <label for="radio2">女</label>
15 </p>
16 <p>
17 <label>
18 <input type="checkbox" name="p" value="乒乓球" id="p_0" />
19 乒乓球</label>
20 <br />
21 <label>
22 <input type="checkbox" name="p" value="篮球" id="p_1" />
23 篮球</label>
24 <br />
25 <label>
26 <input type="checkbox" name="p" value="羽毛球" id="p_2" />
27 羽毛球</label>
28 </p>
29 <p>
30 <label for="select">学习过的程序设计语言</label>
31 <select name="select" size="5" multiple="multiple" id="select">
32 <option value="JAVA">JAVA</option>
33 <option value="C++">C++</option>
34 <option value="C#">C#</option>
35 </select>
36 <br />
37 </p>
38 <p>
39 <textarea name="textarea" id="textarea" cols="45" rows="5" label="">
</textarea>
40 </p>
41 <p>
42 <input type="submit" name="button" id="button" value="提交" />
43 <input type="reset" name="button2" id="button2" value="重置" />
44 </p>
45 </form>
在浏览器中的显示效果如图2-20所示。
图2-20 表单
注意
disabled属性与readonly属性不同。前者表示禁用该元素，因此元素在表单中不发挥任何作用，也获取不到该元素的值；后者表示该元素的值为只读，用户不能修改，但是该元素是一个有效元素。
2.2.9 多媒体类标签
该类标签用于在HTML文档中插入多媒体内容，例如音乐、视频等。主要包括object、applet、embed、bgsound等标签。由于applet、embed和bgsound等标签不推荐使用，所以在此只介绍object标签。
object标签定义网页中嵌入除图片外的多媒体。object标签是成对出现的，以<object>开始，</object>结束。使用object标签可以在网页中嵌入各种多媒体，例如Flash、Java Applets、MP3、QuickTime Movies等。param标签通常配合object标签一同使用。该标签的重要属性如下。
◆ classid：该属性关联一个应用程序，执行嵌入内容的应用程序在Windows系统中的唯一id，例如clsid:166B1BCA-3F9C-11CF-8075-444553540000代表Flash。
◆ codebase：该属性为相对路径提供基URL，IE浏览器通常将此属性中的内容定义为运行嵌入内容所要加载的插件，例如Flash插件的URI为http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,1,1,0。
◆ height：该属性定义嵌入内容的高度，单位为像素。
◆ width：该属性定义嵌入内容的宽度，单位为像素。
例如，以下代码在HTML文档中嵌入一个Flash动画。
01 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7
,0,19,0" height="68" width="250">
02 <param name="movie"
value="http://static.youku.com/pub/youku/logo/youkulogo-yuehuo.swf">
03 <param name="quality" value="high">
04 <param name="wmode" value="transparent">
05 <param name="allowScriptAccess" value="always">
06 <embed wmode="transparent"
src="http://static.youku.com/pub/youku/logo/youkulogo-yuehuo.swf" quality=
"high" pluginspage="http://www.macromedia.com/go/getflashplayer" type=
"application/x-shockwave-flash" allowscriptaccess="always" height="68"
width="250">
07 </object>
显示效果如图2-21所示。
图2-21 嵌入多媒体
2.2.10 特殊标记
特殊标记是在HTML文档中显示的某些特殊的字符，例如英镑符号£、欧元符号€、版权符号©等。这些符号在HTML里都有固定的代码。常见的符号及其代码如表2-1所示。
表2-1 常用的特殊符号
2.3 实例：制作一个用户注册页面
前面几节介绍了HTML的相关知识，本节通过制作一个用户注册页面，来介绍如何在实际开发中使用HTML的标签。目前，用户注册几乎是每个网站都必须有的功能。因此，用户注册页面是一个非常重要的部分。
在网络刚刚普及的时候，许多网站为了尽可能全地收集用户资料，经常为用户提供一个非常复杂的网页，网页里面的表单域多达几十个。用户注册一次，要花费大量的时间来填写表单。后来，开发人员逐渐意识到提供异常复杂的表单给访问者来填写是行不通的。因为访问者很少有耐心去认认真真地填写非常复杂的表单。正是由于意识到这个问题，设计人员对于用户注册页面逐步改进，现在很多网站注册一个账号只需几十秒钟就可以了。
本例要设计的注册页面效果如图2-22所示。
图2-22 用户注册页面效果图
2.3.1 网页的整体外观
鉴于目前绝大部分用户显示器的分辨率都在1024像素×768像素之上，所以本网页的宽度可以定为900px，高度不限，但最好不出现滚动条，或者只需稍微拖动一下。
在这样的尺寸下，网页内容的左右会各有一部分空白区域。如果用户显示器的分辨率低于1024像素×768像素，那么左右的空白区域会缩小，而网页内容仍然显示完整；如果用户显示器的分辨率超过了1024像素×768像素，则左右的空白区域会扩大，以适应用户的屏幕，此时，网页内容仍然是完整的，并且显示效果也比较美观。
2.3.2 网页的内容布局
为了增加网页内容的条理性，本网页内容根据功能分为4大部分。
（1）用户的用户名和密码，这是最重要的部分。
（2）安全信息。包括密码保护问题及其答案、性别、出生日期和手机号。这些信息也非常重要，在用户的密码丢失的情况下，要找回密码或者重置密码，可以通过这部分信息来验证用户的身份。
（3）验证码。验证码是防止某些用户恶意注册的。本网页上面的验证码是随机生成的，并且以图片的形式显示给注册者，注册者必须在表单域里面准确输入验证码图片中的内容才可以通过注册。
（4）服务条款。注册者必须同意相关服务条款才可以注册成功。
有了以上思路，就可以开始制作网页了。
2.3.3 制作网页
目前，可视化的网页设计工具非常多，如Dreamwaver等。本章为了让读者深入理解HTML语言的使用方法，不采用这些所见即所得的工具，而是通过直接编辑HTML代码来完成，所使用的工具是文本编辑器EditPlus。
step 1 打开EditPlus，选择“File”→“HTML Page”命令，新建一个HTML文档。EditPlus会自动生成一些HTML代码，这些代码是每个HTML文档都包含的内容，如图2-23所示。
图2-23 EditPlus新建HTML文档
step 2 单击工具栏上面的保存按钮，把该文档以register.html文件名保存起来。
step 3 修改EditPlus自动生成的代码，把其中的title标签的内容修改为“欢迎注册”，meta标签里面的author修改为设计者的名称。增加一行meta标签，代码如下。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
step 4 定义一个10行2列的table标签作为整个页面的框架，在<body>和</body>之间输入以下代码。
01 <table width="900px" border = "1" align="center">
02 <tr>
03 <td></td><td></td>
04 </tr>
05 <tr>
06 <td></td><td></td>
07 </tr>
08 <tr>
09 <td></td><td></td>
10 </tr>
11 <tr>
12 <td></td><td></td>
13 </tr>
14 <tr>
15 <td></td><td></td>
16 </tr>
17 <tr>
18 <td></td><td></td>
19 </tr>
20 <tr>
21 <td></td><td></td>
22 </tr>
23 <tr>
24 <td></td><td></td>
25 </tr>
26 <tr>
27 <td></td><td></td>
28 </tr>
29 <tr>
30 <td></td><td></td>
31 </tr>
32 <tr>
33 <td></td><td></td>
34 </tr>
35 </table>
step 5 双击register.html文件，用浏览器打开刚才保存的HTML文档，显示效果如图2-24所示。由于表格中没有内容，所以整个表格的行都缩在一起。
图2-24 HTML表格
step 6 修改第1个tr标签的内容，代码如下。
<td colspan="2" align="center">欢迎注册本网站，注册以后，您将享受到优质的会员服务。</td>
以上代码中的colspan="2"是把表格的第1行中的2个单元格合并成1个。align="center"设定单元格的内容水平居中。此时显示效果如图2-25所示。
图2-25 增加网页内容的标题
step 7 修改第2个tr的内容如下。
<td colspan="2" align="left">创建您的账号</td>
此时，网页显示效果如图2-26所示。
图2-26 增加第1部分内容的标题
step 8 在第3个tr标签中的第1个td标签里面输入以下内容，用来作为右边表单域的提示信息：
用户名：＊
在第2个td标签里面输入以下内容，定义一个输入用户账号的表单域。
<input type="text" name="username" id=" username" />
step 9 依次输入如图2-22所示的项目，最终代码如下。
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <title>欢迎注册 </title>
05 <meta name="generator" content="editplus" />
06 <meta name="author" content="Iron" />
07 <meta name="keywords" content="" />
08 <meta name="description" content="用户注册" />
09 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
10 </head>
11 <body>
12 <table width="900px" border = "1" align="center">
13 <tr>
14 <td colspan="2"align="center">欢迎注册本网站，注册以后，您将享受到优质的会员服务。</td>
15 </tr>
16 <tr>
17 <td colspan="2" align="left">创建您的帐号</td>
18 </tr>
19 <tr>
20 <td>用户名：＊</td><td></td>
21 </tr>
22 <tr>
23 <td>密 码：＊</td><td><input type="password" name="passwd" id="passwd" /></td>
24 </tr>
25 <tr>
26 <td>再次输入密码</td><td><input type="password" name="passwd2" id="passwd2" /></td>
27 </tr>
28 <tr>
29 <td colspan="2" align="left">安全信息设置（以下信息非常重要，请慎重填写）</td>
30 </tr>
31 <tr>
32 <td>密码保护问题：＊</td>
33 <td>
34 <select name="secproblem" id="secproblem">
35 <option style="color:#666" value="0">请选择密码提示问题</option>
36 <option value="您母亲的姓名是?">您母亲的姓名是?</option>
37 <option value="您父亲的姓名是?">您父亲的姓名是?</option>
38 <option value="您配偶的姓名是?">您配偶的姓名是?</option>
39 <option value="您母亲的生日是?">您母亲的生日是?</option>
40 <option value="您父亲的生日是?">您父亲的生日是?</option>
41 <option value="您配偶的生日是?">您配偶的生日是?</option>
42 <option value="您的出生地是?">您的出生地是?</option>
43 <option value="您的小学校名是?">您的小学校名是?</option>
44 <option value="您的中学校名是?">您的中学校名是?</option>
45 <option value="您的大学校名是?">您的大学校名是?</option>
46 <option value="cusproblem">您的自定义问题</option>
47 </select>
48 </td>
49 </tr>
50 <tr>
51 <td>密码保护问题答案：＊</td>
52 <td><input type="text" name="secproblemanswer" id="secproblemanswer" /></td>
53 </tr>
54 <tr>
55 <td>性 别：＊</td>
56 <td><input type="radio" name="sex" id="sex" value="male" />
57 <label for="radio">男</label>
58 <input type="radio" name="sex" id="sex" value="female" />
59 <label for="sex">女</label>
60 </td>
61 </tr>
62 <tr>
63 <td>出生日期：＊</td>
64 <td>
65 <input name="year" type="text" id="year" size="8" maxlength="4" />年
66 <input name="month" type="text" id="month" size="2" maxlength="2" />月
67 <input name="day" type="text" id="day" size="2" maxlength="2" />日
68 </td>
69 </tr>
70 <tr>
71 <td>手机号：</td>
72 <td><input type="text" name="mobile" id="mobile" /></td>
73 </tr>
74 <tr>
75 <td colspan="2">注册验证</td></tr>
76 <tr>
77 <td width="181"> </td>
78 <td width="257" align="left"><img src="images/check.jpg" width="80" height=
"30" /></td>
79 </tr>
80 <tr>
81 <td align="right">请输入以上验证码＊</td>
82 <td align="left"><input type="text" name="checkcode" id="checkcode" /></td>
83 </tr>
84 <tr>
85 <td colspan="2">服务条款</td>
86 </tr>
87 <tr>
88 <td colspan="2"><input type="checkbox" name="agreement" id="agreement" />我
已阅读并接受“服务条款”</td>
89 </tr>
90 <tr>
91 <td colspan="2"><input type="submit" name="submit" id="submit" />
92 </td>
93 </tr>
94 </table>
95 </body>
96 </html>
在浏览器中，显示效果如图2-27所示。
图2-27 注册页面
本节制作的注册页面非常简单，没有从视觉效果上做过多的修饰，所以看起来不太美观。在此只是介绍HTML标签的使用方法，如何美化网页中的元素，本书会在后面章节详细介绍。
2.4 常见问题
初学者在学习HTML语言的时候，经常遇到的问题有以下几个方面。
2.4.1 HTML代码的大小写问题
初学者在阅读其他人编写的HTML代码的时候，经常会发现有的人编写的HTML代码是大写的，有的人编写的代码是小写的，有的甚至大小写混杂在一起。
目前，所有的浏览器对于HTML代码的大小写都是允许的，例如一个表格标签table，可以被写成TABLE或者Table。对于这些不同的形式，浏览器都可以正常解析。
但是，HTML规范规定，所有的HTML标签及其属性都应该是小写的。所以为了规范起见，本书推荐使用小写字母来编写HTML代码。
2.4.2 不同的浏览器之间的兼容性问题
HTML语言虽然有一个统一的标准，但是各浏览器厂商对于这个标准的支持程度不同，对于某些标签属性的默认值的规定也不尽相同。有的厂商（如微软），甚至还扩展了W3C制定的HTML标准，增加了某些标签或者属性。
这些问题导致同一个网页在不同的浏览器中显示效果不同，有时甚至不能正常显示。因此，开发者在设计网页的时候，应该尽量避免使用只有某个浏览器才能识别的标签或者属性。对于属性的默认值，也应该明确指定，而不应该让浏览器去决定默认值。
在选择网页制作工具的时候，也应该选择第三方厂商开发的软件，例如Adobe公司的Dreamweaver。这些第三方的软件通常会考虑到各种浏览器的兼容性问题。
2.4.3 HTML、XHTML和XML
HTML、XHTML和XML都是标准通用标记语言（SGML）的子集。其中HTML是超文本标记语言，而XHTML是扩展的超文本标记语言，XML是可扩展标记语言。前面两种语言都是用来设计网页的，而XML是用来传递数据的。
2.5 小结
本章介绍的HTML语言是整个网页制作的基础。主要内容包括HTML的基本语法、常用的HTML标签及通过编辑源代码来设计网页。重点在于掌握好HTML的基本语法、各种常用的HTML标签的常见属性及取值范围。要掌握好HTML并非短时间内可以完成的，读者应该在不断的实践当中，逐步积累网页制作的方法和技巧，逐步深入理解HTML语言的各个方面，才能做到灵活运用。在下面一章中，将介绍网站及网页的色彩搭配。