1.2 HTML5的文档结构_精通HTML5+CSS3+JavaScript网页设计（视频教学版）（第2版）-QQ阅读男生玄幻网

书名：精通HTML5+CSS3+JavaScript网页设计（视频教学版）（第2版）
作者名：王英英
本章字数：2186字
更新时间：2021-03-24 01:08:40

1.2 HTML5的文档结构

HTML5文档最基本的结构主要包括文档类型说明、文档开始标记、元信息、主体标记和页面注释标记。

1.2.1 文档类型说明

HTML5设计准则中最重要的一条是化繁为简，Web页面的文档类型说明（Doctype）被极大地简化了。

在HTML4或早期的版本中，创建HTML文档时，文档头部的类型说明代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

上面为XHTML文档类型说明，读者可以看到这段代码既麻烦又难记，HTML5对文档类型进行了简化，简单到15个字符就可以了，代码如下：

     <!DOCTYPE html>

技巧提示

Doctype声明需要出现在HTML文件的第一行。

1.2.2 HTML标记

HTML标记代表文档的开始，由于HTML语言语法的松散特性，该标记可以省略，但是为了使之符合Web标准和文档的完整性，用户要养成良好的编写习惯，建议不要省略该标记。

HTML标记以<html>开头，以</html>结尾，文档的所有内容书写在开头和结尾的中间部分。语法格式如下：

     <html>
     …
     </html>

1.2.3 头标记head

头标记head用于说明文档头部相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息是以<head>开始，以</head>结束，语法格式如下：

     <head>
     …
     </head>

技巧提示

<head>元素的作用范围是整篇文档，定义在HTML文档头部的内容往往不会在网页上直接显示。

1．标题标记title

HTML页面的标题一般用来说明页面的用途，显示在浏览器的标题栏中。在HTML文档中，标题信息设置在<head>与</head>之间。标题标记以<title>开始，以</title>结束，语法格式如下：

     <title>
     …
     </title>

在标记中间的“…”就是标题的内容，可以帮助用户更好地识别页面。预览网页时，设置的标题在浏览器的左上方标题栏中显示（如图1-1所示）。页面的标题只有一个，在HTML文档的头部，即<head>和</head>之间。

图1-1 标题栏在浏览器中的显示效果

2．元信息标记meta

表1-2 <meta>标记提供的属性及取值

（1）字符集charset属性

在HTML5中，有一个新的charset属性，使字符集的定义更加容易。例如，下列代码告诉浏览器，网页使用“ISO-8859-1”字符集显示，代码如下所示。

     <meta charset="ISO-8859-1">

（2）搜索引擎的关键字

早期，meta keywords关键字对搜索引擎的排名算法起到一定的作用，是很多人进行网页优化的基础。关键字在浏览时是看不到的，使用格式如下。

     <meta name="keywords" content="关键字,keywords" />

说明：

● 不同的关键字之间，应用半角逗号隔开（英文输入状态下），不要使用“空格”或“|”间隔。

● 是keywords，不是keyword。

● 关键字标签中的内容应该是一个个的短语，而不是一段话。

例如，定义针对搜索引擎的关键词，代码如下：

     <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

关键字标记keywords，曾经是搜索引擎排名中很重要的因素，但现在已经被很多搜索引擎完全忽略。加上这个标记对网页的综合表现没有坏处，不过如果使用不恰当，对网页非但没有好处，还有欺诈的嫌疑。在使用关键字标记keywords时，要注意以下几点：

● 关键字标记中的内容要与网页核心内容相关，确信使用的关键字字出现在网页文本中。

● 使用用户易于通过搜索引擎检索的关键字，过于生僻的词汇不太适合做meta标记中的关键字。

● 不要重复使用关键字，否则可能会被搜索引擎惩罚。

● 一个网页的关键字标记里最多包含5个重要的关键字，不要超过5个。

● 每个网页的关键字应该不一样。

技巧提示

由于设计者或SEO优化者以前对meta keywords关键字的滥用，导致目前它在搜索引擎排名中的作用很小。

（3）页面描述

meta description（描述元标记）是一种HTML元标记，用来简略描述网页的主要内容，通常被搜索引擎用于搜索结果页上展示给最终用户看的一段文字片段。页面描述在网页中是不显示出来的，使用格式如下：

     <meta name="description" content="网页的介绍" />

例如，定义对页面的描述，代码如下：

     <meta name="description" content="免费的web技术教程。" />

（4）页面定时跳转

使用<meta>标记可以使网页在经过一定时间后自动刷新，这可通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。

在浏览网页时经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。页面定时刷新跳转的语法格式如下：

     <meta http-equiv="refresh" content="秒;[url=网址]" />

说明：上面的“[url=网址]”部分是可选项。如果有这部分，页面定时刷新并跳转；如果省略该部分，页面只定时刷新，不进行跳转。

例如，实现每5秒刷新一次页面，将下述代码放入head标记部分即可。

     <meta http-equiv="refresh" content="5" />

1.2.4 网页的主体标记body

网页所要显示的内容都放在网页的主体标记内，是HTML文件的重点所在，后面章节所要介绍的HTML标记都将放在这个标记内。然而它并不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像，这会在后面进行介绍。主体标记以<body>开始、以</body>结束，语法格式如下：

     <body>
     …
     </body>

注意，在构建HTML结构时，标记不允许交叉出现，否则会造成错误。

例如，在下列代码中，<body>开始标记出现在<head>标记内。

     <html>
     <head>
     <title>标记测试</title>
     <body>
     </head>
     </body>
     </html>

代码中的第4行<body>开始标记和第5行的</head>结束标记出现了交叉，这是错误的。HTML中的所有标记都是不允许交叉出现的。

1.2.5 页面注释标记

注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，浏览器对注释代码不进行解释，并且在浏览器的页面中不显示。在HTML源代码中适当地插入注释语句是一种非常好的习惯。对于设计者日后的代码修改、维护工作很有好处。另外，如果将代码交给其他设计者，其他人也能很快读懂前者所撰写的内容。

语法格式如下：

     <!--注释的内容-->

注释语句元素由前后两半部分组成，前半部分一个左尖括号、一个半角感叹号和两个连字符，后半部分由两个连字符和一个右尖括号组成。

     <html>
     <head>
     <title>标记测试</title>
     </head>
     <body>
     <!-- 这里是标题-->
     <h1>HTML5从入门到精通</h1>
     </body>
     </html>

页面注释不但可以对HTML中一行或多行代码进行解释说明，而且可以注释掉这些代码。如果希望某些HTML代码在浏览器中不显示，可以将这部分内容放在之间。例如，修改上述代码，如下所示：

     <html>
     <head>
     <title>标记测试</title>
     </head>
     <body>
     <!--
     <h1>HTML5从入门到精通</h1>
     -->
     </body>
     </html>

修改后的代码，将<h1>标记作为注释内容处理，在浏览器中将不会显示。