第7单元使用文本元素.pptVIP

1-* 第7章 使用文本元素 在前面的章节中，我们介绍了页面主体的元素使用，本章中，我们将介绍页面很重要的HTML结构代码，文本元素的使用。 7.1 文本元素简介 文本元素中，块元素和内联元素是两个重要的概念（因为有些CSS属性只适用于块元素，有些适用于内联元素）。了解什么是块元素和内联元素，并了解其特性将有助于更好地使用CSS属性。 7.2 使用区域元素——div W3C官方对div的定义是，div（division）是一个块级元素，div/div可以包含段落、标题、表格甚至任何元素。这使得div便于建立不同集成的类，如章节、摘要和批注等，是CSS的好帮手。 7.2.1 区域元素的对齐 区域元素的对齐属性是align，它的作用是对齐区域内的内容。例如，修改【实例7-1】中的代码： div内容/div 为以下代码： div align=center内容/div 这段代码的意思是将区域元素居中对齐，此时的显示效果如图7-2所示。 7.2.2 使用样式 由于元素本身提供的效果有限，所以在使用中要借助样式表的样式来实现丰富的显示效果。关于样式表在以后进行介绍，这里仅就如何使用样式进行说明。 7.2.3 定义唯一标记 在应用中，由于可能使用到的区域元素很多，不方便区分，因此在应用中会定义class选择符和id选择符对区域元素进行定义。用户可以使用id及class对页面中的XHTML标签名称进行自定义，从而达到扩展XHTML标签及组合XHTML标签的目的。用户自定义名称的方式也有助于用户细化自身的界面结构，使用符合页面需求的名称进行结构设计，增强代码的可读性。 7.2.4 取消自动换行 在页面中，如果定义了区域元素的大小，则当内容超过该区域时，就会自动换行。例如，在7.2.3节中的区域元素中加入内容，使其超过宽度限制就会换行，此时的显示效果如图7-5所示。 7.3 使用段落元素——p p标签是一个有特定语义的标签，表示段落，用来区分段落。 正确的写法如下面代码所示。 p/p 7.4 使用标题元素 在XHTML编写过程中，可以使用从h1到h6这几个标签来定义标题，它们对应的终止标签分别为/h1到/h6。 7.5 使用基于内容的文本元素 使用基于内容的文本元素即使用内联元素，内联元素是指如a、span这样的元素。其特点是，不必在新的一行开始，同时也不强迫其他的元素在新的一行显示。除此之外，内联元素可以做其他元素的子元素。 1. 强调元素——em em标签的作用是用来强调一段文字，这段强调的内容是用斜体表示的，示例代码如下。 （html代码位置：光盘\实例\第7章\7-5.html） em强调内容/em 此时的显示效果如图7-9所示。 2. 加粗的强调元素——strong strong标签和 em 标签一样，用于强调文本，但它强调的程度更强一些。在默认情况下，strong标签的内容是加粗显示，示例代码如下。 （html代码位置：光盘\实例\第7章\7-6.html） strong使用基于内容的文本元素/strong 此时的显示效果如图7-10所示。 3.文献参考元素——cite cite标签通常表示它所包含的文本对某个参考文献的引用，如书籍或者杂志的标题。在默认情况下，cite标签的内容斜体显示，示例代码如下。 （html代码位置：光盘\实例\第7章\7-7.html） cite使用基于内容的文本元素/cite 此时的显示效果如图7-11所示。 4. 等宽元素——code code标签用于表示计算机源代码或者其他机器可以阅读的文本内容，包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。在默认情况下，code标签的内容是常规大小显示，示例代码如下。 （html代码位置：光盘\实例\第7章\7-8.html） code使用基于内容的文本元素/code 此时的显示效果如图7-12所示。 5.其他基于内容的文本元素——var var标签表示变量的名称，或者由用户提供的值。var标签经常与code和pre 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。在默认情况下，var标签的内容斜体显示，示例代码如下。 （html代码位置：光盘\实例\第7章\7-9.html） var使用基于内容的文本元素/var 此时的显示效果如图7-13所示。 7.6 使用基于物理样式的文本元素 所谓物理样式，是指标记符本身就说明了所修饰文字的效果的样式。使用物理样式的好处是，浏览器会严格遵照标记的样式显示文本，因此在不希望浏览器改变样式的情况下就应该使用物理格式。 1.加粗元素——b b标签用于呈现粗体