(P4)
Web標(biāo)準(zhǔn)由一系列標(biāo)準(zhǔn)組合而成，其核心理念是將網(wǎng)頁(yè)的結(jié)構(gòu)、樣式和行為分離開(kāi)來(lái)，所以它可以分為三大部分：結(jié)構(gòu)標(biāo)準(zhǔn)、樣式標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)。
樣式標(biāo)準(zhǔn) —— XML標(biāo)準(zhǔn)、XHTML標(biāo)準(zhǔn)、HTML標(biāo)準(zhǔn)；
樣式標(biāo)準(zhǔn) —— CSS標(biāo)準(zhǔn)；
行為標(biāo)準(zhǔn) —— DOM標(biāo)準(zhǔn)和 ECMAscript 標(biāo)準(zhǔn)；

(P23)CSS布局也就是俗稱(chēng)的 Div + CSS 布局，或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 來(lái)控制網(wǎng)頁(yè)中元素的樣式，包括位置、大小、顏色等；

(P26)
CSS布局只是Web標(biāo)準(zhǔn)的一部分。在HTML、CSS、Javascript 這三大元素中，HTML才是最重要的，結(jié)構(gòu)才是重點(diǎn)，樣式是用來(lái)修飾結(jié)構(gòu)的；

先確定 HTML ，確定語(yǔ)義的標(biāo)準(zhǔn)，再來(lái)選用合適的 CSS；

(P27) 瀏覽器會(huì)根據(jù)標(biāo)簽的語(yǔ)義給定一個(gè)默認(rèn)的樣式；

(P29) Web Developer —— 網(wǎng)頁(yè)調(diào)試插件

(P43) 在語(yǔ)義不明顯，既可以用 <P> 也可以用 <div> 的地方，盡量用 <P> ，因?yàn)?<P> 默認(rèn)情況下有上下間隔，去樣式后的可讀性更好，對(duì)兼容特殊終端有利；

(P46)
如果漏寫(xiě) DTD 聲明， Firefox 仍然會(huì)按照標(biāo)準(zhǔn)樣式來(lái)解析網(wǎng)頁(yè)，但在 IE 中（包括 IE6、IE7、IE8）就會(huì)觸發(fā)怪異模式；

一種組織 CSS 的方法 —— base.css + common.css + page.css

(P58) 模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應(yīng)將它們提取出來(lái)，拆成一個(gè)獨(dú)立的模塊；

(P60) 模塊應(yīng)在保證數(shù)量盡可能少的原則下，做到盡可能簡(jiǎn)單，以提高重用性；

(P71) HTML 標(biāo)準(zhǔn)的 class 屬性和 id 屬性不同，id 只能掛一個(gè)，而 class 可以?huà)於鄠€(gè)，用空格分隔；

(P81) 如果不確定模塊的上下 margin 特別穩(wěn)定，最好不要將它寫(xiě)到模塊的類(lèi)里，而是使用類(lèi)的組合，單獨(dú)為上下 margin 掛用于邊框的原子類(lèi)；

(P81) 權(quán)重的規(guī)則是這樣的 —— HTML標(biāo)簽的權(quán)重是1，class 的權(quán)重是10，id 權(quán)重是100；

(P82) 如果 CSS 選擇符權(quán)重相同，那么樣式會(huì)遵循就近原則，哪個(gè)選擇符最后定義，就采用哪個(gè)選擇符的樣式 —— “就近原則”指的是選擇符定義的先后順序，而不是 class 名的先后順序；

(P84) 為了保證樣式容易被覆蓋，提高可維護(hù)性，CSS選擇符需保證權(quán)重盡可能低；

(P85) 少使用子選擇器，就需要多添加 class ；

(P87) CSS Sprite “圖片翻轉(zhuǎn)技術(shù)” —— 將多張圖片合并為一張，然后利用 background-position 屬性來(lái)展示需要的部分；

(P88) 是否使用 CSS Sprite 主要取決于網(wǎng)站流量；

(P89) 一般情況下，建議盡量使用 class ，少用 id ；

(P93)
CSS hack ——
1. IE條件注釋法 <!-- [if IE]> ...... <![endif]>
2. 選擇符前綴法 *html *+html
3. 樣式屬性前綴法 "_" "*"

(P94) <a> 標(biāo)簽的四種狀態(tài)排序問(wèn)題 —— Love Hate 原則 —— L(link)ov(Visible)e， H(Hover)a(Active)te；

(P95)
塊級(jí)元素： div、p、form、ul、ol、li

行內(nèi)元素： span、strong、em

塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下，其寬度自動(dòng)填滿(mǎn)其父元素寬度；

行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化；

(P95)
塊級(jí)元素可以設(shè)置 width、height 屬性；
行內(nèi)元素設(shè)置 width、height 屬性無(wú)效；

(P96) 塊級(jí)元素可以設(shè)置 margin 和 padding 屬性。行內(nèi)元素只有水平方向的 margin 和 padding 產(chǎn)生邊距效果；

(P97) 塊級(jí)元素和行內(nèi)元素的 CSS 相關(guān)屬性是 display ，其中塊級(jí)元素對(duì)應(yīng)于 display : block ，行內(nèi)元素對(duì)應(yīng)于 display : inline。 可以通過(guò)修改 display 屬性來(lái)切換塊級(jí)元素和行內(nèi)元素；

(P103)
position : relate 和 position : absolute 都可以改變?cè)卦谖臋n中的位置。設(shè)置 position : relative 和 position : absolute 都可以讓元素激活 left、top、right、bottom 和 z-index 屬性（默認(rèn)情況下，這些屬性未激活，設(shè)置了也無(wú)效）；

默認(rèn)情況下，所有元素都是在 z-index : 0 這一層；

設(shè)置 position : relative 或 position : absolute 會(huì)讓元素“浮”起來(lái)；

position : relative —— 會(huì)保留自己在 z-index : 0 層的占位；

position : absolute —— 會(huì)完全脫離文檔流，不再在 z-index : 0 層保持占位符，其 left、top、right、bottom 值是相對(duì)于自己最近的一個(gè)設(shè)置了 position : relative 或 position : absolute 的祖先元素的，如果祖先元素全部沒(méi)有設(shè)置 position : realtive 或 position : absolute ，那么就相對(duì)于 body 元素；

(P104)
float 元素屬性不會(huì)讓元素“上浮”到另一個(gè) z-index 層，它仍然讓元素在 z-index : 0 層排列， float 不能通過(guò) left、top、right、bottom 屬性精確地控制元素的坐標(biāo)，它只能通過(guò) float : left 和 float : right 來(lái)控制元素在同層里“左浮”和“右浮”。flaot 會(huì)改變正常的文檔流排列，影響到周?chē)兀?

只要設(shè)置了 position : absolute 、float : left 或 float : right 中任意一個(gè)，都會(huì)讓元素以 display : inline-block 的方式顯示 —— 可以設(shè)置長(zhǎng)寬、默認(rèn)寬度并不占滿(mǎn)父元素，就算顯式地設(shè)置 display : inline 或者 display : block 也仍然無(wú)效；

值得注意的是， position : relative 卻不會(huì)隱式改變 display 的類(lèi)型；

(P104)
行內(nèi)元素水平居中 —— text-align : center
塊級(jí)元素水平居中 (確定寬度) —— margin-left : auto 和 margin-right : auto

(P111)
CSS中有一個(gè)用于豎直居中的屬性 vertical-align ，但只有當(dāng)父元素為 <td> 或 <th> 時(shí)，這個(gè) vertial-align 屬性才會(huì)生效；

<td> 標(biāo)簽?zāi)J(rèn)情況下就隱式地設(shè)置了 vertical-align 的值為 middle ；

(P114) 注意： main 的內(nèi)容比起 sidebar 更重要，無(wú)論 sidebar 和 main 在樣式上誰(shuí)左誰(shuí)右，在HTML標(biāo)簽上要保證 main 的標(biāo)簽在 sidebar 之前被加載；

(P136) 用匿名函數(shù)將腳本包起來(lái)，可以有效地控制全局變量，避免沖突隱患；

(P147)
添加必要的注釋?zhuān)梢源蟠筇岣叽a的可維護(hù)性，對(duì)于團(tuán)隊(duì)合作來(lái)說(shuō)，更是十分有必要的；

讓JS不產(chǎn)生沖突，需要避免全局變量的泛濫，合理使用命名空間以及為代碼添加必要的注釋?zhuān)?

(P153) window 對(duì)象會(huì)在網(wǎng)頁(yè)內(nèi)元素全部加載完畢以后出發(fā) onload 事件；

(P153) DOMReady 只判斷頁(yè)面內(nèi)所有的 DOM 節(jié)點(diǎn)，是否已經(jīng)全部生成，至于子節(jié)點(diǎn)的內(nèi)容是否加載完成，它并不關(guān)心。 DOMReady 觸發(fā)的速度比 window.onload 更快；

(P159) CSS 放在頁(yè)頭，Javascript 放在頁(yè)尾；

(P174) attachEvent 是 IE 支持的方法，而 addEventListener 是 Firefox 支持的方法，attachEvent 和 addEventListener 方法支持監(jiān)聽(tīng)處理函數(shù)的疊加，而不是覆蓋；

(P185) 很多開(kāi)源的 Javascript 庫(kù)可以為我們提供強(qiáng)大的 base 層和 common 層，最常見(jiàn)的 Javascript 庫(kù)有 jQuery 和 YUI 等；

(P186)
jQuery 本身分成兩大部分： jQuery 核心文件 和 jQuery UI 文件。 jQuery UI 文件依賴(lài) jQuery 核心文件；

jQuery 核心文件提供了 base 層功能，還提供了部分 common 層功能， jQuery UI 文件提供了 common 層功能；

(P194)
因?yàn)橐粋€(gè)頁(yè)面內(nèi)，相同的 id 只能出現(xiàn)一次，所以它不適合來(lái)獲取一組有“相似功能”的 DOM 節(jié)點(diǎn)；

用標(biāo)簽名來(lái)獲得 DOM 節(jié)點(diǎn)，讓程序和 HTML 結(jié)構(gòu)耦合太緊；

(P196) 同一頁(yè)面里 id 只能出現(xiàn)一次，所以如果你的程序需要被多處復(fù)用，就一定不能使用 id 作為 Javascript 獲得 DOM 節(jié)點(diǎn)的掛鉤；

(P198) 組件需要指定一個(gè)根節(jié)點(diǎn)，以保持每個(gè)組件之間的獨(dú)立性；

(P205) 如果一個(gè)函數(shù)內(nèi)某個(gè)因素很不穩(wěn)定，我們可以將它從函數(shù)內(nèi)部分離出來(lái)，以參數(shù)的形式傳入，從而將不穩(wěn)定因素和函數(shù)解耦；

(P223)
面向?qū)ο笥⑽娜Q(chēng)叫做 Object Oriented ，簡(jiǎn)稱(chēng) OO 。OO 其實(shí)包括 OOA (Object Oriented Analysis，面向?qū)ο蠓治?、OOD (Object Oriented Design，面向?qū)ο蠓治? 和 OOP (Object Oriented Programming，面向?qū)ο蟮某绦蛟O(shè)計(jì))。面向?qū)ο蟮恼Z(yǔ)法只對(duì)應(yīng) OOP ，只是 OO 的一部分；

OOA 和 OOD 是面向?qū)ο缶幊痰乃枷?，和具體語(yǔ)言無(wú)關(guān)，而 OOP 是面向?qū)ο缶幊坦ぞ?，和選用語(yǔ)言相關(guān)；

OOA 和 OOD 與具體要求語(yǔ)言無(wú)關(guān)，一般情況下可以輕易跨語(yǔ)言重用；

(P224) 從大局上決定程序品質(zhì)的，不是 OOP ，而是 OOA 和 OOD；

(P225) 函數(shù)在 Javascript 中既可以當(dāng)做普通函數(shù)使用，也可以用作類(lèi)來(lái)使用，在充當(dāng)類(lèi)的時(shí)候，它本身又擔(dān)負(fù)著構(gòu)造函數(shù)的責(zé)任；

(P228) 用 this xxx 定義的屬性是公有的， 而用 var xxx 定義的屬性是私有的；

(P230) 原型中的行為一定是公有的，而且無(wú)法訪問(wèn)私有屬性；

(P231) 放在構(gòu)造函數(shù)里的私有行為，實(shí)現(xiàn)真正的似有；

(P253) 無(wú)論在類(lèi)的構(gòu)造函數(shù)中還是在原型中，this 都指向?qū)嵗膶?duì)象；

(P239) 作為函數(shù)的 function ,其 this 指向的是 window 對(duì)象，而作為類(lèi)構(gòu)造函數(shù)的 function ，其 this 指向的是實(shí)例化對(duì)象；

(P259) 對(duì)于常規(guī)屬性，統(tǒng)一使用 node.xxx 的方式讀取，對(duì)于自定義屬性，統(tǒng)一使用 node.getAttribute("xxx")讀??；

最新評(píng)論