前端修炼の道：第一个 HTML 页面

摘要：可见对一个页面正确渲染很重要。和标签对用于标识页面的头部区域，和之间的内容都属于头部区域中的内容。是一个辅助性标签，对页面可以进行很多方面的特性的设置。当页面没有设置字符集时，浏览器会使用默认的字符编码显示。

往期回顾

在 1.2 节介绍 HTML 语言时讲到：
HTML 是一种“超文本标记语言”
它由许多 HTML 标签组成
注意：HTML 标签也称为元素

HTML 页面

一个页面的创建离不开 HTML 语言，每个页面都是从搭建结构开始的，尽管页面变得越来越复杂，但是其底层结构依然会比较简单。本节将通过示例 1-1 所示的简单 HTML 页面来详细讲解 HTML 页面的基本结构。

【示例 1-1】HTML 页面基本结构

上述代码体现了 HTML 页面的基本结构，每个页面都是由示例 1-1 所示的结构开始构建的。

根据功能的不同，整个 HTML 页面在结构上可以分成两层：

一层是外层，由 和 标签对来标识；

一层是内层，用于实现 HTML 页面的各项功能；

根据实现功能的不同，又可以将内层细分为两个区域：即头部区域和主体区域

头部区域由 和 标签对标识；

要在浏览器窗口显示的内容需要放在主体区域；

主体区域的标识标签是 和

打开任意一款编辑器，新建一个 HTML 页面，书写以上的 HTML 结构代码之后，以后缀名”.html”保存。然后用 Chorme 浏览器打开该页面，会发现页面上一片空白，没有任何内容。这是因为我们还没有在代码的 标签中添加内容。

在添加内容之前先介绍一下结构中所用到的各个标签的作用。

基本标记标签
一 文档类型声明

下面分别讲解示例 1-1 中每一行代码的含义及使用方法。

DOCTYPE 是 Document Type 的简写，用来告诉浏览器使用什么样的 HTML 或 XHTML 规范来解析网

页。解析规范由 DOCTYPE 定义的 DTD（文档类型定义）来指定，DTD 规定了使用通用标签语言的网页语法。

需要注意的是：在 HTML 文档中，DOCTYPE 应该位于页面的第一行。在 HTML5 以前，必须指定 DTD，例如下例代码是 XTHML 的过渡类型的文档声明：

在 HTML5 中，遵循“存在即合理”的原则，对规则的要求比较宽松，没有指定 HTML 标签必须遵循的 DTD，因而简写成以下形式：

DOCTYPE 是不区分大小写的，所以也可以写成 ：

目前，浏览器对页面的渲染有两种模式：

怪异模式（浏览器使用自己的模式解析渲染页面）

标准模式（浏览器使用 W3C 官方标准解析渲染页面）

不同的渲染模式会影响到浏览器对 CSS 代码甚至 JavaScript 脚本的解析。

如果使用 DOCTYPE，浏览器将按标准模式解析渲染页面，否则将按怪异模式解析渲染页面。

使用怪异模式对运行在 IE 低版本浏览器下的页面影响很大。可见 DOCTYPE 对一个页面正确渲染很重要。

二 开始文档实际 HTML 部分

标签是 HTML 页面中所有标签的顶层标签，页面中的所有标签必须放在 标签对之间

三 设置网页文档头部信息

通常跟在 后面。

 和  标签对用于标识 HTML 页面的头部区域， 和 之间的内容都属于头部区域中的内容。

这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。

四 网页文档的标题

示例代码如下：

知识点拓展：什么是搜索引擎？

搜索引擎（Search Engine，SE）

是指根据一定的策略，运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用户提供检索服务，将用户检索相关的信息展示给用户的系统。

通俗解释：

常用的百度搜索就是一种搜索引擎，它通过一些关键字迅速地找到用户需要的资料。在搜索引擎中，用户搜索的就是标题，所以一个切合内容的标题是至关重要的。

为了界面的统一性，全文中的示例运行结果截图统一套用了妙味官方的网址：

www.miaov.com

各位读者在各自的电脑中进行这些示例文件时，在 Chrome 浏览器的地址栏中看到的 URL 将会是这样的格式：

file:/// 文件保存路径 /html 文件名

如将 html 文件 ex1-1.html 保存在 d:Weblesson1 路径中；则访问 ex1-1.html 时浏览器中显示的 URL 将是：
file:///D:/Web/lesson1/ex1-1.html

五 定义文档元数据

标签位于文档的头部，不包含任何文字内容。 用来定义文档的元数据，使用 “名称 = 值”的形式来表示。

一般使用它来描述当前页面的特性，比如：文档字符集、关键字、网页描述信息、作者等内容。

是一个辅助性标签，对 HTML 页面可以进行很多方面的特性的设置。下面，主要介绍如何使用 来设置页面字符集、关键字和描述信息。

①使用 设置页面字符集

标签可以设置页面内容所使用的字符编码，浏览器会据此来调用相应的字符编码显示页面内容和标题。当页面没有设置字符集时，浏览器会使用默认的字符编码显示。

简体中文操作系统下，IE 浏览器的默认字符编码是 GB2312，Chrome 浏览器默认字符编码是 GBK。所以当页面字符集设置不正确或没有设置时，文档的编码和页面内容的编码有可能不一致，此时将导致页面内容和标题显示乱码。

在 HTML 页面中，常用的字符编码是“utf-8” “utf-8”又叫“万国码”
它涵盖了地球上几乎所有地区的文字。我们也可以把它看成是一个世界语言的“翻译官”。有了“utf-8”，你可以在 HTML
页面上写中文、英文、韩文等语言的内容。默认情况下，HTML
文档的编码也是“utf-8”。这就使文档编码和页面内容的编码保持了一致，这样的页面在世界上几乎所有地区都能正常显示。

标签设置字符集有两种格式，一种是 HTML5 版本的格式，一种是 HTML5 以下版本的格式，基本语法如下。

HTML4/XHTML 设置格式：

HTML5 对字符集的设置作了简化，格式如下：

使用 设置页面字符集的示例如下
【示例 1-2】HTML 页面字符集设置

      妙味课堂－ www.miaov.com

上述代码在 HTML 页面的头部区域使用 设置页面的字符编码为“utf-8”，在 Chrome 浏览器中运行的结果如图 1-23 所示。

将示例 1-2 中的 标签去掉后，再在 Chrome 浏览器中运行，结果如图 1-24 所示。

对比图 1-23 和图 1-24，可见页面字符集设置的重要性。

②使用 设置关键字

关键字是为了便于搜索引擎搜索而设置的，用户在网页中是看不到关键字的。

它的作用主要体现在搜索引擎优化。对于 SEO 优化而言，关键字起到画龙点睛的作用。

为提高网页在搜索引擎中被搜索到的概率，可以设定多个与网页主题相关的关键字。需注意的是，虽然设定多个关键字可提高被搜索到的几率，但目前大多数的搜索引擎在检索时都会限制关键字的数量，一般 10 个以内关键字比较合理，关键字多了会分散关键字优化，反倒影响排名。

关键字设置语法如下：

语法说明：关键字之间可以使用逗号，也可以使用空格等符号。示例代码如下：

③使用 设置网页描述信息

网页的描述信息主要用于概述性地描述页面的主要内容，是对关键词的补充性描述，当描述信息包含部分关键字时，会作为搜索结果返回给用户。

像关键字一样，搜索引擎对描述信息的字数也有限制，一般允许 70~100 字，所以描述信息的内容应尽量简明扼要。

描述信息设置语法如下：

示例代码如下：

从 ……

上述代码中的标题中带有了关键字“妙味课堂”，所以当用户在百度搜索框中输入“妙味课堂”时会搜索到妙味课堂页面，同时在返回的搜索结果中，会以“首页－妙味课堂 www.miaov.com”作为搜索结果的标题，而返回的搜索结果描述信息则是上述代码中设置的网页描述信息，如图 1-25 所示。

图 1-25 是使用关键词搜索信息，同样可以搜索到图 1-26 的结果，但排名没有使用标题中的关键字进行搜索时靠前。

六 页面主体内容

body（身体，主体）代表了页面的主体部分，它是放置页面内容的地方，所有需要在浏览器窗口中显示的内容都需要放置在 标签对之间。用户可以通过浏览器看到写在 标签中的内容。

【示例 1-4】 标签的使用

     吼吼，好厉害，这是我们第一个 HTML 页面

当打开浏览器运行上述代码时就会发现，浏览器上会显示书写的文本，如图 1-27 所示。

以上就是 HTML 基本结构中标签的含义及使用介绍，通过观察这些基本的标签，可以总结出标签的一些特点，如下所述。

① 标签是由尖括号包围的关键词，比如 。
② 标签通常是成对出现的（称为双标签），有开始标签和结束标签。开始标签使用 < 标签名 > 表示，结束标签使用 表示，比如 。
③ 也有多带带呈现的标签（称为单标签），比如 。
④ 在开始标签中可以包含若干个属性。每个属性使用：属性名 =“属性值”的格式进行设置，结束标签不包含任何属性。HTML 属性表示标签所具有的一些特性。比如标签的形状、颜色、用途等特性。比如 标签中的 charset="utf-8" “charset”就是标签的一个属性，而“utf-8 ”则是它的值。
⑤ 如果是双标签的话，内容出现在两个标签之间，比如 内容 。
⑥ 如果是单标签的话，内容在标签属性中赋值，比如后面将学到的 img 图片标签，图片地址就出现在 src 属性中：。
⑦ 标签不区分大小写，但是为了建立一个良好的编码习惯，标签请使用小写。

根据上面总结的标签特点，可得到如下所示的标签设置格式：

双标签：< 标签名称 属性 1=" 属性值 1" 属性 2=" 属性值 2" …> …
单标签：< 标签名称 属性 1=" 属性值 1" 属性 2=" 属性值 2" …/>

标签嵌套关系

在 HTML 结构中，标签与标签之间只存在两种关系：嵌套关系和并列关系。

01嵌套关系

嵌套关系又称为包含关系，可以通俗记忆为“父子级关系”。

在 1.4.1 小节中，我们发现 标签和