XHTML 列表

列表标签用于列出一系列序列数据,列表包括有序列表、无序列表和定义列表。

有序列表 ol

有序列表顾名思义就是列表内容是有顺序的,使用 <ol></ol> 标签定义一个有序列表。具体列表项用 <li></li> 列出。

例子:

<ol>
    <li>歌曲A</li>
    <li>歌曲B</li>
    <li>歌曲C</li>
</ol>

显示效果如下:

  1. 歌曲A
  2. 歌曲B
  3. 歌曲C

在列表项内容里可以是文字段落,链接,图像等网页元素。

无序列表 ul

使用 <ul></ul> 标签定义一个无序列表。

<ul>
    <li>歌曲A</li>
    <li>歌曲B</li>
    <li>歌曲C</li>
</ul>

显示效果如下:

  • 歌曲A
  • 歌曲B
  • 歌曲C

列表样式

在每个列表项目前面有一个列表项目标识,不同浏览器表现得不一样,如 IE 浏览器表现为有序数字,而 FireFox 表现为点号。可以通过 CSS 样式来指定项目标识的显示格式,具体参看《CSS 列表

列表嵌套

列表还可以嵌套使用:

<ul>
    <li>周杰伦</li>
        <ul>
            <li>东风破</li>
            <li>菊花台</li>
        </ul>
    <li>张学友</li>
    <li>郑源</li>
</ul>

在浏览器显示效果如下:

  • 周杰伦
    • 东风破
    • 菊花台
  • 张学友
  • 郑源

定义列表

定义列表形式和用法都特殊一些,也不是那么常用。

使用 <dl></dl> 标签定义一个定义列表,<dt></dt> 标签是需要定义的内容,而 <dd><dd> 是对 <dt></dt> 标签的具体解释:

<dl>
    <dt>周杰伦</dt>
        <dd>中国台湾华语流行歌手、著名音乐人、音乐创作家、杰威尔音乐公司老板之一。</dd>
    <dt>张学友</dt>
    <dt>郑源</dt>
</dl>

请注意各个标签的使用顺序及包含情况。另外尽管可以定义多个 dd 标签,但意义上但应该尽量避免。

列表的意义

列表标签相对复杂且无特别的表现意义,因此初学者容易忽略对列表的使用。因此对列表的使用要点在于认识到什么时候或者哪些数据该使用列表,而哪些是有序列表,哪些又是无序列表或者定义列表。

评论于2016-12-18日起不再显示。

5idev.com(我爱开发网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程