本日志标题:有关<uL>、<ol>和<dl>        [2006-3-17]

本文摘自《Dreamweaver 从基础到实际》一书,未经允许,请勿转载!

文本列表一般分项目列表、编号列表和定义列表。

1.项目列表(bulleted lists)

列表项目是以项目符号开头,在列表项之间没有先后次序时使用,所以又称无序列表(unordered lists)。

它可以用于一个政府或公司的组织分布图,也可用于百货商店的商品列表,还可用于学习科目上的分类等实际应用中。其操作步骤可如下:

(1)输入多块无序的段落文本。
(2)全选所有段落。
(3)Ctrl+F3打开【属性】面板,单击其中的【项目列表】按钮 。

这是一种将现有文本转换成列表的方法,采用原因是其所具有的无序性。

一个标准的项目列表的HTML标签代码如下:

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

项目列表的HTML标签中<ul>…</ul>(即unordered lists首字母缩写)表示将打开一个项目列表,包含于其中的<li>…</li>则表示具体的列表项。在项目列表中有三种类型的项目符号:

实心点(黑点,type="disc",项目符号默认类型)
空心点(句点,type="circle")
矩形实点(方块,type="square")

项目符号的选择,可在【属性】面板中单击【列表项目】按钮,弹出对话框中进行选择。

2.编号列表(numbered lists)

编号列表是以数字编号开头,一般列表项目都是有明确的先后顺序的,所以又称有序列表(ordered lists)。

它可以用在作息时间表、工作进度表、书籍大纲目录等实际应用中。其操作步骤可如下:

(1)将光标插入在文档窗口中。
(2)打开【属性】面板,单击其中的【编号列表】按钮 。
(3)页面文档中即显示出编号,在编号后输入文本内容。
(4)若要显示下一编号,则在该列表项后按回车(Enter)键即可。
(5)若要退出该编号列表,按回车(Enter)键两次即可。

一个标准的编号列表的HTML标签代码如下:

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

编号列表的HTML标签中<ol>…</ol>(即ordered lists首字母缩写)表示打开一个编号列表,而包含其中的列表项同样是用<li>…</li>表示。

关于编号列表的列表项所采用项目符号就显得比较多样。同样,在【属性】面板中单击【列表项目】按钮,弹出对话框中进行选择。

3.定义列表(defined lists)

定义列表是不使用项目符号或数字作为列表项前导符的列表形式。其结构是:在每个列表项目后带有一个缩进的定义字段(可以为空)。这就好像字典中对某个字的解释情况一样,所以,定义列表又称字典列表。

它可用在站点友情链接的介绍、搜索引擎的查询结果显示、中英文对译等网页应用中。其操作步骤可如下:

(1)打开【插入】面板,选择【文本】类别,单击【定义列表】按钮[dl] 。
(2)在【设计】视图中输入首列表项作为【定义术语】。
(3)按回车(Enter)键得一缩进的列表项作为【定义说明】。
(4)继续按回车(Enter)键又为新的【定义术语】。
(5)重复(3)→(4)的步骤即可创建多个定义列表项。若退出定义列表,按回车(Enter)键两次即可。

一个标准的定义列表的HTML标签代码如下:

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

定义列表的HTML标签中<dl>…</dl>(即defined lists首字母缩写)表示打开一个定义列表,<dt>…</dt>所包含的列表项目表示一个【定义术语】,而<dd>…</dd>所包含的列表项则是一个【定义说明】了。除非特殊情况外,定义列表比较少见。

注意,以上提及的项目列表、编号列表和定义列表是文本列表中较为常见的,它们的操作步骤方法并非惟一的,读者可将本文介绍的三种方法灵活运用。并且,它们之间是可以随时调换的。前提是全选所有列表项,再重新选择新的列表类型。此外,文本列表还有目录列表和菜单列表之分。


tag:ul\ol\dl\li\Web标准
在百度搜索完整的有关<uL>、<ol>和<dl>内容,或者用Google搜索相关的更多内容

By [cnbruce] at 16:40:41 | 评论 [1] | 浏览 [22484] | TrackBack| 返回顶部

About Comments
25558888[img]smile/face53.gif[/img][img]smile/face54.gif[/img][img]smile/face57.gif[/img][img]smile/face88.gif[/img][img]smile/face88.gif[/img][img]smile/face88.gif[/img][img]smile/face88.gif[/img][img]smile/face88.gif[/img][img]smile/face88.gif[/img][img]smile/face88.gif[/img][img]smile/face88.gif[/img][img]smile/face77.gif[/img][img]smile/face77.gif[/img][img]smile/face78.gif[/img][img]smile/face79.gif[/img][img]smile/face57.gif[/img][img]smile/face57.gif[/img][img]smile/face54.gif[/img][img]smile/face52.gif[/img][img]smile/face12.gif[/img][img]smile/face12.gif[/img][img]smile/face10.gif[/img][img]smile/face32.gif[/img]
By [44433000] at 2008-4-17 13:26:11


Post a Comment
呢称: 验证码: 
禁止笑脸转换 禁止UBB | 缩放输入框:6 5 | [Ctrl+Enter提交](1000个字符限制)