在HTML中,我们可以使用无序列表和有序列表来展示页面中的一些项目列表。无序列表一般用于没有特定顺序的项目,而有序列表则用于需要按照一定顺序展示的项目。
一、无序列表
无序列表用<ul>
标签来表示,每个列表项用<li>
标签来表示。无序列表的每个项目默认使用圆点作为标识符。
以下是一个简单的无序列表的代码示例:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
以上代码将会生成一个包含三个列表项的无序列表,每个列表项都包含在<li>
标签中。在页面中,该列表将会显示为:
有序列表用<ol>
标签来表示,每个列表项同样用<li>
标签来表示。有序列表的每个项目默认使用数字作为标识符。
以下是一个简单的有序列表的代码示例:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
以上代码将会生成一个包含三个列表项的有序列表,每个列表项同样包含在<li>
标签中。在页面中,该列表将会显示为:
三、自定义列表样式
在默认情况下,无序列表使用圆点作为标识符,而有序列表使用数字作为标识符。但是,在实际应用中,我们可能需要使用自定义的列表样式来美化列表的外观。
我们可以使用CSS来为列表指定自定义样式。具体做法是,使用CSS的list-style-type属性来指定列表项的标识符类型。list-style-type属性支持多种值,例如disc(圆点)、square(正方形)、decimal(数字)等等。
以下是一个使用自定义列表样式的代码示例:
<style>
ul {
list-style-type: square; /* 将无序列表的标识符改为正方形 */
}
ol {
list-style-type: upper-roman; /* 将有序列表的标识符改为大写罗马数字 */
}
</style>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>