理论篇
第1章 HTML基础
本章目标
■ 了解Web发展史及HTML特点
■ 掌握HTML文档结构的组成
■ 掌握HTML的语法结构
■ 掌握文本标签的使用
■ 掌握分隔标签的使用
■ 掌握各种列表标签的使用
■ 掌握各种超链接的使用
■ 掌握图像标签的使用
学习导航
任务描述
【描述1.D.1】
编写HTML文档，在页面中输出“这是第一个HTML网页，Hello HTML！点击此处，打开一个新的HTML页面”。
【描述1.D.2】
通过实现页面的自动跳转来演示meta标签的使用。
【描述1.D.3】
使用标题标签演示HTML中标题字体的使用。
【描述1.D.4】
使用HTML字体标签演示HTML中对字体显示的控制。
【描述1.D.5】
编写HTML，演示各种列表（无序列表、有序列表、定义列表、嵌套列表）标签的使用。
【描述1.D.6】
编写HTML，演示各种超链接（站内链接、站外链接、邮件链接、锚链接）的使用。
【描述1.D.7】
编写HTML，演示<img>标签及其属性的使用。
1.1 Web概述
Web 出现于1989年3月，由欧洲粒子物理研究所（CERN，European Organization for Nuclear Research）的科学家Tim Berners-Lee发明。1990年11月，第一个Web服务器开始运行。1991年，CERN正式发布了Web技术标准。1993年，第一个图形界面的浏览器Mosaic开发成功，1995年著名的Netscape Navigator浏览器问世。随后，微软公司推出了IE浏览器（Internet Explorer）。目前，与Web相关的各种技术标准都由W3C组织（World Wide Web Consortium）管理和维护。
注意 W3C是英文World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C是专门致力于创建Web相关技术标准并促进Web向更深、更广发展的国际组织，于1994年10月在麻省理工学院计算机科学实验室成立。其创建者就是万维网的发明者Tim Berners-Lee。
Web 是一个分布式的超媒体（hypermedia）信息系统，它将大量的信息分布于整个因特网（Internet）上。Web的任务就是向人们提供多媒体网络信息服务。
从技术层面看，Web技术主要有三点，即超文本传输协议（HTTP）、统一资源定位符（URL）及超文本标签语言（HTML）。
1.1.1 超文本传输协议
超文本传输协议（HTTP，HyperText Transfer Protocol）是客户端浏览器或其他程序与Web 服务器之间的应用层通信协议，用以实现客户端和服务器端的信息传输。在Internet上的Web服务器上存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。HTTP包含命令和传输信息，不仅用于Web访问，也可以用于其他因特网或内联网应用系统之间的通信，从而实现各类应用资源超媒体访问的集成。
1.1.2 统一资源定位符
统一资源定位符（URL，Uniform / Universal Resource Locator）是用于完整地描述Internet上网页和其他资源的地址的一种标识方法，实现互联网信息的定位统一标识。Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL 地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点，简而言之，URL就是Web地址，俗称“网址”。
例如，当人们需要访问一个网站时，只需在浏览器的地址栏中输入网站的地址就可以访问该网站。例如在浏览器地址栏中输入www.google.com，就可以访问Google网站。细心的读者会发现，当所要访问的网站打开后，地址栏中的地址变成了http://www.google.com。而这个地址就是URL。
URL主要由三部分组成：协议类型、存放资源的域名或主机IP地址和资源文件名。
其语法格式如下：
protocol://hostname[:port]/path/[;parameters][?query]#fragment
其中：
■ protocoI（协议）：指定使用的传输协议，最常用的是HTTP 协议，另外还有file 协议（访问资源是本地计算机上的文件）、ftp协议（File Transfer Protocol，文件传输协议，通过ftp协议可访问FTP服务器上的资源）等。
■ hostname（主机名）：是指存放资源的服务器的域名或IP地址。
■ port（端口号）：为可选项，省略时使用默认端口，各种常用传输协议都有默认的端口号，如HTTP协议的默认端口是80。
■ path（路径）：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
■ parameters（参数）：为可选项，可以用于指定特殊参数。
■ query（查询）：为可选项，用于给动态网页传递参数，可以有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。
■ fragment：字符串，用于指定网络资源中的片断。例如，一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。
1.1.3 超文本标签语言
超文本标签语言（HTML，HyperText Mark-up Language），即HTML语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。该语言能够把存放在一台计算机中的文本或资源与另一台计算机中的文本或资源方便地联系在一起，从而形成有机的整体。例如，人们访问Internet 时不用考虑具体信息所处的位置，只需使用鼠标在某一文档中点击一个图标或链接，Internet就会马上转到与此图标或链接相关的页面上去，而这些信息可能存放在网络的任意一台计算机中。另外，HTML是网络的通用语言，是一种简单、通用的标签语言。它允许网页制作人建立文本与图片相结合的复杂页面，无论使用的是什么类型的计算机或浏览器，这些页面都可以被浏览到。
HTML文档制作简单，功能强大，支持不同数据格式的文件嵌入，这也是HTML盛行的原因之一，归纳其主要特点如下：
■ 简易性
HTML是包含标签的文本文件，可使用任何文本编辑工具进行编辑。
■ 可扩展性
HTML语言的广泛应用带来了加强功能、增加标识符等要求，HTML采取扩展子类元素的方式，从而为系统扩展带来保证。
■ 平台无关性
HTML基于浏览器解释运行，目前几乎所有的Web浏览器都支持HTML，而与操作系统无关。
1.2 HTML文档结构
HTML是以.html（或.htm）为扩展名的纯文本文件，可以使用任意一种编辑软件来编写，常用的集成开发工具有Dreamweaver等。一个基本的HTML文档由HTML、HEAD和BODY三部分组成。
1. HTML部分
HTML 文档以<html>标签开始，</html>标签结束。每一个HTML 文档的开始必须用一个<html>标签，而结尾也要用一个</html>标签。Web 浏览器在收到一个HTML 文件后，当遇到<html>标签时，就开始按HTML语法解释其后的内容，并按要求将这些内容显示出来，直到遇到</html>标签为止。HTML文档的所有内容都在上述两个标签之间。其格式如下：
<html>
......
</html>
2. HEAD部分
HEAD部分以<head>标签开始，</head>标签结束。HTML的HEAD部分用于对页面中使用的字符集、标签的样式、窗口的标题、脚本语言等进行说明和设置。这些设置是通过在HEAD 部分嵌入一些标签来实现的，如<title>、<base>、<script>、<style>、<meta>、<link>等。通常头部信息不显示在浏览器中，但位于<title>和</title>之间的内容即窗口的标题则显示在窗口标题栏的左上角处。HEAD部分也可以省略不写。其格式如下：
<head>
<title>页面的标题部分</title>
...
</head>
3. BODY部分
BODY部分以<body>标签开始，</body>标签结束。该部分是HTML文档的主体，包含了绝大部分需要呈现给浏览者浏览的内容，如段落、列表、图像和其他元素等HTML页面元素，都通过一些标准的HTML标签来描述。在BODY中除了可以书写正文文字外，还可以嵌入许多由专用标签标识的内容，这些标签将在后续章节中陆续介绍。BODY部分格式如下：
<body>
HTML的主体部分
</body>
将上述三部分组合起来就是一个HTML文档的基本“骨架”，如图1-1所示。
图1-1 HTML文档整体结构
下述代码用于实现任务描述1.D.1，编写HTML文档，在页面中输出“这是第一个HTML网页，Hello HTML！点击此处，打开一个新的HTML页面”。
【描述1.D.1】HeIIoHTML.htmI
<!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>
<title>第一个HTML</title>
</head>
<body bgcolor = "lavender">
<p>这是第一个HTML网页，Hello HTML！
<a href="BiaoTiEG.html">
点击此处，打开一个新的HTML页面
</a>
</p>
</body>
</html>
上述代码中“<!DOCTYPE html PUBLIC "-//W3C//DTD XH…-transitional.dtd">”代表文档类型，其大概含义是指：遵循严格的XHTML的格式书写，读者只需按照此例中的样式书写即可。
注意 关于文档类型的介绍可参考本书实践1中的知识拓展。另外，本书中的所有页面都是在IE 7.0版本下运行的。
通过IE查看该HTML，结果如图1-2所示。
图1-2中演示了一个最基本的HTML页面，只在Body标签中包含了“这是一个HTML网页，Hello HTML！”和一个超链接（图中带下画线的部分），点击超链接可使页面跳转到“BiaoTiEG.html”页面。
图1-2 HeIIoHTML.htmI显示效果
注意 目前所有的Web浏览器都支持HTML，本书的页面调试均基于IE浏览器。
1.3 HTML语法
HTML文档由预定义好的HTML标签（Tag）和用户自定义内容编写而成。HTML标签由ASCII字符来定义，用于控制页面内容（文字、表格、图片、用户自定义内容等）的显示。
1.3.1 标签
HTML 通过标签控制文档的内容和外观，可以将标签看做是HTML 的命令。HTML 标签有如下几个特点：
■ HTML 标签以一对尖括号“<>”作为开始，以“</>”表示该HTML 命令的结束，例如，HelloHTML.html中的“<body>…</body>”标签用于表示BODY部分的开始和结束，其中，<body>称为开始标签，</body>称为结束标签。
■ 标签必须是闭合的。闭合就是标签的最后要有一个“/”来表示结束，但不一定成对出现。例如<br />就单独出现，用于表示换行，诸如<br />格式的标签统称为空标签。
■ 标签的大小写无关。HTML 语言中不区分大小写。例如<body>和<BODY>表示的含义一样。
注意 HTML虽然不区分大小写，但为保持内容的一致性和可读性，推荐使用小写。
1.3.2 属性
HTML 属性一般都出现在标签中。作为HTML 标签的一部分，HTML 属性包含了标签所需的额外信息，并且一个标签可以拥有多个属性。
在为标签添加属性的时候需注意如下两点：
■ 属性的值需要在双引号中。
■ 属性名和属性值成对出现。
其语法如下所示：
<标签名 属性名1 = "属性值" 属性名2 = "属性值">内容</标签名>
注意 虽然HTML中的属性值不用双引号仍然可以解析，但出于编码规范的要求，本书在添加属性时，值都放在双引号中。
下述代码通过设置body标签属性bgcolor将页面的背景色换成紫色，来演示标签属性的使用。
【代码1-1】HeIIoHTML.htmI
<html>
<head>
<title>第一个HTML</title>
</head>
<body bgcolor = "lavender">
<p>这是第一个HTML网页，Hello HTML！
<a href="BiaoTiEG.html">
点击此处，打开一个新的HTML页面
</a>
</p>
</body>
</html>
通过IE查看该HTML，结果如图1-3所示。
图1-3 HeIIoHTML.htmI背景效果
1.3.3 注释
与其他编程语言一样，当一个HTML文档中包含众多的标签、属性后，可能造成文档结构阅读困难，此时可以在HTML文档中插入必要的注释，以方便阅读、查找、比对。当用浏览器查看HTML文档时，注释不显示在页面上。
HTML中的注释包含在特殊的标签中，具体语法如下：
<!-- 注释内容 -->
1.4 HTML常用基本标签
标签是HTML语言中最基本的单位，也是HTML语言最重要的组成部分。本节将介绍HTML中最常用的标签。
1.4.1 meta标签
meta标签作为子标签只出现在网页的head标签内，可为HTML文档提供额外的信息。
meta的属性分为以下两组。
1. name与content
用于描述网页，它以名称/值的形式表示，其名称通过name属性表示，其值为所要描述的内容，通过content属性表示。
2. http-equiv与content
http-equiv属性用于提供HTTP协议的响应报文头（MIME文档头），它是以名称/值的形式表示的。其值为所要描述的内容，而内容的值则通过content属性表示。
name属性和http-equiv属性的具体描述如表1-1所示。
表1-1 meta标签的属性
下述代码用于实现任务描述1.D.2，通过实现页面的自动跳转来演示meta标签的使用。
【描述1.D.2】MetaEG.htmI
<html>
<head>
<meta http-equiv = "refresh" content = "5;url=HelloHTML.html">
<title>Meta标签</title>
</head>
<body>
Meta标签的使用！
5秒后，会跳转到HelloHTML.html页面！
</body>
</html>
通过IE查看该HTML，结果如图1-4所示。
图1-4 Meta标签演示
上述页面打开后，经过5秒后，会自动跳转到content中url所指向的页面HelloHTML.html。
1.4.2 文本
HTML 中的文本相关标签主要分为标题标签和字体标签两类。本小节将分别讲述两类标签。
1. 标题标签
HTML语言中的标题字体用<h#>表示。其语法如下：
<h# align="对齐方式">内容</h#>
其中：
■ “#”代表了标题的字体大小，#的取值为1～6之间的整数，随着取值的增大，字体逐渐缩小。
■ align属性用于设置标题的对齐方式，该属性取值可以为left（左对齐）、center（居中）或right（右对齐）。
下述代码用以实现任务描述1.D.3，使用标题标签演示HTML中标题字体的使用。
【描述1.D.3】BiaoTiEG.htmI
<html>
<head>
<title>标题标签</title>
</head>
<body>
<h1>一号标题字体</h1>
<h2>二号标题字体</h2>
<h3>三号标题字体</h3>
<h4>四号标题字体</h4>
<h5>五号标题字体</h5>
<h6>六号标题字体</h6>
</body>
</html>
上述代码演示了标题字体的1～6号字，通过IE查看该HTML，结果如图1-5所示。
图1-5 标题标签演示
2. 字体标签
字体标签<font>是HTML语言中很重要的一个标签，通过设置<font>标签的属性face、size和color，可以让文本显示出不同的字体风格、大小及颜色。其语法如下：
<font face="字体类型" size="字号" color="颜色">内容</font>
其中：
■ face 属性用于控制文字显示的格式，其取值为特定字体类型，字体类型可分为中文字体类型（如宋体、黑体等）和英文字体类型（如Arial、Arial Black等），中文字体类型只对中文有效，而英文字体类型也只对英文有效。
■ size属性用于指定文字显示大小，即字号。size有两种取值：取1～7的自然数，这种取值称为绝对大小，网页中默认的大小为3；带正负号的取值，区间为[-4,+4]，这种取值称为相对大小。它们是相对于绝对大小中的字号3，然后进行相应的放大或缩小。
■ color属性用于指定字体显示颜色。字体颜色的取值可以使用十六进制值表示的颜色，如红色为#FF0000；常见的颜色也可以使用英文单词表示，如红色为red。
注意 HTML语言中其他标签的颜色取值与字体颜色的取值方法相同。
下述代码用以演示字体标签的3个属性。
【代码1-2】WenBenEG.htmI
<html>
<head>
<title>文本标签</title>
</head>
<body>
<font face="宋体" size="7" color="red">这是大小取绝对7号红颜色宋体字</font><br>
<font face="黑体" size="-1" color="#0000FF">
这是大小取相对-1号蓝颜色黑体字
</font>
</body>
</html>
上述代码通过对字体属性的设置，显示了不同字体风格的文本。通过IE查看该HTML，结果如图1-6所示。
图1-6 字体标签演示
此外，HTML语言中还提供了大量的逻辑字符标签用来设置字体的样式，如表1-2所示。
表1-2 字符标签
表1-2中列举了部分字符标签，HTML语言提供了很多这样的字符标签用以美化文本。
另外，某些字符在HTML 中具有特殊意义，如版权号“©”。要在浏览器中显示这些特殊字符，就必须使用转义符号，称为字符实体，如表1-3所示。
表1-3 用于显示特殊字符的字符实体
注意 表1-2中的标签都是字体样式标签，如果只是希望通过这些标签单纯地改变文本的样式，建议采用CSS样式表来实现更加丰富的效果。
下述代码用以实现任务描述1.D.4，使用HTML字体标签演示HTML中对字体显示以及特殊符号的控制。
【描述1.D.4】FontEG.htmI
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Font标签演示</title>
</head>
<body>
<p>
<a href="#">
<font size="2" color="#0066FF" face="宋体">
把百度设为首页
</font>
</a>
</p>
<p>
<a href="#">
<font size="2" color="#0066FF" face="宋体">
加入百度推广
</font>
</a>
|
<a href="#">
<font size="2" color="#0066FF" face="宋体">搜索风云榜</font>
</a>
|
<a href="#">
<font size="2" color="#0066FF" face="宋体">关于百度</font>
</a>
|
<a href="#">
<font size="2" color="#0066FF" face="宋体">About Baidu</font>
</a>
</p>
<font size="2" color="#9EB1E9" face="宋体">©2010</font>
<font size="2" color="#9EB1E9" face="宋体">Baidu</font>
<a href="#">
<font size="2" color="#9EB1E9" face="宋体">使用百度前必读</font>
</a>
<a href="#">
<font size="2" color="#9EB1E9" face="宋体">
京ICP证030173
</font>
</a>
</body>
</html>
上述代码以百度网站底部的版权信息为示例，使用了版权符号和空格符号，并利用font标签的属性设置了文字的大小、颜色和字体。运行结果如图1-7所示。
图1-7 font标签演示
1.4.3 分隔标签
HTML分隔标签用于区分文字段落。HTML分隔标签分为文字分隔标签和分割线标签两类，下面分别介绍。
1. 文字分隔标签
文字分隔标签有两种：
■ 强制换行标签<br>
■ 强制分段标签<p>
HTML中使用换行标签<br>在需要的地方实现换行。其语法如下：
内容1<br/>内容2
通过上述代码就可以使“内容1”和“内容2”显示在不同的行中。
HTML 语言中使用段落标签<p>可以把网页中的文字划分为段落。段落与段落之间会有一定的空白间隔。这样可以让文章看起来更有条理一些。其语法如下：
<p>这是第一个段落</p>
<p>这是第二个段落</p>
段落标签可以不成对出现，可以只有<p>，而没有</p>，因为下一个<p>就是下一个段落的开始，当然就意味着上一个段的结束。但是为了编码的规范性和可读性，推荐使用成对的段落标签。
2. 分割线标签
通过使用分割线标签<hr>可以在网页上产生一条水平的分割线，将大量的内容区分开，增加了网页的层次性。通过使用<hr>的属性可以设置分割线的宽度、厚度、颜色。<hr>的属性如表1-4所示。
表1-4 分割线标签属性
下述代码用以演示HTML中分隔标签的用法。
【代码1-3】FenGeEG.htmI
<html>
<head>
<title> 分隔标签</title>
</head>
<body>
<p>这是第一个段落</p>
<p>这是第二个<br/>段落</p>
<hr size="5" width="200px" color="red" align="left" noshade />
<p>这是第三个段落</p>
</body>
</html>
上述代码将网页中的内容分为了三个段落，其中在第二个段落中加了一个换行标签，而第二个和第三个段落之间加了一条分割线。
通过IE查看该HTML，结果如图1-8所示。
图1-8 分隔标签演示
1.4.4 列表
列表用于将相关联的信息集合在一起，使条理清晰，便于人们阅读。在现代Web开发中，列表频繁地用于导航和内容显示中。
HTML语言中的列表可分为四类：无序列表（<ul>）、有序列表（<ol>）、定义列表（<dl>）和嵌套列表。
1. 无序列表
无序列表又称符号列表，列表中的项目可以以任何顺序进行排列。例如，如下购物清单就是无序列表：
■ 面包
■ 牛奶
■ 咖啡
■ 果冻
上述的商品都是购物清单中的一部分，但是这些商品可以以任何的顺序排列。还可以按照下面的顺序进行排列：
■ 牛奶
■ 果冻
■ 咖啡
■ 面包
无序列表使用一组<ul></ul>标签，标签中含有多组<li></li>标签对。
下述代码用以实现任务描述1.D.5，编写HTML，演示无序列表的使用。
【描述1.D.5】UIEG.htmI
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>面包</li>
<li>牛奶</li>
<li>咖啡</li>
<li>果冻</li>
</ul>
<!--顺序是无关紧要的-->
<ul>
<li>牛奶</li>
<li>果冻</li>
<li>咖啡</li>
<li>面包</li>
</ul>
</body>
</html>
通过IE查看该HTML，结果如图1-9所示。
图1-9 <uI>标签演示结果
2. 有序列表
有序列表又称为编号列表，列表中的项目是按照先后顺序排列的。有序列表使用一组<ol>标签，该标签是成对出现的，以<ol>开始，</ol>结束。
现实生活中的很多细节都是一个有序的过程，例如：车子的启动过程就可以分解为一个有序的列表，如果顺序乱了，就不能将车子启动起来。
下述代码用以实现任务描述1.D.5，编写HTML，通过汽车启动次序，演示有序列表的使用。
【描述1.D.5】OIEG.htmI
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<li>打火</li>
<li>挂挡</li>
<li>放手刹</li>
<li>踩油门</li>
</ol>
</body>
</html>
通过IE查看该HTML，结果如图1-10所示。
图1-10 <oI>标签演示结果
3. 定义列表
定义列表将列表中的项目与其定义或描述配对显示。定义列表标签dl 同样是成对出现的，以<dl>开始，</dl>结束，而列表中每个项目的标题使用<dt>标签修饰，其后跟随<dd>标签，该标签用以对标题进行描述。
下述代码用以实现任务描述1.D.5，编写HTML，通过对购物清单中的商品进行描述来演示定义列表的用法。
【描述1.D.5】DIEG.htmI
<html>
<head>
<title>定义列表</title>
</head>
<body>
<dl>
<dt>面包</dt>
<dd>面包是由面粉做成的。</dd>
<dt>牛奶</dt>
<dd>牛奶是来自中国的。</dd>
<dt>咖啡</dt>
<dd>咖啡来自于巴西。</dd>
<dt>果冻</dt>
<dd>果冻是徐福记的。</dd>
</dl>
</body>
</html>
通过IE查看该HTML，结果如图1-11所示。
图1-11 定义列表演示效果
4. 嵌套列表
一个列表中可以包含另一个完整的列表，这样的列表称为嵌套列表。例如一本书籍的目录，就是一个比较复杂的嵌套列表。
嵌套列表就是多个有序列表或无序列表组合在一起使用的列表。在使用嵌套列表时，嵌套列表必须和一个特定的列表项<li>相联系，即嵌套列表通常包含在某个列表项中，用以反映该嵌套列表和该列表项之间的联系。
下述代码用以实现任务描述1.D.5，编写HTML，演示嵌套列表的用法。
【描述1.D.5】NestIEG.htmI
<html>
<head>
<title>嵌套列表</title>
</head>
<body>
<ol>
<li>第一章
<ol>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ol>
</li>
<li>第二章</li>
<li>第三章</li>
</ol>
</body>
</html>
在上述代码中，嵌套列表在<li>及包含列表项目的文本（“第一章”）之后起始，在包含有列表项目的</li>处结束。由于嵌套列表是定义网站结构的一个很好的方式，因此其通常是构成网站导航菜单的基础。
通过IE查看该HTML，结果如图1-12所示。
图1-12 嵌套列表示例
1.4.5 超链接
互联网的精髓就在于相互链接，即超链接（hyperlink）。一个网站的各个网页都是通过超链接来衔接起来的，浏览者通过点击这些链接从一个网页跳转到另一个网页。常见的超链接形式有如下几种。
■ 文字超链接：在文字上建立超链接。
■ 图像超链接：在图像上建立超链接。
■ 热区超链接：在图像的指定区域上建立超链接。
HTML语言中超链接的标签用<a>表示，<a>标签是成对出现的，以<a>开始，</a>结束。其语法如下：
<a href="url" target=".." title=".." id="..">内容</a>
其中：
■ href属性：用于定义超链接的跳转地址，其取值url可以是本地地址或远程地址，url可以是一个网址、一个文件甚至可以是HTML文件的一个位置或E-mail的地址，url可以是绝对路径也可以是相对路径。
■ target属性：用于指定目标文件的打开位置，取值见表1-5。
■ titIe属性：鼠标悬停在超链接上的时候，显示该超链接的文字注释。
■ id属性：在目标文件中定义一个“锚”点，标识超链接跳转的位置。
■ 内容：就是所定义的超链接的一个外套，浏览者只需点击内容就可以跳转到url所指定的位置。
关于target属性的4种取值方式，其含义如表1-5所示。
表1-5 target属性的取值方式
注意 关于target的各种取值方式，将在本书实践篇的知识拓展中详细介绍。
1. 绝对路径和相对路径
超链接中最重要的一个概念就是链接地址，链接地址有绝对路径和相对路径这两种方式。绝对路径就是指完整的路径，如访问一个域名为abcd.com的网站中名称为abc.html的网页，其绝对地址就是http://www.abcd.com/abc.html。而对于本地计算机上的文件路径，如d:/My Documents/My Music/123.mp3，该路径就是绝对路径。
相对路径是指从一个文件到另一个文件所经过的路径，为了形象地表示这种关系，以图1-13中的几个HTML文件为例，来说明彼此之间的相对路径。
图1-13 相对路径说明
在图1-13中各个HTML文件之间的相对路径关系，如下所示：
■ 从1.html到4.html，期间需要经过B2文件夹，所以其相对路径就是B2/4.html。
■ 从1.html到2.html，不需要经过任何文件夹，所以它的相对路径是2.html。
■ 从2.html到3.html，经过B1和C文件夹，所以它的相对路径是B1/C/3.html。
上述3种路径是正向的相对路径，而逆向的相对路径则如下所示：
■ 从4.html到1.html的相对路径是../1.html。
■ 从3.html到4.html的相对路径是../../B2/4.html。
理解了绝对路径和相对路径的概念后，就可以根据实际情况的需要设置url 来实现页面间的跳转。
2. 站内链接
读者在访问网站的时候，用得最多的就是站内网页之间的链接。其语法如下：
<a href="相对路径">内容</a>
注意 站内链接通常使用相对路径，当然也可以使用绝对路径，但是当网站的目录有所调整的时候，绝对路径可能就会出现问题。
下述代码用以实现任务描述1.D.6，编写HTML，演示站内链接的使用。
【描述1.D.6】hrefZhanNeiEG.htmI
<html>
<head>
<title>站内链接</title>
</head>
<body>
<a href="metaEG.html">站内链接到metaEG.html</a>
</body>
</html>
当用鼠标点击<a>标签的内容部分时，就会转到指定的网页。通过IE查看该HTML，结果如图1-14所示。
图1-14 站内链接演示
点击超链接后的显示结果如图1-4所示。
3. 站外链接
当网站中的链接需要链接到站外的网页时，就需要用到站外链接，其语法与站内链接很相似，但站外链接必须使用绝对路径。其语法如下：
<a href="绝对链接路径">内容</a>
下述代码用以实现任务描述1.D.6，编写HTML，演示站外链接的使用。
【描述1.D.6】hrefZhanWaiEG.htmI
<html>
<head>
<title>站外链接</title>
</head>
<body>
<a href="http://www.haiersoft.com.cn">站外链接到海尔软件</a>
</body>
</html>
通过IE查看该HTML，结果如图1-15所示。
图1-15 站外链接演示
点击网页中的“站外链接”后，页面会跳转到“http://www.haiersoft.com.cn”的主页面，结果如图1-16所示。
图1-16 站外链接的跳转页面
4. 邮件链接
在一些大型网站上，经常会看到有的网页上有“点此给XXX 发送邮件”的字样。在点击该链接后，就会启动本地的邮箱工具（如Windows自带的OutLook工具）来编辑邮件。这里用到了HTML语言中的邮件链接。其语法如下：
<a href="mailto:邮件地址">内容</a>
下述代码用以实现任务描述1.D.6，编写HTML，演示邮件链接的使用。
【描述1.D.6】hrefEmaiIEG.htmI
<html>
<head>
<title>邮件链接</title>
</head>
<body>
<a href="mailto:xxx@abc.com">给版主写信</a>
</body>
</html>
在点击“给版主写信”后，会跳转到邮件发送页面，通过IE 查看该HTML，结果如图1-17所示。
图1-17 邮件链接跳转演示
注意 由于作者的计算机已设置Foxmail为默认邮件发送程序，故当点击邮件链接地址时弹出的是Foxmail邮件发送界面。
5. 锚链接
在网页中有的文章特别长，读者想要找到自己感兴趣的内容就比较麻烦，HTML语言提供了一种很好的解决方案——锚链接。使用锚链接能够快速地定位到网页中的某个位置。
锚链接由建立锚点和链接到锚点两部分组成。
锚点就是将要链接到的位置。其语法如下：
<a name="锚点名称"></a>
建立锚点之后，就可以创建到锚点的链接。其语法如下：
<a href="链接到网页的地址#锚点名称">内容</a>
当锚点的链接是在当前页面中的锚点时，可以省略掉“链接到网页的地址”：
<a href="#锚点名称">内容</a>
注意 无论是链接到当前网页还是其他网页的锚链接，锚点名称前的“#”不能省略。
下述代码用以实现任务描述1.D.6，编写HTML，演示锚链接的使用。
【描述1.D.6】hrefMaoEG.htmI
<html>
<head>
<title>锚链接</title>
</head>
<body>
<p><a href="#C5">参见第5章</a></p>
<p><a name="C1"><h2>第1章</h2></a></p>
<p>Java WEB（上）第1章的内容</p>
<a name="C2"><h2>第2章</h2></a>
<p>Java WEB（上）第2章的内容</p>
<a name="C3"><h2>第3章</h2></a>
<p>Java WEB（上）第3章的内容</p>
<a name="C4"><h2>第4章</h2></a>
<p>Java WEB（上）第4章的内容</p>
<a name="C5"><h2>第5章</h2></a>
<p>Java WEB（上）第5章的内容</p>
...
</html>
上述代码在“第5章”部分设置锚点“C5”，当点击锚链接“参见第5章”后，页面会跳转到第5章的位置。通过IE查看该HTML，结果如图1-18所示。
图1-18 锚链接演示
1.4.6 图像
在HTML中使用标签<img>把图像文件插入到文档中。其语法如下：
<img src="url" />
这里，<img>标签没有结束标签，必须用“/”把它关闭。url表示图片的路径和文件名，其值可以是绝对路径，如“http://localhost/images/123.tif”；也可以是相对路径，如“../images/123.tif”。
图像标签几个重要属性的说明如表1-6所示。
表1-6 图像标签的属性
下述代码用以实现任务描述1.D.7，编写HTML，演示<img>标签及其属性的使用。
【描述1.D.7】imgEG.htmI
<html>
<head>
<title>图像标签</title>
</head>
<body>
<p>
<img src="Blue hills.jpg" alt="samile face" align="right"
height="100" width="100">
</p>
</body>
</html>
在上述代码中，使用绝对路径导入了图片“Blue hills.jpg”，并且设置其高度和宽度皆为100，在网页的右侧显示。
通过IE 查看该HTML，结果如图1-19所示。
图1-19 图像标签
小结
通过对本章的学习，读者应该能够学会：
■ 超文本传输协议（HTTP，HyperText Transfer Protocol）是客户端浏览器或其他程序与Web服务器之间的应用层通信协议，用以实现客户端和服务器端的信息传输。
■ 统一资源定位符（URL，Uniform/Universal Resource Locator）是用于完整地描述Internet上网页和其他资源的地址的一种标识方法，实现互联网信息的定位统一标识。
■ 超文本标签语言（HTML，HyperText Mark-up Language，也可称为超文本标记语言），即HTML语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
■ 一个基本的HTML文档由HTML、HEAD和BODY 3部分组成。
■ HTML标签由ASCII字符来定义，用于控制页面内容（文字、表格、图片、用户自定义内容等）的显示。
■ 标签是HTML语言中最基本的单位，也是HTML语言最重要的组成部分。
■ HTML分隔标签用于区分文字段落。HTML分隔标签分为文字分隔标签和分割线标签两类。
■ HTML语言中的列表分为无序列表（<ul>）、有序列表（<ol>）、定义列表（<dl>）和嵌套列表4类。
■ 互联网的精髓就在于相互链接，即超链接（hyperlink）。
■ 常见的超链接形式有文字超链接、图像超链接和热区超链接3种。
■ 链接地址有绝对路径和相对路径两种方式。
练习
1. 超文本传输协议的简称是______。
A. HTML
B. HTTP
C. FTP
D. SMTP
2. 下列选项中，符合URL语法的是______。（多选）
A. www.sohu.com
B. ftp://www.google.com
C. http://www.abcd.com/x/y/z?a=b&m=n
D. C:\WINDOWS\system32
3. 超文本标签语言HTML的主要特点有______。（多选）
A. 简易性
B. 可扩展性
C. 平台无关性
D. 面向对象
4. 下列说法正确的是______。
A. HTML的标签必须成对出现，分别表示标签的开始和结束
B. HTML不区分大小写
C. HTML文件的后缀必须是“.html”
D. 以上都不对
5. 下列选项中能够以黑体显示红色文字的是______。（多选）
A. <font face="黑体" color="red">文字</font>
B. <font face="黑体" color="#0000FF">文字</font>
C. <font face="黑体"><font color="#FF0000">文字</font></font>
D. <font face="黑体"><red>文字</red></font>
6. 下列选项中可以使“内容1”和“内容2”分成两行显示的是______。（多选）
A. 内容1\n内容2
B. 内容1<br/>内容2
C. 内容1
内容2
D. <p>内容1</p><p>内容2<p>
7. 图1-13的4.html中需要有一个超链接指向3.html，正确的写法是______。
A. <a href="#3.html">3.html</a>
B. <a href="A/B1/C/3.html">3.html</a>
C. <a href="../C/3.html">3.html</a>
D. <a href="../B1/C/3.html">3.html</a>
8. 下列对锚链接的使用正确的是______。
A. <a href="#anchor">Anchor</a>
<a id="anchor">Anchor</a>
B. <a href="anchor">Anchor</a>
<a id="anchor">Anchor</a>
C. <a href="#anchor">Anchor</a>
<a href="http://www.sohu.com" name="anchor">Anchor</a>
D. <a href="anchor">Anchor</a>
<a name="anchor">Anchor</a>
9. 下列对邮件链接的使用正确的是______。
A. <A href="mailto://xyz@abcd.com">邮箱</A>
B. <A href="#mailto:xyz@abcd.com">邮箱</A>
C. <A href="mailto xyz@abcd.com">邮箱</A>
D. <A href="mailto:xyz@abcd.com">邮箱</A>
10. 简述HTML和HTTP的区别和联系。