Hybrid 应用开发 —— 前端技术介绍

Hybrid应用开发——前端技术介绍 刘权 l00280438

应用类型介绍 • Native 应用 • QQ • Espace • Web 应用 • Taobao • Hi3ms

应用类型介绍 • Hybrid应用 • 介于Native和web之间的一种应用 • 拥有二者共同优势

Hybird应用开发 • 壳 • 用来加载web内容 • 用来适配不同的硬件 • 更好的本地性能 • Web内容 • 应用的真正功能

Hybird应用开发 定制浏览器外壳+内容网站

自学习内容 • Web内容的技术开发介绍 • HTML5 ——web上呈现的内容 • JS ——内容与用户的交互 • CSS ——内容的展示效果 • 学习网址 • http://www.w3school.com.cn • 各类技术团队的博客……

HTML5介绍 • 超文本标记语言（HyperText Markup language） • 5，是下一代的HTML • 简单的例子 • http://www.w3school.com.cn/tiy/t.asp?f=html5_video_dom

HTML5基本结构 <!DOCTYPE html> ——文件抬头，文件类型 <html> ——html文件最外层标签 <body> ——页面内容标签 This is the content ——页面的内容 </body> ——内容的结束标签 </html> ——最外层的结束标签 • 重看例子： http://www.w3school.com.cn/tiy/t.asp?f=html5_video_dom

HTML5实例学习 • 写一个简单的加法计算界面 • <!DOCTYPE html> • <html> • <body> • <input type="text" id="a"></input> • + • <input type="text" id="b"></input> • = • <input type="text" id="s" disabled="disabled"></input> • <br></br> • <input type="button" id="btn" value="calculate"></input> • </body> • </html>

自学习内容 • Web内容的技术开发介绍 • HTML5 ——web上呈现的内容 • JS——内容与用户的交互 • CSS ——内容的展示效果 • 学习网址 • http://www.w3school.com.cn • 各类技术团队的博客……

JS介绍 • Javascript • 基本只属于网络的脚本语言 • 必须出现在<script></script>标签对中间 • 一个简单的例子 • http://www.w3school.com.cn/tiy/t.asp?f=jseg_text

JS语法介绍 • 变量定义——弱类型 • Var基本搞定 • 流程控制 • If，while，for。。。 • 代码块定义 • 类 • 函数 • 继续完善加法程序

自学习内容 • Web内容的技术开发介绍 • HTML5 ——web上呈现的内容 • JS——内容与用户的交互 • CSS——内容的展示效果 • 学习网址 • http://www.w3school.com.cn • 各类技术团队的博客……

CSS介绍 • 层叠样式表(Cascading Style Sheets) • 用于表现HTML等文件样式的计算机语言 • 一个炫酷的按钮演示

CSS 简单学习 • 选择器——选择需要改变样式的对象 • 根据ID 选择 • 根据Class来进行选择 • …… • 样式设置 • Try • 选择一个按钮，并设置其大小 • 来一个炫酷的效果

会创造之前，先学会抄 • 如何查看别人的代码 • 利用好编辑器

Hybrid应用演示 • 把刚刚之前的加法程序打包成Hybrid程序

总结 • HTML5，CSS，JS为web前端的三剑客，分别为我们提供了内容，样式，交互上的功能。

Hybrid 应用开发 —— 前端技术介绍