今天來(lái)講一講怎樣用 HTML 來(lái)實(shí)現(xiàn)下面的列表。
第一步
可以看到第一層 JavaScript 和 Java 兩個(gè)是無(wú)序列表苞尝，無(wú)序列表使用 <ul>標(biāo)簽霹购，所以可以先實(shí)現(xiàn)這兩個(gè)：
代碼：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>列表實(shí)現(xiàn)</title>
</head>
<body>
<ul>
<li>
JavaScript
</li>
<li>
Java
</li>
</ul>
</body>
</html>
運(yùn)行結(jié)果：
<ul><li>JavaScript</li><li>Java</li></ul>
第二步
下來(lái)可以看到第二層是包含在 <li> 標(biāo)簽里面的并且是有序列表，有序列表使用<ol>標(biāo)簽：
代碼：
<ul>
<li>JavaScript
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
</ul>
運(yùn)行結(jié)果：
<ul><li>JavaScript<ol><li>第一章</li><li>第二章</li></ol></li><li>Java<ol><li>第一章</li><li>第二章</li></ol></li></ul>
第三步
可以看到第三層是包在第二層的 <li> 標(biāo)簽里且它是無(wú)序的溢陪，使用 <ul> 標(biāo)簽：
代碼：
<ul>
<li>JavaScript
<ol>
<li>第一章
<ul>
<li>const</li>
<li>let</li>
</ul>
</li>
<li>第二章
<ul>
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章
<ul>
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul>
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
運(yùn)行結(jié)果：
<ul><li>JavaScript<ol><li>第一章<ul><li>const</li><li>let</li></ul></li><li>第二章<ul><li>function</li><li>object</li></ul></li></ol></li><li>Java<ol><li>第一章<ul><li>class</li><li>package</li></ul></li><li>第二章 <ul><li>private</li><li>public</li></ul></li></ol></li></ul>
這樣就成功的實(shí)現(xiàn)了這樣的列表萍虽。
