从零开始学写Web App-PPT课件

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

演示
Web App 基本功—HTML(5)
<div> audio<br> <audio id="audio-clip" width="670" controls> <source src=“music.mp3" type="audio/mpeg" /> <source src=“music.ogg" type="audio/ogg" /> </audio> </div> <div> <br>video<br> <video width="390" id="clip" autoplay controls> <source src="chrome.webm" type='video/webm' /> <source src="chrome.mp4" type='video/mp4' /> </video> </div><br> iframe<br> <iframe src="m.stockstar" width="400" height="400“></iframe>
<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" max="10" value="0" />
演示
Web App 基本功—HTML(4)
<input type="text" required /> <input type="email" value="someemail" /> <input type="date" min="2019-08-14" max="2019-08-18" value="2019-08-18"/> <input type="range" min="0" max="50" value="10" /> <input type="search" results="10" placeholder="Search..." />
40882080qq weibo/webappsam
• 专职HTML5教学 • 在线教学平台开发 • 从事股票应用网站开发7年
什么是Web App?
• Web App 是运行在浏览器里应用软件 • Web App 用JavaScript和HTML语言开发 • Web App 流行的原因
– 浏览器无处不在 – 不必安装，自动升级 – 各个平台通用
• Web App 成功运用的领域
– 网页游戏 – webmail
Web App 学习内容
基本功 • HTML • CSS • JavaScript • Canvas
工具库 • 浏览器判断 • Dom • Event • Animate • Ajax
基本结构 • HTML头 • 初始化 • 模块定义 • 节点层次 • Resize • Receive • Event • 启动
wenku.baidu.com
Web App 学习方法
• 速成法
– 分段记忆基本功内容 – 不求甚解，只求在浏览器显示结果 – 能给别人100%手写演示，一气哈成是最好！ – 达成之前，不看其他资料，专注用工 – 少而精，只精通最少的技能，好过面面俱浅到
• 学习工具
– Notepad++ – Firefox，附加firebug组件
从零开始，Web App开发实战
施烜(shi xuan) / Sam SHI
飞盒培训freebox技术总监
适合听众
A 零基础 • 知道学习路线图 B 有少许HTML、CSS、JavaScript基础 • 了解基本工具构成 C 中等水平工程师 • 借鉴一些编程经验 • 内行看门道
人人都是程序员
• 没有教不会的学生，只有不会教的老师 • 希望大家给我反馈，提高我的教学水平
<select> <option>html</option> <option checked>css</option> <option>javascript</option> </select>
演示
Web App 基本功—HTML(3)
<table width="500" height="400" border="1" cellpadding="10" cellspacing="0"> <tr> <td height="00">table</td> <td width="50%">这个3行2列的表格就是</td> </tr> <tr> <td align="center">tr</td> <td valign="top">行标记</td> </tr> <tr> <td title="第一列">td</td> <td onclick="alert(this.innerHTML)">列标记</td> </tr> </table>
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> <div>Hello HTML5!</div> <img src="logo.png" width="256"> </div> <button>I belive I can fly</button> </body> 演示 </html>
Web App 基本功—HTML(2)
<input type="text" value="请输入..."><br> <input type="checkbox">Apple <input type="checkbox" checked>Tencent <input type="checkbox">Microsoft<br> <input type="radio" name="a" checked> <input type="radio" name="a">google<br>