前言###
其实我完成作业的顺序有点问题，按理说应该是从简单的入手，但我却先完成了试卷篇。不过在那次作业中已经有了对于列表的理解，这次写起来也就So Easy了。
作业简述###
实际需要编写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>使用的原因，是之前听别人讲，这个可以用来表达出作者的写代码的逻辑，所以就尝试了一下。不过现在看着，我自己是能理解里面的逻辑关系，不知道读者能不能看懂。若不能，希望可以提一些意见或者建议，谢谢~
网友评论