3.1　开始编写网页

3.1　开始编写网页

每个HTML文档都应该包含以下基本成分（如图3.1.1所示）：

DOCTYPE；
html元素（包含lang属性。该属性不是必需的，但推荐加上）；
head元素；
说明字符编码的meta元素；
title元素；
body元素。

这份HTML等同于一张空白的纸，因为body里面没有任何内容，如图3.1.2所示。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8" />
     <title></title>
</head>
<body>
</body>
</html>

图3.1.1　这是每个HTML页面的基础。缩进并不重要，但结构很重要。在这个例子中，默认语言（由lang属性设定）被设为代表英语的en。字符编码被设为UTF-8

3.1　开始编写网页 - 图1

图3.1.2　最少HTML基础代码在Firefox中显示的样子。如你所见，什么内容也没有！不过，很快就可以开始添加内容了

在添加任何内容或其他信息之前，需要先建立起页面的基础。

编写HTML5页面开头的步骤

输入，声明页面为HTML5文档。（关于HTML早期版本的相关信息，参见本节末尾的“改进后的HTML5 DOCTYPE”。）
输入，开始文档的实际HTML部分。其中，language-code是页面内容默认语言的代码。例如，表示英语，表示法语。可用语言代码的完整列表参见www.bruceontheloose.com/references/language-codes.html。
输入，开始网页文档的头部。
输入，将文档的字符编码声明为UTF-8。如果愿意，也可以输入utf-8。空格和斜杠是可选的，因此也是有效的。（UTF-8以外的其他字符编码也是有效的，不过UTF-8的适用面最广，很少有需要用其他编码的情况。）
输入。这里将包含页面的标题。3.2节中将讲解如何添加标题文字。
输入，结束页面文档的头部。
输入，开始页面的主体。这里是放置页面内容的地方。
为页面内容预留一些空行。后续章节会讲解如何创建内容。
输入，结束主体。
输入，结束页面。

步骤似乎有点多，不过，由于所有的页面都是这样开始编写的，可以使用一个单独的HTML页面作为创建每个页面的模板，以节省输入的时间。实际上，很多代码编辑器都可以为新页面指定初始的代码，这样就更简单了。如果你在编辑器中没有找到Settings（设置）或Preferences（偏好设置）菜单，可以在Help（帮助）中搜索。

网页的两个部分：head和body

快速回顾一下第1章学到的知识，HTML页面分为两个部分：head和body，参见图3.1.1。DOCTYPE出现在每个页面的开头，就像一本书的序言。

在文档head部分，通常要指明页面标题，提供为搜索引擎（如Google）准备的关于页面本身的信息，加载样式表，以及加载JavaScript文件（不过，出于性能考虑，多数时候在页面底部标记结束前加载JavaScript是更好的选择）。随着进一步阅读本书，你会看到一些关于这些内容的例子。除了3.2节就要讲解的title，其他head里的内容对页面访问者来说都是不可见的。

body元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。本书有好几章都讲述HTML的内容相关元素，其中一些会在本章提前接触到。

提示　使用HTML5 DOCTYPE可以确保浏览器以可靠的模式呈现页面，同时告诉HTML验证器根据HTML5允许的元素和语法检查代码。第20章会讨论HTML验证器。

提示　HTML5的DOCTYPE不区分大小写。例如，有的人选择输入。不过，使用是更常规的做法，参见图3.1.1。

提示　紧跟DOCTYPE的html元素应该包含页面的所有元素，参见图3.1.1。

提示　要确保你的代码编辑器已配置为以UTF-8保存文件，与代码中通过语句指定的编码相同，参见图3.1.1。（如果指定了另一种编码，就按那种编码保存文件。）并非所有的编辑器都默认以UTF-8保存文件，但大多数编辑器可以在菜单或面板中选择编码（参见2.3节）。如果页面没有设置为UTF-8，有的字母（如带重音符的i、带波形符（～）的n）就会变成一些奇怪的字符。

提示　嵌套在head元素里的代码不一定要缩进，参见图3.1.1。不过，缩进可以让你一眼看出head从哪里开始，包含什么内容，以及在哪里结束。在有些页面中，head变得很长并不少见。

改进后的HTML5 DOCTYPE

有了HTML5以后，编写代码的开头部分变得容易多了。HTML5的DOCTYPE短得让人惊讶，特别是跟从前的DOCTYPE相比。

在HTML 4和XHTML 1.0时代，有好几种可供选择的DOCTYPE，每一种都会指明HTML的版本，以及使用的是过渡型还是严格型模式。由于它们太难记，开发人员不得不每次都从某个地方把这些代码复制进来。

例如，下面是XHTML严格型文档的DOCTYPE。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
看起来令人费解。

幸好，所有的浏览器，无论新旧，都理解HTML5的DOCTYPE，因此你可以坚持在所有页面中使用它，忘掉过去的那些DOCTYPE。（唯一可能用到过去那些DOCTYPE的情况是继承一个旧站，而网站的拥有者不允许将DOCTYPE修改为HTML5的版本。）

3.1 开始编写网页