HTML5 列表

Posted 2020-06-20

html5 列表

列表的作用

列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列。所有的列表都由列表类型和列表项组成。

列表分为有序列表和无需列表，列表项 <li> 用于显示具体的列表内容。

有序列表 <ol>

<ol> 元素编写有序列表，用于列出页面上有特定次序的一些项目。<ol> 元素中只能包含列表项元素 <li>。

<ol type="列表类型" start="起始编号">
    <li>...</li>
    <li>...</li>
    ...
</ol>

type 属性值：

1：数字(默认)

a：小写字母

A：大写字母

i：小写罗马数字

I：大写罗马数字

无序列表 <ul>

<ul> 元素表示无序列表，用于列出页面上没有特定次序的一些项目。并且 <ul> 元素中只能包含具体的列表项元素 <li>。

<ul type="列表类型">
    <li>...</li>
    <li>...</li>
    ...
</ul>

type 属性值：

disc：实心圆(默认)

circle：空心圆

square：实心矩形

列表嵌套

将列表元素嵌套使用，可以创建多层列表，常用于创建文档大纲、导航菜单等。

<ul>
    <li>
        Web 基础知识
        <ul>
            <li>Web的工作原理</li>
        </ul>
    </li>
    <li>
        HTML快速入门
        <ul>
            <li>基础语法</li>
        </ul>
    </li>
</ul>

定义列表 <dl>

定义列表往往用于要给出一类事物的定义的情形，如名词解释、字典等。

<dl> 标记定义一个定义列表。

<dt> 标记定义了定义列表中的一个术语。

<dd> 标记对定义列表中的术语提供定义。

<dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的设备</dd>
</dl>