第2章 页面基本元素
学前必读：
本章主要讲解HTML页面基本元素，这些元素是构成页面的基础，它们各有自己相应的作用，掌握这些页面的基本元素是定义HTML页面的关键，这些设置决定了页面的文档类型和现实效果，同时也直接影响页面中各种元素能否正常显示。
本章重点：
● 页面头部元素<head>
● 页面标题元素<title>
● 元信息元素<meta>
● 页面主体元素<body>
2.1 页面头部元素<head>
在HTML语言的头部元素中，一般需要包括标题、基础信息和元信息等。HTML的头部元素是以<head>为开始标记，以</head>为结束标记的。
基本语法：
<head>…</head>
语法介绍：
<head>元素的作用范围是整篇文档。<head>元素中可以有<meta>元信息定义、文档样式表定义和脚本等信息，定义在HTML语言头部中的内容往往不会在网页上直接显示。
案例代码：
<!Doctpye html Public "-//w3c//dtd xhtml 1.0 Transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
文档头部信息
</head>
<body>
文档正文内容
</body>
</html>
2.2 页面标题元素<title>
HTML页面的标题一般是用来说明页面的用途，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在<head>与</head>之间。标题标记以<title>开始，以</title>结束。
基本语法：
<head>
<title>…</title>
</head>
语法介绍：
在标记中间的“…”就是标题的内容，它可以帮助用户更好地识别页面。页面的标题只有一个，它位于HTML文档的头部，即<head>和</head>之间。
案例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面标题元素</title>
</head>
<body>
</body>
</html>
代码分析：
在代码中加粗部分的标记为标题标记，在浏览器的预览效果中可以看到标题名称“页面标题元素”，如图2.1所示。
图2.1 页面标题
提示：设置HTML文档的标题时应尽可能准确地描述文档内容，表达清晰。
2.3 元信息元素<meta>
meta元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容。在一个HTML页面中可以有多个meta元素。meta元素的属性有name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找、分类。
2.3.1 元信息元素名称属性name、content
name属性提供了由<meta>标签定义的名称/值对中的名称，HTML标准没有指定任何预先定义的<meta>名称，通常情况下，可以自由使用对自己和源文档的阅读者来说都有意义的名称。
content属性提供了名称/值对中的值，该值可以是任何有效的字符串（如果值中包含空格，就要用引号括起来）。Content属性始终要和name或http-equiv属性一起使用。
基本语法：
<meta name="generator" content="编辑软件的名称">
语法介绍：
在该语法中，name为属性名称，设置为generator，也就是设置编辑工具，在content中定义具体的编辑工具名称。
案例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="FrontPage">
<title>元信息元素名称属性</title>
</head>
<body>
</body>
</html>
代码分析：
在代码中，加粗部分的标记定义编辑工具为FrontPage。
2.3.2 元信息元素的附加属性http-equiv
http-equiv类似于http的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。content-type设定页面使用的字符集，用以说明网页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示页面内容。
基本语法：
<meta http-equiv="content-type" content="text/html; charset=字符集类型" />
语法介绍：
在该语法中，http-equiv用于传送HTTP通信协议的标头，而在content中才是具体的属性值。charset用于设置网页的内码语系，也就是字符集的类型，国内常用的是GB码，charset往往设置为GB2312，即简体中文。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是告诉浏览器等设备，文件为html文件，且使用了日语编码。
2.3.3 设置页面关键字
在搜索引擎中，检索信息都是通过输入关键字来实现的。关键字是整个网站登录过程中最基本也是最重要的一步，是进行网页优化的基础。关键字在浏览时是看不到的，它可以供搜索引擎使用。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。
基本语法：
<meta name="keywords" content="输入具体的关键字">
语法介绍：
在该语法中，name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义具体的关键字。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="插入关键字">
<title>插入关键字</title>
</head>
<body>
</body>
</html>
代码分析：
在代码中，加粗部分标记为插入关键字。
2.3.4 设置页面说明
设置页面说明也是为了便于搜索引擎的查找，它用来详细说明网页的内容，页面说明在网页中不显示出来。
基本语法：
<meta name="description" content="设置页面说明">
语法介绍：
在该语法中，name为属性名称，这里设置为description，也就是将元信息属性设置为页面说明，在content中定义具体的描述语言。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="设置页面说明">
<title>设置页面说明</title>
</head>
<body>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置页面的说明。
2.3.5 定义页面的跳转
使用<meta>标记可以使网页在经过一定时间后自动刷新，这可以通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。
基本语法：
<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址">
语法介绍：
refresh出现在http-equiv属性中，使用content属性表示刷新或跳转的开始时间与跳转的网址。默认情况下，跳转时间以秒为单位。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="5;url=index1.html">
<title>定义页面的跳转</title>
</head>
<body>
5秒后自动跳转
</body>
</html>
代码分析：
在代码中，加粗部分的标记是设置网页的定时跳转，这里设置为5秒后跳转到index1. html页面。在浏览器中预览可以看出，跳转前如图2.2所示，跳转后如图2.3所示。
图2.2 跳转前
图2.3 跳转后
提示：使用http-equiv属性中的refresh不仅能够实现页面之间的跳转，还可以完成页面自身的自动刷新。
2.3.6 定义页面的作者信息
在源代码中可以设置网页制作者的姓名以及个人信息，还可以在源代码中保留作者希望保留的信息。
基本语法：
<meta name="author" content="作者的姓名">
语法介绍：
在该语法中，name为属性名称，设置为author，也就是设置作者信息，在content中定义具体的信息。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="永浩">
<title>定义作者信息</title>
</head>
<body>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置作者的信息。
2.3.7 定义页面的版权信息
通过name="copyright"设置可以说明网页的版权。
基本语法：
<meta name="copyright" content="value">
语法介绍：
copyright为版权，content中定义版权信息。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="copyright" content="化勇工作室">
<title>定义页面的版权信息</title>
</head>
<body>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为定义页面的版权信息。
2.4 页面主体元素<body>
网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。
2.4.1 主体元素的背景颜色属性bgcolor
背景颜色的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于背景图片来说，它在显示速度上有绝对的优势。在网页文件中，一般通过<body>标签的bgcolor属性来指定页面的颜色背景。
基本语法：
<body bgcolor="背景颜色">
语法介绍：
该语法中的body就是页面的主体标记，bgcolor的值可以是一个已命名的颜色，也可以是一个十六进制的颜色值。在HTML 4.01中，不赞成使用body元素的bgcolor属性。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主体元素的背景属性</title>
</head>
<body bgcolor="#C21647" >
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是为页面设置背景颜色为红色，在浏览器中预览效果，如图2.4所示。
颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等，如图2.5 所示的网页使用了大面积的绿色背景，与网页整体内容搭配。
图2.4 设置页面的背景颜色
图2.5 绿色背景网页
2.4.2 主体元素的背景图片属性background
使用恰当的图片作为背景，能够使页面看上去更加生动美观。使用background属性可以将图片设置为背景，还可以设置背景图片的平铺方式、显示方式等。
基本语法：
<body background="图片的地址">
语法介绍：
图片的地址可以是相对地址，也可以是绝对地址。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面背景图片</title>
</head>
<body background="images/company_ditu.JPG">
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记为设置的网页背景图片company_ditu.JPG，在浏览器中预览可以看到背景图像，如图2.6所示。
网页中的背景设计是相当重要的，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。如图2.7所示的网页使用了背景图像。
2.4.3 主体元素的文本属性text
text属性可以设置HTML文档的文本颜色。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有的文字起作用。
图2.6 页面的背景图像
图2.7 使用背景图像的网页效果
基本语法：
<body text="文字的颜色">
语法介绍：
颜色值可以为颜色名称，如 "red"；或为十六进制值的字体颜色，如"#ff0000"；还可以为RGB代码的字体颜色，如"RGB(255,0,0)"。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主体元素的文本属性</title>
</head>
<body text="#ff0cc0">
<p>人生亦生活，生活亦人生，生活中的爱情，爱情中的生活，二者相互共存，彼此易同化，让人难以捉摸，我们总有一种感觉，生活中缺少了什么，只为了一个残忍而偏激的解释，就说少了一份真感情，而感情又是个抽象的东西，比如说，一个男孩对一个女孩说 “我爱你 ”，然后他们在一起，就童话而言，这是个美丽的结局，但不幸的是，生活并不是童话。</p>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记为设置的文字颜色为粉红色，在浏览器中预览可以看到文档中文字的颜色，如图2.8所示。
在网页中需要根据网页整体色彩的搭配来设置文字的颜色，如图2.9 所示的文字和整个网页的颜色相协调。
2.4.4 未访问过的链接属性link
超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接的形式关联在一起的，正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字颜色则变为暗红色。可以通过link参数修改链接文字的颜色。
图2.8 设置文字的颜色
图2.9 文字和整个网页的颜色相协调
基本语法：
<body link="颜色">
语法介绍：
这一属性的设置与前面几个设置颜色的参数类似。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>未访问过的链接属性</title>
<style type="text/css">
</style>
</head>
<body link="#FF6600">
<a href="#"> 链接的文字</a>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是为链接文字设置颜色为橙黄色，如图2.10所示。
图2.10 设置链接文字的颜色
2.4.5 激活的链接属性alink
使用alink可以设置正在访问的文字颜色。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>激活的链接属性</title>
</head>
<body link="#FF6600"alink="#31693A">
<a href="#">链接的文字</a>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是为单击链接时设置链接文字的显示颜色，在浏览器中预览效果，可以看到单击链接的文字时，文字已经改变了颜色，如图2.11所示。
图2.11 单击链接文字时的颜色
2.4.6 已访问过的链接属性vlink
使用vlink可以设置已访问过的超链接颜色。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>已访问过的链接属性</title>
</head>
<body link="#FF6600"alink="#31693A" vlink="#FF000C">
<a href="#">链接的文字</a>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是为链接的文字设置访问后的颜色，在浏览器中预览效果，可以看到单击链接后文字的颜色已经发生改变，如图2.12所示。
图2.12 已访问过的链接文字颜色
2.4.7 IE浏览器中的左边界属性leftmargin
在HTML页面中，可以定义页面的左边距，即内容和浏览器左侧边框之间的距离，设定合适的左边距可以防止网页外观过于拥挤。
基本语法：
<body leftmargin=左边距的值>
语法介绍：
在默认情况下，边距的值以像素为单位。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE浏览器中的左边界属性</title>
</head>
<body leftmargin="50">
设置页面的左边距为50像素
</body>
</html>
代码分析：
在代码中，加粗部分的标记是设置左边距为50像素，在浏览器中预览效果，可以看出定义的边距效果，如图2.13所示。
图2.13 设置页面的左边距效果
2.4.8 IE浏览器中的上边界属性topmargin
在HTML页面中，可以定义页面的左边距，即内容和浏览器上侧边框之间的距离，设定合适的上边距可以防止网页外观过于拥挤。
基本语法：
<body topmargin=上边距的值>
语法介绍：
在默认情况下，边距的值以像素为单位。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE浏览器中的上边界属性</title>
</head>
<body topmargin="50" >
设置页面的上边距为50像素
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是设置上边距为50像素，在浏览器中预览效果，可以看出定义的边距效果，如图2.14所示。
图2.14 设置的边距效果
提示：一般网站的页面左边距和上边距都设置为0，这样看起来页面不会有太多的空白。
2.4.9 主体元素的背景图片滚动属性bgproperties
在默认情况下，如果页面的内容较长，当拖动浏览器滚动条的时候，背景会随着文字内容的滚动而滚动，所谓背景图像固定，是指不论浏览器的滚动条如何拖动，背景都永远固定在相同的位置，并不会随着文字滚动而滚动。
基本语法：
<body background="图像的地址" bgproperties=fixed>
语法介绍：
Internet Explorer和Netscape Navigator6都支持 <body>标签的bgproperties属性扩展。但它只有与background属性扩展一起使用时才有效。bgproperties属性只有一个值fixed。它把背景图像冻结在浏览窗口，这样就不会随着其他窗口的内容而滚动了。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主体元素的背景图片滚动属性</title>
</head>
<body background="images/company_ditu.jpg"bgproperties=fixed>
<p> </p>
<p> 每个梦想都值得灌溉</p>
<p> 眼泪变成雨水就能落下来</p>
<p> 每个孩子都应该被宠爱</p>
<p> 他们是我们的未来</p>
<p> 这是最好的未来</p>
<p> 我们用爱铸造完美现在</p>
<p> 千万溪流汇聚成大海 </p>
<p> 每朵浪花一样澎湃</p>
<p> 这是最好的未来</p>
<p> 不分你我彼此相亲相爱</p>
<p> 千山万水证明这关怀</p>
<p> 幸福永远与爱同在</p>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是设置背景的属性为固定，文字是为了使页面的长度增加，出现滚动条，在浏览器中预览效果，如图2.16所示是没有拖动滚动条之前的页面效果，当拖动了浏览器的滚动条之后，可以从如图2.17所示的效果中看到，背景图像并不会跟着一起滚动，而是固定在了原有的位置上，这样，背景固定的效果就实现了。
图2.16 没有拖动滚动条之前的页面效果
图2.17 背景固定的效果
2.5 创建样式元素<style>
<style> 标签用于为HTML文档定义样式信息。在style中，可以规定在浏览器中如何呈现HTML文档。type属性是必需的，定义style元素的内容。
基本语法：
<style type="text/css">
</style>
语法介绍：
style元素只能在HTML文档的head内使用。Microsoft Internet Explorer 4.0及以后版本允许多个样式块。
此元素在Internet Explorer 3.0及以上版本的HTML中可用，在Internet Explorer 4.0及以上版本的脚本中可用。
案例代码：
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>
</html>
代码分析：
这段代码首先在head内使用style定义了h1和h3两个样式，然后在body正文内应用这两个样式，浏览的效果如图2.18所示。
图2.18 style样式的使用
2.6 脚本元素<script>
<script>标签用于定义客户端脚本，如JavaScript。script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件。必需的type属性规定脚本的MIME类型。JavaScript的常见应用是图像操作、表单验证以及动态内容更新。
基本语法：
<script type="text/javascript">
……
</script>
语法介绍：
必选的属性
可选的属性
案例代码：
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello kete!</h1>")
</script>
</body>
</html>
代码分析：
这段代码使用script定义了一段JavaScript代码，使用document.write输出标题文字“Hello kete!”，在浏览器中浏览，效果如图2.19所示。
图2.19 script代码
2.7 课后习题
填空题
（1）使用<body>标记的______属性可以为整个网页定义背景颜色。使用______属性可以将图片设置为背景，还可以设置背景图片的平铺方式、显示方式等。
（2）在HTML语言的头部元素中，一般需要包括标题、基础信息和元信息等。HTML的头部元素是以______为开始标记，以______为结束标记。
（3）meta元素的属性有______和______，其中______属性主要用于描述网页，以便于搜索引擎查找、分类。
（4）使用______标记可以使网页在经过一定时间后自动刷新，这可以通过将______属性值设置为refresh来实现。______属性值可以设置为更新时间。