HTML5+CSS3+JavaScript网页设计基础与实战（微课版）教学设计教案.docx

千绛教育HTM1.5÷CSS3+JavaScript网页N殳计基础与实战教学设计语在名称：HTM1.5+CSS3+JavaScriPt网页设计一与实战授课年级：授课学期：教师3名：2022年08月22日>了斛eb前端发展历程二、知识讲解（一）前墙概述I.万集网< 1>万维网的定义万维网（Wor1.dWideWeb,亦作Web、WWW.W3）.是一种基于超文本和闻文本传输协议（HyPCITCXnYansfcrPtmccoI,简称HTTP）的.全球性的，动态交互的，跻平台的分布式图形信息系统。< 2）前端开发前端开发是创建Wcb页面或APP等前端界面呈现给用户的过程，通过HTM1.（HyperTex1.Mark-up1.anguage.超文本标记语；）、CSS（CascadingSty1.eSheets,层通样式表和JaVaSCriPt以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。3前端发展总述Web1.O1.MR:Web前剂发展初期HTM1.技术只能展示简单的网页.那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。WCb2.0时代：涌现出大量的类觎于桌面软件的WCb应用.用户不仅能浏览网页，还能对网页上的内容进行操作.网站的前端因此发生变化，网页不再只是单一的承教文字和图片,各种媒体的应用使网页内容变得更丰富多彩,同时也提升了用户体验礴.Iweb前端发展倚史< 1）峥态页面阶段 1990年的12月25日,伯纳斯李在他的电脑上部署了第一套“主机网站浏览潞”构成的Web系统，这是BS（BrowserZServer）架构网站应用软件的开端,也是曲端工程的开端. 1993年4月，M。SaiC浏览器作为第一款正式的浏览器发布. 1994年12月，W3C在伯纳斯李的主持卜成立，标志着万维网进入了标准化发展的阶段.这个阶段的网页还非常地原始,主要以HTM1.为主，是纯沛态的只读网页，被称为Web1.0时代。< 2>JavaScript诞生1995iV府景通信公司（NetscapeCommunicationsCorporation.亦称Netscape>设计了JaVaSCriPC脚本语言,并集成到NaYiga1.Or2.0版本中.随后微软公司存出JaVaSCriPt的潜力,模仿开发出JSCrip和VBScript.弁应用到IntCmn1.EXPIOrCr（简称正浏览器中，这也导致了船状和NetScape的两个浏览器之间发生产晶竞争。后来Navigator在浏览潺市场上落于下风.于是NetScape把JavaScript提交到欧洲计算机制造商协会（EUrOPeaneonipuierManufacuirer$ASSOCiatiOn,筒称ECMA）,推动制订ECMASCriP1.标准，JavaSaip1.主导了W3C的官方标准，成功实现JavaScript的标准走向国际.< 3>动态页面的发展JavaScript兴起以后,网页可以显示出浮动广告之类的动态效果.但这不是动态网页.以PHPCSP和ASP为代友的后端动态页面技术的应用才实现动态交互，这屿技术可以获取到服务器的数据信息，推动各种论坛以及搜盍引擎的发展,加快了Web的发展进程.< 4>Ajax开启Web2.0时代2004年以前的动态页面是由后端技术第动的，但是每一次交".数捌描要刷新一次网页，焕繁的页面刷新给用户帚来极差的体验感，直到AjaX技术的应用才解决这个问题。AjaX技术实现了异步HTTP请求，用户不用专门去等待请求的响应.就可以维埃浏览或操作网页.AjaX技术开启了WCb2.0的时代.G前端兼容性框架的出现Fircfox火狐浏览器和Opem（欧朋）浏览渊同IE浏览潺之间再次展开产品竞争，不同的浏览器之间，技术标准也会有差异，这样不利于兼容开发，于是催生了Dojo.Moo1.too1.s*YUIExUS、JQUCTy等前玷兼容框架,其中2006年诞生的JQuCry的应用最为广泛.< 6>HTM1.5的出现 2007年,W3C采纳THIM1.5规范草案,并在2008年1月22I1.正式发布.在HTM1.5新规范的指引下，各个浏览器厂商不断改进沏览器，谷歌以JavaScript引擎V8为基础研发的Chmne浏览器发展也十分迅速. 2014年10月28日，W3C正式发布HTM1.5.0标准。<7）前端三大框架 前前3大主JS框架是Angu1.ar,Rcct和Vuc. 2009年，以Chmne的V8引擎为基础开发的Nodejs发布，随后AnguIarJS±.后来被谷歌收的.AngUIar是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路出，过泄器，依籁注入等所有功能。 2011年，React诞生，于1013年5月开源，是一个用于构建用户界面的JaVaSeriP1.框架，核心思想是灼装组件， 2014年,尤雨潴开发出一套用于构建用户界面的渐进式框架Vue.它能战少不必要的DOM操作和提而渲染效率<8）ECMAScript6的发布2015年6月,ECMAScnpt6.0发布,这个版本增加了很多新的语法，更加提升了JaVaScriP1.的开发潜力。三、知识巩固（1）回收上深曲的学习目标，对本节课知识点诳行总结.<2）使用第一章课后作业。第二学时（认识HTM1.5、认识CSS3）一、回顾上节爆内容（I）时上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容,引出本节课主题.3）明确学习方向。> 认识IITM1.5的特点、新特性、文件结物> 掌握m11.5标签和元素的使用方法> 认识CSS3的特戊、新特性、选择器与属性的分类半弊CSS3的3种引入方式二、知识讲解（一）认识HTMIJI.HTMI.5的特点 简易性。HTM1.版本升级采用出集方式，从而更加灵活方便， 可扩展,HTM1.语言应用广泛，同时带来了加强功能，增加标识符等要求，HTMI.果取了类元素的方式,为系统扩展带来保证. 平台无关性。HTM1.可以使用在多种平台上，关联性不大. 通用性.HTM1.是基于标准通用标记谱中,它允许网页开发拧建立图片与文本相结合的复朵页面，页面可被网络上的任何人使刖各种类型的电脑或浏览器进行浏览.2 .HTM1.5的新特性 新的语义元素HTM1.5提供了新的元素来创建更好的页面结构，例如VhCadCr、nav,foo1.er、VartiCIc和VSeCIion。 新的友单控件,HTM1.5拥有多个新的灰用输入类型，这些新特性提供了更好的输入控制和验证，例如，数字（number）、F1.期（Me八时间（Iimc）、tE件（CmaiI）和电话（tc1.）. 强大的图像支持.HTMI.5可使用canvas和VSVg标签通过脚本语言（通常是JaYaSCrip）绘制图形。 强大的多媒体支持，HTM1.5规定了在网页上城入视频和音频元素的标准，即使用VVideo和audio元素。 强大的新APh1.ITM1.5可通过gckcation方法配介第三方的地图API实现地理定位.HTM1.5可以在本地存储用户的浏览数据,Wch存储需娈更加的安全马快速的数据存偌方式，用本地存储方式取代cookie存储方式更加安全便捷.3 .HTM1.5的文件结构文件基本结构主要由文件声明（!DOCTYPEhim、HTM1.文档htm1.）.文件头部（VhCad）和文件主体（body）4部分构成.1文件声明DOCTYPEh1.m1.是HTM1.5标i网页声明，表示向浏览器说明当前文件使用HTNn.5标准规范.2HTM1.文档VhtmIXmtm1.是HTM1.文件的文档标签.htm1.HTM1.文件开始标然，也被称为根标签，是指文件的最外层，VhtmA是HTM1.文件结束标卷.网页的所有内容都需要写在him1.xim1.标签里面，3文件头部headx小ead是HTM1.文件的头部标签，head是HTM1.文件头标签，VhSd是HTM1.文件尾标签.它用于定义文档的头部信息，是所有头部元素的容器，描述了文件的各种屈性和信息，头部元素有meta、111.escripVSIyIe、1.ink等标程4文件主体bodyvbody是主体标签，body是正文内容开始标记,vbody是正文内容结束标记。它用于定义文件的内容.可包含图片、文本、视频、音频、的链接、表格、列表等各种内容.在HTM1.文件中，!-注林内容”是HTM1.文件的注拜，刖于标注网页内容的注锋部分它的主要作用足时代码进行解释，给开发人员作参考.不会被浏览器解析和执行.4.标签和元素I)HTM1.标签HTM1.标签分为唯标签和双标签，单标签是由一个标签组成的，例如,有Vme1.a、img,VinPu1、brVIinkA等。HTM1.标签大多Ift为双标签.双标签由首标签和尾标签构成.音标艇格式为V标签名称,尾标签格式为/标签名称,其语法格式如下所示。标维名称内有/标签名称HTM1.标签的示例代码如下所示.P今天也是天气明明的一天p2HTM1.元素HTMI5文件由元素和标器构成.HTM1.元素指的是从开始标签(StartTag）到结束标签EndTag）的所有代码.整个HTM1.文件就像是一个元素集合，里面包含了许多元素.在HTM1.文件中某个元素的语法定义如下所示.标笠幺称怩性值！也1"胧性M2-"值2"内在/标花名称）HTM1.元素的示例代码如下所示.VdiVtit1.e="spring"小天到了div（二）认识CSS31CSS3定义CSS是层叠样式表，一种用于（增强）控制网页样式并允许将样式信息与网页内容分离的标记性语言，由W5C定义和维护,使用CSS可以实现网页内容与呈现的分离，不仅可以提升网页执行效率，更方便后期管理和代码维护.CSS可以改变HTM1.元素的样式.改变元素样式我们得先弄清她3件事：“改变的对象是谁"、“改什么类型的样式”和“具体改成什么样子”。“改变的对象是谁"要在HI-M1.元素中选择要改变的对望.这需要用到CSS选择器，CSS选和器用于指定、控制CSS要作用的HTM1.元素。“改什么类型的样式”要选择改变IrrM1.元素的具体样式属性，这需要使用CSS属性,CSS属性是指定选择符所具有的属性,“具体改成什么样子”就是指定这个样式屈性的属性伯。2.CSS3的特点 丰富的样式定义 易于使用和修改 多页而应用 层小 页面压缩3.CSS3新特性 新增选挣器。CSS3新增了结构伪类选齐器、伪元素选择涔、阖性选择牌等. 新的边框效果,CSS3新增了前角边框（border-radius、边框阴影(box-shadow)和边框图像(border-image).丰富*元泰的边框效果. 渐变。CSS3新埴了颜色的践性渐变1.ineargradie11和径向渐变(radia1.-gradient).使元素变得更加绚丽多变. 2D转换和3D转换.CSS3增加2D转换和3D转换.有位移(trans1.ate).(rotate)缗放sca1.e)和顺斜(SkeW)4种转换. 过渡，过渡就是把变换的过程细节放大. 动画动湎通过