项目2：HTML5常用标签
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
🎯 项目目标
知识目标

1. 掌握HTML5基本标签、文本标签、图像标签的使用。

2. 理解区块标签（div/span）与列表、表格标签的语法。

能力目标

1. 能够使用HTML5标签制作简单的静态网页（如目录页、诗词页）。

2. 掌握网页制作流程及工具使用。

素质目标

1. 培养专注、持之以恒的“大国工匠”精神。

2. 激发爱国热情与文化自信（结合古诗词任务）。

🚩 任务1：制作“HTML5常用标签学习目录”页面
💡 素质目标： 通过编写目录结构，培养逻辑思维与精益求精的工作态度。

🛠️ 任务分析与知识点

  1. HTML5标签概述： 标签是HTML的核心，基本语法为 <标签名>内容</标签名>（双标签）或 <标签名 />（单标签）。
  2. 标签分类：
    • 按闭合： 单标签（如 <br>）与双标签（如 <p></p>）。
    • 按布局： 块级元素（独占一行，如 <div>）、行内元素（不换行，如 <a>）、行内块元素（如 <img>）。
  3. 标签属性： 用于描述标签的额外信息，格式为 属性名="属性值"。例如：<div id="content"></div>。
🚩 任务2：制作“古诗词鉴赏”页面
💡 文化自信： 通过展示中华优秀传统文化（古诗词），树立文化自信，将技术学习与人文素养相结合。

📝 涉及的核心HTML5基本标签

  • 基本结构标签： <html> (根), <head> (头), <body> (体)。
  • 标题标签： <h1> 到 <h6> (字号依次递减，独占一行)。
  • 段落标签： <p> 用于定义段落，段落间有空白行。
  • 换行标签： <br> 强制换行（单标签）。
  • 水平线标签： <hr> 插入一条水平分割线。
  • 注释标签： <!-- 注释内容 -->，不显示在页面中。
🧩 核心标签速查表

HTML5基本标签演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>古诗词鉴赏</title>
  </head>
  <body>
    <h1>静夜思</h1>
    <hr>
    <p>床前明月光，<br>疑是地上霜。</p>
    <!-- 这是一段注释 -->
  </body>
</html>

其他重要标签：

  • 图像标签： <img src="图片路径" alt="替代文本">
  • 超链接标签： <a href="目标地址" target="_blank">链接文本</a>
  • 列表标签： 有序列表 <ol> / 无序列表 <ul> 配合 <li> 使用。
💻 动手实践
    <title>古诗词鉴赏</title>
  </head>
  <body>
    <h1>静夜思</h1>
    <hr>
    <p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>
    <!-- 这是一首思乡诗 -->
  </body>
</html>
🛠️ 动手实践：制作“个人简介”页面

请按照以下步骤，在你的编辑器中编写代码：

  1. 创建文件： 新建一个文本文档，重命名为 index.html。
  2. 编写骨架： 输入文档类型声明 <!DOCTYPE html> 和基本的 html 结构标签。
  3. 设置头部： 在 <head> 中设置字符集 charset="UTF-8" 和页面标题 <title>。
  4. 编写主体： 在 <body> 中，使用 <h1> 标签写上你的姓名，使用 <p> 标签写一段自我介绍。
  5. 添加图像： 使用 <img src="your-photo.jpg" alt="我的照片"> 标签插入一张图片（需准备图片文件）。
  6. 保存与预览： 保存文件，双击在浏览器中打开，查看效果。
📝 随堂测试

请选择下列问题的正确答案，点击“提交”查看结果。

1. 以下哪个标签用于定义HTML5中的段落？
2. 以下哪个标签用于在网页中插入图像？
📌 课堂总结
  • HTML5标签的重要性： 标签是构建网页的基石，决定了网页的结构和内容。
  • 基本语法规范： 注意双标签的闭合，单标签的自闭合，以及属性值的引号。
  • 常用标签记忆： 重点掌握 h1-h6, p, img, br, hr 等基础标签。
  • 实践出真知： 只有通过不断的编写代码，才能熟练掌握标签的使用技巧。