HTML5移动Web开发任务教程-全套PPT课件.pptx

移动Web开发概述 01移动Web开发简介移动Web开发概述02移动Web开发技术03开发工具HBuilder的使用 01移动Web（移动网页）:在移动端Web 浏览器中运行的Web 应用。Native App（原生应用）：用Objective-C 等原生语言开发的移动应用。02Hybrid App（混合应用）：将移动Web 页面封装在原生外壳中，以App 的形式与用户交互。03 移动 Web 开发就是针对移动端的Web 页面的开发，它主要有以下3 种开发方式。移动Web开发简介 01 移动web开发基本概念PCWeb开发移动Web开发 PC端Web开发主要由HTML、CSS和JavaScript技术来实现。PC端Web开发的内容包括网站页面内容、样式的呈现，用户的交互，数据的呈现等。它需要PC端浏览器对HTML、CSS和JavaScript及其他技术的支持。在开发时，需要注意不同厂家浏览器对前端技术支持的差异化，需要考虑浏览器的兼容性。 移动Web开发即针对移动端的Web页面的开发，它与PC端Web开发有什么区别？移动Web开发简介 01 移动web开发基本概念PCWeb开发移动Web开发移动端Web开发与PC端Web开发所用的技术类似，开发项目的呈现是依赖于移动端Web浏览器。在移动Web开发中，需要注意的有两点。（1）由于屏幕大小的限制，在移动Web开发中，要注意由于页面的结构不能过于繁琐，要提炼出该网站最为核心的功能，简洁清晰的呈现出来。（2）对于页面的一切交互活动由鼠标控制变成了手指触屏控制，所以在移动Web开发时，会增加一些触屏事件。移动Web开发简介 01 移动web开发基本概念Android BrowserAndroidMobile SafariiOSUC浏览器多操作系统QQ浏览器百度浏览器 随着Android系统手机、iOS系统手机、windows phone系统手机不断推出各种应用程序。不论什么系统的手机，手机中都有移动Web浏览器。移动Web开发简介 01 移动web开发基本概念 移动Web浏览器可以直接访问任何通过HTML等语言构建的Web网站或应用程序。 我们通过iPhone手机上的Safari浏览器访问了中国大学MOOC的首页，如右图所示。移动Web开发简介 接下来，作为对比，我们在PC端访问中国大学MOOC网站的首页，如下图所示。01 移动web开发基本概念移动Web开发简介 移动端网站的设计更简洁，内容更核心。这也反映了移动Web浏览器的一些特点，如下所示。 屏幕尺寸限制加入手势操作硬件设备不断发展 可支持HTML5规范现在的移动Web浏览器都可以支持HTML5，这包括HTML5规范，CSS3规范和JavaScript脚本代码。01 移动web开发基本概念移动端会支持触屏、滑动、缩放、放大等手势操作。移动Web浏览器受到屏幕尺寸的限制，所以移动端网站的设计会将本站最核心的产品进行展示，菜单栏也会缩进一个汉堡菜单中。PC端硬件配置相对强大，各种浏览器对硬件的要求已经无需太多的限定。而手机的性能相对于PC端要低的多，内置的浏览器就需要考虑硬件因素。所以移动Web浏览器功能相对有限。但是随着手机的硬件设备不断加强，移动Web浏览器支持的功能也随着越来越多。移动Web开发简介 01移动Web开发简介移动Web开发概述02移动Web开发技术03开发工具HBuilder的使用 超文本标记语言HTML描述网页文档的一种标记语言，通过标记来标识要显示在网页中的各个部分。HTML5简介 Web成为应用程序运行的平台 HTML5能实现并改进Web应用，实现Web应用的多设备同时支持。HTML5简介 Tim Berners-Lee创建“HTML标签”雏形HTML2.0 —HTML 4.01HTML5草案公布IETF推出第一个官方版本HTML 2.0HTML5爆1999200819932015HTML5发展史 每一个新版本都是对之前版本的扩充 每一个新版本基本都能兼容之前的版本HTML5发展史 支持跨平台、跨设备 支持移动开发HTML5新特性 语义化表达引入具有特定语义的结构标签，如<header>、<footer>、<nav>等。HTML5新特性 支持多媒体新增<audio>和<video>标签处理音频和视频文件。HTML5新特性 离线和存储HTML5提出Local Storage与Application Cache两大离线存储技术，能把Web应用相关资源文件缓存到本地。HTML5新特性 三维图形与特效Canvas、SVG和WebGL等技术使图形渲染更高效，页面效果更酷炫。网页特效网页游戏三维立体展示厅HTM