第2章 初识HTML5电子教案.docx

北京市昌平区建材城西路金燕龙办公楼一层电话：400-618-4000

黑马程序员

《HTML5+CSS3网页设计与制作（第2版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月日

课题名称

第2章初识HTML5

计划课时

6课时

教学引入

近年来，HTML5成为互联网行业的热门技术，它改变了Web应用的开发方式，在PC端和移动端都得到广泛应用。作为网页设计和制作人员，应该顺应时代潮流，掌握HTML5的相关技术。本章将从HTML5的优势、基本结构、标签概述、文本控制标签、图像标签等知识着手，详细讲解HTML5的相关内容。

教学目标

使学生了解HTML5的优势，能够对其优势进行归纳总结

使学生了解HTML5的基本结构，能够区分HTML5和XHTML的结构差异

使学生了解标签的分类，能够阐述单标签和双标签的差异

使学生熟悉标签的关系，能够设置具有嵌套和并列关系的标签

使学生掌握标签属性的用法，能够为标签添加对应的属性

使学生熟悉HTML5头部相关标签，能够归纳头部各类标签的作用

使学生掌握HTML文本控制标签的用法，能够使用不同类型的标签定义文本

使学生掌握HTML图像标签的用法，能够在网页中定义图像

教学重点

标签的属性

页面格式化标签

文本格式化标签

常见图像格式

插入图像

教学难点

HTML实体

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

第一、二课时

（HTML5的优势、HTML5的基本结构、标签的分类、标签间的关系、标签的属性、HTML5头部相关标签）

复习巩固

教师通过提问等方式了解学生的学习情况，对吸收不好的知识点进行再次巩固讲解。

通过直接导入的方式讲解新课

作为HTML的最新版本，HTML5是HTML的延续。HTML5经历了旧版本HTML和XHTML的发展，从某种意义上说，它是HTML标准更新和规范过程的产物。本节课将针对HTML5的优势、基本结构等内容进行讲解。

新课讲解

知识点1-HTML5的优势

教师通过展示PPT的方式讲解HTML5的优势。

兼容性

合理性

易用性

知识点2-HTML5的基本结构

教师通过展示PPT的方式讲解HTML5的基本结构。

HTML1.0的基本结构

基本结构中标签的含义

HTML5的基本结构

知识点3-标签的分类

教师通过展示PPT的方式讲解标签的分类。

单标签

双标签

注释标签

知识点4-标签间的关系

教师通过展示PPT的方式讲解标签间的关系。

嵌套关系

并列关系

知识点5-标签的属性

教师通过展示PPT以及代码演示的方式讲解标签的属性。

HTML标签设置属性的基本语法

示例代码演示标签属性的用法

知识点6-HTML5头部相关标签

教师通过展示PPT的方式讲解HTML5头部相关标签。

（1）title标签

（2）meta标签

归纳总结

教师回顾本节课所讲的内容，并通过课后题的方式引导学生解答问题并给予指导。

布置作业

教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。

第三、四课时

（页面格式化标签、文本格式化标签、HTML实体、常见图像格式、插入图像、阶段案例——制作新闻页面）

复习巩固

教师通过提问等方式了解学生的学习情况，对吸收不好的知识点进行再次巩固讲解。

通过直接导入的方式导入新课

无论网页内容如何丰富，文字始终都是网页中最基本的元素之一。为了使文字排版整齐、结构清晰，HTML5中提供了一系列文本控制标签，方便对文字进行样式设置。如标题标签h1~h6、段落标签p等。本节课将对不同类型文本控制标签进行详细讲解。

新课讲解

知识点1-页面格式化标签

教师通过展示PPT以及代码演示的方式讲解页面格式化标签。

标题标签

段落标签

水平线标签

换行标签

知识点2-文本格式化标签

教师通过展示PPT的方式讲解文本格式化标签。

常用的文本格式化标签

通过一个案例来演示文本格式化标签的用法

知识点3-HTML实体

教师通过展示PPT的方式讲解常用的特殊字符及HTML实体。

知识点4-常见图像格式

教师通过展示PPT的方式讲解常见图像格式。

GIF

PNG

JPEG

知识点5-插入图像

教师通过展示PPT以及代码演示的方式讲解插入图像。

图像标签的语法格式

常用的img标签属性

通过代码演示不同属性的作用

知识点6-阶段案例——制作新闻页面

教师通过实操的方式演示新闻页面的制作。

四、归纳总结

教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。

五、布置作业

教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。

第五、