第2章文本标记和列表标记.docVIP

第2章 文本标记和列表标记 在HTML中，可以使用文本标记、段落标记和列表标记等对文本进行各种各样的格式化工作，它们都是文本级的标记，不仅可以应用于一段文本，也可以应用于文本中的单个字符。在第1章中已经介绍了常用的段落标记，本章将向读者介绍HTML中常用的文本标记和列表标记。 通过本章的学习，读者不仅可以掌握常用的font标记和ruby标记，也可以了解文本修饰标记，还可以掌握HMTL中列表标记的使用。 本章学习目标如下： 掌握font标记的使用。 了解ruby标记的使用。 熟悉常用的物理样式标记。 熟悉常用的逻辑样式标记。 掌握如何实现无序列表。 掌握如何实现有序列表。 熟悉如何实现解说列表。 掌握不同列表之间的嵌套。 2.1 文 本 标 记 文本标记用于HTML网页正文内容的文本部分，这些文本标记被用于引用、定义、强调文本/段落/行等文本模块。通过使用这些文本标记，可以使网页中的文本显示不同的样式，从而吸引浏览者注意到该文本的内容。 下面将简单了解常用的文本标记。 2.1.1 font标记 font标记指定文本的字体、字体尺寸和字体颜色等内容。 font标记并不被推荐使用，但是该标记在Web上的使用还是非常广泛的。如今，一些流行的网页制作工具仍然能生成包含font标记的代码。W3C推荐使用CSS代替font标记来格式化文本。 font标记的基本格式如下： font 属性=属性值/font font标记中包含多个属性，其常用属性及其说明如表2-1所示。 表2-1 font标记的常用属性 属性名称 属性取值 说 明 size 0~7 设置文本的字体大小，数字越大，文本字体显示得越大。如果在数字的前面加上“+”，则代表比预设的字体大小还大几级；如果是加上“-”，则代表比预设的文字大小还小几级。通常情况下，默认值是3，可以使用basefont来设置该值的大小 color 十六进制或英文名称 设置文本的颜色 face 字体名称 设置文本采用的字体名称 【例2-1】 下面来演示font标记及其属性的使用方法： font size=-2lt;fontgt;标记size属性值前加上-/fontbr/ font size=+3lt;fontgt;标记size属性值前加上+/fontbr/ fontlt;fontgt;标记的默认显示/fontbr/ font size=5lt;fontgt;标记的size属性值设置为5/fontbr/ font size=+2 color=#0000FF face=Verdana, Geneva, sans-serif 设置size、color和face属性/fontbr/ font size=+2 color=#0000FF face=隶书设置size、color和face属性/font 在浏览器中运行上述代码，查看效果，如图2-1所示。 图2-1 使用font标记的效果 2.1.2 ruby标记 ruby标记定义ruby注释(中文注音或者字符)，这是HTML 5新增加的一个标记。在东亚使用时，显示的是东亚字符的发音。一般情况下，ruby标记会与rt标记一块使用，它们结合起来，可以对网页中的文字进行标注。 【例2-2】 下面简单给出使用ruby标记和rt标记的代码： ruby 你rtni/rt 知道rtzhidao/rt 吗rtma/rt 当代最可爱的人rt志愿军/rt /ruby 2.1.3 物理样式标记 通常情况下，会将物理样式标记称为字体样式元素或者实体字符控制标记，这是因为它们为浏览器提供了特定的字体指令。 物理样式标记的使用非常普遍，并且网页编辑工具中都会生成这些标记。例如，表2-2列出了常用的物理样式标记，并且对这些标记进行了具体的说明。 表2-2 常用的物理样式标记 标 记 说 明 b/b 将文本显示为粗体 i/i 将文本设置为斜体 strike/strike 为文本添加删除线(建议使用del标记来代替) tt/tt 设置为电报字体 u/u 为文本添加下划线 sub/sub 将文本变小，低于基线显示 sup/sup 将文本变大，高于基线显示 small/small 将文本显示为比正常字体小 big/big 将文本显示为比正常字体大 【例2-3】 本例使用表2-2中的物理样式标记演示效果。实现代码如下： b总是向你索取 却不曾说谢谢你/bi直到长大以后 才懂得你不容易/iu每次离开总是 装作轻松的样子/utt微笑着说回去吧 转身泪湿眼底/ttstrike多想和从前一样 牵你温暖手掌/strikesub可是你不在我身旁 托清风捎去安康/subsup时光时光慢些吧 不要再让你变老了/supsmall我愿用我一切