WEB標準：標準定義、好處、名詞解釋、經常使用術語、命名習慣、瀏覽器兼容、代碼書寫規範

1. WEB標準是什麼？

    「WEB標準」是一系列標準的總稱。通常的誤區常常把WEB標準說成DIV+CSS。準確的說法應該是：採用W3C推薦的WEB標準中的XHTML1.1結合CSS2.0 樣式表製做頁面的方法。DIV 應該指的是XHTML標籤，而CSS 指的是樣式表。

 

2. 採用WEB標準開發的好處

　　2.1 節約運營成本

　   2.2 用戶友好性

　　2.3 內容跨平臺的可用性

　　2.4 加快頁面解析速度

　　2.5 更良好的用戶體驗

 

3. 名詞解釋

　　1. 橫切

　　　　頁面中950px寬而且對高度沒有限制的容器稱爲一個標準橫切。

　　2. 留白

　　　　兩個容器或碎片之間的上、下、左、右的空白距離。

　　3. 繼承

　　　　元素能夠從其父級元素中得到一些可爲本身使用的屬性或值。

　　4. 圖片定位

　　　　把圖片元素放置到一個靜態的、相對的、絕對的、或固定的位置中，利用CSS中對圖片進行遮罩屬性，多用於頁面中的修飾圖。

　　5. 底圖

　　　　頁面中在標籤中使用的背景圖。

　　6. 齊底（圖）線

　　　　用戶區分橫切或碎片結束的線或圖。

　　7. 頁面結構

　　　　頁面的基礎框架，由橫切、佈局元素組成。

　　8. 焦點區（圖）

　　　　最易注意的區域。

　　9. 導航

　　　　在頁面中具備導向性的連接集合。

　　10. 頭圖

　　　　頁面主題圖片。

　　11. 間距

　　　　碎片或文字間的距離。

　　12. 行高

　　　　文字段落中行與行之間的距離。

　　13. 首行縮進

　　　　文字段落首行縮進。

　　14. 浮動

　　　　使被定義的區域脫離正常的頁面文檔流。

　　15. 碎片

　　　　由文字、圖片組合成的內容區域。

　　16. 通欄廣告

　　　　與頁面內容區同寬的廣告區域。

　　17. 功能按鈕

　　　　具備交互屬性的功能按鈕。

　　18. 私有樣式

　　　　當前頁面獨立使用的樣式，不具有公用性。

　　19. 水平（垂直）居中

　　　　在頁面中的某個元素處於父級的上下或左右的相同距離。

　　20. 標準頭（尾）

　　　　定義相同的頁面頭或尾元素集合。

 

4. 經常使用技術術語

　　1. 浮動： float

　　2. 寬： width

　　3. 高： height

　　4. 塊元素： block

　　5. 背景： background

　　6. 無序列表：ul

　　7. 連接： a

　　8. 表單： form

　　9. 圖片： img

　　10. 段落： p

　　11. 文檔類型定義： DTD

　　12. 字體： font-family

　　13. 字號： font-size

　　14. 邊框： border

　　15. 文字對齊： text-align

　　16. 行高： line-height

　　17. 字色： color

　　18. 背景不循環： no-repeat

　　19. 內邊距： padding

　　20. 外間距： margin

　　21. 顯示方式： display

　　22. 懸停： hover

　　23. 文字修飾： text-decoration

　　24. 上： up

　　25. 底： bottom

　　26. 左： left

　　27. 右： right

　　28. 自動： auto

　　29. 粗體： bold

　　30. 正常： normal

 

5. 一些約定

　　良好的命名習慣，對一個WEB標準網站的開發來講，一定事半功倍。如下是經常使用的一些命名習慣：

　　1. 樣式名稱首字母統一爲小寫字母，不能爲數字，下劃線及特殊字符；

　　2. 樣式名儘可能語義化或簡寫；

　　3. 樣式名須要組合拼寫時，採用駝峯式拼寫，即：KeyWord；

　　4. 使用px（像素）爲基本計量單位；

　　5. 頁面中空格的使用：全角：中文空格  半角：  

　　6. 項目完成包中，文件及及文件名稱所有采用小寫字母，不使用中文文件名；

　　7. 減小DIV的嵌套層數；

　　8. 給重要圖片加上alt屬性；給重要的元素和截斷的元素加上title；

　　9. 使用正確的註釋方法；

　　10. 非特殊狀況下要求表現和內容分離，代碼中不要涉及任何表現的元素，如:style,font等；

　　11. 雙標記籤都要有開始和結束標籤，單標記標籤的後面必定要加」/「 ，如<br/>， 而且有正確的層次；

　　12. 其它特殊符號：

　　　　1） < ( &lt; )

　　　　2)  > ( &gt; )

 

 6. 命名空間

　　6.1 外掛樣式名稱

　　　　全局： global.css

　　　　　　全局樣式爲公站公用，爲頁面樣式基礎，頁面中必須包含。 

　　　　結構： layout.css

　　　　　　頁面結構類型複雜，而且公用類型較多時使用。多用在首頁類頁面及產品類頁面中。

　　　　私有： style.css

　　　　　　獨立頁面所使用的樣式文件，頁面中必須包含。

　　　　模塊： module.css

 　　　　　　產品類頁面應用，將可複用類模塊進行剝離後，可與其它樣式配合使用。

　　　　主題： themes.css

　　　　　　實現換膚功能時應用。

　　　　補丁： mend.css

　　　　　　基於以上樣式進行的私有化修補。

 

　　6.2 經常使用名稱

　　　　頭：header　　　　

　　　　尾：footer

　　　　Logo： logo

　　　　版權： copyright

　　　　內容塊：content

　　　　欄目塊：column

　　　　結構左：left

　　　　結構中：center

　　　　結構右：right

　　　　矩陣導航：matrixNav

　　　　首頁導航：indexNav

　　　　頻道二級：channelNav

　　　　導航文字：navText

　　　　內容導航：nav

　　　　內容主導航：mainNav

　　　　子內容導航：subNav

　　　　邊導航：sidebar

　　　　左導航：leftsidebar

　　　　右導航：rightsidebar

　　　　廣告：ad

　　　　搜索：search

　　　　關鍵字：keyWord

　　　　標籤：tag

　　　　菜單：menu

　　　　滾動：scroll

　　　　列表：list

　　　　下拉：drop

　　　　按鈕：btn

　　　　登錄：login

　　　　登錄條：loginbar

　　　　註冊：reg

　　　　提示信息：msg

　　　　打印：print

　　　　地圖：map

　　　　功能區：shop

　　　　Flash：flash

　　　　標題：title

　　　　更多：more

　　　　博客：blog

　　　　視頻：video

　　　　媒體：media

　　　　新聞：news

　　　　熱點：hot

　　　　評論：review

　　　　合做：cooperate

　　　　聯繫：contact

　　　　加入咱們：joinUs

　　　　合做夥伴：partner

　　　　友情連接：link

　　　　論壇社區：club

　　　　投票：vote

　　　　摘要：summary

　　　　服務：service

　　　　指南：guild

　　　　描述：description

　　　　信息：info

　　　　狀態：status

　　　　註釋：note

　　　　下載：download

　　　　價格：price

　　　　地址：address

　　　　產品：products

　　　　跳轉：jump

　　　　條：bar

　　　　線：line

　　　　小技巧：Tips

 

7. 基本設置-global.css

　　7.1 全局設置

　　　　文字（text-align）：align（居中）

　　　　上下邊距(margin, padding)：0

　　　　左右邊距（margin）：auto（自動）

　　　　底色（background）：#FFF（白色）

　　　　字體（font-family）、字號（font-size）、字色（color）："宋體「 12px #666

　　　　body 內容總體居中 ： body>div　

 

　　　　全局CSS定義

　　　　/* 全局CSS 定義 */
　　　　body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px '宋體';text-align:center;}
　　　　body > div{margin-right:auto;margin-left:auto;text-align:center; }
　　　　div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}
　　　　h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
　　　　ul,ol,li{list-style:none}
　　　　table,td,input,textarea{font-size:12px}

 

7.2 頁面標籤初始化設置

　　1. 經常使用基本標籤 div， form， ul， ol， li， span, p, dl, dt, dd, img

　　　　設置基本標籤的間距、邊框默認值爲0.

　　2. h1~h6 標題

　　　　默認標題內字號 12px， 內外間距爲0px， 文字不加粗。

　　3. ul，ol，li 列表

　　　　默認不顯示項目符號。

　　4. h2 欄目標題

　　5. 默認連接顏色

　　　　常態下不顯示文字下劃線，顏色爲灰（#333），鼠標懸浮時：顯示文字下劃線，顏色變爲暗灰（#CCC）

 

7.3 頁面寬度

　　默認頁面寬（area）：950px

 

7.4 .clear

　　結束容器內各元素的浮動屬性，使相鄰容器或元素節點正常顯示。

 

9.2 推薦樣式拼寫順序

　　1. 顯示與定位： display, position, float, list-style

　　2. 元素自身： width, height, margin, padding, border, background

　　3. 文本外觀：  color, font, line-height, text-align, text-decoration, other

      例：

          .test{float:left;width:950px;margin:10px;background:#fff;color:#000;}　　

 

9.3 樣式編寫規則

　　1. 遵循W3C XHTML 代碼編寫規範

　　2. 優先公用樣式，其次結構、再碎片，合併相關元素屬性，按從大到小排列。

　　3. 樣式中使用修飾圖遮罩方法，將公用圖片的樣式名稱複寫定義。

　　4. 繼承樣式定義，多級關係可省略多級父元素名稱，至少包含最外層父元素名稱，獨立碎片除外。

　　5. 橫切以#contentA，#contentB...定義，且公用樣式和橫切加註釋說明。

　　6. 樣式定義簡寫，替除多餘空格字符。

 

12 瀏覽器兼容

　　12.1 兼容瀏覽器及兼容要求

　　　　1. IE瀏覽器： IE6.0, IE7.0

　　　　2. Firefox瀏覽器

　　　　3. Opera瀏覽器

　　　　4. Safari瀏覽器

　　　　所定義樣式語法定義在經常使用瀏覽器中顯示無結構、顏色、效果差別。

 

　　12.3 各版本瀏覽器HACK / 12.4.1 瀏覽器兼容的通常寫法

　　　　區別各版本瀏覽器的樣式方法，注意樣式定義順序。

　　　　當須要解決瀏覽器兼容問題時，通常採用下面寫法能夠解決，如margin問題：

　　　　margin:8px: 正常語法，全部瀏覽器都可以正常解析

　　　　*margin:9px: 針對IE7.0的特殊寫法，只針對IE7.0以上的瀏覽器有效。

           _margin:10px: 針對IE6.0的特殊寫法，只針對IE6.0 以上瀏覽器有效。

　　　　_margin/**/:10px: 針對IE5.0的特殊寫法。 IE6.0不支持，IE7.0支持。

 

　　12.4.3 Firefox浮動層背景圖不能自動平鋪

　　　　嵌套DIV，當子div爲浮動（float）時，父div的高度在Firefox不能根據子DIV自動變化。瀏覽器高度不能自動計算。致使的結果是當父層div有背景色和背景圖時不能自動平鋪。

　　　　解決辦法是：給父層div 添加樣式clear 清除浮動，這樣父div 就會隨子div高度自動計算，以下代碼：

　　　　.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

      .

      .

      .

17 代碼書寫規範

　　17.1 註釋

　　　　17.1.1 HTML註釋

　　　　正確的註釋規範：<!-- 這裏是註釋 --> 感嘆號後面2個橫線，結束時2個橫線

　　　　17.1.2 CSS樣式註釋

　　　　因爲 CSS+DIV 製做頁面，樣式代碼多，佈局比較複雜，更便於頁面後期的維護，更改。因此有必要在樣式中加上註釋。註釋規則以下：

　　　　/* 這裏是註釋 */

 

　　17.2 縮進

　　　　根據頁面代碼結構進行包含縮進，這樣代碼層次結構清晰。

　　17.3 回車

　　　　同級間結構或碎片代碼塊之間添加換行。

 

【本文內容摘自：搜狐WEB標準_前端技術應用規範】