Web 前端开发技术（HTML5+CSS3+JavaScript+jQuery） 课件 项目三　 HTML5基础.pptx

HTML5基础Web前端开发技术篇1：HTML技术

本项目详细介绍HTML5的特性和优势,展示HTML5的文档结构,并列举新增的结构标记及页面标记。通过一系列的示例,学生能够熟练掌握Web前端开发技术,培养动手操作能力。学生在学习HTML5技术的同时,了解相关技术的发展,体会互联网的技术创新与产业进步,努力提升自己对新技术、新产品的理解和把握能力,培养技术素养和职业精神,提高动手能力和操作技巧,为今后的成功与发展奠定坚实基础。序言

目录CONTENTSHTML5概述HTML5文档结构HTML5新增页面元素010203

01HTML5概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenoneshorizon.

HTML5的八个特性HTML5具有八个特性,分别对应八种logo,如图3-1所示,左边第一个为HTML5的新ogo,它的右边为HTML5八个特性的logo。1.语义特性(Semantic)HTML5赋予了网页更好的意义和结构。更加丰富的标记集将随着对RDFa(RDFattribute)、微数据与微格式等方面的支持,构建对程序和用户都更有价值的数据驱动的Web。2.离线与存储特性(OfflineStorage)基于HTML5开发的网页拥有更短的启动时间和更快的联网速度,这些全都得益于HTML5应用程序缓存(ApplicationCache)、本地存储功能、IndexedDB和FileAPI说明文档等的支持。HTML5概述

HTML5的八个特性3.设备访问特性(DeviceAccess)自Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口,使外部应用可以直接与浏览器内部的数据相连。例如,视频影音可直接连接麦克风及摄像头。4.多媒体特性(Multimedia)支持网页端的Audio、Video等多媒体功能,与网站自带的摄像头、影音功能等相得益彰。5.三维、图形与特效特性(3D、GraphicsEffects)基于SVG(ScalableVectorGraphics,可缩放的矢量图形)、Canvas、WebGL及CSS3的3D功能,用户会惊叹浏览器所呈现的惊艳视觉效果。HTML5概述

HTML5的八个特性6.性能与集成特性(PerformanceIntegration)HTML5会通过WebWorkers和XMLHttpRequest2等技术,帮助Web应用和网站在多样化的环境中更快速地工作。7.连接特性(Connectivity)更高的连接工作效率,使基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得以实现。HTML5拥有更有效的服务器推送技术,Server-SentEvent和WebSockets就是其中的两个特性,这两个特性能够实现将服务器数据“推送”到客户端的功能。8.CSS3特性在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更好的效果。此外,相较于之前的Web排版,Web的开放字体格式(WebOpenFontFormat,WOFF)提供了更高的灵活性和可控制性。HTML5概述

HTML5的优势1.摆脱对平台的依赖用户打开浏览器,直接就可以访问自己的应用,不需要经过各种审核。2.实时更新通常平台的审核都需要7个工作日左右,如果发布之后再出现问题则很难补救,而Web系统不存在这种问题。3.离线使用用户可以离线使用,更新下载量较少时,可以全部更新,也可以选择替换部分文件。4.代码更安全Web应用有一个很重要的问题就是代码的安全性问题,但HTML5可以将Web代码全部加密,本地应用解密后再运行,在很大程度上提高了代码的安全性。HTML5概述

HTML5的优势5.跨平台HTML5的跨平台兼容特性,使大部分核心代码不需要重写,这是因为JavaScript的代码可以在许多地方使用,包括移动应用、移动网站、PC网站、各种浏览器插件,甚至可以用WebKit封装作为跨平台的应用程序。6.可以充分利用NativeHTML5可以通过浏览器充分利用Native的好处。例如,可以使用GPS、照相机、本地相册、读取本地通信录,也可以使用推送功能,最重要的是