《HTML5 CSS3网站设计基础教程（第3版）-教学设计第1章 HTML5入门.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3网站设计基础教程（第3版）-教学设计第1章 HTML5入门.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、黑马程序员HTML5+CSS3网站设计基础教程（第3版）教学设计课程名称：授课年级：授课学朝：教师拙名：黑马程序员传智教育旗下 高端IT教育品牌课题名称第1章HTML5入门计戈 课时8课时教学引入近年来，Web技术发展越来越迅速，HTML5的到来更是把Web技术推向 了巅峰。HTML5不仅保留了 HTML绝大多数的特性，而且增加了许多新的特 性。目前HTML5技术已经非常成熟，无论是在PC （个人计算机）端还是在移 动端，都被广泛应用。本章将详细讲解HTML5的基础内容，为初学者深入学 习HTML5知识夯实基础。教学目标 使学生了解网页基本概念，能够说出网页的构成以及网页相关名词的含义。 使学
2、生熟悉Web标准，能够归纳Web标准的构成。 使学生了解浏览器，能够说出各主流浏览器的特点。 使学生了解HTML5技术，能够知道HTML5发展历程、优势以及浏览器 对HTML5的支持情况。 使学生掌握HTML5基本结构，能够在网页中应用HTML5结构。 使学生熟悉HTML5语法，能够归纳HTML5语法的特点。 使学生熟悉HTML5标签，能够知道HTML5标签类型、标签属性以及头 部相关标签的用法。 使学生熟悉HTML5常用开发工具，能够使用这些开发工具编写HTML5 网页代码。教学重点 HTML5的基本结构 阶段案例 第一个HTML5页面教学难点 阶段案例第一个HTML5页面教学方式课堂教学以
3、PPT讲授为主，并结合多媒体进行教学教 学 过 程第一、二课时（网页构成、网页相关名词、Web标准、浏览器、HTML的演变历程、HTML5 的优势、浏览器对HTML5的兼容情况） 一、通过直接导入的方式导入新课说到网页，其实大家并不陌生，我们上网时浏览新闻、查询信息、看视 频等都是在浏览网页。网页可以看做承载各种内容的容器，所启可视化的内容 都可以通过网页展示给用户。然而HTML5和网页有什么关系？网页是由什么 构成的？网页有哪些标准？本吊首先将从网页构成、网页相关名词、Web标准、 浏览器四个方面详细讲解网页的相关知识。了解了网页的相关知识后，再从HTML的演变历程、HTML5的优势以及 浏
4、览器对HTML5的兼容情况三个方面，对HTML5进行简单介绍。 二、新课讲解知识点1 网页构成教师通过展示PPT的方式讲解网页构成。网页主要由文字、图像和超链接（超链接为单击可以跳转到 其他页面的元 素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画 等。知识点2.网页相关名词教师通过展示PPT的方式讲解网页相关名词。(1) Internet(2) WWW(3) URL(4) DNS(5) HTTP 和 HTTPS(6) Web(7) W3C知识点3-Web标准教师通过展示PPT的方式讲解Web标准。(1)结构结构用于对网页中用到的信息进行分类与整理。在结构中用到的技术主要
5、包括 HTML、XML 和 XHTML。 HTML XML XHTML(2)表现表现是指网页展示给访问者的外在样式，一般包括网页的版式、颜色、字 体样式等。在网页制作中，通常使用CSS来设置网页的样式。(3)行为行为是指网页模型的定义及交互效果的实现，包括ECMAScript、BOM、 DOM三个部分。 ECMAScript BOM DOM知识点4.浏览器教师通过展示PPT的方式讲解浏览器。(1) Internet Explorer(2) Opera(3) Safari(4) Firefox(5) Chrome(6) Edge知识点5-HTML的演变历程教师通过展示PPT的方式讲解HTML的演
6、变历程。(1) HTML第1版：1993年6月HTML被作为互联网工程任务组(IETF) 工作草案发布。(2) HTML2.0：1995年11月HTML2.0发布，此时HTML标准逐渐统一(3) HTML3.2：1997 年 1 月 14 日 HTML3.2 发布。(4) HTML4.0：1997 年 12 月 18 日 HTML4.0 发布。(5) HTML4.01：1999年12月24日HTML4.01作为W3C推荐标准发布。(6) XHTML 1.0：2000年1月26日XHTML 1.0作为W3C推荐标准发布。(7) HTML5：2014年10月28日HTML5作为W3C推荐标准发布。
7、HTML5 是公认的下一代Web语言。知识点6-HTML5的优势教师通过展示PPT的方式讲解HTML5的优势。x)z )z1 2 3 4 5 z( z(x z(v z(解决了跨浏览器、跨平台问题。新增了多个新标签。安全机制的增强。样式和结构分离更彻底。化繁为简知识点7.浏览器对HTML5的兼容情况教师通过展示PPT的方式讲解浏览器HTML5的兼容情况。 三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给 予指导。四、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。(可以通过教辅平台、课后练习、补充案例、动手实践等，可自行 定义)第三、四课时(HT
8、ML5的基本结构、HTML5的语法变化、HTML5标签的类型、HTML5 标签的属性、HTML5文档头部相关标签、VS Code的安装、设置，VS Code 的使用)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接导入的方式导入新课HTML5是HTML的新版本，越来越多的网站开发者开始使用HTML5构 建网站。学习HTML5首先需要了解HTML5的基础知识，其次熟悉HTML5 代码编辑工具，本节将针对HTML5的基本结构、语法格式、标签类型、标签 的属性、文档头部相关标签以及代码编辑工具VS Code进行讲解。 三、新课讲解知识点1-HTML5的
9、基本结构教师通过展示PPT的方式讲解HTML5的基本结构。(1) !DOCTYPE：位于文档最前面，用于向浏览器说明当前文档使用哪 种HTML版本。(2) html：在html和之间是网页的头部内容和主体内容。(3) head：用于定义网页文档的头部内容，也被称为头部标签，该标签 紧跟在vhtml之后。(4) body：用于定义网页文档所要显示的内容。知识点2-HTML的语法变化教师通过展示PPT的方式讲解HTML5的语法变化。(1)标签不区分大小写。(2)允许属性值不使用引号。(3)允许部分属性省略属性值。知识点3-HTML5标签的类型教师通过展示PPT的方式讲解HTML5标签的类型。(1)
10、单标签： 标签名/O(2)双标签：标签名内容/标签名。(3)注释标签：V!-注释语句一。知识点4-HTML5标签的属性教师通过展示PPT的方式讲解HTML5标签的属性。HTML5标签设置属性的基本语法格式如下。v标签名属性匚”属性值1属性2=属性值2内容/标签名知识点5-HTML5文档头部相关标签教师通过展示PPT的方式讲解HTML5文档头部相关标签。(1) 标签出怕标签用于定义HTML页面的标题，即给网页取一个名字，该标签必 须位于vhead标签之内。(2) meta /标签meta/标签用于定义网页的元信息(元信息不会显示在页面中)，可重复 出现在head标签中。知识点6VS Code的安
11、装、设置教师通过展示PPT的和计算机实操的方式讲解VS Code的安装、设置。(1)教师通过展示PPT的方式讲解VS Code的安装、设置。 设置中文显示模式； 设置界面颜色； 设置代码字号。(2)教师通过计算机带领学生对VS Code进行安装、设置。知识点7-VS Code的使用教师通过展示PPT的和计算机实操的方式讲解VS Code的安装、设置。(1)教师通过展示PPT的方式讲解VS Code的使用。 创建文件夹和文件。 保存和操作文件。 编写代码。(2)教师通过计算机带领学生对VS Code进行使用。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给 予指导。五
12、、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。(可以通过教辅平台、课后练习、补充案例、动手实践等，可自行 定义)第五、六课时(阶段案例第一个HTML5页面)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接导入的方式导入新课为了使读者能够更好地认识HTML5,并掌握HTML5代码编辑工具的用法。本节将通过案例的形式，分步骤带领大家制作一个HTML5页面。三、新课讲解知识点一阶段案例第一个HTML5页面教师通过展示PPT的方式对案例进行分析。教师通过计算机实操带领学生制作页面。v - X0 HTML5页面X +B C 127
13、.0,0,1:5500/example01.html X ：我是HTML5页面教师通过展示PPT的和编写代码的方式讲解阶段案例一一第一个HTML5 页面。第五、六课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机一：(考察知识点为HTML5的基本结构、HTML5标签、HTML5 文档头部相关标签、VS Code的使用)形式：单独完成题目：运用VS Code创建一个个人简介的HTML5页面，效果如下。个人简介示例生日:2022年02月28日 姓名：XXXXX个人爰好1：很爰滑雪，滑雪使我快乐，但滑雪经常摔倒，因此别人 亲切称我不倒翁。个人爰好2:很爰看书，常常一个人坐在座位上，津津有味的捧着书 看，因此别人赐给我一个封号书呆子个人爰好3:很爰学习，但上课的时候胆小如鼠，下课胆大如虎，因 此老师管我叫纸老虎教学后记样的教育，不一样的品质黑马程序员传智教育旗下 高端IT教育品牌