第7章 使用文本元素.ppt

1、第7章 使用文本元素,在前面的章节中，我们介绍了页面主体的元素使用，本章中，我们将介绍页面很重要的HTML结构代码，文本元素的使用。,7.1 文本元素简介,文本元素中，块元素和内联元素是两个重要的概念（因为有些CSS属性只适用于块元素，有些适用于内联元素）。了解什么是块元素和内联元素，并了解其特性将有助于更好地使用CSS属性。,7.2 使用区域元素,W3C官方对div的定义是，div（division）是一个块级元素，可以包含段落、标题、表格甚至任何元素。这使得div便于建立不同集成的类，如章节、摘要和批注等，是CSS的好帮手。,7.2.1 区域元素的对齐,区域元素的对齐属性是align，它的

2、作用是对齐区域内的内容。例如，修改【实例7-1】中的代码： 内容 为以下代码： 内容 这段代码的意思是将区域元素居中对齐，此时的显示效果如图7-2所示。,7.2.2 使用样式,由于元素本身提供的效果有限，所以在使用中要借助样式表的样式来实现丰富的显示效果。关于样式表在以后进行介绍，这里仅就如何使用样式进行说明。,7.2.3 定义唯一标记,在应用中，由于可能使用到的区域元素很多，不方便区分，因此在应用中会定义class选择符和id选择符对区域元素进行定义。用户可以使用id及class对页面中的XHTML标签名称进行自定义，从而达到扩展XHTML标签及组合XHTML标签的目的。用户自定义名称的方式

3、也有助于用户细化自身的界面结构，使用符合页面需求的名称进行结构设计，增强代码的可读性。,7.2.4 取消自动换行,在页面中，如果定义了区域元素的大小，则当内容超过该区域时，就会自动换行。例如，在7.2.3节中的区域元素中加入内容，使其超过宽度限制就会换行，此时的显示效果如图7-5所示。,7.3 使用段落元素,p标签是一个有特定语义的标签，表示段落，用来区分段落。 正确的写法如下面代码所示。 ,7.4 使用标题元素,在XHTML编写过程中，可以使用从到这几个标签来定义标题，它们对应的终止标签分别为到。,7.5 使用基于内容的文本元素,使用基于内容的文本元素即使用内联元素，内联元素是指如a、spa

4、n这样的元素。其特点是，不必在新的一行开始，同时也不强迫其他的元素在新的一行显示。除此之外，内联元素可以做其他元素的子元素。,1. 强调元素,标签的作用是用来强调一段文字，这段强调的内容是用斜体表示的，示例代码如下。 （html代码位置：光盘实例第7章7-5.html） 强调内容 此时的显示效果如图7-9所示。,2. 加粗的强调元素,标签和 标签一样，用于强调文本，但它强调的程度更强一些。在默认情况下，标签的内容是加粗显示，示例代码如下。 （html代码位置：光盘实例第7章7-6.html） 使用基于内容的文本元素 此时的显示效果如图7-10所示。,3.文献参考元素,标签通常表示它所包含的文本

5、对某个参考文献的引用，如书籍或者杂志的标题。在默认情况下，标签的内容斜体显示，示例代码如下。 （html代码位置：光盘实例第7章7-7.html） 使用基于内容的文本元素 此时的显示效果如图7-11所示。,4. 等宽元素,标签用于表示计算机源代码或者其他机器可以阅读的文本内容，包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。在默认情况下，标签的内容是常规大小显示，示例代码如下。 （html代码位置：光盘实例第7章7-8.html） 使用基于内容的文本元素 此时的显示效果如图7-12所示。,5

6、.其他基于内容的文本元素,标签表示变量的名称，或者由用户提供的值。标签经常与和 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。在默认情况下，标签的内容斜体显示，示例代码如下。 （html代码位置：光盘实例第7章7-9.html） 使用基于内容的文本元素 此时的显示效果如图7-13所示。,7.6 使用基于物理样式的文本元素,所谓物理样式，是指标记符本身就说明了所修饰文字的效果的样式。使用物理样式的好处是，浏览器会严格遵照标记的样式显示文本，因此在不希望浏览器改变样式的情况下就应该使用物理格式。,1.加粗元素,标签用于呈现粗体效果。在默认情况下，标签的内容是加粗显示，示例代码如下。

7、 （html代码位置：光盘实例第7章7-10.html） 使用基于内容的文本元素 此时的显示效果如图7-14所示。,2.放大元素,标签呈现大号字体效果。在默认情况下，标签的内容是大字体显示，示例代码如下。 （html代码位置：光盘实例第7章7-11.html） 使用基于内容的文本元素 此时的显示效果如图7-15所示。,3.缩小元素,和标签相反，标签呈现的是小一号的字体。在默认情况下，标签的内容是小号字显示，示例代码如下。 （html代码位置：光盘实例第7章7-12.html） 使用基于内容的文本元素 此时的显示效果如图7-16所示。,4.斜体显示元素,标签呈现的是斜体文本效果。在默认情况下，标

8、签的内容是斜体显示，示例代码如下。 （html代码位置：光盘实例第7章7-13.html） 使用基于内容的文本元素 此时的显示效果如图7-17所示。,5.其他基于物理样式的文本元素,以上介绍了主要的基于物理样式的文本元素，此外，还有其他一些基于物理样式的文本元素，如删除线，通过下面的代码来加以说明，代码中文字部分即该物理样式的显示方式。,7.7 使用文本的间隔和布局元素,在页面应用中，还有关于文本间隔的布局元素。间隔和布局元素是指应用了该元素，会改变整行文本的显示方式。,1.换行元素,如果希望另起一行书写文字却又不希望另起一个自然段的时候，就可以应用标签了。标签也是一个单标签，需要加上一个“/

9、”来关闭，以符合XHTML的要求。例如，下面就是一段使用标签的XHTML代码。 （html代码位置：光盘实例第7章7-15.html） 这里开始换行显示 此时的显示效果如图7-19所示。,2.元素的清除属性clear,通常情况下， 标签会告诉浏览器立即停止当前的文本流，并在下一行的左边或者在左对齐的内联图形或表格的右边开始继续输出文本流。,3.取消换行元素,标签用于取消文本的换行，使得文本在一行中显示，示例代码如下。 （html代码位置：光盘实例第7章7-16.html） 这里是一行不该换行的文本，这是文本行的结尾。 此时的显示效果如图7-20所示。,4. 保留格式元素,元素可定义预格式化的文

10、本。被包围在元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体，示例代码如下。 （html代码位置：光盘实例第7章7-17.html） 这里是保留原始格式的文本，这里开始手动换行 这是文本行的结尾。 此时的显示效果如图7-21所示。,5.缩进元素, 标签定义块引用。 与 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。示例代码如下。 （html代码位置：光盘实例第7章7-18.html） 随着网页标准化的普及，使用XHTML语言架构网页是大势 此时的显示效果如图7-22所示。,6.引用元素,标签定义短的引用。在默认情况下，标签是在引用的内容周围添加引号，从而提示浏览者此段文字是引用元素。示例代码如下。 （html代码位置：光盘实例第7章7-19.html） 随着网页标准化的普及，使用XHTML语言架构网页是大势 此时的显示效果如图7-23所示。,7.地址元素,可定义一个地址（如电子邮件地址），一般情况下使用它来定义地址、签名或者文档的作者身份。不论创建的文档是简短扼要还是冗长完整，都应该确保每个文档都附加了一个地