网页编程教学第2章.ppt

1、第2章 文本格式,2.1 文本分段 2.2 控制文本的显示效果 2.3 列表格式,2.1 文本分段 2.1.1 段落标记符 P 和换行标记符 BR 以下 HTML代码显示了 P 和 BR 标记符的用法，效果如图 2-1 所示。, 标记符可以产生多个空行效果 此为最后一段 ,图 2-1 P 与 BR 的用法,2.1.2 水平线标记符 HR 2.1.2.1 size 属性 2.1.2.2 width 属性 2.1.2.3 noshade 属性 2.1.2.4 color 属性,以下 HTML 代码显示了如何用 HR 标记符的各种属性控制水平线的显示，效果如图 2-2 所示。 水平线效果 以下是默认

2、水平线： 以下是粗为 5 像素的水平线： 以下是长度为100像素的水平线： 以下是长度为屏幕宽度 50% 的水平线： 以下是粗为 5 像素的实心水平线： 以下是红色的水平线： ,图 2-2 水平线效果,2.1.3标题标记符 Hn 以下HTML代码显示了 1 至 6 级标题的效果，如图 2-3 所示。 标题效果 此为一级标题 此为二级标题 此为三级标题 此为四级标题 此为五级标题 此为六级标题 此为正常文本 ,图 2-3 标题效果,可以看出，浏览器在解释标题标记符时，会自动改变文本的大小并将字体设为黑体，同时自动将内容设置为一个段落。,2.1.4 段落对齐 2.1.4.1 align 属性 al

3、ign属性可应用于多种标记符，例如前面介绍的 P、Hn、HR 等。以下HTML代码显示了 align 属性的效果，如图 2-4 所示。 使用 align 属性 本行为默认对齐的段落，相当于 align=left 本行为居中对齐的段落 本行为右对齐的段落 本行为居中对齐的一级标题 以下为左对齐的水平线： ,图 2-4 使用 align 属性,注意：对于不同的标记符，默认的 align 属性值不同。P 和 Hn标记符的默认 align 属性值是 left，而 HR 标记符的默认 align 属性值是 center。,2.1.4.2 DIV 标记符与 CENTER 标记符 如果需要将多个段落使用相同

4、的对齐方式，那么可以不必在每个段落中设置 align 属性，而是使用 DIV 标记符将所有段落包括起来，然后在 DIV 标记符中设置 align 属性。例如，以下 HTML 代码将多个段落的内容都设置为居中对齐，效果如图 2-5 所示。, 使用 DIV 标记符 浣溪沙 晏殊 ,一曲新词酒一杯， 去年天气旧池台， 夕阳西下几时回？ 无可奈何花落去， 似曾相识燕归来， 小园香径独徘徊。 ,图 2-5 使用 DIV 标记符,2.1.4.3 格式的嵌套 （1）如果所设置的格式是相容的，则取格式叠加的效果。例如，如果为一段文字同时设置了粗体和斜体格式，则该段文字将以粗斜体显示。 （2）如果所设置的格式是

5、冲突的，则取最近样式符的修饰效果。例如，如果同时在不同标记符中设置了段落对齐方式，那么相应内容的对齐方式以最近的标记符为准。 例如，以下 HTML 代码可以说明浏览器如何解释格式嵌套，效果如图 2-6 所示。, 格式嵌套示例 本行使用 对齐 本行的对齐方式被更改了 本行文字显示了如何同时应用粗体和斜体 ,图 2-6 格式嵌套示例,2.2 控制文本的显示效果 2.2.1字体控制标记符 FONT 2.2.1.1 size 属性 以下 HTML 代码显示了 size 属性的用法，效果如图 2-7 所示。, FONT 标记符的 size 属性示例 正常文本 这些是大字体的文本 这些是小字体的文本 这些

6、文字的字体比正常文本大 2 号 这些文字的字体比正常文本小 2 号 混合字体大小 ,图 2-7 FONT 标记符的 size 属性用法示例,2.2.1.2 color 属性 2.2.1.3 face 属性 常用的一些中英文字体的示例如图 2-8 所示，相应的 HTML 代码如下： 字体示例 以下是常用中文字体： 宋体 楷体, 黑体 隶书 幼圆 以下是常用英文字体： Times New Roman Arial Arial Black Courtier New,Comic Sans MS Verdana ,图 2-8 常用字体示例,2.2.2物理字符样式 所谓物理字符样式，是指标记符本身就说明了所

7、修饰文字的效果的标记符。例如，B 标记符表示粗体，SUB 标记符表示下标因为 B 是 Bold（粗体）这个单词的首字母，而 SUB 是 subscript（下标）这个单词的前三个字母。常用的物理字符样式标记符有：黑体标记 B、斜体标记 I、下划线标记 U 等，如表 2-1 所示。,表 2-1 常用物理字符样式,使用这些物理字符样式时，只需将设置格式的字符括在标记符之间即可。例如，以下 HTML 代码在浏览器中的显示如图 2-9 所示。,图2-9 物理字符样式效果, 物理字符样式效果示例 此处为粗体显示文本 此处为大字体文本 此处为小字体文本 此处为斜体文本 此处为等宽字体文本 此处为下划线文本

8、 此处为使用标记设置的删除线文本 此处为上标示例：x2 + y2 = R2,此处为下标示例：H2SO4 2.1.1逻辑字符样式 所谓逻辑字符样式是指标记符本身表示了所修饰效果的逻辑含义。例如，ADDRESS 标记符本身的逻辑意义为“地址”，但并没有说明具体的物理效果。常用的逻辑字符样式如表 2-2 所示。,表 2-2 常用逻辑字符样式,使用这些逻辑样式时，也只需将设置格式的字符括在标记符之间即可。例如，以下 HTML 代码在浏览器中的显示如图 2-10 所示。,图 2-10 逻辑字符样式, HTML 逻辑字符样式 此为强调文本 此为特别强调文本 此为引用文本 此为一个术语定义 代码格式：Thi

9、s is an example of code formatting 变量格式：This is an example of variable formatting 样本字符格式：This is a sample of literal characters 键盘输入格式：This is an example of keyboard input format 地址格式：This is an address ,2.3.1有序列表 2.3.1.1 创建有序列表 创建有序列表需要使用有序列表标记符 OL 和列表项标记符 LI，其中 LI 标记符的结束标记符可以省略，基本语法如下： 列表项 1 列表项 2

10、 列表项 3 OL标记符具有两个常用的属性：type 和 start，分别用来设置数字序列样式和数字序列的起始值。start 属性的值可以是任意整数，type 属性的值如表 2-3 所示：,2.3 列 表 格 式,表 2-3 有序列表的 type 属性值,当位于 OL 标记符内时，LI 标记符具有两个常用的属性：type 和 value。type 属性用于设置数字样式，取值与 OL 的 type 属性相同；value 属性用于指定一个新的数字序列起始值，以获得非连续性的数字序列。 例如，以下 HTML 代码显示了如何创建不同的有序列表，效果如图 2-11 所示。,图 2-11 有序列表示例,

11、有序列表示例 用大写罗马字母表示的有序列表： 列表项1 列表项2 列表项3 起始数字为 3 的有序列表： 列表项1 列表项2 列表项3 编号不连续的有序列表 列表项1 列表项2 列表项3 变换了数字样式的有序列表 列表项1 列表项2 列表项3 ,2.3.1.2 有序列表的嵌套,以下HTML代码即显示了一个嵌套的有序列表，效果如图 2-12 所示。 嵌套的有序列表 嵌套的有序列表 列表项 1 子列表项 1子列表项 2子列表项 3 列表项 2 列表项 3 ,图 2-12 嵌套有序列表,2.3.2无序列表 2.3.2.1 创建无序列表 以下 HTML 代码显示了如何创建无序列表，效果如图 2-13 所示。 无序