HTML5 零基础完全教程-3-HTML5 列表

发布时间：2025-03-29 17:37:09

6 阅读

0 评论

文章标签： html 复制

3. HTML5 列表

学习目标

掌握HTML5中三种列表类型的创建和使用
学习列表的嵌套方法
了解列表的属性和自定义功能

无序列表（
）

无序列表使用

(List Item)标签定义。无序列表通常以项目符号（小圆点）开始每个列表项。
基本语法：
```
html复制代码
    列表项1
    列表项2
    列表项3
```
示例 - 购物清单：
```
html复制代码购物清单

    面包
    牛奶
    鸡蛋
    水果
```
小贴士：无序列表非常适合用于项目没有特定顺序的场合，比如购物清单、功能列表等。
在HTML4中，可以使用type属性来改变项目符号的样式（如disc、circle或square），但在HTML5中，建议使用CSS来控制列表样式：
```
css复制代码ul {
    list-style-type: square; /* 方形项目符号 */
}
```
有序列表示例
```
html复制代码烹饪步骤

    准备所有食材并洗净
    将食材切成合适大小
    热锅加油爆香
    依次加入食材翻炒
    加入调料烹饪至熟
```
显示效果：
1. 准备所有食材并洗净
2. 将食材切成合适大小
3. 热锅加油爆香
4. 依次加入食材翻炒
5. 加入调料烹饪至熟
定义列表（
）
定义列表不同于无序列表和有序列表，它用于表示术语及其解释，通常用于词汇表或者键值对数据。
基本语法：
```
html复制代码
    术语1
    术语1的描述
    术语2
    术语2的描述
```
其中：
- (Definition List) 定义列表
- (Definition Term) 定义术语
- (Definition Description) 定义描述
示例 - 编程术语表：
```
html复制代码HTML术语表

    HTML
    超文本标记语言，是创建网页的标准标记语言
    
    CSS
    层叠样式表，用于设置HTML元素的样式
    
    JavaScript
    一种编程语言，可以为网页添加交互功能
```
列表嵌套
HTML列表可以相互嵌套，创建多级列表结构。
示例 - 课程大纲：
```
html复制代码Web开发课程

    HTML基础
        
            标签与属性
            文档结构
            列表与表格
        
    
    CSS样式
        
            选择器
            盒模型
            布局技术
        
    
```
练习题
1. 创建一个包含5个喜欢的电影的无序列表，使用空心圆点作为项目符号。
2. 创建一个Top10排行榜，使用有序列表，从10倒数到1（提示：使用reversed属性）。
3. 创建一个定义列表，包含3个你熟悉的HTML标签及其描述。
4. 制作一个两级嵌套列表，表示你的学习计划，主列表为学科，子列表为具体学习内容。
5. 创建一个食谱，使用有序列表表示步骤，步骤内的材料用无序列表表示。

3. HTML5 列表

学习目标

无序列表（）

购物清单

有序列表示例

烹饪步骤

定义列表（）

HTML术语表

列表嵌套

Web开发课程

练习题

无序列表（
）

定义列表（
）