Web 前端开发技术 教案 项目三 HTML5 基础_第1页
Web 前端开发技术 教案 项目三 HTML5 基础_第2页
Web 前端开发技术 教案 项目三 HTML5 基础_第3页
Web 前端开发技术 教案 项目三 HTML5 基础_第4页
Web 前端开发技术 教案 项目三 HTML5 基础_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发技术教案设计项目课题HTML5基础授课时间授课对象大学生学习目标1.认识HTML5的特性和优势。2.熟悉HTML5的文档结构。3.掌握HTML5新增的结构元素及页面元素的使用。学习重点熟悉HTML5的文档结构。学习难点掌握HTML5新增的结构元素及页面元素的使用。教学方法讲授法、课堂演示法教学用具多媒体课件教学流程教学环节教学内容教学过程任务一HTML5概述一、HTML5的八个特性HTML5具有八个特性,分别对应八种logo,如图3-1所示,左边第一个为HTML5的新ogo,它的右边为HTML5八个特性的logo。1.语义特性(Semantic)HTML5赋予了网页更好的意义和结构。更加丰富的标记集将随着对RDFa(RDFattribute)、微数据与微格式等方面的支持,构建对程序和用户都更有价值的数据驱动的Web。2.离线与存储特性(Offline&Storage)基于HTML5开发的网页拥有更短的启动时间和更快的联网速度,这些全都得益于HTML5应用程序缓存(ApplicationCache)、本地存储功能、IndexedDB和FileAPI说明文档等的支持。3.设备访问特性(DeviceAccess)自Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口,使外部应用可以直接与浏览器内部的数据相连。例如,视频影音可直接连接麦克风及摄像头。4.多媒体特性(Multimedia)支持网页端的Audio、Video等多媒体功能,与网站自带的摄像头、影音功能等相得益彰。5.三维、图形与特效特性(3D、Graphics&Effects)基于SVG(ScalableVectorGraphics,可缩放的矢量图形)、Canvas、WebGL及CSS3的3D功能,用户会惊叹浏览器所呈现的惊艳视觉效果。6.性能与集成特性(Performance&Integration)HTML5会通过WebWorkers和XMLHttpRequest2等技术,帮助Web应用和网站在多样化的环境中更快速地工作。7.连接特性(Connectivity)更高的连接工作效率,使基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得以实现。HTML5拥有更有效的服务器推送技术,Server-SentEvent和WebSockets就是其中的两个特性,这两个特性能够实现将服务器数据“推送”到客户端的功能。8.CSS3特性在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更好的效果。此外,相较于之前的Web排版,Web的开放字体格式(WebOpenFontFormat,WOFF)提供了更高的灵活性和可控制性。二、HTML5的优势1.摆脱对平台的依赖用户打开浏览器,直接就可以访问自己的应用,不需要经过各种审核。2.实时更新通常平台的审核都需要7个工作日左右,如果发布之后再出现问题则很难补救,而Web系统不存在这种问题。3.离线使用用户可以离线使用,更新下载量较少时,可以全部更新,也可以选择替换部分文件。4.代码更安全Web应用有一个很重要的问题就是代码的安全性问题,但HTML5可以将Web代码全部加密,本地应用解密后再运行,在很大程度上提高了代码的安全性。5.跨平台HTML5的跨平台兼容特性,使大部分核心代码不需要重写,这是因为JavaScript的代码可以在许多地方使用,包括移动应用、移动网站、PC网站、各种浏览器插件,甚至可以用WebKit封装作为跨平台的应用程序。6.可以充分利用NativeHTML5可以通过浏览器充分利用Native的好处。例如,可以使用GPS、照相机、本地相册、读取本地通信录,也可以使用推送功能,最重要的是,某些Web无法实现的功能可以利用Native来实现。任务二HTML5文档结构一、HTML5页面结构HTML5中采用页眉、页脚、导航、文章内容等结构元素来进行页面布局,十分方便。HTML5页面结构元素语法如下。<!DOCTYPEhtml><html><head><metacharset=“utf-8”><title>HTML5文档结构</title></head><body><header><nav>……</nav></header><article><section>……</section></article><aside>……</aside><footer>……</footer></body></html>二、HTML5新增结构元素1.header元素header元素定义文档的页眉,通常是一些导航信息。它既可以写在网页头部,也可以写在网页内容里面。通常header元素至少包含(但不局限于)一个标题标记(h1~h6),也可以包括hgroup(标题组合)标记、表格标识、搜索表单、导航等。2.nav元素nav元素代表页面的一个部分,是一个可以作为页面导航的链接组。但建议不要在footer元素中使用nav元素,否则易造成页面显示错误。配置相应的CSS代码可以实现水平导航。3.article元素article元素是一个特殊的section元素,它比section元素具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面中的其他内容使用,如帖子、文章、新闻故事、评论等。一般来说,article元素有标题部分,通常包含在header元素内,有时也包含footer元素。article元素可以嵌套,内层的article元素对外层的article元素有隶属关系。例如,一篇新闻可以用article元素显示,而后续的一些评论可以以article元素的形式嵌入其中。4.section元素section元素定义文档中的节,如章节、页眉、页脚或文档中的其他部分,一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及标题组成。section元素不是一个普通的容器元素,它表示一段专题性的内容,可以带有标题。如果描述一件具体的事物,那么建议使用article元素来代替section元素;如果使用section元素,那么仍可以使用h1作为标题,而不用担心它所处的位置。如果一个容器需要定义属性或定义行为,那么建议用div元素。5.aside元素aside(侧栏,也称为旁注)元素用来说明其所包含的内容与页面主要内容相关,但不是该页面的一部分,类似于使用括号对正文进行注释。括号中的内容提供关于该元素的一些附加信息,如广告、成组的链接、侧栏等。6.footer元素footer元素定义section元素或文档的页脚,包含了与页面、文章或部分内容有关的信息,如文章的作者和日期。作为页面的页脚时，其一般包含了版权、相关文件和链接。它与页眉header元素用法相同,在一个页面中可以多次使用,若在一个区段的最后使用footer元素,它就相当于该区段的页脚。任务三HTML5新增页面元素一、figure与figcaption元素figure元素用于对元素进行组合,常用于图像与图像描述组合。figcaption(图题)元素用于定义figure元素的标题(caption),可以给一组图像元素定义标题,但figcaption元素不是必需的。如果包含了figcaption元素,那么它必须作为figure元素的第一个或最后一个子元素。二、mark与time元素mark元素用来定义带有记号的文本。在需要突出显示文本时可以使用mark元素。此元素对关键字做高亮处理、突出显示、标注重点,可以应用于搜索方面。time元素用来定义公历的时间(24小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,但不会在浏览器中呈现任何特殊效果。三、progress与meter元素progress元素用来定义运行中的任务进度(进程)。该元素有两个属性:max规定需要完成的值;value规定进程的当前值。meter元素用来定义已知范围内的标量测量,也被称为gauge(尺度),如磁盘可用空间、CPU使用率等。四、input与datalist元素input元素用于搜集用户信息。通过input元素的list属性与datalist元素的id属性进行关联,即将这两个属性的值设置为相同的值,通过datalist元素列出所有合法的输入值列表。datalist元素用来定义input元素可能的选项列表,一般与input元素配合使用,提供“自动完成”的功能,方便用户输入。datalist元素及其选项不会被显示出来,只有当用户将光标定位在input元素区域时,才能看到“▼”,单击“▼”按钮,在弹出的下拉列表中提供了用户可选择的选项。作业布置一、问答题(1)简述HTML5的八大特性。(2)简述HTML5文档结构的基本组成。(3)HTML5中新增的表单元素具有哪些新功能和属性?(4)HTML5中用于显示已知范围内的标量测量的元素是什么?(5)HTML5中哪个元素

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论