移动端的HTML5开发基础知识-ppt课件.ppt

1、第 1 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 2 页HTML5简介HTML5是HTML(超文本标记语言)的第五次重大修改.HTML5草案的前身名为 Web Applications 1.0，于2004年被提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本第 3 页HTML5简介HTML5 仍处于完善之中。然而，大部

2、分移动端系统和现代浏览器都已经支持HTML5 。移动端系统（如安卓，IOS, WP等）都能支持HTML5 。支持HTML5的浏览器包括:Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器。第 4 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 5 页开发移

3、动应用程序的三种方式：原生、HTML5或混合原生应用程序：原生应用程序是某一个移动平台（比如iOS或安卓）所特有的，使用相应平台支持的开发工具和语言（比如iOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）。原生应用程序看起来（外观）和运行起来（性能）是最佳的。典型的项目例子： 移动验收， 移动形象进度等第 6 页移动验收主页面第 7 页开发移动应用程序的三种方式：原生、HTML5或混合HTML5应用程序：HTML5应用程序使用标准的Web技术，通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可

4、以在多个设备上运行。开发人员使用HTML5和JavaScript能构建功能复杂的应用程序。典型的项目例子： 围住神经猫等社交小游戏第 8 页围住神经猫社交小游戏第 9 页开发移动应用程序的三种方式：原生、HTML5或混合混合应用程序：混合应用程序让开发人员可以把HTML5应用程序嵌入到一个原生容器里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体。典型的项目例子： 移动审批第 10 页移动审批主页面第 11 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 12 页

5、HTML5使用上的优势更低的开发及维护成本；使页面变得更小，减少了用户不必要的支出；而且性能更好、耗电量更低。方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。第 13 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 14 页HTML基础HTML是HyperText Markup Language(超文本标记语言)的缩写，是构成所有所有网页基本结构的文本及标签组合。HTML 不是一种编程语言，而是一种标记语言 (markup langu

6、age)，使用标记标签来描述网页第 15 页HTML标签HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签第 16 页HTML文档HTML 文档包含 HTML 标签和纯文本HTML 文档也被称为网页Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容第 17 页例子解释 与 之间的文本描述网页 与 之间的文本是可见的页面内容 与 之间的文本被显示为标题 与 之间的文本被显示为段落第 18 页

7、例子解释运行结果：第 19 页HTML5新增特性新的文档类型 (New Doctype)脚本和链接无需type 语义Header和Footerinput新增了部分属性Audio 支持Video 支持Progress 进度条Canvas标签第 20 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 21 页CSS基础CSS 指层叠样式表 (Cascading Style Sheets)层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。解决了内容与表现分离的问题，提高

8、了工作效率。第 22 页CSS语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector declaration1; declaration2; . declarationN 下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。第 23 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 24 页 JavaScript基础JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

9、它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。第 25 页JavaScript常用功能写入 HTML 输出document.write(“Hello World！);对事件作出反应点击这里改变 HTML 内容x=document.getElementById(demo) /查找元素x.innerHTML=Hello JavaScript; /改变内容第 26 页JavaScript常用功能改变 HTML 样式x=document.getElementById(demo) /找到元素x.style

10、.color=#ff0000; /改变样式改变 HTML 图像element=document.getElementById(myimage) /找到元素element.src=/i/eg_bulboff.gif; /改变图像验证输入if isNaN(x) alert(Not Numeric);第 27 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 28 页jQuery基础JQuery是一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器

11、。核心理念是write less, do more(写得更少,做得更多)第 29 页jQuery语法Query 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 素jQuery 的 action() 执行对元素的操作示例$(p).hide() /隐藏所有 元素第 30 页jQuery事件函数事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 $(button).click(function()

12、 $(p).hide(); );第 31 页目录HTML5简介开发移动应用程序的三种方式HTML5使用上的优势HTML基础和HTML5新增特性CSS基础JavaScript基础jQuery基础实例:移动审批第 32 页实例：移动审批恒大集团移动审批管理系统，将恒大目前已基于SAP平台实现的业务审批流拓展到移动端。该移动审批系统可支持用户可以不受时间、地点限制进行业务审批，大幅度提高业务流程的审批操作体验和流程推进效率。第 33 页移动审批框架介绍 客户端是采取开源LightApp框架，这个app内嵌浏览器，通过解释HTML5资源代码来实现具体的页面和功能。 Java后台程序是基本建乔公司产品XMAS来开发。XMAS: 建乔无线的移动信息化解决方案的统称第 34 页移动审批资源目录结构第 35 页 谢谢大家！谢谢大家！