1 / 18

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

Hybrid 应用开发 —— 前端技术介绍. 刘权 l00280438. 应用类型介绍. Native 应用 QQ Espace Web 应用 Taobao Hi3ms. 应用类型介绍. Hybrid 应用 介于 Native 和 web 之间的一种应用 拥有二者共同优势. Hybird 应用开发. 壳 用来加载 web 内容 用来适配不同的硬件 更好的本地性能 Web 内容 应用的真正功能. Hybird 应用开发. 定制浏览器外壳 + 内容 网站. 自学习内容. Web 内容的技术开发介绍 HTML5 ——web 上呈现的内容

lorin
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

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

  9. 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>

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

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

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

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

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

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

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

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

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

More Related