第3章 HTML网页的整体设置

通过上一章的学习，读者已经可以制作很简单的网页。HTML网页文件是组成网站的基本单位，有完整的结构。本章从网页的整体设置入手，全面开始HTML网页技术的学习。通过本章的学习，读者将掌握HTML网页文件的头部信息设置、网页主体的基本设置。

本章将继续沿用上一章的网站设置。所有示例网页文件都在D:\web目录下创建，以便于通过URL访问每个示例网页。

3.1 HTML的头部信息设置

通过第一章关于HTML网页的基本结构学习，读者知道HTML网页分为<head></head>部分和<body></body>部分。“head”中文意思即头部，所以一般把<head></head>部分称为网页的头部信息部分。头部信息部分的内容虽然在页面中不会显示，但它能影响到网页的全局设置。

3.1.1 定义网页的标题

每个网页都有一个标题，它显示在网页窗口的标题栏，它标识了网页的主要内容。读者创建一个title.htm的网页文件，用记事本程序编辑该网页。在title.htm页面的<head>与</head>之间加入<title></title>的标签，在<title>与</title>之间输入标题内容，如代码3.1所示。

代码3.1 标题信息的设置：title.htm

        <html>
        <head>
          <title>我的第一个标题_网页标题信息设置</title>
        </head>
        <body>
        </body>
        </html>

说明：由于<body>与</body>之间没有放入内容，所以页面将显示空白。

完成代码编写后，在浏览器通过URL访问title.htm页面，即在地址栏输入“localhost/title.htm”。读者可看到如图3.1所示的网页。

说明：完整的URL应该是“http://localhost/title.htm”，为了读者方便，http协议可以省略，浏览器将自动完成http协议的拼写。

标题向浏览者提供了网页内容的信息，方便浏览者对页面的选择。读者可以在标题栏加入一些特殊符号，比如★、●等，以增加网页的个性化。

图3.1 设置了标题的网页

3.1.2 设置网页的基底网址

基底网址的实质是统一设置超级链接的属性，基底网址标签是<base/>，它有两个属性，href和_target。href用于设置基底网址的路径，_target用于设置超级链接的打开方式。

通过基底网址的添加，页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时，通过<base>标记将相对网站根目录地址附加在基底网址路径的后面，从而转化成绝对地址。读者首先创建base.htm，编写HTML代码如代码3.2所示。

代码3.2 基底网址的设置：base.htm

        <html>
        <head>
          <title>基底网址的设置</title>
          <base href=“http://www.google.com” _target=“_blank” />
        </head>
        <body>
        </body>
        </html>

通过代码3.2对基地网址的设置，base.htm页面中的任何超级链接的地址，都将在其前面被加上“http://www.google.com”，即转换为绝对地址。并且，页面中的超级链接打开方式都是打开新窗口。关于超级链接的知识在后面会详细讲述，读者注意前后知识的融合。

注意：<base />是单标签，读者只需设置其属性。

3.1.3 掌握强大的元信息标签

元信息标签是头部信息的基本标签，专业的网页代码中都对元信息标签作了详细设置。元信息标签为<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种分别是

其中，第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点整。

3.1.4 怎样和CSS以及JavaScript产生联系

在本书第2篇和第4篇，读者将会学习CSS技术和JavaScript技术，CSS负责HTML网页的样式，JavaScript负责HTML网页的动态行为。这些技术和HTML网页是融合在一起运用的，CSS和JavaScript最常用的融合方法是写入头部信息部分。

（1）加入CSS只需在头部信息加入<style type="text/css"></style>标签对。读者创建一个网页文件，命名为css_js.htm，代码编写如代码3.3所示。

代码3.3 CSS的设置方法：css_js.htm

        <html>
        <head>
          <title>CSS的设置</title>
          <style type="text/css">
            CSS具体内容
          </style>
        </head>
        <body>
        </body>
        </html>

（2）加入JavaScript只需在头部信息加入<script type=”text/javascript”></script >标签对。css_js.htm代码修改如代码3.4所示。

代码3.4 JavaScript的方法：css_js.htm

        <html>
        <head>
          <title>CSS的设置</title>
          <style type="text/css">
            CSS具体内容
          </style>
          <script type="text/javascript">
            JavaScript具体内容
          </script>
        </head>
        <body>
        </body>
        </html>

3.1.5 头部信息的其他设置

头部信息比较重要的部分介绍完了，最后笔者推荐3个常用的头部信息。

（1）页面切换特效，其中一种特效的编写格式为：

        <meta http-equiv="page-enter" content="blendtrans(duration=0.5) "/>

· http-equiv属性的值为page-enter时代表进入该页面时启用特效，http-equiv属性的值为page-exit为退出（离开）该页面时启用特效。

· content属性的值代表特效的种类，这种特效也叫动态滤镜。滤镜种类很多，比如blendtrans就是很常用的一种，效果为淡入淡出，duration的值代表效果持续的时间（单位：秒）。

另一种滤镜特效的编写：

        <meta http-equiv="Page-Enter" Content="revealTrans(duration=1, transition=1) ">

· 动态滤镜RevealTrans也可以用于页面进入与退出效果。

· duration表示滤镜特效的持续时间（单位：秒）；Transition滤镜类型。表示使用哪种特效，取值为0-23。

注意：Transition滤镜类型有24种，读者可以自行尝试。

（2）强制页面在当前窗口以独立页面显示，以防止网页被其他网站框架，编写格式为：

        <meta http-equiv="window-target" content="_top">

HTML的框架技术在后面将会详细学习，读者须留意。

（3）页面图标的设置，编写格式为：

        <link rel ="Shortcut Icon" href="/favicon.ico">

href属性的值是ico图标文件的路径，这里采用的是相对根目录路径。读者应把用于网页图标的ico文件命名为favicon.ico，并放置于网站的根目录，实际效果如图3.2所示。

图3.2 谷歌网站主页的图标

3.2 HTML主体的常用设置

上一节学习了头部信息的各种设置，本节学习主体的设置。主体即HTML结构中的<body></body>部分，这部分的内容是直接显示在页面中的。本节讲述的是<body>标签的部分属性设置，正因为body对设置可以马上显示，读者可以边学习边动手尝试。

3.2.1 设置网页的背景色

设置<body>的bgcolor属性中可网页的整体背景色，创建一个网页文件，命名为body.htm，编写代码如代码3.5所示。

代码3.5 主体背景设置：body.htm

        <html>
        <head>
          <title>主体背景设置</title>
        </head>
        <body bgcolor="#cf0000">
        </body>
        </html>

代码3.5 的页面背景色采用的#cf0000，这是一种比较亮的红色，读者可以根据需要调配适当的背景色。

3.2.2 设置网页的背景图片

除了设置<body>的背景色，通过background属性还可以设置<body>的背景图片。根据不同应用的需要，可以设置各种重复方式的图片背景。创建一个网页文件，命名为body_bg.htm，编写代码如代码3.6所示。

代码3.6 主体背景图片设置：body_bg.htm

        <html>
        <head>
          <title>主体背景图片设置</title>
        </head>
        <body background="test.jpg">
        </body>
        </html>

代码3.5的页面背景图片路径采用相对文档路径，test.jpg位于body_bg.htm同一级目录下，默认情况下水平方向和垂直方向重复。测试效果如图3.3所示。

图3.3 主体背景图片设置

如果要对背景图像有更多的设置，可以使用style属性创建一个网页文件，命名为body_bg2.htm，编写代码如3.7所示。

代码3.7 主体背景图片位置设置：body_bg2.htm

        <html>
        <head>
          <title>主体背景图片位置设置</title>
        </head>
        <body style="background:url(test.jpg) center bottom no-repeat;" >
        </body>
        </html>

style中文意思为风格、样式。<body>用style设置背景可以更加灵活，读者测试body_bg.htm，可以发现背景图片水平方向为页面中央，垂直方向为页面底部。测试效果如图3.4所示。

通过left（左）、right（右）、top（顶部）、bottom（底部）、center（中央）分别组合，可以灵活设置页面背景图片的位置。

注意：设置背景位置要加上no-repeat，以代表不产生任何重复。

如果读者希望背景图片单向重复，那用style属性的background更加方便，修改body_bg2.htm如代码3.8所示。

图3.4 主体背景图片位置设置

代码3.8 主体背景图片重复设置：body_bg2.htm

        <html>
        <head>
          <title>主体背景图片重复设置</title>
        </head>
        <body style="background:url(test.jpg) repeat-x;" >
        </body>
        </html>

测试效果如图3.5所示。

图3.5 主体背景图片重复设置

代码3.5的页面背景图片在水平方向发生了重复，可见repeat-x用于设置水平方向的图片重复。以此类推，repeat-y将使背景图片在垂直方向重复。

在某些网站应用中，背景图片为浮动位置，即不随滚动条位置变化而变化。读者可以在<body>中使用bgproperties属性。接下来笔者修改body_bg.htm如代码3.9所示。

代码3.9 主体背景图片浮动设置：body_bg.htm

        <html>
        <head>
          <title>主体背景图片浮动设置</title>
        </head>
        <body background="test.jpg" bgproperties="fixed">
        <p style="border:2px dashed #333;height:1500px;width:400px">主体背景图片浮动设
    置</p>
        </body>
        </html>

测试效果如图3.6所示。

读者可以拉动滚动条，图片不会发生相对位置变化。

注意：标签之间的多个属性用空格分隔。

图3.6 主体背景图片浮动设置

3.3 页面的整体边距

读者在浏览上一章制作的网页时，会发现文字并没有紧挨页面的顶部和左边。这是因为HTML页面默认情况下，内容与页面边界有一定的边距，所以在制作网页时需要将边距消除。调整页面边距即设置<body>的topmargin和leftmargin属性，即顶边距和左边距。创建一个网页文件，命名为margin.htm，编写代码如代码3.10所示。

代码3.10 页面的整体边距设置：margin.htm

        <html>
        <head>
          <title>页面的整体边距设置</title>
        </head>
        <body leftmargin=0 topmargin=0 >
        页面的整体边距设置，现在顶边距和左边距已经消除了。
        </body>
        </html>

测试效果如图3.7所示。

图3.7 页面的整体边距设置

3.4 HTML代码的注释

通过前面的学习，读者知道HTML代码由浏览器进行解析，进而呈现出丰富多彩的网页。如果有些代码或文字既不需要浏览器解析，也不需要呈现在网页上呢？这种情况通常为代码注释，即对某段代码进行解释说明，以便维护。

在HTML代码中使用<!--和-->作代码注释，创建一个网页文件，命名为tips.htm，编写代码如代码3.11所示。

代码3.11 HTML代码的注释：tips.htm

        <html>
        <head>
          <title>HTML代码的注释</title>
        </head>
        <body>
        <!--
          这是代码中的注释，无论写多少内容，浏览器都视而不见
        -->
        这才是可见的内容。
        </body>
        </html>

测试效果如图3.8所示。

图3.8 HTML代码的注释

3.5 小结

本章所学习的内容是页面的整体设置，其中，头部信息设置虽然看起来似乎并不重要，但是这些信息可影响到整个网页的全局设置。例如元信息的设置，大型的商业网站往往希望站点在搜索引擎中可以排个好位置，优秀的元信息设置可以在此发挥重要的作用。而页面主体内容的背景设置也比较重要，在学习CSS之前，只能通过这部分设置整个页面的背景属性。最后本章学习的注释，可能很多初学者并不重视，殊不知在大型网站中页面如果没有注释，其维护难度将大大增加。

上一章目录下一章