10、HTML基础——列表元素

列表元素

1. 有序列表

ol：ordered list

li：list item，列表子元素

例如：

<p>把大象装进冰箱分为几步</p>
<ol>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
</ol>

注意：时刻注意语义化，不能因为有序列表的显示效果是有1，2，3……序号，就一定在有序号的情况下使用ol元素。只要是有顺序的列表，不管前面有没有数字都要使用ol。总之，不应该根据显示效果来选择元素，而应该根据元素含义来选择。

属性：

type：选择标号类型，type="A"

例如：

<p>把大象装进冰箱分为几步</p>
    <ol type="A">
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
    </ol>

vscode中的小技巧：选中一段代码，Alt+Shift+$\downarrow$/$\uparrow$，就会向下/上换行粘贴选中代码。

• type="A"
• type="a"

• type="i"

• type="I"

• type="1"(默认值)

注意：type属性在HTML中弃用，但在HTML5中被重新引入。除非列表中序号很重要（比如，在法律或技术文件中条目通常需要所引用），否则使用CSSlist-style-type属性替代。

reversed：序号倒序，内容不变。布尔属性。

<p>把大象装进冰箱分为几步</p>
<ol reversed>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>冰箱门关上</li>
</ol>

2. 无序列表（非常常见）

ul：unordered list

其子元素也是li。

<p>markdown常用操作</p>
<ul>
    <li>空格</li>
    <li>数字符号</li>
    <li>字体</li>
</ul>

无序列表的序号默认是黑圆点，样式同样可以通过CSSlist-style-type更改，改为123序号后，ul依然是无序列表。

无序列表经常用于制作菜单或新闻列表。

3. 定义列表

通常用于一些术语的定义

dl：definition list 定义列表

两个子元素：

• dt: definition title 标题

• dd: definition description 描述

<p>HTML中的术语解释</p>

<dl>
    <dt>HTML</dt>
    <dd>
        超文本标记语言，XXX
    </dd>
    <dt>元素</dt>
    <dd>
        组成HTML文档的单元，XXX
    </dd>
</dl>