创建一个简单的HTML文档（转）

创建一个简单的HTML文档： 在前面的小节中，我们讨论了创建HTML页所用的12种基本标记。每个人都可以按这种方式使用这些标记。现在，该讨论一下怎样在Web 站点上使用这些标记创建一个页了。清单8-1列出了一个简单Web页的源代码。显然，决不会在实际应用程序中创建这样（简单的）一个页，这一页的全部目的在于说明12种标记是如何工作的。

这些源码初看起来有些唬人，但这里没有任何前面小节中没有讲到的东西。首先，第一个标记 定义了页的开始，在源代码程序列表的末尾可以看到它的配对符号。其次，我们把文档用及 （及其配对符号）将文本分成了两部分。唯一没见过的标记是，它定义了浏览器标题栏中的标题，这一标记并不是绝对必要的，但给Web页一个标题很好，使其它人知道它们在看什么。另外，标题还可以帮助在自己的页间航行以找到出问题的部分。

注 标记在浏览器标题栏中显示你的Web 页的名称。

页的正文部分以一个1级标题开始，接着是加了特殊属性的一些文本，其后是一条水平标尺标记，在这里，还可以看到能表明

与

标记有什么差别的一些文字，过一会儿就会看到它们是怎么一回事。

程序列表的下一节说明了标题的其它五个级别的差别，大多数浏览器只是简单地使用不同的字号来改变标题的级别。不幸地是，大多数浏览器没有足够多的可读的字体大小来对应全部标题级别。可能需要避免使用第6级标题，因为它们太小，以至于某些人看不清。第5级标题已经是相当小了。

在这个示例的最后一小节含有一些链接，现在还不能看到链接上去的页，这仅是后面章节的一个练习。但是，请看第五个链接，可以注意到它是当前页的一个锚地。正文部分的最后一个工作行包含着这个锚地。一定要花些时间在你的浏览器上看一看它们是如何工作的。

那么，我们的HTML样页看起来是什么样子呢? 图8.3是使用InternetExplorer 3.0时可以看到的样子。如果你使用其它浏览器，就要用些时间对书中列出的屏幕显示与你自己的屏幕进行比较了。可以发现，并不是所有的浏览器都是一样的，在显示东西时，它们会有一些细小的差别。机器的差别只能加剧显示的差别。考虑到这些都是常见标记，想象一下，如果使用了某个浏览器支持而其它浏览器不支持的一些更奇异的标记时会发生什么呢?!

现在到了扩充我们的HTML知识的时候了。下面几节将要说明一些其他标记，尽管在这些章节不准备讨论全部细节，但它们提供的足够信息，已经可以使你在访问其它Web站点并查看源码时能看懂它们。

使用列表

你看到过不包括任何形式的公告式列表或过程程序的技术书籍吗? 把复杂的思想用容易理解的语句片段表达出来，恐怕是作者们能够进行的最基本的任务之一。列表──是枚举想法的小段文本棗是大多数情况下解决问题的答案。考虑到大多数Web页的大小限制，列表就变得更加重要。HTML支持三种不同形式的列表：

无序列表 这种列表使用公告牌形式，以标记开始，并以 标记结束，在列表中的项以标记开头。

有序列表 过程或其它具有编号的文本形式考虑使用有序列表，这种列表格式使用和标记，和无序列表一样，每一项以标记开头。

术语汇编 这种特殊的列表使用由和 标记括起来的两类项元素。被定义的项前辍以标记，而项的定义则前辍以标记。

尽管只有三种列表形式，但就如同其它程序设计方案中一样，可以用嵌套方法实现多种功效。讨论页的样本的代码时，就会看到列表8.2中是如何实现这一点的了。

注 总要对HTML页加入大量的注释，因为可能有不是程序员的人们来不时地编辑它们。

在我们讨论的三种形式的列表中，术语汇编是最灵活的。它使用的两种类型的列表元素使显示的文本看起来更美观。（项）标记和标记（定义）间的差别在于其中之一是被缩进的。可以用这一特色，作出与术语汇编类型元素显示无关的特殊功效。和本章中讨论的一些其它特殊文本标记一样，列表标记（，和）在行尾自动插入一个

标记。使用

标记使得文本变成下一行，但保持列表仍在一起。

现在又该看一下列表代码的例子了。程序列表8.2显示的是程序列表8.1中看到的第一页的第一个链接页。它包含着三种基本列表形式，以及一个说明怎样对它们进行嵌套的例子。请确保将产生的文件命名为LISTS.HTM，这样才能使链接按所预期地那样工作。特别要注意这是第一个使用注释（标记）的页面。

注 尽管有其它方式创建注释，但通常习惯于用标记。

你已很好地了解了怎样对各种列表标记写出代码了，现在就能够看到这一页的样子了。图8.4显示的是怎样使用列表的一个典型例子，请注意，三种列表形式都没有怎么进行修饰，但它们却都正常有效。

添加图形

图形确实可以对文本页进行乔装打扮。我们大多数人都会同意这样的说法：如果作者在技术手册中添加了足够多的正确的图形图像，理解起来就会容易得多。也可以向 Web页中加入图形，然而，添加的方式上却有一些限制。

技巧 一些人过分热衷于向它们的Web站点添加图形，导致了大多数人甚至不能看到这些图形的大部分，当用户在下载图形时，如果用了一分钟还不能完成下载，他们就会按下浏览器的Stop（停止）按钮。事实上，一个良好的估算是使Web 页的大小（包括图形和ActiveX控件）保持在60KB以下。

你要面对的最大限制之一是能够显示的图形种类，许多浏览器只处理GIF（又称为CompuServe格式）和JP（JPG）图像这两种格式──它们是由HTML支持的。你的浏览器上显示的其它类型的图像，都是使用了插件的结果。Netscape和Internet Explorer都支持各种插件，例如，更流行的插件之一允许用浏览器观看AVI（电影）文件。Web页设计者的问题是不能指望别人都拥有这些插件。于是，如果计划创建一个受欢迎的Internet站点，那么大概就要坚持使用GIF和JPEG 图像了。

注 使用GIF和JPG图像可以获得最大的兼容性，而在知道了用户使用什么浏览器时，使用其它图像类型则可以获得最大的美观效果。

显示图形图像是相当容易的，必须做的全部工作就是使用标记，这一标记使用SRC属性来接受一个文件名，例如：

把图形放入一个页面就不像你想像的那么容易了，像文本情况时一样，由于不能定义它们的确切位置，除了使用框架(frame)或表格之外，没有多少办法来预先确定图形的位置。通过使用诸如在前一小节中看到的列表标记技巧，文本通常提供了某些灵活性，而图形却不提供这样的灵活性。如果你设计中的Web页非常复杂，那么大概一直要使用框架(frame)来获取大部分浏览器的正确响应了。

Web链接 Microsoft、Netscape和其它供货商正在制定称之为层叠式电子表格（CSS）的HTML新标准。事实上，Internet Explorer 4.x已部分地支持CSS 。CSS的一个目的是提供前后连贯的方法，从而不用做大量格式化工作就可以显示数据。另一个目的是，使诸如图形这样的屏幕元素的定位更容易。如果想找到Internet Explorer3.x支持的CSS的具体信息（写本书时，Internet Explorer 4.x的Web 站点还没有更新），那么请查看http://www.shadow.net/%7Ebraden/nostyle/。可以在http://www.w3.org/pub/WWW/Style/CSS/，找到规范本身。Microsoft 在http://www.microsoft.com/turetype/css/gallery/entrance.htm也有一个CSS展台，这一特定的站点不能用Netscape Communicator访问，因为到写本书时它还不支持CSS。这一产品也支持称之为Javascript Style Sheets的竞争标准。

使用标记能够定义文本和图形混合显示的方式，所要做的一切工作就是加入ALIGN属性，有三种方式对齐文本：

ALIGN=TOP

ALIGN=MIDDLE

ALIGN=BOTTOM

注 当图形与文本相邻显示时，ALIGN属性允许你改变文本的显示位置。

让我们看一下向某个Web站点加入图形的简单代码。在使用窗体(FORM)一节中，我们将更深入地考察图形的定位问题。程序列表8.3中的代码显示了图形图像，并说明怎样使用ALIGN属性（这一程序列表使用了我作的一个GIF，你可以用手边的任何GIF 文件代替它）。这种方法对于显示公司形象标志或在一个页上显示其它简单图形是适用的。图8.5则显示这些代码显示出的图像。

Web 链接 你可能已经注意到某些人用图形而不是用文本来创建链接（详见本章前面一节链接及锚地）。这种技术称之为映射。如果没有实用程序的帮助，在Web 页中使用映射很快就会糊涂起来。在http://www,ecaeta.ohio-state.edu/tc/mt/上可以找到一个称为Map This的非常出色的共享实用程序，可以帮助你创建图形映射。（由于这个站点十分繁忙，也许会碰上麻烦，但坚持试下去，因为这个实用程序非常值得去努力得到它。）

创建表格

表格化数据差不多总是所有商务展示的一部分。电子表格帐页（spreadsheets）仅仅是会计师分类帐帐页在计算机中实现的一个例子。在HTML页上创建表格是有意义的，但是需要有一整套标记来完成这项工作。这里列出了所有必须的制表标记。

技巧 标记有一个特殊的BORDER属性，允许你用线条把表格围起来，缺省的边界（线条）值是宽度1，也可以根据浏览器设置为1到6之间的任一个数字。

我们来看一份简单的代码，它定义了两种不同的表格。程序列表8.4 说明了怎样使用本节谈到的那些简单标记来实现两种不同的效果。第一个表格包含的是简单文字元素，而第二个则以复杂的方式混合了文字和图形。

技巧 可用和这对标记对表格中的文本进行居中处理。这一对标记对放入文档的任何文本都可以起作用，而且它们对图形也起作用，请参考程序列表8.4。

注 用缩进格式写代码可以使表格中的行和列分开，而且容易看清。

这些代码看起来真不少，手工写起来令人发烦（类似于这样的代码从另一角度说明，如果计划写出大量HTML页面代码的话，就应该多用些精力让GUI 前端工具来帮你的忙）。图8.6是在浏览器看到的屏幕显示。上述代码还说明了一个要遵守的基本规则：工作时总是先行后列。如果遵守这一简单规则，在制表时就不会遇到什么麻烦。注意到第二个表格是图文混合的，尽管表格看起来有些复杂，但先行后列的同一原则仍然成立。请注意，第一个表格使用的1宽度边界与第二个表使用的3宽度边界有所差别，3宽度边界占用更多的空间，但也更引人注目。

第一个表格中行和列中都使用了。标准文本和表头文本有两个主要差别：第一，标准文本通常是左对齐的，而表头文本则是居中的。可像以程序列表8.4 中那样，用来改变它们的行为。第二，表头文本使用粗体字。

注：用可以对Web 页上任意位置的文本（包括表格和窗体中的文本）进行居中处理。

使用窗体

我们要讨论的最后一段基本的HTML代码是窗体，窗体有多种用途──大部分都是和数据项（Entry）打交道而不是用于数据传播（dissemination)。到目前为止，我们所看到的全部技术中，在使用标准的HTML向Web 站点添加类似于单选按钮和复选框之类的项时，窗体提供了唯一的方法。因为ActiveX 将从根本上大量地代替了使用窗体的需求，尽管了解窗体是使用ActiveX的另一种选择是重要的，但我们在这里并不打算介绍使用窗体的所有难以预测的变化。

每个窗体都以标记开头。除了标记本身，还必须包括进两个属性：METHOD和ACTION。METHOD属性定义了你打算怎样处理窗体收集数据的方式，这有两种标准的方法：POST和GET。POST方法更多地用于数据项（Entry）窗体，它允许你从客户机向主机发送数据。GET方法用于数据查询窗体。例如，当你要到你喜爱的Web搜索页时，实际上你就是要填一份使用GET方法的窗体。ACTION属性则让Web服务器知道到哪里去找一个CGI脚本，用它处理来自窗体的输入。一个典型的标记如下：