編寫高品質代碼——html、css

標籤：

【編寫高品質代碼】
1、注釋的必要性：增加代碼的可讀性。
2、web標準：由一系列的標準組合而成，其核心理念是將網頁的結構、樣式、行為分離，所以他可分為：結構標準、樣式標準和行為標準。
3、一個符合標準的網頁，標籤中的標籤名應該全部都是小寫，屬性要加上括弧，樣式和行為不要夾雜在標籤中，而應該分別單獨存放在樣式檔案和指令檔中。理想狀態下，網頁原始碼有三部分組成：.html檔案、.css檔案、.js檔案。
4、所謂高品質的代碼，在web標準的指導下，在實現結構、樣式和行為分離的基礎上，還要做到三點：精簡、重用、有序。
5、閑聊原生javascript、javascript類庫和Ajax:
原生的javascript是瀏覽器預設支援的指令碼語言，ajax是一種利用javascript和XMLHttpRequest對象在用戶端和伺服器端傳遞資料的技術，因為XMLHttpRequest對象也是用javascript來建立的對象，從某種意義上來說，ajax是javascript的一個子集。

【高品質的html】
標籤的語義化：原因是搜尋引擎看不到視覺效果，看到的只是代碼，只能通過標籤來判斷內容的語義。
table布局的網頁有如下特點：
代碼量大，結構混亂；
標籤語義不明確，對搜尋引擎不友好。

正確的做法是：先確定html，確定語義的標籤，再來選用合適的css。
當頁面內標籤無法滿足設計需求是，才會添加div和span來輔助實現

語義化標籤應注意的一些問題：
盡量少的使用無語義化標籤div和span；
在語義不明顯，即可用p也可以用div的地方，盡量用p。因為p預設情況下有上下間距，去樣式後可讀性更好，對相容特殊終端有利。
不要使用純樣式標籤，例如:b、font、u等。該用css樣式。

【高品質的css】
怪異模型和DTD：有時候不遵從標準模型的的模式；DTD指的是document type definition，及文件類型定義，它是一種保證html文檔格式正確的有效方法，一個DTD文檔包含元素的定義規則、元素的關係的定義規則、元素課使用的屬性，可使用的實體或符號規則。

如何 組織css:
人們比較推薦的組織方法：base、common、page，三個層次分別表示：base是最低層，會被所有頁面引用，這一層與ui設計無關，無論任何風格的設計都可以引用他；common層，是組建級的css可以重用的csspage層，是最高層，每個頁面的都不一樣。

什麼是css  reset?
html標籤在瀏覽器裡面有自己的預設樣式，通過重新定義標籤的樣式，“覆蓋”掉瀏覽器的預設樣式，就叫做css reset。例如：*{margin：0；padding：0；}就是最早的css reset ，有些人喜歡在萬用字元“*”中寫很多樣式，但這是非常不好的，因為css的很多樣式是具有繼承性的，但是繼承的權重是非常低的，比標籤選擇符的權重更低，這樣的寫法會破化css的繼承性，設定樣式時會增加很多額外的代碼。

css命名——命名空間的概念
首先，css命名推薦使用英語，不要使用漢語拼音 ，我們可以根據內容來選用合適的英文單詞來命名css，我們可以通過駱駝命名法和劃線命名法來命名，駱駝命名法用於區別不同的單詞，劃線用於區別不同的從屬關係。在css中還引入了物件導向編程的思想對css進行命名，及根據不同的盒子的從屬關係來進行命名。

在給幾個相同的盒子定義樣式的時候：多用組合，少用繼承。

margin的上下處理：如果對相鄰的模組同時使用margin-top和margin-bottom，邊距會重合帶來不必要的麻煩，所以最好統一使用不同的margin-top或margin-bottom，不要混合使用。（總結：如果不確定模組上下margin特別穩定，最好不要將它寫到模組的類裡，而是使用類的組合，單獨為上下margin掛用邊距的原子類，模組最好不要混用，統一使用。）

低權重原則——避免濫用子選取器
當不同選擇符的設定有衝突時，會採用權重高的選擇符設定的樣式。權重的規則是這樣的：html 標籤的權重為1，class的權重為10，id的權重是100，p的權重是1等。如果css選擇符的權重相同，那麼樣式會遵循就近原則，那個選擇符最後定義，就採用那個選擇符定義的樣式。
使用子選取器，會增加css選擇符的權重，css的權重越高。樣式越不容易被覆蓋，越容易對其他選擇符產生影響，為了保證樣式容易被覆蓋，提高可維護性，css選擇符需要保證權重儘可能低。相比之下，新添class更利於維護。

css sprite
css sprite即將網站的背景圖片合并在一張大紙上，圖片的載入是會發出http請求的，一張圖需要一個http請求，多張就要多條http請求，http請求越多，訪問伺服器的次數就越多，伺服器的壓力就越大，這樣講多張圖合并在一張上，會大大減少網頁的http請求，減少伺服器的壓力。但是他也會“降低開發效率”，“增大維護難度”。所以，是否使用css sprite 主要取決於網站的流量。

display：inline-block：它是行內的區塊層級元素，他擁有區塊層級元素的特點，可以設定寬度、長度，但是他卻不可以獨佔一行他的寬度並不佔滿父元素，而是和行內元素一樣，可以和其他行內元素排在同一行裡。

文檔流： 網頁雖然看上去是二維結構，但實際上他是有z軸的，z軸的大小由z-index控制，預設情況下，所有元素都在z-index：0 ；這層，元素根據自己的display類型、長度 等屬性排列在z-index：0 這層，這就是文檔流。

position：relative和position：absolute都可以改變元素在文檔流中的位置，設定position：relative和position：absolute就會啟用left、top、right、bottom和z-index屬性，（默情況下，這些屬性未經啟用，是沒有效果的）。當網頁設定了position：relative和position：absolute是，網頁的z軸被啟用，這時設定的position：relative和position：absolute都會高於z-index：0；層；相比之下，position：relative會保留在z-index：0；層原有的位置（空間），只是相對於z-index：0；層高了一層；而position：absolute會完全脫離文檔流，不再z-index：0；層保留預留位置。對其做的定位都是相對於他自己最近的一個設定了position：relative和position：absolute的祖先元素或body元素。根據元素的不同定位概念，我們就可以對其進行一些相關的樣式。

編寫高品質代碼——html、css