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