第5课HTML5与CSS3基础（一）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 HTML5与CSS3基础（一） 课时 2课时（90 min） 教学目标 知识技能目标： （1）认识HTML5 （2）了解HTML5的基本语法 （3）熟悉HTML5文档结构 （4）能够使用Dreamweaver CC设置网页内容 思政育人目标： （1）掌握网页制作语言的基础知识，学习语法规则，养成良好的工作习惯。 （2）练习制作网页，培养自己的钻研精神。 教学重难点 教学重点：HTML5文档结构 教学难点：使用Dreamweaver CC设置网页内容 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（28 min）→课堂抢答（10 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解HTML5 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （5 min） · 【教师】提出以下问题： 你知道什么是HTML吗？HTML5又是什么？ · 【学生】聆听、思考、举手发言 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （28 min） · 【教师】通过学生的发言，引入新的知识点，介绍HTML5的基本语法和文档结构 一、HTML5简介 【教师】展示利用HTML编写的网页，帮助学习理解 使用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统。浏览器能够识别并解析这些文档。 HTML在20世纪90年代发展迅速，从HTML 2.0版本发展到3.2版本、4.0版本，再到4.01版本。在这之后，为了拥有更强的功能性与适用性，HTML开始向其他方向演化，发展出了XHTML与XHTML 2.0版本，但因为没能取得良好的兼容性而宣告失败。最终，向HTML5的演化取得了成功 （详见教材） 【教师】提出以下问题： 你知道HTML5标签有哪些类型吗？ 【学生】思考、举手回答 HTML5标签主要分为以下几类：双标签、单标签和注释标签。 1．HTML5标签的分类 【教师】利用多媒体辅助讲解HTML5标签的基本语法格式 （1）双标签。双标签是指由开始标签和结束标签组成的标签。基本语法格式： <标签名>内容</标签名> （2）单标签。单标签也称为空标签，基本语法格式为： <标签名 /> （3）注释标签。注释标签是HTML5中的一种特殊标签。注释标签的内容不会显示在页面上，但是会保存在页面的源代码中。它的基本语法格式为： <!--注释内容--> （详见教材） 【课堂互动】教师提出以下问题： 标签用不用区分大小写呢？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 标签不区分大小写。例如，“<P>标签的大小写</p>”在HTML5中是符合语法规则的。但是一般不建议这么写，而是统一小写。 2．HTML5标签的属性 【教师】利用多媒体辅助讲解HTML5标签的属性 在HTML5中，可以根据需要为标签设置属性，如为段落标签设置样式。设置标签属性的语法格式为： <标签名 属性1="属性值1" 属性2="属性值2">内容</标签名> （详见教材） 3．块级标签与行内标签 【教师】利用多媒体辅助讲解块级标签与行内标签 HTML5中标记内容的标签有块级标签和行内标签之分，它们的特点如下。 （1）块级标签的内容在浏览器中显示时独占一行，类似于在其内容首尾各添加了一个换行符。例如，<h1>与<p>标签都是块级标签，使用它们标记的内容将独占一行，且这些标签之后的内容同样也会另起一行。 （2）行内标签的内容在浏览器中显示时不能独占一行。若行内标签前后没有块级标签，则它们可显示在同一行中。例如，用于标记斜体的<i>标签就是一个行内标签。 （详见教材） 【课堂互动】教师提出以下问题： 块级标签和行内标签的层级关系是怎样的？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 行内标签中不可以包含块级标签，它只能位于块级标签之内。块级标签既可以包含其他块级标签，也可以包含行内标签。 三、HTML5文档结构 HTML5使用元素描述页面结构，最基本的HTML5文档结构包括DOCTYPE声明、html元素、head元素与body元素。除此