HTML基础之列表

首先我们来明确一下我们的任务，我们需要用HTML列表的知识做出一个如图1.1的列表。

1.1

这个列表我们分三个步骤完成。

一. 先创建出最外层的部分。

<ul>  
    <li>JavaScript</li>    
    <li>Java</li>
</ul>
//其中无序列表始于<ul>,列表项始于<li>，其中<ul>与<li>是不可分割的

运行出来的结果：

无序列表

二. 接着创建出有序列表的部分。

<ul>
    <li>JavaScript</li>
    <ol>//无序列表与有序列表是嵌套关系
        <li>第一章</li>
        <li>第二章</li>
    </ol>
    <li>Java</li>
    <ol>
        <li>第一章</li>
        <li>第二章</li>
    </ol>
</ul>
//有序列表始于<ol>,而只要是列表，列表项都始于<li>，<ol>与<li>也是不可分割的。

运行出来的结果是：

无序列表

三. 最后添加正方形的无序列表样式。

<ul class="square">
    <li>function</li>
    <li>object</li>
</ul>
//用法如之前的无序列表一样，而正方形的列表样式则使用class去定义。

运行出来的结果：

正方形无序列表

最后完善一下代码就可以得到我们的目标列表了。