文字列表-有序列表和无序列表

文字列表-有序列表和无序列表

文字列表可以有序地编排一些信息资源,使其条理化结构化,并以列表的样式显示出来。

1 无序列表

无序列表没有行号数字,使用 <ul><li> 标记。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>Code language: HTML, XML (xml)

无序列表还可以嵌套使用。

2 有序列表

有序列表有一个自动的编号,使用 <ol><li> 标记。

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>Code language: HTML, XML (xml)

本节完整代码

<!DOCTYPE html>
<html>
    <head>
        <title>标题栏</title>
    </head>
    <body>
        <h1>今晚的活动</h1>
        <ul>
            <li>烛光晚餐</li>
            <li>烧烤</li>
            <li>唱K</li>
            <li>打麻将</li>
            <li>打台球</li>
            <li>海鲜</li>
        </ul>

        <h1>明晚的活动</h1>
        <ol>
            <li>看日落</li>
            <li>海水浴场</li>
            <li>沙滩排球</li>
            <li>冲浪</li>
            <li>看雪山</li>
            <li>古城</li>
        </ol>
    </body>
</html>Code language: HTML, XML (xml)

说明

  • <ul> 是 unordered list(无序列表)的缩写,<ol> 是 ordered list(有序列表)的缩写,<li> 是 list item(列表项)
  • 无序列表浏览器默认以实心圆点(disc)作为项目符号,可通过 CSS 的 list-style-type 改为空心圆(circle)、方块(square)或去掉符号(none)
  • 有序列表浏览器默认以数字编号(1, 2, 3…),可通过 type 属性或 CSS 改为字母(a, b, c)、罗马数字(i, ii, iii)等
  • 列表可以嵌套,例如在 <li> 内部再放一个 <ul><ol>,实现多级列表结构
  • <li> 必须放在 <ul><ol> 内部,不能直接独立使用
  • 现代 HTML5 中 <ul><ol> 只能直接包含 <li> 元素,<li> 内部可以包含段落、标题、链接等其他块级或行内元素

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注