列表的创建过程
创建一个HTML列表需要两个元素,这两个元素结合使用就可以创建一个HTML列表。
第一个元素用来标记列表项,第二个元素决定你创建的列表类型:有序还是无序。
- 第一步:
把每个列表项目放到一个< li>元素中
把每个列表项目放到各自的< li>元素中创建列表。这意味着把内容放在< li>和< /li>之间。
<li>我是一个列表项目<li>
- 第二步
用< ul>和< ol>封装列表元素。
如果使用< ul>封装列表元素,则列表为无序列表;如果使用< ol>封装列表元素,则列表为有序列表。
无序列表:
<ul>
<li>Javascript</li>
<li>Java</li>
<ul>
有序列表:
<ol>
<li>第一天</li>
<li>第二天</li>
</ol>
运行结果:
<ul> <li>Javascript</li> <li>Java</li> <ul> <ol> <li>第一天</li> <li>第二天</li> </ol>
列表的嵌套使用
在制作列表的时有时候需要也个列表嵌套使用,比如:目录
列表在嵌套创建时可以在有序列表中嵌套无序列表,也可以在无序列表中嵌套有序列表。
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<ul>
<li>const</li>
<li>let</li>
</ul>
</ol>
</ul>
运行结果:
<ul> <li>JavaScript</li> <ol> <li>第一章</li> <ul> <li>const</li> <li>let</li> </ul> </ol></ul>
列表的使用注意事项
- < ol>和< li>必须一起使用吗?
必须一起使用,它们唇齿相依,缺一不可。 - 我们可以在< ol>或< ul>中添加其他元素或文字吗?
不行,< ol>和< ul>的诞生只是为了配合< li>的使用。 - 列表有有序列表和无序列表,还有其他的类型吗?
还有自定义列表,列表中的每个项目都有一个限项< dt>和一个描述< dd>。
自定义列表示例:
<dl>
<dt>HTML</dt>
<dd>HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language)</dd>
<dt>JavaScript</dt>
<dd>JavaScript,一种高级编程语言</dd>
</dl>
运行结果:
<dl> <dt>HTML</dt> <dd>HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language)</dd> <dt>JavaScript</dt><dd>JavaScript,一种高级编程语言</dd>
</dl>