4. Web 标准所包括的模块——HTML、CSS 和 JavaScript

详细资料: 发布于 2012年9月18日; 点击数：2536

序言

在上一篇文章，我们已粗略了解了网页的三大构造块：HTML（或XHTML），CSS和JavaScript。现在我们再深入了解和考察这三大构造块，了解和考察它们各自的功能及它们之间如何相互作用而创建出Web站点的。本篇文章的内容如下：

为什么要将HTML、CSS、JavaScript这三者分离?
标记，每个网页的基础
- 什么是XHTML?
- 什么是校验?
使用CSS添加样式
使用JavaScript向网页中添加行为
一个示范网页
- index.html
- styles.css
总结
练习题

为什么要将HTML、CSS、JavaScript这三者分离?

这是人们通常问的关于Web标准的第一个问题。既然可以仅使用HTML就完成网页的内容编写、样式设定（使用HTML的Font元素）和页面布局（使用HTML表格），那为什么还必须使用XHTML/CSS（层叠样式表）呢？在过去，人们在设计网页时常使用一些不好的方法如用HTML表格来进行页面布局等，就是现在都还有很多人仍在使用这些不好的方法（但你们绝对不应该这样做），这也就是我们要推出本课程的原因之一。

在本课程中，我们不会讲述这些过时的方法。以下是一些你需要抛弃那些过时的方法，取而代之以使用CSS和HTML的有力理由：

代码的效率：你放在服务器上的文件越大，下载文件需要的时间就越长，一些上网的人可能支付的费用也就越高（现在一些人仍然是按下载的megabyte（兆字节）数支付网费的）。因此你希望避免出现这种情况：在每一个HTML文件中都包含大量的样式和页面布局信息，从而浪费带宽。你可以选择另一种好得多的方式，即在HTML文件中使用最精简的代码，而把样式和页面布局信息包含进CSS文件中。你们可以在网页设计站点A List Apart Slashdot上的一篇文章（the A List Apart Slashdot rewrite article）中找到使用这一方法的一个实例，在该篇文章中，作者以一个非常受欢迎的Web站点为例，用XHTML/CSS重写了该站点的网页代码。
易于维护：接着上一点讲，如果页面的样式和布局信息保存在单独的CSS文件中，那么你在想改变站点的外观时，仅需要在单独的CSS文件中做出更改即可。难道你会更愿意在站点的每一个网页中一处一处地去更改样式和布局信息吗？我想不会。
可访问性：上网用户中那些视力受损的人，可以使用一种叫“屏幕阅读器”的特殊软件，通过耳朵听而不是眼睛看来访问网页，也就是说，屏幕阅读器将网页的内容读给他们听。此外，如果语义化的网页编写得好，也有助于有运动障碍的人使用语音输入软件无障碍地访问网页。与使用屏幕阅读器的用户用键盘命令来导航标题、链接、表单等类似，使用语音输入软件的用户用语音命令来导航标题、链接、表单等。在这些情况下，以语义化的HTML（结构和表现相分离的HTML）编写的网页文件，就可以让这些用户更容易导航，且网页文件中的信息也更有可能被这些用户找到。换句话说，访问网页“内容”的速度越快则越好。由于屏幕阅读器无法读取闭锁在图像中的文本，也会被一些所使用的JavaScript搞糊涂，因此你务必确保网页的关键内容可以被每一个人访问。
设备兼容性：由于XHTML页面只是纯标记，没有附加样式信息，它就可以针对具有不同特点（如屏幕尺寸等）的设备而被重新格式化，只需要应用一种另外的样式表即可，具体做法有好几种（请访问dev.opera.com上关于移动Web开发的文章（mobile articles on dev.opera.com），了解具体的做法）。同时，CSS本身也可以让你为不同的呈现方式和媒体类型（如在屏幕上阅读网页，打印网页，在移动设备上阅读网页等）规定不同的样式表。
网络爬虫/搜索引擎：你肯定希望用户通过Google等搜索引擎，能更容易地找到你的网页。搜索引擎使用一种专门的软件，即所谓“爬虫”，通读你的网页。如果由于你在编写网页时的失误，如未将标题按标题来定义等，爬虫就难于发现你的网页的内容，或是会错误地解释哪些才是重要的内容，那么你的网页在搜索结果中的排名就会大受影响。
这样做是良好的习惯：这听起来有点像只是我个人的意见，但实际上你请教任何通晓Web标准的专业Web开发员或设计师，他们都会告诉你，将内容、样式和行为这三者分离，是开发Web应用程序的最佳方式。

标记，每个网页的基础

HTML和XHTML是由包含属性（attribute）的元素（element）组成的标记语言（有些是可选的，有些则是强制性的）。这些元素用于标记文档中各种不同类型的内容，并规定每部分的内容在Web浏览器中怎样被渲染（例如标题、段落、表格、符号列表等）。

正如你们预想的那样，元素定义内容类型，而属性定义这些元素的附加信息，例如识别元素的ID，或一个链接指向的位置。你必须牢记一点，标记应该尽可能地语义化，即应该尽可能精确地描述内容的功能。图1就是一个典型的(X)HTML 元素的剖析图。

A typical HTML element

图1：(X)HTML元素的剖析图。阅读图1的说明

HTML和XHTML的差别究竟在哪里呢？

什么是XHTML?

XHTML（可扩展超文本标记语言）中“X”的含义是“可扩展的”。初学者最爱问的一个问题是：“我是该用HTML呢，还是XHTML？两者之间到底有什么差别呢？”其实它们的功能是大体一样的，两者最大的差别是在结构上。见表1列出的HTML和XHTML的主要差别。

HTML	XHTML
元素和属性是大小写不敏感的，`<h1>`等同于`<H1>`。	元素和属性是大小写敏感的，都以小写形式书写。
一些元素不需要结束标签（例如paragraphs, `<p>`），而另一些元素（被称为空元素）禁止用结束标签(例如images, `<img>`)。	所有元素都必须有结束标签（例如 `<p>A paragraph</p>`）。空元素的格式是，在起始标签中包含一个斜杠（例如，`<hr></hr> and <hr />`是等同的）。如果你将XHTML文件用作text/html, 则必须对所有被定义为“空”的元素使用简写语法，并在 />前加上一个空格。对任何未被定义为“空”的元素，即使其中无任何内容，也必须使用完整格式的标记（有单独的起始标签和结束标签)。
一些属性值可不在引号中。	属性值必须要在引号中。
一些属性可简写（如 `<option selected>`）。	所有属性都必须使用完整的属性格式（如 `<option selected="selected">`）。
服务器须以 `text/html` 这种媒体类型将HTML发送到客户端。	XHTML须使用 `application/xhtml+xml` 这种媒体类型，但也可使用 `application/xml`，`text/xml` 或 `text/html`。如果使用 `text/html`，则必须遵循 HTML 兼容性指导原则，因为这样浏览器将把其当作HTML处理（并使用错误恢复来解释语言之间的差别）。

表1：HTML和XHTML的差别。

正如我已经说过的那样，你不用太担心写的是HTML还是XHTML。你只要严格遵照本课程所有文章给出的建议去做，并使用一种HTML文档类型（关于文档类型，参见本课程第14篇文章），你就不会犯什么大错。

什么是校验？

由于HTML和XHTML是制订的标准（就这点而论，CSS也是制订的标准），万维网联盟（W3C）创制了一个被称为“校验器”（validator）的好工具，它可以自动检查你制作的网页，并指出你所写的代码可能有的问题/错误（如遗漏结束标签或遗漏属性的引号等）。HTML校验器可在线获取（网址：http://validator.w3.org/），它将自动侦测你使用的是HTML还是XHTML，以及你使用的是哪一种文档类型。如果你想检查你的CSS，适用的校验器也可在线获取（网址：http://jigsaw.w3.org/css-validator/）。

欲了解关于校验更多的信息，见本课程第24篇文章（尚未发布）。欲了解关于文档类型更多的信息，见第14篇文章。

使用CSS添加样式

层叠样式表（CSS）让你可以很好地控制文档的格式设定和布局。使用CSS，你可以改变或添加颜色、背景、字体大小、样式，甚至可以在网页内不同的位置对元素进行定位。使用CSS来应用样式，主要有三种方式：一、重定义一个元素；二、对一个ID应用一种样式；三、对一个类应用一种样式。下面我将分别讲述一下这三种方式：

重定义一个元素。通过定义向元素添加样式的规则，你可以改变任何(X)HTML 元素的显示方式。如果你希望文档中所有段落都是双倍行距，并且是绿色的，你可以在CSS中添加如下所示的样式表声明：
```
p {
 line-height: 2;
 color: green;
}
```
现在任何包围在标签之间的内容，其行高都将增加一倍，并将变为绿色。
定义一个ID。你可以赋予一个元素以一个id属性，以在一个网页中识别该元素（在一个网页中，每一个ID只能使用一次）。例如，id="navigation_menu"。这样你就可以很好地控制页面的格式设定。例如，如果你希望某一段落是双倍行距，并以绿色文本强调显示，则可以赋予它以一个ID：
```
Paragraph content
```
然后对它应用一种CSS规则，如下所示：
```
#highlight {
 line-height: 2;
 color: green;
}
```
这样做，该CSS规则仅会应用于网页内那个其 id 属性为 highlight 的段落（#是CSS惯例中用于指明ID的符号）。
定义一个类。类与ID类似，它与ID的区别仅在于在每个网页你可以有多个相同的类。接着我们那个双倍行距的例子讲，如果你希望一个网页中的头两个段落为双倍行距且突出显示，你可以向它们添加类，如下所示：
```
Paragraph content
The content of the second paragraph
```
然后对它们应用一种CSS规则，如下所示：
```
.highlight {
 line-height: 2;
 color: green;
}
```
在以上例子中，highlight 是一个类，而不是一个 ID（.是CSS惯例中用于指明“类”的符号）。

以下的那个示范网页，将让你了解更多关于CSS如何样式化HTML的知识。我们将在即将发布的第22篇文章中更详细地讲述CSS。

使用JavaScript向网页中添加行为

最后再来看JavaScript，它是一种用于向网页中添加行为的脚本语言，可以用于检验你输入某一个表单里的数据的有效性（告诉你其格式正确与否），提供拖放功能，改变漂浮广告的样式，使页面元素如菜单等动起来，处理按钮功能等等。最新的JavaScript是这样工作的：找到一个目标HTML元素，然后对该元素进行一些处理。这和应用CSS差不多，不过两者的运行方式、语法等，则有相当大的差别。

JavaScript是比HTML和CSS更为复杂和庞大的主题，在目前这个学习阶段，我们还是尽量不去学习太复杂高深的主题，因此在以下这个示范网页中，我们不讨论JavaScript。实际上你们要在本课程的后期阶段才会学习JavaScript。

一个示范网页

在本篇文章中，有很多细节知识我并未讲述，不过请放心，在这个网页设计教程中，我们以后会一一讲述这些知识的。现在我将给你们看一个真实的示范网页，以让你们大致了解在以后的课程中将要学到一些什么知识，增加学习兴趣。

以下这个网页是一个参考网页，你们可以把它用作在你们撰写的文章（如一篇关于Web开发团队的团体动力学的论文，或是一篇关于美国人使用宽带互联网情况的报告）末尾罗列参考文献的参考。请注意一点，如果你是一个严守学术写作的标准的人，我会告诉你这个示例使用的是APA（美国心理学协会）的文献引用标准。点击这里，下载代码。

index.html

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />

  <title>References</title>
  <style type="text/css">

    @import url("styles.css");
  </style>
</head>

<body>
  <div id="bggraphic"></div>
  <div id="header">
    <h1>References</h1>

  </div>
  <div id="references">
    <cite class="article">Adams, J. R. (2008). The Benefits of Valid Markup: A Post-Modernistic Approach to Developing Web Sites. <em>The Journal of Awesome Web Standards, 15:7,</em> 57-62.</cite>
    <cite class="book">Baker, S. (2006). <em>Validate Your Pages.... Or Else!.</em> Detroit, MI: Are you out of your mind publishers.</cite>

    <cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like so 2000. <em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite>
    <cite class="website">Smith, J. Q. (2005). <em>Web Standards and You.</em> Retrieved May 3, 2007 from Web standards and you.</cite>

  </div>
  <div id="footer">
    <p>The content of this page is copyright © 2007 <a href="mailto:
 该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。
 ">J. Lane</a></p>
  </div>

</body>
</html>

我将不会逐行剖析这个文件，以后课程中的很多示例也会这样处理的。不过要点我还是会给你们指出来的，以下就是一些要点：

第1行，是所谓文档类型声明，或简称为doctype。在本示例中，这个网页的文档类型是XHTML 1.0 Transitional。文档类型规定你所写的标记必须遵循的一套规则，并可进行校验。关于文档类型的更多信息，见第14篇文章。

第5－7行，将一个CSS文件导入这个网页，也就是说，该CSS文件中包含的CSS将应用于该网页中的各个元素。在下一节，你们可以看到对该网页进行格式设定的CSS文件的内容。

我已为每一种类型的参考文献指定了不同的“类”，这样我就可以对每一种类型的参考文献应用一种样式，例如，在每一个参考文献的右边我都添加上了不同的颜色，以便于浏览该参考文献列表。

现在来看看样式化HTML的CSS。

styles.css

body {
  background: #fff url('images/gradbg.jpg') top left repeat-x;
  color: #000;
  margin: 0;
  padding:0;
  border: 0;
  font-family: Verdana, Arial, sans-serif; font-size: 1em;
}

div {
  width: 800px;
  margin: 0 auto;
}

#bggraphic {
  background: url('images/pen.png') top left no-repeat;
  height: 278px;
  width: 362px;
  position: absolute;
  left: 50%;
  z-index: 100;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.5em;
  margin-bottom: 30px;
  background: url('images/headbg.png') top left repeat;
  padding: 10px 0;
}

#references cite {
  margin: 1em 0 0 3em;
  text-indent: -3em;
  display: block;
  font-style: normal;
  padding-right: 3px;
}

.website {
  border-right: 5px solid blue;
}

.book {
  border-right: 5px solid red;
}

.article {
  border-right: 5px solid green;
}

#footer {
  font-size: 0.5em;
  border-top: 1px solid #000;
  margin-top: 20px;
}

#footer a {
  color: #000;
  text-decoration: none;
}

#footer a:hover{
  text-decoration: underline;
}

在设置这个网页的样式时，我略微有点渲染过度，比如添加了一些嵌套背景效果，以向你们展示使用CSS可以达到的一些效果。

第1行为文档设定一些默认样式，如文本和背景颜色、文本周围加入的边框的宽度等。有些人不愿花时间去设定这些默认样式。确实即使你不设定默认样式，现在多数浏览器都将应用它们自己的默认样式，但自己设定一些默认样式是一个好的习惯，因为这样做可以让你更好地控制你的Web站点在不同的浏览器中如何被显示。

在下一行中，我把网页设定为800px（像素）宽（尽管我也可以在此规定一个页面根据浏览器窗口的大小而扩大/缩小的百分比）。我在此处使用这种边距（margin）设置，是为了确保页面内容在窗口的中心显示。

下面让我们转向看这个网页的背景图像（通过使用background: url 这一背景声明而实现的）。我在这个网页上添加了3个背景元素：第1个是横跨页面顶部的斜面，呈现出好看的青色；第2，我使用了一个半透明的钢笔PNG图像，以和它之上的文本形成足够的对比，并将斜面衬托得更好看一些（半透明的PNG图像在Internet Explorer 6或更低的版本中无法正常显示，但在每一种最新式的浏览器中都能很好地显示，关于如何解决IE6无法正常显示半透明PNG图像这一问题，见 Dean Edward's IE-fixing JavaScript （Dean Edward的文章，《用于修补IE的JavaScript》），该文章还讨论了如何处理IE6在CSS支持方面存在的问题。第3，使用了另一个半透明的PNG图像作为页面标题的背景，它增强了标题部分的对比度，并产生一种嵌套的效果。

示范网页的显示效果如图2所示。

The finished example

图2：应用样式后示范网页的显示效果

总结

XHTML, CSS和JavaScript并不神秘，它们都是Web演进的自然产物。如果你已具有一些HTML方面的知识，完全不用丢弃。你所具有的所有HTML知识，依然很有用，你所需要做的只是以与过去不同的方式来处理一些事情，并在写标记时更仔细一些而已。

使用Web标准进行Web开发，除可以让你把Web开发工作做得更好以外，本身也是很有意义的。一些人不愿意使用Web标准进行Web开发，其理由是：这样做很耗时，而且必须费很大力气进行能跨浏览器显示的页面布局。对此我们可以提出这样的反驳：使用非基于Web标准的方法进行页面布局，就能让网页能跨设备并在未来更高版本的浏览器中正常显示吗？你怎么就能肯定你所写的非基于Web标准的标记，可以在Opera 12.0, Firefox 5.0和 IE 10.0上都能显示？除非你遵循一些规则，否则是不可能做到的。

练习题

类和ID的差别是什么?
XHTML, CSS 和JavaScript，在Web站点中所起的作用分别是什么？
以示范网页的index.html文件为素材，单独使用CSS改变页面的格式设定(我建议使用文本编辑器如Notepa或Text Wrangler编辑文件的代码)。不要对HTML进行任何更改。
- 为不同类型的参考文献添加图标（即为文章、书籍和互联网资源添加不同的图标）。先创作图标，然后单独使用CSS，使图标显示在不同类型的参考文献旁边。
- 隐藏页面底部的版权信息。
- 改变标题的外观，使之更醒目。
为使示范网页能在手机浏览器上正常显示，你能做些什么工作？