列表

Random2026-02-10

第四章列表

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个中国传统文化故事，每一项横向排列，鼠标悬停有高亮效果。

列表

ON THIS PAGE