《网站前端技术》教案第2课HTML与HTML5（一）.docx

《《网站前端技术》教案第2课HTML与HTML5（一）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第2课HTML与HTML5（一）.docx（16页珍藏版）》请在优知文库上搜索。

1、课题第2课HTML与HTML5(一)课时2课时(90min)教学目标知识技能目标：(1)了解HTML的主要功能、标签的语法、结构、标签分类及常用编辑工具(2)了解HTML5的优势及语法变化(3)掌握HTML的头部标签素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML的功能、标签的语法、结构、标签分类和常用编辑工具，HTML5的语法变化教学难点：HTML头部标签教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)一传授新知(33min)一头脑风

2、暴(5min)第2节课：问题导入(3min)一传授新知(27min)一上机操作(IOmin)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML的概念、功能、标签的语法、结构、分类等相关内容，以及HTML常用的编辑工具。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入(5min)【教师】提出以下问题

3、什么是HTML?它由哪些元素组成？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知(33min)2.1 HTML基础2.1.1 什么是HTML【教师】讲解HTML的概念HTML指的是超文本标记语言(hypertextmarkuplanguage),是用于编写网页的主要语言。它基于标准通用标记语言(standardgeneralizedmarkuplanguage,SGML)定义，也是一通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML的概念、功能、HTML标签的语法、结构、分类的相关内容，以及熟种规范，

4、一种标准。HTML主要用于定义网页结构，它决定网页上显示的内容，即解决网页上有什么的问题，是网页文件制作的基础。悉HTML常用的编 辑工具，为后边的 学习打好基础HTML是一种用标记标签（简称标签）描述网页的标记语言。网页中的文本、图像、表格、超链接等内容，都是由HTML中的标签定义和组织的。用HTML编写的超文本文档称为HTML文档，扩展名为.Mml或hm,也就是网页。【课堂互动】十【教师】提问HTML与文本文件有何不同？十【学生】聆听、思考、回答网页文件本身是一种文本文件，它本质上是通过在文本文件中添加标签，来告诉浏览器如何显示其中的内容，如文字如何处理、画面如何安排、图像如何显示等。浏览

5、器按JI顶序阅读网页文件,并根据标签解释和显示内容。对书写有误的标签，浏览器不报错,且不停止解释执行过程,用户只能通过显示效果来分析出错原因和出错位置。【高手点拨】对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。【学生】聆听、记录、理解2.1.2HTML的主要功能【教师】讲解HTML的主要功能【课堂互动】十【教师】提问HTML的主要功能有哪些?十【学生】聆听、思考、回答定义（或设置）文本：定义文本的标题、段落等。此外，还可以设置文字的字体、字号、颜色等样式。但是现在一般不用HTML设置样式，而是用CSSe插入图像：在网页中插入图像，使网页图文并茂.建立超链接

6、：通过超链接实现不同网站的学桀。创建列表：彳各信息用一种易读的方式表现出来。创建表单：通过表单实现人机交互,使网站的功能更加完善。建立表格：以表格的形式显示页面信息,为浏览者查找信息提供便利。插入多媒体：通过网页共享音频、视频、动画等，并设置播放的时间和次数。【学生】聆听、记录、理解【教师】讲解HTML标金的基本诺法【多媒体】组织学生扫码播放HTML标签的基本语法”视频（详见教材），让学生对这部分内容有一介大致地了解HTML标签是由尖括号括起来的关键词，每个标签都有名称、可选择的属性和标签内容。HTML中，成对出现的标签称为双标签，单独出现的标签称为单标签。1 .双标签格式】：标签名标签内容（

7、文本或超文本）/标签名例如，定义一个标题的标签，代码如下：h1这是一号标题小1格式2：标签名属性名1=属性值1属性名2二属性值2标签内容文本或超文本）/标签名属性都是可选择的，如果标签中有属性，则标签名和属性名之间要用空格隔开，各属性值用双引号括起来。例如，实现超链接的代码如下：ahref=webindex.htmlIarget=_blank点击我吧a其中，a为超链接标签名称；href=webindexhm和Iarget=_blank两个属性，分别定义了超链接目标文档的路径和打开方式；点击我吧为标签内容（超链接文本）【提示】代码中的标点符号均为英文标点符号。2 .单标签格式】：标签名A此种标签

8、称为单标签,如恻亍标签br/,它仅仅通知浏览器在此处换行，因而不需要界定作用范围，所以它没有尾标签。【提示】从长远来看，应该养成正确关闭单标签的习惯，因此，在右尖括号前须加上一个空格和斜杠。格式2：V标签名属性名1=属性值1属性名2=属性值2/例如，控制图像的代码如下：imgsrc=imgjpO2.jpgwidth=400height=3OO/其中jmg是标签名表示图像MC是标签属性名用于将指定图像引入网页jmgjpO2.jpg是属性值，表示图像的地址；Width、height也是标签属性名称，分别用于定义图像的宽度和高度，单位为px（像素，可省略）。当一组HTML标签将一段文字包含在中间时，

9、这段文字与包含文字的HTML标签称为一元素。由于在HTML语法中，每个由HTML标签与文字形成的元素内，还可以包含另7三,因此，整个HTML文件就像一个大元素，其中包含了许多小元素。HTML文档中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。【教师】PPt展示”标签的正确用法和错误用法”的表格（详见教材），让学生通过对比了解标签的正确用法【高手点拨】上述列表中，Vldvtd标签包含在标签中，标签又包含在标签中，形成父子关系，后面章节会详细讲解。【课堂互动】十【教师】提问简述单标签与双标签的区别.中【学生】思考、讨论、回答【学生】聆听、记录、理解2

10、.1.4HTML的基本结构【教师】讲解HTML的基本结构【多媒体】组织学生扫码播放“HTML的基本结构“视频（详见教材），让学生对这部分内容有一个大致地了解HTML文档由起始标签、头部标签和主体标签三部分组成。下面这段代码展示了一个基本的HTML文档结构。文档头部文档主体【课堂互动】十【教师】提问以上三个标签各有什么作用？【学生】聆听、思考、回答.：表示HTML文档的开始标签和结束标签，用于告诉浏览器HTML文档的开始和结束位置。.:表示HTML文档的头部开始标签和结束标签，一般用于存放网页的元信息，如网页描述、关键字、作者信息等。头部标签和文件标题标签都成对使用。.：表示HTML文档的主体开

11、始标签和结束标签，网页中要显示的所有内容均嵌套在这一对标签内，也可理解为该标签中的内容在浏览器中是可见的。【示例2-1-1】打开应用程序记事本，创建文件并以index.himl命名，注意.html”为该文件的扩展名，然后在该文档中输入以下代码，并保存在合理的位置。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解【学生】聆听、上机操作、演示我的第一个网页我的段落【教师】PPt展示“记事本创建网页的效果”图片（详见教材），并讲解效果：在浏览器中打开网页，网页标题显示我的第一个网页，网页内容显示我的段落。【提示】标签之间的部分是HTML文件的标题

12、，在后面的章节中会详细讲解。【学生】聆听、记录、理解2.1.5HTML标签的分类【教师】讲解HTML标签的分类根据是否独占一行，可以将HTML标签分为块标签和行标签。块标签：独占一行，可以设置宽度和高度属性，而且元素在页面中遵循从上到下的顺序排列，如段落标签=行标签：也称内联标签、行内标签等，不能独自占据一行，设置宽度和高度属性无效，而且元素在页面中遵循从左到右的顺序排列，如超链接标签【课堂互动】十【教师】提问块元素和行元素有哪些区别？）【学生】聆听、思考、回答【示例2-1-2编辑HTML文档标签的内容，代码如下：美文赞赏动画欣赏百度一_F新浪【教师】组织学生分组上机完成上面的任务，并在各组中

13、挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“块元素和行元素的区别”图片（详见教材），并讲解效果：网页中两个段落从上到下各占一行排列，两个超链接从左到右在同一行排列。【学生】聆听、记录、理解2.1.6 HTML注释【教师】讲解HTML注释为增强代码可读性，开发者常使用注释解释HTML文档中的代码。在HTML文档中，注释由“HTML注释一般放在要注释内容的上面，不能显示在浏览器中，仅显示在文档中。【学生】聆听、记录、理解2.1.7 HTML的常用编辑工具【教师】讲解HTML的常用编辑工具1 .记事本在WindoWS操作系统中，记事本是一个小的应用程序，采用一个简单的文本编辑器进行文字信息的记录和存储。同样，它也是一个代码编辑工具，可用于编写网页文件。2 .AdobeDreamwcavcrAdobeDreamweaver是一款集网页制作和网站管理于一身的所见即所得网页代码编辑器。它不仅能够编辑网页，还可以有效地创建、管理网站，同时提供上传网站的便捷方法。3 .SublimeTextSUblimeTeXl是文本编辑器，同时也是先进的、轻量级的网页编辑器，能够编辑网页中涉及的各种类型的文件，如html、css、js、asp、jsp等。该编辑器对于不同的文件类型会提