13. HTML 的head元素

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

序言

在本篇文章中，我要专门讲述 HTML 文档中一个未引起人们应有重视的部分，即 head 元素中的标记。在学习完本篇文章后，你们将更多地了解本章节中的各个不同部分，以及它们各自的功能，包括文档类型、title 元素、关键词及描述（使用 meta 元素处理）。你们还将了解到 JavaScript 和 CSS 样式，以及不要在 head 中写入什么。你们可以点击下载一些示范文件，我在本篇文章中将不时提到这些示范文件。在完成本篇文章的学习后，你可以随意修改这些示范文件。请一定从头到尾地学完这篇文章，它能让你学会处理 HTML head 的最佳习惯。本文章各个部分分别讲述一个主题，然后在文章最后给出了总结性的结论，以让你重新思考前面各个部分给出的建议。

本篇文章的内容目录如下：

头部信息包含些什么信息？
设置文档的首选语言
通过文档的标题来判断文档
添加关键词和描述
添加样式
使用 JavaScript 添加动态功能和特性
注意！使用内联 CSS 和 JavaScript 并非很好的做法！
总结
练习题

头部信息包含些什么信息？

在前面的课程中，你们已经了解到一个有效的 HTML 文档需要有一个文档类型（doctype），文档类型说明文档使用的是什么类型的 HTML，并指示浏览器相应地显示 HTML 文档。Roger 将在第14篇文章中详细地讲述文档类型，简而言之，文档类型规定 HTML 文档需要有一个其中包含有 head 和 body 元素的 html 元素。body 部分包含文档的全部内容，因此将是你编写文档时在上面所花时间最多的部分。相比之下，head 部分的作用似乎就不那么重要，因为除了 title 元素，其它写入 head 部分的信息，是网站访问者在浏览器中不能直接看到的。head 部分是向浏览器发出的绝大多数指示开始的地方，也是你储存有关文档的附加信息（所谓 meta 元信息）的地方。

设置文档的首选语言

HTML文档的这条信息会在 head 元素的父元素 html 元素上继续。我们这里是在 head 元素中定义文档的首选自然语言。这里的“自然语言”指人类语言，例如法语、泰语或英语等。设置文档的首选语言，可以帮助屏幕阅读器阅读网页，这是因为比如说“six”（六）在英语和法语中的读音差别就非常大；这还可以帮助搜索引擎。因此定义文档的首选语言是一个好的做法，在你编写面向国际受众的网页时就更是如此了，尽管现在在源代码中定义了文档首选语言的网页还不是很多。以下是在 HTML 文档中定义文档首选语言的示例：

<html lang="en-GB">
  ...
</html>

请注意，你还可以在其它元素中使用 lang 属性，为文档的小分区设置语言，例如 <span lang="fr">Bonjour</span>。

你使用哪些属性来设置语言，取决于你的文档的 DOCTYPE。万维网联盟（W3C）发布的文件中写道：

对 HTML 文档，仅使用 lang 属性。对用作 text/html 的 XHTML 1.0 文档，使用 lang 和 xml:lang 属性。对用作 XML 的 XHTML 文档，仅使用 xml:lang 属性。

语言代码可以是两个字母的代码，如 English（英语）的代码是 en，也可以是四个字母的代码，如 American English（美国英语）的代码是 en-US，还可以是一些不常用的代码。两个字母的语言代码由 ISO 639-1 定义，不过根据目前的最佳习惯，你应当使用 IANA subtag registry 来定义你的语言代码。

通过文档的标题来判断文档

title 元素是 head 中最重要的元素之一。包含在 title 元素中的文本，在所有“用户代理/浏览器”的标题栏上都要显示（浏览器标题栏位于浏览器的最上方）。显示在标题栏上的标题，将是用户在访问网站时看到的第一条内容，因此它是非常重要的。此外，对“辅助技术”如屏幕阅读器（一种为视力受损的用户朗读网页的软件）等而言，标题栏上的标题是显示文档主要内容的提示，对很多搜索引擎来说，也同样是如此。因此，你可能会发现，当你为你的 Web 文档选用了一个包含关键词且人类易读的好标题时，它的访问量会激增。请用浏览器打开以下这个 HTML 文档（你下载的 zip 文件中的 headexample.html）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>I am a title example</title>
</head>
<body>
</body>
</html>

你会看到包含在 title 元素中的文本，被显示在位于浏览器导航栏上方的标题栏上，如图1所示。

The title is displayed in the title bar of the web browser

图1：浏览器标题栏上显示的一个标题

网上有很多关于如何写出好的文档标题的教程，它们中的多数都与搜索引擎优化（SEO）有关。不过有一点要注意，不要为了想试图让搜索引擎在很多搜索结果上都显示你的 Web 文档，就在标题栏上罗列过多的词句。适当的做法是写一个能准确反映文档主要内容的精练的标题栏标题，例如“Breeding Dogs—Tips about Alsatians”（意为，狗的饲养——饲养阿尔萨斯狼狗的提示）这样一个标题栏标题，就远比“Dogs, Alsatian, Breeding, Dog, Tips, Free, Pet.”（意为，狗、阿尔萨斯狼狗、饲养、狗、提示、免费、宠物）这个标题栏标题更能为用户所接受和易读。

添加关键词和描述

下一步你要做的是添加关键词和描述，第一眼看来这似乎是多余的，因为访问者在浏览器中是不能直接看到这些信息的。关键词和描述都添加在 head 内的 meta 元素之中，如以下这个选自 Yahoo! 欧洲网站的 HTML 文档（headwithmeta.html）所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport</title>
<meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more.">
<meta name="keywords" content="eurosport,sports,sport,sports news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>
<body>
</body>
</html>

如果你用一个浏览器打开这个文档，在文档的 body 中是看不到任何东西的。但是，如果你把这个文档放在网上，搜索引擎又将之编入索引，则你在 meta 元素之中所写入的描述（description）将显示为搜索结果中链接的下方所显示的文本，如图2所示。

descriptions showing in a search engine results page

图2：搜索引擎的搜索结果页面中显示的描述

这些信息可能就是网站的潜在访问者正在找寻的，所以才会去点击搜索结果页面显示的链接。“描述”还有另外一个作用，即有些浏览器会在用户将 Web 文档加入“收藏夹”时显示作为附加信息的“描述”，如图3所示：

Some browsers use the description as a bookmark description

图3：有些浏览器会在用户将 Web 文档加入“收藏夹”时显示描述

因此，尽管在文档中加入元描述没有立竿见影的好处，但在让你的 Web 文档能为更多人访问方面，它们还是发挥着重要作用。同样地，加入关键词也可帮助你的 Web 文档能为更多的人访问。

尽管由于多年来垃圾邮件发送人的滥用，使得搜索引擎不再对关键词很看重，但在以下情况下，即如果你想不必浏览和分析内容就为很多文档快速编制索引的话，它们依然是一种很好的工具。例如，你可以在一个内容管理系统中使用 meta 关键词，通过撰写一个脚本为这些关键词编制索引，这样可以让你的搜索引擎运行的速度快很多。这就提供了一种可不必分析文档的内容就找到文档的不错的方式。通过在一个 meta 元素中加入一些关键词，这样如果你想在未来创建一个类似的文档索引的话，就可以让站内搜索变得更为智能化、更快速。你可以把关键词视为你在一本砖头厚的大书中留下的小书签，这样你就能更容易地立即找到某个特定章节，而不必一章一章地去费力找了。

添加样式

下一个你可以向 HTML 文档的 head 添加的是在层叠样式表（CSS）中定义的样式规则。你可以通过使用一个 style 元素，把那些样式规则直接嵌入 head，例如（headinlinestyles.html）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs—Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css">
    body{
      background:#000;
      color:#ccc;
      font-family: helvetica, arial, sans-serif;
    }
</style>
</head>
<body>
<p>Test!</p>
</body>
</html>

如果你用一个浏览器把以上这个 HTML 文档打开，看到的将是，在黑色的背景上显示的“Test!”这个词，它的颜色是灰色的，字体是 Helvetica 字体或 Arial 字体（具体显示是哪一种字体，要依你安装的操作系统而定）。style 元素还可以包含另外一种被称为 media（媒介）的属性，它定义哪种媒介将使用这些样式，即你在计算机屏幕或手持设备上阅读文档时，或在将文档打印出来时，希望使用这些样式吗？有多种媒介类型可供选择，以下是其中一些最有用的媒介：

屏幕—在显示器上显示文档
打印—定义文档的打印输出稿的外观
手持设备—定义文档在移动设备及其它手持设备上显示时外观和样式
投影机—适用于以 HTML 格式保存的演示文稿，例如 Opera Show 软件就支持这种以 HTML 格式保存的演示文稿

举例来说，如果你为了让网页更适宜打印而想除去它在屏幕上显示出来的色彩，并为网页上的文本使用更大的字号，则可以在第一个样式块下方添加另一个样式块，赋予它一个属性值为 print 的 media 属性，如以下所示（在 headinlinestylesmedia.html 中检查全部代码）：

<style type="text/css" media="print">
  body{
    background:#fff;
    color:#000;
    font-family: helvetica, arial, sans-serif;
    font-size:300%;
  }
</style>

现在当你准备打印这个网页时，浏览器就知道使用打印样式表而不是屏幕样式表来打印网页。请在浏览器中打开 headinlinestylesmedia.html ，然后选择打印预览，你看到的将是图4中显示出来的样子：

The same page with print and screen style sheets applied

图4：一个屏幕和一个打印样式表

使用 JavaScript 添加动态功能和特性

你还可以向文档的 head 添加可由浏览器执行的用 JavaScript 编写的脚本，即所谓“客户端脚本”。正如你们第4篇文章中已了解到的，JavaScript 向静态的 HTML 文档添加动态行为，如动画效果、表单数据校验，以及用户执行某些行动时触发的其它一些动态效果等。

你使用 script 标签向文档中添加 JavaScript。当浏览器遇到文档中的一个 JavaScript 时，它会试着去执行其中的代码，并暂停解析文档的剩余部分。这意味着如果你想保证你添加的 JavaScript 在主文档载入前就可用，就需要将 JavaScript 添加进 head 之中。例如，你可以使用以下的脚本（headscript.html），提醒访问者如果点击某一个特别的链接，将被带到另一个服务器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs—Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css" media="screen">
    body{
      background:#000;
      color:#ccc;
      font-family: helvetica, arial, sans-serif;
    }
    a {color:#fff}
</style>
<style type="text/css" media="print">
    body{
      background:#fff;
      color:#000;
      font-family: helvetica, arial, sans-serif;
      font-size:300%;
    }
</style>
<script>

    function leave(){
      return confirm("This will take you to another site,\n are you sure you want to go?")
    }
</script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

如果你用浏览器打开这个示范网页并点击所显示的链接，则会弹出一个对话框，请你确认是否要去另一个网站。这只是随便选用的一个脚本撰写例子，这种脚本撰写方式远不是目前的最佳习惯。在本课程的后面部分，将深入讲述使用 JavaScript 的最佳习惯和传授 JavaScript 技术，因此现在你不必担心还不太懂 JavaScript。

注意！使用内联 CSS 和 JavaScript 并非很好的做法！

我知道以上这些词很强烈，其实我只是想让你们记住非常重要的一点，那就是在你构建网站时，最好的办法是尽可能地重用代码。将全网站通用的样式和脚本添加进每一个页面不仅没有多大意义，相反还使维护整个网站的工作变得更为困难，并使各个文档的体积不必要地膨胀。

一个比这好得多的做法则是将你的样式和脚本都放在单独的外部文件内，在需要时再导入你的 HTML 文件，这样如果需要对样式和脚本做出改动，你仅需要在一个地方修改样式和脚本即可。为此，对 JavaScript，可使用 script 元素，但其中却并不包含脚本，而是使用 src 属性与一个外部文件链接，如以下代码所示（externaljs.html）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs—Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css" media="screen">
    body{
      background:#000;
      color:#ccc;
      font-family: helvetica, arial, sans-serif;
    }
    a {color:#fff}
</style>
<style type="text/css" media="print">
    body{
      background:#fff;
      color:#000;
      font-family: helvetica, arial, sans-serif;
      font-size:300%;
    }
</style>
<script src="/leaving.js"></script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

处理 CSS 就要难一些了。style 元素并没有 src 属性，因此你需要使用 link 元素，该元素有一个 href 属性（用于指定要导入的一个外部 CSS 文件），以及一个 media 属性（用于定义这些样式是否应该用于屏幕、打印文档等）。通过将 CSS 和 JavaScript 放在单独的外部文件中，你可以大大缩短文档 head 部分的长度，如以下所示（externalall.html）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs—Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<link rel="stylesheet" type="text/css" media="screen" href="/styles.css">
<link rel="stylesheet" type="text/css" media="print" href="/printstyles.css">
<script src="/leaving.js"></script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

将 CSS 和 JavaScript 放在单独的文件中，还具有以下优点：

可以使访问者在访问你的网站时更快且更容易，这是因为虽然还需要下载一些额外的文件，但在每个页面上就不需要再重复下载样式和脚本信息了（它们都放在单独的脚本/样式文件中，因此只需要下载一次），这样每个页面的下载时间就都会缩短。此外，单独的 CSS 文件和 JavaScript 文件将存入缓存，这样在你下一次访问这个网站时，因为它们都已在缓存中，就不需要再下载一次了。
使网站易于维护。由于整个网站（上面可能有数以千计的文档）的样式和脚本都放在单独的文件中，这样在你需要对样式或脚本做出某些改动时，只需在单独的样式文件或脚本文件中改动即可，不再需要在上千个文件中一处一处地改动。

总结

在本篇文章中，你们已了解到 HTML 文档的头部分中可包含的各个不同的元素，它们分别是：

title 元素，用于介绍文档。
meta 元素,包含文档内容的描述以及可让对内容编制索引的工作变得更容易的关键词。
link 元素，指向外部的 CSS 文件。
script 元素，指向外部的 JavaScript文件。

确保在你的 HTML 文档中以上所有元素都正确和有效，可以使你的文档能被访问者快速和容易地找到和解读。

练习题

为什么“描述”并不直接在屏幕上显示，还是需要在 meta 元素中加入“描述”？
将 JavaScript 添加进 HTML 文档的 head 部分，而不是 body 部分，这样做有什么优点？
你如何能从浏览器缓存受益，以及你需要做些什么来利用浏览器缓存？
既然搜索引擎对 Web 文档的标题栏标题很重视，是不是罗列一长串相关的关键词来作为标题栏标题就很有用呢？这样做有什么负面效果？
由于标题栏标题的显示可能有点沉闷，使用 b 元素让其中一些词加粗显示，这是否是一个好的主意？是否可能做到？