《Web前端开发》教学讲义 Web前端设计基础 项目一-1.docxVIP

教学课题 项目1 HTML文档结构—1.1项目描述、1.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握HTML 5文件的基本结构； 2.掌握HTML 5基本标签； 3.掌握Sublime编辑器的使用； 4.了解HTML5语法的变化； 5.了解Chrome浏览器中的开发者工具。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 网络已经成为人们学习、工作和娱乐中不可缺少的一部分，网页设计也成为学习计算机知识的重要内容之一。 本项目来学习HTML基本概念和编写方法及浏览HTML文件的方法，使读者初步了解HTML。 教学重点 1.HTML 5文件的基本结构； 2.HTML 5基本标签； 3.Sublime编辑器的使用。 教学难点 1.HTML 5文件的基本结构； 2.HTML 5基本标签； 3.Sublime编辑器的使用技巧。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个简单的网页页面，并通过网页页面的源代码，导入HTML文件的基本结构。 教师提出问题，学生可分组讨论，协作探究。 技能学习 一、HTML5文件基本结构 一个HTML 5文档中，必须包含html/html标签，并且放在一个HTML 5文档中的开始和结束位置。 html/html之间通常包含两个部分，分别为head/head和body/body，head标签包含html头部信息，例如文档标题、样式定义等。body包含文档主体部分，即网页内容。 二、HTML5基本标签 1.文档类型说明 !DOCTYPE html 2.HTML标签 html … /html 3.head标签 head … /head （1）head标签中的title标签 HTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中，在HTML文档中，标题信息设置在head与/head之间。标题标签以title开始，以/title结束。 语法格式如下： title … /title （2）head标签中的meta标签 meta标签是head标签内的一个辅助性标签。meta标签提供的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以方便搜索引擎来搜索到页面的信息。 （3）head标签中的link标签 link标签用于外部文件的链接，一般用于链接外部CSS样式表文件和JS文件。 link rel=stylesheet type=text/css href=theme.css / 【例1-1】创建一个link链接外部CSS文件的实例。 新建CSS文件夹（此文件夹与1-1.html文件在同一目录中），在CSS文件夹中创建style.css文件。 在chrome浏览器中预览，效果如图所示。 （4）head标签中的script标签 script 标签用于定义客户端页面脚本。 （5）head标签中的style标签 style标签用于定义元素的CSS样式。 【例1-2】将例1-1用内嵌样式表示。 4.body标签 网页所要显示的内容都要放在body标签内，它是HTML文件的重点，body标签的作用就是定义了网页主题内容的开始和结束。 5.页面注释标签!-- -- 注释是在HTML代码中插入描述性的文本，用来解释该代码或提示其他信息。 !--注释的内容-- 三、 Sublime编辑器的使用 1．Sublime Text编辑器的安装 2．Sublime Text 3下Emmet的使用技巧 四、 HTML 5语法的变化 五、 Chrome浏览器的开发者工具 1．如何打开开发者工具 2．开发者工具简介 教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。 教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。 教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。 知识归纳 一、HTML 5基本结构如图所示。 二、 HTML 5基本标签及说明如下表所示。 三、 Sublime编辑器的使用技巧 教师讲授，学生归纳总结，并作适当的笔记。 课后作业 一、选择题 1.所有的HTML标签都有固定的格式，必须由_________符号括起来。 A (…) B … C /*…*/ D /…/ 2.下列________标签用于显示网页标题。 A