1、目录,HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批,HTML5简介,HTML5是HTML(超文本标记语言)的第五次重大修改. HTML5草案的前身名为 Web Applications 1.0，于2004年被提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1月22日公布。 2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本,HTML5简介,HTML5 仍处于完善之中。然而，大部
2、分移动端系统和现代浏览器都已经支持HTML5 。 移动端系统（如安卓，IOS, WP等）都能支持HTML5 。 支持HTML5的浏览器包括: Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等； 国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器。,目录,HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批
3、,开发移动应用程序的三种方式：原生、HTML5或混合,原生应用程序：原生应用程序是某一个移动平台（比如iOS或安卓）所特有的，使用相应平台支持的开发工具和语言（比如iOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）。原生应用程序看起来（外观）和运行起来（性能）是最佳的。典型的项目例子： 移动验收， 移动形象进度等,移动验收主页面,开发移动应用程序的三种方式：原生、HTML5或混合,HTML5应用程序：HTML5应用程序使用标准的Web技术，通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在
4、多个设备上运行。开发人员使用HTML5和JavaScript能构建功能复杂的应用程序。典型的项目例子： 围住神经猫等社交小游戏,围住神经猫社交小游戏,开发移动应用程序的三种方式：原生、HTML5或混合,混合应用程序：混合应用程序让开发人员可以把HTML5应用程序嵌入到一个原生容器里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体。典型的项目例子： 移动审批,移动审批主页面,目录,HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批,HTML5使用上的优势,更低的开
5、发及维护成本； 使页面变得更小，减少了用户不必要的支出；而且性能更好、耗电量更低。 方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。,目录,HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批,HTML基础,HTML是HyperText Markup Language(超文本标记语言)的缩写，是构成所有所有网页基本结构的文本及标签组合。HTML 不是一种编程语言，而是一种标记语言 (markup language)，使用标记标签来描述
6、网页,HTML标签,HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签,HTML文档,HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容,例子解释, 与 之间的文本描述网页与 之间的文本是可见的页面内容与 之间的文本被显示为标题与 之间的文本被显示为段落,例子解释,运行结果：,HTML5新增特性,新的文档类型 (Ne
7、w Doctype) 脚本和链接无需type 语义Header和Footer input新增了部分属性 Audio 支持 Video 支持 Progress 进度条 Canvas标签,目录,HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批,CSS基础,CSS 指层叠样式表 (Cascading Style Sheets) 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。解决了内容与表现分离的问题，提高了工作效率。,CSS语法,CSS 规则由两个主要的部分构
8、成：选择器，以及一条或多条声明。selector declaration1; declaration2; . declarationN 下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。,目录,HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批,JavaScript基础,JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客
9、户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。,JavaScript常用功能,写入 HTML 输出document.write(“Hello World！“); 对事件作出反应点击这里 改变 HTML 内容x=document.getElementById(“demo“) /查找元素x.innerHTML=“Hello JavaScript“; /改变内容,JavaScript常用功能,改变 HTML 样式x=document.getElementById(“demo“) /找到元素x.style.color=“#ff0000“; /改变样式 改变 HTML 图像
10、element=document.getElementById(myimage) /找到元素element.src=“/i/eg_bulboff.gif“; /改变图像 验证输入if isNaN(x) alert(“Not Numeric“);,目录,HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批,jQuery基础,JQuery是一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。核心理念是write less, do more(写
11、得更少,做得更多),jQuery语法,Query 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action()美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 素jQuery 的 action() 执行对元素的操作 示例$(“p“).hide() /隐藏所有 元素,jQuery事件函数,事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。$(“button“).click(function() $(“p“).hide(); );,目录,HTML5简介
12、开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:移动审批,实例：移动审批,恒大集团移动审批管理系统，将恒大目前已基于SAP平台实现的业务审批流拓展到移动端。该移动审批系统可支持用户可以不受时间、地点限制进行业务审批，大幅度提高业务流程的审批操作体验和流程推进效率。,移动审批框架介绍,客户端是采取开源LightApp框架，这个app内嵌浏览器，通过解释HTML5资源代码来实现具体的页面和功能。Java后台程序是基本建乔公司产品XMAS来开发。XMAS: 建乔无线的移动信息化解决方案的统称,移动审批资源目录结构,谢谢大家！,
