HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案02 《制作课程基础页面》.docx

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案02 《制作课程基础页面》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案02 《制作课程基础页面》.docx（11页珍藏版）》请在优知文库上搜索。

1、教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月曰教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算

2、机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务匕制作课程基础页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索侦目标：1.培养学生诚实守信、团结友善的精

3、神；2 .培养学生责任担当总:识和编码的规范意识.知识目标，1.掌握HTM1.基础谱法3 .掌握IIW1.明础标算4 .掌握语义化结构标签4,了解Hn1.1.5的特点能力目标：1.熟练使用HBUiidCr编写摘单HTM1.页面帙学内容1. Hn1.1.5基础语法2. IIIM1.5谙义化结构标签3. HRI1.5常用标签4. H1M1.5实体字符5. HK5超桂接、框架标签6. 1ITO1.5标签分类.点点教学重点：1. HTM1.5基础语法2. IMI,5超钺接教学难点:1.HTM1.S标签分类教学方法谈论法、讲授法、演示法、练习法素材资*团文本素材0实物展示EPPT幻灯片口音频素材回觇频素

4、材回动向素材0图形/图像索材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班校课可不另填写教案.教学过程及内容注解(应包含注意事%课程思政点融入等一、导入斫课1的6分*】教师；实物标签是用于标明物品的品名、重诉、体积、用途等信息的简要标牌。我们堤个人要树立“标签意识”,把诚实守信当标签,把团结友善当标签.把贲任担当当标签.今天我们学习HTM1.标签，HTM1.标签是HTM1.语言中城范本的单位。HTM1.全歆HyPeiTeX1.MarkUP1.angUage,即超文本标记语；，它的主要用途是描述页面,也就是我们认识的页面就

5、是HTM1.,我们在浏览蕃中所行到的页而是通过浏览器内部的解析/对HTM1.文件内容的识别与演染的结果.HTM1.也是一种收到广泛认可的N页规范标准,不仅在网页的开发中曲要，在嵌入式开发，移动端开发，PC端开发等场景下，也有广泛的应用，所以掌握当前最新的HTM1.5标准已成为广大开发者的必备基础技能积土成山,聚沙成塔.我们的网页使用HTM1.作为内容构建而成,通过一个个标签来展示页面内容，通过一个个独立的标签的嵌套配合，组成一个内容丰富的M页,做网页的过程就像是搭枳木，HTM1.部分就是常要先搭建的基础枳木,待框架搭建完毕后，再通过CSS为枳木们上色美化，从而完成网页制作.二、新知识点、技能点

6、讲解【的X分龄】新课讲解1：【约20分抻】教师：页面代码中除广文档头剜下的是很多行尖括号包史的内容.这些内容就是HTM1.的核心一一元素标卷).HTM1.标签的诵法是这样的：标记标签内容/标记标记属性=值”标签内容U标记并不是所有的标签的都是通过开始与结束双标记构成的,这种元素的语法结惋是这样的：嘛记标记属性=值/这种没有标签内容的标记标签.我们称之为单标记标签,是从双标记标型演化而来.因为有些标签功能作用相对简单，并没有标箍内容嵌套，如果按照双标记标签的写法就显野相对繁顼.所以总标记标签可以看作是开始标记与结束标记的组合体：标记X标记/简化出标记f实际开发过程中,也常常用如下方式书写：小记标

7、记属性=4*(r学生：为什么要有两种不同的写法？应该选择那种写法？教师：HTM1.是参考XM1.设计而来,XM1.是一种严格的标记语言.所以严格按照标记谱吉i;5法书写，本身就是了让代码更健壮，减少后期因代码风格不统一带来的问遨，但实际开发过程中，由于浏览器中对HTM1.代码有一定的纠错能力,单标记标签的简耳方式这种不符合严格的HTM1.代码规范的1分&风格，并不会等致页面错误，仍然能修正常地被浏览渊识别并解析.简写风格可以减少了代码的书写量,当页面代码中布大届的单标记标签的场景下，这种做法就会体现出极大得便捷性.这两种书写方式的出发点不同，并没有.强制的书写要求，通常以开发团队在项目初期的育

8、定的开发规范为准,保if项目中代码风格一致即可.教师：接下来，我们来石一下网页的书写结构。v!-体部-以上标签的作用分别是：htm1.HTM1.标拉.包耍head与body部分，包签整个页面内容；head,HTM1.头标彩。HTM1.文件头标签，包夔页面相关的设定信息，例如页面标题、页面关键字,字符编码方式设定、CSS文件的引入，JS文件的引入、媒体变询功能等等：body.HTM1.体标签.包安的内容是网页的主体部分,要在页面显示输出的内容都应放在该标签中，新课讲解2：【约15分钟】数师：在传统的DIV+CSS页面布局中，我们会用到两个北常特殊的标签一一div和span,这两个标程没有特殊的内

9、容含义，仅仅是表示包夔一些内容，并把它们作为一个整体进行分割,然后配合后面会学到的CSS样式去进行精细的排版布局.Vdi，标签可以把HTM1.文档分割成独立的、不同的部分，因此标卷用来进行网页布局标签是用来组合HTM1.文档中的行内元素的，它没有固定的格式表示，只有对它应用CSS样式时,才会产生视觉上的变化.通常用来包安段落需要单独设定样式的文字.HTMIs标准中，提供了大量新的语义结构标签来描述页面结构.如下图所示，he址kr,标题头部区域的内容(用于页面或页面中的一块区域)footer.标记脚部区域的内容(用于整个页面或页面的一块区域)section,Web页面中的一块独立区域artic1

10、.e.独立的文章内容aside,相关内容或应用(常用于健边把)nav.导航类辅助内容hgroup.hgroup标签是对网页或区段SCC1.ion的标SS元素(h1.-h6)诳行组合，fu代，标签规定独立的流内容(图像、图表、照片、代码等等)。元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文档液产生影响.figcaption.标签为figure元素定义标题vfcap1.ion元素应该被汽;元素的第一个或G后一个子元泰的位置。学生I应该用div+卬an和结构化语义标签，如何选择？教师：尽可能少的使用无语义的标签di和span在语义不明故时,既可以使用div标签

11、或者P标签时,尽量用P标签，因为P标签在默认情况下有上下间距,对我挣特殊终端有利需要强调的文本，可以包含在strong或者cm标签中年个input标签对应的说明文本都需要使用Iabd标签，并且通过为innt设汽id展性新课讲斛3：【约35分钟】浏M网页内容由大量的标维构建而成可以把铝一个标签看作是搭建网页大班的积木,在htm1.语法中为了我们设定了很多基础标签,在H常开发中会经牯用到.那我们来看百我们可以使用的基础枳木有哪些.我们常用的基础标签有:标题标签(h1.h2h3h4h5h6)水平级标签(hr)段落与换行标签br)字体特殊样式标签(strongcmsupsubde1.图片标签(img)

12、讲到了图片标签，谛同学们举例，我们常用到的图片有哪些类型。学生：彳ibmp格式的，系统自带的画能工具默认格式，jpeg格式,相机,手机照片的格式.有种可以动的图，用的是gif教师：在H常生活中，使用技多的图像格式有四种,即JPG格式、GIF格式、BMP格式、PNG格式，在M页中使用比较多的是JpG格式、G1.F格式和PNG格式，大多致浏览器都可以显示这图像，WCbP格式比较新，部分浏览器不支持此格式.那如何确定浏览器是否支持某种格式的图片？学生：一个一个的测试：通过测试网站的测试报告进行咨询。新课讲斛4：【约20分钟】教师；实体字符用来在页面中输出部分键盘上不能输出的内容或一些特殊符号,例如版

13、权符号。等.实体字符更多的用途是用来防止元素内容文本被当做HTM1.标签或实体字符解析。常用的实体字舒有.内容形式1形式2空格（Snbsp;&#）:间隔号（）middot;·大于号O）>:ɭ小于号（）&1.t:<:与号（&&引号（“）"："：引号（,）&apus：'版权符号（©©:注册商标（）&right:®:学生：有些字符如（大于号）明明可以用普通符号，为什么还设计实体字符？我师：我们i要再回忆一下，页面是什么。页面时通过普通文本代码书写成的h1.m1.文件，通过浏览器对htrn1.文件内容按照Mm1.

14、对应版本的标准进行斜析渲染而得到的：h1.m1.的语法规能中涉及到了、V、”空格）.作为语法标记.我Q在编写页面文本内容时,就有可能产生把预期的HTM1.代码解析.新课讲斛5：【约30分钟】效加在HTM1.5中,超琏接有3种类型：普通超旋接，用来实现页面间跳转:锚点超链接,用来实现页面内跳转：功能超能接.用来实现外部应用谢用或其它功能.链接文本或图像在超钺接中的两个我要国性：属性作用href设定超链接触发之后，浏览器要跳转访问的目标地址.可以是完整f地址或者本地的相时或葩时路径地址。UR1.target设定超链接触发之后，新的窗11的展示方式._SeIf:在原窗口展示新页面-b1.ank:在新窗口新标签中展示新页面_Parem:在父框架集中打开被桂接文档JoP:在整个窗口中打开被链接文档framename:指定的框架中打开被边接文档M页浏览的实质就是在不同的页面之间跳转，这种跳转就是由超链接标签实现的，超琏接的第一种用途一一