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

掌握HTML5基本标签、文本、图像、列表、超链接及表格标签的语法。

能力目标

能熟练使用常用标签制作简单的静态网页结构，理解标签的嵌套关系。

素质目标

培养“大国工匠”精神，严谨细致的工作态度，激发爱国热情与文化自信。

🚩 任务1：制作“中国人、飞天梦”页面
💡 思政融入点： 结合航天主题，将技术学习与爱国主义教育结合，增强民族自豪感。

🛠️ 涉及知识点：区块与多媒体标签

  1. 区块标签 <div> 与 <span>

    <div> 是块级容器，用于布局网页大区域；<span> 是行内容器，用于修饰局部文本。

  2. 图像标签 <img>

    语法：<img src="图片路径" alt="替代文本" width="300" height="200" />。注意 src 和 alt 属性的使用。

  3. 多媒体格式

    网页常用格式：JPG（有损压缩，体积小）、GIF（动态图，256色）、PNG（无损压缩，质量高）。

🚩 任务2：制作“冰雪大世界”页面

🛠️ 涉及知识点：列表与超链接标签

  1. 列表标签 <ul>, <ol>, <li>

    <ul> 定义无序列表（项目符号），<ol> 定义有序列表（数字编号）。

  2. 超链接标签 <a>

    语法：<a href="目标地址" target="_blank">链接文本</a>。注意 href 和 target 属性。

  3. 链接类型

    包括外部链接、内部链接、空链接(#)、下载链接以及锚点链接（页面内跳转）。

🚩 任务3：制作“成绩查询结果”页面

🛠️ 涉及知识点：表格标签

  1. 基础表格结构

    由 <table>, <tr> (行), <td> (单元格) 和 <th> (表头) 组成。

  2. 表格属性与合并

    使用 rowspan 实现跨行合并，colspan 实现跨列合并。

  3. 表格分组

    <thead> (表头), <tbody> (主体), <tfoot> (页脚) 用于逻辑分组。

⚙️ 核心知识：HTML5标签详解

1. 基本结构与文本标签

基本标签：标题 <h1>-<h6>、段落 <p>、水平线 <hr>、换行 <br>。

文本格式化：加粗 <strong> 或 <b>，斜体 <em> 或 <i>。

2. 超链接语法详解

<a href="目标地址" target="打开方式">超链接内容</a>

href: 必填属性，指定链接目标 (URL或文件路径)。
target: 指定窗口打开方式 (_self:当前页, _blank:新窗口)。

3. 表格标签属性汇总

标签/属性 说明
<table> 定义整个表格的容器。
border 定义表格边框宽度 (0为无边框)。
cellspacing 单元格与单元格之间的距离。
rowspan 让单元格跨越多行 (合并行)。
colspan 让单元格跨越多列 (合并列)。
💻 动手实践

请根据以下要求，完成代码编写与测试：

  1. 创建项目：在本地新建文件夹 HTML5_Tags_Practice。
  2. 编写代码：创建 index.html，尝试编写一个包含标题、段落、图片和链接的简单页面。
  3. 表格练习：创建 table.html，利用 rowspan 和 colspan 制作一个个人简历表头或课程表。
  4. 预览效果：保存文件后，用浏览器打开查看渲染结果，并尝试修改CSS样式。
📝 随堂测试

请完成以下3道单选题，检验本节课的学习成果：

1. 在HTML中，用于定义无序列表的标签是？
2. 如果想要在网页中插入一张图片，并设置其替代文本，应该使用哪个属性？
3. 在表格标签中，用于定义表格行的标签是？
📌 课堂总结

本节课我们深入学习了HTML5的常用标签，涵盖了从基础文本、图像到复杂的列表和表格结构。重点掌握以下内容：

  • 结构与区块：熟练使用 <div> 和 <span> 进行页面布局和行内修饰。
  • 多媒体与链接：掌握 <img> 标签的属性及 <a> 标签的各种链接形式（外部、内部、锚点）。
  • 表格应用：理解 <table>、<tr>、<td> 的嵌套关系，以及 rowspan 和 colspan 的合并单元格技巧。

课后作业：请同学们尝试制作一个包含“个人简介（文字+图片）”、“兴趣爱好（列表）”和“技能评分（表格）”的综合个人主页。