《任务201-1之HTML列表》
2016-12-10 本文已影响0人
EvaOnTheWay
HTML下的列表与其实例
列表标签
- 有序标签
<ol> ... </ol>
-
无序标签
<ul> ... </ul> -
列表项标签，嵌套于有序与无序标签内部
<li> ... </li> -
定义标签组
<dl>
<dt> the name of your defintion item <dt>
<dd>add description of this item here <dd>
<dl>
简单实例
下面，让我们来构建一个简单的列表。
HTML支持多项文本编辑器，我个人常用的一般都是程序员的好基友---Notepad++和vim，当然，网上也有很多在线编辑器，可以快速提交查看效果，此处不再一一例举。
此例用到了有序列表与无序列表的嵌套，我们将它的结构提取出来后便可以快速构建。
- 无序列表项** <ul> **
- 有序列表项 ** <ol> **
- 无序列表项 ** <ul> **
- 有序列表项 ** <ol> **
最终实现代码如下
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
