Web標(biāo)準(zhǔn)之道

前言

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

內(nèi)容概要

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

作者簡(jiǎn)介

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

書(shū)籍目錄

第一部分　HTML/CSS　談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)中的字體應(yīng)用（1）——Font Set　　談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)中的字體應(yīng)用（2）——serif和sans-serif　　談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)中的字體應(yīng)用（3）——實(shí)戰(zhàn)應(yīng)用篇·上　　談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)中的字體應(yīng)用（4）——實(shí)戰(zhàn)應(yīng)用篇·下　　讓CSS區(qū)分各種各樣的input　　一個(gè)常被問(wèn)到的問(wèn)題： 如何讓層蓋住select　　兼容IE、Firefox的圖片自動(dòng)縮放的CSS　第二部分　Web標(biāo)準(zhǔn)　Web標(biāo)準(zhǔn)頁(yè)面設(shè)計(jì)——要注意的很多　　欲練CSS，必先宮IE　　你有table/強(qiáng)迫癥嗎　　根本不存在DIV + CSS布局這回事　　慎用XHTML標(biāo)簽的自關(guān)閉寫(xiě)法　　Web標(biāo)準(zhǔn)不標(biāo)準(zhǔn)　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上[嘮叨先]　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上——振臂一呼：CSS，Stop!　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上——對(duì)HTML/XHTML/XML/XSL的 一些認(rèn)識(shí)　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上——深入結(jié)構(gòu)：理解h系列的不合理　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上——深入結(jié)構(gòu)：合理運(yùn)用DIV和SPAN　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上深入結(jié)構(gòu)：DIV再議以及對(duì)SPAN的迷惑　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上——復(fù)雜表單　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上[復(fù)雜表單：Reload]　　走在Web標(biāo)準(zhǔn)化設(shè)計(jì)的路上[深入語(yǔ)義：列表和表格的抉擇]　　IE 7標(biāo)準(zhǔn)之道——1. 更豐富的CSS選擇符　　IE 7標(biāo)準(zhǔn)之道——2：引起頁(yè)面布局混亂的禍?zhǔn)住　E 7標(biāo)準(zhǔn)之道——3：歌劇院魅影bug　　IE 7標(biāo)準(zhǔn)之道——4：上去了！終于上去了　　IE 7標(biāo)準(zhǔn)之道——5：置換元素與行距bug　　IE 7標(biāo)準(zhǔn)之道——6：float雙倍margin bug　　IE 7標(biāo)準(zhǔn)之道——7：躲貓貓bug　　IE 7標(biāo)準(zhǔn)之道——8：瘋了的邊框線　第三部分　安全與優(yōu)化第四部分　JavaScript

章節(jié)摘錄

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

編輯推薦

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

圖書(shū)封面

圖書(shū)標(biāo)簽Tags

無(wú)

評(píng)論、評(píng)分、閱讀與下載

---

    Web標(biāo)準(zhǔn)之道 PDF格式下載

---