《(1.1)--Web前端攻城狮.pdf》由会员分享,可在线阅读,更多相关《(1.1)--Web前端攻城狮.pdf(53页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、Web 前端概述录01Web 前端简史02Web 前端技术03开发环境和具互联的诞互联的诞1960sARPA Net 建互联的诞1960sARPA Net 建1983TCP/IP 开始使互联的诞1960sARPA Net 建1983TCP/IP 开始使1983DNS 系统诞互联的诞1960sARPA Net 建1983TCP/IP 开始使1983DNS 系统诞1989TimBerners-Lee 发明万维(WWW)万维 World Wide Web服务器浏览器万维 World Wide Web服务器浏览器HTTP 请求万维 World Wide Web服务器浏览器HTTP 请求HTMLTim
2、Berners-Lee提出 World Wide Web发明 HTML 语发表 HTTP 协议发明了 URL实现了第个 Web Server实现了第个浏览器世界上第个站HTMLWorld Wide Web?h1The WorldWideWeb(W3)is a wide?area hypermedia information retrieval initiative aiming to give universal access to a largeuniverse of documents.?p Whats out there?a?dt Pointers to the worlds onlin
3、e information,subjects,W3 servers,etc.?dd?dlCSS(1994)p font?size:14px;line?height:1.8;color:#333366;margin:1em 0;JavaScript(1995)function onSubmit()var userName=document.getElementById(username)var password=document.getElementById(password)if(!userName?!password)alert(请填写户名和密码)return false return tr
4、ue?script前端程师CodeSandboxVue 组件化+Vuex 状态管理webzhao91800Edit SandboxFilessrccomponentsstoreTodo.vuemain.jsstaticindex.htmlpackage.jsonDependenciesvue2.5.2vuex3.0.1main.jshttps:/9l448mr06w.csb.app/Console2Problems0123456789101112importVuefromvueimportTodofrom./Todoimportstorefrom./store/*eslint-disablen
5、o-new*/newVue(el:#app,store,components:Todo,template:)Open Sandboxhttps:/codesandbox.io/embed/9l448mr06wityWe are currently accepting adventurous VR clients.Reach us at .A virtual NYC snow globe.Bust out your Google Cardboard and take a ride around the city.STARThttps:/ 机交互问题跨终端PC/移动浏览器客户端VR/AR 等Web
6、 技术栈Web 前端技术前端技术栈HTML(内容)前端技术栈HTML(内容)CSS(样式)前端技术栈HTML(内容)CSS(样式)JavaScript(为)前端技术栈HTML(内容)CSS(样式)JavaScript(为)服务器端HTTP 协议前端技术栈HTML(内容)CSS(样式)JavaScript(为)前端服务器端HTTP 协议前端技术栈前端应该关注哪些功能前端应该关注哪些功能美观前端应该关注哪些功能障碍美观前端应该关注哪些功能障碍安全美观前端应该关注哪些功能性能障碍安全美观前端应该关注哪些功能性能障碍安全兼容美观前端应该关注哪些功能性能障碍安全兼容美观体验前端应该关注哪些前端技能语业标
7、准框架编程思想兼容性交互/设计通技能团队协作性能安全性前端程调试Git/SVN编码规范档管理XSSCSRF加密解密编解码优化规则开发者具浏览器原理npmwebpackpostcss浏览器调试具Fiddler沟通学习我管理DOMES2015HTTPJSONXML.React.jsAngular.jsjQueryVue.jslodashIE 浏览器CSS3 新特性HTML5 新特性ES2015移动端版本HTMLCSSJavaScriptPHP函数式编程向对象设计模式前端的边界?前端的边界?前端的边界?前端的边界?前端的边界?前端的边界?前端的边界?WEBASSEMBLY前端开发环境编辑器VS CodeAtomVimWebStorm浏览器IE/EdgeChromeFirefoxSafari浏览器架构浏览器渲染引擎JavaScript引擎Internet ExplorerTridentJScriptEdgeEdgeHTMLChakraFirefoxGeckoSpiderMonkeyChromeBlinkV8SafariWebkitNitro浏览器引擎调试具总结Tim Berners-Lee 发明万维互联发展催 Web 前端程师出现前端程师解决基于GUI 的机交互问题HTML、CSS、JavaScript 和 HTTP 是前端基础搭建前端开发环境常容易谢谢!
限制150内