2.1 设置头部信息_HTML5+CSS3+JavaScript从入门到精通（微课精编版）-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

2.1　设置头部信息

在HTML文档的头部区域存储着各种网页基本信息，这些信息主要被浏览器采用，不会显示在网页中。另外，搜索引擎也会检索这些信息，因此重视并设置这些头部信息非常重要。

2.1.1　定义网页标题

视频讲解

使用<title>标签可定义文档的标题。例如：

    <html>
    <head>
    <title>HTML5标签说明</title>
    </head>
    <body>
    HTML5标签列表
    </body>
    </html>

浏览器会把文档的标题放在窗口的标题栏或状态栏中显示，如图2.1所示。当把文档加入用户的链接列表、收藏夹或书签列表时，标题将作为该文档链接的默认名称。

图2.1　显示网页标题

　提示：设置一个正确的标题非常重要：很多搜索引擎会把网页标题作为与页面相关的描述性词语进行检索，被插入到庞大的链接数据库中。因此，为每个文档都认真地选择一个描述性的、实用的、与上下文相关联的标题。

错误的标题：

　抽象的标题没有意义。例如，“第十六章”或“第五部分”这样的标题，对读者理解网页内容方面毫无用处。

　自我引用的标题也没有什么用处。例如，“主页”这样的标题和内容毫无关系，类似的还有“反馈页”或“常用链接”等。

正确的标题：

　使用描述性更强的标题。例如，“第十六章：HTML标题”，或者“第五部分：如何使用标题”，这样的标题说明了文档的具体内容，可以吸引读者有兴趣读下去。

　设计一个能够表达一定内容和目的的标题，令读者凭这个标题就可以判断是否有必要访问这个页面。例如，“HTML <title>标签的详细信息”，这就是一个描述性的标题，类似的还有“HTML <title>标签的反馈页”等。

2.1.2　定义网页元信息

视频讲解

使用<meta>标签可以定义网页的元信息，例如，定义针对搜索引擎的描述和关键词，一般网站都必须设置这两条元信息，以方便搜索引擎检索。

　定义网页的描述信息：

    <meta name="description" content="标准网页设计专业技术资讯" />

　定义页面的关键词：

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

表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" />

类似设置还有：

    <meta name="author" content="https://www.baidu.com/" />  <!--设置网页作者-->
    <meta name="copyright" content=" https://www.baidu.com/" />  <!--设置网页版权-->
    <meta name="date" content="2019-01-12T20:50:30+00:00" />  <!--设置创建时间-->
    <meta name="robots" content="none" />                  <!--设置禁止搜索引擎检索-->

2.1.3　定义文档视口

视频讲解

在移动Web开发中，经常会遇到viewport（视口）问题，就是浏览器显示页面内容的屏幕区域。一般移动设备的浏览器默认都设置一个<meta name="viewport">标签，定义一个虚拟的布局视口，用于解决早期的页面在手机上显示的问题。

iOS、Android基本都将这个视口分辨率设置为980px，所以桌面网页基本能够在手机上呈现，只不过看上去很小，用户可以通过手动缩放网页进行阅读。这种方式用户体验很差，建议使用<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所示。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>设置文档视口</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <h1>width=device-width, initial-scale=1</h1>
    <p>width=device-width将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。</p>
    <p>initial-scale=1表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度，</p>
    </body>
    </html>

　提示：ideal viewport（理想视口）通常就是我们说的设备的屏幕分辨率。