HTML5+CSS3网站设计基础教程第3版教案教学设计黑马程序员 第13章 HTML5入门 HTML5标签和属性 CSS3入门.docx

《HTML5+CSS3网站设计基础教程第3版教案教学设计黑马程序员 第13章 HTML5入门 HTML5标签和属性 CSS3入门.docx》由会员分享，可在线阅读，更多相关《HTML5+CSS3网站设计基础教程第3版教案教学设计黑马程序员 第13章 HTML5入门 HTML5标签和属性 CSS3入门.docx（27页珍藏版）》请在第一文库网上搜索。

1、HTM15+CSS3网站设计基础教程（第3版）教学设计课程名称：授课年级：授课学期：教师姓名：课题名称第1章HTM15入门计划课时8课时教学引入近年来，Web技术发展越来越迅速，HTM15的到来更是把Web技术推向了巅峰。HTM15不仅保留了HTM1绝大多数的特性，而且增加了许多新的特性。目前HTM15技术已经非常成熟，无论是在PC（个人计算机）端还是在移动端，都被广泛应用。本章将详细讲解HTM15的基础内容，为初学者深入学习HTM15知识夯实基础。教学目标 使学生了解网页基本概念，能够说出网页的构成以及网页相关名词的含义。 使学生熟悉Web标准，能够归纳Web标准的构成。 使学生了解浏览器，

2、能够说出各主流浏览器的特点。 使学生了解HTM15技术，能够知道HTM15发展历程、优势以及浏览器对HTM15的支持情况。 使学生掌握HTM15基本结构，能够在网页中应用HTM15结构。 使学生熟悉HTM15语法，能够归纳HTM15语法的特点。 使学生熟悉HTM15标签，能够知道HTM15标签类型、标签属性以及头部相关标签的用法。 使学生熟悉HTM15常用开发工具，能够使用这些开发工具编写HTM15网页代码。教学重点 HTM15的基本结构 阶段案例一一第一个HTM15页面教学难点阶段案例第一个HTM15页面教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一、二课时（网页构成、网

3、页相关名词、Web标准、浏览器、HTM1的演变历程、HTM15的优势、浏览器对HTM15的兼容情况）一、通过直接导入的方式导入新课说到网页，其实大家并不陌生，我们上网时浏览新闻、查询信息、看视频等都是在浏览网页。网页可以看做承载各种内容的容器，所有可视化的内容都可以通过网页展示给用户。然而HTM15和网页有什么关系？网页是由什么构成的？网页有哪些标准？本节首先将从网页构成、网页相关名词、Web标准、浏览器四个方面详细讲解网页的相关知识。了解了网页的相关知识后，再从HTM1的演变历程、HTM15的优势以及浏览器对HTM15的兼容情况三个方面，对HTM15进行简单介绍。二、新课讲解知识点I-网页构

4、成教师通过展示PPT的方式讲解网页构成。网页主要由文字、图像和超链接（超链接为单击可以跳转到其他页面的元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。知识点2-网页相关名词教师通过展示PPT的方式讲解网页相关名词。(1) Internet(2) WWW(3) UR1(4) DNS(5) HTTP和HTTPS(6) Web(7) W3C知识点3-Web标准教师通过展示PPT的方式讲解Web标准。(1)结构结构用于对网页中用到的信息进行分类与整理。在结构中用到的技术主要包括HTM1、XM1和XHTM1。 HTM1 XM1 XHTM1(2)表现表现是指网页展示给访问者的外在

5、样式，一般包括网页的版式、颜色、字体样式等。在网页制作中，通常使用CSS来设置网页的样式。(3)行为行为是指网页模型的定义及交互效果的实现，包括ECMAScript.BOM.DOM三个部分。 ECMAScript BOM DOM知识点4浏览器教师通过展示PPT的方式讲解浏览器。(1) InternetExp1orer(2) Opera(3) Safari(4) Firefox(5) Chrome(6) Edge知识点5-HTM1的演变历程教师通过展示PPT的方式讲解HTM1的演变历程。(1) HTM1第1版：1993年6月HTM1被作为互联网工程任务组(IETF)工作草案发布。(2) HTM1

6、2.0：1995年11月HTM12.0发布，此时HTM1标准逐渐统一(3) HTM13.2：1997年1月14日HTM13.2发布。(4) HTM14.0：1997年12月18日HTM14.0发布。(5) HTM14.01：1999年12月24日HTM14.01作为W3C推荐标准发布。(6) XHTM11.0：2000年1月26日XHTM11.0作为W3C推荐标准发布。(7) HTM15：2014年10月28日HTM15作为W3C推荐标准发布HTM15是公认的下一代Web语言。知识点6-HTM15的优势教师通过展示PPT的方式讲解HTM15的优势。(1)解决了跨浏览器、跨平台问题。(2)新增了

7、多个新标签。(3)安全机制的增强。(4)样式和结构分离更彻底。(5)化繁为简知识点7-浏览器对HTM1S的兼容情况教师通过展示PPT的方式讲解浏览器HTM15的兼容情况。三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台()布置本节课作业以及下节课的预习作业。(可以通过教辅平台、课后练习、补充案例、动手实践等，可自行定义)第三、四课时(HTM15的基本结构、HTM15的语法变化、HTM15标签的类型、HTM15标签的属性、HTM15文档头部相关标签、VSCode的安装、设置，VSCode的使用)一、复习巩固教师通过上节课作业的完

8、成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接导入的方式导入新课HTM15是HTM1的新版本，越来越多的网站开发者开始使用HTM15构建网站。学习HTM15首先需要了解HTM15的基础知识，其次熟悉HTM15代码编辑工具，本节将针对HTM15的基本结构、语法格式、标签类型、标签的属性、文档头部相关标签以及代码编辑工具VSCode进行讲解。三、新课讲解知识点1-HTM15的基本结构教师通过展示PPT的方式讲解HTM15的基本结构。(1) :位于文档最前面，用于向浏览器说明当前文档使用哪种HTM1版本。(2) :在和之间是网页的头部内容和主体内容。(3) :用于定义网页文档的头部内容

9、，也被称为头部标签，该标签紧跟在之后。(4) :用于定义网页文档所要显示的内容。知识点2-HTM1的语法变化教师通过展示PPT的方式讲解HTM15的语法变化。(1)标签不区分大小写。(2)允许属性值不使用引号。(3)允许部分属性省略属性值。知识点3-HTM15标签的类型教师通过展示PPT的方式讲解HTM15标签的类型。(1)单标签：标签名o(2)双标签：标签名内容/标签名(3)注释标签：!-注释语句-o知识点4-HTM15标签的属性教师通过展示PPT的方式讲解HTM15标签的属性。HTM15标签设置属性的基本语法格式如下。标签名属性1=属性值1属性2=属性值2内容/标签名知识点5-HTM15文

10、档头部相关标签教师通过展示PPT的方式讲解HTM15文档头部相关标签。(1) tit1e标签tit1e标签用于定义HTM1页面的标题，即给网页取一个名字，该标签必须位于Vhead标签之内。(2) meta/标签meta标签用于定义网页的元信息(元信息不会显示在页面中)，可重复出现在head标签中。知识点6-VSCode的安装、设置教师通过展示PPT的和计算机实操的方式讲解VSCode的安装、设置。(1)教师通过展示PPT的方式讲解VSCOde的安装、设置。 设置中文显示模式； 设置界面颜色； 设置代码字号。(2)教师通过计算机带领学生对VSCode进行安装、设置。知识点7-VSCode的使用教

11、师通过展示PPT的和计算机实操的方式讲解VSCode的安装、设置。(1)教师通过展示PPT的方式讲解VSCode的使用。 创建文件夹和文件。 保存和操作文件。 编写代码。(2)教师通过计算机带领学生对VSCode进行使用o四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课的预习作业。(可以通过教辅平台、课后练习、补充案例、动手实践等，可自行定义)第五、六课时(阶段案例第一个HTM15页面)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接导入的方式导入新课为

12、了使读者能够更好地认识HTM15,并掌握HTM15代码编辑工具的用法。本节将通过案例的形式，分步躲带领大家制作一个HTM15页面。三、新课讲解知识点-阶段案例第一个HTM15页面教师通过展示PPT的和编写代码的方式讲解阶段案例一一第一个HTM15页面。(1)教师通过展示PPT的方式对案例进行分析。(2)教师通过计算机实操带领学生制作页面。C.V-XHTM15页面+C127.0.0.155OOexamp1eO1.htm1X：我是HTM15页面第五、六课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的

13、熟练程度。上机一：(考察知识点为HTM15的基本结构、HTM15标签、HTM15文档头部相关标签、VSCode的使用)形式，单独完成题目：运用VSCode创建一个个人简介的HTM15页面，效果如下。个人简介示例生日：2023/2月28日姓名：XXXXX个人裳好1：很爰滑雪，漫雷使我快乐，但滑雷经常摔倒，因此别人亲切称我不倒翁.个人裳好2:很爰看书，常常一个人坐在座位上，津津有味的捧着书看，因此别人赐给我一个封号书呆子”个人爱好3:很爱学习，但上课的时候胆小如鼠，下课胆大如虎，因此老师管我叫“纸老虎”生日:教学后记黑马程序员HTM15+CSS3网站设计基础教程（第3版）教学设计课程名称：授课年级

14、：授课学期：教拜姓名：课题名称第2章HTM15标签和属性计划课时8课时教学引入HTM15中既包含了大部分原有的标签和属性，也增加了一些新的标签和属性。这些标签使网页结构更加清晰明确，这些属性使标签的功能更加强大。掌握这些标签和属性是熟练使用HTM15构建网页的基础。本章将详细讲解HTM15的各类标签和属性。教学目标 使学生掌握文本控制标签的用法，能够使用文本控制标签设置文本样式。 使学生掌握图像标签的用法，能够使用图像标签在网页中嵌入图片。 使学生掌握超链接标签的用法，能够使用超链接实现页面的跳转。 使学生掌握列表标签的用法，能够使用列表标签设置导航选项。 使学生熟悉结构标签的用法，能够使用结构标签搭建网页结构。 使学生熟悉页面交互标签的用法，能够使用页面交互标签设置页面展示信息。 使学生熟悉全局属性的用法，能够使用全局属性设置网页效果。教学重点 页面格式化标签-标题标签 页面格式化标签-段落标签 页面格式化标签-水平线标签 页面格式化标签-换行标签 文本格式化标签 文本样式标签 图像标签及其属性 绝对路径和相对路径