HTML列表全攻略：从入门到精通

原创已于 2025-12-27 14:47:18 修改 · 573 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-12-27 14:46:11 首次发布

Web前端开发技术专栏收录该内容

5 篇文章

订阅专栏

第四章列表

文章目录

第四章列表

4.1 列表概述

基础讲解：
列表是网页中非常常见的结构，用于有条理地展示内容。例如购物清单、步骤说明、导航菜单、词语解释等。HTML主要有三种列表：无序列表、有序列表、定义列表。

生活比喻：
想象你写购物清单、做事流程、词典条目，这些都可以用列表来表现。

4.2 无序列表

基础讲解：
无序列表用<ul>标签定义，列表项用<li>标签包裹。列表项前面默认是圆点，可以通过CSS修改为方块或者其他符号。

代码实例：

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

生活比喻：
像记笔记时的“•”项目符号。

扩展用法：

<ul style="list-style-type:square;">
  <li>作业</li>
  <li>复习</li>
</ul>

常见错误：
不要把<li>标签直接写在<ul>外面，否则不会显示成列表项。

4.3 有序列表

基础讲解：
有序列表用<ol>标签定义，列表项用<li>标签包裹。默认是数字编号，也可以设置为字母或罗马数字。

代码实例：

<ol>
  <li>第一步：打开电脑</li>
  <li>第二步：登录系统</li>
  <li>第三步：开始学习</li>
</ol>

扩展用法：

<ol type="A">
  <li>选项一</li>
  <li>选项二</li>
</ol>

生活比喻：
像写操作步骤或者考试题序号，顺序清晰。

常见错误：
不要在<ol>外直接写<li>，必须包裹在<ol>内部。

4.4 列表嵌套

基础讲解：
列表可以嵌套使用，表现更复杂的内容结构。例如章节目录、树状结构。

代码实例：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>西红柿</li>
      <li>黄瓜</li>
    </ul>
  </li>
</ul>

生活比喻：
像课程目录或家庭成员树状图。

常见错误：
嵌套时注意层级结构，每个子列表要在父<li>标签内。

进阶拓展：
可结合CSS为不同层级设置缩进、颜色，表现更清楚。

4.5 定义列表

基础讲解：
定义列表用于名词解释、术语说明等。用<dl>标签定义，<dt>为术语，<dd>为解释。

代码实例：

<dl>
  <dt>HTML</dt>
  <dd>网页结构标记语言。</dd>
  <dt>CSS</dt>
  <dd>网页样式设计语言。</dd>
</dl>

生活比喻：
像字典里的词条和解释，或教科书中的名词释义。

常见错误：
不要在<dl>外写<dt>或<dd>，必须包裹在<dl>内。

进阶拓展：
可用CSS让术语加粗、解释缩进，增强表现力。

4.6 思政案例4——中国传统文化故事：悬梁刺股

<!-- edu_4_6_1.html -->
<!doctype html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>中国传统文化故事</title>
       <style type="text/css">
          * {padding: 0;margin: 0;}
          p{text-indent: 2em;line-height: 1.5em;}
          ul{margin: 20px auto;
             text-align: center;}
          li {margin: 5px auto;font-family: 黑体;
             font-size: 20px;width: 220px;display: inline-block;}
          div {width: 760px;margin: 10px auto;height: 500px;
             background-color: #FEFEEE;padding: 50px;
             box-shadow: 10px 10px 10px #998899;border-radius: 25px;
          }
          ul li:hover {font-style: italic;color: red;}
       </style>
    </head>
    <body>
       <div>
          <img src="image-4-1.jpg">
          <h2 align="center">中国传统文化故事:悬梁刺股</h2>
          <hr >
          <p>我们伟大的祖国有非常悠久的历史。按照古代的传统说法，从传说中的黄帝到现在，大约有四千多年的历史，通常叫做“上下五千年”。期间流传有许多的神话，历史故事等。快来一起了解下我国的文化历史吧。</p>
          <p>悬梁刺股这一历史典故表现了孙敬、苏秦好学勤读的刻苦精神，表明只要付出时间和精力就会有收获的道理，用以激励人发愤读书学习。如果想要把事情做成功，就要下定决心，目标明确。要肯吃苦，肯努力。世上无难事只怕有心人。</p>
          <hr >
          <ul type="circle">
             <li>1.悬梁刺股</li>
             <li>2.画龙点睛</li>             
             <li>3.铁杵磨针</li>
             <li>4.毛遂自荐</li>
             <li>5.孔融让梨</li>
             <li>6.水滴石穿</li>
             <li>7.塞翁失马</li>
             <li>8.自相矛盾</li>
             <li>9.刻舟求剑</li>
          </ul>
       </div>
    </body>
</html>

4.6.1 页面整体结构

本页面采用标准的HTML5结构，包括<head>和<body>两个主要部分。页面通过<div>实现内容居中与美化，适合展示主题故事。

4.6.2 页面头部

<!doctype html>声明页面为HTML5标准文档。
<html lang="en">标签定义页面语言（建议实际应用时改为zh-CN）。
<meta charset="UTF-8">确保中文字符不会乱码。
<title>设置网页标题为“中国传统文化故事”，显示在浏览器标签栏。

4.6.3 样式设计

页面美观依赖于<style>标签内的CSS：

* {padding: 0;margin: 0;}：全局去除默认边距和内边距，保证布局统一。
p{text-indent: 2em;line-height: 1.5em;}：段落首行缩进，行距适中，便于阅读。
ul{margin: 20px auto;text-align: center;}：列表居中显示，外部间距统一。
li {margin: 5px auto;font-family: 黑体;font-size: 20px;width: 220px;display: inline-block;}：每个列表项宽度固定，采用黑体中文大号字体，横向排列。
div {width: 760px;margin: 10px auto;height: 500px;background-color: #FEFEEE;padding: 50px;box-shadow: 10px 10px 10px #998899;border-radius: 25px;}：主内容容器居中显示，背景色淡雅，有阴影和圆角效果，提升页面质感。
ul li:hover {font-style: italic;color: red;}：鼠标悬停时，列表项变斜体且变红，增强互动性。

4.6.4 页面主体内容

<div>：容器元素，将页面主要内容居中并美化。
<img src="image-4-6-1.jpg">：图片展示，为故事增添直观感受。
<h2 align="center">中国传统文化故事:悬梁刺股</h2>：居中大标题，突出主题。
<hr>：水平分隔线，分割不同内容区块。
<p>：两个段落，分别介绍中国历史文化背景和悬梁刺股典故的故事内容及精神内涵。
第二个<hr>再次分隔内容，结构清晰。
<ul type="circle">...</ul>：无序列表，列出9个中国传统文化故事，每一项横向排列，鼠标悬停有高亮效果。

练习 4

[!tip]

答案仅供参考

一、选择题

下列HTML标记中属于非成对标记的是
A. <dl></dl>
B. <ul></ul>
C. <meta>
D. <li></li>
答案：C
下列标记中可以定义有序列表的标记是
A. <dl></dl>
B. <ul></ul>
C. <ol></ol>
D. <dd></dd>
答案：C
列表的作用是用目的性确定的标记(
)，属性(
)，内容(
)
A. <dt></dt>
B. <ul></ul>
C. <dd></dd>
D. <dl></dl>
答案：D
无序列表的type属性的默认值是
A. circle
B. square
C. disc
D. line
答案：C
有序列表的编号符号类型有____种。
A. 1
B. 4
C. 5
D. 13
答案：C

二、填空题

在HTML文档中，ul标记之间必须使用成对的
标记，作用是 列表项。
答案：列表项
有序列表的属性type可以改变编号的起始编号，该属性的值可以是A、a、I、i、1等。
答案：A、a、I、i、1
页面设计：以第4章页面中大学出版社图书奖书奖公示为例，项目顺序用有序列表，第4章用中国大学出版社图书奖公示，要求如图设计。
参考答案：要求用有序列表展示出版社图书奖获奖名单，页面结构和样式参照教材第4章相关示例，具体代码可参考课本图示进行编写。

三、简答题

简述列表类型及常用属性
答案：
HTML列表分为三类：无序列表（<ul>）、有序列表（<ol>）、定义列表（<dl>）。
- 无序列表常用属性有type（设置圆点类型，如disc、circle、square）。
- 有序列表常用属性有type（设置编号类型，如1、A、a、I、i）、start（设置编号起始值）、reversed（反向编号）。
- 定义列表使用<dt>定义术语，<dd>定义解释。
简述定义列表与无序列表、有序列表的差异
答案：
定义列表用于术语与解释的配对，每组由<dt>和<dd>组成，结构为名词-解释。
无序列表和有序列表则是单列项目，前者用圆点等符号，无先后顺序，后者用数字或字母编号，有顺序要求。
简述无序列表、有序列表外在表现的差异
答案：
无序列表每项前有符号（如圆点/方块），项目没有次序；有序列表则每项前有编号（数字、字母、罗马数字等），项目有顺序和编号，视觉上更强调条目排序。