《Web前端开发最佳实践》——3.2　标准的HTML页面结构

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第3章，第3.2节,作者:党　建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.2　标准的HTML页面结构

每个HTML文档都会包括两个部分：“head”和“body”。head部分是以< head

开始并以 head >结束的，而body部分是以< body >开始并以 body >结束的。这两个部分由一对< html >… html >包含在一起，可见一个基本的HTML文档结构就是：

<html>
    <head>
    </head>
    <body>
    </body>
</html>

head部分包含整个文档的一些基本信息，如网站的编码格式、网站的标题、网站引用的样式和脚本等。body部分包含用户在浏览器中看到的内容。
为了使得HTML文档能兼容标准格式，还需要给文档添加一个文档类型声明（DTD），当浏览器解析HTML文档时会遵循指定的类型声明标准。
HTML4的规范中定义了多个规范的文档声明，如下是一个典型的使用示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

在HTML5的规范中简化了文档类型声明，省略了DTD的引用，表明文档以标准模式解析，示例代码如下：

<!DOCTYPE html>

因为浏览器可以识别HTML5规定的这种声明，所以只要HTML文档的内容够规范就不用担心浏览器是否能识别。
head部分包含文档的标题，文档的标题是作为站点的名称和简短描述显示在浏览器的标题栏上的，示例代码如下：

<link rel="stylesheet" type="text/css" href="my_style.css" />

此外，head部分还会包含一些必要的meta标签，是对HTML文档内容的描述，用来表明文档的编码、关键字、介绍、作者等信息。
示例代码：

<meta name="keywords" content="HTML, web" />
<meta name="description" content="一个展示HTML页面的例子" />

body部分则包含所有在浏览器上展示的内容，如文本、图片、表格、音视频等。
示例代码：

<a href="/news">News</a>
<img src="green.jpeg" alt="Green" />
<video src="tgif.vid" autoplay onerror="failed(event)"></video>

综合这些页面的主要组成部分来看，一个稍微完善的页面会具有如下类似的
结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <link rel="stylesheet" href="my_style.css" />
    </head>
    <body>
        <h1>Sample page</h1>
        <p>This is a <a href="demo.html">simple</a> sample.</p>
        <!-- this is a comment -->
    </body>
</html>