第3章HTML与CSS基础
本章学习内容
(1) HTML语言概述；
(2) HTML的语法结构；
(3) HTML标签；
(4) CSS的基本语法；
(5) 伪类、伪元素以及样式表的层叠顺序；
(6) CSS的属性。
完成本章的学习需要大约1.5小时，相关资源获取方式见前言。
知识点
HTML语言概述和基本结构常用标签CSS的基本语法
伪类、伪元素以及样式表的层叠顺序层叠样式表CSS预处理器
在Dreamweaver中移动CSS规则CSS中的各种属性
使用HTML标签设计网页使用CSS Designer
本章案例介绍
范例
本章范例是一个倡导阅读的网页，分为“主页”和“书类”两部分，如图3.1所示。通过范例的学习，掌握在Dreamweaver中使用HTML标签和CSS样式设计网页的技巧和方法。
模拟案例
本章模拟案例是一个综艺类的网站，主题是向往的生活，如图3.2所示，通过模拟练习进一步熟悉HTML标签和CSS样式的应用。
图3.1
图3.2
3.1预览完成的范例
(1) 右击“lesson03/范例/03complete”文件夹中的index.html文件，在弹出的菜单中选择已安装的浏览器对index.html文件进行浏览。
(2) 关闭浏览器。
(3) 也可以用Dreamweaver CC 2018打开源文件进行预览。在菜单栏中选择“文件”→“打开”按钮。选择“lesson03/范例/03complete”文件夹中的index.html文件，并单击“打开”按钮，切换到“实时”视图查看页面。
3.2HTML语言概述
HTML是Hypertext Markup Language的字母缩写，通常称作超文本标记语言，或超文本链接标记语言，目前的版本已发展到了HTML5。它是基于SGML(Standard General Markup Language，标准通用标签语言)的一种描述性语言，由W3C(World Wide Web Consortium，万维网联盟)推出，并被国际标准ISO 8879所认可，是用于建立Web页面和其他超级文本的语言，是WWW的描述语言。
HTML并不是真正的程序设计语言，它只是标签语言，扩展名通常为.htm或.html。了解网页的用户可能听说过许多可以编辑网页的软件，事实上，用户可以用任何文本编辑器建立HTML页面，如 Windows的“记事本”程序。
HTML文本是由HTML命令组成的描述性文本，可以说明文字、图形、动画、声音、表格和链接等，它独立于各种操作系统平台(如 UNIX、 Windows等)。使用HIML语言描述的文件，需要通过浏览器显示效果。浏览器先读取网页中的HTML代码，分析其语法结构，然后根据解释的结果，将单调乏味的文字显示为丰富多彩的网页内容，而不是显示事先存储于网页中的内容。正是因为如此，网页显示的速度与网页代码的质量有很大的关系，保持精简和高效的HTML源代码是非常重要的。
日前较为流行的HTML5，是针对HTML4而言的，是W3C与WHATWG(Web Hypertext Application Technology Working Group)双方合作创建的一个新版本的HTML，其前身名为 Web Applications 1.0。HTML5增加了更多样的API，提供了嵌入音频、视频、图片的函数，客户端数据存储，以及交互式文档的功能。
Dreamweaver默认的HTML文档类型为HTML5。以下是HTML5一些有趣的特性：
用于绘画的canvas元素。
用于媒介回放的video和audio元素。
对本地离线存储的更好的支持。
特殊内容元素，如article、footer、header、nav、sectlon。
表单控件，如calendar、date、time、emai1、url、search。
HTML5通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则，改进了互操作性，并减少了开发成本。
3.3HTML的语法结构
视频讲解
标准的HTML由标签和文本内容构成，并用一组“<”与“>”括起来，且与字母的大小写无关。例如，
<b>HTML的语法结构</b>
图3.3
用浏览器显示时，标签<b>和</b>不会被显示，浏览器在文档中发现了这对标签，就将其中包含的文字(本例中是“HTML的语法结构”)以粗体形式显示，如图3.3所示。
需要注意的是，标签通常是成对出现的。每当使用一个标签，如<font>，则必须用另一个标签</font>将它关闭。但是也有一些标签例外，例如，<input>标签就不需要另一个标签进行关闭。
严格地说，标签和标签元素不同： 标签元素是位于“<”和“>”符号之间的内容，如上例中的“b”； 而标签则包括了标签元素和“<”和“>”符号本身，如上例中的“<b>”。但是，通常将标签元素和标签当作一种东西，因为脱离了“<”和“>”符号的标签元素毫无意义。在后面的介绍中，若不做特别说明，则将标签和标签元素统一称作“标签”。
一般来说，HTML的语法有以下3种表达方式：
<标签>内容</标签>
<标签 属性1＝参数1 属性2＝参数2>内容</标签>
<标签>
下面分别对这3种形式及嵌套标签进行介绍。
3.3.1<标签>内容</标签>
这种语法结构显示了使用封闭类型标签的形式。大多数标签是封闭类型的，也就是说，它们成对出现。所谓成对，是指一个起始标签总是搭配一个结束标签，在起始标签的标签名前加上符号“/”便是其终止标签，如<head>与</head>。起始标签和终止标签之间的内容受标签的控制。
例如，<i>内容</i>，<i>和</i>之间的内容受标签的控制。标签i的作用是将所控制的文本内容显示为斜体，所以在浏览器中看到的内容将是斜体字。
如果一个应该封闭的标签没有结束标签，则可能产生意想不到的错误，根据浏览器的不同，出错结果也可能不同。例如，如果在上例中，没有以标签</i>结束对文字格式的设置，可能后面所有的文字都会以斜体字的格式出现。
注意：
并非所有HTML标签都必须成对出现，3.3.3节会具体介绍，建议在使用HTML标签时，最好先弄清标签是否为封闭类型。
3.3.2<标签 属性1＝参数1属性2＝参数2>内容</标签>
这种语法结构是上一种语法结构的扩展形式，利用属性进一步设置对象的外观，而参数则是设置的结果。
每个HTML标签都可以有多个属性，属性名和属性值之间用“=”连接，构成一个完整的属性，例如，<body bgcolor＝"＃FFFFFF">表示将网页背景设置为白色。多个属性之间
用空格分开。例如：
<font face="华文行楷" size="45" color="#000000">小王子</font>
上述语句表示将“小王子”的字体设置为华文行楷，字号设置为45，颜色设置为黑色，如图3.4所示。
3.3.3<标签>
前面说过，HTML标签并非都成对出现，而这种不成对出现的标签称为非封闭类型标签。
在HTML语言中，非封闭类型的标签不多，最常见的应该是换行标签<br>。
例如，在 Dreamweaver的“代码”视图的<body>与</body>标签之间输入如下内容：
<font face="楷书" size="5" color="#636363">
看东西只有用心才能看得清楚，<br>重要的东西用眼睛看不见的。
</font>
在浏览器中的显示效果如图3.5所示。
图3.4
图3.5
使用换行标签使一行字在中间换行，显示为两行，但结构上仍属于同一个段落。
3.3.4标签嵌套
几乎所有的HTML代码都是上面3种形式的组合，标签之间可以相互嵌套，形成更为复杂的语法。例如，如果希望将一行文本同时设置粗体和斜体格式，则可以采用下面的语句：
<b><i>真实的故事</i></b>
在浏览器中的显示效果如图3.6所示。
注意，尽量不要写成如下的形式：
<i><b>真实的故事</i></b>
在上面的语句中，标签嵌套发生了错误。切换到“设计”视图，可以看到显示效果如图3.7所示，状态栏上的linting图标显示为，表明代码中存在错误。单击标签为黄色的文本块，在“属性”面板中可以看到相关的错误提示，提示用户这是一个无效的标签，因为这是一个交叠的或未关闭的标签，如图3.8所示。单击状态栏上的linting图标，弹出如图3.9所示的“输出”面板，其中标明了错误所在的代码行和错误可能的原因。
图3.6
图3.7
图3.8
图3.9
尽管这个错误的例子在大多数浏览器中可以被正确识别，但是对于其他的一些标签，如果嵌套发生错误的话，就不一定会被正确显示。为了保证文档有更好的兼容性，尽量不要出现标签嵌套顺序的错误。
3.4常用的HTML标签
本节将详细介绍HTML中常用的一些标签。掌握这些标签的用法，对今后的网页制作可以起到事半功倍的效果。
视频讲解
3.4.1文档的结构标签
在 Dreamweaver中创建一个空白的HTML文档(文档类型默认为HTML5)后，如果切换到“代码”视图，用户会发现，尽管新建文档的“设计”视图是空白的，但是“代码”视图中已经有了不少源代码。在默认状态下，这些源代码如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
基本HTML页面以doctype开始，它声明文档的类型，主要用来说明文档使用的XHTML或者HTML的版本。浏览器根据doctype定义的DTD(文档类型定义)解释页面代码。doctype声明必须放在每一个XHTML或HTML文档最顶部，在所有代码和标识之上，否则文档声明无效。
上面的代码包括了一个标准的HTML文件应该具有的4个组成部分。下面分别进行简要介绍。
1. <html>标签
<html>…</html>标签是HTML文档的开始和结束标签，告诉浏览器这是整个HTML文件的范围。
HTML文档中所有的内容都应该在这两个标签之间，一个HTML文档非注释代码总是以<html>开始，以</html>结束。
2. <head>标签
<head>…</head>标签一般位于文档的头部，用于包含当前文档的有关信息，如标题和关键字等，通常将这两个标签之间的内容统称作HTML的“头部”。
位于头部的内容一般不会在网页上直接显示，而是通过另外的方式起作用。例如，在HTML头部定义的标题不会显示在网页中，但是会出现在网页的标题栏上。
3. <title>标签
<title>…</title>标签位于HTML文档的头部，即位于<head>…</head>标签之间，用于定义显示在浏览器窗口标题栏中的内容。
4. <body>标签
<body>…</body>标签用于定义HTML文档的正文部分，如文字、标题、段落和列表等，也可以用来定义主页背景颜色。<body>…</body>定义在</head>标签之后，<html>…</html>标签之间。所有出现在网页上的正文内容都应该写在这两个标签之间。
<body>标签有6个常用的可选属性，主要用于控制文档的基本特征，如文本和背景颜色等。各个属性介绍如下：
background——为文档指定一幅图像作为背景。
text——文档中非链接文本的默认颜色。
link——文档中一个未被访问过的超级链接的文本颜色。
alink——文档中一个正在打开的超级链接的文本颜色。
vlink——文档中一个已经被访问过的超级链接的文本颜色。
bgcolor——网页的背景颜色。
例如，如果要将文档的背景图像设置为主目录下的1.jpg，文本颜色设置为#BDBDBD，未访问超级链接的文本颜色设置为#FFFFFF，已访问超级链接的文本颜色设置为#E5F571，正在访问的超级链接的文本颜色设置为#F43235，则可以使用如下的<body>标签：
<body background="1.jpg" text= #BDBDBD link="#FFFFFF" vlink="#E5F571" alink="#F43235">
在页面中输入文本，并为其创建超级链接，预览效果如图3.10所示。
图3.10
3.4.2文本格式标签
文本格式标签用于控制网页中文本的样式，如大小、字体和段落样式等。
视频讲解
1. <font>标签
<font>…</font>标签用于设置文本字体格式，包括字体、字号、颜色和字形等，适当地应用可以使页面更加美观。
font标签有3个属性： face、 color和size。这3个属性可以自由组合，没有先后顺序。通过设置这3个标签属性，可以控制文字的显示效果。
face： 用于设置文本字体名称，可以用逗号隔开多个字体名称。例如：
<font face=" Cambria,Times,serif">你好，明天!</font>
size： 用于设置文本字体大小，取值范围为-7~7，数字越大字号越大。
color： 用于设置文本颜色，可以用red、 white和 green等助记符，也可以用十六进制数表示，如红色为＃FF0000。
使用示例：
<font face=" 华文行楷" size="7" color="#DB292C">你好，明天!</font>
图3.11
上述语句在浏览器中的显示效果如图3.11所示。
2. <b>、<i>、<em>、<h#>标签
<b>…</b>标签将标签之间的文本设置成粗体。例如：
文本设置为<b>粗体</b>
<i>…</i>标签将标签之间的文本设置成斜体。例如：
文本设置为<i>斜体</i>
<em>…</em>标签用于将标签之间的文字加以强调。不同的浏览器效果有所不同，通常会设置成斜体。例如：
文字加以<em>强调</em>
上述3个例子在浏览器中的显示效果如图3.12所示。
<h#>…</h#>(#=1、2、3、4、5、6)标签用于设置标题字体(Header)，有1~6级标题，数字越大字体越小。标题将显示为黑体字。<h#></h#>标签自动插入一个空行，不必用<p>标签再加空行。和<title>标签不一样，<h#>标签中的文本将显示在浏览器中。
使用示例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
显示效果如图3.13所示。
图3.12
图3.13
视频讲解
3.4.3排版标签
1. <br>、<p>、<hr>标签
<br>标签适用于在文本中添加一个换行符，它不需要成对使用。例如：
添加一个换行符<br>第二行
<p>…</p>标签用来分隔文档的多个段落。属性align有4个取值，分别介绍如下：
left——段落左对齐。
center——段落居中对齐。
right——段落右对齐。
justify——段落两端对齐，即每行都有相等的宽度(就像在报纸和杂志中)。
图3.14
例如：
<p align="left">左对齐</p>
<p align="center">居中对齐</p>
<p align="right">右对齐</p>
<p align="justify">两端对齐</p>
<hr>标签用于在页面中添加一条水平线。例如：
水平线上<hr>水平线下
上述3个例子在浏览器中的显示效果如图3.14所示。
2. <sub>和<sup>标签
<sub>…</sub>标签将标签之间的文本设置成下标。例如：
123是下标<sub>123</sub>
<sup>…</sup>标签将标签之间的文本设置成上标。例如：
456是上标<sup>456</sup>
图3.15
上述两个例子在浏览器中的显示效果如图3.15所示。
3. <div>和<span>标签
<div>…</div>用于块级区域的格式化显示。该标签可以把文档划分为若干部分，并分别设置不同的属性值，使同一文字区域内的文字显示不同的效果，常用于设置CSS样式。
<div>标签的常用格式如下：
<div align＝对齐方式 id＝名称 style＝样式 class＝类名 nowrap>…</div>
其中，对齐方式可以为center、left和 right，id用于定义div区域的名称，style用于定义样式，class用于赋予类名，nowrap说明不能换行（默认是不加 nowrap的，也就是可以换行）。例如：
<div>地球可不是普通的地球哦!</div>
<div align="center" style="color: #F51D21" id="nav">这里有一百一十一位国王(当然包括了非洲的国王)，七千多个地理学家……</div>
上例在浏览器中的显示效果如图3.16所示。
图3.16
<span>…</span>标签用于定义内嵌的文本容器或区域，主要用于一个段落、句子甚至单词中。其格式为
<span id＝名称 style＝样式 class＝类名>…</span>
<span>标签没有align属性，其他属性的意义和<div>标签类似。<span>标签同样在样式表的应用方面特别好用，它们都用于HTML。例如：
<span style="color: #E90FFF;font-size: 36px">span标签</span>
<div>标签和<span>标签的区别在于，<div>标签是块级元素，可以包含段落、标题、表格，甚至章节、摘要和备注等; 而<span>标签是行内元素，<span>的前后是不会换行的，它纯粹地应用样式。下面以一个小实例来说明两者的区别。
(1) 新建一个HTML文档，并设置文档的背景图像。
(2) 切换到“代码视图”，在<body>和</body>标签之间输入以下代码：
<span>第一个span</span>
<span>第二个span</span>
<span>第三个span</span>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
(3) 保存文件，在浏览器中查看，结果如图3.17所示。
图3.17
视频讲解
3.4.4列表标签
在HTML中，列表标签分为无序列表、有序列表和普通列表3种。下面分别对它们进行简要介绍。
1. 无序列表
所谓无序列表，是指列表项之间没有先后次序之分。<ul>…</ul>用来标记无序列表的开始和结束。列表的标签格式为<ul><li>…</li></ul>，其中的每个<li>标签都表示一个列表项值。
例如：
<ul>
<li>夜航</li>
<li>人的大地</li>
<li>小王子</li>
</ul>
图3.18
上例在浏览器中的显示效果如图3.18所示。
2. 有序列表
有序列表与普通列表不同之处在于有序列表存在序号。<ol>…</ol>用于标记有序列表的开始和结束。有序列表有一个属性type，它取不同值时对应的功能如下：
type=1表示用数字给列表项编号，这是默认设置。
type=a表示用小写字母给列表项编号。
type=A表示用大写字母给列表项编号。
type=i表示用小写罗马字母给列表项编号。
type=I表示用大写罗马字母给列表项编号。
例如：
<ol>
<li>夜航</li>
<li>人的大地</li>
<li>小王子</li>
</ol>
该示例在浏览器中的显示效果如图3.19所示。
3. 普通列表
普通列表通过<dl>…<dt>…<dd>…</dd>…</dt>…</dl>的形式实现，通常用于排版。其中，<dl>…</dl>用于创建一个普通列表； <dt>…</dt>用于创建列表中的上层项目； <dd>…</dd>用于创建列表中最下层的项目。<dt>…</dt>和<dd>…</dd>都必须放在<dl>…</dl>标签之间。
例如：
<dl>
<dt>圣埃克苏佩里
<dd>夜航</dd>
<dd>人的大地</dd>
<dd>小王子</dd>
</dt>
<dt>圣埃克苏佩里
<dd>夜航</dd>
<dd>人的大地</dd>
<dd>小王子</dd>
</dt>
</dl>
该示例在浏览器中的显示效果如图3.20所示。
图3.19
图3.20
视频讲解
3.4.5表格标签
通过表格可以将数据内容分门别类地显示出来，从而使网页显得整齐美观。
1. <table>标签
表格由<table>…</table>标签构成。<table>标签还有很多属性用于控制表格的显示效果。表格的常用属性介绍如下：
align——设置表格与页面对齐的方式，取值有left、 center和 right。
cellpadding——设置表格单元格内数据和单元格边框之间的边距，以像素为单位。
cellspacing——设单元格之间的间距，以像素为单位。
border——设置表格的边框，如果将该属性的值设置为0，则不显示表格的边框线。
width——设置表格的宽度，单位默认为像素，也可以使用百分比形式。
height——设置表格的高度，单位默认为像素，也可以使用百分比形式。
例如，下面的代码新建了一个宽为400px、边框为1像素量、边距和间距均为2px的4行4列的表格。
<table width="400" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
2. <tr>、<td>和<th>标签
(1) <tr>…</tr>标签用于标记表格一行的开始和结束。常用的属性介绍如下：
align——设置行中文本在单元格内的对齐方式，取值有left、 center和 right。
bgcolor——设置行中单元格的背景颜色。
(2) <td>…</td>标签用于标记表格内单元格的开始和结束，应位于<tr>标签内部。常用的属性介绍如下：
align——设置单元格内容在单元格内的对齐方式，取值有left、 center和 right。
bgcolor——设置单元格的背景颜色。
width——设置单元格的宽度，单位为像素。
height——设置单元格的高度，单位为像素。
(3) <th>…</th>的作用与<td>大致相同，主要用于标记表格内表头的开始和结束,且其中的文本自动以粗体显示。常用的属性如下：
colspan——设置<th>…</th>内的内容应该跨越几列。
rowspan——设置<th>…</th>内的内容应该跨越几行。
3. <colspan>和<rowspan>标签
<colspan>和<rowspan>标签用于合并单元格，分别表示跨多列合并和跨多行合并。例如下面的代码：
<table width="400" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<th width="79" scope="col">姓名</th>
<th colspan="3" scope="col">各分数</th>
</tr>
<tr>
<td>小花</td>
<td width="95">80</td>
<td width="95">98</td>
<td width="95">92</td>
</tr>
<tr>
<td>小米</td>
<td width="95">95</td>
<td width="95">86</td>
<td width="95">69</td>
</tr>
<tr>
<td>小红</td>
<td width="95">75</td>
<td width="95">99</td>
<td width="95">87</td>
</tr>
</tbody>
</table>
该表格包含4行4列，其中第一行设置了跨3列的合并形式，在浏览器中的效果如图3.21所示。
图3.21
3.4.6表单标签
视频讲解
表单是HTML文档中用于向用户显示信息，同时获取用户输入信息的网页元素。当数据输入完毕后，单击“提交”按钮，即可将表单内的数据提交到服务器，服务器再根据输入的数据做相应的处理。表单的应用相当广泛，登录注册、网上查询等功能都离不开表单。
1. <form>标签
<form>…</form>标签用于表示一个表单的开始与结束，并且通知服务器处理表单的内容。表单中的各种表单对象都要放在这两个标签之间。<form>标签的常用属性介绍如下：
name——用于指定表单的名称。
action——指定提交表单后，将对表单进行处理的文件路径及名称(即URL)。
method——用于指定发送表单信息的方式，有GET方式(通过URL发送表单信息)和POST方式(通过HTTP发送表单信息)。其中POST方式适合传递大量数据，但速度较慢； GET方式适合传送少量数据，但速度快。
2. <input>标签
<input>标签用于在表单内放置表单对象，此标签不需成对使用。它有一个type属性，对于不同的type值，<input>标签有不同的属性。
(1) 当type＝"text"(文本域表单对象，在文本框中显示文字)或type＝"password"(密码域表单对象，在文本框中显示*号代替输入的文字，起保密作用)时，<input>标签的属性如下：
size——文本框在浏览器中的显示宽度，实际能输入的字符数由 maxlength参数决定。
maxlength——在文本框中最多能输入的字符数。
(2) 当type="submit"(提交按钮，用于提交表单)或type＝"reset"(重置按钮，用于清空表单中已输入的内容)时，<input>标签的属性如下：
value——在按钮上显示的内容。
(3) 当type＝"radio"(单选按钮)或type＝"checkbox"(复选框)时，<input>标签的属性如下：
value——用于设定单选按钮或复选框的值。
checked——可选参数，若带有该参数，则默认状态下该按钮是选中的。同一组radio单选按钮(name属性相同)中最多只能有一个带checked属性。复选框则无此限制。
(4) 当type＝"image"(图像)时，<input>标签的属性如下：
src——图像文件的名称。
alt——图像无法显示时的替代文本。
align——图像的对齐方式，取值可以是top、left、bottom、middle或right。
3. <select>和<option>标签
<select>…</select>标签用于在表单中插入一个列表框对象。它与<option>…</option>标签一起使用，<option>标签用于为列表框添加列表项。
(1) <select>标签的常用属性简要介绍如下：
name——指定列表框的名称。
size——指定列表框中显示多少列表项(行)，如果列表项数目大于size参数值,那么通过滚动条来滚动显示。
multiple——指定列表框是否可以选中多项，默认情况下只能选择一项。
(2) <option>标签有两个可选参数，介绍如下：
selected——用于设定在初始时本列表项是被默认选中的。
value——用于设定本列表项的值，如果不设此项，则默认为标签后的内容。
在Dreamweaver的“代码”视图的<body>...</body>标签之间输入以下代码：
<form method="post">
<select name="balls" size="3" multiple>
<option selected>足球</option>
<option selected>羽毛球</option>
<option selected>乒乓球</option>
<option selected>羽毛球</option>
</select><p>
<input type="submit"><input type="reset"></p>
</form>
图3.22
保存文档，并按F12键在浏览器中查看显示效果，如图3.22所示。
4. <textarea>标签
<textarea>…<textarea>标签的作用与<input>标签的type属性值为text时的作用相似，二者的不同之处在于，<textarea>显示的是多行多列的文本区域，而<input>文本框只有一行。<textarea>和</textarea>之间的文本是文本区域的初始文本。
<textarea>标签的常用属性如下：
name——指定文本区域的名称。
rows——文本区域的行数。
cols——文本区域的列数。
wrap——用于设置是否自动换行，取值有off(不换行，是默认设置)、soft(软换行)和hard(硬换行)。
在Dreamweaver的“代码”视图的<body>…</body>标签之间输入以下代码：
<form method="post">
<textarea name="content" rows="5" cols="30">
个人简介
</textarea><br>
<input type="submit"><input type="reset">
</form>
保存文档，并按F12键在浏览器中预览显示效果，如图3.23所示。
图3.23
视频讲解
3.4.7其他标签
1. <img>标签
图像可以使页面更加生动美观。在HTML文本中可以通过<img>标签来为页面插入图像，该标签除src属性不可缺少以外，其他属性均为可选项。其属性如下所示：
src——用于指定要插入图像的地址和名称。
alt——用于设置当图像无法显示时的替换文本。
width和 height——用于设置图片的宽度和高度。
2. <a>标签
HTML最显著的优点就在于它支持文档的超级链接，可以很方便地在不同文档以及同一文档的不同位置之间跳转。HTML是通过链接标签<a>实现超级链接的，<a>标签是封闭性标签，其起止标签之间的内容即为锚标。<a>标签有两个不能同时使用的属性href和name，此外还有target属性等，分别介绍如下。
href——用于指定目标文件的URL地址或页内锚点。
当超级链接要链接到页内锚点时，应采用如下格式：
<a href="#…">…</a>
href后的第一个省略号为命名锚点的名字。
<a>标签使用此属性后，在浏览器中单击锚标，页面将跳转到指定的页面或本页中指定的锚点位置。例如：
<a href＝"url">单击这里</a>
表示当单击链接文本“单击这里”时，会打开url所指向的文件页面。
<a href="http://www.baidu.com">百度</a>
表示当单击链接文本“百度”时，将会打开http://www.baidu.com网页。
name——用于标识一个目标，该目标终点在一个文件中指定。例如：
<a name="name">text</a>
target——用于设定打开新页面所在的目标窗口。如果当前页面使用了框架技术，还可以把target设置为框架名。例如：
<a href="http://www.baidu.com" target="main">锚点链接</a>
表示当单击链接文字“锚点链接”时，将链接的页面在名为main的框架中打开。
3. <meta>标签
<meta>标签是实现元数据的主要标签，它能够提供文档的关键字、作者、描述等多种信息。在HTML的头部可以包括任意数量的<meta>标签。<meta>标签是非成对使用的标签，常用属性介绍如下：
name——用于定义一个元数据属性的名称。
content——用于定义元数据的属性值。
httpequiv——可以用于替代name属性，HTTP服务器可以使用该属性从HTTP响应头部收集信息。
charset——用于定义文档的字符解码方式。
4. <link>标签
<link>标签定义了文档的引用关系，通常用于链接外部样式表。它把CSS写到一个扩展名为.css的文件中，主要用于多个页面排版风格的统一控制，避免单个页面重复地设置CSS样式。<link>是一个非封闭性标签，只能在<head>…</head>中使用。
在HTML的头部可以包含任意数量的<link>标签。<link>标签有很多属性，下面介绍一些常用的属性：
href——用于设置链接资源所在的URL。
title——用于描述链接关系的字符串。
rel——用于定义文档和所链接资源的链接关系，可能的取值有Alternate(定义交替出现的链接)、Stylesheet(定义一个外部加载的样式表)、Start(通知搜索引擎,文档的开始)、Next(记录文档的下一页,以告知浏览器下面要加载的页面）、Prev(记录文档的上一页，即定义浏览器的后退键)、Index(当前文档的索引)、Glossary(词汇)、Copyright(当前文档的版权)、Chapter(当前文档的章节)、Section(作为文档的一部分)、Subsection(作为文档的一部分)、Appendix(定义文档的附加信息)、Help(链接帮助信息)、Bookmark(书签)等。如果希望本页指定不止一个链接关系，可以在这些值之间用空格隔开。
rev——用于定义文档和所链接资源之间的反向关系。其可能的取值与rel属性相同。
例如，下面的语句链接了一个外部的样式表：
<link rel="stylesheet" type="text/css" href="theme.css" />
5. <bgsound>标签
<bgsound>标签常用于在网页中添加背景音乐，常用的两个属性为src属性和loop属性。
src属性用于设置要加载的背景音乐的URL地址。
loop属性用于设置背景音乐播放的循环次数。当loop属性值设置为-1时，表示背景音乐无限循环播放，直到页面被关闭。
例如，<bgsound src="毛不易 - 无问.mp3" loop="3"></bgsound>表示添加网页相同目录下的“毛不易 - 无问.mp3”文件作为背景音乐，并设置循环播放次数为3次。
6. <style>标签
<style>…</style>标签用于在网页中创建样式（也叫嵌入样式表），它把CSS直接写入HTML的head部分，这是CSS最为典型的使用方法。在制作网站时不建议这样使用，应将网页结构与样式分离，便于维护。
在<style>标签中可以创建多个不同的命名样式。文档内容可以直接运用这些定义好的样式。例如：
<style type="text/css">
body {
background-color: #B39797;
}
a:link{
color: #FFFFF0;
text-decoration: none;
}
a:visited{
color: #8B8963;
text-decoration: none;
}
a:hover{
color: #F80004;
text-decoration: none;
}
a:active{
color: #166016;
text-decoration: none;
}
</style>
在上面的代码中，<style>标签定义了5个样式,分别用于设置页面背景颜色、未访问
过的链接颜色、已访问过的链接颜色、当前链接和活动链接颜色。如果要在文本中应用上述样式，可以在文字修饰标签中应用class属性和属性值。例如：
<font class="a:active">我的主页</font>
视频讲解
3.5CSS的基本语法
CSS语句是内嵌在HTML文档内的，所以编写CSS的方法和编写HTML文档的方法是一样的，可以用任何一种文本编辑工具来编写，比如 Dreamweaver、 Windows下的记事本和写字板以及专门的HTML文本编辑工具(Frontpage、 UltraEdit等)。
CSS的代码都是由一些最基本的语句构成的，其基本语句的语法如下：
selector{property:value;}
其中，property:value指的是样式表定义，property表示属性，value表示属性值，属性与属性值之间用冒号(:)隔开，各个属性之间用分号(;)隔开，因此以上语法也可以表示如下：
选择符｛属性1:属性值1;属性2:属性值2;｝
selector是选择符，一般都是定义HTML样式的标签，比如table、body、p等，代码示例如下：
p {font-size: 48; font-style: bold; color: red}
这里p表示定义段落内的格式，fontsize、 fontstyle和 color是属性，分别用于定义p中字体的大小(size)、样式(style)和颜色(color)，而48、bold、red是属性值，意思是以48pt、粗体、红色的字体样式显示该段落。
3.6伪类、伪元素及样式表的层叠顺序
3.6.1伪类和伪元素
一般来说，选择符可以和多个类采用捆绑的形式来设定，不过这样虽然能够为同一个选择符创建多个样式，但同时也限制了所设定的类不能被其他选择符所使用。伪类的产生就是为了解决这个问题，每个预声明的伪类都可以被所有的HTML标识符引用，当然有些块级内容的设置除外。
伪类和伪元素是CSS中特殊的类和元素，它们能够自动被支持CSS的浏览器所识别。伪类可以用于文档状态的改变、动态的事件等，例如，visited links(已访问链接)和 active links(可激活链接)描述了两个定位锚(anchors)的类型。伪元素指元素的一部分，例如，段落的第一个字母。
伪类或伪元素规则的形式有两种，分别如下：
选择符:伪类｛属性： 属性值｝
选择符:伪元素｛属性： 属性值｝
CSS类也可以与伪类、伪元素一起使用，有两种表示方式，分别如下：
选择符.类:伪类｛属性： 属性值｝
选择符.类:伪元素｛属性： 属性值｝
1. 定位锚伪类
伪类可以指定以不同的方式显示链接(links)、已访问链接(visited links)和可激活链接(active links)。
一个有趣的效果是使当前链接以不同颜色、更大的字体显示，然后当网页的已访问链接被重选时，又以不同颜色、更小字体显示，这个样式表的示例如下：
a:link {color: red;}
a:active{color: blue;font-size: 200%}
a:visited{color: black;font-size: 50%}
2. 首行伪元素
通常在报纸上文章的文本首行都会以粗体且全部大写展示，CSS也具有这个功能，可将其作为一个伪元素。首行伪元素可用于任何块级元素，例如p、hl等，以下是一个首行伪元素的例子：
p:first-line {font-variant: small-caps;font-weight: bold}
3. 首字母伪元素
首字母伪元素用于drop caps(下沉行首大写字母)和其他效果。首字母伪元素可用于任何块级元素，例如以下代码：
p:first-letter{font-size: 500%; float: left}
以上代码表示首字母的显示效果比普通字体加大5倍。
3.6.2样式表的层叠顺序
当使用了多个样式表时，样式表需要指定选择符的控制权。在这种情况下，总会有样式表的规则能获得控制权，以下的特性将决定互相对立的样式表的结果。
1. ！important
可以用！important把样式特指为重要的样式，一个重要的样式会大于其他相同权重的样式。以下是！important声明的例子：
body {background: url(01.gif)white; background-repeat: repeat-x ! important}
2. 设计者样式和浏览者样式
网页设计者和浏览者都有能力去指定样式表，当两者的规则发生冲突时，在相同权重的情况下，网页设计者的规则会高于浏览者的规则。但网页设计者和浏览者的样式表都高于浏览器的内置样式表。
网页设计者应该谨慎使用！important规则，例如，用户可能会要求以大字体显示或以指定颜色显示，因为这些样式对于用户阅读网页是极为重要的。任何！important规则都会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。
3. 特性的顺序
为了方便使用，当两个规则具有同样的权重时，取后面的那个规则。
3.7CSS的各种属性
从CSS的基本语句就可以看出，属性是CSS非常重要的部分。熟练掌握CSS的各种属性会使工作更加简单。下面就介绍CSS中的几种重要属性。
3.7.1CSS中的字体以及文本控制
1. 字体属性
视频讲解
字体属性是最基本的属性，网页制作中经常都会使用到，它主要包括以下这些属性。
1) fontfamily
fontfamily是指使用的字体名称，其属性值可以选择本机上所有的字体，基本语法如下：
font-family:字体名称
代码示例如下：
<p style="font-family: '微软雅黑'">网页制作第三章学习</p>
图3.24
这行代码定义了文本“网页制作第三章学习”将以微软雅黑的字体显示，如图3.24所示。
如果在fontfamily后加上多种字体的名称，浏览器会按字体名称的顺序逐一在用户的计算机中寻找已经安装的字体，一旦遇到与要求相匹配的字体，就按这种字体显示网页内容并停止搜索。如果不匹配就继续搜索直到找到为止。如果样式表中的所有字体都没有安装，浏览器就会用自己默认的字体来显示网页内容。
2) fontstyle
fontstyle是指字体是否使用特殊样式，属性值为italic(斜体)、bold(粗体)、 oblique(倾斜)，其基本语法如下：
font-style:特殊样式属性值
代码示例如下：
<p style="font-style: italic">网页制作第三章学习</p>
图3.25
这行代码定义了fontstyle属性为斜体(italic)，显示效果如图3.25所示。
3) texttransform
texttransform用于控制文字的大小写。该属性可以使网页的设计者不用在输入文字时就确定文字的大小写，而是在输入完毕后，根据需要对局部的文字设置大小写。其基本语法如下：
text-transform: 大小写属性值
控制文字大小写的属性值如下：
uppercase表示所有文字大写显示。
lowercase表示所有文字小写显示。
capitalize表示每个单词的首字母大写显示。
none表示不继承母体的文字变形参数。
4) fontsize
fontsize定义字体的大小，其基本语法如下：
font-size:字号属性值
5) textdecoration
textdecoration表示文字的修饰，文字修饰的主要用途是改变浏览器显示文字链接时下画线的样式，其基本语法如下：
text-decoration:下画线属性值
下画线属性值的相关介绍如下：
underline——为文字加下画线。
reline——为文字加上画线。
linethrough——为文字加删除线。
blink——使文字闪烁。
none——不显示上述任何效果。
2. 文本属性
1) wordspacing
wordspacing表示单词词间距。单词词间距指的是英文单词之间的距离，不包括中文文字，其基本语法如下：
word-spacing： 间隔距离属性值
间隔距离的属性值为带单位（points、em、pixels、in、cm、mm、pc、ex）的值和normal等。
2) letterspacing
letterspacing表示字母间距，字母间距是指英文字母之间的距离。该属性的功能、用法以及参数设置和wordspacing很相似，其基本语法如下：
letter-spacing： 字母间距属性值
字母间距的属性值与单词间距相同，分别为带单位（points、em、pixels、in、cm、mm、pc、ex）的值和normal等。
3) lineheight
lineheight表示行距，行距是指上下两行基准线之间的垂直距离。一般来说，英文五线格练习本从上往下数的第三条横线就是计算机所认为的该行的基准线。lineheight基本语法如下：
line-height: 行间距属性值
关于行距的取值，不带单位的值是以1为基数，相当于比例关系的100％； 带长度单位的值是以具体的单位为准。
如果文字字号很大，而行距相对较小，那么可能会发生上下两行文字互相重叠的现象。
4) textalign
textalign表示文本水平对齐的方式，该属性可以控制文本的水平对齐，而且并不仅仅针对文字内容，也包括设置图片、影像资料的对齐方式，其基本语法如下：
text-align: 属性值
textalign的属性值分别介绍如下。
left——左对齐。
right——右对齐。
center——居中对齐。
justify——两端对齐。
注意：
textalign是块级属性，只能用于<p>、<blockquote>、<ul>、<h1>~<h6>等标识符中。
5) verticalalign
verticalalign表示文本垂直对齐的方式。文本的垂直对齐是相对于文本母体的位置而言的，而不是指文本在网页里垂直对齐。例如，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。verticalalign的基本语法如下：
vertical-align: 属性值
verticalalign的属性值分别介绍如下：
top——顶端对齐。
bottom——底端对齐。
texttop——相对文本顶端对齐。
textbottom——相对文本底端对齐。
baseline——基线对齐。
middle——中心对齐。
sub——以下标的形式显示。
super——以上标的形式显示。
6) textindent
textindent表示文本的缩进，主要用于中文版式的首行缩进，或是将大段的引用文本和备注做成缩进的格式，其基本语法如下：
text-indent: 缩进距离属性值
缩进距离属性值可以是带长度单位的值或是比例关系。
注意：
在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，但其实并非如此，整个浏览器窗口才是浏览器所默认的参照物。另外，textindent是块级属性，只能用于<p>、<blockquote>、<ul>、<h1>~<h6>等标识符中。
视频讲解
3.7.2CSS中的颜色及背景控制
CSS中的颜色及背景控制主要是对颜色属性、背景颜色、背景图像、背景图像的重复、背景图像的固定和背景定位这6个部分的控制。
1. 对颜色属性的控制
颜色属性允许网页制作者指定一个元素的颜色，其基本语法如下：
color: 颜色参数值
颜色取值可以用RGB值表示，也可以使用十六进制数字色标值表示，或者以默认颜色的英文名称表示。以默认颜色的英文名称表示无疑是最为方便的，但由于预定义的颜色种类太少，因此更多的网页设计者会用RGB方式或十六进制的数字色标值。RGB方式可以用数字的形式精确地表示颜色，也是很多图像制作软件(比如Photoshop)默认使用的规范。
2. 对背景颜色的控制
在HTML中，要为某个对象加上背景色只有一种方式，即先做一个表格，在表格中设置完背景色，再把对象放进单元格中。这样做比较麻烦，不但代码较多，而且表格的大小和定位也有些麻烦。而使用CSS则可以解决这些问题，且对象的范围广，可以是一段文字，也可以只是一个单词或一个字母。背景颜色控制的基本语法如下：
background-color: 参数值
属性值同颜色属性取值相同，可以用RGB值表示，也可以使用十六进制数字色标值表示，或者以默认的英文名称表示，其默认值为transparent(透明)。
3. 对背景图像的控制
对背景图像的控制的基本语法如下：
background-image:url(URL)
URL就是背景图像的存放路径。如果用none来代替背景图像的存放路径，则不显示图像。用该属性来设置一个元素的背景图像，其代码如下：
body{background-image:url(images/01.jpg)}
p{background-image:url(http://baidu.com/bg.png)}
4. 对背景图像重复的控制
背景图像重复控制的是背景图像是否平铺。当属性值为norepeat时，不重复平铺背景图像； 当属性值为repeatx时，图像只在水平方向上平铺； 当属性值为 repeaty时，图像只在垂直方向上平铺。也就是说，结合背景定位的控制，可以在网页上的某处单独显示一幅背景图像。背景图像重复控制的基本语法如下：
background-repeat: 属性值
如果不指定背景图像重复的属性值，那么浏览器默认的是背景图像在水平、垂直两个方向上同时平铺。
5. 背景图像固定控制
背景图像固定控制用于指定背景图像是否随网页的滚动而滚动。如果不设置背景图像固定属性，那么浏览器默认背景图像随网页的滚动而滚动。背景图像固定控制的基本语法如下：
background-attachment: 属性值
当属性值为fixed时，网页滚动时背景图像相对于浏览器的窗口固定不动； 当属性值为scroll时，背景图像随浏览器的窗口一起滚动。
6. 背景定位控制
背景定位用于控制背景图像在网页中的显示位置，基本语法如下：
background-position: 属性值
backgroundposition的属性值分别介绍如下：
top——相对前景对象顶端对齐。
bottom——相对前景对象底端对齐。
left——相对前景对象左对齐。
right——相对前景对象右对齐。
center——相对前景对象中心对齐。
视频讲解
3.7.3CSS中边框的控制属性
CSS样式表定义了一个容器(Box)，它可以存储一个对象的所有可操作的样式，各个方面之间的关系如图3.26所示。
图3.26
1. 边界
如图3.26所示，边界位于Box模型的最外层，包括4项属性，分别如下：
margintop——顶部空白距离。
marginright——右边空白距离。
marginbottom——底部空白距离。
marginleft——左边空白距离。
空白距离可以用带长度单位的值表示。如果使用上述属性的简化方式margin，可以在其后连续加上4个带长度单位的值，设置元素相应边与框边缘之间的相对或绝对距离，有效单位为mm、cm、in、pixels、pt、pica、ex和em。
以父元素宽度的百分比设置边界尺寸或是auto(自动)，这个设置取浏览器的默认边界，分别表示margintop、marginright、marginbottom、marginleft，每个数字中间要用空格分隔，例如以下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body bgcolor="#FFFFFF">
<p style="background:#FFF500; font-size: 30px; margin-top:auto">margin</p>
<p style="background:#C7C7C7; font-size: 16px; margin-left: 70px;margin-right: 50px">margin</p>
</body>
</html>
将以上代码保存，在浏览器中打开，效果如图3.27所示。
图3.27
2. 边框
边框位于边框空白和对象间隙之间，包括了7项属性，分别如下：
bordertop——顶边框宽度。
borderright——右边框宽度。
borderbottom——底边框宽度。
borderleft——左边框宽度。
borderwidth——所有边框宽度。
bordercolor——边框颜色。
borderstyle——边框样式参数。
其中,borderwidth可以一次性设置所有的边框宽度。用bordercolor同时设置4条边框的颜色时，可以连续写上4种颜色并用空格分隔，连续设置的边框都是按bordertop、borderright、borderbottom、borderleft的顺序。borderstyle相对其他属性而言稍微复杂，因为它还包括了多个边框样式的参数。
none——无边框。
dotted——边框为点线。
dashed——边框为长短线。
solid——边框为实线。
double——边框为双线。
groove——定义3D凹槽边框。
ridge——定义3D垄状边框。
inset——定义3D内嵌边框。
outset——定义3D外凸边框。
3. 填充
填充即填充距，指的是文本边框与文本之间的距离，位于对象边框和对象之间，包括了4项属性，分别如下：
paddingtop——顶部间隙。
paddingright——右边间隙。
paddingbottom——底部间隙。
paddingleft——左边间隙。
与margin类似，也可以用padding一次性设置所有的对象间隙，格式与margin相似。
3.7.4CSS中的分类属性
在HTML中，用户无须使用前面提到的一些字体、颜色、容器属性来对字体、颜色、边距、填充距等进行初始化，因为在CSS中已经提供了进行分级的专用分类属性。
1. 显示控制样式
显示控制样式的基本语法如下：
display:属性值
各属性值如下：
block(默认)——在对象前后都换行。
inline——在对象前后都不换行。
listitem——在对象前后都换行且增加了项目符号。
none——无显示。
2. 空白控制样式
空白属性决定如何处理元素内的空格。空白控制样式的基本语法如下：
white-space: 属性值
各属性值如下：
normal——把多个空格替换为一个空格。
pre——按输入显示空格。
nowrap——禁止换行。
注意：
whitespace也是一个块级属性。
3. 列表项前的项目编号控制
控制列表项前面的项目编号的基本语法如下：
list-style-type: 属性值
各属性值如下：
none——无强调符。
disc——圆形强调符(实心圆)。
circle——圆形强调符(空心圆)。
square——方形强调符(实心)。
decimal——十进制数强调符。
lowerroman——小写罗马字强调符。
upperroman——大写罗马字强调符。
loweralpha——小写字母强调符。
upperalpha——大写字母强调符。
4. 在列表项前加入图像
在列表项前加入图像的基本语法如下：
list-style-image: 属性值
属性值为url时，指定的是所加入图像的URL地址； 属性值为none时，表示不加入图像。例如以下代码：
ul. check list-style-image: url(/li-markers/checkmark.gif);
ul lix1 list-style-image: url(x. png);
5. 目录样式位置
目录样式位置的基本语法如下：
list-style-position: 属性值
目录样式用于设置强调符的缩排或伸排，这个属性可以让强调符突出于清单以外或与清单项目对齐。
各属性值如下：
inside——内部缩排，将强调符与清单项目内容左边界对齐。
outside——外部伸排，强调符突出到清单项目内容左边界以外。
其中，outside是默认值。整个属性决定关于目录项的标记应放在哪里。如果使用inside值，换行会移到标记下，而不是缩进。
6. 目录样式
目录样式属性是目录样式类型、目录样式位置和目录样式图像属性的缩写，它将所有目录样式属性放在一条语句中，基本语法如下：
list-style: 属性值
其属性值为“目录样式类型”“目录样式位置”或url。
以下是一个关于分类属性的例子。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style type="text/css">
p {
display: block;white-space: normal
}
em {
display: inline;
}
body ul li {
display: list-item;
list-style-type: square;
}
body p img {
display: block;
}
</style>
</head>
<body>
<p>
<em>sample</em>text<em>sample</em>text<em>sample</em>
text<em>sample</em> text<em>sample</em>
</p>
<ul>
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ul>
<p><img src="1 - 副本.jpg" width="200" height="133" alt=""/></p>
</body>
</html>
图3.28
上述代码的显示效果如图3.28所示。
7. 控制鼠标指针属性
当把鼠标指针移动到不同的地方时，或当鼠标指针需要执行不同的操作时，或当系统处于不同的状态时，都会使指针的形状发生改变。也可以用CSS来改变鼠标指针的属性，就是当鼠标指针移动到不同的元素对象上面时，让指针以不同的形状、图案显示。在CSS中，这种样式是通过cursor属性来实现的，其基本语法如下：
cursor: 属性值
属性值为auto、 crosshair、 default、hand、move、help、wait、text、wresize、sresize、nresize、eresize、swresize、seresize、nwresize、pointer和url，它们所代表的含义如下。
style＝"cursor:hand"——手形。
style＝"cursor:crosshair"——十字形。
style＝"cursor:text"——文本形。
style＝"cursor:wait"——沙漏形。
style＝"cursor:move"——十字箭头形。
style＝"cursor:help"——问号形。
style＝"cursor:eresize"——右箭头形。
style＝"cursor:nresize"——上箭头形。
style＝"cursor:nwresize"——左上箭头形。
style＝"cursor:wresize"——左箭头形。
style＝"cursor:sresize"——下箭头形。
style＝"cursor:seresize"——右下箭头形。
style＝"cursor:swresize"——左下箭头形。
示例代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标效果</title>
</head>
<body>
<h1 style="font-family: '宋体'">鼠标效果</h1>
<p style="font-family: '华文楷体';font-size: 20px;color: #034EFB">把鼠标移到相应的位置观看效果。</p>
<div style="font-family: '微软雅黑';font-size: 24px;color: #252525">
<p><span style="cursor: hand">手的形状</span></p>
<p><span style="cursor: move">移动</span></p>
<p><span style="cursor: ne-resize">反方向</span></p>
<p><span style="cursor: wait">等待</span></p>
<p><span style="cursor: help">求助</span></p>
</div>
</body>
</html>
将代码保存并用浏览器打开，效果如图3.29所示。
图3.29
视频讲解
3.8本章范例
3.8.1index网页区域的制作
该部分由3个div和1个table组成，3个div分别为jsdk、content和btn，如图3.30所示。
图3.30
(1) 新建一个文件夹，命名为03start。将“lesson03/范例/03complete”文件夹中的images文件夹复制到该文件夹内。
(2) 打开Dreamweaver CC 2018，新建站点，站点名称为03start，站点文件夹为刚才新建的03start文件夹，如图3.31所示。
图3.31
(3) 在Dreamweaver CC 2018中新建一个HTML文件，然后执行“文件”→“保存”命令，将文件保存为start.html。
图3.32
(4) 切换到“拆分”视图，将title标签间的文字更改为“阅读”，如图3.32所示。
(5) 执行“窗口”→“属性”命令，出现“属性”窗口。选中body标签，在属性窗口中单击“页面属性”，弹出“页面属性”对话框，设置背景图像如图3.33所示。
图3.33
(6) 切换到“设计”视图，将光标置于页面中，执行“插入”→Div命令，打开 “插入 Div” 对话框，在ID文本框中输入jsdk，如图3.34所示。
图3.34
(7) 设置完成后单击“确定”按钮，即可在页面中插入名称为jsdk的div。将多余的文本内容删除，输入“精神的壳”文字，然后逐字添加链接，如图3.35所示。最终代码效果如图3.36所示。
图3.35
图3.36
(8) 为链接效果应用class属性和属性值，最后代码如下：
<a href="#" class="bian">精</a>
<a href="#" class="bian">神</a>
<a href="#" class="bian" >的</a>
<a href="#" class="bian">壳</a>
(9) 制作字体放大镜效果，为其添加相应的样式。选择 “CSS设计器”→“”(添加CSS源)→“在页面中定义”，然后添加“选择器”，输入.bian，在“属性”面板中设置如图3.37所示的属性值。
图3.37
(10) 设置鼠标指针移动到字体上之后的效果。添加“选择器”，输入.bian:hover，在“属性”面板中设置如图3.38所示的属性值。切换到“实时”视图，预览效果如图3.39所示。
图3.38
图3.39
(11) 制作文本效果。在名为jsdk的div之后，插入一个名为content的div，然后在其内部再插入名为content1和content2的div，并添加相应文本，代码如下。
<div id="content">
<div id="content-1">孤独者的<br>温柔书单</div>
<div id="content-2">用文字，温柔地推翻这个世界</div>
</div>
(12) 为文本添加效果样式。在“CSS设计器”中添加“选择器”，输入#content，将其float属性设置为左浮动。
(13) 将光标置于“代码”视图中的名为content1的div上，在“CSS设计器”中添加“选择器”，自动显示#content #content1，如图3.40所示，设置属性值如图3.41所示。
图3.40
图3.41
(14) 用与上一步相同的方法，添加 “选择器”#content #content2，设置属性值如图3.42所示。最后的文字效果如图3.43所示。
图3.42
图3.43
(15) 制作表格区域。将光标置于名为content的div之后，执行“插入”→Table命令，插入一个4行4列、宽度为800像素的表格，如图3.44所示。
图3.44
(16) 将光标置于<tbody>标签上，在“属性”面板中设置单元格水平“居中对齐”、垂直“居中”，“宽”为800，“高”为200，如图3.45所示。
图3.45
(17) 在表格中输入如图3.46所示的文字，然后分别选中每个表格的文字，为其添加链接并应用class属性，如图3.47所示。
图3.46
图3.47
(18) 设置表格内的字体样式。在CSS设计器中添加选择器，输入body table，设置如图3.48所示的属性值，效果如图3.49所示。
图3.48
图3.49
(19) 为每个小表格添加边框,代码如下：
tbody tr td {
border: 1px dotted rgba(180,180,180,1.00);
}
(20) 为链接添加样式。在CSS设计器中添加选择器，分别输入.shu和.shu:hover，属性设置如图3.50和图3.51所示，预览效果如图3.52所示。
图3.50
图3.51
图3.52
(21) 最后制作导航到books.html网页的导航按钮。在table标签之后，执行“插入”→Div命令，在“设计”视图中输入“了解更多”，并为其加上链接，代码如下：
<a class="btn" href="books.html">了解更多</a>
然后为链接添加样式。在CSS设计器中添加选择器，分别输入.btn、.btn:hover,.btn:focus、.btnlarge，属性设置如图3.53~图3.56所示。
图3.53
图3.54
图3.55
图3.56
3.8.2books网页区域的制作
图3.57
该部分由一个table和一个div组成，如图3.57所示。
(1) 新建一个HTML文件，然后执行“文件”→“保存”命令，将文件保存为books.html。切换到“拆分”视图，将title标签间的文字更改为“书类”。
(2) 执行“窗口”→“属性”命令，出现“属性”窗口。选中body标签，在“属性”窗口中单击“页面属性”，弹出“页面属性”对话框，设置背景图像如图3.58所示。
图3.58
(3) 新建制作表格区域。将光标置于页面中，执行“插入”→Table命令，插入一个13行2列、宽度为800像素的表格，如图3.59所示。
(4) 在“CSS设计器”中添加“选择器”，输入body table，设置如图3.60所示的属性值。
(5) 在“属性”窗口中设置表格第一列单元格的属性如图3.61所示，第二列单元格的属性如图3.62所示。
(6) 在表格的第一列第一行单元格中设置背景图片为“image/3.jpg”，并输入文字“上海译文”； 在表格的第二列第一行中输入文字“以译介和传播世界各民族优秀文化为己任，专注出版国际文坛举足轻重的名家名作，享有良好的声誉。”表格的第一行代码如下，效果如图3.63所示。
图3.59
图3.60
图3.61
图3.62
图3.63
<tr>
<td width="300" height="200" background="image/3.jpg" align="left" valign="top" >上海译文</td>
<td height="202">以译介和传播世界各民族优秀文化为己任，专注出版国际文坛举足轻重的名家名作，享有良好的声誉。</td>
</tr>
(7) 接下来的12行与第1行插入方法相同，所以按照第（7）步的方法添加内容即可，代码参照范例文件。
(8) 最后制作导航到index.html网页的导航按钮。在table标签之后，执行“插入”→Div命令，在“设计”视图中输入“返回”，并为其加上链接，代码如下：
<a class="btn" href="index.html">返回</a>
然后为链接添加样式。在“CSS设计器”中添加选择器，分别输入.btn、.btn:hover,.btn:focus、.btnlarge，属性设置如图3.64~图3.66所示。最终效果如图3.1所示。
图3.64
图3.65
图3.66
作业
一、 模拟练习
打开 “lesson03/模拟/03complete/index.html”文件进行预览，根据本章所述知识做一个类似的作品。作品资料已完整提供，获取方式见前言。
二、 自主创意
自主设计制作一个网页，应用本章所学习知识，熟练使用HTML标签和CSS样式进行网页设计。
三、 理论题
1. HTML的基本结构是什么？
2. 什么是CSS的id属性？
3. 什么是CSS的class属性？
4. 什么是span元素？