HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案02 《制作课程基础页面》.docx
教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月曰教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3'b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务匕制作课程基础页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索侦目标：1.培养学生诚实守信、团结友善的精神；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幻灯片口音频素材回觇频素材回动向素材0图形/图像索材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班校课可不另填写教案.教学过程及内容注解(应包含注意事%课程思政点融入等一、导入斫课1的6分*】教师；实物标签是用于标明物品的品名、重诉、体积、用途等信息的简要标牌。我们堤个人要树立“标签意识”,把诚实守信当标签,把团结友善当标签.把贲任担当当标签.今天我们学习HTM1.标签，HTM1.标签是HTM1.语言中城范本的单位。HTM1.全歆HyPeiTeX1.MarkUP1.angUage,即超文本标记语；，它的主要用途是描述页面,也就是我们认识的页面就是HTM1.,我们在浏览蕃中所行到的页而是通过浏览器内部的解析/对HTM1.文件内容的识别与演染的结果.HTM1.也是一种收到广泛认可的N页规范标准,不仅在网页的开发中曲要，在嵌入式开发，移动端开发，PC端开发等场景下，也有广泛的应用，所以掌握当前最新的HTM1.5标准已成为广大开发者的必备基础技能积土成山,聚沙成塔.我们的网页使用HTM1.作为内容构建而成,通过一个个标签来展示页面内容，通过一个个独立的标签的嵌套配合，组成一个内容丰富的M页,做网页的过程就像是搭枳木，HTM1.部分就是常要先搭建的基础枳木,待框架搭建完毕后，再通过CSS为枳木们上色美化，从而完成网页制作.二、新知识点、技能点讲解【的X分龄】新课讲解1：【约20分抻】教师：页面代码中除广文档头剜下的是很多行尖括号包史的内容.这些内容就是HTM1.的核心一一元素标卷).HTM1.标签的诵法是这样的：标记标签内容/标记标记属性="值”标签内容U标记并不是所有的标签的都是通过开始与结束双标记构成的,这种元素的语法结惋是这样的：嘛记标记属性="值"/这种没有标签内容的标记标签.我们称之为单标记标签,是从双标记标型演化而来.因为有些标签功能作用相对简单，并没有标箍内容嵌套，如果按照双标记标签的写法就显野相对繁顼.所以总标记标签可以看作是开始标记与结束标记的组合体：标记X标记/简化出标记f实际开发过程中,也常常用如下方式书写：小记标记属性=4*(r学生：为什么要有两种不同的写法？应该选择那种写法？教师：HTM1.是参考XM1.设计而来,XM1.是一种严格的标记语言.所以严格按照标记谱吉i;5法书写，本身就是了让代码更健壮，减少后期因代码风格不统一带来的问遨，但实际开发过程中，由于浏览器中对HTM1.代码有一定的纠错能力,单标记标签的简耳方式这种不符合严格的HTM1.代码规范的1分&风格，并不会等致页面错误，仍然能修正常地被浏览渊识别并解析.简写风格可以减少了代码的书写量,当页面代码中布大届的单标记标签的场景下，这种做法就会体现出极大得便捷性.这两种书写方式的出发点不同，并没有.强制的书写要求，通常以开发团队在项目初期的育定的开发规范为准,保if项目中代码风格一致即可.教师：接下来，我们来石一下网页的书写结构。<htmx!-UTM1.的文件内容整体-><hcad><!-头部-><head><body>v!-体部-><-body><htm1.>以上标签的作用分别是：htm1.HTM1.标拉.包耍head与body部分，包签整个页面内容；head,HTM1.头标彩。HTM1.文件头标签，包夔页面相关的设定信息，例如页面标题、页面关键字,字符编码方式设定、CSS文件的引入，JS文件的引入、媒体变询功能等等：body.HTM1.体标签.包安的内容是网页的主体部分,要在页面显示输出的内容都应放在该标签中，新课讲解2：【约15分钟】数师：在传统的DIV+CSS页面布局中，我们会用到两个北常特殊的标签一一div和span,这两个标程没有特殊的内容含义，仅仅是表示包夔一些内容，并把它们作为一个整体进行分割,然后配合后面会学到的CSS样式去进行精细的排版布局.Vdi，>标签可以把HTM1.文档分割成独立的、不同的部分，因此<div>标卷用来进行网页布局°<span>标签是用来组合HTM1.文档中的行内元素的，它没有固定的格式表示，只有对它应用CSS样式时,才会产生视觉上的变化.通常用来包安段落需要单独设定样式的文字.HTMIs标准中，提供了大量新的语义结构标签来描述页面结构.如下图所示，he址kr,标题头部区域的内容(用于页面或页面中的一块区域)footer.标记脚部区域的内容(用于整个页面或页面的一块区域)section,Web页面中的一块独立区域artic1.e.独立的文章内容aside,相关内容或应用(常用于健边把)nav.导航类辅助内容hgroup.hgroup标签是对网页或区段SCC1.ion的标SS元素(h1.-h6)诳行组合，fu代，标签规定独立的流内容(图像、图表、照片、代码等等)。元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文档液产生影响.figcaption.标签为figure元素定义标题vfcap1.ion>元素应该被汽;<Ggure>元素的第一个或G后一个子元泰的位置。学生I应该用div+卬an和结构化语义标签，如何选择？教师：尽可能少的使用无语义的标签di'和span在语义不明故时,既可以使用div标签或者P标签时,尽量用P标签，因为P标签在默认情况下有上下间距,对我挣特殊终端有利需要强调的文本，可以包含在strong或者cm标签中年个input标签对应的说明文本都需要使用Iabd标签，并且通过为innt设汽id展性新课讲斛3：【约35分钟】浏M网页内容由大量的标维构建而成可以把铝一个标签看作是搭建网页大班的积木,在htm1.语法中为了我们设定了很多基础标签,在H常开发中会经牯用到.那我们来看百我们可以使用的基础枳木有哪些.我们常用的基础标签有:标题标签(h1.h2h3h4h5h6)水平级标签(hr)段落与换行标签<>br)字体特殊样式标签(strongcmsupsubde1.>图片标签(img)讲到了图片标签，谛同学们举例，我们常用到的图片有哪些类型。学生：彳ibmp格式的，系统自带的画能工具默认格式，jpeg格式,相机,手机照片的格式.有种可以动的图，用的是gif教师：在H常生活中，使用技多的图像格式有四种,即JPG格式、GIF格式、BMP格式、PNG格式，在M页中使用比较多的是JpG格式、G1.F格式和PNG格式，大多致浏览器都可以显示这"图像，WCbP格式比较新，部分浏览器不支持此格式.那如何确定浏览器是否支持某种格式的图片？学生：一个一个的测试：通过测试网站的测试报告进行咨询。新课讲斛4：【约20分钟】教师；实体字符用来在页面中输出部分键盘上不能输出的内容或一些特殊符号,例如版权符号。等.实体字符更多的用途是用来防止元素内容文本被当做HTM1.标签或实体字符解析。常用的实体字舒有.内容形式1形式2空格（Snbsp;&#）«）:间隔号（）middot;·大于号O）>:ɭ小于号（）&1.t:<:与号（&&&引号（“）"："：引号（,）&apus：'版权符号（©©©:注册商标（）&right:®:学生：有些字符如（大于号）明明可以用普通符号，为什么还设计实体字符？我师：我们i®要再回忆一下，页面是什么。页面时通过普通文本代码书写成的h1.m1.文件，通过浏览器对htrn1.文件内容按照Mm1.对应版本的标准进行斜析渲染而得到的：h1.m1.的语法规能中涉及到了""、"V、”空格）.作为语法标记.我Q在编写页面文本内容时,就有可能产生把预期的HTM1.代码解析.新课讲斛5：【约30分钟】效加在HTM1.5中,超琏接有3种类型：普通超旋接，用来实现页面间跳转:锚点超链接,用来实现页面内跳转：功能超能接.用来实现外部应用谢用或其它功能.<ahrcf="链接地址"target="目标窗口位置”>链接文本或图像<a>在超钺接中的两个我要国性：属性作用href设定超链接触发之后，浏览器要跳转访问的目标地址.可以是完整f地址或者本地的相时或葩时路径地址。'UR1.target设定超链接触发之后，新的窗11的展示方式._SeIf:在原窗口展示新页面-b1.ank:在新窗口新标签中展示新页面_Parem:在父框架集中打开被桂接文档JoP:在整个窗口中打开被链接文档framename:指定的框架中打开被边接文档M页浏览的实质就是在不同的页面之间跳转，这种跳转就是由超链接标签实现的，超琏接的第一种用途一一实现页面间的跳转：Vahrcf="t接地址“target=',目标窗口位置”>集接文本或图像va>一个文本超族接,使得普通的文字具有了类似按钮-我的效果，把下面代码写入到灾面中并保存，然后在浏览器打开，点击一下看看效果是什么样子的,<hef="h1.1.p:WW"1.age1.=".Se1.r'>百度一下va>超故接除了在页面间实现跳转之外也能实现页面内部的跳转,也叫作锚点跳转.先i殳定要跳转到位徨添加<anamc"markcr">跳转目标位跣<>,这个位跣标记叫做锚点，类似于轮船的船锚的道理，即在此处产生一个定位。为了让这个定位能修被识别，就需要为其添加name属性，这样使UJ以根据name强性的值，来碉定目标位置了。<anamc="nartcr*xa>然后在进行跳转触发的位置添加一个超罐接标签，或者使用超鞋接标签包我一些元素，和之前的普通超链接大致用法相同，唯,不同的是这个用来触发跳转到指定锚点的超链接的hr”属性需要由#开头与之前设定好的锚点名构成：Vahrcf="martx1.>跳转va>这样在页面内容点击“跳转”超健接，就能使页面的蹊部与猫点位捏对齐功能性链接比较特殊，当单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邰件、QQ、MSN等琏接.以最常用的电子肥件琏接为例,当单击“联系我们”邮件链接时将打开用户的电子邮件程序,并自动填写“收件人”文本框中的电子邮件地址.<ahref="mai1.1.o:123">联系我们<a>浏览器调用本地帆件软件向指定邮箱发送数据Vahrci,tck1.234XW(M)'>拨打热线va>浏览器调用本地电话通讯状件进行指定号码拨号手机谓较为常见<ahref="ensnt"message?Uin=XXXXXXXXX&Siie-&Menu-=yes”>联系客服<>浏览器调用本地TIM或QQ软件向指定QQH1.户发送数据frame框架标签iran标签会创建包含另外一个文档的内联框架(即行内框架).iframc的强大功能是不容忽视的，网站有了iframe会变得更加美观、大气，现有的主流浏览器都支持Viframc>标签.iframe标签是框架的一种形式.在HTM1.5标准之前使用fmme标器来实现框架.但是在HImI5标准中，明确废除frame标签,取而代之的是iframe标签。iframeTR用来包含别的页面,例如我们可以在我们自己的网站页向中段套加载外部网站或者本站其他页面的内容.iframe标签中Sm屈性设定内嵌页面的地址，name屈性设定框架名称。语法如下.<iframcsrc="嵌套的页面地址"name="内联框架名称width="200phcight="2OOpx"xiframc>新课讲解6：【约30分钟】教帅：通过前面课程的学习,我们已经掌握了不少标签了.那么这些标签有没有什么共性的特点被大家发下了？学生：有部分标签都是占一行的.这些标签都是很星础的样式,和我们的网页差距祝大.大多数都是文本类型的标签内容。教师：来给这些元素做一个分类。分类的依据是这些元素的排列特性,HTM1.UJ以将兀索分类方式分为行内元素、块状元泰。块状元素，代表元素,是div.其他元索如p、nav.aside.header、footer,ukIi等等.都可以用div来突现,可以理解为具有语义的块状元素均可以有div修改得到。块状元素的特点如K：1.默认情况下.块级元素会自己独占一行.2 .能岖i殳定宽高,默认宽度是父容器的100%.3 .它的内部可以容讷行内元素和块状元素。4,高度，行高以及外边距和内边距都可控制：行内元素.代表元素足印an其他元素如NrOng、sub、q等等,都可以使用SPan来实现.可以理解为具有语义的行内元素均可以有Span修改得到.行内元索的特点如下：1 .相邻的行内元素可以在一行中.按照从左向右的顺序排列2 .宽度就是它的文字或图片的宽度,不可改变3 .行内元素只能容纳文本或者行内元素4 .,行商及外边跑和内边距不可改变：新课讲解7：【约25分仲】教师：演示操作上机仔务-制作页面通用尾部学生：跟做新课讲解8：【约25分钟】教师：演示操作上机任务-制作页面通用头部学生：跟做新课讲解9：【约35分仲】我师：演示操作上机任务制作课程说明页面学生:跟做三、教学总结【的5分花】本单元主要讲述了HTM1.文档基本结构、谱法，然后讲艇了HTM1.基本标签，包括HUe标签、meta标签HTM1.基础标卷'超链接标签等标签及相关属性，并且制作了新云课堂项目网页通用头部、尾部和课程说明页面的搭建“通过本单元的学习，读者应该掌握HTM1.文档的基本结构,健幡熟练运用HTM1.班础标签、段落标签、图片标签、超链接标程等的使用方法，为后面承节的学习打下基础.四、课后作业1的5分】1.整理课程知识笔记5 .尝试完成扩展实践,参考效果图制作图书详情页Ifti.
