作业在html中写代码,HTML作业——列表篇

前言###

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

作业简述###

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

作业分析###

有目标图片我们可以很快得出这样一个事实：这个列表嵌套了三层。最外层是一个由两项内容组成的无序列表，对于最外层的每项中嵌套了一个有序列表，最内层，也就是有序列表的每项中又套着一个无序列表。

值得注意的是最外层的两项结构是完全一样的！！！

那就意味着我们完成其中一项的代码编写后，另一项基本可以采用Ctrl+c、Ctrl+v来完成，然后我们再看，次外层的有序列表的两项结构也是一致的，那么实际的HTML代码需要完全手动书写的只有看上的的四分之一。(其中的无序列表还可以再分，只是太简单了，没必要。。。这大概算是偷懒了。。。)

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

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

我的HTML代码###

• JavaScript
  1. 第一章
     • const
     • let
  2. 第二章
     • function
     • package
• Java
  1. 第一章
     • class
     • package
  2. 第二章
     • private
     • public

效果如图：

效果图1

可以看到，还是存在类似试卷篇中的缩进问题。。。不过这并不是什么大问题，之后使用CSS，应该可以解决。

至于字体，应该和浏览器有关，同样的代码，我在FireFox上打开就是下图效果：

效果图2

明显更为饱满一些。

总结###

最后，再总结一下列表的使用。

列表相关标签常用的有三个

标签

作用

ol

生成有序列表

ul

生成无序列表

li

生成表项

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

注：对于代码中的大量

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