8.3前端之Html列表

8.3前端之Html列表

列表的分类

• 有序列表

• 无序列表

• 自定义列表

---

对应标签：

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

列表统一使用标签<li>创建内容

有序列表--->支持全局属性、事件属性

列表声明使用标签<ol>,可以用style标签来声明列表的样式

        <h4>有序列表</h4>
        <ol type="I" reversed="reversed" start="10" style="list-style-type: armenian;">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>

可以赋给<ol>标签的属性

属性	值	描述
reversed	reversed	指定列表倒序(9,8,7...)
start	number	一个整数值属性，指定了列表编号的起始值。
type	a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号（默认

可以在head定义好列表的属性，然后再引用。也可以再CSS文件种定义好属性再引用

        <hr />
        <ol class="a">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <br />
        <ol class="b">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <br />
        <ol class="c">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <br />
        <ol class="d" start="2">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>

ol.a{
    list-style-type: decimal-leading-zero;
}
ol.b{
    list-style-type: asterisks;
}
ol.c{
    list-style-type: ethiopic-abegede-am-et;
}
ol.d{
    list-style-type: binary;
}
ol.f{
    list-style-type: bengali;
}

无序列表--->支持全局属性、事件属性，不可引用样式(外部CSS)

列表声明使用标签<ul>,可以用style标签来声明列表的类型--->实心、空心、小方块

<!--无序列表可以内嵌套列表-->
        <ul type="circle">
            <li>Coffee</li>
            <li>Tea</li>
                <ul type="disc">
                    <li>Green Tea</li>
                        <ul type="square">
                            <li>Matcha Green Tea</li>
                        </ul>
                    <li>Red Tea</li>
                </ul>
            <li>Milk</li>
        </ul>

<li>标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。支持全局属性、嵌套属性

自定义列表--->使用<dl>、<dt>、<dd>来定义

• dl声明列表的标签

• dt声明列表的列表头

• dd声明列表的内容

这三个标签均支持全局属性、事件属性

        <dl>
            <dt>这是一个自定义列表,内容可以自行编辑</dt>
            <dd contenteditable="true">- 这是列表的内容</dd>
        </dl>

标签的缩写

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写 （导航列表）

tr是table row的缩写 （表格中的一行）

th是table header cell的缩写 （表格中的表头）

td是table data cell的缩写 （表格中的一个单元格）