html在线问答填空题,HTML 列表练习题

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

list.png

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

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

JavaScript_list.png

Java_list.png

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

• JavaScript
• Java

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

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

JavaScript_chapter1_list.png

JavaScript_chapter2_list.png

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

• JavaScript

1. 第一章
2. 第二章

Java

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

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

• JavaScript

1. 第一章

• const
• let

第二章Java

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

• JavaScript

1. 第一章

• const
• let

第二章

• function
• object

Java

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

• JavaScript

1. 第一章

• const
• let

第二章

• function
• object

Java

1. 第一章

• class
• package

第二章

• private
• public

总结

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