- HTML5从入门到精通（第3版）
- 明日科技
- 6024字
- 2025-02-15 16:23:31
第2章 HTML文件基本标记
（
视频讲解：43分钟）
本章介绍HTML的各种基本标记，这些都是一个完整的网页必不可少的。通过它们可以了解网页的基本结构及其工作原理。
通过阅读本章，您可以：
掌握HTML头部标记
掌握标题标记<title>
掌握基底网址标记<base>
掌握元信息标记<meta>
掌握页面的主体标记
熟练各种标记的应用
2.1 HTML头部标记
视频讲解
在HTML语言的头元素中，一般需要包括标题、基底信息、元信息等。HTML的头元素是以<head>为开始标记，以</head>为结束标记的。一般情况下，CSS和JavaScript都定义在头元素中的，而定义在HTML语言头部的内容往往不会在网页上直接显示。它用于包含当前文档的相关信息。
常用的头部标记内容如表2.1所示。
表2.1 头部标记
<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是，其间的元素有特殊重要的意义。下面就来分别介绍这些标记的作用。
2.2 标题标记<title>
HTML文件的标题显示在浏览器的标题栏，用以说明文件的用途。每个HTML文档都应该有标题，在HTML文档中，标题文字位于<title>和</title>标记之间。<title>和</title>标记位于HTML文档的头部，即位于<head>和</head>标记之间。
语法
语法解释
标记内部就是标题的内容
实例代码
上面的代码中的粗体显示的就是页面的标题。保存页面后在IE中打开，可以看到浏览器的标题栏中显示了刚才设置的标题“简单的HTML文件”，效果如图2.1所示。
图2.1 HTML页面的标题
2.3 元信息标记<meta>
视频讲解
meta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容，而在一个HTML头页面中可以有多个meta元素。meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎机器人查找、分类。下面根据功能的不同分别介绍元信息标记的使用方法。
2.3.1 设置页面关键字
设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，它可以提高被搜索到的几率，一般可设置不止一个关键字，之间用逗号隔开。但是由于很多搜索引擎在检索时会限制关键字数量，因此在设置关键字时不要过多，应“一击即中”。
语法
语法解释
在该语法中，name为属性名称，这里是keyname，也就是设置网页的关键字属性，而在content中则定义了具体的关键字的内容。
实例代码
在该实例中设定了“html”“元信息”“关键字”这3个词语作为该页面的关键字。
2.3.2 设置页面描述
设置页面描述也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。
语法
语法解释
在该语法中，name为属性名称，这里设置为description，也就是将元信息属性设置为页面描述，在content中定义具体的描述语言。
实例代码
在该实例中，设置了“关于HTML使用的网站”为网页的描述。
2.3.3 设置编辑工具
现在有很多编辑软件都可以制作网页，在源代码的头页面中可以设置网页编辑工具的名称。与其他meta元素相同，编辑工具也只是在页面的源代码中可以看到，而不会显示在浏览器中。
语法
语法解释
在该语法中，name为属性名，设置为generator，也就是设置编辑工具，在content中定义具体的编辑器名称。
实例代码
在这一实例中，以Adobe Dreamweaver CS5.5作为网页的编辑工具。
2.3.4 设定作者信息
在页面的源代码中，可以显示页面制作者的姓名及个人信息。这可以在源代码中保留作者希望保留的信息。
语法
语法解释
在该语法中，name为属性名，设置为author，也就是设置作者信息，在content中定义具体的信息。
实例代码
在这一实例中，将作者的姓名“李小米”添加到了网页的源代码中。
2.3.5 限制搜索方式
网页可以通过在meta中的设置来限制搜索引擎对页面的搜索方式。
语法
语法解释
在该语法中，搜索方式的值和其所对应的含义如表2.2所示。
表2.2 content值与其对应的含义
实例代码
2.3.6 设置网页文字及语言
在网页中还可以通过语句来设定语言的编码方式。这样，浏览器就可以正确地选择语言，而不需要手动选取。
语法
语法解释
在该语法中，http-equiv用于传送HTTP通信协议的标头，也就是设定标头属性的名称，而在content中才设具体的属性值。其中charset设置了网页的内码语系，也就是字符集的类型，charset往往设置为utf-8，此外还有BIG5、GB2312、shift-Jis、Euc、Koi8等字符集。如果采用第二种方法，则简体中文的设置为：
当然，上述为HTML4版本中设置网页编码的方式，而在HTML5中，设置网页编码格式更加简单化，直接在<meta>标签中通过charset属性中设置编码格式即可，其语法如下：
关于HTML5与HTML4的区别，在后面的章节中会有具体介绍，此处不再赘述。本书中所有实例将使用HTML5中的方式设置网页编码方式。
2.3.7 设置网页的定时跳转
在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动转到其他页面中，这就是网页的跳转。使用HTTP代码就可以很轻松地实现这一功能。
语法
语法解释
在该语法中，refresh表示网页的刷新，而在content中设定刷新的时间和刷新后的地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间是以秒为单位的。
实例代码
运行程序，效果如图2.2所示。在3秒之后，网页自动跳转到了明日图书网站，如图2.3所示。
图2.2 运行自动跳转的页面
图2.3 跳转后的页面
2.3.8 设定有效期限
在某些网站上会设置网页的到期时间，一旦过期则必须到服务器上重新调用。
语法
语法解释
在该语法中，到期的时间必须是GMT时间格式，即星期，日 月 年 时 分 秒，这些时间都使用英文和数字进行设定。
实例代码
在实例中设置了网页的到期时间为2011年9月14日16:20。
2.3.9 禁止从缓存中调用
使用网页缓存可以加快浏览器网页的速度，因为缓存将曾经浏览过的页面暂存在电脑中，当用户下次打开同一个网页内容时，即可快速浏览该网页，省去读取同一网页的时间。但是如果网页的内容经常频繁地更新，网页制作者希望用户随时都能查看到最新的网页内容，则可以通过meta语句禁用页面缓存。
语法
语法解释
在该语法中，cache-control和pragma都可以用来设定缓存的属性，而在content中则是真正禁止调用缓存的语句。
实例代码
2.3.10 删除过期的cookie
如果网页过期，则删除存盘的cookie。
语法
说明
在该语法中，到期的时间同样是GMT时间格式。
实例代码
在实例中，设置了网页的到期时间为2011年9月14日16:20，也就是这个时候删除存盘的cookie。
2.3.11 强制打开新窗口
强制网页在当前窗口中以独立的页面显示，可以防止自己的网页被别人当作一个frame页调用。
语法
语法解释
在该语法中，windows-target表示新网页的打开方式，而content中设置_top则代表打开的是一个独立页面。
实例代码
2.3.12 设定建立网站的日期
通过设置可以设定网站建立的日期。
语法
语法解释
在该语法中，build表示要设定网站建立的日期，在content中定义网站建立的具体时间。
实例代码
在实例中，设置了网页的建立时间为2008年8月8日。
2.3.13 设定网页版权信息
通过设置可以说明网页的版权信息。
语法
语法解释
在该语法中，copyright表示要设定网页的版权信息，在content中定义网页版权的具体信息。
实例代码
在实例中，设置了网页的版权信息，网页版权为明日科技。
2.3.14 设定联系人的邮箱
通过设置可以设定联系人的邮箱。
语法
语法解释
在该语法中，reply-to表示要设定网站联系人的邮箱，在content中定义网站联系人的具体的邮箱地址。
实例代码
在实例中，设置了网站的联系人邮箱地址为mingrisoft@mingrisoft.com。
2.4 基底网址标记<base>
URL路径是一种互联网地址的表示法，在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口（Port）号以及服务器（Server）里页面的完整路径和页面名称等信息。在HTML中，URL路径分为两种形式：绝对路径和相对路径。绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘上的目录结构；相对路径是相对于当前HTML文档所在目录或站点根目录的路径。
HTML页面通过基底网址把当前HTML页面中所有的相对URL转换成绝对URL。一般情况下，通过基底网址标记<base>设置HTML页面的绝对路径，那么在页面中的链接地址只需设置成相对地址即可，当浏览器浏览页面时，会通过<base>标记将相对地址附在基底网址的后面，从而转换成绝对地址。
例如，在HTML页面的头部定义基底网址如下。
在页面主体中设置的某一个相对地址，如下：
当使用浏览器浏览时，这个链接地址就变成如下的绝对地址：
http://www.mingribook.com/html/book.html
因此，在HTML页面中设置基底标记时不应该多于一个，而且要将其放置在头部以及任何包含URL地址的语句之前。
语法
语法解释
在该语法中，“链接地址”就是要设置的页面的基底地址，而“新窗口的打开方式”可以设置为不同的效果，其属性值及含义如表2.3所示。
表2.3 链接窗口的打开方式
实例代码
运行该程序，当鼠标移动到链接文字上面时，可以看到在IE的状态栏中显示出其完整的链接地址，它是由代码中设置的基底地址加上程序中的相对地址组成的，如图2.4所示。
图2.4 设置基底地址
2.5 页面的主体标记<body>
视频讲解
网页的主体部分以<body>标记标志它的开始，以</body>标志它的结束。在网页的主体标记中有很多的属性设置如表2.4所示。
表2.4 <body>元素的属性
下面就来分别介绍这些属性的应用。
2.5.1 设置文字颜色——text
<body>元素的text属性可以改变整个页面默认文字的颜色。在没有对文字进行单独定义颜色时，这个属性将对页面中所有的文字产生作用。
语法
语法解释
在该语法中，text的属性值与设置页面背景色相同，也就是说该属性设置也和在页面的主体标记放置在一起。
实例代码
运行这段代码，实现的效果如图2.5所示。
图2.5 设置页面文字颜色为蓝色
2.5.2 背景颜色属性——bgcolor
<body>元素的bgcolor属性用来设定整个页面的背景颜色。与文字颜色相似，也是使用颜色名称或者十六进制值来表现颜色效果。
语法
语法解释
该语法中的body就是页面的主体标记，也就是说设置页面的颜色要和页面的主体标记放置在一起。
实例代码
运行这段代码，可以看到打开的页面背景色为#0000FF蓝色，文字的颜色为#FFFFFF白色，效果如图2.6所示。
图2.6 设置页面的背景颜色为蓝色
2.5.3 背景图像属性——background
页面中可以使用jpg或gif图片来表现。这些图片可以作为页面的背景图，通过<body>语句中background属性来实现。它与向网页中插入图片不同，放在网页的最底层，文字和图片等都位于它的上面。文字、插入的图片等会覆盖背景图片。在默认情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。
语法
语法解释
文件的链接地址可以是相对地址，也就是本机上图片文件的存储位置，也可以设置为网上的图片资料，如http://www.mingribook.com/book.jpg。在默认情况下，用户可以省略bgproperties属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面，如果将bgproperties属性设置为fixed，那么当滚动页面时，背景图像也会跟着移动，这相对浏览者来说，就是总停留在相同的位置上。
【例2.1】下面以实例说明背景图片的设置与显示效果。
（1）设置一个图片文件作为网页的背景，在默认情况下不设置bgproperties属性，此时图片将在水平和垂直方向平铺图像，如图2.7所示。（实例位置：资源包\TM\sl\2\1）
实例代码
运行这段代码，可以看到如图2.7所示的效果，图像在水平和垂直方向平铺。
图2.7 平铺图像作为背景
（2）如果希望图片不重复显示，一般情况下需要借助CSS样式，这里简单介绍一下，在后面的章节中将详细介绍CSS的相关内容。
对于网页背景的样式设置，一般在头部标记中添加style标记，代码如下。
在这段代码中，background-repeat的值设置为no-repeat，也就是不重复，运行效果如图2.8所示。
图2.8 背景图像单独显示
如果在这段代码中，将background-repeat的值设置为repeat-x，则背景图片值在水平方向平铺，效果如图2.9所示。相反，如果设置为repeat-y，则只在垂直方向平铺。
图2.9 背景图像水平平铺效果
（3）除了设置背景是否重复之外，在网页中还可以设置背景图片是否随拖动条的拖动而变化。这一属性是通过bgproperties参数来设定的，将bgproperties的值设置为fixed，背景图片会固定在页面上静止不动。代码如下。
运行这段代码后的效果如图2.10所示。当拖动滚动条时，会发现只有文字在动，而背景却是静止不动的，如图2.11所示。
图2.10 运行代码的效果
图2.11 拖动滚动条的效果
2.5.4 设置链接文字属性——link
在网页创建中，除了文字、图片，超链接也是最常用的一种元素。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色；访问过的文字则变为暗红色。用户在创作网页时，可以通过link参数修改链接文字的颜色。
语法
语法解释
这一属性的设置与前面几个设置颜色的参数类似，都是与body标签放置在一起，表明它对网页中所有未单独设置的元素起作用。
【例2.2】下面通过实例设置未访问的链接文字的颜色。（实例位置：资源包\TM\sl\2\2）
代码如下。
运行这段代码，可以看到链接文字的颜色已经不是默认的蓝色，而是设置成了红色，如图2.12所示。
图2.12 设置链接文字的颜色
在上面的代码中，添加正在访问的文字颜色设置。这一属性需要用到alink参数，添加后的代码如下。
运行这段代码之后，单击链接文字“正在访问的链接”，会发现按下鼠标时，文字颜色变成了绿色，如图2.13所示。
图2.13 设置正在访问的文字颜色
在上面的代码中，继续使用vlink参数设置访问后的文字链接颜色，实现的代码如下。
运行这段代码之后，当单击“访问后的链接”文字链接后，于此同时也就完成了页面的跳转（这里设置的是跳转回本页），这时会看到访问过得链接文字颜色变成了灰色，如图2.14所示。
图2.14 设置访问后的文字链接颜色
2.5.5 设置边距——margin
在网页的制作过程中，还可以定义页面的空白，也就是内容与浏览器边框之间的距离。其中包括上边框和左边框，设定合适的边距可以防止网页外观过于拥挤。
语法
语法解释
在默认情况下，边距的值是以像素为单位的。
实例代码
运行此段代码，可以看到设置边距前后的对比效果，设置边距前的效果如图2.15所示，设置自定义边距效果如图2.16所示。
图2.15 默认的页面效果
图2.16 设置边距的效果
2.6 页面的注释标记——<!-- -->
在网页中，除了以上这些基本元素外，还包含一种不显示在页面中的元素，那就是代码的注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的划分，也有助于以后对代码的检查和修改。给代码加注释，是一种很好的编程习惯。
语法
语法解释
注释文字的标记很简单，只需要在语法中“注释的文字”的位置上添加需要的内容即可。
2.7 实例演练——创建基本的HTML网页
【例2.3】本节中创建一个基本的HTML网页，在这个HTML网页中完成对明日科技公司的简介。（实例位置：资源包\TM\sl\2\3）
具体步骤如下。
（1）创建一个html文件，将其命名成slyl.html。
（2）在<title>…</title>标签中定义文件的标题为“明日科技公司简介”。
（3）在页面的主题标记内，设置页面的背景图片、文字的颜色为黑色，上边距、左右边距都设置成10像素。其实现的代码如下。
（4）通过CSS样式的style标记，去除重复的背景图。其实现的代码如下。
本例的运行效果如图2.17所示。
图2.17 明日科技公司简介
2.8 小结
本章主要对HTML文件的主体标记中的功能进行了详细的介绍，包括HTML头部标记、标题标记、元信息标记、基底网址标记、页面的注释标记。对标记中的主要属性以实例的形式进行详细的介绍。这些标记和属性是HTML的基石，要想建立HTML的大厦，就要好好地学好本章的内容。
2.9 习题
选择题
1．设置链接颜色使用哪种标记？（ ）
A．<body bgcolor=?>
B．<body text=?>
C．<body link=?>
D．<body vlink=?>
2．HTML语言中，设置背景颜色的代码是（ ）。
A．<body bgcolor=?>
B．<body text=?>
C．<body link=?>
D．<body vlink=?>
3．在HTML中，（ ）不是链接的目标属性。
A．self
B．new
C．blank
D．top
4．在网页中，必须使用（ ）标记来完成超链接。
A．<a>…</a>
B．<p>…</p>
C．<link>…</link>
D．<li>…</li>
5．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ ）。
A．<html> <head>…</head> <frame>…</frame> </html>
B．<html> <title>…</title> <body>…</body> </html>
C．<html> <title>…</title> <frame>…</frame> </html>
D．<html> <head>…</head> <body>…</body> </html>
6．若要是设计网页的背景图形为bg.jpg，以下标记中，正确的是（ ）。
A．<body background="bg.jpg">
B．<body bground="bg.jpg">
C．<body image="bg.jpg">
D．<body bgcolor="bg.jpg">
判断题
7．超链接：是一种标记，形象的说法就是单击网页中的这个标记能够加载另一个网页，这个标记可以做在文本上也可以做在图像上。（ ）
8．HTML的颜色属性值中，Black的代码是""#f00000""。（ ）
填空题
9．头部标记是指______。
10．元信息标记是______。