前端修炼の道：第一个 HTML 页面-CSDN博客

图片描述

往期回顾

在 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> 设置页面字符集

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

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

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并列关系

并列关系也就是常说的同级关系，也可以通俗记忆为“兄弟关系”。

图片描述

这两种关系在以后的示例中会经常用到，大家一定要对这两种关系有所了解。

思考：

在 HTML 基本结构中还有哪些父子级关系和兄弟关系？