HTML
標(biāo)簽書寫的規(guī)范：

1.代碼縮進(jìn)旦装，使用Tab鍵林艘。

2.標(biāo)簽通常是成對(duì)出現(xiàn)的，一開一關(guān)。也存在一些單標(biāo)簽廉侧，如：<meta />持灰、<br />等竞川。

3.標(biāo)簽與它的屬性都必須小寫膀曾。

4.所有的標(biāo)簽必須合理嵌套。

是這樣的墙基，標(biāo)簽存在一定的語(yǔ)義性软族，需要根據(jù)標(biāo)簽自身的屬性來進(jìn)行合理嵌套。例如：<p>

標(biāo)簽（paragraph）是用來定義段落的残制，就不用它來布局立砸；像<div><span><em>一念成mo</span></em></div>是不對(duì)稱的，這樣是錯(cuò)誤的痘拆。具體的基本嵌套規(guī)則：

1）body可以直接包含塊狀元素仰禽、ins、del、script吐葵。不可以直接包含行內(nèi)元素

2）ins和del（行內(nèi)元素）可以包含塊狀元素或者行內(nèi)元素规揪，其他任何行內(nèi)元素都不允許包含塊狀元素

3）p、h1-h6可以直接包含行內(nèi)元素和文本信息温峭，但是不允許包含塊狀元素

4）dl元素只允許包含dt和dd猛铅，同時(shí)dt不能包含塊狀元素，只允許包含行內(nèi)元素凤藏，對(duì)于dd可以包含任何元素

5）form元素不能夠直接包含input元素奸忽。原因在于input元素屬于行內(nèi)元素，form元素僅僅能夠包含塊狀元素

6）table元素只能夠包含caption揖庄、colgroup栗菜、col、thead蹄梢、tbody疙筹、tfoot，不能夠直接包含tr或者其他任何元素

CSS書寫規(guī)范
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

• 使用CSS縮寫屬性 CSS有些屬性是可以縮寫的禁炒，比如padding,margin,font等等而咆，這樣精簡(jiǎn) 代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。
• 去掉小數(shù)點(diǎn)前的”0″
• 簡(jiǎn)寫命名 很多用戶都喜歡簡(jiǎn)寫類名幕袱，但前提是要讓人看懂你的命名才能簡(jiǎn)寫
• 16進(jìn)制顏色代碼縮寫 有些顏色代碼是可以縮寫的暴备，我們就盡量縮寫吧，提高用戶體驗(yàn)為主们豌。
• 連字符CSS選擇器命名規(guī)范
  1.長(zhǎng)名稱或詞組可以使用中橫線來為選擇器命名涯捻。
  2.不建議使用”_”下劃線來命名CSS選擇器。 輸入的時(shí)候少按一個(gè)shift鍵望迎； 瀏覽器兼容問題 （比如使用tips的選擇器命名汰瘫，在IE6是無(wú)效的） 能良好區(qū)分JavaScript變量命名（JS變量命名是用””） 這里有一篇破折號(hào)與下劃線的詳細(xì)討論，英文：點(diǎn)擊查看 中文篇：點(diǎn)擊查看
• 不要隨意使用id
  id在JS是唯一的擂煞，不能多次使用，而使用class類選擇器卻可以重復(fù)使用趴乡，另 外id的優(yōu)先級(jí)優(yōu)先與class对省，所以id應(yīng)該按需使用，而不能濫用
• 為選擇器添加狀態(tài)前綴 有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴晾捏，讓語(yǔ)義更明了蒿涎，比如下 圖是添加了”.is-”前綴。
• CSS命名規(guī)范（規(guī)則） 常用的CSS命名規(guī)則
  頭：header 內(nèi)容：content/container 尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標(biāo)志：logo 廣告：banner 頁(yè)面主體：main 熱點(diǎn)：hot 新聞：news 下載：download 子導(dǎo)航：subnav 菜單：menu 子菜單：submenu
  搜索：search 友情鏈接：friendlink 頁(yè)腳：footer 版權(quán)：copyright 滾動(dòng)：scroll 內(nèi)容：content 標(biāo)簽：tags 文章列表：list 提示信息：msg 小技巧：tips 欄目標(biāo)題：title 加入：joinus 指南：guide 服務(wù)：service 注冊(cè)：regsiter 狀態(tài)：status 投票：vote 合作伙伴：partner
• id的命名
  (1)頁(yè)面結(jié)構(gòu) 容器: container 頁(yè)頭：header 內(nèi)容：content/container 頁(yè)面主體：main 頁(yè)尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體佈局寬度：wrapper 左右中：left right center
  (2)導(dǎo)航 導(dǎo)航：nav 主導(dǎo)航：mainnav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary
  (3)功能 標(biāo)志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊(cè)：register 搜索：search 功能區(qū)：shop
  標(biāo)題：title 加入：joinus 狀態(tài)：status 按鈕：btn 滾動(dòng)：scroll 標(biāo)籤頁(yè)：tab 文章列表：list 提示信息：msg 當(dāng)前的: current 小技巧：tips 圖標(biāo): icon 注釋：note 指南：guild 服務(wù)：service 熱點(diǎn)：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權(quán)：copyright
• 注意事項(xiàng)::
  1.一律小寫; 2.盡量用英文; 3.不加中槓和下劃線; 4.盡量不縮寫惦辛，除非一看就明白的單詞劳秋。
• CSS樣式表文件命名
  主要的 master.css 模塊 module.css 基本共用 base.css 布局、版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 補(bǔ)丁 mend.css 打印 print.css