第4章 丰富你的网页内容

语义化标签让内容有血有肉 ｜ 课型：实习课 ｜ 建议课时：2节

🏠 返回总目录 / 第4章

🎯 学习目标

知识目标

  • 掌握标题、列表（ul/ol/dl）、图片img及alt属性
  • 掌握语义化布局标签：header/nav/main/article/section/footer
  • 掌握表格table系列标签与字符实体

能力目标

  • 能创建结构清晰的"我的爱好"介绍页
  • 能为所有图片添加规范的alt描述
  • 能用表格展示结构化数据

德育目标

  • 培养无障碍意识：alt文字是对视障用户的尊重
  • 树立语义化即专业化的职业标准

教学重点

  • 列表与图片标签
  • 语义化标签的正确选用
  • 表格基本结构

教学难点

  • 语义化标签的选择逻辑（article vs section）
  • 表格跨行跨列

💻 实例演示1个实例 · 可在线运行

▶ 我的爱好介绍页

综合运用语义化标签、列表、图片占位、表格的完整页面。

新窗口运行 下载源码

操作步骤

  1. 观察页面结构：header/main/article/footer各司其职
  2. 用开发者工具查看语义化标签树
  3. 为ul添加两个新列表项
  4. 修改表格增加一行数据
  5. 尝试把article换成div，对比大纲变化

效果观察点

  • 语义化标签让结构自解释
  • 表格边框需border-collapse才美观
  • ©实体显示为©
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的爱好</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; max-width: 680px; margin: 0 auto; color: #1f2a33; }
  header { background: #123a52; color: #fff; padding: 24px; text-align: center; }
  main { padding: 20px; }
  table { border-collapse: collapse; width: 100%; margin: 12px 0; }
  th, td { border: 1px solid #6b8a99; padding: 8px; text-align: center; }
  th { background: #e7f7f4; }
  footer { text-align: center; color: #6b8a99; padding: 16px; font-size: 14px; }
</style>
</head>
<body>
  <header><h1>我的爱好</h1></header>
  <main>
    <article>
      <h2>编程</h2>
      <p>我喜欢用代码创造世界。常用技术：</p>
      <ul><li>HTML5</li><li>CSS3</li><li>JavaScript</li></ul>
    </article>
    <article>
      <h2>我的周计划</h2>
      <table>
        <thead><tr><th>星期</th><th>安排</th><th>时长</th></tr></thead>
        <tbody>
          <tr><td>周一</td><td>HTML练习</td><td>2小时</td></tr>
          <tr><td>周三</td><td>CSS实战</td><td>2小时</td></tr>
          <tr><td>周五</td><td>项目复盘</td><td>1小时</td></tr>
        </tbody>
      </table>
    </article>
  </main>
  <footer>&copy; 2026 我的爱好页</footer>
</body>
</html>

📋 实习任务书

任务目标：独立制作语义化"我的爱好"页面，内容组织清晰

任务内容与评分
任务1：使用header/main/footer搭建页面骨架（20分）
任务2：用至少两种列表展示爱好内容（20分）
任务3：插入一张图片并编写规范alt（20分）
任务4：制作3行3列的表格展示个人作息（25分）
任务5：使用字符实体在页面显示"<div>是盒子"（15分）

自我评价

📚 课后作业与预习