本节将为大家讲解 HTML 如何实现下图所示列表效果，先来看看最终实现效果吧！

list.png

新建 list.html 文件，并输入以下框架代码（本文编辑器采用Notepad++）；

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

</body>

</html>

对题目要求列表进行分析，可以发现该列表最外层是一个无序列表，且该无序列表包含两大部分：JavaScript_list 和 Java_list。

JavaScript_list.png

Java_list.png

因此我们在原有代码基础上加入无序列表：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <ul>
        <li>JavaScript</li>
        <li>Java</li>
    </ul>


</body>

</html>

经过分析发现 JavaScript_list 和 Java_list 这两部分除了内容以外其它显示效果皆类似，因此我们仅对于一部分进行分析实现，另一部分参考实现即可。

以 JavaScript_list 为例进一步分析，可以发现其内部最外层为一个有序列表，且该有序列表包含两部分：JavaScript_chapter1_list 和 JavaScript_chapter2_list。

JavaScript_chapter1_list.png

JavaScript_chapter2_list.png

因此我们在原有代码基础上再加入有序列表：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <ul>
        <li>JavaScript</li>
        <ol>
            <li>第一章</li>
            <li>第二章</li> 
        </ol>

        <li>Java</li>
    </ul>


</body>

</html>

经过分析发现 JavaScript_chapter1_list 和 JavaScript_chapter2_list 这两部分除了内容以外其它显示效果皆类似，因此我们仅对于一部分进行分析实现，另一部分参考实现即可。

以 JavaScript_chapter1_list 为例进一步分析，可以发现其内部为一个无序列表，因此我们在原有代码基础上再加入无序列表：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <ul>
        <li>JavaScript</li>
        <ol>
            <li>第一章</li>
            <ul>
                <li>const</li>
                <li>let</li>
            </ul>
            <li>第二章</li>
        </ol>

        <li>Java</li> 
    </ul>


</body>

</html>

此时，JavaScript_chapter1_list 效果已实现，我们参考 JavaScript_chapter1_list 实现 JavaScript_chapter2_list，代码如下：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <ul>
        <li>JavaScript</li>
        <ol>
            <li>第一章</li>
            <ul>
                <li>const</li>
                <li>let</li>
            </ul>
            <li>第二章</li>
            <ul>
                <li>function</li>
                <li>object</li>
            </ul>
        </ol>

        <li>Java</li> 
    </ul>


</body>

</html>

此时，JavaScript_list 效果已实现，我们参考 JavaScript_list 实现 Java_list，最终代码如下：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <ul>
        <li>JavaScript</li>
        <ol>
            <li>第一章</li>
            <ul>
                <li>const</li>
                <li>let</li>
            </ul>
            <li>第二章</li>
            <ul>
                <li>function</li>
                <li>object</li>
            </ul>
        </ol>

        <li>Java</li>
        <ol>
            <li>第一章</li>
            <ul>
                <li>class</li>
                <li>package</li>
            </ul>
            <li>第二章</li>
            <ul>
                <li>private</li>
                <li>public</li>
            </ul>
        </ol>
    </ul>


</body>

</html>

总结

通过对大型任务的分解，将其分解为一个个的小任务，可以有效地减小实现复杂度，且各部分代码之间的逻辑关系也会变得清晰。

源码 Github 链接：https://github.com/anyangxaut/HTML-Learning-Demo

HTML 列表练习题

HTML 列表练习题

总结

推荐阅读更多精彩内容