[互联网]从零开始学写Web App.ppt

从零开始，Web App开发实战 施烜(shi xuan) / Sam SHI 飞盒培训技术总监 适合听众 A 零基础 知道学习路线图 B 有少许HTML、CSS、JavaScript基础 了解基本工具构成 C 中等水平工程师 借鉴一些编程经验 内行看门道 人人都是程序员 没有教不会的学生，只有不会教的老师 希望大家给我反馈，提高我的教学水平 /webappsam 专职HTML5教学 在线教学平台开发 从事股票应用网站开发7年 什么是Web App? Web App 是运行在浏览器里应用软件 Web App 用JavaScript和HTML语言开发 Web App 流行的原因 浏览器无处不在 不必安装，自动升级 各个平台通用 Web App 成功运用的领域 网页游戏 webmail Web App 学习内容 基本功 HTML CSS JavaScript Canvas 基本结构 HTML头 初始化 模块定义 节点层次 Resize Receive Event 启动 工具库 浏览器判断 Dom Event Animate Ajax Web App 学习方法 速成法 分段记忆基本功内容 不求甚解，只求在浏览器显示结果 能给别人100%手写演示，一气哈成是最好！ 达成之前，不看其他资料，专注用工 少而精，只精通最少的技能，好过面面俱浅到 学习工具 Notepad++ Firefox，附加firebug组件 Web App 基本功—HTML(1) Web App的显示层次结构靠div和table标签 div确立大体布局 table在局部细节和自适应上非常理想 Web App的图形靠img和canvas标签 不规则图形用img 规则或者简单图形用canvas生成 除了这20多个标签，其他几乎从来不用 Web App 基本功—HTML(1) !DOCTYPE html html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 / /head body div divHello HTML5!/div img src=logo.png width=256 /div buttonI belive I can fly/button /body /html 演示 Web App 基本功—HTML(2) input type=text value=请输入...br input type=checkboxApple input type=checkbox checkedTencent input type=checkboxMicrosoftbr input type=radio name=a checkedbaidu input type=radio name=agooglebr select optionhtml/option option checkedcss/option optionjavascript/option /select 演示 Web App 基本功—HTML(3) table width=500 height=400 border=1 cellpadding=10 cellspacing=0 tr td height=00table/td td width=50%这个3行2列的表格就是/td /tr tr td align=centertr/td td valign=top行标记/td /tr tr td title=第一列td/td td onclick=alert(this.innerHTML)列标记/td /tr /table 演示 Web App 基本功—HTML(4) input type=text required / input type=email value=some@ / input type=date min=2010-08-14 max=2012-08-18 value=2012-08-18/ input type=range min=0 max=50 value=10 / input type=search results=10 placeholder=Search... / input type=tel placeholder=(555) 555-5555 pattern=^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$ / input type=color placeholder=e.g. #bbbbbb / input type=number step=1 min=-5