本節(jié)將為大家講解 HTML 如何實(shí)現(xiàn)下圖所示列表效果，先來看看最終實(shí)現(xiàn)效果吧！
list.png
- 新建 list.html 文件，并輸入以下框架代碼（本文編輯器采用Notepad++）；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
</body>
</html>
- 對題目要求列表進(jìn)行分析，可以發(fā)現(xiàn)該列表最外層是一個(gè)無序列表，且該無序列表包含兩大部分：JavaScript_list 和 Java_list。
JavaScript_list.png
Java_list.png
因此我們在原有代碼基礎(chǔ)上加入無序列表：
<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>
- 經(jīng)過分析發(fā)現(xiàn) JavaScript_list 和 Java_list 這兩部分除了內(nèi)容以外其它顯示效果皆類似，因此我們僅對于一部分進(jìn)行分析實(shí)現(xiàn)，另一部分參考實(shí)現(xiàn)即可。
- 以 JavaScript_list 為例進(jìn)一步分析，可以發(fā)現(xiàn)其內(nèi)部最外層為一個(gè)有序列表，且該有序列表包含兩部分：JavaScript_chapter1_list 和 JavaScript_chapter2_list。
JavaScript_chapter1_list.png
JavaScript_chapter2_list.png
因此我們在原有代碼基礎(chǔ)上再加入有序列表：
<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>
- 經(jīng)過分析發(fā)現(xiàn) JavaScript_chapter1_list 和 JavaScript_chapter2_list 這兩部分除了內(nèi)容以外其它顯示效果皆類似，因此我們僅對于一部分進(jìn)行分析實(shí)現(xiàn)，另一部分參考實(shí)現(xiàn)即可。
- 以 JavaScript_chapter1_list 為例進(jìn)一步分析，可以發(fā)現(xiàn)其內(nèi)部為一個(gè)無序列表，因此我們在原有代碼基礎(chǔ)上再加入無序列表：
<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>
- 此時(shí)，JavaScript_chapter1_list 效果已實(shí)現(xiàn)，我們參考 JavaScript_chapter1_list 實(shí)現(xiàn) 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>
- 此時(shí)，JavaScript_list 效果已實(shí)現(xiàn)，我們參考 JavaScript_list 實(shí)現(xiàn) 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>
總結(jié)
通過對大型任務(wù)的分解，將其分解為一個(gè)個(gè)的小任務(wù)，可以有效地減小實(shí)現(xiàn)復(fù)雜度，且各部分代碼之間的邏輯關(guān)系也會變得清晰。
源碼 Github 鏈接：https://github.com/anyangxaut/HTML-Learning-Demo
