谢从华，高蕴梅 著.Web前端设计基础入门——HTML5、CSS3、JavaScript（微课视频版）,2023, 清华大学出版社. ISBN：9787302641261.
一、教学目标（Objectives）
1. 知识目标
- 学生能够理解 HTML 的基本概念，包括 HTML 网页的构成、HTML 作为标记语言的特点。
- 掌握 HTML 的诞生背景、发展历史，熟悉不同版本的特点及演进过程。
- 深入理解 HTML 文件结构，包括标签、元素的含义及基本结构实例。
- 熟练掌握各类 HTML 基本标签的使用，如元信息标签、文本标签、列表标签、表格标签、超级链接标签、图像标签等，能准确编写相应代码实现特定功能。
- 了解网页表单和控件的作用，掌握表单标签、label 标签、input 标签、textarea 文本区域标签、下拉菜单、fieldset 分组框等的用法，能构建交互性表单。
- 知晓框架标签的相关知识，包括帧标签、浮动帧标签、<noframes>标签的功能及应用场景。
- 领会互联网企业价值观的内涵，对比中美互联网企业核心价值观的异同。
2. 技能目标
- 能够运用所学 HTML 知识，独立编写简单的网页代码，实现页面布局、文本展示、链接跳转、表单交互等功能。
- 具备调试 HTML 代码错误的能力，能够根据浏览器显示效果排查问题并优化代码。
- 可以对给定的网页需求进行分析，选择合适的 HTML 标签和技术进行设计与实现。
3. 情感目标
- 引导学生思考互联网企业价值观对行业发展的重要性，树立正确的职业价值观。
二、教学重难点
1. 教学重点
- HTML 网页的基本概念、特点，文件结构及各组成部分的作用。
- 各类 HTML 基本标签（元信息、文本、列表、表格、链接、图像）的语法、属性及应用场景，能结合实例熟练运用。
- 网页表单和控件的组成与使用，表单数据提交的原理及相关属性设置。
- 框架标签的原理及在页面布局中的应用，特别是 iframe 标签的灵活运用。
2.教学难点
- HTML 标签的嵌套规则与层级关系，如复杂表格结构、多层列表的构建。
- 表单数据提交过程中，method、enctype 等属性对数据传输的影响，以及不同控件间的数据交互逻辑。
- 理解并合理运用框架标签构建多页面布局，处理不同浏览器对框架的兼容性问题。
- 深入领会互联网企业价值观如何贯穿于产品设计、业务运营等企业发展全过程，引导学生思考其在实际项目中的落地。
三、教学方法
1. 讲授法：讲解 HTML 核心概念、语法规则、标签用法等基础知识，确保学生建立系统知识框架。
2. 实例演示法：通过大量代码实例展示各类标签、表单、框架等的实际应用效果，帮助学生直观理解抽象知识，如现场编写并运行一个包含多种标签的网页。
3. 小组合作学习法：安排学生分组完成复杂表单设计、框架布局构建等任务，促进学生相互交流、共同解决问题，培养团队协作与沟通能力。
4. 问题导向法：提出如“如何优化表单数据安全性”“怎样用框架实现个性化页面布局”等问题，引导学生思考探究，深入理解知识要点。
四、教学过程（Teaching Procedure）
（一）导入
1. 展示几个风格各异的精美网页，包括电商网站、新闻资讯页、个人博客等，引导学生观察网页中的文字排版、图片展示、链接跳转、表单填写等功能。
2. 提问学生：“大家知道这些丰富多彩的网页是如何制作出来的吗？其实它们背后的基础技术之一就是 HTML，今天我们就一起走进 HTML 的奇妙世界。”
（二）知识讲解
1. HTML 网页基础
- HTML 网页概述
- 讲解 HTML 网页是由标记组成的描述性文本，不是编程语言而是标记语言，用于描述网页内容结构。举例说明常见的文字、图片、链接等在 HTML 中如何通过标记呈现。
- 展示简单的 HTML 代码片段，如一个只有标题和段落的网页代码，让学生初步认识 HTML 代码形式。
- HTML 诞生与发展
- 讲述蒂姆·本尼斯李 1989 年在 CERN 研制出 HTML 的故事，强调其设计初衷是为实现科学家间信息共享，引出 HTML 需具备独立于平台、超文本、结构化文档等特点。
- 以时间线形式详细阐述 HTML 从 1994 年最初版本到 HTML5 的发展历程，重点对比各版本新增特性，如 HTML 4.0 引入 CSS、HTML5 支持多媒体嵌入等，让学生感受技术演进脉络。
2. HTML 文件结构（10 分钟）
- 标签与元素讲解
- 介绍 HTML 标签由尖括号包围关键词，成对出现（如<html>与</html>），分别为开始和结束标签，演示在代码中如何标识一个 HTML 文件的开头和结尾。
- 解释 HTML 元素是从开始标签到结束标签的所有代码，举例说明嵌套元素，如在<body>元素内嵌套段落<p>元素，展示代码层级关系。
- 文件结构实例剖析
- 展示一个完整的 HTML 文件基本结构实例（如例 2 - 1），逐行讲解<head>与<body>标签及其子元素的作用，如<head>内的<meta>标签用于设置字符编码、页面关键字等，<body>内承载网页主体内容，让学生理解各部分协同构建网页的原理。
3. HTML 基本标签（20 分钟）
- 元信息标签<meta>
- 说明<meta>位于<head>区，提供网页元信息，不显示在网页中但对搜索引擎和浏览器有重要作用。
- 详细讲解<meta>的 name 和 http-equiv 两大属性分支，结合实例（如例 2 - 2）演示如何设置关键字、页面描述、字符集、网页有效期等，对比不同属性取值的功能差异，如 http-equiv="refresh"实现网页定时刷新。
- 文本标签
- 标题文字标签：展示从<h1>到<h6>各级标题标签的语法及效果，强调一级标题通常唯一性及字体大小递减规律，现场修改代码改变标题级别观察效果。
- 段落标签：讲解<p>标签划分段落功能，可省略结束标签，演示单独使用开始标签划分段落的方式，与<div>和<span>标签作简单对比，说明适用场景。
- 水平线与换行标签：介绍<hr>创建水平线、<br>强制换行，展示单标签在网页中添加分割线与换行的效果，强调无结束标签特点。
- 特殊字符与空格：列举常见特殊字符代码（如"、<等）及空格代码 ，通过实例（如例 2 - 3）展示如何在网页中准确显示特殊符号与保留空格，避免显示异常。
- 列表标签
- 自定义列表：讲解<dl>、<dt>、<dd>标签构建自定义列表语法，展示无格式与有格式设置（如通过 CSS 浮动<dt>、调整<dd>距离）的实例（例 2 - 4、例 2 - 5），强调<dt>与<dd>位置关系及列表结构特点。
- 无序列表与有序列表：分别介绍<ul>和<ol>标签创建列表语法，演示默认格式与通过 type 属性修改标记样式的实例（例 2 - 6 至例 2 - 9），对比两者适用场景，如无序列表用于无序项目罗列，有序列表用于有顺序编号需求场景。
4. 表格标签（10 分钟）
- 表格结构讲解
- 展示表格常用元素标签（<table>、<tr>、<td>、<th>、<caption>、<thead>、<tbody>、<tfoot>），结合实例（例 2 - 10 至例 2 - 12）讲解各标签构建表格行、列、表头、标题及划分结构的作用，如<th>用于表头加粗显示，<caption>为表格添加标题说明。
- 重点演示跨行（rowspan）和跨列（colspan）属性的用法，通过修改实例代码实现复杂表格布局，让学生理解如何灵活设计表格满足多样数据展示需求。
（三）小组实践
1. 将学生分成小组，每组 3 - 4 人，布置实践任务：运用所学 HTML 标签知识，设计一个介绍小组兴趣爱好的网页。要求网页包含标题、段落文本、列表（至少一种）、表格（展示小组成员信息）等元素，合理设置元信息标签。
2. 教师巡视各小组，观察学生实践情况，及时解答学生遇到的共性问题，如标签语法错误、结构嵌套混乱等，对个别基础薄弱学生给予针对性辅导。
（四）知识拓展
1. 超级链接标签
- 讲解超链接是网页核心元素，通过<a>标签创建，涵盖文本、图像、脚本、空链接等多种形式。
- 结合实例（例 2 - 13）详细演示 href 属性设置链接地址（内部、外部链接）、target 属性控制窗口打开方式（_parent、_blank 等），以及邮件链接、页面内部跳转等特殊链接的语法与应用，如点击链接发送邮件、跳转到网页指定段落。
2. 图像标签
- 介绍图像标签<img>语法，重点讲解 src 属性设置图像路径（相对、绝对路径）、width 和 height 属性调整图像尺寸及 alt 属性提供图像描述文字的作用。
- 展示不同格式图像（GIF、JPEG、PNG）在网页中的应用实例（例 2 - 14），对比格式特点，如 GIF 适合简单动画、JPEG 用于照片、PNG 兼具优势且支持高色彩，让学生了解如何根据需求选择图像格式。
3. 网页表单和控件（略讲，2 分钟）
- 简要提及表单用于收集用户信息，由<form>标签及各类控件组成，后续将深入学习。举例说明常见的登录表单包含文本框、密码框、提交按钮等控件，引发学生兴趣，为后续课程铺垫。
（五）总结归纳
1. 回顾本节课重点内容，包括 HTML 网页基础概念、文件结构、各类基本标签（元信息、文本、列表、表格、链接、图像）的用法，强调标签语法准确性与属性灵活运用的重要性。
2. 邀请各小组代表简要展示实践成果，分享实践过程中的收获与遇到的问题，教师给予点评与鼓励，总结小组合作中的优点与不足，强化学生团队协作意识。
（六）作业布置
1. 个人作业
- 完善课堂上设计的小组兴趣爱好网页，优化页面布局与样式，添加至少两张相关图片，并设置合理的超链接，使网页内容更丰富、链接跳转更流畅。
- 阅读教材中关于网页表单和控件的详细内容，预习表单标签、input 标签等核心知识，记录下疑问点，为下次课做准备。
2. 小组作业（可选，供学有余力小组完成）
- 以小组为单位，调研一个知名网站（如淘宝、微博等）首页的 HTML 结构与标签运用，分析其如何通过 HTML 实现复杂页面布局、信息展示与用户交互，制作 PPT 在下节课分享。
六、教学反思
在教学过程中，需持续关注学生对复杂标签（如表单相关标签、框架标签）的理解程度，通过课堂提问、小组实践反馈及时调整教学节奏。对于学生实践中频繁出现的代码错误，在后续课程开头可进行集中讲解复盘，强化记忆。同时，根据学生对互联网企业价值观的讨论热度，适时引入行业案例，加深学生对知识与现实关联的认知，提升教学效果，确保学生扎实掌握 HTML 网页编程基础，为后续深入学习前端开发奠定坚实基础。
