前端修炼の道：第一个 HTML 页面
往期回顾
在 1.2 节介绍 HTML 语言时讲到：
HTML 是一种“超文本标记语言”
它由许多 HTML 标签组成
注意：HTML 标签也称为元素
HTML 页面
一个页面的创建离不开 HTML 语言，每个页面都是从搭建结构开始的，尽管页面变得越来越复杂，但是其底层结构依然会比较简单。本节将通过示例 1-1 所示的简单 HTML 页面来详细讲解 HTML 页面的基本结构。
【示例 1-1】HTML 页面基本结构
上述代码体现了 HTML 页面的基本结构，每个页面都是由示例 1-1 所示的结构开始构建的。
根据功能的不同，整个 HTML 页面在结构上可以分成两层：
- 一层是外层，由 <html> 和 </html> 标签对来标识；
- 一层是内层，用于实现 HTML 页面的各项功能；
根据实现功能的不同，又可以将内层细分为两个区域：即头部区域和主体区域
- 头部区域由 <head> 和 </head> 标签对标识；
- 要在浏览器窗口显示的内容需要放在主体区域；
- 主体区域的标识标签是 <body> 和 </body>
打开任意一款编辑器，新建一个 HTML 页面，书写以上的 HTML 结构代码之后，以后缀名”.html”保存。然后用 Chorme 浏览器打开该页面，会发现页面上一片空白，没有任何内容。这是因为我们还没有在代码的<body></body> 标签中添加内容。
在添加内容之前先介绍一下结构中所用到的各个标签的作用。
基本标记标签
一<!DOCTYPE > 文档类型声明
下面分别讲解示例 1-1 中每一行代码的含义及使用方法。
DOCTYPE 是 Document Type 的简写，用来告诉浏览器使用什么样的 HTML 或 XHTML 规范来解析网
页。解析规范由 DOCTYPE 定义的 DTD（文档类型定义）来指定，DTD 规定了使用通用标签语言的网页语法。
需要注意的是：在 HTML 文档中，DOCTYPE 应该位于页面的第一行。在 HTML5 以前，必须指定 DTD，例如下例代码是 XTHML 的过渡类型的文档声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
在 HTML5 中，遵循“存在即合理”的原则，对规则的要求比较宽松，没有指定 HTML 标签必须遵循的 DTD，因而简写成以下形式：
<!DOCTYPE html>
DOCTYPE 是不区分大小写的，所以也可以写成 ：
<!DOCTYPE html>
目前，浏览器对页面的渲染有两种模式：
- 怪异模式（浏览器使用自己的模式解析渲染页面）
- 标准模式（浏览器使用 W3C 官方标准解析渲染页面）
不同的渲染模式会影响到浏览器对 CSS 代码甚至 JavaScript 脚本的解析。
如果使用 DOCTYPE，浏览器将按标准模式解析渲染页面，否则将按怪异模式解析渲染页面。
使用怪异模式对运行在 IE 低版本浏览器下的页面影响很大。可见 DOCTYPE 对一个页面正确渲染很重要。
二<html></html> 开始文档实际 HTML 部分
<html> 标签是 HTML 页面中所有标签的顶层标签，页面中的所有标签必须放在 <html></html> 标签对之间
三<head></head> 设置网页文档头部信息
<head> 通常跟在 <html> 后面。
<head> 和 </head> 标签对用于标识 HTML 页面的头部区域，<head> 和</head> 之间的内容都属于头部区域中的内容。
这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。
四<title></title> 网页文档的标题
<title> 标签的作用有两个：
- 一是设置网页的标题，以告诉访客网页的主题是什么，设置的标题将出现在浏览器中的标签栏中，如图 1-22 所示；
- 二是用于搜索引擎索引，作为搜索关键字以及搜索结果的标题使用。
需要注意的是：搜索引擎会根据 <title> 标签设置的内容将网站或文章合理归类。所以标题对一个网站或文章来说特别重要。
此外，到目前为止，标题标签是 SEO 中最为关键的优化项目之一，一个合适的标题可以使网站获得更好的排名。
实践证明，对标题同时设置关键字时可以使网站获得更靠前的排名。有关 title 标题对搜索影响的示例请参见示例 1-3。
为了让访客更好地了解网页内容以及使网站获得更好的排名，每个页面都应该有一个简短的、描述性的、最好能带上关键字的标题，而且这个标题在每个页面应该是唯一的。
标题设置语法如下：
<title> 标题内容 </title>
示例代码如下：
<title> 妙味课堂 -www.miaov.com</title>
知识点拓展：什么是搜索引擎？
搜索引擎（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
五<meta> 定义文档元数据
<meta> 标签位于文档的头部，不包含任何文字内容。<meta> 用来定义文档的元数据，使用 “名称 = 值”的形式来表示。
一般使用它来描述当前页面的特性，比如：文档字符集、关键字、网页描述信息、作者等内容。
<meta> 是一个辅助性标签，对 HTML 页面可以进行很多方面的特性的设置。下面，主要介绍如何使用<meta> 来设置页面字符集、关键字和描述信息。
①使用 <meta> 设置页面字符集
<meta> 标签可以设置页面内容所使用的字符编码，浏览器会据此来调用相应的字符编码显示页面内容和标题。当页面没有设置字符集时，浏览器会使用默认的字符编码显示。
简体中文操作系统下，IE 浏览器的默认字符编码是 GB2312，Chrome 浏览器默认字符编码是 GBK。所以当页面字符集设置不正确或没有设置时，文档的编码和页面内容的编码有可能不一致，此时将导致页面内容和标题显示乱码。
在 HTML 页面中，常用的字符编码是“utf-8” “utf-8”又叫“万国码”
它涵盖了地球上几乎所有地区的文字。我们也可以把它看成是一个世界语言的“翻译官”。有了“utf-8”，你可以在 HTML
页面上写中文、英文、韩文等语言的内容。默认情况下，HTML
文档的编码也是“utf-8”。这就使文档编码和页面内容的编码保持了一致，这样的页面在世界上几乎所有地区都能正常显示。
<meta> 标签设置字符集有两种格式，一种是 HTML5 版本的格式，一种是 HTML5 以下版本的格式，基本语法如下。
HTML4/XHTML 设置格式：
<meta http-equiv="Content-Type" content="text/html; charset= 字符集 ">
HTML5 对字符集的设置作了简化，格式如下：
<meta charset=" 字符集 ">
使用 <meta> 设置页面字符集的示例如下
【示例 1-2】HTML 页面字符集设置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 网页字符集设置 </title>
</head>
<body>
妙味课堂－ www.miaov.com
</html>上述代码在 HTML 页面的头部区域使用 <meta> 设置页面的字符编码为“utf-8”，在 Chrome 浏览器中运行的结果如图 1-23 所示。
将示例 1-2 中的 <meta> 标签去掉后，再在 Chrome 浏览器中运行，结果如图 1-24 所示。
对比图 1-23 和图 1-24，可见页面字符集设置的重要性。
②使用 <meta> 设置关键字
关键字是为了便于搜索引擎搜索而设置的，用户在网页中是看不到关键字的。
它的作用主要体现在搜索引擎优化。对于 SEO 优化而言，关键字起到画龙点睛的作用。
为提高网页在搜索引擎中被搜索到的概率，可以设定多个与网页主题相关的关键字。需注意的是，虽然设定多个关键字可提高被搜索到的几率，但目前大多数的搜索引擎在检索时都会限制关键字的数量，一般 10 个以内关键字比较合理，关键字多了会分散关键字优化，反倒影响排名。
关键字设置语法如下：
<meta name="keywords" content=" 关键字 1, 关键字 2, 关键字 3,…">
语法说明：关键字之间可以使用逗号，也可以使用空格等符号。示例代码如下：
<meta name="keywords" content=" JavaScript 教程 ,HTML5 培训 ,CSS3 培训 , 移动端培训 ">
③使用 <meta> 设置网页描述信息
网页的描述信息主要用于概述性地描述页面的主要内容，是对关键词的补充性描述，当描述信息包含部分关键字时，会作为搜索结果返回给用户。
像关键字一样，搜索引擎对描述信息的字数也有限制，一般允许 70~100 字，所以描述信息的内容应尽量简明扼要。
描述信息设置语法如下：
<meta name="discription" content=" 网页描述信息 ">
示例代码如下：
<meta name="discription" content=" 妙味课堂是北京最资深的前端开发培训机构，妙味课堂拥有系统的 JavaScript、HTML5、CSS3、移动开发、远程培训等课程，并录制成最系统的前端开发视频教程，妙味课堂推出的 VIP 前端学习平台已经成为学习氛围最浓郁的前端学习圈。">
从 <title> 和 <meta> 两个标签的介绍中，可以看到，标题、网页描述信息以及关键词对 SEO 有着很大的作用，搜索引擎之所以能搜到网站，全都是标题、网页描述信息和关键词的功劳，所以我们必须做好标题、描述标签、关键词的设置与优化。下面的示例演示了如何使用标题、网页描述信息和关键词进行网页搜索。
【示例 1-3】使用标题和网页描述信息实现网页的搜索。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=" 妙味课堂是北京最资深的前端开发培训机构，妙味课堂拥有系统的 JavaScript、HTML5、CSS3、移动开发、远程培训等课程，并录制成最系统的前端开发视频教程，妙味课堂推出的 VIP 前端学习平台已经成为学习氛围最浓郁的前端学习圈 "> <meta name="keywords" content="JavaScript 远程培训 ,JS 远程培训 ,JavaScript 培训 ,JS 培训 ,JavaScript 教程 ,HTML5 培训 ,CSS3 培训 , 北京前端培训 , 移动端培训 , 北京移动端培训 , 北京 JS 培训 , 北京 JavaScript 培训 ,北京 HTML5 培训 "> <title> 首页－妙味课堂 www.miaov.com</title> </head> <body> …… </body> </html>
上述代码中的标题中带有了关键字“妙味课堂”，所以当用户在百度搜索框中输入“妙味课堂”时会搜索到妙味课堂页面，同时在返回的搜索结果中，会以“首页－妙味课堂 www.miaov.com”作为搜索结果的标题，而返回的搜索结果描述信息则是上述代码中设置的网页描述信息，如图 1-25 所示。
图 1-25 是使用关键词搜索信息，同样可以搜索到图 1-26 的结果，但排名没有使用标题中的关键字进行搜索时靠前。
六<body></body> 页面主体内容
body（身体，主体）代表了页面的主体部分，它是放置页面内容的地方，所有需要在浏览器窗口中显示的内容都需要放置在 <body></body> 标签对之间。用户可以通过浏览器看到写在 <body></body> 标签中的内容。
【示例 1-4】<body> 标签的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 主体标签的使用示例 </title>
</head>
<body>
吼吼，好厉害，这是我们第一个 HTML 页面
</body>
</html>当打开浏览器运行上述代码时就会发现，浏览器上会显示书写的文本，如图 1-27 所示。
以上就是 HTML 基本结构中标签的含义及使用介绍，通过观察这些基本的标签，可以总结出标签的一些特点，如下所述。
① 标签是由尖括号包围的关键词，比如 <html>。
② 标签通常是成对出现的（称为双标签），有开始标签和结束标签。开始标签使用 < 标签名 > 表示，结束标签使用 </ 标签名 > 表示，比如 <html></html>。
③ 也有单独呈现的标签（称为单标签），比如 <meta charset="utf-8"/>。
④ 在开始标签中可以包含若干个属性。每个属性使用：属性名 =“属性值”的格式进行设置，结束标签不包含任何属性。HTML 属性表示标签所具有的一些特性。比如标签的形状、颜色、用途等特性。比如<meta> 标签中的 charset="utf-8" “charset”就是标签的一个属性，而“utf-8 ”则是它的值。
⑤ 如果是双标签的话，内容出现在两个标签之间，比如 <body> 内容 </body>。
⑥ 如果是单标签的话，内容在标签属性中赋值，比如后面将学到的 img 图片标签，图片地址就出现在 src 属性中：<img src="tupian.png"/>。
⑦ 标签不区分大小写，但是为了建立一个良好的编码习惯，标签请使用小写。
根据上面总结的标签特点，可得到如下所示的标签设置格式：
双标签：< 标签名称 属性 1=" 属性值 1" 属性 2=" 属性值 2" …> …</ 标签名称 >
单标签：< 标签名称 属性 1=" 属性值 1" 属性 2=" 属性值 2" …/>
标签嵌套关系
在 HTML 结构中，标签与标签之间只存在两种关系：嵌套关系和并列关系。
01嵌套关系
嵌套关系又称为包含关系，可以通俗记忆为“父子级关系”。
在 1.4.1 小节中，我们发现 <meta> 标签和 <title> 标签都存在 <head> 标签中，此时 <head> 标签与 <meta>
标签的关系以及 <head> 标签和 <title> 标签的关系，体现的就是嵌套关系也是父子级关系，如图 1-28 所示。
02并列关系
并列关系也就是常说的同级关系，也可以通俗记忆为“兄弟关系”。
<meta> 标签和 <title> 标签都有一个共同的“父级”—— <head> 标签。所以 <meta> 标签和 <title> 标签的并列关系也叫作“兄弟关系”，如图 1-29 所示。
这两种关系在以后的示例中会经常用到，大家一定要对这两种关系有所了解。
思考：
在 HTML 基本结构中还有哪些父子级关系和兄弟关系？