Web编程入门经典-HTML、XHTML和CSS(第2版)源码及注解-第1章 创建结构化文档
在日常生活中，人们会接触各种类型的打印文档——报纸、列车时刻表、保险单。Web由大量链接在一起的文档所组成，这些文档类似于日常生活中的文档。因此，首先回顾日常生活中看到的一些文档的结构，并将它们与Web页面作比较。
Web站点中的文章的结构与报纸中文章的结构非常相似。每篇文章也是由题头、文本段落和图片组成。两者非常相似，仅有的区别是，Web站点中的每个故事具有它自己的页面，访问该页面仅需要单击它的标题行或者简短概述，这些标题行和简短概述可能位于站点的主页面或者站点的某个分部（例如政治、体育或者娱乐部分）的主页面。
当在文字处理软件中创建文档时，可以对文本添加样式以解释文档的结构。例如，可以使用题头样式（通常具有较大的字体）区分标题和文本主体，使用Enter(或Return)键开始一个新的段落，在文档中插入表以放置数据，或者为一系列相关的要点创建项目列表等。这些样式会影响文档的表现形式，但是这种标记的关键目的是提供一种结构，以使文档更容易理解。
由于以下两个基本概念非常重要，因此这里再次给出它们的定义：标签由尖括号和它们中间的字母和数字组成，而元素由标签以及起始标签和结束标签之间的文本组成。
head元素中包含了关于文档的信息，这些信息不显示在主页面中。body元素存储页面的实际内容，可以在浏览器中查看到这些内容。
所有的属性都由两部分组成，即属性的名称和属性的值，它们之间通过等号隔开。值应该放置在双引号中，而所有XHTML属性的名称都应当以小写字母编写。
三种文档类型声明
l Transitional XHTML l.O，该版本仍然允许开发人员使用HTML4.1中的不赞成使用标记，但是要求程序设计人员使用新的更严格的语法。
l Strict XHTML l.O，用于告诉XHTML的向前路径，它不需要逐渐淘汰标记，但是遵从新的更严格的语法。
l Frameset XHTML l.O，该版本用于创建使用框架技术的Web页面，第6章中将介绍框架。
DOCTYPE声明在文档中的位置位于起始标签<html>之前，如果在文档中使用了可选的XML声明，则DOCTYPE声明位于XML声明之后。
如果编写的代码遵循Transitional XHTML l.0 (并且在文档中包含样式标记)，则DOCTYPE声明应该如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果编写的代码遵循Strict XHTML l.0，则DOCTYPE声明如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- Strict.dtd">
对于框架集文档（第6章中将介绍这种文档），DOCTYPE声明如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- Frameset.dtd">
注意：
Strict XHTML文档必须在根元素之前包含DOCTYPE声明；但是，如果创建的是Transitional或Frameset类型的文档，则不需要包含DOCTYPE声明。
国际化属性
存在3种国际化属性，用户可以使用它们编写具有不同语言和字符集的页面。大多数(尽管不是全部)XHTML元素都能够使用这些国际化属性（对于支持多种语言的文档来说，它们是非常重要的属性）。
dir lang xml:lang
即使是最新浏览器也仍然不能很好地支持这些属性，因此最好不要指定根据所需的方向创建文本的字符集，尽管xml:lang属性能够被其他支持XML的应用程序使用。
下面是包含了有用的W3C文档的Web地址，这些文档详细地描述了国际化问题，但是下面将简单地介绍这些国际化属性：
http://www.w3.org/TR/i18n-html-tech/
注意：
国际化属性有时称为i18n属性，这个奇怪的名称来源于draft-ietf-html-i18n规范，该规范中第一次定义了这个属性。
1.dir属性
利用dir属性可以指定文本在浏览器中的显示方向。当需要指定整个文档（或文档的大部分）的方向性时，应当在<html>元素中使用dir属性，而不是在<body>元素中使用该属性，原因有两点：<html>元素能够被浏览器更好地支持，并且随后该属性应用于头元素以及主体中的元素。如果希望改变文档一小部分内容的方向，也可以将dir属性用于文档主体的元素中。
dir属性可以使用表1-1所示两个值中的一个值。
表1-1
| 值 | 意 义 |
| ltr | 从左到右（默认值） |
| rtl | 从右到左（某些语言，例如希伯来语或阿拉伯语，从右向左阅读） |
2.lang属性
利用lang属性可以指示文档中使用的主要语言，但在XHTML中保留这个属性只是为了与早期的HTML版本向后兼容。在新的XHTML文档中，lang属性已经被xml:lang属性代替（下一一节中将介绍xml:lang属性）。但是，XHTML规范建议在XHTML l.0文档的<html>元素中同时使用lang属性和xml:lang属性（以在不同的浏览器之间获得最大的兼容性）。
设计lang属性是为了向用户提供语言特有的显示，尽管它对主要的浏览器具有较小的影响。使用lang属性后，真正受益的是搜索引擎（搜索引擎利用它能够告诉用户采用哪一种语言编写文档）、屏幕阅读器（屏幕阅读器利用它能够以不同的方式发音不同的语言）以及一些应用程序（应用程序能够在它们不支持所提供的语言或者该语言与它们的默认语言不同时向用户发出警报）。当lang属性用于<html>元素中时，它将作用于整个文档；而在用于其他元素中时，它将仅作用于这些元素的内容。
lang属性的值是IS0-639标准两字符语言代码。如果希望指定某种语言的方言，可以在语言代码后面紧跟一个破折号和一个子代码名称。表1-2中给出一些示例。
表1-2
| 值 | 意 义 |
| ar | 阿拉伯语 |
| en | 英语 |
| en-us | 美国英语 |
| zh | 中文 |
在附录G中列出了当今使用的大多数主流语言的语言代码。
3.xml:lang属性
在XHTML中，xml:lang属性是lang属性的替代属性。以XML编写的所有语言中都可以使用该属性。本章前面曾提到，XHTML是采用XML编写的，因此它具有字符前缀“xml:”。Xml:lang属性的值应该是IS0-639国家代码，，例如前面小节中列出的几种国家代码；附录G中包含了IS0-639国代码的完整列表。
虽然xml:lang属性对主要的浏览器没有影响，但其他支持XML的应用程序和搜索引擎可以使用这些信息，因此在文档中包含xml:lang属性是一种良好的习惯。当用于<html>元素中时，该属性将作用于整个文档；而在用于其他元素中时，它仅作用于这些元素的内容。
默认情况下，大多数浏览器显示的<hl>、<h2>和<h3>元素内容大于文本在文档中的默，认尺寸。<h4>元素的内容与默认文本的大小相同，而<h5>和<h6>元素的内容较小一些。
Firefox、IE和Safari支持XHTML规范中用于阻止換行的扩展元素：<nobr>元素（该元素保留其包含元素的普通样式，并且不会导致文本以等宽字体显示）。由于它是扩展元素，因此不是有效的XHTML。附录I中将介绍<nobr>元素。
<em>元素添加强调
<em>元素的内容是文档中的强调点，该内容通常以斜体显示。对一些单词使用这种强调方式，例如下面句子中的单词“must”：
<p>You <em>must</em> remember to close elements in XHTML.</p>
使用这个元素的原则是仅当需要对单词添加强调时才使用它，而不能是因为希望斜体显示文本而使用它。如果只是出于样式化原因而希望斜体显示文本，可以使用<i>元素或者CSS。
<strong>元素添加着重强调
<strong>元素用于着重强调它的内容——强调程度强于<em>元素。与<em>元素一样，应当仅在希望对文档的一部分添加着重强调时才使用<strong>元素。大多数可视化浏览器没有以斜体显示着重强调的文本，而是以粗体显示该文本。
l 块级元素
l 内联元素
这种划分只是在概念上具有不同，但是对于XHTML的其他功能（本书后面将介绍其中一些功能）来说，这种划分具有重要影响。
在屏幕上显示时，块级元素的前面和后面都将换行，如同存在回车或换行符一样。例如， <p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr/>、<blockquote>和<address>都是块级元素。在显示这些元素时都将从新行中开始显示，它们后面的内容也将在新行中显示。
另一方面，内联元素一般出现在句子中，在浏览器中显示时不会换行。以下元素都是内联元素：<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<sma11>、<li>、<ins>、<del>、 <code>、<cite>、<dfn>、 <kbd>和<var>。
1．模式
模式标识链接到的URL的类型，因而也标识了检索资源的方式。例如，大多数Web页面使用超文本传输协议(Hypertext Transfer Protocol，HTTP)传递信息，这就是大多数Web页面以http://开头的原因，但是在位用网上银行或者下载大型文件时，您可能也注意到了其他前缀。
表2-1列出了最常见的模式。
表2-1
| 模 式 | 描 述 |
| http:// | 超文本传输协议(HTTP)用于向Web服务器请求页面，并将它们从Web服务器发送回浏览器 |
| https:// | 安全超文本传输协议(Secure Hypertext Transfer Protocol，HTTPS)使用数字证书加密在浏览器和Web服务器之间发送的数据 |
| ftp:// | 文件传输协议是程在Web上传输文件的另一种方法。HTTP由于与浏览器集成而经常用于浏览Web站点，而FTP经常用于在Web中传输大型文件以及向Web服务器上传源文件 |
| file:// | 用于指明文件位于本地硬盘中或者局域网上的一个共享目录中 |
在站点中使用相对URL的另一种关键优点是，用户可以方便地改变站点的域名或者将站点的某个分布复制到新站点中，而不需要改变所有的链接，因为每一个链接都相对于相同站点中的其他页面。
注意：
相对ULR只适用于相同Web站点的相同目录结构中的链接；不能使用它们链接到其他服务器上的页面。
<base>元素
前面已经提到，当浏览器遇到相对URL时，它实际上是将相对URL转换为完整的绝对URL。<base>元素允许用户指定页面的基URL，这样当浏览器遇到相对URL时，将在它们的前面添加基URL。
可以指定基URL为href属性的值。例如，可以以如下形式指定http://www.exampleSite2．com/的基URL:
<base href="http://www.exampleSite2.com/" />
在这种情形下，如下所示的相对URL:
Entertainment/Arts/index.html
最终导致浏览器请求如下的页面：
http://www.exampleSite2.com/Entertainment/Arts/index.html
当某个页面被移动到新的服务器，但是仍然想让该页面上所有的链接指向初始的站点，或者当页面本身没有URL时(例如HTML的e-mail)，基URL就非常有用。
除了href属性之外，<base>元素能够附带的另一个唯一的属性是id属性。
<hl>Linking and Navigation</hl>
<h2><a id="URL">URLs</a></h2>
<h2><a id="SourceAnchors">Source Anchors</a></h2>
<h2><a id="DestinationAnchors">Destination Anchors</a></h2>
<h2><a id="Examples">Examples</a></h2>
添加目的地锚点之后，可以添加源锚点以链接到这些部分，如下所示：
<p>This page covers the following topics:
<ul>
<li><a href="#URL">URLs</a></li>
<li><a href="#SourceAnchors">Source Anchors</a></li>
<li><a href="#DestinationAnchors">Destination Anchors</a></li>
<li><a href="#Examples">Examples</a></li>
</ul>
</p>
如果某个人想从不同的Web站点处链接到这个页面的特定部分，应当添加这个页面的完整URL，后面紧跟英镑符号#，然后是id属性的值，如下所示：
http://www.example.com/HTML/links.html#SourceAnchors
图像映射
图像映射允许用户指定对应单个图像的不同区域的多个链接，从而当用户单击图像的不同部分时，可以到达不同的页面。存在如下两种类型的图像映射：
l 服务器端图像映射
l 客户端图像映射
两者的不同点在于决定链接目的页面的代码的执行位置不同。对于客户端图像映射，浏览器根据用户单击的位置指示链接的目的页面；而对于服务器端图像映射，浏览器将用户单击位置的坐标发送给服务器，然后由服务器端的脚本文件处理这些坐标以决定用户应该转向哪个页面。
服务器端图像映射
对于服务器端图像，<img>元素（位于一个<a>元素中）附带一个特殊的ismap属性，ismap属性告诉浏览器在用户单击图像映射时向服务器发送表示鼠标指针所在位置的x，y坐标。然后使用服务器中的一个脚本基于传递给它的坐标确定用户应当跳转到的页面。
例如，请查看下面的链接，其中<img>元素附带了ismap属性，该属性的值为ismap(在HTML中ismap属性不需要具有值；但是，在XHTML中所有属性都必须有值，因此在XHTML中采用该属性的名称作为值以使其有效)：
<a href="../location/map.aspx"><img src="../images/states.gif" alt="map of US States" border="0" ismap="ismap" /></a>
现在，如果用户单击图像中从<0,0>到<50,75>像素之间的位置，浏览器将向服务器发送如下URL信息：
http://www.example.org/location/map.aspx?50,75
可以看到附加在URL末尾的坐标在<a>元素中指定。
对于服务器端图像映射，在服务器中需要有一个脚本、映射文件或者应用程序来处理坐标，以便知道用户应当跳转到哪个页面。图像映射的实现方法具体依赖于运行在其上的服务器的类型。
由于服务器端图像映射由服务器处理，因此在HTML或XHTML中没有它们的实现。遗憾的是，本书中没有空间为每一种不同的平台介绍它们的实现方法。如果想了解服务器端图像映射，应当购买一本介绍服务器端脚本的书籍，例如关于ASP.Net、PHP、CGI或JSP的书籍。可以在Wrox.com中查看关于这个主题的书籍列表。
客户端图像映射
由于服务器端图像映射依赖于服务器技术，因而引入了另一种作用于浏览器的技术，即客户端图像映射。客户端图像映射使用XHTML页面中的代码来指示图像的哪一部分应当链接到哪个页面。因为划分图像各个部分的代码位于浏览器中，所以浏览器可以向用户提供额外的信息，例如在状态栏中显示一个URL，或者当鼠标悬浮在图像上时显示一个工具提示。
存在两种创建客户端图像映射的方法：在<img>元素中使用<map>元素和<area>元素，以及在<object>元素中使用<map>元素，其中后者是最近经常使用的方法。
1.采用<map>元素和<area>元素的客户端图像映射
这是较早的创建图像映射的方法，浏览器已经支持该方法很长时间，可以追溯到Netscape 4和IE 4出现的年代。
通常使用<img/>元素将组成映射的图像插入到页面中，不同之处是该元素附带了一个称为usemap的额外属性。usemap属性的值是<map>元素中name属性的值（下面将介绍name属性），前面添加一个英镑符号(#)。
<map>元素为图像实际地创建映射，并且它通常紧跟在<img/>元素之后。它是<area>元素的容器，<area>元素实际地定义可单击的热点。<map>元素仅附带一个属性，即name属性，该属性用于标识映射的名称。这就是<img/>元素知道使用哪个<map>元素的方式。
<area>元素指定定义每一个可单击热点的边界的形状和坐标。下面是用于图3-14中图像的图像映射示例(ch03_eg07.html)。
<img src="images/gallery_map.gif" alt="Gallery Map" width="500" height="300" border="0" usemap="#gallery" />
<map name="gallery">
<area shape="circle" coords="154,150,59" href="foyer.html" target="_self" alt="Gallery foyer">
<area shape="poly"
coords="272,79,351,79,351,15,486,15,486,218,272,218,292,166,292,136,270,76" href="sculpture_garden.html" target="_self" alt="Sculpture garden">
<area shape="rect" coords="325,224,488,286" href="workshops.html"
target="_self" alt="Artists studios">
</map>
<img/>元素中usemap属性的值是#gallery，并且该值也用于<map>元素中。然后<area>元素实际定义了图像中可单击的每一部分。
如果存在两个区域互相重叠，则代码中首先出现的区域将具有较高的优先级。
<area>元素能够附带的属性与<a>元素类似。下面将介绍一些与图像映射相关的属性；其他属性请参考本章前面的“使用<img>元素添加图像”一节。
accesskey alt shape coords href nohref target tabindex taborder notab
shape属性
shape属性的值实际上影响了浏览器使用坐标（由coords属性指定）的方式，因此它是必的属性。如果不指定shape属性，则IE通常假设该区域是矩形。
表3-4列举了shape属性的可能值。
表3-4
| 值 | 创建的形状 |
| default | 整个图像都没有被定义在一个区域中（应该最后指定该值） |
| rectangle或rect | 矩形 |
| polygon或 poly | 多边形 |
| circle或 circ | 圆形 |
最好使用值的缩写形式， 因为它们能够被较老的浏览器更好地支持。如果希望表明图像中没有被<area>元素指示的任何部分，应当在最后使用值default指定——它类似于针对图像剩余部分的捕获所有代码块。
coords属性
coords属性用于指定可单击热点的区域。指定的坐标的数量依赖于所创建的形状（已经在shape属性中指定形状）。
l 一个矩形包含4个坐标，其中前两个坐标表示矩形左上角，后两个坐标表示右下角。一个圆形包含3个坐标，前两个坐标是圆形的中心，而第三个坐标是半径，单位是像素。
l 多边形的每一个顶点由两个坐标值表示，因此一个三角形将包含6个坐标值，—个五角形将包含10个坐标值，以此类推。不需要在最后再次指定第一个坐标，因为形状将自动闭合。
有些Web制作和图像编辑程序能够帮助用户计算出图像映射的坐标；这些程序提供一种工具，利用这种工具可以选择希望转变为映射的区域，并使用这些形状创建坐标。图3-15给出了Dreamweaver的图像映射工具——因为每一种程序都是不同的，所以应当查看所使用程序的帮助文件以了解如何创建图像映射。