本篇簡(jiǎn)潔記錄一下，有些值得學(xué)習(xí)的地方，方便日后記憶在辆。

1.web標(biāo)準(zhǔn)--結(jié)構(gòu)、樣式桥氏、行為 的分離

• 結(jié)構(gòu)標(biāo)準(zhǔn)（xml、xhtml粒褒、html）
• 樣式標(biāo)準(zhǔn)（css）
• 行為標(biāo)準(zhǔn)（DOM识颊、ECMAScript）

2.語(yǔ)義化標(biāo)簽意義在于

• 搜索引擎看到的只是代碼只能通過(guò)標(biāo)簽來(lái)判斷語(yǔ)義，來(lái)看當(dāng)失去樣式"css裸體日"（Web Developer可調(diào)試）奕坟，網(wǎng)絡(luò)結(jié)構(gòu)是否組織良好有序/可讀性

• 語(yǔ)義化標(biāo)簽應(yīng)該注意：盡可能少地使用無(wú)語(yǔ)義標(biāo)簽div和span祥款； 在語(yǔ)義不明顯，既可以使用p也可以用div的地方月杉，盡量用p刃跛，因?yàn)閜默認(rèn)情況下有上下間距，去樣式后的可讀性更好苛萎，對(duì)兼容特殊終端有利桨昙；

3.組織CSS的方法

• base.css:與具體UI無(wú)關(guān)，力求精簡(jiǎn)和通用
• common.css:提供組件級(jí)的css類(lèi)腌歉，盡可能將內(nèi)部實(shí)現(xiàn)封裝
• page.css:高度重用的模塊有蛙酪，每個(gè)頁(yè)面都自己的page

4.CSS命名：

• 駱駝命名法: 區(qū)別不同單詞，
• 劃線(xiàn): 表明從屬關(guān)系,推薦組合命名

• 如果不確定模塊的上下margin特別穩(wěn)定翘盖，最好不要將它寫(xiě)到模塊的類(lèi)里桂塞，而是使用類(lèi)的組合，單獨(dú)為上下margin掛用于邊距的原子類(lèi)（如mt10馍驯，mb20）.模塊最好不要混用margin-top和margin-bottom阁危，統(tǒng)一使用margin-top或margin-bottom(上下margin會(huì)重合玛痊，左右不會(huì))。

5.權(quán)重:

• HTML標(biāo)簽權(quán)重是1
• class的權(quán)重是10
• id的權(quán)重是100
• !important的權(quán)重是1000狂打。
• 如果CSS選擇符權(quán)重相同擂煞，那么樣式會(huì)遵循就近原則(哪個(gè)選擇符最后定義，就采用哪個(gè)選擇符的樣式)
• CSS選擇符需保證權(quán)重盡可能低趴乡。少用自選擇器对省，多添加class。

6.CSS sprite

• 圖片翻轉(zhuǎn)技術(shù)將多張圖片合并為一張,不懂可看這里
  雪碧圖 （耗時(shí)5分鐘）

7.CSS hack

• IE條件注釋?zhuān)籰t,gt,lte,gte
• 選擇符前綴法晾捏；
• 樣式屬性前綴法官辽。

8.解決超鏈接訪問(wèn)后hover樣式不出現(xiàn)的問(wèn)題

• love hate原則，即l（link）ov（visited）e h（hover）a（active）te粟瞬。

9.haslayoutIE瀏覽器專(zhuān)有的屬性

• 用于CSS的解析引擎，在IE下一些復(fù)雜的CSS設(shè)置解析起來(lái)會(huì)出現(xiàn)bug萤捆，
• 其原因可能與haslayout沒(méi)有被自動(dòng)觸發(fā)有關(guān)裙品；haslayout觸發(fā)方法：設(shè)置width，height的值俗或，設(shè)置position為relative市怎，但是會(huì)有副作用；更好的解決方法：使用“zoom：1”.

10.塊級(jí)元素和行內(nèi)元素

• 塊級(jí)元素（div,p,form,ul,ol,li）
• 行內(nèi)元素（span,strong,em）設(shè)置width辛慰，height屬性,豎直方向邊距（內(nèi)外）無(wú)效区匠。

11.display：inline-block

• 行內(nèi)的塊級(jí)元素，擁有塊級(jí)元素的特點(diǎn)帅腌，可以設(shè)置長(zhǎng)寬驰弄，可以設(shè)置margin和padding的值，卻不獨(dú)占一行速客，寬度并不沾滿(mǎn)父元素戚篙。
• IE6和IE7不支持，可以通過(guò)觸發(fā)行內(nèi)元素的halayout實(shí)現(xiàn)溺职。

12.水平居中

• 行內(nèi)元素的水平居中： text-align：center
• 確定寬度的塊級(jí)元素的水平居中 ：margin-left：auto岔擂；margin-right：auto
• 不確定寬度的塊級(jí)元素水平居中：
  1.將ul包含在table標(biāo)簽內(nèi)，對(duì)table設(shè)置margin-left：auto和margin-right：auto浪耘；
  2.改變塊級(jí)元素的display為inline類(lèi)型乱灵，然后使用text-align：center；
  3.給父元素設(shè)置float七冲，然后父元素設(shè)置position：relative 和left：50%痛倚，子元素設(shè)置position：relative和left：-50%。

13.垂直居中

• 父元素高度不確定的文本癞埠，圖片状原，塊級(jí)元素的豎直居中：通過(guò)給父容器設(shè)置相同上下邊距實(shí)現(xiàn)聋呢。

• 父元素高度確定的單行文本的豎直居中：通過(guò)給父元素設(shè)置line-height來(lái)實(shí)現(xiàn)，line-height值和父元素的高度只相同颠区。

• 父元素高度確定的多行文本削锰，圖片，塊級(jí)元素的豎直居中
  1.當(dāng)父元素為td或th時(shí)毕莱，可以設(shè)置vertical-align屬性
  2.對(duì)支持display：table-cell的IE8H和Firefox用display：table-cell和vertical-align：middle來(lái)實(shí)現(xiàn)居中
  3.不支持的IE6和IE7器贩，使用特定格式的hack。

14.合作控制全局變量

• 團(tuán)隊(duì)合作中朋截，用匿名函數(shù)將腳本包起來(lái)蛹稍，可以有效控制全局變量，避免沖突隱患部服。

15.JavaScript分層

• base層：
  1.位于底端唆姐，封裝不同瀏覽器下JavaScript的差異
  2.提供統(tǒng)一的接口，可以靠它來(lái)完成跨瀏覽器兼容的工作
  3.擴(kuò)展JavaScript語(yǔ)言底層提供的接口廓八，讓它提供更多更為易用的接口奉芦。
• common層：
  1.中間層，依賴(lài)base層提供的接口
  2.common層提供可供復(fù)用的組件剧蹂，和頁(yè)面功能沒(méi)有直接關(guān)系
• page層：位于頂端声功，和頁(yè)面里的具體功能需求直接相關(guān)

16.獲得DOM節(jié)點(diǎn)的三種方法

• getElementById，
• getElementsByTagName
• getElementsByClassName（這個(gè)原生js沒(méi)有,類(lèi)庫(kù)有）

17.使用id的注意事項(xiàng)

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

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