Web编程入门经典 第1章 创建结构化文档

1第1章创建结构化文档本章介绍编写Web页面所需要学习的首要技术：HTML和XHTML。事实上，您将学习的是XHTML——后面会解释HTML和XHTML之间的区别。（可以将XHTML简单看作为HTML的最新版本）。本章的主要目的是演示XHTML如何描述文档的结构。在本章中将介绍以下内容：学习标签、元素和属性之间的区别了解Web页面如何使用标记描述结构化页面的方式介绍用于标记题头和段落等文本的元素学习许多其他元素，这些元素能够在文档中添加表示信息和语义了解如何在文档中添加项目列表和编号列表介绍一些用于区分XHTML中元素类型的核心概念阅读完本章后，读者能够了解如何使用XHTML构造页面，并能够编写自己的第一个Web页面。1.1结构化文档组成的Web在日常生活中，人们会接触各种类型的打印文档——报纸、列车时刻表、保险单。Web由大量链接在一起的文档所组成，走这些文档类似于日常生活中的文档。因此，首先回顾日常生活中看到的一些文档的结构，并将它们与Web页面作比较。每天早上我习惯阅读报纸。报纸由一些故事和文章（很可能还有一些广告）组成。每个故事具有一个标题、一些段落，或许还有一个副标题以及其他更多的段落，还可能包含一幅或两幅图片。我一般不买日报，因为常常在线观看新闻，但Web站点中的文章的结构与报纸中文章的结构非常相似。每篇文章也是由题头、文本段落和图片组成。两者非常相似，仅有的区别是，Web站点中的每个故事具有它自己的页面，访问该页面仅需要单击它的标题行或者简短概述，这些标题行和简短概述可能位于站点的主页面或者站点的某个分部（例如政治、体育或者娱乐部分）的主页面。举一个例子：假设乘火车去看望一个朋友，因此需要查看列车时刻表以了解到他那里的列车车次。列车时刻表的主要部分是一张表，表中列举了列车在各个站的到达和离开时间。如同许多文档具有标题和段落一样，许多其他的文档也使用表：从报纸财经增刊中的股票信息页面到电视节目播出列表，人们每天都会遇到一些包含信息的表——并且这些表通常也被2创建在Web中。另外一种常见的文档是表单。例如，桌面上有一张保险公司的表单。在这张表单中有一些需要填写的字段，包括姓名、地址、保险金额，也有一些方框，需要在这些方框中进行选择以指出房子中房间的数量和大门门锁的类型。事实上，Web页面中存在大量表单，从询问查找内容的简单搜索框到在线订购书籍或CD之前要求填写的注册表单。根据上面的介绍可以发现，日常生活中打印文档的结构和Web中页面的结构非常类似。因此，在开始编写Web页面时，您会很容易地理解代码将告诉Web浏览器需要显示信息的结构——哪些文本被放置在标题、段落或者表中等——以便浏览器能够正确将它们显示给用户。为了告诉Web浏览器文档的结构一如何建立标题、段落、表等——您需要学习HTML和XHTML。1.2XHTML简介XHTML(可扩展超文本标记语言)与它的前身HTML是Web上最广泛使用的语言。从名称中可以看出，XHTML是一种标记语言，它看上去可能很复杂，但如果意识到每天都会遇到各种标记，这种观点就会改变。当在文字处理软件中创建文档时，可以对文本添加样式以解释文档的结构。例如，可以使用题头样式（通常具有较大的字体）区分标题和文本主体，使用Enter(或Return)键开始一个新的段落，在文档中插入表以放置数据，或者为一系列相关的要点创建项目列表等。这些样式会影响文档的表现形式，但是这种标记的关键目的是提供一种结构，以使文档更容易理解。当标记Web文档时，实际上执行的是一种非常相似的过程，不同的只是需要在Web文本上添加标签。对于XHTML，关键是要记住添加标签以指明文档的结构，即文档的哪一部分是题头，哪些部分是段落，哪些内容属于表等。浏览器（例如InternetExplorer、Firefox和Safari等）将使用这种标记以用户熟悉的方式显示文本，它的行为类似于文字处理软件（标题的字体大于正文，段落间存在一些空格，项目列表的每一项前面有一个圆点）。然而，这些内容的表现方式由浏览器决定；XHTML规范没有说明应当使用哪些字体或者该字体的尺寸。注意：早期版本的HTML允许控制文档的表现形式——例如文档应当使用哪些字型和颜色——但是XHTML标记不应该用于样式化文档，这些工作由CSS完成，第7章中将介绍CSS。首先查看一个非常简单的Web页面。前言中曾提到，编写Web页面不需要任何特殊的程序一可以只使用一个文本编辑器，例如Windows中的Notepad或Mac中的TextEdit。编辑3完成之后，以.html文件扩展名的形式存储文件。可以从Wrox的Web站点处下载本书中的所有代码，其中就有这个示例，它位于Chapter1文件夹中，文件名为chOl_egOl.html。htmlheadtitlePopularWebsites:Google/title/headbodyh1AboutGoogle/h1pGoogleisbestknownforitssearchengine,althoughGooglenowoffersanumberofotherservices./ppGoogle'smissionistoorganizetheworld'sinformationandmakeituniversallyaccessibleanduseful./ppItsfoundersLarryPageandSergeyBrinstartedGoogleatStanfordUniversity./p/body/html初看上去，这些代码不容易理解，但下面会逐一解释它们。在这段代码中有几组尖括号，其中包括一些单词或字母，例如html、head、/title和/body。尖括号和其中的单词一起称为标签，这些就是前面讨论过的标记。图1-1所示为该页面在浏览器中的外观。图1-1这个文档中包含了题头“AboutGoogle”和一个介绍Google公司的文本段落。另外注意，在该浏览器窗口的左上角处显示了“PopularWebsites:Google”，它称为该页面的标题。为了理解第一个示例中的标记，需要查看尖括号中编写的内容，并将它们与图中所见的内容比较，具体请阅读接下来的小节。41．标签和元素查看上面示例中的第一行和最后一行代码，可以看到包括字母html的成对的尖括号。两个成对的尖括号及其中的所有字符称为标签，该示例中存在许多标签。本示例中的所有标签都是成对出现；在某对标签中，前面的标签称为起始标签，后面的标签称为结束标签。两者的不同点是结束标签在第一个尖括号后面有一个正斜杠。某对标签和其中包含的内容统称为元素。图1-2中给出了上面示例中页面的题头。图1-2起始标签表明“这是题头的开始”，结束标签表明“这是题头的结束”。类似于XHTML中的大多数标签，尖括号内部的文本解释了该标签的目的——这里的hl表明它是第一级题头（或顶级题头）。后面将会看到，也有表示副标题的标签（h2、h3、h4、h5和h6）。如果不标记“AboutGoogle”，则它将只是另一段文本；无法表明它是题头。下面查看关于公司介绍的3段文本，每一段位于起始标签p和结束标签/p之间，其中p表示段落。注意：由于以下两个基本概念非常重要，因此这里再次给出它们的定义：标签由尖括号和它们中间的字母和数字组成，而元素由标签以及起始标签和结束标签之间的文本组成。这个示例中的标记实际上描述了标签之间的内容，而标签提供的额外意义是它描述了文档的结构。在起始标签p和结束标签/p之间是段落，而在hl标签和/hl标签之间是题头。事实上，整个文档被包含在起始标签html和结束标签/html之间。人们经常采用家族树中的术语描述元素问的关系。例如，包含其他元素的元素称为父元素，而父元素的起始标签和结束标签之间的元素称为该元素的子元素。因此，title元素是head元素的子元素，而head元素是title元素的父元素。此外，title元素可以被认为是html元素的孙元素。注意：XHTML标签只能以小写字母编写。h1AboutGoogle/h1元素起始标签结束标签52．头和主体当采用XHTML编写Web页面时，整个页面包含在起始标签html和结束标签/html之间，如同前面的示例所示。在html元素中，存在两个主要的页面部分：head元素：通常称为页面的头，它包含了关于整个页面的信息（但不是页面的主要内容），具体的信息包括页面的标题和描述或者搜索引擎用于索引页面用的关键字。head元素由起始标签head和结束标签/head以及两者之间的所有文本组成。body元素：通常称为页面的主体，它包含人们在浏览器主窗口中实际看到的信息。body元素由起始标签body和结束标签/body以及两者之间的所有文本组成。在第一个示例页面的head元素中，可以看到title元素，如下所示：headtitlePopularWebsites:Google/title/head在起始标签title和结束标签/title之间是“PopularWebsites:Google”，它是这个Web页面的标题。图1-l是这个Web页面的屏幕截图，前面曾提醒读卖者注意浏览器窗口顶部右边的单词。这是浏览器(例如IE、Firefox和Safari)显示文档标题的位置，它也是在收藏夹中保存页面时使用到的名字。页面的实际内容位于body元素中，这是希望用户阅读的内容，并且显示在浏览器主窗口中。注意：head元素中包含了关于文档的信息，这些信息不显示在主页面中。body元素存储页面的实际内容，可以在浏览器中查看到这些内容。可能已经注意到，示例中的标签以对称顺序出现。如果希望某个元素位于另外一个元素之中，则该元素的起始标签和结束标签都必须位于包含其的元素之中。例如，下面的语句是正确的：pThisparagraphcontainssomeememphasizedtext./em/p而下面的语句是错误的，因为结束标签/em没有在段落元素之中：pThisparagraphcontainssomeememphasizedtext./p/em换句话说，如果一个元素包含另外一个元素，则它必须完全包含该元素这称为正确地嵌套元素。3．元素的属性Web文档和普通文档的区别在于链接（或超链接），利用链接可以从一个Web页面转向6另外一个页面。下面查看链接的示例，该示例在前面的示例中添加一个链接。创建链接的方法是使用a元素，其中a是anchor的缩写。这里将添加从该页面到Google的链接，添加位置在文档末尾的新段落中，新的示例（代码为chOl_eg02.html）中仅需要添加一个新行，并且突出显示该行：htmlheadtitlePopularWebsites:Google/title/headbodyh1AboutGoogle/h1pGoogleisbestknownforitssearchengine,althoughGooglenowoffersanumberofotherservices./ppGoogle'smissionistoorganizetheworld'sinformationandmakeituniversallyaccessibleanduseful./ppItsfoundersLarryPageandSergeyBrinstartedGoogleatStanfordUniversity./ppahref=在这个