HTML作业——列表篇

前言###

其实我完成作业的顺序有点问题，按理说应该是从简单的入手，但我却先完成了试卷篇。不过在那次作业中已经有了对于列表的理解，这次写起来也就So Easy了。

作业简述###

写一篇博客详细说明下面这个列表是如何实现的：

作业分析###

有目标图片我们可以很快得出这样一个事实：这个列表嵌套了三层。最外层是一个由两项内容组成的无序列表，对于最外层的每项中嵌套了一个有序列表，最内层，也就是有序列表的每项中又套着一个无序列表。
值得注意的是最外层的两项结构是完全一样的！！！
那就意味着我们完成其中一项的代码编写后，另一项基本可以采用Ctrl+c、Ctrl+v来完成，然后我们再看，次外层的有序列表的两项结构也是一致的，那么实际的HTML代码需要完全手动书写的只有看上的的四分之一。（其中的无序列表还可以再分，只是太简单了，没必要。。。这大概算是偷懒了。。。）

实际需要编写HTML代码的部分，其他的代码可以通过复制+修改文本内容完成

分析到这里，就可以动手写代码了。

我的HTML代码###

<html>
<body>
    <ul>
        <li>
            <div>JavaScript</div>
            <div>
                <ol>
                    <li>
                        <div>第一章</div>
                        <div>
                            <ul>
                                <li>const</li>
                                <li>let</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div>第二章</div>
                        <div>
                            <ul>
                                <li>function</li>
                                <li>package</li>
                            </ul>
                        </div>
                    </li>
                </ol>
            </div>
        </li>
        <li>
            <div>Java</div>
            <div>
                <ol>
                    <li>
                        <div>第一章</div>
                        <div>
                            <ul>
                                <li>class</li>
                                <li>package</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div>第二章</div>
                        <div>
                            <ul>
                                <li>private</li>
                                <li>public</li>
                            </ul>
                        </div>
                    </li>
                </ol>
            </div>
        </li>
    </ul>
</body>
</html>

效果如图：

效果图1

可以看到，还是存在类似试卷篇中的缩进问题。。。不过这并不是什么大问题，之后使用CSS，应该可以解决。
至于字体，应该和浏览器有关，同样的代码，我在FireFox上打开就是下图效果：

效果图2

明显更为饱满一些。

总结###

最后，再总结一下列表的使用。
列表相关标签常用的有三个

标签	作用
ol	生成有序列表
ul	生成无序列表
li	生成表项

要是觉得不够用，可以在记一个type属性，在使用无序列表时，可以用来改变表项前符号的形状；使用有序列表时，可以改变序号的类型（阿拉伯数字或罗马数字等）。

注：对于代码中的大量<div>使用的原因，是之前听别人讲，这个可以用来表达出作者的写代码的逻辑，所以就尝试了一下。不过现在看着，我自己是能理解里面的逻辑关系，不知道读者能不能看懂。若不能，希望可以提一些意见或者建议，谢谢~