菜单 搜索
首页 前端知识 Html5学习教程，从入门到精通，HTML5 列表语法知识点及案例代码（11）

Html5学习教程，从入门到精通，HTML5 列表语法知识点及案例代码（11）

2025-03-13 15:03:55 前端知识 前端哥 892 523 我要收藏

HTML 列表语法知识点及案例代码

一、HTML 列表类型

HTML 提供了三种列表类型：

  1. 无序列表 (Unordered List)：使用 <ul> 标签定义，列表项使用 <li> 标签定义。默认情况下，列表项前面会显示黑色圆点。
  2. 有序列表 (Ordered List)：使用 <ol> 标签定义，列表项使用 <li> 标签定义。默认情况下，列表项前面会显示数字序号。
  3. 定义列表 (Definition List)：使用 <dl> 标签定义，包含术语 (<dt>) 和描述 (<dd>) 两部分。

二、列表语法知识点

  1. 基本语法：

    <!-- 无序列表 -->
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

<!-- 定义列表 -->
<dl>
  <dt>术语 1</dt>
  <dd>描述 1</dd>
  <dt>术语 2</dt>
  <dd>描述 2</dd>
</dl>

  2. 列表属性：

    • type 属性 (仅适用于 <ul> 和 <ol>)：指定列表项标记的类型。
      • <ul> 的 type 属性值：
        • disc (默认)：实心圆点
        • circle：空心圆点
        • square：实心方块
      • <ol> 的 type 属性值：
        • 1 (默认)：数字 (1, 2, 3, …)
        • A：大写字母 (A, B, C, …)
        • a：小写字母 (a, b, c, …)
        • I：大写罗马数字 (I, II, III, …)
        • i：小写罗马数字 (i, ii, iii, …)
    • start 属性 (仅适用于 <ol>)：指定列表项序号的起始值。
    • reversed 属性 (仅适用于 <ol>)：指定列表项序号是否倒序排列。

  3. 嵌套列表：

    列表可以嵌套使用，例如在 <li> 标签内再嵌套一个 <ul> 或 <ol>。

三、案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 列表示例</title>
</head>
<body>

  <h2>无序列表</h2>
  <ul>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
  </ul>

  <h2>有序列表</h2>
  <ol>
    <li>打开冰箱</li>
    <li>拿出牛奶</li>
    <li>关上冰箱</li>
  </ol>

  <h2>定义列表</h2>
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
  </dl>

  <h2>嵌套列表</h2>
  <ul>
    <li>水果
      <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
      </ul>
    </li>
    <li>蔬菜
      <ul>
        <li>菠菜</li>
        <li>胡萝卜</li>
        <li>西红柿</li>
      </ul>
    </li>
  </ul>

  <h2>列表属性</h2>
  <ul type="square">
    <li>正方形标记 1</li>
    <li>正方形标记 2</li>
  </ul>

  <ol type="A" start="3">
    <li>从 C 开始的大写字母</li>
    <li>D</li>
    <li>E</li>
  </ol>

  <ol reversed>
    <li>倒序排列 3</li>
    <li>倒序排列 2</li>
    <li>倒序排列 1</li>
  </ol>

</body>
</html>

四、代码注释

  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html lang="zh-CN">：定义文档语言为中文。
  • <head>：包含文档的元数据，例如标题、字符编码等。
  • <title>：定义文档标题，显示在浏览器标签页上。
  • <body>：包含文档的主体内容。
  • <h2>：定义二级标题。
  • <ul>：定义无序列表。
  • <ol>：定义有序列表。
  • <dl>：定义定义列表。
  • <li>：定义列表项。
  • <dt>：定义术语。
  • <dd>：定义描述。
  • type 属性：指定列表项标记的类型。
  • start 属性：指定列表项序号的起始值。
  • reversed 属性：指定列表项序号是否倒序排列。

五、总结

HTML 列表是网页中常用的元素，可以有效地组织和展示信息。掌握列表的语法和属性，可以帮助你创建更加清晰、易读的网页内容。

当然可以！以下是一些实际开发中常见的 HTML 列表应用场景和具体案例代码：

1. 导航菜单

导航菜单通常使用无序列表 (<ul>) 来实现，结合 CSS 可以创建美观的导航栏。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>导航菜单示例</title>
  <style>
    /* 简单样式 */
    ul.nav {
      list-style-type: none; /* 去掉默认的圆点 */
      margin: 0;
      padding: 0;
      background-color: #333;
      overflow: hidden;
    }
    ul.nav li {
      float: left; /* 横向排列 */
    }
    ul.nav li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }
    ul.nav li a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <h2>导航菜单</h2>
  <ul class="nav">
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</body>
</html>

2. 步骤说明

有序列表 (<ol>) 常用于展示步骤或流程。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>步骤说明示例</title>
  <style>
    ol.steps {
      line-height: 1.6;
    }
    ol.steps li {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h2>如何煮咖啡</h2>
  <ol class="steps">
    <li>准备咖啡豆和研磨机。</li>
    <li>将咖啡豆研磨成适合的粗细。</li>
    <li>将滤纸放入滤杯中，并用热水润湿。</li>
    <li>加入研磨好的咖啡粉，轻轻拍平。</li>
    <li>缓慢注入热水，进行萃取。</li>
    <li>等待萃取完成，倒入杯中享用。</li>
  </ol>
</body>
</html>

3. 常见问题解答 (FAQ)

定义列表 (<dl>) 非常适合用于展示问题和答案。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>常见问题解答示例</title>
  <style>
    dl.faq dt {
      font-weight: bold;
      margin-top: 15px;
      color: #2c3e50;
    }
    dl.faq dd {
      margin-left: 20px;
      color: #34495e;
    }
  </style>
</head>
<body>
  <h2>常见问题解答</h2>
  <dl class="faq">
    <dt>Q: 如何注册账号？</dt>
    <dd>A: 点击首页的“注册”按钮，填写相关信息即可完成注册。</dd>
    <dt>Q: 忘记密码怎么办？</dt>
    <dd>A: 在登录页面点击“忘记密码”，按照提示重置密码。</dd>
    <dt>Q: 如何联系客服？</dt>
    <dd>A: 您可以通过邮箱 support@example.com 或电话 123-456-7890 联系客服。</dd>
  </dl>
</body>
</html>

4. 商品分类

无序列表 (<ul>) 可以用于展示商品分类或目录结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>商品分类示例</title>
  <style>
    ul.categories {
      list-style-type: none;
      padding: 0;
    }
    ul.categories li {
      background-color: #f9f9f9;
      margin: 5px 0;
      padding: 10px;
      border-left: 5px solid #3498db;
    }
    ul.categories li:hover {
      background-color: #ecf0f1;
    }
  </style>
</head>
<body>
  <h2>商品分类</h2>
  <ul class="categories">
    <li>电子产品</li>
    <li>家用电器</li>
    <li>服装鞋帽</li>
    <li>食品饮料</li>
    <li>图书音像</li>
  </ul>
</body>
</html>

5. 嵌套列表

嵌套列表可以用于展示多级结构，例如文件目录或组织架构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>嵌套列表示例</title>
  <style>
    ul.directory {
      list-style-type: none;
      padding-left: 20px;
    }
    ul.directory li {
      margin: 5px 0;
    }
    ul.directory li::before {
      content: "📁 ";
    }
  </style>
</head>
<body>
  <h2>文件目录结构</h2>
  <ul class="directory">
    <li>项目文件夹
      <ul>
        <li>css
          <ul>
            <li>style.css</li>
          </ul>
        </li>
        <li>js
          <ul>
            <li>main.js</li>
          </ul>
        </li>
        <li>images</li>
        <li>index.html</li>
      </ul>
    </li>
  </ul>
</body>
</html>

6. 带图标的列表

结合 Font Awesome 或自定义图标，可以创建更丰富的列表。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>带图标的列表示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    ul.icon-list {
      list-style-type: none;
      padding: 0;
    }
    ul.icon-list li {
      margin: 10px 0;
    }
    ul.icon-list li i {
      margin-right: 10px;
      color: #3498db;
    }
  </style>
</head>
<body>
  <h2>功能列表</h2>
  <ul class="icon-list">
    <li><i class="fas fa-check"></i>支持多种文件格式</li>
    <li><i class="fas fa-check"></i>实时同步数据</li>
    <li><i class="fas fa-check"></i>跨平台支持</li>
    <li><i class="fas fa-check"></i>强大的安全保障</li>
  </ul>
</body>
</html>

总结

以上案例展示了 HTML 列表在实际开发中的多种应用场景，包括导航菜单、步骤说明、常见问题解答、商品分类、嵌套列表和带图标的列表。通过这些案例，你可以更好地理解如何灵活运用 HTML 列表来构建清晰、结构化的网页内容。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/23468.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Spring Boot面试问答

2025-03-13 15:03:01

vue左侧边框点击后让字体高亮

2025-03-13 15:03:01

刚刚！微调 DeepSeek 满血版正式开源。。。

2025-03-13 15:03:58

vue调整表格样式之深度修改

2025-03-13 15:03:57

vuejs 组件基础 路由

2025-03-13 15:03:57

STM32之I2C硬件外设

2025-03-13 15:03:51

【Spring Data】

2025-03-13 15:03:51

大学至今的反思与总结

2025-03-13 15:03:50

解锁DeepSpeek-R1大模型微调：从训练到部署，打造定制化AI会话系统

2025-03-13 15:03:50

2024华为OD机试真题-日志排序(C /Java/Python)-E卷-100分

2025-03-13 15:03:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！