《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部分包含文档的标题，文档的标题是作为站点的名称和简短描述显示在浏览器的标题栏上的，示例代码如下：

网站标题
如果引用JavaScript和CSS外部文件，则需要把外部文件的链接添加到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 

几种不常用Web API（振动、重力感应、联网状态、系统电量信息、页面可见性、canvas转base64、监听屏幕旋转、元素全屏显示） navigator对象中有一些不常用的API，以下主要介绍vibrate振动,deviceorientation重力感应,online联网状态，getBattery系统电量信息，visibilitychange页面可见性，toDataURL（canvas转base64），orientationchange监听屏幕旋转和fullScreen元素全屏显示。
只需百来行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？ 笔者开源了一个`Web`思维导图[mind-map](https://github.com/wanglin2/mind-map)，数据默认是存储在`localstorage`里，如果想保存到本地文件，需要使用导出功能，下次打开再使用导入功能，编辑完如果又想保存到文件，那么又需要从重新导出覆盖原来的文件，不得不说，可以但不优雅，所以最近增加了直接编辑本地文件的能力，体验了一下，还是不错的，并且就是调调`API`的事情，很简单，何乐而不为。