PART2 结构语言篇

第2章 网页基础必备知识

第1章介绍了网站和网页的基础知识之后，本章将为读者介绍网页的一些基础必备知识，包括HTML语法、HTML长度单位和HTML度量衡。最后再用一个例子，进一步帮读者巩固这些基础知识。

2.1 HTML标签

HTML标签用来表示网页的整体内容。HTML标签的语法如下所示。

HTML标签由开始标签和结束标签两部分组成，其中开始标签是被“< >”包围的元素名，结束标签是被“< >”包围的斜杠（/）和元素名，定义语法如下所示。

<body>
<p>网页基础知识</p>
</body>

HTML标签一般都是成对出现的，例如 <p> 和 </p> 及 <body> 和 </body>。但有些HTML元素没有结束标签，在最后加上“/”表示标签是独立的，定义语法如下所示。

<br/>网页基础知识

需要注意的是，HTML标签对大小写不敏感，例如标签 <body> 和 <BODY> 的作用是一样的。但为了规范起见，我们建议读者在编写代码时使用小写。

2.2 HTML属性

HTML中的标签可以有属性，它是HTML标签的一部分，用来实现受控文字的某些特殊效果或功能，定义语法如下所示。

“a1,a2,…,an”为属性名称，而“v1,v2,…,vn”则是其所对应的属性值。

<div align="center">网页基础知识</div>

“align”是属性名称，代表对齐方式；引号中的“center”是属性“align”的属性值，表示居中。对于一些独立的标签也可以有属性，其基本语法如下所示。

属性值的引号可以添加，也可以不添加，但一般网页制作者都习惯添加，所以我们建议初学者养成给属性值加引号的良好习惯。

2.3 HTML元素

从开始标签到结束标签的所有代码，就是HTML元素。它是构成网页的基本单位，定义语法如下所示。

<div align="justify">学习网页基础知识 </div>

这是一个HTML对齐元素，其效果是让文字“学习网页基础知识”在网页上两端对齐。大多数HTML元素可以嵌套使用。

【示例2-1】本例给出了一个最简单的HTML网页。

   <body>
   <p>
   <div align="justify">学习网页基础知识 </div>
   </p>
   </body>

2.4 HTML文件

HTML文件也就是我们所看到的网页，它由HTML元素组成，结构包括头部（head）和主体（body）两大部分，如图2.1所示。

图2.1 HTML文件结构

HTML文件的头部主要是对页面进行描述，而在HTML文件的主体中主要进行代码的编写。我们将在后面的章节中为读者详细介绍这部分内容。

2.5 HTML注释

在编写HTML代码时，可以使用标签 <!--…--> 给代码加注释。HTML注释对代码进行解释，但不会被浏览器执行，有助于以后对代码进行修改，定义语法如下所示。

<!--注释内容-->

【示例2-2】本例使用注释标签进行了解释，但在浏览器中没有看到注释的内容。

2.6 HTML颜色

在HTML语言中，对于颜色的表达方式主要有两种，分别是颜色值和颜色名。下面我们来详细介绍这两种表达方式。

2.6.1 颜色值

HTML颜色由“#”和6位十六进制符号来定义。这些符号表示红色、绿色和蓝色，形式如图2.2所示。

图2.2 颜色值语法

颜色值的语法规则为：第一，总共是6位；第二，每一位必须由0～9或者A～F组成；第三，0不能省略。其中，前两位表示红色值，中间两位表示绿色值，最后两位表示蓝色值。

下面介绍几种常用的颜色值，如表2.1所示。

表2.1 常用颜色值

2.6.2 颜色名

HTML允许在网页中直接使用部分颜色的英文名称来指定颜色值，这样用户就可以不用记忆复杂的颜色值了。下面介绍16种常用的颜色名，如表2.2所示。

表2.2 常用颜色名

对于以上16种颜色之外的颜色，只能使用颜色值来表示。

2.6.3 Web安全色

多年以前，大多数计算机仅支持256种颜色，后期由于Windows和Mac OS使用了40种不同的、保留的固定系统颜色，使得其他216种Web安全色作为Web标准被使用。如今，随着计算机处理能力的不断增强，对于Web安全色已经没有具体界限了。

2.7 HTML长度单位

在网页编写过程中，定义框架需要用到很多长度值和宽度值。为了符合Web标准和XHTML规则，开发人员需要养成标注单位的习惯。下面介绍几种常见的长度单位，如表2.3所示。

表2.3 常见的长度单位

技巧：（1）控制框架和图片的常用单位是px；（2）控制字体的常用单位是em；（3）相对单位是%。

2.8 CSS样式表

CSS用于在网页中添加样式，是可以将网页内容和样式分离出来单独修改的一种标记性语言。下面我们就来详细介绍有关CSS样式的知识。

2.8.1 链接样式表

CSS样式表在HTML中的应用分为3种，分别是外部样式表、内部样式表和行内样式表。样式表允许以多种方式设置样式信息。样式表可以定义在单个的HTML元素、HTML的头元素、一个外部CSS文件中，或者在同一个HTML文档内部引用多个外部样式表。

当同一个HTML元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，层叠次序为：浏览器默认设置、外部样式表、内部样式表（在 <head> 标签内部）、内联样式（在HTML元素内部）。

2.8.2 外部样式表的链接

外部样式表是指将样式放在一个样式文件里（一般设置为 *.css文件），通过 <link> 标签调用。调用样式表时需要把 <link> 标签放在 <head> 标签中，外部样式表可以被多个页面调用，语法规则如下所示。

其中，href属性中的外部样式文件地址的语法与超链接的链接地址语法相同，具体内容可以参考第5 章；“rel="stylesheet"”是固定格式，表示浏览器链接的是一个样式表文件；“type="text/css"”是固定格式，表示传输的文本类型为样式表类型文件。

【示例2-3】本例演示了如何链接外部样式表，从而使网页内容变得更加美观。这里为了使效果更加明显，分别给出了外部样式表链接前后的不同效果。

外部样式表链接前效果如下。

外部样式表链接后效果如下。

注意：要设置外部CSS的样式表编写方式，应选择Dreamweaver软件中的“新建”→“CSS”选项，步骤如图2.3所示。

图2.3 编写CSS样式表的步骤

编写完毕进行保存，保存格式为 *.css。建议读者将CSS样式表保存在新的文件夹中，最好命名为“css”。

2.8.3 内部样式表的链接

内部样式是指样式放在页面里，只有该页面可以调用，通过<style> 标签进行设置。内部样式表是放在页面的 <head> 标签中进行调用的，定义语法如右所示。

【示例2-4】本例使用了链接内部样式表来显示页面。为了使效果更加明显，这里分别给出内部样式表链接前后的效果。

内部样式表链接前效果如下。

内部样式表链接后效果如下。

2.8.4 链接行内样式表

行内样式表是指在内容的标签里直接添加样式，只有当前被包围的标签里的内容才能使用它。行内样式表通过style属性进行设置，语法形式如下所示。

<标签style="">

在style属性中可以有多个样式，样式间用英文引号隔开即可。

【示例2-5】本例演示了如何设置行内样式表的链接。

2.9 选择器

选择器是指CSS样式表里定义的可供HTML选择使用的名字。通过调用，HTML可以根据不同的内容选择不同的样式作为内容的修饰，本节就来介绍几种选择器的用法。

2.9.1 派生选择器

派生选择器是指根据元素在其位置的上下文关系来定义样式。派生选择器的命名可以是HTML中的空标签，也可以是id选择器和类选择器，在第2.9.2节和第2.9.3节中会详细介绍这两种选择器的定义方法。

【示例2-6】本例演示了如何使用id选择器为网页样式命名。这里使用的是内部样式表，并在页面内容中添加了一些文字。

2.9.2 id选择器

id选择器是指在HTML中用id属性对样式进行调用的选择器。id选择器可以随意命名，但是命名时要在名字前面加上“#”，用于和HTML中的id属性进行绑定。由于选择器是非常灵活的，所以这里给出最常用的定义方法，语法规则如右所示。

【示例2-7】本例演示了如何使用id选择器为网页样式命名。这里使用了内部样式表，并添加了一些文字。

注意：选择器的名称最好是与内容相关的英文单词，这样有助于对内容的修改、查看，但不要使用HTML的特定标签属性和关键词，以免出现不必要的错乱。

在Dreamweaver中也可以定义id选择器。下面我们就针对【示例2-7】给出如何在Dreamweaver中定义id选择器。在“属性”面板中选择CSS属性，单击“编辑规则”按钮，进行设置，如图2.4所示。

图2.4 在Dreamweaver中定义id选择器

通过自定义，我们就可以得到【示例2-7】的效果了。

2.9.3 类选择器

类选择器是指在HTML中用class属性对样式进行调用的选择器。类选择器可以随意命名，但是命名时要在名字前加上英文句号“.”，用于和HTML中的class属性进行绑定。由于选择器是非常灵活的，所以这里给出最常用的定义方法，语法规则如右所示。

【示例2-8】本例演示了如何使用类选择器为网页样式命名。这里使用了内部样式表，并添加了一些文字。

在Dreamweaver中也可以定义类选择器。下面就针对【示例2-8】给出如何在Dreamweaver中定义类选择器。在“属性”面板中选择CSS属性，单击“编辑规则”按钮，进行设置，如图2.5所示。

图2.5 在Dreamweaver中定义类选择器

2.9.4 标签选择器

标签选择器是指针对网页中一些专有标签设置CSS样式，如段落标签 <p>、标题标签 <h>等。由于选择器是非常灵活的，所以这里给出最常用的定义方法，语法规则如下所示。

标签{样式内容}

【示例2-9】本例演示了如何设置标签选择器。这里为了使效果更加明显，为一个段落添加了选择器。

在Dreamweaver中也可以定义标签选择器。下面就针对【示例2-9】给出如何在Dreamweaver中定义标签选择器。在“属性”面板中选择CSS属性，单击“编辑规则”按钮，进行设置，如图2.6所示。

图2.6 在Dreamweaver中定义标签选择器

2.9.5 复合选择器

复合选择器是指基于选择的内容，对多项内容添加CSS样式，如对段落标签 <p>、标题标签 <h> 等多项内容添加选择器。标签之间用逗号（英文格式）隔开。由于选择器是非常灵活的，所以这里给出最常用的定义方法，语法规则如右所示。

标签，标签……{样式内容}

【示例2-10】本例演示了如何在网页中对多项内容同时添加同一个样式。这里为了使效果更加明显，为一个段落和一个标题同时添加了同一个样式的选择器。

在Dreamweaver中也可以定义复合选择器。下面就针对【示例2-10】给出如何在Dreamweaver中定义复合选择器。在“属性”面板中选择CSS属性，单击“编辑规则”按钮，进行设置，如图2.7所示。

图2.7 在Dreamweaver中定义复合选择器

2.9.6 <span> 标签

<span> 标签被广泛用于组合文档中的行内元素。<span> 标签没有固定的表现格式，当对它应用样式时，它才会产生视觉上的变化。这里给出最简单的语法形式，如下所示。

【示例2-11】本例演示了如何将 <span> 标签和类选择器相结合，改变文本样式。为了使效果更加明显，这里使用了一些文字，将其中部分文字进行颜色处理并添加下画线。

2.10 CSS框架模型

CSS框架模型是指使用样式的内容框架模型。有关样式的设置都要遵循CSS框架模型来产生相应的效果。下面给出CSS框架模型的效果图，如图2.8所示。

图2.8 CSS框架模型

其中，外边距（margin）表示外层与周围文字、图片等元素的距离；边框（border）是指内外边距之间的分界线；内边距（padding）是指边框与中心内容之间的距离，在图2.8中用灰色表示；内容在图2.8中用白色表示。

2.11 小结

本章我们学习了HTML的基本标签、CSS样式表等知识。其中，HTML标签是构成网页的基础，而CSS样式表、选择器则令网页的设计锦上添花。读者需要牢牢掌握本章内容，这样可以为日后的学习打下坚实的基础。

2.12 习题

【习题2-1】下面给出一个简单网页的代码，请分别标出HTML文件的头部和主体，代码如下。

<!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>习题2-1</title>
</head>
<body>
今天的天气很好，大家可以穿裙子了！
</body>
</html>

【分析】通过第2.4节的学习，可以轻松分辨这段代码的头部和主体。

【习题2-2】新建一个CSS样式表，内容如下所示，存放到“css”文件夹中。用外部样式表链接的方法修饰网页，使网页由如图2.9所示变为如图2.10所示的样子。

图2.9 未经CSS样式表修饰的网页

图2.10 链接外部CSS样式表后的网页

【分析】设置外部CSS样式表链接需要样式表保存时的格式一定是“.css”，否则CSS样式表无效。

【关键代码】

<head>
<link rel="stylesheet"type="text/css"href="../css/mycss.css">
</head>

【习题2-3】下面给出一个CSS内部样式表的代码，如下所示。请将这些代码添加到HTML代码中，使网页更加美观，效果如图2.11所示。

图2.11 添加内部样式表后网页的效果

【分析】这道题的主要目的是给网页文字添加CSS样式，使网页文字的外观更加灵活。在做这道题时，首先，要明确内部样式表必须添加在 <head> 标签中，否则将没有效果；其次，要看懂这些代码会给网页带来哪些效果，例如文字的对齐方式为居中对齐、文字的背景颜色为灰色。

【习题2-4】下面给出一行CSS行内样式表的代码，如下所示。请将这些代码添加到HTML代码中，使网页更加美观，效果如图2.12所示。

图2.12 添加行内样式表之后的网页效果

【分析】这道题的主要目的是给网页中的表格添加CSS样式，使得表格的外观更加美观。鉴于读者还没有学习如何在网页中添加一个表格，所以在【关键代码】中，我们给出添加此表格的代码。

【关键代码】

<table>
<tr>
  <td>这是一个表格</td>
  </tr>
  </table>

【习题2-5】下面给出两段CSS代码，如下所示。请分别指出它们属于哪一种选择器，并且分别将它们添加到HTML中，实现如图2.13和图2.14所示的效果。

图2.13 使用CSS行内样式表后的效果（1）

图2.14 使用CSS行内样式表后的效果（2）

【分析】这道题的目的主要是让读者理解id选择器和类选择器的区别。首先，需要分清楚两段代码分别是哪种选择器；然后，针对两种选择器的不同设置，分别将它们添加到HTML中，实现如图2.13和图2.14所示的效果。

【关键代码】

类选择器的关键代码如下。

  <body>
  <p class=".two">今天天气很不好！</p>
  </body>

id选择器的关键代码如下。

  <body>
  <p id="one">今天天气很好！</p>
  </body>

【习题2-6】请指出以下代码使用了哪一种选择器修改网页内容，使网页内容变成如图2.15所示的效果。

图2.15 经过修改后的网页效果

【分析】这道题的网页中有一幅图片，但这是“障眼法”。这里需要读者分清楚，这个背景色是图片 <img> 标签的，还是整个网页 <body> 标签的。这里的背景色是整个网页 <body>标签的。

【习题2-7】下面给出一段复合选择器代码。请指出这段代码是由哪几种标签混合在一起形成的复合选择器代码。

  <style type="text/css">
  body,p,h2 {
        background-color: #FFC;
        font-family:"楷体";
        font-size:16px;
        color:#F00;
  }
  </style>

【分析】这段代码是一段复合选择器代码，其中包含 <body> 标签、<p> 标签、<h2> 标签。通过本例希望读者可以了解，当所需标记内容繁多时，最好使用复合选择器，非常简单、方便。

【习题2-8】下面给出一段代码，请指出其中哪些是注释代码。

  <body>
  <img src="../image/abc.jpg">
  <!--这是一幅图片-->
  <p>这是一幅图片</p>
  </body>

【分析】注释标签的格式如下所示。

<!--注释内容-->

只要牢记这点，不难发现第3行代码就是注释代码。

【习题2-9】使用 <span> 标签结合CSS样式表修改网页样式，使得网页的外观更加引人入胜，效果如图2.16所示。

图2.16 网页效果

【分析】观察图2.16可以得出，<span> 标签可以和id选择器相互结合，对个别词语进行修饰，以达到突出的效果。注意：不要把结束标签 </span> 丢掉。

【关键代码】

<head>
<style type="text/css">
#zd {
        font-size: 24px;
        color: #F00;
}
</style>
</head>
<body>
<p>今天<span id="zd">天气</span>非常<span id="zd">好
</span>，<span id="zd">河边</span>散步的<span id="zd">人</span>
也越来越<span id="zd">多</span>了，现在的人们越来越会<span
id="zd">享受生活</span>了！</p>
</body>
上一章目录下一章