第三章 网页文字与段落

1、本章内容本章内容3.1 3.1 编辑内容编辑内容3.2 3.2 文字效果文字效果3.3 3.3 文字的修饰文字的修饰3.4 3.4 段落段落3.1 编辑内容编辑内容3.1.1 3.1.1 注释注释3.1.2 3.1.2 空格符号空格符号 3.1.3 3.1.3 特殊符号特殊符号 在浏览器中显示的文字内容需要编写在在浏览器中显示的文字内容需要编写在标签中，这些内标签中，这些内容包括容包括普通的文字、空格符和特殊符号以及页面的注释语句普通的文字、空格符和特殊符号以及页面的注释语句等。常用等。常用的编辑内容标签如下表所示：的编辑内容标签如下表所示：标签标签含义含义注释注释 空格符等

2、特殊符号空格符等特殊符号常用编辑内容标签常用编辑内容标签3.1.1 注释注释注释标签用来在源文档中插入注释，注释会被浏览器忽略。注释标签用来在源文档中插入注释，注释会被浏览器忽略。 基本语法基本语法 语法解析：使用上述两种表示方法都可以代表注释语句；开始使用语法解析：使用上述两种表示方法都可以代表注释语句；开始使用!- 或或，结束使用，结束使用- 或或 ，中间为注释内容。，中间为注释内容。注意：一般情况下使用注意：一般情况下使用注释网页内容，注释网页内容，部分浏览器不支持部分浏览器不支持注释，如注释，如Firefox。3.1.2 空格符号空格符号 HTML页面中空格符号是通过代码进行控制的。页

3、面中空格符号是通过代码进行控制的。 基本语法：基本语法：  语法解析：一个半角空格使用一个语法解析：一个半角空格使用一个 表示，多个空格只需使用多表示，多个空格只需使用多次即可。次即可。注意：在建立注意：在建立HTML文件时，若利用键盘上的空格键来输入数个空格，文件时，若利用键盘上的空格键来输入数个空格，则则不论输入的空格有多少个，都将被视为一个不论输入的空格有多少个，都将被视为一个。3.1.3 特殊符号特殊符号 和空格的表示方法有些相似，一些特殊符号是凭借特殊的符号码来实和空格的表示方法有些相似，一些特殊符号是凭借特殊的符号码来实现的。现的。通常由前缀通常

4、由前缀 & ，加上字符对应的名称，再加上后缀，加上字符对应的名称，再加上后缀 ; 组成。组成。 其源代码中输入相应的符号码，即可显示符号。其源代码中输入相应的符号码，即可显示符号。特殊符号表特殊符号表特殊符号特殊符号符号码符号码特殊符号特殊符号符号码符号码"§&¢>&middot©€®£±™×3.2 文字效果文字效果3.2.1 3.2.1 基准文字（基准文字（第二

5、章已经讲过第二章已经讲过）3.2.2 3.2.2 文字样式文字样式 设置文字效果有两个标签，分别为设置文字效果有两个标签，分别为和和，其中含义如，其中含义如下表所示：下表所示：标签标签含义含义基准文字基准文字文字文字文字效果文字效果3.2.1 基准文字基准文字基本语法：基本语法： 语法解析：语法解析： face定义了字体，多种字体间用定义了字体，多种字体间用, 分开；分开；size定义了字定义了字号，号，value取值范围为取值范围为17或或-1-7或或+1+7；color定义了颜定义了颜色，色，value值为英文名称或十六进制代码。值为英文名称或十六进制代码。3.2.2 文字样式文字样式 如

6、果希望更改页面中的字体、字号和颜色，如果希望更改页面中的字体、字号和颜色，最佳的选择是使用最佳的选择是使用标签标签。字体标记用于控制文字的字体、大小与颜色。控制的方字体标记用于控制文字的字体、大小与颜色。控制的方式是利用属性设置来实现的。式是利用属性设置来实现的。基本语法：基本语法： 语法解析：语法解析： face属性定义了字体；属性定义了字体； size属性定义字号，属性定义字号，value取值范取值范围为围为17或者或者+1+7、-1-7； color属性定义了颜色，属性定义了颜色，value取值为颜取值为颜色的名称或者十六进制代码。色的名称或者十六进制代码。3.3 文字的修饰文字的修饰3

7、.3.1 3.3.1 文字的基本修饰文字的基本修饰3.3.2 3.3.2 文字的上下标文字的上下标3.3.3 3.3.3 标题文字标题文字3.3.4 3.3.4 其他修饰其他修饰HTML标签类型HTML修饰标签表修饰标签表标签标签含义含义标签标签含义含义粗体粗体下划线下划线粗体粗体删除线删除线斜体（强调）斜体（强调）删除线删除线斜体（标记）斜体（标记）地址地址斜体斜体打字机文字打字机文字上标上标闪烁文字闪烁文字Netscape下标下标等宽等宽大字号大字号等宽等宽小字号小字号键盘输入文字键盘输入文字声明变量声明变量3.3.1 文字的基本修饰文字的基本修饰字符级格式化用于对单个字母或单词进行强调。

8、字符级格式化用于对单个字母或单词进行强调。文字的基本修饰包括文字的基本修饰包括粗体、斜体、下划线及删除线粗体、斜体、下划线及删除线等。等。粗体粗体基本语法：基本语法： 语法解释：这两个标签都可以表现文字粗体的效果。语法解释：这两个标签都可以表现文字粗体的效果。斜体斜体基本语法：基本语法： 语法解释：语法解释： 这这3个标签都可以表现文字斜体的效果。个标签都可以表现文字斜体的效果。下划线下划线基本语法：基本语法： 语法解释：将文字放在标签中间就可以实现文字的下划线语法解释：将文字放在标签中间就可以实现文字的下划线效果。效果。删除线删除线基本语法：基本语法： 语法解释：这两个标签都可以在文字的中间

9、添加删除线。语法解释：这两个标签都可以在文字的中间添加删除线。3.3.2 文字的上下标文字的上下标常见的数学表达式，可以将一段文字以小字体的方式显示另一段文字常见的数学表达式，可以将一段文字以小字体的方式显示另一段文字的右上角或右下角，这就是上下标效果。的右上角或右下角，这就是上下标效果。 基本语法：基本语法： 语法解释：语法解释： 实现上标效果，实现上标效果，实现下标效果。实现下标效果。3.3.3 标题文字标题文字标题（标题（Heading）是通过）是通过 - 等标签进行定义的。等标签进行定义的。 定义最大的标题。定义最大的标题。 定义最小的标题。定义最小的标题。基本语法：基本语法： 语法解

10、释：语法解释： n的取值为的取值为16。浏览器会自动地在标题的前后添加空行。浏览器会自动地在标题的前后添加空行。 请确保将请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题，或大号的文本而使用标题，搜索引擎使用标题为您的网页的结构和内搜索引擎使用标题为您的网页的结构和内容编制索引容编制索引。3.3.4 其他修饰其他修饰大字号大字号 小字号小字号 地址文字地址文字 打字机打字机 键盘文字键盘文字 等宽文字等宽文字 声明变量文字声明变量文字 3.4 段落段落3.4.1 3.4.1 换行换行3.4.2 3.4.2 段

11、落段落3.4.3 3.4.3 不换行不换行3.4.4 3.4.4 预格式化预格式化3.4.5 3.4.5 居中居中3.4.6 3.4.6 缩排缩排3.4.7 3.4.7 忽略忽略HTMLHTML标签标签3.4.8 3.4.8 水平线水平线标签列表标签列表标签标签含义含义段落段落换行换行不换行不换行预格式化预格式化居中居中缩排缩排忽略忽略HTML标签标签水平线水平线3.4.1 换行换行标签表示强制换行。标签表示强制换行。换行标签是一个没有结尾的标签，即换行标签是一个没有结尾的标签，即无结束标签无结束标签 。此类标签称之为。此类标签称之为单单标签标签，也叫，也叫空标签空标签。在任何位置使用了在任何

12、位置使用了标签，当文件显示在浏览器中时，该标签之后标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行的内容将显示下一行。3.4.2 段落段落HTML中，段落主要由标签中，段落主要由标签定义。定义。由由标记所标识的文字，代表同一个段落的文字。标记所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续两个换行符，不同段落间的间距等于连续两个换行符，即隔一行空白行，以区别文即隔一行空白行，以区别文字的不同段落字的不同段落。单独使用时，下一个单独使用时，下一个的开始就意味着上一个的开始就意味着上一个的结束，的结束，良好的习良好的习惯是成对使用惯是成对使用。注：注：p为单词为单词parag

13、raph prgr:f 的首字母。的首字母。格式：格式： 思考：思考： 在一行文字中间输入在一行文字中间输入p，可以空出一行，那如果想，可以空出一行，那如果想空多行怎么办？空多行怎么办？left：左对齐：左对齐center：中对齐：中对齐right：右对齐：右对齐段落段落.html.html3.4.3 不换行不换行如果浏览器中单行文字的宽度过长，则会自动将该文字换行显示，如果浏览器中单行文字的宽度过长，则会自动将该文字换行显示，若若要取消文字因窗口大小而产生的换行要取消文字因窗口大小而产生的换行，就可以使用，就可以使用标记。标记。基本语法：基本语法：语法解释：语法解释： 标签和标签和标签之间的

14、文字会显示不自动换行标签之间的文字会显示不自动换行的效果。的效果。补充：补充： 标签，在禁止换行标记中强制换行，属于单标签，即无结标签，在禁止换行标记中强制换行，属于单标签，即无结束标签束标签 时间，每天得到的都是二十四小时，可是一天的时间时间，每天得到的都是二十四小时，可是一天的时间给勤勉的给勤勉的人带来智慧与力量，给懒散的人只能留下一片悔恨。人带来智慧与力量，给懒散的人只能留下一片悔恨。鲁迅鲁迅 3.4.4 预格式化预格式化预格式化，就是保留文字在源代码中的格式，预格式化，就是保留文字在源代码中的格式，页面中显示的和源代码页面中显示的和源代码中的效果完全一致中的效果完全一致。浏览器在显示其

15、中的内容时，会完全按照其真正。浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示、原封不动地保留文档中的空白、空格及制表符等。的文本格式来显示、原封不动地保留文档中的空白、空格及制表符等。HTML中，在通过浏览器显示时保留某段文本原始文件排版方式，只中，在通过浏览器显示时保留某段文本原始文件排版方式，只需在该段文本前后加上需在该段文本前后加上和和标记即可。标记即可。基本语法：基本语法：3.4.5 居中居中如果希望如果希望使段落或文字居中对齐使段落或文字居中对齐，可以使用专门的居中标签。被，可以使用专门的居中标签。被标记所包含的组件，将以居中对齐的方式显示在网页中。标记所包含的组件，将以

16、居中对齐的方式显示在网页中。基本语法：基本语法： 语法解释：语法解释： 和和标签之间的文字就会实现自动居中标签之间的文字就会实现自动居中对齐的效果（对齐的效果（同时具有换行效果同时具有换行效果）。）。3.4.6 缩排缩排HTML缩排标签为缩排标签为。使用缩排标签，可以实现页面文字的段落缩排效果，使用缩排标签，可以实现页面文字的段落缩排效果，若想实现多次缩若想实现多次缩排则可以多次使用缩排标签排则可以多次使用缩排标签。基本语法：基本语法：语法解释语法解释 ：在要缩进的文本前加入：在要缩进的文本前加入标签以及在文本后标签以及在文本后加入加入标签，即可向右缩进方式显示该段文本。标签，即可向右缩进方式

17、显示该段文本。3.4.7 忽略忽略HTML标签标签HTML忽略标签：忽略标签： 或或。基本语法：基本语法： 语法解释：在语法解释：在HTML语言中加入语言中加入或或标签，可以将在标签，可以将在该标签后的该标签后的HTML标签失去标示作用，而将内容直接显示在网页页面标签失去标示作用，而将内容直接显示在网页页面中。中。3.4.8 水平线水平线水平线标签为水平线标签为，用于在段落与段落之间进行分隔，从而使文档的，用于在段落与段落之间进行分隔，从而使文档的结构清晰明了，以及文字的编排整齐规范。水平线自身具有很多的属结构清晰明了，以及文字的编排整齐规范。水平线自身具有很多的属性，如宽度、高度、颜色和排列

18、对齐等。性，如宽度、高度、颜色和排列对齐等。基本语法：基本语法： 语法解释：语法解释：缺省情况下，水平线显示为带阴影的横线，横跨整个浏览缺省情况下，水平线显示为带阴影的横线，横跨整个浏览器窗口器窗口。可以通过相应属性改变水平标尺的阴影、宽度、高度和对齐。可以通过相应属性改变水平标尺的阴影、宽度、高度和对齐方式。方式。水平线属性表水平线属性表属性属性描述描述width宽度，可以是以绝对的像素单位，也可以是以相对的百分比单位宽度，可以是以绝对的像素单位，也可以是以相对的百分比单位size高度，高度，只能使用绝对的像素来定义只能使用绝对的像素来定义color颜色，颜色，用于定义水平线的颜色用于定义水平线的颜色noshade无阴影，无阴影，可以在页面中去掉水平线的阴影可以在页面中去掉水平线的阴影align排列，排列，设置水平线的居左、居中和居右对齐设置水平线的居左、居中和居右对齐本章总结本章总结3.1 编辑内容编辑内容3.1.1 注释注释3.1.2 空格符号空格符号 3.1.3 特殊符号特殊符号3.2 文字效果文字效果3.2.1 基底文