下载掌阅APP，畅读海量书库
立即打开
通过第一章关于HTML网页的基本结构学习，可以知道HTML网页分为<head></head>部分和<body></body>部分。“head”中文意思即头部，所以一般把<head></head>部分称为网页的头部信息部分。头部信息部分的内容虽然不会在页面中显示，但它能影响到网页的全局设置。
每个网页都有一个标题，它显示在网页窗口的标题栏，它标识了网页的主要内容。创建一个title.htm的网页文件，用记事本程序编辑该网页。在title.htm页面的<head>与</head>之间加入<title></title>的标签，在<title>与</title>之间输入标题内容，如代码3.1所示。
代码3.1 标题信息的设置：title.htm
说明 ：由于<body>与</body>之间没有放入内容，所以页面将显示空白。
完成代码编写后，在浏览器通过URL访问title.htm页面，即在地址栏输入“localhost/title.htm”。可看到如图3.1所示的网页。
说明 ：完整的URL应该是“http://localhost/title.htm”，为了读者方便，HTTP协议可以省略，浏览器将自动完成HTTP协议的拼写。
标题向浏览者提供了网页的内容信息，方便浏览者对页面的选择。读者可以在标题栏加入一些特殊符号，如★、●等，以增加网页的个性化。
图3.1 设置了标题的网页
基底网址的实质是统一设置超级链接的属性，基底网址标签是<base/>，它有两个属性，href和_target。href用于设置基底网址的路径，_target用于设置超级链接的打开方式。
通过基底网址的添加，页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时，通过<base>标记将相对网站根目录地址附加在基底网址路径的后面，从而转化成绝对地址。读者首先创建base.htm，编写HTML代码如代码3.2所示。
代码3.2 基底网址的设置：base.htm
通过代码3.2对基地网址的设置，base.htm页面中的任何超级链接的地址，都将在其前面加上“http://www.google.com”，即转换为绝对地址。并且，页面中的超级链接打开方式都是打开新窗口。关于超级链接的知识在后面会详细讲述，读者应注意前后知识的融合。
注意 ：<base/>是单标签，读者只需设置其属性即可。
元信息标签是头部信息的基本标签，专业的网页代码中都对元信息标签作了详细设置。元信息标签为<meta/>，也是单标签。
meta元素提供的信息对于浏览用户是不可见的，一般用于定义页面信息的名称、关键字、作者等。在HTML页面中，一个meta标签内就是一个meta内容，而在一个HTML头页面中可以有多个meta元素。
meta标签属性分两种：页面描述信息（name）和http标题信息（http-equiv）。
首先，来认识name属性，name属性主要用于描述网页内容。正确地设置name属性，以便搜索引擎（如google、baidu）的搜索机器人查找、分类，搜索引擎一般都会自动查找meta值来给网页分类。name的取值如下。
（1）keywords。中文意思“关键字”，用于说明网页所包含的关键字等信息，从而提高被搜索引擎搜索到的概率。编写格式为<meta name="keywords" content="关键字"/>，content属性的值为用户所设置的具体关键字。
注意 ：一般可设置多个关键字，它们之间用英文半角的逗号分开。由于很多搜索引擎限制关键字的数量，所以关键字的内容要简洁精练。
（2）description。中文意思为“描述”，用于描述网页的主要内容、主题等，合理的设置也可以提高被搜索引擎搜索到的概率。编写格式为<meta name="description"content="对页面的描述"/>，content属性的值为用户所设置的页面具体描述的内容。content属性的值可以最多容纳1024个字符，但搜索引擎一般只显示大约前175个字符，所以描述内容还是短小精悍为好。
（3）author。中文意思为“作者”，用于设置网站作者的名称，在比较专业的网站页面上经常用到。编写格式为<meta name="author" content="作者名称"/>，content属性的值为用户所设置的作者名称。
（4）generator。中文意思为“生成器”，用于设置网站编辑工具的名称，在比较专业的网站页面上经常用到。编写格式为<meta name="generator" content="网站编辑工具名称"/>，content属性的值为用户所设置的网站编辑工具。
说明 ：网站制作软件在创建HTML文档时，会自动添加generator的content值。
（5）robots。中文意思为“机器人”，用于限制页面搜索方式。搜索引擎的“搜索机器人”沿着网页上的链接（如http和src链接），不断地检索资料建立自己的数据库。通过这种meta标签可以限制部分内容不被搜索引擎检索到，从而降低部分信息公开性。编写格式为<meta name="robots"content="指令组合"/>。content属性的值包含4个命令，分别是index、noindex、follow、nofollow。指令组合一共有4种如表3-1的示。
表3-1 content属性值的4种指令组合
其中，第1种组合也可写成all，第4种组合也可写成none。
说明 ：name属性主要用于对搜索引擎的优化，读者必须重点掌握。
说明 ：只有部分搜索引擎支持robots meta标签，如著名搜索引擎google就完全支持，而且google还增加了一个指令"archive"，可以限制google是否保留网页快照。例如：<META NAME="googlebot"CONTENT="index，follow，noarchive">，archive代表保留网页快照，noarchive代表不保留网页快照。
读者再来看看http标题信息属性，即http-equiv属性，其取值如下。
（1）content-type，中文意思为“内容类别”。用于设置页面的类别和语言字符集。编写格式为<meta http-equiv="content-type"content="text/html；charset=gb2312"/>，content属性的值代表页面采用HTML代码输出，字符集为gb2312（简体中文）。这也是制作网页最常用的值，不过在日益国际化的网站开发领域，为了字符集的统一，建议charset值采用utf-8。
说明 ：字符集是一个比较复杂的知识领域，读者初学时charset设置为gb2312就可以了。
（2）refresh，中文意思为“刷新”。用于设置多长时间内网页自己刷新一次，或者过一段时间自动跳转到其他页面。编写格式为<meta http-equiv="refresh"content="30"/>，content属性的值代表页面自动刷新的间隔时间为5秒。
另外一种编写格式为<meta http-equiv="refresh" content="30；url=www.google.com"/>，content属性的值代表30秒后页面跳转到www.google.com网站。
（3）expires，中文意思为“到期”。用于设置页面到期时间，一旦网页过期，必须到服务器上重新调用网页。编写格式为<meta http-equiv="expires" content="Wed，10 Mar 2007 12：00：00 GMT"/>，content属性的值代表网页过期的时间，必须使用GMT的时间格式。
另外一种编写格式为<meta http-equiv="Expires"Content="0"/>，content属性的值为数字时代表多少时间后过期。
（4）cache-control，中文意思为“缓存控制”。用于禁止在缓存中调用网页。编写格式为<meta http-equiv="cache-control"content="no-cache"/>，content属性的值“no-cache”代表不缓存。
为了加快浏览速度，一般都会在浏览者的硬盘上保存一个网页的文件作为临时版本。用户再次打开同一个网页时，浏览器会直接调用硬盘上的这个版本的网页，而不是服务器上的版本。如果想让用户每次都看到最新版本，则需要使用这种meta标签禁止浏览器调用缓存中的版本。设定了禁止缓存调用后，那么用户一旦离开网页，就无法从缓存中再调用该页面了，而要到服务器请求该页面。
（5）set-cookie，中文意思为“设置cookie”。用于设置本页面cookie多久过期。编写格式为<meta http-equiv="set-cookie"content="Wed，10 Mar 2007 12：00：00 GMT"/>，content属性的值代表到这个时间时，cookie将被删除，时间采用GMT的时间格式。
cookie中文译为“小甜饼”。在计算机领域，cookie就是服务器暂时存放在你的电脑里的资料，以文本格式的文件保存，以便让服务器用来辨认你的计算机。当浏览网站的时候，Web服务器会先送一部分资料到浏览者的硬盘上，这就是cookie。当你下次再访问这个网站时，Web服务器会先看看有没有它上次留下的cookie资料，如果有的话，就会依据cookie里的内容来判断使用者。cookie广泛应用于网站的登录注册系统。同时，浏览者的cookie也常被网站运营者收集，便于分析浏览者的浏览习惯。
说明 ：GMT时间格式即“格林尼治时间”，格林尼治是地球的零时区时间。如Wed，16 July 2008 11：00：00 GMT代表2008年7月16日上午11点整。
在本书第两篇和第四篇，读者将会学习CSS技术和JavaScript技术，CSS负责HTML网页的样式，JavaScript负责HTML网页的动态行为。这些技术和HTML网页是融合在一起运用的，CSS和JavaScript最常用的融合方法是写入头部信息部分。
（1）加入CSS只需在头部信息加入<style epub:type="text/css"></style>标签对。创建一个网页文件，命名为css_js.htm，代码编写如代码3.3所示。
代码3.3 CSS的设置方法：css_js.htm
（2）加入JavaScript只需在头部信息加入<script epub:type="text/javascript"></script >标签对。css_js.htm代码修改如代码3.4所示。
代码3.4 JavaScript的方法：css_js.htm
头部信息比较重要的部分介绍完了，最后笔者推荐3个常用的头部信息。
（1）页面切换特效，其中一种特效的编写格式如下。
●http-equiv属性的值为page-enter时代表进入该页面时启用特效，http-equiv属性的值为page-exit时代表退出（离开）该页面时启用特效。
●content属性的值代表特效的种类，这种特效也叫动态滤镜。滤镜种类很多，比如blendtrans就是很常用的一种，效果为淡入淡出，duration的值代表效果持续的时间（单位：秒）。
另一种滤镜特效的编写格式如下。
●动态滤镜RevealTrans也可以用于页面进入与退出效果。
●duration表示滤镜特效的持续时间（单位：秒）；Transition是滤镜类型，表示使用哪种特效，取值为0～23。
注意 ：Transition滤镜类型有24种，读者可以自行尝试。
（2）强制页面在当前窗口以独立页面显示，以防止网页被其他网站框架，编写格式如下。
HTML的框架技术在后面将会详细学习，读者须留意。
（3）页面图标的设置，编写格式如下。
href属性的值是ico图标文件的路径，这里采用的是相对根目录路径。读者应把用于网页图标的ico文件命名为favicon.ico，并放置于网站的根目录，实际效果如图3.2所示。
图3.2 谷歌网站主页的图标