Web标准之道
2009-8
人民邮电出版社
阿一,棕熊,李战,丁学
297
无
2004年1月，作为一名痴迷于技术的业余程序员，我在网上苦苦寻觅，却找不到真正属于程序员的网上家园。软件开发是创造性的劳动，交流和分享实在是太重要了，可能别人的一个想法或一点经验，就会让你事半功倍。由于是业余程序员，对这种交流就更加渴望，既然找不到，既然自己也一直在寻找事业的起点，那就自己建立一个吧。于是，博客园（cnblogs-com）就这样诞生了。博客代表每个程序员的小家，园即家园，代表着由小家构成的大家，希望博客园能服务好程序员，成为真正属于程序员的网上家园。 一个人， “一杆枪”（服务器是一台旧的台式机），博客园就这样开始自己的发展征程。这样一个简单的网站，却吸引了一些痴迷技术、喜欢交流和分享、正在寻找属于自己的网上家园的程序员，他们不嫌弃这里的简陋，他们选择在这里安家落户，仅仅是因为这里的纯净、专注、对程序员的真正理解和关心。博客园幸运地聚集起这些技术精英，这些技术精英痴迷于技术、激情于代码，更可贵的是他们喜欢交流与分享。就是这样一群人，每天为博客园贡献很多精彩内容；就是这样一群人，吸引着更多的这样一群人；就是这样一群人，不仅在分享中帮助了很多人，而且自己在分享过程中不断地成长。博客园成为记载他们成长过程的载体。 经历了5年多的发展，博客园记载了太多技术精英们的贡献，为了把这些精彩内容给更多人分享，博客园精华集编委会通过艰辛的努力，收集整理成为《博客园精华集》。因为无法通过《博客园精华集》的几本书承载所有的内容，只能让《博客园精华集》作为代表，希望能给读者一些启迪。同时，也通过《博客园精华集》表达我们最诚挚的感谢，感谢所有在博客园中作出过贡献的朋友！
本书由博客园知名博主联手打造，涉及Web标准、HTML/CSS、JavaScript、SEO优化等诸多领域，内容新颖，观点独特，妙语连珠。 本书并不是一本由代码和技巧堆积而成的集合，更多的是探讨了Web设计中若干理念和心得，其中多为经验之谈。 无论对于从事Web前端设计的人士，还是对于那些从事Web后端编程的技术人员，本书都极具参考价值。其中时常有颠覆传统之作，个中滋味，请读者自行品味。
丁学，常年活跃于国内各大技术社区和各类线下活动，10多年的Web前端开发经验，对Web标准、SEO、用户体验等有深入研究。现从事交易平台开发，并致力于高性能Web开发技术的研究与推广。李蓓卿（网名棕熊），资深前端开发工程师。现任某知名国际游戏公司首席前端架构师，负责指导前端架构、Web用户交互、视觉设计与开发，并专注于front.endglobalization、front-endintemationalintegrating等前端开发新领域的研究。李战，阿里软件资深架构师，具有20年软件开发经验。在互联网软件开发，特别是Web标准及前端.1 avaScr.pt技术方面有较高的造诣，《悟透JavaScript》一书的作者。目前从事SaaS及云计算方面的研究工作。杨正祎（网名阿一），从事网页前端开发5年，关注前端技术开发、用户体验等前端技术领域。写有系列博客《IE的Web标准之道》，并有视频教程《阿一Web标准学堂》。主要关注的技术领域包括：前端开发技能、用户体验、用户行为研究、搜索引擎优化、Web标准设计等。爆牙齿，英来网创始人兼cEo。拥有9年前端设计、5年Web标准应用部署经验，完成方欣内网软件、卡当网、爆米花网、海词网的大团队Web标准应用部署。
第一部分 HTML/CSS 谈谈网页设计中的字体应用（1）——Font Set 谈谈网页设计中的字体应用（2）——serif和sans-serif 谈谈网页设计中的字体应用（3）——实战应用篇·上 谈谈网页设计中的字体应用（4）——实战应用篇·下 让CSS区分各种各样的input 一个常被问到的问题： 如何让层盖住select 兼容IE、Firefox的图片自动缩放的CSS 第二部分 Web标准 Web标准页面设计——要注意的很多 欲练CSS，必先宫IE 你有table/强迫症吗 根本不存在DIV + CSS布局这回事 慎用XHTML标签的自关闭写法 Web标准不标准 走在Web标准化设计的路上[唠叨先] 走在Web标准化设计的路上——振臂一呼：CSS，Stop! 走在Web标准化设计的路上——对HTML/XHTML/XML/XSL的 一些认识 走在Web标准化设计的路上——深入结构：理解h系列的不合理 走在Web标准化设计的路上——深入结构：合理运用DIV和SPAN 走在Web标准化设计的路上深入结构：DIV再议以及对SPAN的迷惑 走在Web标准化设计的路上——复杂表单 走在Web标准化设计的路上[复杂表单：Reload] 走在Web标准化设计的路上[深入语义：列表和表格的抉择] IE 7标准之道——1. 更丰富的CSS选择符 IE 7标准之道——2：引起页面布局混乱的祸首 IE 7标准之道——3：歌剧院魅影bug IE 7标准之道——4：上去了！终于上去了 IE 7标准之道——5：置换元素与行距bug IE 7标准之道——6：float双倍margin bug IE 7标准之道——7：躲猫猫bug IE 7标准之道——8：疯了的边框线 第三部分 安全与优化第四部分 JavaScript
Web 2.O带给我们更好的用户体验和更炫更酷的效果，JavaScript、Flash、silverlight都在跃跃欲试。目前应用最多的还是.JavaScript，所以你会经常看到很多Web 2.0网站有n多的Js和CSS。管理这些文件和如此多的代码，怎么能提升性能？以下就来讲讲我目前想到的一些问题。 JS和CSS引用时如何做到让请求进行并发下载 我们通过firebug，就会发现通过link和script标记在页面上的引用资源的每个请求都是以一个队列形式排队等候，一个资源下载完成后才会下载另外一个请求资源。它不像我们页面里面的图片（img标记和样式中引用的图片，样式里面引用的图片必须等到CSS文件加载完毕后才能下载图片），可以并发下载资源文件。YSlowr曾经对Web站点优化提出，尽量把CSS放在head中（样式突然在其他资源下载完毕后才展现，那太有戏剧性了），但是有点搞不明白，为什么浏览对CSS加载也是一个队列，难道怕在样式中有重名部分的冲突？YSlow还提出过把Js放在页面的尾部，那样的话整个页面下载Js资源差不多在onload完后。这点我深有体会。当你的script放在head中的时候，整个页面展现都得script一个个加载完毕再发生，这直接影响着Web性能，我想网站的速度比用户体验来得更重要吧，所以我们应该把Js放在尾部。那么是不是说直接放在尾部就好了呢？我想还有一点可以优化的，就是让其并发下载。那么如何解决这些资源的并发下载问题呢？ 我的方法是通过动态追加dom的方法（appendChild，动态追加link和script节点标记到head下）。使用这种方式，我们会发现我们的队列突然变成了百米冲刺，一声哨下，都冲向终点了（当然每个并发请求数肯定还是有一定限制的）。不过在IE下appendChild这种方法在window.onload事件中无法引用资源的函数，所以在IE下我用docoument.write去输出（IE下用document.write也是并发下载，而firefox是不行的）。
半年前，在博客同这杆大旗下的感召下，一群园友聚到了一起，组成了博客园精华集编委会，酝酿着一出好戏。这期间，有过争执，但更多的是合作。长期的磨合，使得来自五湖四海的编委会成员互相熟悉，甚至无话不谈。这，也是一种财富。今天，博客园这坛好酒，在陈酿了五年之后，终于要开封了。这是一本关于Web标准、前端编程、网站优化的集大成之作，代表了博客园在Web领域的最高水准。所选文章大多是经验之谈，所谓技术人士的“心灵老鸭汤”：全书最有撼力的文章，莫过于Cat Chen的《欲练CSS，必先宫IE》；鸟食轩和老赵的文章偏实用，主要集中在Javascript领域；爆牙齿的《重构之美》系列，则有“采菊东篱下，悠然见南山”的意境。 妙笔生花之作不胜枚举，正所谓：备美酒兮以飨佳朋，身心俱醉。博客园的草根技术文集，博客园五年精华与沉淀，众多MVP倾情奉献。
无