2.1 头部结构
在HTML文档的头部区域，存储着各种网页元信息，这些信息主要为浏览器所用，一般不会显示在网页中。另外，搜索引擎也会检索这些信息，因此设置这些头部信息非常重要。
2.1.1 定义网页标题
使用<title>标签可定义网页标题。例如：
浏览器会把它放在窗口的标题栏或状态栏中显示，如图2.1所示。当把文档加入用户的链接列表、收藏夹或书签列表时，标题将作为该文档链接的默认名称。
提示：title元素必须位于head部分。确保每个页面的title是唯一的，从而提升搜索引擎结果排名，并让访问者获得更好的体验。title不能包含任何格式、HTML、图像或指向其他页面的链接。
图2.1 显示网页标题
2.1.2 定义网页元信息
使用<meta>标签可以定义网页的元信息，例如，定义针对搜索引擎的描述和关键词，一般网站都必须设置这两条元信息，以方便搜索引擎检索。
定义网页的描述信息。
<meta name="description" content="标准网页设计专业技术资讯" />
定义页面的关键词。
<meta name="keywords" content="HTML,DHTML, CSS, XML, XHTML, JavaScript" />
<meta>标签位于文档的头部，<head>标签内，不包含任何内容。使用<meta>标签的属性可以定义与文档相关联的名称／值对。<meta>标签可用属性说明如表2.1所示。
表2.1 <meta>标签属性列表
【示例】下面列举常用元信息的设置代码，更多元信息的设置可以参考HTML手册。
使用http-equiv等于content-type，可以设置网页的编码信息。
设置UTF-8编码。
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
提示，HTML5简化了字符编码设置方式：<meta charset="utf-8">，其作用是相同的。
设置简体中文gb2312编码。
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
注意：每个HTML文档都需要设置字符编码类型，否则可能会出现乱码，其中UTF-8是国家通用编码，独立于任何语言，因此都可以使用。
使用content-language属性值定义页面语言的代码。如下所示设置中文版本语言。
<meta http-equiv="content-language" content="zh-CN" />
使用refresh属性值可以设置页面刷新时间或跳转页面，如5秒钟之后刷新页面。
<meta http-equiv="refresh" content="5" />
5秒钟之后跳转到百度首页。
<meta http-equiv="refresh" content="5; url= https://www.baidu.com/" />
使用expires属性值设置网页缓存时间。
<meta http-equiv="expires" content="Sunday 20 October 2019 01:00 GMT" />
也可以使用如下方式设置页面不缓存。
<meta http-equiv="pragma" content="no-cache" />
类似设置还有：
2.1.3 定义文档视口
在移动Web开发中，经常会遇到viewport（视口）问题，就是浏览器显示页面内容的屏幕区域。一般移动设备的浏览器默认都设置一个<meta name="viewport">标签，定义一个虚拟的布局视口，用于解决早期的页面在手机上显示的问题。
iOS、Android基本都将这个视口分辨率设置为980px，所以桌面网页基本能够在手机上呈现，只不过看上去很小，用户可以通过手动缩放网页进行阅读。这种方式用户体验很差，建议使用<meta name="viewport">标签设置视图大小。
<meta name="viewport">标签的设置代码如下。
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
各属性说明如表2.2所示。
表2.2 <meta name="viewport">标签的设置说明
【示例】在页面中输入一个标题和两段文本，如果没有设置文档视口，则在移动设备中所呈现效果如图2.2所示，而设置了文档视口之后，所呈现效果如图2.3所示。
图2.2 默认被缩小的页面视图
图2.3 保持正常的布局视图
提示：ideal viewport（理想视口）通常就是我们说的设备的屏幕分辨率。