君，已阅读到文档的结尾了呢~~
时变关联系统的鲁棒分散自适应镇定,鲁棒性,鲁棒控制,鲁棒性是什么意思,鲁棒优化,什么是鲁棒性,鲁棒图,鲁棒性测试,网络的鲁棒性,鲁棒模型
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
时变关联系统的鲁棒分散自适应镇定
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口　　Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的，但是这些原则使用的时候还是有很多陷阱在里面，如果我们不能深入理解这些优化原则背后所隐藏的技术原理，很有可能掉进这些陷阱里，最终没有达到最佳的预期效果，今天我在这里分析下浏览器和服务端通讯的一些细节问题，希望通过分析这些细节问题，能给大家一个启迪，能更好的理解这些优化原则背后的隐秘，最终能更好的运用这些原则。
　　网站的通讯技术是构建在http协议上，http协议底层通讯手段使用的是tcp/ip协议，但是tcp通讯协议在建立连接和断开连接这两个动作上是非常消耗通讯性能的，这主要是因为tcp/ip协议在连接建立时候的三次握手机制和断开连接时候的四次挥手机制所致，我们来看看下面的图形：
　　图中中间被红色标记的方块就是tcp/ip协议在建立连接时候需要发送三次报文才能确认连接是否建立成功，中间四个蓝色的方框就是说明tcp/ip协议在断开连接时候要发四次报文才能确定连接最终被断开，而一个具体的http请求和响应也就发送两次报文，这也就说明如果浏览器每次和服务端的交互都要新建和关闭一个tcp/ip连接，那么浏览器和服务器之间就要往返9次报文通讯，而真正用来处理用户请求的报文确只有其中的两次，换句话说这样的一个请求大概会有80%左右的性能都不是用来处理业务需求，等于是损失了80%左右的性能，当然这个比率是9次报文交互的数据大小一致情况下得出的，如果用户业务请求和响应的数据量比较大，那么建立连接和断开连接的性能损失占比会降低，不过就算占比降低了那也是在请求处理本身的时间变的更慢的基础上的降低，要是浏览器和服务器之间的距离特别大，那么多出来的7次报文交换的效率问题就更加严重了，不管怎样，tcp/ip的三次握手机制和四次挥手机制只要发生都会对网络请求效率产生重大影响。
　　为了解决这个报文交互次数过多的问题，http协议本身也发生了改变，那就是http开始采用了长连接，使用长连接后网站只需要开启一个长连接，在用户关闭浏览器关闭之前浏览器里的网页都会复用这个长连接。不过http协议的1.0版本默认是不启用长连接的，所以在使用http协议1.0版本时候我就得手动的打开长连接，这个方法就是在http头里设置Connection: Keep-Alive，而http1.1版本里长连接是默认打开的，所以不需要我们手动的设置，而且时下的浏览器几乎都支持http1.1协议，因此大多时候情况下我们是没有必要手动去打开长连接的。
　　虽然http协议采用长连接后可以减少网站通讯时候三次握手和四次挥手的次数，但是长连接建立起来后需要浏览器和服务器长时间维护，这本身会消耗浏览器和服务器的性能，特别是服务器端长时间维护长连接本身还会损坏服务器处理并发的能力，所以早期浏览器会限制http1.1开启连接的数量，例如ie7这个古董浏览器，它准许http1.1最多开启2个长连接，而http1.0因为默认使用短连接它默认可以开启4个，下面有张图可以说明，如下所示：
　　提升浏览器加载效率的手段除了提升每个连接的传输效率外，其实还有一种方式，这个方式就是使用多个连接进行并行加载，这个等于几个人联合起来一起完成一个任务，那么效率肯定就比一个人高，而页面加载时候很符合使用并发加载的场景，例如我们让页面里的图片并行加载肯定会比一个个加载图片的效率要高多了。回到浏览器支持的连接数的问题，由于早期浏览器在http1.0和http1.1连接数的差异，某些网站例如维基百科这样的网站，它的静态资源特别多，为了充分发挥并发的优势，它将存放这些静态资源的服务器采用http1.0协议，这样就能并行加载更多的静态资源，因为这个并行加载的总体效率提升相比tcp/ip握手和挥手的损失要高的多，不过现在这个手法已经起不到什么作用了，因为新版的浏览器已经把两种版本的http协议支持的连接数调整一致了，因为长连接可以复用链路，因此使用长连接的效率会比非长连接更好。
　　上面连接数也是有一个限制的，这个限制就是必须是在同一个域名下，如果一个页面某些静态资源放在不同域名下面，那么这个做法就可以增加页面里的并发数量，例如我们把一些不是经常变化的静态资源例如图片、外部的css文件以及javascript文件单独放置在一个静态资源服务器上，静态资源服务器对外的url地址和页面本身的url地址不在同一个域名下，那么页面本身的并发加载连接数就会增加一倍，不过这也就意味着浏览器端要维护的长连接数会变得更多，雅虎工程师曾经总结过一个页面里合理的域名数量，那就是两个，这个结论的提出已经过去了好多年了，现在的浏览器和服务器的性能已经今非昔比了，这个跨域数量应该可以增加点，不过我个人认为一个页面的里包含的域名数量还是不要太多，其实如果我们web前端优化手段使用得当，两个不同域名就足够用了，多了价值不大，除非你网站情况是在特殊，例如你看看现在浏览器本身支持的连接数量已经很高了，大部分都是6，ie9甚至还达到了10，翻个倍就有12和20个连接数，我们在翻个倍就是24和40个，这个数字看起来就很恐怖了，一个计算机支持这么多并发，假如你在浏览器还打开个网站也是这么干的，那么浏览器的并发数多的实在太吓人了，我估计到时计算机本身就跑不动了，所以10多个连接数很够用了，你合理发挥下这些连接数网站的性能就能有很大提升，再说了一个网站并发连接数太多那本身就说明了你在减少http个数这个手段没有运用好。
　　回到web前端优化的手段，我们如果把这些手段再仔细分析下就会发现很多手段使用都是在同步请求这个场景下进行了，当然这些手段在合适情况下也能作用于异步加载场景，但是异步加载场景发生并发加载之前需要一个单线程的异步加载，这个单线程的异步加载就和分布式系统里的单点故障有点像了，它很有可能是整个流程的软肋所在，所以合理使用同步请求还能让异步操作性能更加优秀做好准备。上面我讲到浏览器在同一个域名下最多可以开启多少个连接数，但是从事web前端开发的人都能感觉到，我们做页面开发时候其实是没法控制这个连接数的，那么问题来了，这么多连接到底是在什么条件下被开启的呢？这个问题非常有意思的，我们来看下面的瀑布图：
　　从上面的瀑布图我们发现，并行下载的是图片，这个推而广之要是我们看见某些网站的网页做过并发优化处理的设计，我们就会发现并发的资源都是纯静态的资源，那么这个并发连接数跟我们页面的设计存在一个怎样的关系呢？首先我们总结一下页面里的静态资源，在页面里静态资源有html，如果html里面有内联的css代码和javascript代码，那么这些代码也会归属于html，除了html外还有外部的css文件、外部的javascript文件和页面里使用到的图片，那么这些要素怎样会促发页面的并行加载了，换个说法这些要素又是如何促使浏览器同时打开更多连接呢？
　　首先我们要明确一个问题，浏览器之所以可以打开更多连接数，让这么多连接并行执行是有个前提的，这个前提就是这些资源是不是被并行加载的，例如像外部css文件，图片这样的资源，这些资源下载完毕后马上就可以使用，因为它们下载完毕后没有逻辑性问题要处理因此下载完毕后就可以直接拿来使用，因此它们并行加载不会影响到页面的展示问题，这个情况如果碰到javascript就有点麻烦了，外部javascript代码是包含逻辑在里面，而且有些逻辑很有可能会影响页面的展示，所以javascript下载完毕后，浏览器就得马上执行，所以我们就会看到这样的瀑布图，如下图所示：
　　上面的空白区就是浏览器在执行javascript代码所要花费的时间。浏览器开启多少个连接是浏览器自发的行为，这个自发行为主要出于提升浏览器并发下载效率的角度出发的。由于现在浏览器的连接基本都是采取的是http1.1协议，也就是使用的长连接，那么连接建立后这个连接就会长期维护，如果这个长连接是单独的静态资源服务器上的长连接，这个问题倒没什么，如果这个长连接放在主域名下面，问题就来了，主域名在页面初始化加载时候会用来下载html，如果我们为提高并发下载效率，让这个主域名下还放置其他的静态资源，那么可能会导致浏览器和主域名的服务器下维护更多的长连接，而页面后续操作基本是使用ajax来操作的，而ajax往往只会复用其中一个长连接，那么其他多余的长连接等于要空转了，这个空转还需要消耗浏览器和服务器的系统资源，所以我们发现主域名下的请求资源类型一定要认真加以控制，能迁移到单独的静态资源服务器上的一定要进行迁移，尽量让主域名下处理的请求都是包含业务逻辑的请求，这样就可以有效提升系统资源的使用率。这个问题进一步思考下去，我们就会发现如果服务端的业务应用服务器之前放置一个反向代理，反向代理都是使用静态资源服务器，而静态资源服务器对并发的承载能力是远超业务应用服务器，如果主域名下我们不小心放置了太多静态资源，要是后台使用了反向代理，那么反向代理也可以减轻这种长连接所造成的计算资源损失。
　　上面这些场景都是在浏览器同步请求下进行了，那么换到异步请求这个并行加载静态资源的手段还有效吗？回答这个问题前，我们首先要想想异步加载会导致新的静态资源被加载吗？这个当然可能，特别是在前端MVC的场景下，我们会把模板技术放到浏览器端完成，这个时候有些html模板一开始可能会包含在javascript代码里，作为一个变量存储下来，而这个模板里很有可能包含好多新的图片被使用，当ajax从服务端获取数据后，解析了这个模板，然后我们把构造好的模板加入到页面的DOM结构里，浏览器重新渲染页面时候看到很多新图片需要加载，就有可能会开启多个连接进行并行加载来提升资源加载效率，如果碰到通过ajax技术动态加载外部CSS文件，那么这个并行加载情况就会更加突出了，因为css文件里很有可能包含大量的图片资源，如果我们把不变的静态资源都放置在了单独的静态资源服务器，那么这个并行加载就不会在主域名下打开更多长连接，由此可见，将静态资源使用单独的域名的静态资源服务器处理的好处非常之多。
　　现在http2.0协议还在起草之中，http2.0如果落地将会给web前端优化技术产生重大影响，http2.0打算在一个页面里只使用一个tcp/Ip连接，不过http2.0会在这个连接上进行链路复用，也就是让一个连接上也能做到并行操作，让连接的利用率更高，如果http2.0落地后，web前端里那些用于减少http连接数的手段都会失去市场了，因为协议本身就能处理好并发的问题了，到时像外部css文件，外部javascript文件，css sprite技术说不定就要成为历史了。
　　看来本主题又写不完了，下篇接着写吧，今天是元宵节，这里我祝大家节日快乐。
阅读(...) 评论()国外有一篇非常好的Node.js 介绍文章，从原理入手讲解，在这里给大家翻译一下（本人非翻译出身，一些地方结合了点个人理解，有错误欢迎指出）。&br&&br&原文地址 &a href=&///?target=http%3A///node-js-is-the-new-black/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node.js is the New Black&i class=&icon-external&&&/i&&/a&&br&&br&&br&&b&译文如下：&/b&&br&如果你去年注意过技术方面的新闻，我敢说你至少看到node.js不下一两次。那么问题来了“node.js是什么？”。有些人没准会告诉你“这是一种通过JavaScript语言开发web服务端的东西”。如果这种晦涩解释还没把你搞晕，你没准会接着问：“为什么我们要用node.js？”，别人一般会告诉你：node.js有非阻塞，事件驱动I/O等特性，从而让高并发（high concurrency）在的轮询（Polling）和comet构建的应用中成为可能。&br&&br&&p&当你看完这些解释觉得跟看天书一样的时候，你估计也懒得继续问了。不过没事。我这篇文章就是在避开高端术语的同时，帮助你你理解node.js的。&/p&&br&&p&浏览器给网站发请求的过程一直没怎么变过。当浏览器给网站发了请求。服务器收到了请求，然后开始搜寻被请求的资源。如果有需要，服务器还会查询一下数据库，最后把响应结果传回浏览器。不过，在传统的web服务器中（比如Apache），每一个请求都会让服务器创建一个新的进程来处理这个请求。&/p&&br&&p&后来有了Ajax。有了Ajax，我们就不用每次都请求一个完整的新页面了，取而代之的是，每次只请求需要的部分页面信息就可以了。这显然是一个进步。但是比如你要建一个FriendFeed这样的社交网站（类似人人网那样的刷朋友新鲜事的网站），你的好友会随时的推送新的状态，然后你的新鲜事会实时自动刷新。要达成这个需求，我们需要让用户一直与服务器保持一个有效连接。目前最简单的实现方法，就是让用户和服务器之间保持长轮询（long polling）。&/p&&br&&p&HTTP请求不是持续的连接，你请求一次，服务器响应一次，然后就完了。长轮训是一种利用HTTP模拟持续连接的技巧。具体来说，只要页面载入了，不管你需不需要服务器给你响应信息，你都会给服务器发一个Ajax请求。这个请求不同于一般的Ajax请求，服务器不会直接给你返回信息，而是它要等着，直到服务器觉得该给你发信息了，它才会响应。比如，你的好友发了一条新鲜事，服务器就会把这个新鲜事当做响应发给你的浏览器，然后你的浏览器就刷新页面了。浏览器收到响应刷新完之后，再发送一条新的请求给服务器，这个请求依然不会立即被响应。于是就开始重复以上步骤。利用这个方法，可以让浏览器始终保持等待响应的状态。虽然以上过程依然只有非持续的Http参与，但是我们模拟出了一个看似持续的连接状态&/p&&br&&p&我们再看传统的服务器（比如Apache）。每次一个新用户连到你的网站上，你的服务器就得开一个连接。每个连接都需要占一个进程，这些进程大部分时间都是闲着的（比如等着你好友发新鲜事，等好友发完才给用户响应信息。或者等着数据库返回查询结果什么的）。虽然这些进程闲着，但是照样占用内存。这意味着，如果用户连接数的增长到一定规模，你服务器没准就要耗光内存直接瘫了。&/p&&br&&p&这种情况怎么解决？解决方法就是刚才上边说的：&b&非阻塞&/b&和&b&事件驱动&/b&。这些概念在我们谈的这个情景里面其实没那么难理解。你把非阻塞的服务器想象成一个loop循环，这个loop会一直跑下去。一个新请求来了，这个loop就接了这个请求，把这个请求传给其他的进程（比如传给一个搞数据库查询的进程），然后响应一个回调（callback）。完事了这loop就接着跑，接其他的请求。这样下来。服务器就不会像之前那样傻等着数据库返回结果了。&/p&&br&&p&如果数据库把结果返回来了，loop就把结果传回用户的浏览器，接着继续跑。在这种方式下，你的服务器的进程就不会闲着等着。从而在理论上说，同一时刻的数据库查询数量，以及用户的请求数量就没有限制了。服务器只在用户那边有事件发生的时候才响应，这就是&b&事件驱动。&/b&&/p&&br&&p&FriendFeed是用基于Python的&b&非阻塞&/b&框架Tornado (知乎也用了这个框架) 来实现上面说的新鲜事功能的。不过，Node.js就比前者更妙了。Node.js的应用是通过javascript开发的，然后直接在Google的变态V8引擎上跑。用了Node.js，你就不用担心用户端的请求会在服务器里跑了一段能够造成阻塞的代码了。因为javascript本身就是事件驱动的脚本语言。你回想一下，在给前端写javascript的时候，更多时候你都是在搞事件处理和回调函数。javascript本身就是给事件处理量身定制的语言。&/p&&br&&p&Node.js还是处于初期阶段。如果你想开发一个基于Node.js的应用，你应该会需要写一些很底层代码。但是下一代浏览器很快就要采用WebSocket技术了，从而长轮询也会消失。在Web开发里，Node.js这种类型的技术只会变得越来越重要。&/p&&br&&p&以上。&/p&
国外有一篇非常好的Node.js 介绍文章，从原理入手讲解，在这里给大家翻译一下（本人非翻译出身，一些地方结合了点个人理解，有错误欢迎指出）。原文地址 译文如下：如果你去年注意过技术方面的新闻，我敢说你至少看到node.js不下一…
利益相关，负责淘系业务会场支撑系统的架构设计和开发。&br&&br&一句话概括：你们根本不知道现在大促（包括日常、双十一）是多么依赖Node.js。&br&&br&（后文用Node、node、nodejs、NodeJs均指Node.js）&br&&br&&b&Node在阿里内部的当前背景&br&&/b&&br&两年前，你可以说node在阿里内部就像是玩具一样，仅仅被一些了解node前端用在淘系部分业务，进行着“前后端分离”的事情。内部也有一些优秀的node开发者，如淘系代表的苏大师、朴大师，纯技术流代表则有原云OS团队的各种大神。&br&&br&但是从去年开始，天时地利人和，node在阿里内部已经遍地开花。&br&&br&从业务划分上来分析：&br&&ul&&li&支撑业务线上产品：包括淘宝、支付宝、1688，有大量系统已经使用node直接面向终端用户&br&&/li&&li&支撑内部日常工作的内部在线系统：各种内部工具系统，这块本来就是适合用node来敏捷开发的&br&&/li&&li&本地开发工具：阿里体系内各BU都有完整的toolchain，尤其是前端团队，用脚趾头想都是用node实现的&br&&/li&&/ul&&br&从技术架构上来分析，有两种形态：&br&&ul&&li&所谓的“前后端分离”：目前在基础产品线已经比较流行了，未来还会继续推广&br&&/li&&li&全栈应用：目前利用node完成所有业务逻辑的系统在阿里内的确不多，但其原因并不是node不够稳定（后面会继续分析）。但是随着组织架构的进化、对前端岗位职业规划的优化，完全使用node开发的关键应用会越来越多&br&&/li&&/ul&&br&&b&大促相关&/b&&br&&br&扯了这么多，回到问题本身。只说一个最直接的，大家今年访问到的所有www域页面（包括首页、频道、会场等）全部是一个全栈node应用支撑的。相比以往大促使用的技术方案，已经被证明的优势如下：&br&&ul&&li&节省了巨大的服务器资源&br&&/li&&li&提供页面安全性、稳定性&br&&/li&&li&对业务个性化需求的支持更好&br&&/li&&/ul&&br&（括号1：具体实现细节只能憋着不说……）&br&（括号2：评论有问技术细节的。只能简单说。前端技术：以前cdn+php+rsync，现在cdn+node+xtemplate +redis+oss；后端：以前java，现在node+java，本财年内会全部全部node。前端部分以前QPS低的可怕，XSS数量感人，整个体系没人敢去扩展。）&br&&br&表现？我们之前是出过一次严重故障，后果大家都可以猜到了。但是，正式那次故障，让PE体系和老板们知道了，原来我们的这么多页面都是node支撑的。&br&&br&大促当天，我们的系统没有出现过任何投诉，来自运营、前端的答疑竟然比日常还少。系统各项指标正常，符合之前的预期。大家最后都是在买买买。&br&&br&而之前提到的其它node应用，都不同程度上直接或间接的支撑了大促。&br&&br&&b&node应用对比java应用的表现？&/b&&br&&br&题主的问题，似乎我已经回答完毕了。但是我自己在扩展一下吧。那些质疑node的人，也多半会不由自主的把node和java进行对比。&br&&br&目前java仍然是阿里的根基，基础产品线（交易、detail、购物车等）目前看不到迁移到别的语言的可能。因为实在太稳定了，相关的容灾方案也跑了这么多年。没有明显的收益，人家为何要换技术？&br&&br&从已经官方公布的本次支付数据来看，峰值8.59万每秒。位于上游的应用，是什么数字？我这里只能憋着不能讲。面对如此巨大的TPS，不是说JVM多牛逼就可以解决的。这里主要有三方面：&br&&br&&ul&&li&基础设施：应用监控与日志、流量分配、流量降级、企业级中间件等，都需要语言框架级别的配套设施，这些node都没有。虽然朴大师主导的alinode已经开始beta了，虽然内部也有一些node中间团队（例如支付宝的苏千大师出品的各种东西），但和java比起来，还相差甚远。&br&&/li&&li&生态促进：这是比第一条更要命的。如果说稳定业务已经长期用java，不更换技术是正常的。那么新业务的开发，大家发现上下游全是java应用，那么就开始纠结自己为何要不走寻常路了。现在阿里内不的全栈node业务都没有关联性，不如java应用拥有如此强大的关系网。这一点也决定了，这个java开发即使转岗，也是使用的同一套技术和框架，对接类似的配套业务。&br&&/li&&li&人才储备：java发展了多年，有众多的研究员级别的大神为java体系撑腰，并直接参与java和jvm的开发。反观node体系，阿里内部并无一个能全方位托底之人（考虑复杂架构设计、性能与稳定性分析、运维等各角度）。node本身的contributor名单中，目前也还为有阿里的人（据说马上有）。&/li&&/ul&&br&这些差距，毫不夸张的说，需要5年甚至10年的追赶。就现在的状况，就算老板让我去用node重写一些交易业务，我也不敢去做。&br&&br&所以，目前核心的交易链路，是没有任何全栈node应用的。node在这块的表现自然没法评价。硬要评价，也是“无表现”。&br&&br&&b&总结&/b&&br&&br&node的应用场景在阿里内部还没有完全铺开。node社区本身已经进入了指数期，剩下的是我们node开发在自己企业内部进行落地。&br&&br&但是在其已经应用的领域，其表现是非常好的。&br&&br&PS &br&最后软文一把，希望对node感兴趣的Javascript开发、C/C++、Java开发加入我们团队，探索node在淘系业务的未来。&br&咨询邮箱： long.qul@&br&团队博客：&a href=&///?target=http%3A//taobaofed.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Taobao FED | 淘宝前端团队&i class=&icon-external&&&/i&&/a&
利益相关，负责淘系业务会场支撑系统的架构设计和开发。一句话概括：你们根本不知道现在大促（包括日常、双十一）是多么依赖Node.js。（后文用Node、node、nodejs、NodeJs均指Node.js）Node在阿里内部的当前背景两年前，你可以说node在阿里内部就像是玩具一…
&p&// 应评论区朋友的要求再加一个 Form 相关的内容&/p&&br&&p&Form&/p&&ol&&li&可完成的特效复杂程度：高，Form 的操作和效果与 QC 基本类似，也是基于 Path 的实现方法，但是目前由于还比较新，Path 暂时还没有 QC 全面，也还有一些效果实现起来比较麻烦。不过被 Google 收购了相信很快会有新的更新。&/li&&li&是否支持鼠标及键盘动作（单击，双击，右键单击，鼠标拖动，获得焦点，滑轮滚动）：目前版本只能在 iOS 设备上投射，所以 Mac 上的操作目前都不能支持，不过据说下个版本会增加这个功能。&/li&&li&是否支持手势操作：支持，在真机上支持你所需要的所有手势操作。&/li&&li&特效是否可以和用户互动：可以，高模拟真·App&/li&&li&是否支持在线WEB演示：不支持，只能以.form 文档在 Mac OS 上传播。&/li&&li&是否支持手机真机演示：支持，且目前版本只能在真机上演示，只支持 iOS 设备，但是我觉得既然 Google 收购了，Android 设备的支持也只是时间问题。&/li&&li&能否跨平台（Android、iOS、WP）：目前只支持 iOS 设备。&/li&&li&学习周期长短：与 Quartz Composer 类似，学习曲线相对陡峭，我写了一些简单的教程可以参考（&a href=&///?target=http%3A///p/cceb& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&动效软件 Form 教程：概览与基础 patch 介绍&i class=&icon-external&&&/i&&/a&）。&/li&&li&开发时间成本：中等，依然只适合展示某些特定的效果，做完整原型不太方便。&/li&&li&开发后是否可以复用：目前不能复用，不知道 Google 会不会有新的功能添加。&/li&&/ol&&br&//之前的答案&br&&br&&p&&b&正好全部用过，一个一个来对比，若回答有误还请指正。&/b&&/p&&p&Quartz Composer 、Axure、Framer、HTML5、JS&br&&/p&&br&&p&Quartz Composer&br&&/p&&ol&&li&&b&可完成的特效复杂程度：&/b&&b&高，可以实现各种切换转场、弹性效果、时间轴等特效，Facebook Home 就是使用其设计的，动效完成度可见一斑。&/b&&/li&&li&&b&是否支持鼠标及键盘动作&/b&（单击，双击，右键单击，鼠标拖动，获得焦点，滑轮滚动）&b&：只支持鼠标操作，支持单击、拖动、获得焦点和滑轮滚动。&/b&&/li&&li&&b&是否支持手势操作：支持鼠标的拖动、滑动等。&/b&&/li&&li&&b&特效是否可以和用户互动：可以模拟。&/b&&/li&&li&&b&是否支持在线WEB演示：不支持，且只支持 QC 打开文件展示，限制于 Mac 设备&/b&&/li&&li&&b&是否支持手机真机演示：私以为不能。github 上有一个在 iOS 设备上演示的项目，但是我折腾了半天也没有成功。&/b&&/li&&li&&b&能否跨平台（Android、iOS、WP）：能，这其实只是尺寸和分辨率之间的问题，与设计工具无关。&/b&&/li&&li&&b&学习周期长短：较高，学习曲线陡峭，但是不需要编程。&/b&&/li&&li&&b&开发时间成本：中等，不适合开放完整产品原型，适合开发单独某些特效与动作。&/b&&/li&&li&&b&开发后是否可以复用：能供 iOS app 复用。&/b&&br&&/li&&/ol&&br&&br&&p&Axure&br&&/p&&ol&&li&&b&可完成的特效复杂程度：&/b&&b&中，可以实现简单的页面切换，不能用以实现复杂的动态特效。&/b&&/li&&li&&b&是否支持鼠标及键盘动作&/b&（单击，双击，右键单击，鼠标拖动，获得焦点，滑轮滚动）&b&：只支持鼠标操作，支持单机、拖动、获得焦点和滑轮滚动。&/b&&/li&&li&&b&是否支持手势操作：支持鼠标的拖动、滑动等。&/b&&/li&&li&&b&特效是否可以和用户互动：可以模拟。&/b&&/li&&li&&b&是否支持在线WEB演示：支持，生成的 html 文件能够在浏览器中打开。&/b&&/li&&li&&b&是否支持手机真机演示：可以，但是体验较差。（更新：评论区朋友 &a data-hash=&1af7ccf0f5bcdd31c67f& href=&///people/1af7ccf0f5bcdd31c67f& class=&member_mention& data-editable=&true& data-title=&@Ven& data-tip=&p$b$1af7ccf0f5bcdd31c67f& data-hovercard=&p$b$1af7ccf0f5bcdd31c67f&&@Ven&/a& Axure真机演示可以借助这个：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&myAxure | show Axure prototype on mobile devices&i class=&icon-external&&&/i&&/a&，不过只支持到6.5，7还不支持。）&/b&&/li&&li&&b&能否跨平台（Android、iOS、WP）：能，这其实只是尺寸和分辨率之间的问题，与设计工具无关。&/b&&/li&&li&&b&学习周期长短：低，上手快。&/b&&/li&&li&&b&开发时间成本：较低，适合用于设计完整的产品原型，但是复杂效果较为无力。&/b&&/li&&li&&b&开发后是否可以复用：产生的 html 文件可以供 web 项目或支持 web 开发的移动项目复用。&/b&&/li&&/ol&&p&Framer&br&&/p&&ol&&li&&b&可完成的特效复杂程度：&/b&&b&高，基于 javascript 的 coffeescript 几乎可以实现所有你想得到的特效。&/b&&/li&&li&&b&是否支持鼠标及键盘动作&/b&（单击，双击，右键单击，鼠标拖动，获得焦点，滑轮滚动）&b&：鼠标键盘都支持。&/b&&/li&&li&&b&是否支持手势操作：支持。&/b&&/li&&li&&b&特效是否可以和用户互动：可以模拟。&/b&&/li&&li&&b&是否支持在线WEB演示：支持，生成的 html 文件能够在webkit 引擎的浏览器中打开。&/b&&/li&&li&&b&是否支持手机真机演示：&/b&&b&支持，生成的 html 文件同样能够在webkit 引擎的浏览器中打开。自带的 mirror 功能能够实时修改演示效果。&/b&&/li&&li&&b&能否跨平台（Android、iOS、WP）：能，这其实只是尺寸和分辨率之间的问题，与设计工具无关。&/b&&/li&&li&&b&学习周期长短：高，需要编程。&/b&&/li&&li&&b&开发时间成本：较高，不适合开发完整产品原型，只适合某些特定的效果演示。&/b&&/li&&li&&b&开发后是否可以复用：产生的 html 文件可以供 web 项目或支持 web 开发的移动项目复用。&/b&&/li&&/ol&&br&&br&&p&HTML5、JS一起讲&br&&/p&&ol&&li&&b&可完成的特效复杂程度：&/b&&b&高，基于 web，能够实现几乎所有特效。&/b&&/li&&li&&b&是否支持鼠标及键盘动作&/b&（单击，双击，右键单击，鼠标拖动，获得焦点，滑轮滚动）&b&：鼠标键盘都支持。&/b&&/li&&li&&b&是否支持手势操作：支持。&/b&&/li&&li&&b&特效是否可以和用户互动：可以模拟。&/b&&/li&&li&&b&是否支持在线WEB演示：支持，生成的 html 文件能够在浏览器中打开。&/b&&/li&&li&&b&是否支持手机真机演示：&/b&&b&支持，生成的 html 文件同样能够在移动平台浏览器中打开，但是可能需要做好屏幕尺寸适配。&/b&&/li&&li&&b&能否跨平台（Android、iOS、WP）：能，这其实只是尺寸和分辨率之间的问题，与设计工具无关。&/b&&/li&&li&&b&学习周期长短：高，需要编程，且编译调试对于新手复杂。&/b&&/li&&li&&b&开发时间成本：较高，不适合开发完整产品原型，只适合某些特定的效果演示。&/b&&/li&&li&&b&开发后是否可以复用：产生的 html 文件可以供 web 项目或支持 web 开发的移动项目复用。&/b&&/li&&/ol&
// 应评论区朋友的要求再加一个 Form 相关的内容Form可完成的特效复杂程度：高，Form 的操作和效果与 QC 基本类似，也是基于 Path 的实现方法，但是目前由于还比较新，Path 暂时还没有 QC 全面，也还有一些效果实现起来比较麻烦。不过被 Google 收…
自问自答。自己在知乎上收集了不少前端开发领域的问答，收获不小，但结构比较凌乱，整理了下，头绪也清楚了些。希望对大家也有用处，同时感谢这些问答的作者。&br&===&br&非常感谢 &a data-hash=&b4a17dfeac4& href=&///people/b4a17dfeac4& class=&member_mention& data-editable=&true& data-title=&@何沁& data-hovercard=&p$b$b4a17dfeac4&&@何沁&/a&童鞋的重新排版。&br&===&br&更新于日。&br&另外，整理了一下个人的chrome收藏夹，对前端有兴趣的童鞋可以关注，&a href=&///?target=https%3A///SunLn/SunLn-F2E-Bookmarks& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SunLn的前端收藏夹&i class=&icon-external&&&/i&&/a&&br&===&br&&br&前端资源：&br&&ul&&li&&a class=&internal& href=&/question/&&关于 Javascript 学习，有哪些好的博客或者网站推荐？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&有哪些不错的前端开发博客？ - JavaScript&/a&&/li&&li&&a class=&internal& href=&/question/&&前端业内有哪些交流氛围比较好群/论坛/社区？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&想深入了解一下 jQuery 的源码，但是觉得学习曲线有点陡峭，有没什么好的方法或者学习资源推荐？ - JavaScript&/a&&/li&&/ul&&p&前端大牛：&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&知乎上有哪些 JavaScript 高手？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&国内有哪些前端开发牛人？ - JavaScript&/a&&/li&&li&&a href=&/question/& class=&internal&&中文圈，谁是最好的 JavaScript 程序员？ - 编程&/a&&/li&&/ul&&p&前端书籍：&br&&/p&&ul&&li&&a href=&/question/& class=&internal&&有哪些关于前端开发技术（HTML、CSS 和 JavaScript 等）的值得推荐的书籍？ - 书籍推荐&/a&&/li&&li&&a href=&/question/& class=&internal&&关于 CSS 设计，有什么书比较好？ - 前端开发&/a&&/li&&/ul&&p&技术细节：&/p&&p&　JavaScript 方面&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&JavaScript 中应该用 &==& 还是 &===&？ - JavaScript&/a&&/li&&li&&a href=&/question/& class=&internal&&JavaScript 中，num = num || 1 这种写法有哪些优缺点？ - JavaScript&/a&&/li&&li&&a href=&/question/& class=&internal&&使用 Node.js 的优势和劣势都有哪些？ - Web 开发&/a&&/li&&li&&a href=&/question/& class=&internal&&LABjs、RequireJS、SeaJS 哪个最好用？为什么？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&一个 ul 里有若干 li，点击 li 时能方便地知道这是 ul 中的第几个 li 吗？ - JavaScript&/a&&/li&&li&&a class=&internal& href=&/question/&&怎样在各个浏览器下使用 JavaScript 或者 CSS 控制去除 input 和 button 的虚线？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&JavaScript 语句后应该加分号么？ - 编程&/a&&/li&&li&&a class=&internal& href=&/question/&&GitHub 为什么讨人喜欢？ - 开源社区&/a&&/li&&li&&a class=&internal& href=&/question/&&A && B || C 的效率比 A ? B : C 更高吗？ - 编程&/a&&/li&&li&&a class=&internal& href=&/question/&&有哪些 JS 调试技巧？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&JavaScript 里的闭包是什么？应用场景有哪些？ - 编程语言&/a&&/li&&li&&a class=&internal& href=&/question/&&JavaScript 中 undefined 与 undeclared 之间的区别是什么？ - 编程语言&/a&&/li&&li&&a class=&internal& href=&/question/&&JavaScript中圆括号() 和 方括号[] 的特殊用法疑问？ - JavaScript&/a&&/li&&li&&a class=&internal& href=&/question/&&国内有哪些靠谱的 Javascript 库 CDN可用？ - JavaScript&/a&&/li&&li&&a class=&internal& href=&/question/&&为什么很多网站在 JavaScript 脚本中都用简单的字母表示变量？ - JavaScript&/a&&/li&&/ul&&p&　HTML 方面&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&.htm 与 .html 两种文件格式（扩展名）的区别在哪里？ - HTML&/a&&/li&&li&&a class=&internal& href=&/question/#&&实现单行文字两端对齐时，使用 & 当作空格和使用 white-space: pre 的原生空格有什么区别？哪个更好一些？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&为什么不能在 EDM 模版中使用 DIV ？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&实现单行文字两端对齐时，使用 & 当作空格和使用 white-space: pre 的原生空格有什么区别？哪个更好一些？ - 前端开发&/a&&/li&&/ul&&p&　CSS 方面&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&命名 CSS 的类或 id 时单词间如何连接？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&如何解决外边距叠加的问题？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&在 CSS 中，用 float 和 position 的区别是什么？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&你如何理解 HTML5 的 section？会在什么场景使用？为什么这些场景使用 section 而不是 div？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&大家对于块级格式化上下文BFC都有哪些疑问?大家的理解又是怎样的？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&有一 li 元素其中有中文和英文，怎么分别设置他们的字体样式呢？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&CSS 中 block-level boxes、containing block、block formatting context 三者之间的区别和联系是怎样的？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&怎样可以很好地保证网页的浏览器兼容性？ - 前端开发&/a&&/li&&/ul&&p&前端工具：&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&写 JavaScript 时IDE 或编辑器的选择有哪些好的推荐？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&Notepad++ 有哪些适用于前端开发的插件？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&用 Dreamweaver 写 CSS 代码很有效率，但为什么还有很多人喜欢用 Notepad++ 之类的工具？ - HTML&/a&&/li&&li&&a class=&internal& href=&/question/&&你觉得在前端开发中值得推荐的常用工具有哪些？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&前端工程师都有用哪些比较靠谱的小工具？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&有哪些工具可以将 CSS 文件中的属性按照一定的顺序进行排列？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&有哪些比较好 CSS 简写（压缩）工具？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&什么是 Twitter Bootstrap？ - 前端开发&/a&&/li&&/ul&Angular：&br&&ul&&li&&a href=&/question/& class=&internal&&AngularJS 有没有缺点？MVVM 框架中有比它更好的吗？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&移动网站用backbone还是angular? - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&如何看2015年1月Peter-Paul Koch对Angular的看法？ - 程序员&/a&&/li&&li&&a href=&/question/& class=&internal&&关于 AngularJS 框架的使用有哪些经验值得分享？ - 知乎&/a&&/li&&li&&a href=&/question/& class=&internal&&如何看待Google和Microsoft在Angular JS 2 和 TypeScript上的合作？ - AngularJS&/a&&/li&&li&&a href=&/question/& class=&internal&&AngularJS 于前端开发有什么作用，对比其它框架有何优点？ - AngularJS&/a&&/li&&/ul&&p&前端学习：&/p&&p&　入门&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&若想学 HTML，应从哪里入手？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&零基础开始学 Web 前端开发，有什么建议吗？ - Web 开发&/a&&/li&&li&&a href=&/question/& class=&internal&&零基础的网站开发初学者应如何系统地学习？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&如何帮助前端新人入门和提高？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&如何循序渐进有效学习 JavaScript？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&面对变化莫测的 CSS，我该怎么办？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&非计算机专业，半路出家，以前做 UI ，现在想改前端，学习 JS 过程中遇到瓶颈了，如何突破？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&一名合格的前端工程师的知识结构是怎样的？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&你是如何成为前端工程师的？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&想成为前端工程师，那么在大学期间应该如何规划？ - 职业规划&/a&&br&&/li&&li&&a href=&/question/& class=&internal&&前端工程师应该对 HTTP 了解到什么程度？从哪些途径去熟悉更好？ - 前端开发&/a&&br&&/li&&/ul&&p&　高级&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&怎样成长为一个优秀的 Web 前端开发工程师？ - 前端工程师&/a&&/li&&li&&a class=&internal& href=&/question/&&w3.org 结构复杂，信息量大，新人从哪里入手比较好？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&怎么样才算是精通 JavaScript？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&前端妹子跟我抱怨她们的页面加载很慢的时候，如何在她面前优雅地装逼？ - 信息技术（IT）&/a&&br&&/li&&li&&a href=&/question/& class=&internal&&前端大牛们都学过哪些东西？ - 调查类问题&/a&&/li&&/ul&&p&前端就业：&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&好的 Web 前端年薪会有多少？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&Web 前端开发岗位，该选择百度还是腾讯？ - 招聘&/a&&/li&&li&&a class=&internal& href=&/question/&&淘宝 UED 前端、腾讯脚本开发、豆瓣前端开发，应该如何在这几个工作之间选择？ - 淘宝网&/a&&/li&&li&&a href=&/question/& class=&internal&&前端实习offer选择：百度FEX 或 阿里ICBU ？ - 职业规划&/a&&br&&/li&&li&&a class=&internal& href=&/question/&&淘宝 UED 前端团队究竟好不好？值得去吗？ - 淘宝网&/a&&/li&&li&&a href=&/question/& class=&internal&&天猫的前端工程师和团队在行业内处于什么水平？ - 淘宝网&/a&&br&&/li&&li&&a class=&internal& href=&/question/&&只专注于 JavaScript，好就业吗？有发展前景吗？ - 前端工程师&/a&&/li&&li&&a href=&/question/& class=&internal&&月薪10-12k的前端人员应该具备怎样一种技术水平？ - 前端开发&/a&&br&&/li&&li&&a href=&/question/& class=&internal&&你怎么看我在豌豆荚公司的前端面试过程？ - 互联网&/a&&br&&/li&&li&&a href=&/question/& class=&internal&&前端工程师有哪些靠谱的求职途径？ - IT 求职&/a&&br&&/li&&li&&a href=&/question//answer/& class=&internal&&国内的前端团队分布和前景是怎样的？ - 徐飞的回答&/a&&br&&/li&&/ul&&p&前端招聘：&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&如何面试前端工程师？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&为什么前端工程师很难找？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&如何才能招聘到好的 web 前端人才？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&有哪些经典的 Web 前端或者 JavaScript 面试笔试题？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&JavaScript 怎样高效拼接字符串？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&大公司面试前端开发类的职位时，更看重的是什么？ - 前端工程师&/a&&/li&&li&&a href=&/question/& class=&internal&&国内大型互联网公司（如BAT）对于web前端开发方向校招都考些什么？ - 招聘&/a&&br&&/li&&/ul&&p&前端漫谈：&br&&/p&&ul&&li&&a class=&internal& href=&/question/&&前端工程师的价值体现在哪里？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&Web 前端工程师这一职业在未来行业需求和发展怎样？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&如何改善国内前端开发行业的尴尬地位？ - 前端工程师&/a&&/li&&li&&a class=&internal& href=&/question/&&一些人瞧不起 jQuery 的理由是什么？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&Java 和 JavaScript 是雷锋和雷峰塔的区别，这一说法是怎么来的？ - X 的出处&/a&&/li&&li&&a href=&/question/& class=&internal&&Web 前端和后端工程师的具体职责分别是怎样的？ - 程序员&/a&&/li&&li&&a class=&internal& href=&/question/&&前端工程师和网页重构工程师二者有什么区别和联系？ - 前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&做前端开发必需要掌握切图技能吗？ - 前端工程师&/a&&/li&&li&&a class=&internal& href=&/question/&&HTML5 标准分裂会有什么影响？ - 万维网联盟（W3C）&/a&&/li&&li&&a class=&internal& href=&/question/&&jQuery 宣布在未来的版本将不支持 IE6/7/8 是否明智？ - Internet Explorer&/a&&/li&&li&&a href=&/question/& class=&internal&&Java 和 JavaScript 是什么关系？ - 编程语言&/a&&/li&&li&&a href=&/question/& class=&internal&&国内有人或者公司用 LESS 写过 CSS 吗？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&前端工程师，如何更顺畅的和后端工程师合作？ - 程序员&/a&&/li&&li&&a class=&internal& href=&/question/&&为什么很多国内公司不使用 jQuery 等开源 JS 框架（库），而选择自己开发 JavaScript 框架？ - 移动前端开发&/a&&/li&&li&&a class=&internal& href=&/question/&&Douglas Crockford 的《JavaScript 语言精粹》中有哪些观点是有争议的？ - JavaScript&/a&&/li&&li&&a class=&internal& href=&/question/&&为什么有人说前端开发水很深，工作量有时比后台还多？ - 前端工程师&/a&&/li&&li&&a class=&internal& href=&/question/&&如何用通俗易懂的语言解释脚本（script）是什么？ - 前端开发&/a&&/li&&li&&a href=&/question/& class=&internal&&Web 前后端分离的意义大吗？ - 前端开发&/a&&br&&/li&&li&&a href=&/question/& class=&internal&&前端 Leader 是如何带领团队和建设团队文化的？ - 前端开发&/a&&br&&/li&&li&&a href=&/question/& class=&internal&&为什么前端不能一直做？难道要转行？？ - 计算机&/a&&/li&&li&&a href=&/question/& class=&internal&&作为一个前端工程师，是往node方面转，还是往HTML5方面转？ - 前端开发&/a&&/li&&/ul&&br&&br&&br&PS，打个小广告，推广一下个人微信公众号：sunln_404 ，扯淡前端、理财、旅游、生活、运动的个人小角落，时常宕机并404……欢迎关注。
自问自答。自己在知乎上收集了不少前端开发领域的问答，收获不小，但结构比较凌乱，整理了下，头绪也清楚了些。希望对大家也有用处，同时感谢这些问答的作者。===非常感谢 童鞋的重新排版。===更新于日。另外，整理了一下个人的chrome收藏夹…
一个学期前我也和楼主差不多不知道这些都是啥，一个学期之后差不多都弄懂了，来讲讲自己的理解吧 & & 因为接触的时间不是很长，有错误的地方欢迎指正~&br&&br&首先要知道网站访问大概是什么个过程：&br&假设你在浏览器地址栏输入这个问题的地址&br&&div class=&highlight&&&pre&&code class=&language-text&&/question/
&/code&&/pre&&/div&访问过程和下图差不多，浏览器和服务器交流，服务器和数据库交流（有时候数据库就在服务器那台机子上）&br&&br&&img data-rawheight=&591& data-rawwidth=&842& src=&/581ae59a16e_b.jpg& class=&origin_image zh-lightbox-thumb& width=&842& data-original=&/581ae59a16e_r.jpg&&&br&&b&HTML 与 CSS&/b&&br&你家电脑拿到一个 html （就是上图 HTTP 响应的 body 里的内容）之后，就会对它进行解析渲染。HTML 就是一种标记语言。类比一下，大家在论坛上经常会用一些代码来添加富文本内容，举一些栗子：&br&&ul&&li&&div class=&highlight&&&pre&&code class=&language-text&&[img]图片地址[/img]
&/code&&/pre&&/div&
用来贴图&/li&&li&&div class=&highlight&&&pre&&code class=&language-text&&[url]超链接[/url]
&/code&&/pre&&/div&
用来贴地址&/li&&li&&div class=&highlight&&&pre&&code class=&language-text&&[del]呵呵[/del]
&/code&&/pre&&/div&
表示标签里的文字应该被删掉（默认添加删除线效果）&/li&&/ul&这种&b&论坛代码&/b&也是一种标记语言，HTML 的作用就和它差不多。服务器返回给你的html文件里面，写的是一些代码，大概是这样的：&br&&img data-rawheight=&384& data-rawwidth=&511& src=&/def15af96af6_b.jpg& class=&origin_image zh-lightbox-thumb& width=&511& data-original=&/def15af96af6_r.jpg&&浏览器拿到这些代码之后，分析一下给你渲染好页面显示出来，如果不用css，效果是这样的，按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等：&br&&img data-rawheight=&362& data-rawwidth=&330& src=&/8df8c13db4c5_b.jpg& class=&content_image& width=&330&&&br&是不是觉得默认样式有点看瞎狗眼呢……所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS，我们可以用它写一些定义样式的代码，然后在 html 文件里用一个&link&标签把这些规定样式的 CSS 代码与表达内容语义的 HTML 代码关联起来，然后你就能看到一个符合人类正常审美的页面了:&br&&img data-rawheight=&296& data-rawwidth=&662& src=&/09c5fafc7cc4_b.jpg& class=&origin_image zh-lightbox-thumb& width=&662& data-original=&/09c5fafc7cc4_r.jpg&&&br&CSS 代码的格式基本是&br&&div class=&highlight&&&pre&&code class=&language-text&&属性:值
&/code&&/pre&&/div&比如知乎顶上那个蓝色的导航条，它的 CSS 大约是这样的&br&&img data-rawheight=&256& data-rawwidth=&408& src=&/3f351f51aff2be4742b1_b.jpg& class=&content_image& width=&408&&&br&第一个属性对应的代码翻译成人话，就是它的位置（position）应该是不动（fixed）的，浏览器会兢兢业业地去实现这段代码要求实现的效果，
所以你在页面上翻来翻去顶上那个导航条都会死死地黏在窗口顶部不跟着滚动。&br&再拿里面的其他几个属性做栗子解释一下就是：&br&&ul&&li&left 和 top
为零指明这个导航条要紧贴着窗口的左上角&/li&&li&width 和 height 指定这个导航条的宽和高&/li&&li&background
指明这个导航条的背景是一种渐变的蓝色&/li&&/ul&浏览器就会根据这些 CSS 代码，“画”出对应的样式。&br&&br&&b&HTML 5 与 XHTML&/b&&br&像人的语言一样，网络上的网页里的 HTML 代码也不一定是标准的，好比有时候你发音不太标准，别人会去猜测你说的到底是什么一样，有些时候前端程序猿不小心写错了 HTML，浏览器也会试图猜测他们原来想写的是什么，做对应的渲染，而猜是要有一个常识做依据的。加上有些浏览器支持一些标签，有一些又不支持，以及其他混乱的情况，为了防止大家鸡同鸭讲，我们需要对 HTML 代码里能有什么标签，标签怎么写，标签可以有什么属性这些东西有一定的共识，建立一个通行的标准，HTML5 就是其中一个比较新的标准。这个标准新加了很多可以用的标签和属性，然后各大浏览器也吭哧吭哧按这个标准去实现了很多这些新加的标签和属性，本来前端程序员要写一堆代码去实现的效果，现在浏览器都给你实现好了，只要写两三行，调用一下浏览器给你实现的部分就能搞定，简单愉快，所以很多人都在热情地推广这个标准~（当然新标准也不可能是完美的，总会有一些问题，怕跑题这里按下不表~）&br&&br&至于 XHTML，就是 HTML 的近亲 XML 和 HTML 自己的杂交品种，对语法要求比较严格，并且为了兼容 XML，在语法上与 HTML 有一些不同~&br&&br&&b&JavaScript 与浏览器脚本&/b&&br&有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，没什么动画（其实用 CSS 还是可以有一些动画的，不过这个跑题了），按 F5 才会刷新数据，都 21世纪了，这么呆板单调的网页怎么能展现我大智人种族的创造性口胡！于是我们有了 Javascript（JS） 来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果啦。&br&&br&&img data-rawheight=&274& data-rawwidth=&532& src=&/dcb4e911b7ee1e363213_b.jpg& class=&origin_image zh-lightbox-thumb& width=&532& data-original=&/dcb4e911b7ee1e363213_r.jpg&&&br&浏览器都会帮你实现一些 JS 可以用的工具（函数，对象什么的），你只要写一些 JS 的代码，保存在 xxx.js 里，在 html 文件中用
&script& 关联进来就可以用了，像上图这个效果应该就包括了 &br&&ol&&li&鼠标悬停到标签上时创建一个新的 &div& 小窗口 &br&&/li&&li& 用 JS
向知乎服务器发送一个请求，得到这个小窗口应该显示的数据，放在这个小窗口里（这就是所谓的AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分~）&/li&&/ol&浏览器拿到这样的代码，就会解析并实现出相应的效果，楼主问的浏览器脚本，指的就是这样子的代码。其实用来写浏览器脚本的，也不是非得JavaScript 不可，当年还为到底用什么语言写这种代码有过一段战火纷飞的时期，但现在尘埃落定，各大浏览器都默认了：请用
JS 写这些动态效果的代码给我解析~&br&&br&以上就是前端部分的内容，下面简述一下后端的东西吧& &&br&&br&&b&Web Server 和 Web Services&/b&&br&浏览器给服务器发一个请求，服务器不是一看就知道怎么响应的。首先这些请求和响应要有一个通用的写法，也就是要有一个协议，常用的是 HTTP 协议。&br&像最前面的图，服务器的响应写了一个状态码 200 OK ，是 HTTP 协议里约定俗成的一个东西，服务器写 200 OK 在响应里，表示“你请求的这个东西我有”，如果是404 Not Found，就是“你请求的这个东西我这里没有”。&br&HTTP 响应里还包括很多东西，比如 Content-type 表示服务器发过来的文件类型是什么（文本？动画？图片？音频？），这样发过去了人家浏览器好知道怎么展示给用户看。人家服务器怎么知道按协议要写什么东西进去呢，这就是 Web Server 干活的时候了。&br&&br&形象化一下HTTP响应，大概就长这样：&br&&img data-rawheight=&351& data-rawwidth=&284& src=&/73fc01d295c7e015c1d80_b.jpg& class=&content_image& width=&284&&&br&再上个锤子，浏览器和服务器之间请求响应的过程大致是长这样的，右下角的那些东西就是由 Web Server 生成的（服务器脚本可以做一些改动，但这些一般是 Web Server 的份内活）：&br&&img data-rawheight=&349& data-rawwidth=&1364& src=&/2fdad81d11618addfbdf65_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1364& data-original=&/2fdad81d11618addfbdf65_r.jpg&&&br&&br&再比如说很多时候你访问一个网站，浏览器里输的地址并没有写明你请求的文件，比如这个问题的地址是：&div class=&highlight&&&pre&&code class=&language-text&&/question/
&/code&&/pre&&/div&但知乎的服务器其实返回了一个html给你，服务器怎么知道这个地址对应要返回什么样的 html 代码给你的？也是 Web Server 干的活。&br&&br&除了浏览器输地址敲回车这种赤裸裸的访问，客户端与服务器的交互还有很多种，比如：&br&&ul&&li&前面提到的用 JS 完成的 AJAX，有点像浏览器和服务器之间的悄悄话~&/li&&/ul&还有其他应用软件与服务器的交互，比如：&br&&ul&&li&微信、QQ 与腾讯的服务器的交互&/li&&li&网游客户端与网游公司服务器的交互&/li&&li&搜索引擎用来搜集网页信息的程序（爬虫）与各种各样的网站服务器的交互&br&&/li&&li&只要你知道用什么地址访问、怎样访问人家的服务器，并且有相应权限，你也可以自己写一些程序去和他们的服务器交互（比如用&a class=& wrap external& href=&///?target=http%3A///wiki/%25E5%25BE%25AE%25E5%258D%259AAPI& target=&_blank& rel=&nofollow noreferrer&&微博API - 新浪微博API&i class=&icon-external&&&/i&&/a&获取微博，开发第三方应用或者做数据分析）。&/li&&/ul&从这些栗子里可以看出，客户端与服务器的交互的主体、客体、载体是五花八门的：&br&&ul&&li&服务器可以是大型机也可以是个人电脑，只要能跑相应的程序就行&/li&&li&客户端像前面举的栗子里一样，可以是各种软件，而且这些软件不一定运行在个人电脑上，也可以是手机、平板、智能穿戴设备等等&/li&&li&有时候不是传生成好的 HTML 或者其他服务器上已经有的文件，而是传输经过一定逻辑处理后生成的字符串或者其他各种封装好的数据&/li&&/ul&像前面提到的 HTML 需要有一定标准一样，为了防止混乱和鸡同鸭讲，我们又需要先对这些机器需要怎么交互达成一定共识，再让它们进行交流。人与人之间通信，需要先有一种大家都认识的写法（比如简体字/繁体字）和一种彼此都懂的语言（比如普通话/广东话）。要让这些形形色色的机器能够通过网络进行交互，我们就需要指明一种协议（比如 HTTP/HTTPS）和一种数据封装格式（比如 HTML/XML），Web Server 提供的 Web Service，指的就是这种协议+格式的交流体系。不过 Web Service 的生态系统和 HTML 的标准不一样，用户可以选择的协议和数据封装格式更多，普通的网站访问用的 HTTP + HTML 只是其中一种，一些封闭系统内的交流还可以自己定义一个协议和格式来用（比如 QQ）。&br&&br&Web Service 传输的数据再经由本地客户端（浏览器、QQ/微信，网游客户端等）的分析渲染，就能够以普通人能够理解的形式展现出来。此外还有一些 Web Service 并不是为普通用户设计的，像前面提到的微博API，是用来给程序猿进行二次开发的~ &br&&br&除了提供 Web Service， Web Server 还会兼顾很多功能，包括提供缓存，平衡负载，这样在访问量比较大的时候能有有条不紊地接客。常见的现成的 Web Server 有开源的 Apache、Nginx和微软的IIS，你也可以用一些工具（比如 Node.js ）自己定制一个。因为 Web Server 需要比较好的性能，所以投产时用的 Web Server 通常是C/C++/Java写的，但是其实很多语言都可以写，而且配合上语言底层的优化和好的模型，其他语言写的 Web Server也可以有不错的表现。&br&&br&&b&PHP ，服务器脚本，Web Framework&/b&&br&开头那张图里服务器接到请求之后可以给访客发送对应的文件，但21世纪的服务器怎么可能只会“接请求-发文件”这么弱智的一招呢，人家还可以处理你上传来的文件的！还可以接受你发过来的各种请求，去操作服务器本地的文件or数据库的！要干这些事，自然服务器那边也少不了要有代码了，这些代码就是服务器脚本。前面说的 Web Service 传输的数据，主要也是由服务器脚本生成，再交由 Web Server ，按照某种协议套好整个响应的格式，返回给客户端的。&br&&br&同一个网址，每个人看到的页面不一定是一样的，比如知乎首页的网址都是&br&&div class=&highlight&&&pre&&code class=&language-text&&/
&/code&&/pre&&/div&但是没登陆和登陆之后看到的东西不一样，登陆之后每个人看到的导航栏的用户信息，关注的动态，都不一样。服务器脚本可以对这些不同的状态，生成不同的页面，交给 Web Server 返回给浏览器。&br&知乎的主页给大家看到的 html 整体来说是差不多的，都有导航栏，左边是关注的动态，右边是广告和边栏，每一块的整体构造大同小异，只是一些地方内容有所区别。服务器脚本就是利用已知的数据，在这些因人而异的地方填入相应的内容，生成给每个人看的页面。&br&比如我的主页，导航栏右边的头像和名字跟别人看到的不一样，就是因为这块地方有一个放图片的&img&标签和一个写名字的&span&标签，服务器脚本在查询本地的数据之后给我返回的页面里&img&的标签填了我头像的图片链接，&span&标签里填了我的名字，给别人的页面就填其他链接、其他名字，这样每个人看到的页面就不一样了。&br&&img data-rawheight=&56& data-rawwidth=&597& src=&/500c9bdd6bf249eec5b084_b.jpg& class=&origin_image zh-lightbox-thumb& width=&597& data-original=&/500c9bdd6bf249eec5b084_r.jpg&&&br&&img data-rawheight=&93& data-rawwidth=&559& src=&/11f27dccc90da76a1ac3c2_b.jpg& class=&origin_image zh-lightbox-thumb& width=&559& data-original=&/11f27dccc90da76a1ac3c2_r.jpg&&&br&PHP 就是一种常见的用来写服务器脚本的语言，其实只要是能拿来写大家传输数据的通用接口（CGI）的语言都可以用来写服务器脚本（也就是说几乎所有编程语言都可以写 = =b），只是因为现成工具的丰富程度和专攻程度不一样，所以有一些语言在写服务器端脚本的时候会比较热门。&br&&br&为了方便，我们在写服务器脚本的时候，通常还会用个同语言写的 Web Framework 来处理各种细节，防御一些常见的攻击，提供跨站认证（比如用已有的微博账号注册其他网站）的接口，利用cookie处理登陆状态和用户设置，生成网页模版之类的。如果你用 C# 或者 Visual Basic 写服务器脚本，就可以用 &a href=&///?target=http%3A//ASP.NET& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ASP.NET&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 这个框架实现这些功能，帮你省点麻烦。不过现在不少人是反过来为了一个好用的 Web Framework 去选择它对应的服务器脚本语言的。&br&&br&&b&一个普通网站访问的过程&/b&&br&简单概括一下，对于我们普通的网站访问，涉及到的技术就是：&br&&ol&&li&用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；&/li&&li&服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；&/li&&li&服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；&/li&&li&Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；&/li&&li&客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；&/li&&li&解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；&/li&&li&浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；&/li&&li&用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；&/li&&li&交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。&/li&&/ol&注意这只是小网站里比较常见的模型，大网站为了解决规模问题还会有很多处理，每个环节都会有一些细微的差异，中间还会使用各种各样的工具减轻服务器的压力，提高效率，方便日常维护~&br&&br&&b&延伸阅读&/b& —— &b&那些看花眼的名词&/b&&br&为了方便调试，很多 Web Framework 会自带一个简单的 Web Server，或者有些 Web Server 会自带一个简单的 Web
Framework ，实际部署到服务器上开放使用的时候为了性能或者安全等多方面的考虑，可以把内置的 Web Server 换成其他的，比如
Apache 或者 Nginx （举个栗子，知乎用的是 Tornado 做 Framework，Server 换成了 Nginx，见&a class=&internal& href=&/question/&&知乎使用了哪些框架和开源库？&/a&）。如果是开源的东西，还可以在遵守开源协议的前提下自己改一下再用~&br&&br&因为后端不像前端已经有 HTML + CSS + JS 这样的既定事实标准，服务器脚本与 Web Framework
的选择很多，所以新手会听到很多眼花缭乱的技术名词的地方多在这里~
举一些栗子，早年常见的服务器端语言有：&br&&ul&&li&开源的 PHP&/li&&li&Sun 公司的 JSP 中使用的 Java&/li&&li&微软的 ASP 中使用的 VBScript&/li&&/ul&现在在这方面的应用热起来的语言有&br&&ul&&li& Python，对应常见的 Framework 包括知乎和Quora有用到的 Tornado（其实是自带 Framework 的 Web Server），社区很成熟的 Django （用户包括 Instagram、Pinterest）等&/li&&li&Ruby，一般都用 Rails 这个 Framework，用户包括 Github、早期的 Twitter 等&br&&/li&&li&逆天的 JavaScript，有了 Node.js 这个平台，Web Server、服务器脚本和浏览器脚本全都可以用
JavaScript 来写……Node.js上最常用的 Framework是Express&br&&/li&&li&微软家的则跟着 &a href=&///?target=http%3A//ASP.NET& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ASP.NET&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 转移到了C# 或者 Visual Basic&/li&&li&Erlang，擅长大规模的并发，不少游戏公司拿来写服务器，靠几十个工程师支撑几亿用户的WhatsApp也是用的这个~&/li&&/ul&几种常见的架构包括：&br&&ul&&li&LAMP = Linux + Apache + MySQL + PHP（P还可能是Python或Perl。有时候L会改成W=Windows。），也就是服务器上的操作系统是 Linux，Web Server 用 Apache，数据库用 MySQL，服务器脚本用 PHP，这些都是开源技术，网站起步时用起来的成本会比较低，所以是普通网站里非常常见的架构（虽然对于发展得很大的网站会遇到很多瓶颈），Facebook就是这种，淘宝也曾经是。&/li&&li&J2EE，Java 世界的架构，通常是企业用的（银行、大型公司,.etc），比较常见地还会搭配一种 UNIX 做操作系统，Apache 做 Web Server，Tomcat 转换 JSP 到 Java 给服务器程序用（其实它也自带 Web Server），Oracle 数据库等等。不一定拿来建站，常常用来提供企业里的各种需要用到网络的业务。我们学校教务系统就是用J2EE做的=。= 淘宝现在也是从LAMP转型到了这个。&br&&/li&&li&&a href=&///?target=http%3A//ASP.NET& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ASP.NET&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&，微软家的架构，通常会搭配 Windows Server 操作系统，SQL Server 数据库，IIS 做 Web Server。StackOverflow和京东（曾经）就是这个架构。&/li&&li&神奇的MEAN架构，MongoDB做数据库，Express做 Web Framework，Angular 做前端的 JavaScript 框架，Node.js 用于编写 Web Server。神奇之处在于这几个东西的语言都是 JavaScript （MongoDB的实现不是，但与外界沟通用的语言是）。因为是比较新的架构，还有待时间的考验，不过被很多人（尤其是靠 JavaScript 吃饭的前端程序猿们）热切关注。&/li&&li&一般来说重点不在技术而且在乎成本的新网站比较喜欢用 LAMP，重视安全稳定和速度的企业和机构喜欢 J2EE，想省事的网站喜欢 &a href=&///?target=http%3A//ASP.NET& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ASP.NET&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&，比较 Geek 的网站和创业公司喜欢折腾各种 Python、Ruby、Node.js世界的东西，Google 这样现成的技术都解决不了需求的超大型网站就自己折腾解决方案。&br&&/li&&/ul&虽然可以用的语言和所属体系五花八门，其实服务器端程序要做的事情本质上都差不多的，就好比自然世界中要表达“吃过了没”这句话的意思，你可以用各种各样的语言在各种各样的场景里表达出来~
一个学期前我也和楼主差不多不知道这些都是啥，一个学期之后差不多都弄懂了，来讲讲自己的理解吧 & & 因为接触的时间不是很长，有错误的地方欢迎指正~首先要知道网站访问大概是什么个过程：假设你在浏览器地址栏输入这个问题的地址/que…
在Quora上看到一段神奇的代码:&br&&div class=&highlight&&&pre&&code class=&language-css&&&span class=&o&&*&/span& &span class=&p&&{&/span& &span class=&k&&background-color&/span&&span class=&o&&:&/span& &span class=&n&&rgba&/span&&span class=&p&&(&/span&&span class=&m&&255&/span&&span class=&o&&,&/span&&span class=&m&&0&/span&&span class=&o&&,&/span&&span class=&m&&0&/span&&span class=&o&&,.&/span&&span class=&m&&2&/span&&span class=&p&&);&/span& &span class=&p&&}&/span&
&span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&p&&{&/span& &span class=&k&&background-color&/span&&span class=&o&&:&/span& &span class=&n&&rgba&/span&&span class=&p&&(&/span&&span class=&m&&0&/span&&span class=&o&&,&/span&&span class=&m&&255&/span&&span class=&o&&,&/span&&span class=&m&&0&/span&&span class=&o&&,.&/span&&span class=&m&&2&/span&&span class=&p&&);&/span& &span class=&p&&}&/span&
&span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&p&&{&/span& &span class=&k&&background-color&/span&&span class=&o&&:&/span& &span class=&n&&rgba&/span&&span class=&p&&(&/span&&span class=&m&&0&/span&&span class=&o&&,&/span&&span class=&m&&0&/span&&span class=&o&&,&/span&&span class=&m&&255&/span&&span class=&o&&,.&/span&&span class=&m&&2&/span&&span class=&p&&);&/span& &span class=&p&&}&/span&
&span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&p&&{&/span& &span class=&k&&background-color&/span&&span class=&o&&:&/span& &span class=&n&&rgba&/span&&span class=&p&&(&/span&&span class=&m&&255&/span&&span class=&o&&,&/span&&span class=&m&&0&/span&&span class=&o&&,&/span&&span class=&m&&255&/span&&span class=&o&&,.&/span&&span class=&m&&2&/span&&span class=&p&&);&/span& &span class=&p&&}&/span&
&span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&p&&{&/span& &span class=&k&&background-color&/span&&span class=&o&&:&/span& &span class=&n&&rgba&/span&&span class=&p&&(&/span&&span class=&m&&0&/span&&span class=&o&&,&/span&&span class=&m&&255&/span&&span class=&o&&,&/span&&span class=&m&&255&/span&&span class=&o&&,.&/span&&span class=&m&&2&/span&&span class=&p&&);&/span& &span class=&p&&}&/span&
&span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&o&&*&/span& &span class=&p&&{&/span& &span class=&k&&background-color&/span&&span class=&o&&:&/span& &span class=&n&&rgba&/span&&span class=&p&&(&/span&&span class=&m&&255&/span&&span class=&o&&,&/span&&span class=&m&&255&/span&&span class=&o&&,&/span&&span class=&m&&0&/span&&span class=&o&&,.&/span&&span class=&m&&2&/span&&span class=&p&&);&/span& &span class=&p&&}&/span&
&/code&&/pre&&/div&这段代码是干吗用的呢？&br&&b&显示节点的层次结构。&/b&比如说：当前这个页面刚开始是这样子的：&br&&img src=&/fb3cb5f464ced_b.jpg& data-rawwidth=&1000& data-rawheight=&932& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/fb3cb5f464ced_r.jpg&&添加了代码后，是这样子的：&br&&img src=&/43b504bd0dc7f1c505429f_b.jpg& data-rawwidth=&984& data-rawheight=&952& class=&origin_image zh-lightbox-thumb& width=&984& data-original=&/43b504bd0dc7f1c505429f_r.jpg&&不同颜色代表不同层次，还会直观的显示出 margin和padding属性。&br&&br&Quora地址：&a href=&///?target=https%3A///What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about/answer/Gajus-Kuizinas& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&& 的页面&i class=&icon-external&&&/i&&/a&
在Quora上看到一段神奇的代码:* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color…
已有帐号？
无法登录？
社交帐号登录
1122 人关注
157 个回答
1563 人关注
528 个回答
2355 人关注
5576 人关注
261 个回答
404 人关注
125 个回答