独木舟的木

iOS Developer

0%

HTML 笔记 6.list

发表于 更新于 分类于 Valine：
本文字数： 6.1k 阅读时长 ≈ 6 分钟

HTML 列表

列表元素 含义
ol order list，有序列表
ul unorder list，无序列表
li list item，列表项目
dl definition list，自定义说明列表
dt 说明列表中的术语
dd 说明列表中的定义

示例：

<h3>无序列表</h3>
<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>bread</li>
</ul>

<h3>有序列表</h3>
<ol>
    <li>Coffee</li>
    <li>Milk</li>
    <li>break</li>
</ol>

<!--自定义列表以 <dl> 标签开始。每个自定义列表项目以 <dt> 开始。每个自定义列表项的描述以 <dd> 开始。-->

<h3>自定义列表</h3>
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    <dt>break</dt>
    <dd>💡wtf?</dd>
</dl>
:hexoPostRenderEscape–>

  • 元素

    • li 的 value 属性可以用来生成不连续的有序列表。

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>

<body>
    <ol>
        <!--顺序是：145789-->

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>bananas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>mangoes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>cherries<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>plums<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>grapes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>grapes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">></span></span>
    

    </body>
    

    </html>
    :hexoPostRenderEscape–>

    Emmet 插件快速生成有序列表代码：ol>li*6 再按 Tab 键。

    li 的value 属性

    不同类型的有序列表

    • start 属性：列表首项的编号值。
    • type 属性：显示在各个列表项旁边的编号类型。（1、a、A、i、I）
    <h4>编号列表</h4>
<ol>
    <li>Apple</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

<h4>大写字母列表</h4>
<ol type="A">
    <li>Apple</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

<h4>小写字母列表</h4>
<ol type="a">
    <li>Apple</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

<h4>小写罗马数字列表</h4>
<ol type="i">
    <li>Apple</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

    不同类型的无序列表

    <b>⚠️注意：</b> 在 HTML 4 中， ul 属性已废弃， HTML 5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表

<h4>圆点列表</h4>
<ul style="list-style-type: disc;">
    <li>Apple</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

<h4>圆圈列表</h4>
<ul style="list-style-type: circle;">
    <li>Apple</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

<h4>正方形列表</h4>
<ul style="list-style-type: square;">
    <li>Apple</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

    嵌套列表，示例一：

    <h4>嵌套列表：</h4>

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <ul>
        <li>Black tea</li>
        <li>Green tea</li>
    </ul>
    <li>Milk</li>
</ul>

    嵌套列表，示例二：

    <h4>嵌套列表：</h4>

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <ul>
        <li>Black tea</li>
        <li>Green tea</li>
        <ul>
            <li>China</li>
            <li>Afrcia</li>
        </ul>
    </ul>
    <li>Milk</li>
</ul>

    欢迎关注我的其它发布渠道