3.1 头部信息
在HTML文档的头部区域，存储着各种网页基本信息（也称元信息），这些信息主要被浏览器所采用，不会显示在网页中。另外，搜索引擎也会检索这些信息，因此重视并设置这些头部信息非常重要。
3.1.1 定义网页标题
使用title元素可定义网页标题。例如：
浏览器会把它放在窗口的标题栏或状态栏中显示，如图3.1所示。当把文档加入用户的链接列表、收藏夹或书签列表时，标题将作为该文档链接的默认名称。
图3.1 显示网页标题
title元素必须位于head部分。页面标题会被Google、百度等搜索引擎采用，从而能够大致了解页面内容，并将页面标题作为搜索结果中的链接显示，如图3.2所示。它也是判断搜索结果中页面相关度的重要因素。
图3.2 网页标题在搜索引擎中的作用
总之，让每个页面的title是唯一的，从而提升搜索引擎结果排名，并让访问者获得更好的体验。
【补充】
title元素是必需的，title中不能包含任何格式、HTML、图像或指向其他页面的链接。一般网页编辑器会预先为页面标题填上默认文字，要确保用自己的标题替换它们。
很多开发人员不太重视title文字，仅简单地输入网站名称，并将其复制到全站每一个网页中。如果流量是网站追求的指标之一，这样做会对网站造成很大的损失。不同搜索引擎确定网页排名和内容索引规则的算法是不一样的。不过，title通常都扮演着重要的角色。搜索引擎会将title作为判断页面主要内容的指标，并将页面内容按照与之相关的文字进行索引。
有效的title应包含几个与页面内容密切相关的关键字。作为一种最佳实践，选择能简要概括文档内容的文字作为title文字。这些文字既要对屏幕阅读器用户友好，又要有利于搜索引擎排名。
将网站名称放入title，但将页面特有的关键字放在网站名称的前面会更好。建议将title的核心内容放在前60个字符中，因为搜索引擎通常将超过此数目（作为基准）的字符截断。不同浏览器显示在标题栏中的字符数上限不尽相同。浏览器标签页会将标题截得更短，因为它占的空间较少。
3.1.2 定义网页元信息
使用meta元素可以定义网页的元信息，例如，定义针对搜索引擎的描述和关键词，一般网站都必须设置这两条元信息，以方便搜索引擎检索。
定义网页的描述信息。
<meta name="description" content=" 标准网页设计专业技术资讯" / >
- 定义页面的关键词。
<meta name="keywords" content="HTML,DHTML, CSS, XML, XHTML, JavaScript" />
<meta>标签位于文档的头部，<head>标签内，不包含任何内容。使用meta元素的属性可以定义与文档相关联的名称／值对。<meta>标签可用属性说明，如表3.1所示。
表3.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" />
类似设置还有：
3.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;">
各属性说明如表3.2所示。
表3.2 <meta name="viewport">标签的设置说明
【示例】下面的示例是在页面中输入一个标题和两段文本，如果没有设置文档视口，则在移动设备中所呈现的效果如图3.3所示，而设置了文档视口之后，所呈现的效果如图3.4所示。
提示：ideal viewport（理想视口）通常就是我们说的设备的屏幕分辨率。
图3.3 默认被缩小的页面视图
图3.4 保持正常的布局视图
3.1.4 移动应用的head头信息说明
本节为线上拓展内容，介绍移动端HTML5 head头部信息设置说明。本节内容相对专业，适合专业开发人员阅读或参考，对于初级读者来说，建议有选择性地跳读，或者作为案头参考资料，需要时备查使用。详细内容请扫码阅读。