HTML 列表

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 15 天，点击查看活动详情

HTML列表

HTML 的列表主要有两种，一种是无序列表，一种是有序列表。

无序列表

无序列表基础版 主要使用<ul>标签和<li>标签，无序列表表示只是列表而已，没有什么顺序之分它的展现形式是由<ul>标签包裹着<li>标签：

<ul>
   <li>ITBB 知识分享网站：</li>
   <li>www.itbbfx.com</li>
</ul>

这是无序列表的基本使用。

同时，我们还可以设置无序列表的图标，默认的图标是黑色实心圆圈，比如设置空心圆圈。

无序列表实心方块图标。

<ul style="list-style-type: square;">

无序列表空心圆图标。

<ul style="list-style-type: circle;">

无序列表是可以嵌套的，也就是无序列表中在放入无序列表。嵌套呢是可以嵌很多层的，且无序列表展现的图标也会有变化，但不会全部都有变化，一般也就前三层图标有变化，其他的就不变了。

<ul>
    <li>ITBB 知识分享网站：</li>
    <ul>
        <li>www.itbbfx.com</li>
        <ul>
            <li>ITBB 知识分享网站：</li>
            <ul>
                <li>www.itbbfx.com</li>
            </ul>
        </ul>
    </ul>
</ul>

有序列表

简单的有序列表 由<ol>标签包裹着<li>标签组成，在网页上显示的时候会有 1，2，3，4这样的数字图标显示，表示为有顺序的显示，也是默认的方式。

<ol>
    <li>ITBB 资料学习分享网</li>
    <li>www.itbbfx.com</li>
</ol>

设置排序方式，例如设置字母排序，或者从某个数值开始排序。

大小英文字母排序

<ol type="A">
    <li>ITBB 资料学习分享网</li>
    <li>www.itbbfx.com</li>
</ol>

小写英文字母

<ol type="A">
    <li>ITBB 资料学习分享网</li>
    <li>www.itbbfx.com</li>
</ol>

罗马排序

<ol type="I">
    <li>ITBB 资料学习分享网</li>
    <li>www.itbbfx.com</li>
</ol>

某个数值开始

<ol start="20">
    <li>ITBB 资料学习分享网</li>
    <li>www.itbbfx.com</li>
</ol>

有序列表中再放入有序列表，和无序列表不同。有序列表的层级图标是不会有变化的：

<ol>
    <li>ITBB 资料学习分享网</li>
   <ol>

    <li>www.itbbfx.com</li>
        <ol>
            <li>ITBB 资料学习分享网</li>
            <ol>

                <li>www.itbbfx.com</li>
            </ol> 
        </ol>
   </ol> 
</ol>