3. HTML5 列表

学习目标

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

无序列表（

）

无序列表使用

(Unordered List)标签创建，其中的每个列表项使用
• (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. 创建一个食谱，使用有序列表表示步骤，步骤内的材料用无序列表表示。

  Tags：liststyletype