15.1　创建有序列表和无序列表

有序列表适于提供完成某一任务的分步说明（如图15.1.1和图15.1.2所示），或用于创建大型文档的大纲（如果愿意，可以加上指向对应部分的链接）。它还适合对面包屑导航进行标记（参见提示）。总之，它适用于任何强调顺序的项目列表。

无序列表可能是万维网上使用范围最广的列表，因为它们常用于标记导航（如图15.1.3和图15.1.4所示）。

创建列表

  • 输入

      （有序列表）或
        （无序列表）。对于有序列表，可以包含start、type和reversed这三个可选的属性。（关于start，参见15.3节；关于type，参见15.2节；关于reversed，参见最后一条提示。reversed还没有浏览器支持，因此无法看到效果。）

      • 输入

      • （这是list一词的前两个字母）以开始第一个列表项目。对于有序列表，可以包含可选的value属性（更多细节参见15.3节）。

      • 添加要包含在列表项目内的内容（如文本、链接、img元素等）。

      • 输入以结束列表项目。

      • 对于每个新的列表项目，重复第2步至第4步。

      • 输入或（与第1步中的开始标记对应）以结束列表。

      1. ...
      2. <body>
      3. <h1>Changing a light bulb</h1>
      4. <ol>
      5.      <li>Make sure you have unplugged the lamp from the wall socket.</li>
      6.      <li>Unscrew the old bulb.</li>
      7.      <li>Get the new bulb out of the package.</li>
      8.      <li>Check the wattage to make sure it's correct.</li>
      9.      <li>Screw in the new bulb.</li>
      10.      <li>Plug in the lamp and turn it on!</li>
      11. </ol>
      12. </body>
      13. </html>

      图15.1.1　目前还没有对列表标题进行格式化的正式方法。大多数情况下，使用常规的标题（参见第3章）或段落（参见第4章）即可，就像下面的例子那样。按照惯例（并非必须），可以对列表项目进行缩进，表明它们是嵌套在ol里面的（对于ul也是这样的）。不过，这些缩进在页面中不会显示出来，页面中的显示是由应用到列表上的CSS控制的

      15.1　创建有序列表和无序列表 - 图1

      图15.1.2　这个列表使用默认的阿拉伯数字创建带编号的有序列表。可以使用CSS对此进行修改。有序列表和无序列表在显示时默认都会进行缩进，无论它们在HTML中是否有缩进（参见图15.1.1）

      1. ...
      2. <body>
      3. <h1>PageWhacker, version 12.0: Features</h1>
      4. <ul>
      5.      <li>New or improved features marked with a solid bullet.</li>
      6.      <li>One-click page layout</li>
      7.      <li>Spell checker for 327 major languages</li>
      8.      <li>Image retouching plug-in</li>
      9.      <li>Special HTML filters</li>
      10.      <li>Unlimited Undo's and Redo's</li>
      11.      <li>Automatic book writing</li>
      12. </ul>
      13. </body>
      14. </html>

      图15.1.3　无序列表中的项目与有序列表中的是相同的，只有ul元素是不同的

      15.1　创建有序列表和无序列表 - 图2

      图15.1.4　在默认情况下，无序列表前面显示实心的圆点。可以通过CSS对此进行修改

      提示　不要根据希望添加在内容旁边的标识样式决定要使用的列表类型，毕竟，这些标识的样式随时都可以通过CSS进行修改（甚至可以在有序列表上显示符号）。相反，应该考虑列表的含义——列表会随着其中项目顺序的改变而改变吗？如果答案是肯定的，就使用有序列表进行标记。否则，就使用无序列表。

      　

      提示　使用列表标记链接组时，大多数情况下均可以使用无序列表，如主导航链接、指向一组视频或相关报道的链接、页脚中的一组链接等。对于面包屑导航则应使用有序列表，因为这些链接有特定的次序（换句话说，顺序是有意义的）。面包屑导航通常水平地显示在主要内容区域的上方，指示当前页面在站点导航路径中的位置。例如，在提供某款移动电话详细信息的页面，面包屑呈现为Home→Products→Phones→The Fone 3.0。列表中的每个项目均为链接（最后一个项目除外，因为访问者正位于The Fone 3.0的页面）。图15.7.5包含了这个例子（面包屑导航位于顶部主导航和产品名称的大标题之间）。

      　

      提示　第11章的完整示例网页演示了各种不同的使用和呈现列表的方式。其中有用于导航的无序列表（水平排列，有符号）、用于一系列图像的无序列表（水平排列，无标识）以及用于一系列按时间排序的月度存档链接的有序列表（有符号）。第3章也有在导航中使用ul的例子。

      　

      提示　除非使用CSS另行指定，有序列表中的项目使用阿拉伯数字（1、2、3等）进行编号（参见图15.1.1）。

      　

      提示　默认情况下，无序列表的项目前面显示实心的圆点（参见图15.1.2）。你可以选择不同的符号（参见15.2节），甚至可以创建你自己的符号（参见15.4节）。

      　

      提示　只能将列表内容放在li元素里。例如，将内容放置在ol或ul开始标记和第一个li元素之间是不允许的。

      　

      提示　可以在li元素中嵌套各种类型的HTML元素，如任何短语内容元素（如em、a、cite等）。在列表项目中嵌套段落和div也是有效的，但很少需要这样做。

      　

      提示　可以在一个列表中创建另一个列表（即嵌套列表，nesting list），甚至可以混合使用有序列表和无序列表。不过，要确保用到所有需要的开始标记和结束标记，对每个列表进行正确地嵌套。嵌套有序列表和无序列表的例子见15.7节。

      　

      提示　默认情况下，列表有一定的左侧外边距，从而形成缩进。可以使用CSS取消（或增大）缩进。根据减少左侧外边距的量，符号可能处于内容的外边或者消失在窗口的左边缘之外（第11章中有这样的例子）。

      　

      提示　如果将内容方向指定为从右向左（例如在语言为希伯来语的情况下），列表就会通过右侧外边距进行缩进。要指定内容方向，可以对页面的html元素中设置dir属性，如。在这个例子中，lang被设为表示希伯来语的he。还可以在body里面的元素上设置dir和lang以覆盖html元素上的设置。dir属性的默认值为ltr。

      　

      提示　截至本书写作之际，还没有浏览器支持布尔型的reversed属性。该属性的作用是指示降序排列的有序列表（使用

        或
          均可指定该属性）。