內容簡介
《Web標準之道:部落格園精華集》由部落格園知名博主聯手打造，涉及Web標準、HTML/CSS、JavaScript、SEO最佳化等諸多領域，內容新穎，觀點獨特，妙語連珠。《Web標準之道:部落格園精華集》並不是一本由代碼和技巧堆積而成的集合，更多的是探討了Web設計中若干理念和心得，其中多為經驗之談。無論對於從事Web前端設計的人士，還是對於那些從事Web後端編程的技術人員，《Web標準之道:部落格園精華集》都極具參考價值。其中時常有顛覆傳統之作，箇中滋味，請讀者自行品味。
編輯推薦
《Web標準之道:部落格園精華集》由人民郵電出版社出版。半年前，在部落格同這桿大旗下的感召下，一群園友聚到了一起，組成了部落格園精華集編委會，醞釀著一齣好戲。這期間，有過爭執，但更多的是合作。長期的磨合，使得來自五湖四海的編委會成員互相熟悉，甚至無話不談。這，也是一種財富。今天，部落格園這壇好酒，在陳釀了五年之後，終於要開封了。這是一本關於Web標準、前端編程、網站最佳化的集大成之作，代表了部落格園在Web領域的最高水準。所選文章大多是經驗之談，所謂技術人士的“心靈老鴨湯”：全書最有撼力的文章，莫過於Cat Chen的《欲練CSS，必先宮IE》；鳥食軒和老趙的文章偏實用，主要集中在Javascript領域；爆牙齒的《重構之美》系列，則有“採菊東籬下，悠然見南山”的意境。 妙筆生花之作不勝枚舉，正所謂：備美酒兮以饗佳朋，身心俱醉。部落格園的草根技術文集，部落格園五年精華與沉澱，眾多MVP傾情奉獻。
目錄
第一部分 HTML/CSS
談談網頁設計中的字型套用(1)——Font Set 2
目前的網頁還是以文字信息為主，而字型作為文字表現形式的最重要參數之一，自然有著相當重要的地位。可惜字型的重要性在很長時間內並沒有得到足夠的重視
談談網頁設計中的字型套用(2)——serif和sans-serif 5
有多少人可以正確地使用它們呢？有多少人真正了解這兩個通用字型族呢？本文將給您一個最清楚深入的剖析
談談網頁設計中的字型套用(3)——實戰套用篇·上 10
談談網頁設計中的字型套用(4)——實戰套用篇·下 14
紙上談兵終是虛，讓我們在戰場上學習更多的技能
讓CSS區分各種各樣的input 19
input代表的實在太多了，但它們卻不可能使用相同的樣式，當我們不想添加成片的class時，試試這裡的方法，四個解決方案，總有一個您需要的
一個常被問到的問題： 如何讓層蓋住select 25
IE 6依然是目前的主流瀏覽器，IE 6的select也一直“高高在上”，經常遇到的問題卻成為一直以來的話題，本文將為您展現終極解決方案
兼容IE、Firefox的圖片自動縮放的CSS 29
厭煩了寫大量的JavaScript來控制一個個的圖片，那么來用CSS(當您不能確定expression將會帶來什麼的時候，請謹慎使用)
第二部分 Web標準
Web標準頁面設計——要注意的很多 32
本文是作者在做完一個大型項目之後的總結，提到了很多方面，相信這些知識點對所有走在Web標準化道路上的人都有很大的幫助
欲練CSS，必先宮IE 39
Win國天下，欲練CSS之人不在少數，大多不得要領，又或是走火入魔，全為IE所累。故曰：欲練CSS，必先宮IE
你有table/強迫症嗎 42
如果你宮了IE然而還是覺得不得要領，那就該懷疑自己是不是有傳說中的table強迫症了
根本不存在DIV + CSS布局這回事 44
看了上面的兩篇文章，您是不是已經開始拿DIV+CSS布局來和table布局進行比較了？實際上，用於布局的只有CSS，根本不存在DIV+CSS布局這回事
慎用XHTML標籤的自關閉寫法 47
請注意：並不是所有標籤都可以自關閉
Web標準不標準 49
一群會用table蹩腳布局的網頁初學者嘲笑著那些對網頁製作一竅不通的門外漢；而一群自認為Table布局無所不能的Table布局擁護者則嘲笑著那群用Table蹩腳布局的網頁初學者；那些剛試著將幾個頁面中的TABLE換成DIV的所謂的Web標準設計者則嘲笑著那群死抱Table布局不放的table布局設計者；而一群焦頭爛額終於在網站上貼上“W3C驗證通過HTML網站”圖示的自認高人的Web標準設計者則嘲笑著那群以為“DIV+CSS”就是Web標準的Web標準設計初學者；但是當我們把網頁放在不同的瀏覽器中的時候，卻發現我們全部都被“Web標準設計”嘲笑了
走在Web標準化設計的路上[嘮叨先] 53
暈，現在才談XHTML是不是太晚了點，這東東2004就火了一把了。其實，作為一項技術，沒有火與不火的說法，也沒有早與晚的說法。技術的生命力和火沒有關係，不知道不理解沒學會怎么都不晚
走在Web標準化設計的路上——振臂一呼：CSS，Stop! 55
近幾年Web標準的推廣變成了CSS的推廣，CSS重要嗎？我們不要CSS行不行？你找一大堆完全合理的理由……“行不行？”“行！”那就對了，我說不要你的CSS，我要他的CSS，又行不行？那么和XHTML相比，CSS重要在哪裡
走在Web標準化設計的路上——對HTML/XHTML/XML/XSL的 一些認識 57
讓我們從這裡開始更深入地了解這些L們
走在Web標準化設計的路上——深入結構：理解h系列的不合理 60
HTML中的6個標題Tag(h1/h2/h3/h4/h5/h6)，設計得是否合理？理由？解決辦法
走在Web標準化設計的路上——深入結構：合理運用DIV和SPAN 66
把DIV看成是布局元素的人非常多，類似有“用div代替table進行布局”、“實戰CSS+DIV布局”等，太多了，可是，DIV卻不是布局元素，更可怕的是XHTML中根本不存在一個布局元素
走在Web標準化設計的路上深入結構：DIV再議以及對SPAN的迷惑 70
上篇文章中主要否定了使用DIV進行布局這種說法，提出DIV應當用於組織代碼結構，現在我們再深入一點，DIV擁有語義嗎
走在Web標準化設計的路上——複雜表單 74
走在Web標準化設計的路上[複雜表單：Reload] 77
一直有種說法：Table用於數據表，對於複雜表單，Table也是最好的選擇，那么，到底複雜表單是否應該使用Table
走在Web標準化設計的路上[深入語義：列表和表格的抉擇] 83
問題：XHTML中的列表Tag(ul/ol)和表格Tag(Table)區別何在？對於單列多行下的數據表，如何判斷和選擇
IE 7標準之道——1. 更豐富的CSS選擇符 86
IE 7最令網頁設計者興奮的改進，便是支持更多、更豐富的CSS選擇符，因此可以更方便地實現一些在IE 6中很難實現或者無法實現的效果。下面就讓我們看看這些令人興奮的、IE 7新支持的選擇符
IE 7標準之道——2：引起頁面布局混亂的禍首 98
頁面亂了！誰搞的？讓本文帶您進入偵探之路
IE 7標準之道——3：歌劇院魅影bug 114
估計很多朋友都對這個華麗的“歌劇院魅影”有眼前一亮的感覺，其實這純粹是一個標題黨作為，這個Bug和歌劇院半毛錢關係都沒有。這個bug在國際上比較獲得認可的名字叫做——“IE 6重複文字Bug”。這是一個非常好玩但是又很令人摸不透的bug
IE 7標準之道——4：上去了！終於上去了 118
這是IE 6一個很著名且詭異的bug，很簡單，也很容易重現。說白了就是：列表框(select)一直把DIV踩在腳底下。因為這個bug，不知道多少浮動選單被破壞
IE 7標準之道——5：置換元素與行距bug 122
也許您沒有聽說過“置換元素”這個詞，但這個問題您一定遇到過
IE 7標準之道——6：float雙倍margin bug 129
很出名，很常見，很簡單，如何修正呢？這裡有最好的答案
IE 7標準之道——7：躲貓貓bug 134
我的文字不見了！躲哪裡去了？IE開發團隊都不知道，我們怎么可能知道？但是我們卻有辦法找出這個貓貓
IE 7標準之道——8：瘋了的框線線 138
瘋了，框線線算是徹底地瘋掉了，這裡卻沒有“為什麼”，還好，我們有“怎么辦”
第三部分 安全與最佳化
Web開發中你注意這些問題了嗎(前台構架篇) 146
Web 2.0帶給我們更好的用戶體驗和更炫、更酷的效果，Javascript、Flash、Silverlight都躍躍欲試。於是，我們網站中有了越來越多的JS和CSS的檔案和代碼。隨著數量的增多，如何管理這些檔案和這些代碼、如何通過合理的方式來提升性能，已經是我們必須面對的問題
如何利用客戶端快取對網站進行最佳化 151
你的網站在並發訪問量很大並且無法承受壓力的情況下，你會如何最佳化？很多人會回答伺服器快取，其實這裡有更好的方式—客戶端才是我們真正的戰場
如何提高網頁的效率(上篇)——提高網頁效率的14
條準則 155
網站最基本的東西是什麼？——內容？SEO(搜尋引擎最佳化)？UE(用戶體驗)？都不對！是速度
如何提高網頁的效率(下篇)——使用Yslow掌握網站慢的原因 164
工欲善其事，必先利其器，上篇講到網站最基本要素是速度，這一次將為大家帶來很好用的工具，來協助我們提升網站的速度
關於Web應用程式安全的思考 169
沒有絕對的安全，在Web上更沒有。對於一個Web程式來講，至少我們應該做到：自己(一個有經驗的Web開發人員)攻不破這個系統。HTTP是開放的﹐因此誰都能向網路上公開的Web伺服器傳送request請求﹐要求一個URL，但可惜的是，Web伺服器對於請求方的識別能力是很低的。使用URL進行安全管控的關鍵不是判斷URL，而是判斷每次request，檢查每次request是否合法，以防止安全漏洞
SEO——我們是不是走錯了路 194
多少公司把錢給了搜尋引擎？多少人每天為SEO而工作？我們的工作是必要的嗎？SEOer的存在是正確的嗎？是不是在這條路上我們走進了迷途？存在即是合理，但我們依然可以停下來想一想，什麼才應該是我們真正的追求
第四部分 JavaScript
JavaScript變數作用域及可訪問性的探討 200
永遠的話題，永遠的焦點，不過，你可能永遠無法找到比這裡更好的探討
JavaScript中的this關鍵字 207
你不知道的JavaScript——“this” 215
兩大高手共論“this”：太常用了，所有寫過JavaScript的人都用過，以至於我們每個人都會認為自己很了解它，但是，我們真的了解嗎？是不是在我們的理解之外，還有什麼是我們沒有想到的？看過這兩篇文章後，你會發現一個不一樣的“this”
JavaScript代碼壓縮、加密算法分析及工具實現 220
現在網上很多JavaScript都進行了壓縮，同時代碼變得不可直接閱讀，也相當於一種簡單的加密了，本文對其中一種典型的算法進行分析，並介紹如何解密代碼和重新實現
JavaScript Table排序 230
網上也有很多其他的Table排序函式，有的基於數組，有的不夠靈活。這個函式能在原有Table結構上加入功能，不用太多改動，基於OO的結構也易於使用(當然前提是對JS有一定認識)。這裡只是滿足基本需求，你可以自己動手擴展
設計模式在JavaScript中的套用(1)——MVC 236
採用了設計模式，程式無疑將具有更好的健壯性，可維護性以及可讀性。所以，作為能工巧匠的您，也一定不會放過令程式蓬蓽生輝的機會。讓我們一起領略MVC模式
設計模式在JavaScript中的套用(2)——Observer 243
上篇我們討論了Web開發中最重要的設計模式MVC，這一篇我們要討論的是Observer模式。與MVC這樣的大型設計模式相比，Observer模式則要輕量很多
JavaScript面向對象之屬性實現 248
屬性是對私有變數的一種保護手段，同時提供了像public變數一樣的使用效果。近代的高級程式語言，(例如C#和Java)都支持屬性這一特點，讓我們在JavaScript里實現相同的功能
基於“甘露模型”的多重繼承和接口實現，附帶“準”橋接模式的驗證 251
你是否聽過“甘露模型”呢？是否覺得它在某些地方還不是特別完善？那么，在這篇文章里，讓我們繼續這個話題，讓甘露來得更多一些
在JavaScript面向對象編程中使用繼承(1) 257
前面幾篇提到了使用JavaScript進行面向對象編程的一些內容，上一篇中實現了多重繼承，在這裡，讓我們開始全面的了解“繼承”在JavaScript中的套用，本篇列出了4種實現繼承的方式
在JavaScript面向對象編程中使用繼承(2) 261
本篇詳細介紹了繼承構造法，適用於：小規模類之間的繼承，基類和子類的屬性方法在5～8個，還有就是以構造函式中賦值方式導入類的屬性和方法，而不用prototype導入的類編寫習慣的時候
在JavaScript面向對象編程中使用繼承(3) 264
原型繼承法一樣有它的缺點，僅適用於基類沒有屬性的情形，而優點也是相當明顯：保持了子類構造函式的完整，可以不在裡面添加任何和繼承有關的代碼，所有繼承和重載操作都由對原型(prototype)的操作來完成
在JavaScript面向對象編程中使用繼承(4) 267
本文介紹實例繼承法，此種方法沒有太經典的套用場景，不過對於基類比較複雜，而子類需要添加的屬性方法很少，實例法還是顯得挺清晰的。特別是對於Javacript對象動態擴展很熟悉的人，就更覺得明確了
在JavaScript面向對象編程中使用繼承(5) 269
附加繼承法，此方法由本系列作者獨創，解決了上面3種經典繼承方式的很多問題，使用起來異常強大，就像作者所說，適用場景為anywhere, anytime, anybody
掙脫瀏覽器的束縛(1)——前言 273
工欲善，必先利其器
掙脫瀏覽器的束縛(2)——別讓腳本引入壞了事 276
Web套用中需要的腳本越來越多，傳統的腳本引入方式已經越來越無法適應這種變化，在本篇中，老趙帶我們一起看看如何完美解決腳本引入的問題
掙脫瀏覽器的束縛(3)——兩個連線還不夠“並行” 281
瀏覽器很傻，但是我們很聰明，於是，就有了突破瀏覽器雙連線限制的方法
掙脫瀏覽器的束縛(4)——王道！動態添加script元素 285
突破雙連線限制解決了一個很大的問題，但依然有更多的問題需要解決。動態添加script元素也同樣有著很多的麻煩和問題，但這並不妨礙它成為“王道”，且聽老趙慢慢道來
掙脫瀏覽器的束縛(5)——哭笑不得的IE Bug 289
在IE中，如果同時建立兩個以上“連線狀態”的連線，那么就很不幸地出現了問題：瀏覽器停止回響了！不過還好，瀏覽器很傻，JavaScript也很傻，我們可以很容易地騙過去
