（中职）Web前端设计基础 项目一-1电子教案

1、（中职）Web前端设计基础 项目一-1电子教案（中职）Web前端设计基础 项目一-1电子教案（中职）Web前端设计基础 项目一-1电子教案教学课题项目1 HTML文档结构1.1项目描述、1.2知识准备授课班级授课时间教学目标知识目标1.掌握HTML 5文件的基本结构；2.掌握HTML 5基本标签；3.掌握Sublime编辑器的使用；4.了解HTML5语法的变化；5.了解Chrome浏览器中的开发者工具。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析网

2、络已经成为人们学习、工作和娱乐中不可缺少的一部分，网页设计也成为学习计算机知识的重要内容之一。本项目来学习HTML基本概念和编写方法及浏览HTML文件的方法，使读者初步了解HTML。教学重点1.HTML 5文件的基本结构；2.HTML 5基本标签；3.Sublime编辑器的使用。教学难点1.HTML 5文件的基本结构；2.HTML 5基本标签；3.Sublime编辑器的使用技巧。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个简单的网页页面，并通过网页页面的源代码，导入HTML文件的基本结构。教师提出问题，学生可分组讨论，协作探究。技能学习

3、一、HTML5文件基本结构一个HTML 5文档中，必须包含标签，并且放在一个HTML 5文档中的开始和结束位置。之间通常包含两个部分，分别为和，head标签包含html头部信息，例如文档标题、样式定义等。body包含文档主体部分，即网页内容。二、HTML5基本标签1.文档类型说明2.HTML标签 3.head标签（1）标签中的标签HTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中，在HTML文档中，标题信息设置在与之间。标题标签以开始，以结束。语法格式如下：（2）标签中的标签标签是标签内的一个辅助性标签。标签提供的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以

4、方便搜索引擎来搜索到页面的信息。（3）标签中的标签标签用于外部文件的链接，一般用于链接外部CSS样式表文件和JS文件。【例1-1】创建一个link链接外部CSS文件的实例。新建CSS文件夹（此文件夹与1-1.html文件在同一目录中），在CSS文件夹中创建style.css文件。在chrome浏览器中预览，效果如图所示。（4）标签中的标签 标签用于定义客户端页面脚本。（5）标签中的标签标签用于定义元素的CSS样式。【例1-2】将例1-1用内嵌样式表示。4.body标签网页所要显示的内容都要放在body标签内，它是HTML文件的重点，标签的作用就是定义了网页主题内容的开始和结束。5.页面注释标签

5、注释是在HTML代码中插入描述性的文本，用来解释该代码或提示其他信息。三、 Sublime编辑器的使用1Sublime Text编辑器的安装2Sublime Text 3下Emmet的使用技巧四、 HTML 5语法的变化五、 Chrome浏览器的开发者工具1如何打开开发者工具2开发者工具简介教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳一、HTML 5基本结构如图所示。二、 HTML 5基本标签及说明如下表所示。三、 Sublime编辑器的使用技巧教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.所有的HTML标签都有固定的格式，必须由_符号括起来。A () B C /*/ D /2.下列_标签用于显示网页标题。A B C D 3.下列_标签用于显示网页主体内容。A B C D 二、简答题1.简述HTML5文件的基本结构。2.简述Su