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

1、教学课题工程1 HTML文档结构一1. 1工程描述、1. 2知识准备授课班级授课时间教学目标知识目标1.掌握HTML 5文件的基本结构；2,掌握HTML 5基本标签；掌握Sublime编辑器的使用；了解HTML5语法的变化；了解Chrome浏览器中的开发者工具。能力目标.培养学生自主学习、分析问题和解决问题的能力；.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2 ,培养学生的团队合作精神。学情分析网络已经成为人们学习、工作和娱乐中不可缺少的一局部，网页设 计也成为学习计算机知识的重要内容之一。本工程来学习HTML基本概念和编写方法及浏览HTM

2、L文件的方法， 使读者初步了解HTML。教学重点HTML 5文件的基本结构；HTML 5基本标签;Sublime编辑器的使用。教学难点HTML 5文件的基本结构；HTML 5基本标签；Sublime编辑器的使用技巧。教学方法工程教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个简单的网页页面，并通过网页页面的源 代码，导入HTML文件的基本结构。教师提出问题，学 生可分组讨论，协作探 究。技能学习一、HTML5文件基本结农一个HTML 5文档中，4 且放在一个HTML 5文档中E 之间通 n/l 部信息，例如文档标题、样3 分，即网页内容。(DOCTYP

3、E HTML文档声明HTML文档的开始标签 HTML的头部信息开始标签HTML的头部信息、结束标签 HTML的文档主体开始标签HTML的文档主体结束标签HTML文档的结束标签g3 须包含 v/html KJ开始和结束位置。常包含两个局部, body，head 标签包 t定义等。body包含）meta charsetx UTF-S 网页标题网页内容标签，并分别为 含html头 工档主体部教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借 此查看教学效果。教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动，共同完成操作

4、任务，借此查看教学效果。教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动，共同完成操作任务，借此查看教学效果。二、HTML5基本标签1.文档类型说明 !DOCTYPE html2.HTML标签html3.head标签标签中的title标签HTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中，在HTML文档中，标题信息设置在 vhead与v/head之间。标题标签以title,开始，以/title, 结束。语法格式如下：/titlevhead标签中的meta标签meta标签是head标签内的一个辅助性标签。 vmeta标签提供的信息不显示在页面中，一

5、般用来定义页面 的关键字、页面的描述等，以方便搜索引擎来搜索到页面的 信息。vhead标签中的vlink标签v|ink标签用于外部文件的链接，一般用于链接外部 CSS样式表文件和JS文件。link rel=HstylesheetH type=Htext/cssH href=theme.css” /W 1-11创立一个link链接外部CSS文件的实例。新建CSS文件夹(此文件夹与1-1.html文件在同一目 录中)，在CSS文件夹中创立style.css文件。在chrome浏览器中预览，效果如下图。vhead标签中的script,标签标签用于定义客户端页面脚本。标签中的style)标签style

6、标签用于定义元素的CSS样式。【例1-2将例1-1用内嵌样式表示。.body标签教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借 此查看教学效果。网页所要显示的内容都要放在body标签内，它是HTML 文件的重点，标签的作用就是定义了网页主题内容的 开始和结束。教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借 此查看教学效果。.页面注释标签注释是在HTML代码中插入描述性的文本，用来解释该 代码或提示其他信息。知识归纳K 头部局部ITF-8H/title网页知识归纳K 头部局部ITF-8

7、H/title网页meta charset=HDocument网页标题hello world!网页内容教师讲授，学生归 纳总结，并作适当的笔 记。二、HTML5基本标签及说明如下表所示。标签y内部标签一说明一HTML*整个网页是从这里开始，然后到 /html 冷束 2head标签代表页面 的“头%定义些 特殊内容，这些内容 都是在浏览器不可 见的head”定义网页的标题一定义网页的基本信息（供搜索引擎，style定义CSS样式一(link4捱接外部CSS文件或脚本文件。script”定义脚本语言定义页面所有遭接的基础定位（用得很少）*?代表页面的“身”，定义网页展示内容，这些内容都是在浏览器可

8、 见的。：子元素符号，表示嵌套的元素；+ ：同级标签符号；%可以使该符号前的标签提升一行。代码组合使用标签的嵌套和括号可以快速生成代码组合隐式标签进行快速输入时，根据父标签进行判定从而得到不同的代码。 隐式标签名称为：li:用于3和ol中；tr：用于 table、tbody、thead 和 tfoot 中夕，td：用于tr中；一option ：用于 select 和 optgroup 中一定义多个元素。使用符号来定义多个元素定义多个带属性 的万者U使用符号来指定编号，使用符号来指定反向编号，课后作业一、选择题.所有的HTML标签都有固定的格式，必须由 符号括起来。A （）BC/* */D/,以下标签用于显示网页标题。ABCD,以下标签用于显