当前位置:  首页>> 技术小册>> 编程入门课:HTML(5)从入门到实战

在HTML中,我们可以使用无序列表和有序列表来展示页面中的一些项目列表。无序列表一般用于没有特定顺序的项目,而有序列表则用于需要按照一定顺序展示的项目。

一、无序列表

无序列表用<ul>标签来表示,每个列表项用<li>标签来表示。无序列表的每个项目默认使用圆点作为标识符。

以下是一个简单的无序列表的代码示例:

  1. <ul>
  2. <li>列表项1</li>
  3. <li>列表项2</li>
  4. <li>列表项3</li>
  5. </ul>

以上代码将会生成一个包含三个列表项的无序列表,每个列表项都包含在<li>标签中。在页面中,该列表将会显示为:

  • 列表项1
  • 列表项2
  • 列表项3
    二、有序列表

有序列表用<ol>标签来表示,每个列表项同样用<li>标签来表示。有序列表的每个项目默认使用数字作为标识符。

以下是一个简单的有序列表的代码示例:

  1. <ol>
  2. <li>列表项1</li>
  3. <li>列表项2</li>
  4. <li>列表项3</li>
  5. </ol>

以上代码将会生成一个包含三个列表项的有序列表,每个列表项同样包含在<li>标签中。在页面中,该列表将会显示为:

  1. 列表项1
  2. 列表项2
  3. 列表项3

三、自定义列表样式

在默认情况下,无序列表使用圆点作为标识符,而有序列表使用数字作为标识符。但是,在实际应用中,我们可能需要使用自定义的列表样式来美化列表的外观。

我们可以使用CSS来为列表指定自定义样式。具体做法是,使用CSS的list-style-type属性来指定列表项的标识符类型。list-style-type属性支持多种值,例如disc(圆点)、square(正方形)、decimal(数字)等等。

以下是一个使用自定义列表样式的代码示例:

  1. <style>
  2. ul {
  3. list-style-type: square; /* 将无序列表的标识符改为正方形 */
  4. }
  5. ol {
  6. list-style-type: upper-roman; /* 将有序列表的标识符改为大写罗马数字 */
  7. }
  8. </style>
  9. <ul>
  10. <li>列表项1</li>
  11. <li>列表项2</li>
  12. <li>列表项3</li>
  13. </ul>
  14. <ol>
  15. <li>列表项1</li>
  16. <li>列表项2</li>
  17. <li>列表项3</li>
  18. </ol>

该分类下的相关小册推荐: