47、万维网之二（应用层）

静态Web页面

• Web的基础是将Web 页面从服务器传输到客户端。在最简单的形式中，Web 页面是静态的。也就是说，它们就是存放于服务器上的文件，每次被客户端获取和显示表现的都是一样的方式。然而，仅仅因为它们是静态的，并不意味着页面在浏览器端是呆滞的。包含一段视频的页面也可以是一个静态Web 页面。
• 正如前面提到的，在这个Web 中，大多数页面以HTML 语言来编写。教师的网页通常是静态的HτML 页面，而公司的网页则通常是由一个网页设计公司制作的动态页面。本节中，我们将简要介绍静态HTML 页面。

HTML——超文本标记语言

• Web 引入了一种称为超文本标记语言（HTML, HyperText Markup Language ）的语言。HTML允许用户生成一个包含了文本、图形和指向其他Web 页面指针的Web 页面。HTML是一种标记语言，或一种描述了如何格式化文档的语言。“标记”这个术语来自过去，那时编辑在要印刷的文档上实际标记出有关信息，告诉印刷工（那时还是人工印刷）应该使用什么字体等。因此，标记语言包含了格式化的显式命令。例如，在HTML中，＜b＞意味着粗体字型的开始， </b＞表示粗体字型的结束。LaTeX 和TeX 是标记语言的其他实例，这些语言为大多数学术作者所知所用。
• 相对于其他无显式标记的语言来说，标记语言的关键优点是将内容与其应该如何表示相分离。如此一来，编写浏览器就非常简单：浏览器只需理解标记命令并将这些命令应用于内容即可。在每个HTML 文件中嵌入所有的标记命令，并且标准化这些标记命令，使得任何一个Web 浏览器都可以读取任何Web 页面，并对页面重新格式化。这点非常关键，因为一个页面有可能是在一台具有1600*200 大小24 位颜色窗口的高端计算机上被设计出来的，但它必须能在一个移动电话只有640x320 大小8 位颜色的窗口中显示。尽管可以用任何一个纯文本编辑器来编写这样的文档，而且确实有许多人也是这样做的，但是，也可以使用文字处理器或者专用的HTML 编辑器来完成大部分工作（但是，相应地给予用户对最终结果的所有细节的控制能力也有所减弱）。下图给出了一个以HTML 编写的简单Web 页面及其在浏览器上的显示。一个Web页面由一个头部和一个主体组成，它们都被包括在＜html>和＜/html＞标签（ tag ）之间，这些标签就是格式化命令：虽然缺少这两个标签大多数浏览器也不会出错。头部由＜head＞和＜/head＞标签括起来，而主体部分则由＜body＞和＜/body＞标签括起来。标签中的字符串称为指示符（ directive ）。大多数HTML标签（并不是全部）都采用这种格式。即用＜something＞标注something 的开始，而用＜/something＞标注something 的结束。
• 标签既可以是小写也可以是大写。因此＜head＞和＜HEAD＞含义相同，但为了兼容，最好采用小写。HTML 文档的实际布局结构无关紧要。HTML解析器将忽略额外的空格和回车，因为它们必须重新对文本进行格式化，以便使得这些文本适合当前的显示区域。因此，可以任意添加空格使得HTML 文档更具可读性，而大部分空格并不是所需要的。另外一个后果是空行无法真正划分出单独一段，因为它们在显示时被忽略掉了。因此需要一个显式的标签来分段。
• 有些标签带有（命名的）参数，这些参数称为属性（ attribute ）。例如，在图中，标签＜img＞被用来在文字里内嵌一个图片。它有两个属性，分别是src 和alt。第一个属性给出了图片的URL。HTML 标准没有指定只能允许什么样的图像格式。实际上，所有的浏览器都支持GIF 和JPEG 文件。浏览器自由支持其他格式的图片，但这种扩展是一把双刃剑。第二个属性给出了在图像无法显示时的替代文字。对于每个标签， HTML标准给出了一个允许的参数列表，包括参数及其含义。由于每个参数都有名字，因而给定参数的出现顺序就不重要了。
• 从技术上讲，HTML文档是用ISO 8859-1 Latin-1 字符集编写的，但是如果用户的键盘只支持ASCII 字符，则需要用转义序列来代表特殊的字符，比如è。标准给出了特殊字符的列表。它们都以“＆”符号作为开头，以“；”作为结束。例如，＆nbsp；.表示空格、＆egrave;表示è。 由于<、>和＆有特殊的含义，所以它们只能用转义序列来表示，分别是＆It；、＆gt；和＆amp；。
• 头部中的主要内容是标题（ title ） ， 它由＜title>和＜/title>来定界。某种特定的元信息也可以出现在这里，虽然在我们的例子中没有给出来。标题本身不显示在页面上。有些浏览器用它来标记页面的窗口。
• 图中使用了几种头。每个头由< hn >标签生成，其中n 是一个1 到6 之间的数字。因此，< h1 >最重要的标题：＜h6＞是最不重要的标题。如何在屏幕上突出这些标题是浏览器的责任。通常较小数字的标题会采用较大和较重的字体来显示。浏览器也可能为每种级别的标题选择使用不同的颜色。一般来说，＜h1＞标题的字体较大较粗，并且在标题的上方和下方至少有一个空行。相对地，＜h2＞标题较小，且上方和下方只有较少的空白。
• 标签＜b＞和＜i＞分别用来表示进入粗体和斜体模式。< hr >标签强制中断，井画一条横跨屏幕的水平线。<p＞标签开始一段。例如，浏览器可能会显示插入一个空行和一些缩进量。有趣的是，为了标志一个段落结束的＜/p>常常被懒惰的HTML 程序员忽略。
• HTML提供了许多机制来构造列表，包括嵌套列表。未排序的列表，例如图所示，以＜ul＞开始：表项都以＜li＞标记。还可以用＜ol＞标签开始一个有序的列表。未排序列表中的个别表项通常使用标签（●）开始：而有序列表中的个别表项由浏览器对其进行编号。
• 图中给出的一些超链实例使用了锚< a> 和＜/a> 标签。< a>有不同的参数，最重要的是href，即链接的URL。 < a> 和＜/a>之间的文本是显示用的。如果这段文本被选中，则浏览器跟随超链转到一个新的页面。还可以链接其他元素。例如，在< a> 和＜/a>之间也可以放一个用＜img>标签的图像。在这种情况下，显示的是图像，单击图像可以激活该超链接。
• 其他的HTML 标记和属性。例如，＜a>标签可以带一个参数name，该参数设置一个超链接，允许一个超链接指向一个页面的中间。这个参数非常有用，例如，对于那些由可点击表内容启动的Web 页面。用户通过点击表的内容中的一个表项，就可以跳转到同一页面的相应部分。另一个不同的标记＜br＞，它迫使浏览器回车并开始新的一行。也许了解标签的最好办法是看它们如何发挥作用。要做到这一点，你可以选择一个Web 页面，然后看你浏览器中的HTML 页面是如何放在一起的。大多数浏览器有一个查看源文件( VIEW SOURCE ）的菜单项（或类似的东西）。选择该项目显示当前页面的HTML源代码，而不是它的格式化输出。
• 我们己经勾画出从早期Web 起就存在的标签的大致轮廓。自此以后， HTML 保持着不断的演进。下表显示了一些HTML 后续版本添加的功能。HTML1.0 指Web 引入时使用的HTML 版本。随着Web 空间的爆炸，在几年时间内HTML 版本快速连续推出了2.0 、3.0和4.0 。在HTML4.0 之后，几乎用了将近十年，才走到下一个主要版本HTML5.0 的标准化。因为它是一个重大的升级，巩固了浏览器处理丰富内容的方式，因此HTML 5.0 的努力还在进行着，预计最早在2012 年以前不会产生新的标准。不管标准如何，主流浏览器在功能上早己支持HTML5.0 。
• 整个HTML 版本的进展都是关于加入新的功能。这些功能是人们所希望有的，但在成为标准化之前不得不以非标准的方式来处理（比如，插件）。例如， HTML 1.0 和HTML在L2.0没有表格功能，表格功能在HTML3.0 才被添加进来。一个HTML 表中包含一个或多个行，每行包含一个或多个表单元（ table cell ），这些单元可以包含更广泛的素材（比如，文本、图像和其他表）。在HTML3.0 之前，需要一张表的作者不得不诉诸特殊方法来达到表格效果，诸如包括一幅显示表信息的图像。
• 在HTML 4.0 中，增加了更多的新功能。这些功能包括残障用户的访问功能、对象嵌入( 由＜img＞标签生成，因此其他对象也可以被嵌入到页面中〉、支持脚本语言（允许显示动态的内容）以及更多的辅助功能。HTML5.0 包含了许多功能来处理富媒体，即现在经常在网络上使用的丰富媒体。页面可以包括视频和音频，并且浏览器可以正常播放而无须用户安装插件。画画作为矢量图形可内置在浏览器中，而不必使用位图图像格式（如JPEG 和GIF ）。还有更多支持在浏览器中运行脚本，诸如计算和存储访问的后台线程。所有这些功能有助于支持Web 页面比文档看起来更像一个具有用户接口的传统应用。这是Web 发展的方向。

输入和表单

• 目前我们尚未讨论的一个重要功能是输入。HTML 1.0 基本上是单向的。用户可以从信息提供者获取网页，但很难在另一个方向将信息发送回去。很快，双向通信的需求变得很明显，比如允许通过网页提交产品订货单、在线填写注册卡、输入搜索的词汇等。将用户的输入发送到服务器（通过浏览器) 需要两种支持。首先，它要求HTTP 可以在这个方向携带数据。我们在本节后面描述这是怎么做的：它使用了POST 方法。第二个要求是能够提出用户界面元素，用来收集和封装输入的数据。HTML2.0 具备这种功能，并包括了表单。
• 表单上包含框或者按钮，允许用户填写信息或做出选择，然后将信息发送回页面的所有者。表单的编写就像HTML 的其他部分，表单仍然是静态内容。无论谁使用它们，它们都表现出相同的行为。我们将在后面涉及的动态内容提供了更复杂的方法来收集用户输入，具体方法是发送一个其行为可能依赖于浏览器环境的程序。
• 像所有的表单一样，这个表单也是被包含在＜form＞和＜／form＞标签之间。这个标签的属性说明了针对数据输入应该做什么，在这种情况下，使用POST 方法将数据发送到指定的URL 。没有被包括在标签之内的文本只是用来显示的。一个表单中允许出现所有常见的标签（例如，<b＞），以便让页面的作者控制表格在屏幕上的外观。
• 这张表使用了三种输入框，每个输入框使用了＜input>标签。它有各种参数来确定显示框的大小、性质和用法。最常见的形式是空白字段，用来接受用户输入的文本：框被检查之后，通过按下submit 〈提交）按钮把用户输入的数据返回给服务器。
• 第一种输入框是text （文本）框，出现在文本“Name ”之后。这个框有46 个字符宽并期待用户输入一个字符串，然后这个字符串被存储在customer 变量中。表单的下一行要求输入用户的街道地址，它宽40 个字符。接着下面一行是城市、州和国家。在这些字段之间没有使用<p＞标签，因此，如果放得下，浏览器会在一行上（而不是作为分开的一段段〉显示这些字段。接下来一行要求输入信用卡号和失效日期。只有当采取了足够的安全措施以后，方才可以在Internet 上传输信用卡号。在失效日期之后我们遇到了一个新的特性：单选按钮（ radio button ）。当用户必须在两个或者更多个选项中选择其中之一时，需要用到单选按钮。点击其中一个按钮的同时关掉了同组中的其他按钮。按钮的视觉表现由浏览器决定。构件大小（ Widget Size ）也使用了两个单选按钮。这两组按钮由它们的name 字段来区分，而不是通过使用像＜radiobutton>…</radio button＞这样的标签来划定静态范围。
  Value （值〉参数用来指示按下了哪个单选按钮。例如，根据用户选择的是哪个信用卡按钮，变量cc 将被设置为字符串“ mastercard”或者“visacard ”。在两组单选按钮之后我们来到发货选项，它用复选框( checkbox ）表示。复选框既可以被选中，也可以未被选中。单选按钮必须选中一个，而与此不同的是每个复选框都可以被选中也可以未被选中，相互之间完全独立。
• submit （提交〉按钮。value 字符串就是按钮的标签，并且显示在按钮上。当用户点击submit 按钮时，浏览器将收集到的信息打包成一个很长的行，并将其发送回服务器：该服务器由作为＜form＞标签一部分的URL 提供。发送时要用到一个简单的编码。“＆”用来分隔字段，“＋”用来表示空格。对于我们示例的表单，发送的行可能看起来像下图所示：
• 该字符串作为一行被发送回服务器（这里因为页面不够宽，它被分成了三行）。只有服务器能理解这个串的意义，它最有可能做的是将信息传递到一个处理这个字符串的程序。还可以有其他类型的输入：两种其他类型的输入是password （密码）和textarea （文本区域）。password 框与text 框（这是不需要命名的默认类型）相同，只有一点除外，那就是在输入字符时并不显示出来。textarea 框也与文本框相同，但是它可以包含多个行。
• 对于那些必须从中作出选择的长列表，可以用提供的＜select>和＜／select>标签将一系列替代品清单包括起来。这个列表经常呈现为一个下拉菜单。下拉菜单的语义就是那些单选按钮的语义，除非给出多个参数，在这种情况下语义变成复选框的语义。最后，还有一些方法可用来表示默认或初始值，这些值用户是可以改变的。例如，如果一个text 框给出了一个value字段，那么表单中的内容会显示出来，以使用户编辑或删除。

css——层叠样式表

• HTML的最初目标是指定文档的结构，而不是文档的外观。例如：
  < hl> Deborah’s Photos </ hl>
  指示浏览器要强调标题，但没有说明有关字型、点的大小或颜色等任何信息。标题的外观如何表现留给浏览器考虑，因为浏览器应该知道显示器的属性（例如，它有多少像素）。然而，许多网页设计师希望能绝对控制自己设计的网页如何呈现，因此新的标签被添加到HTML以便控制页面的外观，例如：
  <font face＝"helvetica" size＝"24" color=“red”>Deborah’s Photos
  此外，还添加了在屏幕上准确定位的控制方法。这种方法的麻烦在于它既乏味，又产生不可移植的臃肿HTML 。虽然一个页面可能在创建它的浏览器上表现非常完美，但它可能在另一个浏览器、其他同一浏览器的不同版本下或在不同屏幕分辨率的显示器上表现得一塌糊涂。
• 一种更好的替代方案是使用样式表（ style sheet ）。文本编辑器中的样式表允许作者将文本与逻辑风格关联，而不是与物理风格相关，例如，“初始段”而不是“斜体文本”。每种风格的外观单独定义。通过这种方式，如果作者决定改变以蓝色14 点斜体表示的初始段用粉红色粗体18 点表示，那么所需要做的只是改变转换整个文档的一个定义。层叠样式表（ CSS, Cascading Style Sheets ）将样式表引入到HTML4.0 的Web ，虽然在2000 年以前它没有被广泛使用，也没有得到浏览器的广泛支持。css 定义了一种简单的语言，用来描述控制标签内容外观的规则。让我们来看一个例子。假设， AWI 希望时髦的网页用乳白色的背景，以Arial 字体显示海军文本，而且每个级别的标题将文本分别额外放大100% 和50% 。图中的css 定义给出了这些规则。
• 可以看出样式的定义很紧凑。每一行选择一个它适用的元素并且给出属性的值。一个元素的属性作为默认值适用于所有它包含的其他HTML 元素。因此， body 的式样设置了主体中文本段落的式样。也有方便速记的颜色名称（例如， red ）。任何没有定义的样式都以浏览器的默认值填充。这种行为使得样式表的定义成为可选，没有定义也可以产生某种合理的表现。
• 样式表可以被放置在HTML文件中（例如，使用＜style>标签），但更常见的做法是将它们放置在一个单独的文件中，然后引用它们。例如， AWI 页面的＜head＞标签可以修改成引用文件awistyle.css 中的样式表，如图所示。这个例子还显示了css 文件的MIME类型是text/css 。
• 这种策略有两大优势。首先，它可以使得一组样式被应用到一个网站上的许多网页。这种组织方式带来了页面外观上的一致性，即使这些页面在不同的时间由不同的作者开发：而且允许通过编辑一个css 文件而不是HTML 来改变整个网站的外观。这个方法可以与C程序中的＃ include 文件相类比：在这里改变一个宏的定义就等效于改变了所有包括该头文件的程序。第二个好处是下载的HTML 文件保持得很小。这是因为浏览器可以下载css文件的一个副本，供所有引用它的页面使用。浏览器并不需要为每个网页的定义下载一份新副本。