首先我们来明确一下我们的任务,我们需要用HTML列表的知识做出一个如图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去定义。
运行出来的结果:
最后完善一下代码就可以得到我们的目标列表了。