第 2 章网页中的文字

第2章网页中的文字

2.4 2.2 2.3 2.1 在Dreamweaver中插入文本实践与练习：使用项目列表和编号列表实践与练习：一封家书理解与文字相关的HTML标签

2.5 2.6 2.7 2.8 实践与练习：输入带有下标的公式使用CSS格式化文本在Dreamweaver中用样式表进行文本格式化小结实践与练习：在文档中设置使用CSS

网页中最基本也最常用的是文字。因此在这一章，开始讲解如何在网页中使用文字以及设置文字的方法。本章将首先介绍使用HTML对文本进行设置的方法，然后初步介绍使用CSS进行文本格式化的方法。由于CSS在网页设计中具有十分重要的作用，在本书后续章节中，还会对CSS的使用进行更为深入的介绍。网页中最基本也最常用的是文字。因此在这一章，开始讲解如何在网页中使用文字以及设置文字的方法。本章将首先介绍使用HTML对文本进行设置的方法，然后初步介绍使用CSS进行文本格式化的方法。由于CSS在网页设计中具有十分重要的作用，在本书后续章节中，还会对CSS的使用进行更为深入的介绍。

2.1 理解与文字相关的HTML标签 本书对很多内容的介绍都遵循先讲解HTML标签，再讲解如何在Dreamweaver使用它。例如，本节先脱离Dreameaver环境，用手工编写一些非常简单的HTML网页，目的是使读者理解HTML语言的原理。然后再介绍如何使用Dreamweaver来实现，以提高制作网页的工作效率。

2.1.1 文字排版的简单操作 图2-1 未使用“换行”标签的效果

【例2-1】文字排版示例图2-1 未使用“换行”标签的效果 <html> <head> <title>无换行示例</title> </head> <body>

登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 </body> </html> 其效果如图2-1所示。

2.1.2 换行标签 在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转至下一行。

如果未到换行的位置，就希望强制换行，编写者可以在需要换行的地方，加上“ ”标签。如果未到换行的位置，就希望强制换行，编写者可以在需要换行的地方，加上“ ”标签。

图2-2 使用“换行”标签后的效果

【例2-2】文字换行示例 <html> <head> <title>换行示例</title> </head>图2-2 使用“换行”标签后的效果 <body>

登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 </body> </html> 其效果如图2-2所示。

2.1.3 段落标签 为了使文字段落排列得整齐，在文字段落之间，我们常用“”和“”来做标签。段落的开始用“”标签，段落的结束用“”标签。其中“”标签是可以省略的，因为下一个“”标签的开始就意味着上一个“”标签的结束。

“”标签还有一个属性“ALING”，它用来指明字符显示时的对齐方式，一般值有“CENTER”、“LEFT”、“RIGHT”3种。下面，我们用例2-3和例2-4来说明这个标签的用法。

图2-3 例2-3显示效果

【例2-3】段落标签示例1 <html> <head> <title>段落标签</title> </head> <body>

浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。 无可奈何花落去，似曾相识燕归来。小园香径几徘徊。图2-3 例2-3显示效果 </body> </html> 其效果如图2-3所示。

图2-4 例2-4显示效果

【例2-4】段落标签示例2 <html> <head> <title>段落标签</title> </head> <body>

登鹳雀楼图2-4 例2-4显示效果 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 </body> </html> 其效果如图2-4所示。

2.1.4 文字的大小设置 提供设置字号大小的是“”标签，“”标签有一个属性“SIZE”，通过指定“SIZE”属性就能设置字号大小。“SIZE”属性的有效值范围为1～7，其中默认值为3。我们可以在“SIZE”属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

图2-5 设置文字大小

【例2-5】文字大小设置示例 <html>图2-5 设置文字大小 <head> <title>字号大小</title> </head> <body>

这是size=7的字体 这是size=6的字体 这是size=5的字体 这是size=4的字体 这是size=3的字体

这是size=2的字体 这是size=1的字体 这是size=-1的字体 </body> </html> 其效果如图2-5所示。

2.1.5 文字的字体与样式 HTML提供了定义字体的功能，使用“”标签的“face”属性来完成这个工作。“face”的属性值可以是本机上的任一字体类型，但要注意的是，只有对方的计算机中装有相同的字体才可以在对方的浏览器中出现你预先设计的风格。

图2-6 设置文字字体

【例2-6】文字字体示例 <html> <head> <title>字体</title> </head> <body> <center>

欢迎光临 欢迎光临 欢迎光临 欢迎光临 Welcome my homepage. Welcome my

homepage. </center> 图2-6 设置文字字体 </body> </html> 其效果如图2-6所示。

（1）“”和“”：粗体。 （2）“”和“”：斜体。（3）“”和“”：加下划线。（4）“<TT>”和“</TT>”：打字机字体。

（5）“<BIG>”和“</BIG>”：大型字体。 • （6）“”和“”小型字体。 • （7）“<BLINK>”和“</BLINK>”：闪烁效果。 • （8）“”和“”：表示强调，一般为斜体。

（9）“”和“”：表示特别强调，一般为粗体。（9）“”和“”：表示特别强调，一般为粗体。 • （10）“<CITE>”和“</CITE>”：用于引证、举例，一般为斜体。

图2-7 设置文字样式

【例2-7】文字样式示例 <html> <head> <title>字体样式</title> </head> <body>图2-7 设置文字样式

黑体字 斜体字 加下划线 <BIG>大型字体</BIG> 小型字体

 <BLINK>闪烁效果</BLINK> Welcome Welcome <CITE>Welcome</CITE> </body> </html> 其效果如图2-7所示。

2.1.6 文字的颜色 文字颜色设置格式如下： … 现在通过例2-8来看看文字颜色设置的效果。

图2-8 设置文字颜色

【例2-8】文字颜色示例 <html> <head> <title>文字的颜色</title> </head> <body>

 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界

 色彩斑斓的世界 色彩斑斓的世界 </body> </html>

表2-1 颜色名称及其对应的十六进制数表

例如在HTML语言规范中，可以通过两种方式指定颜色：例如在HTML语言规范中，可以通过两种方式指定颜色： • （1）一种方式是以定义好的颜色名称表示，具体的颜色名称针对不同的浏览器也有所不同； • （2）另一种方式通过一个以“#”开头的6位十六进制数值表示一种颜色，6位数字分为3组，每组两位，依次表示红、绿、蓝3种颜色的强度。

2.1.7 位置控制 通过“ALIGN”属性可以选择文字或图片的对齐方式，“LEFT”表示向左对齐，“RIGHT”表示向右对齐，“CENTER”表示居中。基本语法如下：

图2-9 设置文字位置

【例2-9】位置控制示例 <html> <head>图2-9 设置文字位置 <title>位置控制</title> </head> <body>

<div align=left>你好!</div> <div align=right>你好! </div> <div align=center>你好! </div> </body> </html> 其效果如图2-9所示。

2.1.8 无序号列表 无序号列表使用的一对标签是“<UL>”和“</UL>”，每一个列表项前使用“<LI>”。其结构如下所示：

第 2 章 网页中的文字