Web前端HTML基础（四）——列表

        HTML里的列表是一种用于展示一系列相关项目的元素，它可以使网页的内容更加有条理和清晰。HTML里的列表有三种类型：

1、无序列表（Unordered List）：用于表示没有特定顺序的项目列表，每个项目的标记通常是默认的实心圆点符号。无序列表使用 <ul> 标签来定义，每个列表项使用 <li> 标签来定义。例如：

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>

ul标签中含有type属性，可用于更改项目中的标记：

‘disc’为默认属性，前面用实心小圆点 ；‘circle’为空心圆；‘square’代表前面是小方块；‘none‘则代表无显示。

上面的代码会在网页上显示如下：

•  苹果

•  香蕉

•  橘子

2、有序列表（Ordered List）：用于表示按照一定顺序排列的项目，每个项目都有对应的数字或字母标记。有序列表使用 <ol> 标签来定义，每个列表项使用 <li> 标签来定义。例如：

<ol>
<li>打开浏览器</li>
<li>输入网址</li>
<li>点击搜索按钮</li>
</ol>

ol中也有type属性来更改前面标记：

‘1’是默认属性，列表排序用数字标号；‘a’为小写字母标号；‘A’为大写字母标号；‘i’为小写罗马字母标号；‘I’为大写罗马字母标号。

上面的代码会在网页上显示如下：

1. 打开浏览器
2. 输入网址
3. 点击搜索按钮

3、 定义列表（Definition List）：用于表示一组术语及其对应的定义或描述，每个术语和对应的定义通常使用 <dt> 和 <dd> 标签进行标记。定义列表使用 <dl> 标签来定义。例如：

<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页的结构和内容</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于设置网页的样式和布局</dd>
<dt>JavaScript</dt>
<dd>一种脚本语言，用于实现网页的交互和动态效果</dd>
</dl>

上面的代码会在网页上显示如下：

HTML
: 超文本标记语言，用于创建网页的结构和内容

CSS
: 层叠样式表，用于设置网页的样式和布局

JavaScript
: 一种脚本语言，用于实现网页的交互和动态效果

有序列表和无序列表都可进行嵌套使用。

快捷键：ul>li*3——生成三个无序表的li标签