
2.7 字符控制
2.7.1 字体
1.<font>元素
<font>元素用来控制文字的字体、字号和颜色,其格式为:
<font color="" size="" face="">…</font>
<font>元素常用的属性为color、size、face。color用于设置嵌套在<font>…</font>中文字的颜色,颜色值的讨论与2.3.2节<body>属性bgcolor的值一样。size则用于设置<font>…</font>中文字的大小,字号从1~7号,1号字最小,7号字最大。face用来设置文字的字体,如宋体、楷体、黑体等。可以组合这三个属性来满足不同的需要。
2.字体样式元素
字体样式元素用来设置文字是粗体、斜体、加删除线、下画线等。
(1)<strong>元素
该元素把文本内容加粗显示,用于突出某些文字的重要性。
(2)<small>元素
该元素用小一号字体显示文字。
(3)<b>元素
该元素把文本内容加粗显示,用于突出某些文字的重要性。
(4)<big>元素
该元素把文本内容增大一号粗体显示,用于突出某些文字的重要性。
(5)<i>元素
该元素把文本内容斜体显示。
(6)<s>元素
该元素把文本内容加上删除线。
(7)<u>元素
该元素把文本内容加上下画线。
例2.15 <font>元素的示例(ch2-15.htm)。


程序运行结果如图2.26所示。

图2.26 字体控制综合示例
2.7.2 列表控制
在网页的内容安排上,常使用列表来处理具有相同特性的内容,通过对各项内容进行编号,以强化内容编排的条理性。
常用的列表控制元素有dl、dd、dt、li、ul、ol、menu。
(1)<dl>元素
该元素用于定义列表,列表中的条目缺省为左对齐,并缩进排列,需要结束标记。
(2)<dd>元素
该元素用于词汇列表中的定义部分,文本被缩排显示在元素<dt>定义的文本下面,不需要结束标记。置于<dl>内。
(3)<dt>元素
该元素用于显示一个列表的条目不需要结束标记。置于<dl>内。
(4)<li>元素
该元素将文本作为列表上的一个项目来显示,需结束标记。置于<dir>、<ul>、<menu>、<ol>内。在前三个元素内时,可取值为disc(实心圆点)、square(方框)和circle(空心圆)。在<ol>元素内时,可取值为:
①l——十进制数:1、2、3、…
②a——小写字母:a、b、c、…
③A——大写字母:A、B、C、…
④i——小写罗马数字:i、ii、iii、iv、…
⑤I——大写罗马数字:I、II、III、IV、…
(5)<ul>元素
该元素用于建立一个无序列表,需结束标记。有一个重要的属性type。取值如表2.6所示。
表2.6 <ul>元素的type属性

续表

其中disc为浏览器的默认值。
(6)<ol>元素
该元素用于建立有序列表,需结束标记。有一个重要的属性type,取值与表2.6相同。
(7)<menu>元素
该元素设定简单的菜单或列表的开头,需结束标记。
例2.16 请设计图2.27的列表控制网页程序(ch2-16.htm)。

图2.27 列表控制示例

