頁面製作規範文檔

1. 文件命名規範

1) 文件目錄、文件名稱統一用小寫的英文字母、數字、下劃線組合,文件名要與表現的內容相近,不到萬不得已不要以拼音作爲名稱,如 登錄頁面:login.html(不要用 denglu.html)。

2) 目錄結構規範:清晰的站點目錄結構方便文件的維護和整理,同時對增加搜索引擎的友好度和移植也有着重要的影響。

2. 圖片製作規範

1) 如果圖片作爲內容放在html代碼裏,則必須定義它的寬度和高度。

2) 如果圖片不包含任何信息,僅是作爲裝飾使用,請將該圖片從html中分離出來。

3) 檢查是否有可能在不損失畫質的基礎上壓縮圖片,或者採用不同的文件格式來獲得最大程度的壓縮。

4) 利用css sprite 將一些小圖片合成一張大圖片,用 background-position 來定位圖片。

5) 如果有用到透明,則用 gif 格式圖片,確保各個主流瀏覽器的兼容。

6) 爲網站製作favicon.ico,不管有沒有favicon.ico,瀏覽器總是會去請求它。因此,我們需要爲網站製作一個小圖標,並將其緩存到用戶的電腦中去

3. Html代碼規範

1) 要建立一個符合標準的頁面,doctype聲明是必不可少的。

2) 每個頁面最好有標題、描述、關鍵字

3) 大部分javascript的調用應寫在最下面,即</html>的後面。

4) html代碼要求所有的標籤必須小寫。

5) 禁止使用frame框架。

6) 屬性值必須使用雙引號,以免引發不必要的頁面問題。

7) 所有標籤必須有閉合標籤,如<p></p>,<div></div>

如果使用 img 或者 br、hr、input 這樣的單體標籤,那麼必須使用空格加斜線爲閉合標籤,如<img />,<br />,<input />。

8) 必須設置 img 的 alt 屬性,如沒替換文本則留空。

9) 必須給 a 標籤加上 title 屬性,如沒有則留空。

10) 如果無特殊說明,所有鏈接必須新開窗口

11) 所有的特殊符號編碼化。

12) 可以在主要的區域加上註釋,但要儘量減少註釋的內容。

13) html 標籤必須合理嵌套,如<ul><li></li></ul>。

14) 保持頁面的整潔,儘量減少 html 的層次,用最少的代碼寫出符合標準的頁面。

15) 正確使用 html 標籤定義頁面內容,每一個標籤都有自己的語義。

如,文字用 span 段落用 p 標題用 title 佈局用 div 等。

16) 每個頁面都要有一個<h1></h1>裏面的內容爲PSD的slogan。

17) 相同域名下的鏈接用相對路徑。

18) 註冊類頁面,註冊按鈕必須先鎖住,等html加載完成後解鎖。

19) 禁止在頁面中使用表現級標籤,如font、bgcolor等。

禁止不符合web標準的標籤,如<font></font>,<b></b>,<u></u>,<i></i>。

4. Css編寫規範

4.1. Css代碼規範

1) 儘量少用或避免使用id來定義css。

2) css命名可以用橫線來連接,如 xx-info。

3) 屬性值書寫順序應當按照“上右下左”書寫。

4) 當用css定義鏈接的多個狀態時,應當遵循正確的書寫順序,即“LVHA”。

5) css代碼書寫應當寫在一行裏。

6) 在定義css時,一定要注意默認值這個問題,通常我們會重置css。

7) 刪除廢棄的CSS,要做到所有聲明的類或ID都能用到。

8) 避免使用濾鏡,它的兼容性和效率同樣不是很好。

4.2. Css 縮寫規則

1) 屬性值爲0時,省略單位。

2) 顏色縮寫:#000000 縮寫爲 #000 或者 black(推薦)。

3) 字體縮寫:font-size:12px;font-family:"宋體";line-height:20px;font-weight:bold; 縮寫爲 font:bold 12px/20px "宋體";

注意:字體縮寫時,至少要定義font-size和font-family兩個值。

4) 邊距縮寫:如

margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;

縮寫成 margin:10px;

margin-top:10px; margin-right:12px; margin-bottom:10px; margin-left:12px;

縮寫成 margin:10px 12px;

margin-top:10px; margin-right:12px; margin-bottom:15px; margin-left:12px;

縮寫成 margin:10px 12px 15px;

margin-top:10px; margin-right:11px; margin-bottom:12px; margin-left:13px;

縮寫成 margin:10px 11px 12px 13px;

5) 邊框縮寫:

border:border-width | border-style | color,如 border:1px solid red;

6) 背景縮寫:

background:background-color | background-image | background-repeat | background-attachment | background-position,如 background:#000 url(images/bg.jpg) no-repeat 30% 20px;

7) 列表縮寫:

list-style:list-style-type | list-style-position | list-style-image,如 list-style:disc outside none;


PS:博客搬家了,以後不再 CSDN 更新了,見諒。最新博客地址:http://www.cnblogs.com/yjzhu/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章