HTML之列表生成
2016-12-04 本文已影响64人
WP啦啦啦
还是举个例子吧，如下图所示，该怎么样通过HTML实现这个列表呢？
首先，我们对这个列表进行一个分析，我们可以看到这个列表整体是一个无序列表，共有两项分别为：Javascript 和 Java。每一项中又嵌套了一个含有两项的有序列表：第一章 和 第二章。每一项有序列表中又嵌套了一个含有两项的无序列表。分析完之后，我们就可以通过HTML来实现这个列表了。
- 创建一个含有两项的无序列表
<html>
<body>
<ul>
<li>Javascript</li>
<li>Java</li>
</ul>
</body>
</html>
结果如图1所示：
图1
- 为无序列表的每一项嵌套一个含有两项的有序列表
<html>
<body>
<ul>
<li>Javascript
<ol type=1>
<li>第一章
<li>第二章
</ol>
</li>
<li>Java
<ol type=1>
<li>第一章
<li>第二章
</ol>
</li>
</ul>
</body>
</html>
效果如图2所示：
图2
在创建有序列表时，需要在
<ol>标签中声明type属性，type属性包括：
| type属性 | 描述 |
|---|---|
| type=1 | 列表项目用数字标号 |
| type = A | 列表项目用大写字母标号 |
| type = a | 列表项目用小写字母标号 |
| type = I | 列表项目用大写罗马数字标号 |
| type = i | 列表项目用小写罗马数字标号 |
- 为有序列表的每一项嵌套一个含有两项的无序列表
<html>
<body>
<ul>
<li>Javascript
<ol type="1">
<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 type="1">
<li>第一章
<ul>
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul>
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
</body>
</html>
效果如图3所示
图3
