标签
…标签将标签之间的文本设置成粗体。例如：
文本设置为粗体
…标签将标签之间的文本设置成斜体。例如：
文本设置为斜体
…标签用于将标签之间的文字加以强调。不同的浏览器效果有所不同，通常会设置成斜体。例如：
文字加以强调
上述3个例子在浏览器中的显示效果如图3.12所示。
…(#=1、2、3、4、5、6)标签用于设置标题字体(Header)，有1~6级标题，数字越大字体越小。标题将显示为黑体字。标签自动插入一个空行，不必用标签再加空行。和
标签不一样，<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>无标题文档
margin
margin
将以上代码保存，在浏览器中打开，效果如图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。
以下是一个关于分类属性的例子。
css
sampletextsampletextsample
textsample textsample
图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"——左下箭头形。
示例代码如下：
鼠标效果
鼠标效果
把鼠标移到相应的位置观看效果。
将代码保存并用浏览器打开，效果如图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属性和属性值，最后代码如下：
精
神
的
壳
(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，并添加相应文本，代码如下。
(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) 将光标置于标签上，在“属性”面板中设置单元格水平“居中对齐”、垂直“居中”，“宽”为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命令，在“设计”视图中输入“了解更多”，并为其加上链接，代码如下：
了解更多
然后为链接添加样式。在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
| 上海译文 |
以译介和传播世界各民族优秀文化为己任，专注出版国际文坛举足轻重的名家名作，享有良好的声誉。 |
(7) 接下来的12行与第1行插入方法相同，所以按照第（7）步的方法添加内容即可，代码参照范例文件。
(8) 最后制作导航到index.html网页的导航按钮。在table标签之后，执行“插入”→Div命令，在“设计”视图中输入“返回”，并为其加上链接，代码如下：
返回
然后为链接添加样式。在“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元素？