Web標準之道

前言

　　2004年1月，作為一名癡迷于技術的業(yè)余程序員，我在網(wǎng)上苦苦尋覓，卻找不到真正屬于程序員的網(wǎng)上家園。軟件開發(fā)是創(chuàng)造性的勞動，交流和分享實在是太重要了，可能別人的一個想法或一點經(jīng)驗，就會讓你事半功倍。由于是業(yè)余程序員，對這種交流就更加渴望，既然找不到，既然自己也一直在尋找事業(yè)的起點，那就自己建立一個吧。于是，博客園（cnblogs-com）就這樣誕生了。博客代表每個程序員的小家，園即家園，代表著由小家構(gòu)成的大家，希望博客園能服務好程序員，成為真正屬于程序員的網(wǎng)上家園?！　∫粋€人，　“一桿槍”（服務器是一臺舊的臺式機），博客園就這樣開始自己的發(fā)展征程。這樣一個簡單的網(wǎng)站，卻吸引了一些癡迷技術、喜歡交流和分享、正在尋找屬于自己的網(wǎng)上家園的程序員，他們不嫌棄這里的簡陋，他們選擇在這里安家落戶，僅僅是因為這里的純凈、專注、對程序員的真正理解和關心。博客園幸運地聚集起這些技術精英，這些技術精英癡迷于技術、激情于代碼，更可貴的是他們喜歡交流與分享。就是這樣一群人，每天為博客園貢獻很多精彩內(nèi)容；就是這樣一群人，吸引著更多的這樣一群人；就是這樣一群人，不僅在分享中幫助了很多人，而且自己在分享過程中不斷地成長。博客園成為記載他們成長過程的載體。　　經(jīng)歷了5年多的發(fā)展，博客園記載了太多技術精英們的貢獻，為了把這些精彩內(nèi)容給更多人分享，博客園精華集編委會通過艱辛的努力，收集整理成為《博客園精華集》。因為無法通過《博客園精華集》的幾本書承載所有的內(nèi)容，只能讓《博客園精華集》作為代表，希望能給讀者一些啟迪。同時，也通過《博客園精華集》表達我們最誠摯的感謝，感謝所有在博客園中作出過貢獻的朋友！

內(nèi)容概要

　　本書由博客園知名博主聯(lián)手打造，涉及Web標準、HTML/CSS、JavaScript、SEO優(yōu)化等諸多領域，內(nèi)容新穎，觀點獨特，妙語連珠。　　本書并不是一本由代碼和技巧堆積而成的集合，更多的是探討了Web設計中若干理念和心得，其中多為經(jīng)驗之談?！　o論對于從事Web前端設計的人士，還是對于那些從事Web后端編程的技術人員，本書都極具參考價值。其中時常有顛覆傳統(tǒng)之作，個中滋味，請讀者自行品味。

作者簡介

　　丁學，常年活躍于國內(nèi)各大技術社區(qū)和各類線下活動，10多年的Web前端開發(fā)經(jīng)驗，對Web標準、SEO、用戶體驗等有深入研究。現(xiàn)從事交易平臺開發(fā)，并致力于高性能Web開發(fā)技術的研究與推廣。李蓓卿（網(wǎng)名棕熊），資深前端開發(fā)工程師。現(xiàn)任某知名國際游戲公司首席前端架構(gòu)師，負責指導前端架構(gòu)、Web用戶交互、視覺設計與開發(fā)，并專注于front.endglobalization、front-endintemationalintegrating等前端開發(fā)新領域的研究。李戰(zhàn)，阿里軟件資深架構(gòu)師，具有20年軟件開發(fā)經(jīng)驗。在互聯(lián)網(wǎng)軟件開發(fā)，特別是Web標準及前端.1 avaScr.pt技術方面有較高的造詣，《悟透JavaScript》一書的作者。目前從事SaaS及云計算方面的研究工作。楊正祎（網(wǎng)名阿一），從事網(wǎng)頁前端開發(fā)5年，關注前端技術開發(fā)、用戶體驗等前端技術領域。寫有系列博客《IE的Web標準之道》，并有視頻教程《阿一Web標準學堂》。主要關注的技術領域包括：前端開發(fā)技能、用戶體驗、用戶行為研究、搜索引擎優(yōu)化、Web標準設計等。爆牙齒，英來網(wǎng)創(chuàng)始人兼cEo。擁有9年前端設計、5年Web標準應用部署經(jīng)驗，完成方欣內(nèi)網(wǎng)軟件、卡當網(wǎng)、爆米花網(wǎng)、海詞網(wǎng)的大團隊Web標準應用部署。

書籍目錄

第一部分　HTML/CSS　談談網(wǎng)頁設計中的字體應用（1）——Font Set　　談談網(wǎng)頁設計中的字體應用（2）——serif和sans-serif　　談談網(wǎng)頁設計中的字體應用（3）——實戰(zhàn)應用篇·上　　談談網(wǎng)頁設計中的字體應用（4）——實戰(zhàn)應用篇·下　　讓CSS區(qū)分各種各樣的input　　一個常被問到的問題： 如何讓層蓋住select　　兼容IE、Firefox的圖片自動縮放的CSS　第二部分　Web標準　Web標準頁面設計——要注意的很多　　欲練CSS，必先宮IE　　你有table/強迫癥嗎　　根本不存在DIV + CSS布局這回事　　慎用XHTML標簽的自關閉寫法　　Web標準不標準　　走在Web標準化設計的路上[嘮叨先]　　走在Web標準化設計的路上——振臂一呼：CSS，Stop!　　走在Web標準化設計的路上——對HTML/XHTML/XML/XSL的 一些認識　　走在Web標準化設計的路上——深入結(jié)構(gòu)：理解h系列的不合理　　走在Web標準化設計的路上——深入結(jié)構(gòu)：合理運用DIV和SPAN　　走在Web標準化設計的路上深入結(jié)構(gòu)：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：瘋了的邊框線　第三部分　安全與優(yōu)化第四部分　JavaScript

章節(jié)摘錄

　　Web 2.O帶給我們更好的用戶體驗和更炫更酷的效果，JavaScript、Flash、silverlight都在躍躍欲試。目前應用最多的還是.JavaScript，所以你會經(jīng)常看到很多Web 2.0網(wǎng)站有n多的Js和CSS。管理這些文件和如此多的代碼，怎么能提升性能？以下就來講講我目前想到的一些問題?！S和CSS引用時如何做到讓請求進行并發(fā)下載　我們通過firebug，就會發(fā)現(xiàn)通過link和script標記在頁面上的引用資源的每個請求都是以一個隊列形式排隊等候，一個資源下載完成后才會下載另外一個請求資源。它不像我們頁面里面的圖片（img標記和樣式中引用的圖片，樣式里面引用的圖片必須等到CSS文件加載完畢后才能下載圖片），可以并發(fā)下載資源文件。YSlowr曾經(jīng)對Web站點優(yōu)化提出，盡量把CSS放在head中（樣式突然在其他資源下載完畢后才展現(xiàn)，那太有戲劇性了），但是有點搞不明白，為什么瀏覽對CSS加載也是一個隊列，難道怕在樣式中有重名部分的沖突？YSlow還提出過把Js放在頁面的尾部，那樣的話整個頁面下載Js資源差不多在onload完后。這點我深有體會。當你的script放在head中的時候，整個頁面展現(xiàn)都得script一個個加載完畢再發(fā)生，這直接影響著Web性能，我想網(wǎng)站的速度比用戶體驗來得更重要吧，所以我們應該把Js放在尾部。那么是不是說直接放在尾部就好了呢？我想還有一點可以優(yōu)化的，就是讓其并發(fā)下載。那么如何解決這些資源的并發(fā)下載問題呢？　　我的方法是通過動態(tài)追加dom的方法（appendChild，動態(tài)追加link和script節(jié)點標記到head下）。使用這種方式，我們會發(fā)現(xiàn)我們的隊列突然變成了百米沖刺，一聲哨下，都沖向終點了（當然每個并發(fā)請求數(shù)肯定還是有一定限制的）。不過在IE下appendChild這種方法在window.onload事件中無法引用資源的函數(shù)，所以在IE下我用docoument.write去輸出（IE下用document.write也是并發(fā)下載，而firefox是不行的）。

編輯推薦

　　半年前，在博客同這桿大旗下的感召下，一群園友聚到了一起，組成了博客園精華集編委會，醞釀著一出好戲。這期間，有過爭執(zhí)，但更多的是合作。長期的磨合，使得來自五湖四海的編委會成員互相熟悉，甚至無話不談。這，也是一種財富。今天，博客園這壇好酒，在陳釀了五年之后，終于要開封了。這是一本關于Web標準、前端編程、網(wǎng)站優(yōu)化的集大成之作，代表了博客園在Web領域的最高水準。所選文章大多是經(jīng)驗之談，所謂技術人士的“心靈老鴨湯”：全書最有撼力的文章，莫過于Cat Chen的《欲練CSS，必先宮IE》；鳥食軒和老趙的文章偏實用，主要集中在Javascript領域；爆牙齒的《重構(gòu)之美》系列，則有“采菊東籬下，悠然見南山”的意境?！∶罟P生花之作不勝枚舉，正所謂：備美酒兮以饗佳朋，身心俱醉。博客園的草根技術文集，博客園五年精華與沉淀，眾多MVP傾情奉獻。

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

    Web標準之道 PDF格式下載

---