HTML5从入门到精通（第4版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2　HTML的基本结构

2.2.1　文件开始标签——<html>

在任何的一个HTML文件里，最先出现的HTML标签就是<html>，它用于表示该文件是以超文本标识语言（HTML）编写的。<html>标签是成对出现的，起始标签<html>和结束标签</html>分别位于文件的最前面和最后面，文件中的所有内容和HTML标签都包含在其中。例如：

     <html>
          文件的全部内容
     </html>

该标签不带任何属性。

事实上，现在常用的Web浏览器（例如Google Chrome浏览器）都可以自动识别HTML文件，并不要求有<html>标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件能适应不断变化的Web浏览器，还是应该养成使用这个标签的习惯。

2.2.2　文件头部标签——<head>

习惯上，把HTML文件分为两部分：文件头和文件主体。文件主体部分就是在Web浏览器窗口的用户区内看到的内容，而文件头部分用来规定该文件的标题（出现在浏览器窗口的标题栏中）和文件的一些属性。

<head>是一个表示网页头部的标签。在由<head>标签定义的元素中，并不放置网页的任何内容，而是放置关于HTML文件的信息，也就是说，<head>标签定义的元素并不属于HTML文件的主体。在<head>标签中可以定义文件的标题、编码方式及URL等信息。这些信息大部分用于提供索引、辨认或其他方面的应用。

写在<head>与</head>中间的文本，如果写在<title>标签中，则表示该网页的名称，并作为窗口的名称显示在这个网页窗口的最上方。

如果HTML文件并不需要提供相关信息，则可以省略<head>标签。

在HTML语言的头元素中，一般需要包括标题、基底信息、元信息等。HTML的头元素是以<head>为起始标签，以</head>为结束标签的。一般情况下，CSS和JavaScript都是在头元素中定义的，而在HTML语言头部定义的内容往往不会直接显示在网页上。它用于包含当前文档的相关信息。

常用的<head>标签内容如表2.1所示。

表2.1　<head>标签内容

<head>与</head>之间的内容不会显示在浏览器的文档窗口中，但是，其间的元素有特殊重要的意义。

2.2.3　文件标题标签——<title>

每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的最上方。这对浏览器的收藏功能很有用。浏览者如果认为某个网页对自己很有用，并希望以后经常阅读，则可以选择浏览器“收藏”菜单中的“添加到收藏夹”命令来保存该网页，供以后调用。网页的名称要写在<title>和</title>标签之间，并且<title>标签应包含在<head>与</head>标签之中。

HTML文件的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，嵌套在<head>标签中使用的主要是<title>标签。语法格式如下。

     <title>…</title>

<title>标签内部就是标题的内容。实例代码如下。

上面代码中的粗体显示的就是页面的标题。保存页面后在浏览器中打开，可以看到浏览器的标题栏中显示了刚才设置的标题“简单的HTML文件”，效果如图2.24所示。

图2.24　HTML页面的标题

2.2.4　基底网址标签——<base>

URL路径是一种互联网地址的表示法，在这个数据中可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口（Port）号以及服务器（Server）中页面的完整路径和页面名称等信息。在HTML中，URL路径分为两种形式：绝对路径和相对路径。绝对路径是写出服务器上磁盘驱动器的名称和完整的路径，同时显示磁盘上的目录结构；相对路径是相对于当前HTML文档所在目录或站点根目录的路径。

HTML页面通过基底网址把当前HTML页面中的所有相对URL转换成绝对URL。一般情况下，HTML页面的绝对路径是通过基底网址标签<base>设置的，因此页面中的链接地址只需要设置为相对地址，当浏览器浏览页面时，相对地址将通过<base>标签附在基底网址的后面，从而转换为绝对地址。

例如，在HTML页面的头部定义基底网址如下。

     <base href="http://www.mingribook.com/html/">

在页面主体中设置的某一个相对地址如下。

     <a href="../html/book.html">

说明

在相对路径中，使用../表示当前路径的上一级路径，使用./表示当前路径。

当使用浏览器浏览时，这个链接地址就变成以下绝对地址：

http://www.mingribook.com/html/book.html

因此，在HTML页面中设置基底标签时不应该多于一个，并且要将其放置在头部以及任何包含URL地址的语句之前。语法格式如下。

     <base href="链接地址" target="新窗口的打开方式">

在该语法中，“链接地址”是要设置的页面的基底地址，而“新窗口的打开方式”可以被设置为不同的效果。<base>标签的属性值及含义如表2.2所示。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <base href="http://www.mingribook.com" target="_blank">
          <title>基底网址标签</title>
     </head>
     <body>
          <a href="index.htm">打开一个相对地址</a>
     </body>
     </html>

表2.2　<base>标签的属性值及其含义

运行该程序，当鼠标移动到链接文字上面时，可以看到在浏览器的状态栏中显示了其完整的链接地址，它是由代码中设置的基底地址加上程序中的相对地址组成的，如图2.25所示。

图2.25　设置基底地址

2.2.5　文件主体标签——<body>

网页的主体部分以<body>标签标志它的开始，以</body>标签标志它的结束。在网页的<body>标签中设置了很多属性，如表2.3所示。

表2.3　<body>标签的属性

下面就来分别介绍这些属性的应用。

1．文字颜色属性——text

<body>标签的text属性可以改变整个页面默认文字的颜色。在没有对文字进行单独定义颜色时，这个属性将对页面中所有的文字产生作用，语法格式如下。

     <body text="颜色代码">

在该语法中，text的属性值与设置页面背景色相同，也就是说，该属性设置也与页面的主体标签放置在一起。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设置页面文字颜色</title>
     </head>
     <body text="#0000FF">
          设置页面的文字颜色为蓝色
          </body>
     </html>

运行这段代码，实现的效果如图2.26所示。

图2.26　设置页面文字颜色为蓝色

2．背景颜色属性——bgcolor

<body>标签的bgcolor属性用来设定整个页面的背景颜色。与文字颜色相似，bgcolor属性也是使用颜色名称或者十六进制值来表现颜色效果的。语法格式如下。

     <body bgcolor="颜色代码">

该语法中的body表示页面的主体标签，这意味着设置页面的背景颜色要和页面的主体标签放置在一起。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设置页面背景颜色</title>
     </head>
     <body bgcolor="#0000FF" text="#FFFFFF">
          设置页面的背景为蓝色，文字的颜色为白色
     </body>
     </html>

运行这段代码，可以看到打开的页面背景色为#0000FF蓝色，文字的颜色为#FFFFFF白色，效果如图2.27所示。

图2.27　设置页面的背景颜色为蓝色

3．背景图像属性——background

页面中可以使用.jpg或.gif格式的图片。这些图片可以作为页面的背景图，这可以通过<body>标签的background属性来实现。背景图不同于插入网页中的图片，它被放在网页的最底层，而文字和图片等都位于其上面。文字、插入的图片等会覆盖背景图片。在默认情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。语法格式如下。

     <body background=”文件链接地址”  bgproperties=”背景图片固定属性”>

文件的链接地址可以是相对地址，也就是本机上图片文件的存储位置，也可以设置为网上的图片资料，如http://www.mingribook.com/book.jpg。在默认情况下，用户可以省略bgproperties属性，这时图片会按照水平和垂直的方向不断地重复出现，直到铺满整个页面。如果将bgproperties属性设置为fixed，那么背景图像在滚动页面时也会移动，这相对浏览者来说，它始终停留在相同的位置上。

【例2.2】背景图片的设置与显示效果。（实例位置：资源包\TM\sl\2\2）

（1）设置一个图片文件作为网页的背景，在默认情况下不设置bgproperties属性，此时图片将在水平和垂直方向上平铺图像，代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>背景图片</title>
     </head>
     <body background="images/1.jpg">
     </body>
     </html>

运行效果如图2.28所示。

图2.28　平铺图像作为背景

（2）如果希望图片不重复显示，一般情况下需要借助CSS样式，这里简单介绍一下，在后面的章节中将详细介绍CSS的相关内容。

网页背景的样式设置通常是通过在头部标签中添加<style>标签来实现的，代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>背景图片不重复出现</title>
          <style type="text/css">
               body{background-repeat:no-repeat}
          </style>
     </head>
     <body background="images/1.jpg">
     </body>
     </html>

在这段代码中，background-repeat的值被设置为no-repeat，也就是不重复，运行效果如图2.29所示。

图2.29　背景图像单独显示

如果在这段代码中，将background-repeat的值设置为repeat-x，则背景图片值在水平方向上平铺，效果如图2.30所示。相反，如果将background-repeat的值设置为repeat-y，则只在垂直方向上平铺。

图2.30　背景图像水平平铺效果

（3）除了设置背景是否重复，你还可以设置背景图片是否随着网页中拖动条的拖动而变化。该属性是通过bgproperties参数来设定的。如果bgproperties的值被设置为fixed，则背景图片会被固定在页面上并静止不动。代码如下。

运行这段代码后的效果如图2.31所示。当拖动滚动条时，你会发现只有文字在移动，而背景是静止不动的。

图2.31　运行代码的效果

4．链接文字属性——link

在网页创建中，除了文字、图片，超链接也是最常用的一种元素。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字则变为暗红色。用户在创作网页时，可以通过link参数修改链接文字的颜色。语法格式如下。

     <body link="颜色代码">

这一属性的设置与前面几个设置颜色的参数类似，它们都是与<body>标签放置在一起，表明它对网页中所有未单独设置的元素起作用。

【例2.3】设置未访问的链接文字的颜色。（实例位置：资源包\TM\sl\2\3）

HTML中默认的超链接的文本颜色为蓝色，下面则通过link将超链接的文本颜色修改为红色。代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>页面的链接文字</title>
     </head>
     <body text="#6699FF" link="#FF0000">
          <p align="center">设置文字的链接效果</p>
          <p align="center"><a href="http://www.mingrisoft.com">链接文字</a></p>
     </body>
     </html>

运行这段代码，你可以看到链接文字的颜色不再是默认的蓝色，而是被设置为红色，如图2.32所示。

在上面的代码中，添加正在访问的文字颜色设置。这需要用到alink属性，添加后的代码如下。

运行这段代码之后，单击链接文字“正在访问的链接”，你会发现，当鼠标被按下时，文字颜色变为绿色，如图2.33所示。

图2.32　设置链接文字的颜色

图2.33　设置正在访问的文字颜色

在上面的代码中，继续使用vlink属性设置访问后的文字链接颜色，实现的代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>页面的链接文字</title>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     </head>
     <body text="#6699FF" link="#FF0000" alink="#99FF00" vlink="#CCCCCC">
          <center>
               设置文字的链接效果
               <br/><br/>
               <a href="http://www.mingribook.com">链接文字</a>
               <br/><br/>
               <a href="2-11.html">访问后的链接</a>
          </center>
     </body>
     </html>

运行这段代码之后，当你单击“访问后的链接”文字链接时，你同时完成了页面的跳转（这里设置的是跳转回本页）。这时，你会看到访问过的链接文字颜色变为灰色，如图2.34所示。

图2.34　设置访问后的文字链接颜色

5．边距属性——margin

在网页的制作过程中，你还可以定义页面的空白，也就是内容与浏览器边框之间的距离，其中包括上边框和左边框，设定合适的边距可以防止网页外观过于拥挤。语法格式如下。

     <body topmargin=上边距的值 leftmargin=左边距的值>

在默认情况下，边距的值是以像素为单位的。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设置边距</title>
     </head>
     <body topmargin="60" leftmargin="50">
          设置页面的上边距为60像素
          <br/>
          设置页面的左边距为50像素
     </body>
     </html>

运行此段代码，你可以看到设置边距前后的对比效果，设置边距前的效果如图2.35所示，设置自定义边距后的效果如图2.36所示。

图2.35　默认的页面效果

图2.36　设置边距的效果

2.2.6　注释—<!-- -->

除了以上这些基本标签，网页还包含一种不显示在页面中的元素，那就是代码的注释文字。给代码加注释，是一种很好的编程习惯。适当的注释可以帮助用户更好地了解网页中各个模块的划分，也有助于以后对代码的检查和修改。在HTML文件中添加注释的语法格式如下。

     <!--注释的文字-->

注释很简单，只需要在上面语法中“注释的文字”的位置上添加需要的内容即可。

编程训练（答案位置：资源包\TM\sl\2\编程训练）

【训练3】显示一则天气预报　在网页中添加一则天气预报，天气预报中包含发布时间、发布者、阅读量以及具体天气情况。

【训练4】显示清明节介绍　在网页中添加一段文字，介绍清明节的来历等。

上一章目录下一章