3.1 添加网页文本

文本是网页主页元素之一，一般以普通文字、段落或各种项目符号等形式进行显示。由于文本具有易于编辑、存储空间小等优点，因此在网站制作中具有不可替代的地位。

3.1.1 添加普通文本

普通文本的添加一般可以通过直接输入和选择性粘贴2种方法来实现。

1. 直接输入文本

直接输入是创建网页文本最常用的方法，用户只需要在body标签中输入文本即可。如若用户借助网页制作软件，例如Dreamweaver软件，则需要在【设计】视图下直接输入文本，如下图。

2. 粘贴外部文本

在编辑网页内容时，对于篇幅比较长的文本，则可以直接将外部文本复制到网页文件中。在HTML代码中，所粘贴的文本仅仅是文字，而不包含格式。

如若用户借助Dreamweaver软件制作网页，则需要借助“选择性粘贴”功能，只粘贴文本，而不粘贴文本中的格式。

例如，在某个网页中复制一段文本，切换到Dreamweaver文档中，执行【编辑】|【选择性粘贴】命令，按下Ctrl+V组合键，在弹出的【选择性粘贴】对话框中，选择所需粘贴的文本样式，单击【确定】按钮即可，如下图。

在【选择性粘贴】对话框中，主要包括下列选项。

□ 仅文本 仅粘贴文本字符，不保留任何字体格式。

□ 带结构的文本 粘贴包含段落、列表和表格等结构的文本。

□ 带结构的文本以及基本格式 粘贴包含段落、列表、表格，以及粗体和斜体的文本。

□ 带结构的文本以及全部格式 粘贴包含段落、列表、表格，以及粗体、斜体和色彩等所有样式的文本。

□ 保留换行符 启用该复选框，在粘贴文本时，将自动添加换行符号。

□ 清理Word段落间距 启用该复选框，在复制Word文本后将自动清除段落间距。

□ 将智能引号转换为直引号 启用该复选框，在粘贴文本时将自动将智能引号转换为直引号。

□ 粘贴首选参数 单击该按钮，可以在弹出的【首选项】对话框中设置粘贴首选项。

3.1.2 添加特殊字符

在制作网页时，经常会遇到一些特殊的行业信息，例如数学、物理和化学中的一些特殊符号等。

对于这些特殊符号，HTML以&开头，否则HTML会将特殊符号当成字符来处理。例如，当需要输入小于号“<”时，必须使用“<”代表符号“<”。

HTML中一些常用特殊字符的表述方法，如下表所示。

虽然HTML为用户提供了一些特殊字符的表示方法，但在使用时这些方法比较烦琐。为了提高工作效率，用户可以使用下列3种方法，来插入特殊字符。

1. 借助输入法软键盘

对于那些无法使用键盘直接输入的特殊字符，用户可以使用“中文输入法”中的软键盘进行输入。例如，在“搜狗”中文输入法界面中，右击鼠标，在弹出的菜单中选择【软键盘】选项，如下图，弹出特殊符号分类。

在弹出的级联菜单中，选择所需的类型，即可弹出相关的符号。例如，选择【数学符号】选项，在弹出的符号窗口中选择所需要使用的符号即可，如下图。

2. 快速输入空格

HTML内置了快速输入空格功能，用户只需将输入法切换成“中文输入法”，并将输入法的状态调整为“全角”(Shift+空格）状态，然后按下键盘上的空格键，即可快速输入空格了。

但需要注意的是：在HTML中，如果文字与文字之间的空格超过1个，那么从第2个空格开始，HTML会忽略这些空格。

3. 借助网页设计软件

除了上述2种快速输入特殊字符的方法之外，用户还可以借助Dreamweaver软件来实现快速输入。

在Dreamweaver中，执行【插入】|【HTML】|【字符】|【其他字符】命令，在弹出的【插入其他字符】对话框中，选择所需插入的符号，单击【确定】按钮即可，如下图。

3.2 设置文本格式

对于网页中的文本，可以通过设置其格式来增加页面的美观性和层次感。例如，设置文本样式、设置对齐方式和段落样式等。

3.2.1 设置文本样式

HTML样式是HTML4引入的，它是一种新的首选的改变HTML元素样式的方式。通过HTML样式，可以设置一些特殊的文本，例如加粗显示、斜体文本、上标和下标文本等。

1. 加粗显示（加强）

加粗显示（加强）通常以粗体显示、强调方式显示或加强调方式显示。在HTML中，可以使用<b>标记和<strong>标记来实现加粗加强文本显示。下列示例代码中，显示了上述两种标记的具体使用方法和效果。

将上述代码在浏览器中预览，其效果如下图所示。

2. 斜体（强调）

在HTML中，可以使用<em>和<i>标记设置文本的强调内容。对于所有浏览器来说，这意味着要把这段文字用斜体方式呈现给大家显示，这个与html斜体效果相同。

下列示例代码中，显示了上述两种标记的具体使用方法和效果。

将上述代码在浏览器中预览，其效果如下图所示。

3. 上标和下标文本

HTML与Word一样，也可以设置上标和下标文本。在HTML5中，用户可以使用<sup>和<sub>标记，来设置上标和下标文本。

下列示例代码中，显示了上述两种标记的具体使用方法和效果。

将上述代码在浏览器中预览，其效果如下图所示。

4. 下画线和删除线

<u></u>下画线标签告诉浏览器把其加<u>标签的文本加下画线样式呈现给用户。对于所有浏览器来说，这意味着要把这段文字加下画线样式来显示。

而<s></s>标签为删除线标签，告诉浏览器把其加<s>标签的文本文字加删除画线样式（文字中间一道横线）呈现给用户。

例如，下面的代码示例，充分展示了下画线和删除线文本的显示方式。

将上述代码在浏览器中预览，其效果如下图所示。

5. 键盘

<kbd>标签定义键盘文本。说到技术概念上的特殊样式时，就要提到<kbd>标签，它用来表示文本是从键盘上键入的。

例如，下面的代码示例，充分展示了键盘文本的显示方式。

将上述代码在浏览器中预览，其效果如下图所示。

<kbd>标签经常用于计算机相关的文档和手册中，浏览器通常用等宽字体来显示该标签中包含的文本。

6. 引用

<cite>标签通常表示它所包含的文本对某个参考文献的引用，例如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。

例如，下面的代码示例，充分展示了引用文本的显示方式：

通过上述代码，用户可以在浏览器中看到标签中所显示的效果。

用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档。如果引用的这些文档有联机版本，还应该把引用包括在一个<a>标签中，从而把一个超链接指向该联机版本。

<cite>标签还可以从文档中自动摘录参考书目，并可以使浏览器能够以各种实用的方式来向用户表达文档的内容。

7. 定义

<dfn>标签可标记那些对特殊术语或短语的定义，目前流行的浏览器通常用斜体来显示<dfn>标签中的文本。

例如，下面的代码示例，充分展示了定义文本的显示方式。

通过上述代码，用户可以在浏览器中看到标签中所显示的效果，如下图。

8. 已删除

<del>标签是成对出现的，以<del>开始，</del>结束。<del>标签通常应连同<ins>标签一同使用，表示被删除与被插入的文本。

例如，下面的代码示例，充分展示了已删除文本的显示方式。

通过上述代码，用户可以在浏览器中看到标签中所显示的效果，如下图。

9. 已插入

<ins>标签也是成对出现的，以<ins>开始，</ins>结束。<ins>标签通常应连同<del>标签一同使用，表示被插入与被删除的文本。使用<ins>标签定义的文本通常带有下画线。

例如，下面的代码示例，充分展示了已插入文本的显示方式。

通过上述代码，用户可以在浏览器中看到标签中所显示的效果，如下图。

3.2.2 设置对齐方式

在网页编辑文档中，用户也可以像设置Word文档中的文本一样，可以对文本进行对齐方式设置。

1. 居中对齐

“居中对齐”可以调整文字的水平间距，使段落的文字沿水平方向向中间集中对齐，它可以使文章两侧文字整齐地向中间集中，使整个段落都整齐地在页面中间显示。如若需要在编辑状态设计文本为“居中对齐”方式，需要在<p>标签中添加align属性，并设置参数为center。

例如，下面的代码实现了对文本的居中对齐。

使用浏览器预览上述代码，效果如下图所示，实现了“居中对齐”效果。

2. 左对齐

在设计网页时，默认的文本排列方式为左对齐方式。如若需要在编辑状态设计文本为左对齐方式，需要在<p>标签中添加align属性，并设置参数为left。例如，下面的代码实现了对文本的左对齐。

使用浏览器预览上述代码，效果如下图所示，实现了“左对齐”效果。

3. 右对齐

“右对齐”是使段落或者文章中的文字沿水平方向向右对齐的一种对齐方式，它可以使文章右侧文字具有整齐的边缘。如若需要在编辑状态设计文本为“左对齐”方式，需要在<p>标签中添加align属性，并设置参数为right。

例如，下面的代码实现了对文本的“左对齐”。

使用浏览器预览上述代码，效果如下图所示，实现了“右对齐”效果。

3.2.3 设置段落样式

段落样式包括换行、段落和标题等样式，而标题样式又包括“标题1”、“标题2”、“标题3”…“标题6”等样式，既可以应用于文本段落，又可以应用于标题。

1. 设置换行

换行是HTML5中经常使用的样式之一，通过使用<br>单标记来表示强制换行。也就是说，在HTML5中，只需使用<br>或<br/>一个标记便可以完成换行操作。

下面的示例代码中，展示使用<br>但标记强制换行的使用方法和效果。

使用浏览器预览上述代码，效果如下图所示，实现了“左对齐”效果。

2. 设置段落

在HTML中，可以使用<P></P>段落标记来设置段落样式。<P></P>段落标记之间的内容会自动形成一个段落。

下列示例代码中，显示了段落标记的具体使用方法和效果。

使用浏览器预览上述代码，效果如下图所示。

3. 设置标题

标题是文章的眉目。各类文章的标题，样式繁多，但无论是何种形式，总要以全部或不同的侧面体现作者的写作意图、文章的主旨。标题一般分为总标题、副标题、分标题等几种。

在HTML中，各种级别的标题由<h1>到<h6>元素来定义，<h1>到<h6>标题标记中的字母h是英文headline（标题行）的简称。其中<h1>代表1级标题，级别最高，文字也最大，其他标题元素依次递减，<h6>的级别最低。

下面的代码实现了不同级别标题的显示效果。

使用浏览器预览上述代码，效果如下图所示。

4. 编排格式

<pre>标签可定义预格式化的文本，被包围在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体，<pre>标签的一个常见应用就是用来表示计算机的源代码。

在代码中，可以导致段落断开的标签（如标题、<p>和<address>标签）绝不能包含在<pre>标签所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

<pre>标签中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如<a>标签）放到<pre>标签块中时，就像放在HTML/XHTML文档的其他部分中一样即可。

例如，下面的代码在正文第一行插入了<pre>标签，然后在<pre>标签中，对文本进行换行，并插入空格，以测试显示效果。

使用浏览器预览上述代码，效果如下图所示。

3.3 设置文字列表

列表是网页中常见的一种文本排列方式，包括项目列表和项目编号两种样式。通过设置文档列表，不仅可以美化页面，还可以凸显出文本的层次性。

3.3.1 设置单个列表

相同类型的列表相当于Word中的项目符号和自动编号，分为无序列表和有序列表两种类型。

1. 无序列表

无序列表相当于Word中的项目符号，不存在排序，只在文本的开头处显示相应的符号。

在HTML5中，无序列表使用<ul></ul>标记进行表示，并使用<li></li>标记表示无序列表中的各项。

下面的代码实现了无序列表的使用方法和显示效果。

在浏览器中预览，效果如下图所示。读者会发现，在无序列表项中，可以嵌套一个列表。如代码中的“系统分析”列表项和“网页草图”列表项中都有下级列表，因此在这对<li></li>标记间，又增加了一对<ul></ul>标记。

2. 有序列表

有序列表相当于Word中的自动编号，存在编号排序，可在文本的开头处显示编号。

在HMTL5中，有序列表使用<ol></ol>标记来表示，并使用<li></li>标记表示有序列表中的各项。

下面的代码实现了无序列表的使用方法和显示效果。

在浏览器中预览，效果如下图所示。

3.3.2 设置多个列表

多个不同类型的类别包括不同类型的无序列表和不同类型的有序列表两部分内容，无序列表使用<ul>标记进行表示，而有序列表则使用<ol>标记进行表示。

1. 多个无序列表

在HTML中，可以通过使用多个<ul>标记，来创建多个无序列表。下面的代码实现了多个无序列表的使用方法和显示效果。

在浏览器中预览，效果如下图所示。

2. 多个有序列表

在HTML中，可以通过使用多个<ol>标签，来创建多个有序列表。下面的代码实现了多个有序列表的使用方法和显示效果。

在浏览器中预览，效果如下图所示。

3.3.3 设置嵌套列表

嵌套列表是在一个列表中嵌入一个或多个列表，以形成上下级关系。在HTML5中，可以使用<ul>标签制作嵌套列表。下面的代码实现了嵌套列表的使用方法和显示效果。

在浏览器中预览，效果如下图所示。

3.3.4 自定义列表

在HTML5中，除了可以设置无序、有序和嵌套列表之外，还可以使用<dl>标签设置自定义列表。下面的代码实现了自定义列表的使用方法和显示效果。

在浏览器中预览，效果如下图所示。

3.4 使用图像

图像是网页中重要的多媒体元素之一，可以弥补纯文本的单调性，增加网页的多彩性。但是，过多的图像会导致网页的打开速度变慢，因此在设计网页时还需要考虑图像的数目、大小和图形格式等因素。

3.4.1 网页图像格式

网页对图像格式并没有太严格的限制，但由于GIF和JPEG格式的图片文件较小，并且许多浏览器完全支持，因此它们是网页制作中最为常用的文件格式。一般情况下，网页中的图像格式包括下列最常见的6种。

1. JPEG（Joint Photographic Experts Group）

JPEG是Web上仅次于GIF的常用图像格式。JPEG是一种压缩得非常紧凑的格式，专门用于不含大色块的图像。JPEG格式的图像有一定的失真度，但是在正常的损失下，肉眼分辨不出JPEG和GIF图像的差别。而JPEG文件只有GIF文件的1/4大小。JPEG对图标之类的含大色块的图像支持度不大，不支持透明图和动态图。

2. PNG（Portable Network Graphic）

PNG格式是Web图像中最通用的格式。它是一种无损压缩格式，但是如果没有插件支持，有的浏览器可能不支持这种格式。PNG格式最多可以支持32位颜色，但是不支持动画图。

3. GIF（Graphics Interchange Format）

GIF是Web上最常用的图像格式，它可以用来存储各种图像文件。特别适用于存储线条、图标和计算机生成的图像、卡通和其他有大色块的图像。

GIF格式的文件容量非常小，形成的是一种压缩的8位图像文件，所以最多只支持256种不同的颜色。Gif支持动态图、透明图和交织图。

4. BMP（Windows Bitmap）

BMP格式使用的是索引色彩，它的图像具有极其丰富的色彩，可以使用16M色彩渲染图像。此格式一般在多媒体演示和视频输出等情况下使用。

5. TIFF（Tag Inage File Format）

TIFF格式是对色彩通道图像来说最有用的格式，支持24个通道，能存储多于4个通道。TIFF格式的结果要比其他格式更大、更复杂，它非常适合于印刷和输出。

6. TGA（Targa）

TGA格式与TIFF格式相同，都可以用来处理高质量的色彩通道图形。另外，PDD、PSD格式也是存储包含通道的RGB图像的最常见的文件格式。

3.4.2 插入图像

在HTML中，可以使用<img>标记来插入图像，而<img>标记的属性及描述如下表所示。

1. 插入本地图像

在HTML5中插入本地图像，需要使用img标记，以及img标记中的src属性。通过上表，发现src属性用于设置图片文件的路径，是img标记中必须存在的属性。

插入本地图像的语法格式，如下所示：

下列代码显示了在网页中插入本地图像的方法。

在浏览器中预览，效果如下图所示。

2. 插入其他来源的图像

在HTML5中，除了可以插入本地图像之外，还可以插入一些其他来源的图像，例如其他文件夹或服务器中的图片。

下列代码显示了在网页中插入文件中图像的方法。

3.4.3 编辑图像

为网页插入图像之后，还需要根据网页的设计需求，对图像进行一系列的更改和调整，以使图像适应网页的整体布局。

1. 调整图像大小

原始图像添加到网页后，会由于尺寸过大或过小而影响整体布局，此时用户需要设置图片的大小，通过更改图像，使其符合整体布局。

在HTML文档中，可以使用width（宽度）和height（高度）属性来设置图像的大小。下列代码显示了调整图像大小的方法。

在浏览器中预览，效果如下图所示。

2. 设置提示文字

在网页中插入图像之后，为了便于说明和检索图片，还需要为图片设置提示文字。设置提示文字之后，用户只需在浏览器中将鼠标移至图像上方，便会显示提示性文本。

下列代码显示了在网页中设置图像提示文本的方法。

3. 设置网页背景

在HTML5插入图像之后，还可以将图像设置为网页的背景。当将图像设置为网页背景时，如若图像比页面小，则系统会自动重复图片。

下列代码显示了将图像设置为背景的方法。

在浏览器中预览，效果如下图所示。

4. 对齐图像

当用户在网页中插入多张图像时，为了使网页更具有美观性，还需要设置图像的对齐方式，包括居中对齐、底部对齐、顶部对齐等。

下列代码显示了设置图像对齐方式的一些常用方法。

在浏览器中预览，效果如下图所示。

5. 创建图像热点

图像地图指被分为多个区域（热点）的图像，而图像热点隶属于图像地图，可以实现“一图多链”的超链接特效。

图像热点只是在一幅图像中的某一部分区域内包含超链接信息，对于图像中其他未定义的区域不存在任何影响，一般用于导航栏制作和地图多点链接等。

在HTML中，绘制图像热点的示例代码，如下所示。

在上述代码中，首先插入图像“3.jpg”，然后在图像上的“334,87,38”处绘制名为“Map”的圆形热点区域，并设置区域的链接地址、目标和替换名称。在浏览器中预览，效果如下图所示。

3.5 练习：制作数学试题网页

随着互联网的逐渐普及，越来越多的人通过网络来查找自己需要的信息。一些为广大学生提供学习和考试资料的网站也应运而生，如下图，本例将通过插入特殊符号等功能来制作一个数学试题网页。

操作步骤

STEP|01 设置背景样式。首先，在<title></title>标记中间修改网页标题。然后，输入设置背景样式和对齐方式的<style>代码。

STEP|02 制作标题。在<body>和</body>之间，输入数学试卷的标题名称，并将标题样式设置为二级标题。

STEP|03 制作表格。在</h2>后面输入插入表格代码，将表格边框设置为1px，单元格边距和间距分别设置为0px，并将表格的对齐方式设置为“居中对齐”。

STEP|04 将光标定位在表格中的第2行中，插入一个7行1列的表格，并将单元格边距和间距分别设置为1px和5px。

STEP|05 在新插入的表格中，逐行输入试卷内容，设置文本的字体格式，并设置每行的高度和背景色。

STEP|06 将光标放置在第1个表格中的第4行中，插入1个4行2列的嵌套表格，并将单元格边距和单元格间距分别设置为5px和1px。

STEP|07 然后，在嵌套表格中，输入相应的数学试题，并设置其字体格式和单元格的背景颜色。

STEP|08 将方便放置在第1个表格中的第1行中，输入文本内容，设置文本的字体格式，同时设置行高和单元格的背景颜色。用同样的方法，制作剩余的单元格。

3.6 练习：制作导航条

导航条在页面中起到了至关重要的作用，它可以引导用户访问网站中各个页面的内容。导航条按照种类可以分为文字导航和图片导航，而传统的文字导航与CSS样式代码的结合可以呈现出与图片相同的视觉效果。在本练习中，将详细介绍制作导航条的操作方法和实用技巧（参见下图）。

操作步骤

STEP|01 链接CSS文件。首先，在<title></title>标签之间，修改网页标题。然后，在</title>标签下方输入链接CSS文件的代码。

STEP|02 制作首导航栏。在<body></body>标签中间插入Div层，将id设置为“header”，将类设置为“mainLayout”。

STEP|03 紧接着，在该Div标签中插入一个名为“logo”的Div层，在“logo”层后，插入一个名为“banner”的Div层，再在该层中插入一个名为“topNavigator”的Div层。

STEP|04 在“topNavigator”层中输入“登录”文本，并设置该文本的链接方式和链接标题。然后，在</a>标签后面添加“&nbsp;|&nbsp;”代码和“注册”文本，并设置其链接和标题。

STEP|05 使用同样的方法，分别添加其他文本，并设置其链接和标题属性。

STEP|06 制作搜索区域。在“topNavigator”层后面添加一个名为“searchBox”的Div层，并在该层中插入一个表单，并设置其属性。

STEP|07 然后，在表单中分别插入一个域集、标签、文本、选择和“提交”按钮，并设置各对象的属性。

STEP|08 “searchBox”Div层后面，插入一个名为“topSpacing”的Div标签，并在标签之间输入“&nbsp;”代码。

STEP|09 制作导航内容。在</div>和</body>标签之间，插入一个名为“navigator”的Div标签。在该Div中插入一个“mainNavigator”Div层，输入文本并设置其属性。

STEP|10 在该Div层后面，插入一个“searchTag”的Div层，在层内输入相应文本，并设置文本的链接和标题属性。

3.7 新手训练营

提示：本练习中，将运用CSS样式在网页中使用Web字体。首先，在<head>标签内输入CSS样式。然后，在<body>标签内插入Div层，设置段落标记并输入文本。具体代码如下所示。

使用浏览器进行预览，其效果如下图所示。

提示：本练习中，将运用CSS样式来制作一个大学生辩论赛网页。首先，在<head>标签内输入设置Div层的CSS样式，其代码如下所示。

然后，在<body>标签内插入Div层和表格，并设置其内容。使用浏览器进行预览，其最终效果如下图所示。

提示：本练习中，将通过在<head>标签内插入CSS样式的方法，来设置网页的图片背景样式。具体代码如下所示。

使用浏览器进行预览，其效果如下图所示。

提示：本练习中，将运用CSS样式、插入表格、插入图像设置文本格式等功能，制作一个景点介绍网页。最终效果如下图所示。