1.HTML書寫規范
1.文檔類型聲明及編碼
統一為html5 聲明類型。編碼統一為utf-8。
2.頁面tdk
TDK是一個縮寫,其中“T”表示為網頁定義標題,“D”表示為網頁定義描述 description,“K”表示為搜索引擎定義關鍵詞keywords。
1、<title>標題:只強調重點即可,盡量把重要的關鍵詞放在前面,關鍵詞不要重復出現,盡量做到每個頁面的<title>標題中不要設置相同的內容。
2、<meta keywords> 標簽:關鍵詞,列舉出幾個頁面的重要關鍵字即可,切記過分堆砌。
3、<meta description> 標簽:網頁描述,需要高度概括網頁內容,切記不能太長,過分堆砌關鍵詞,每個頁面也要有所不同。
<link href=" favicon.ico” rel=” icon”>
3.書寫規范
書寫時根據頁面結構實現層次分明的縮進;
標簽、屬性、屬性命名由小寫字母及下劃線、數字組成,且所有標簽必須閉合;屬性值必須用雙引號包括。
4.語義化HTML
根據頁面結構選擇合適的標簽,如標題根據重要性用h1-h6不同等級的標簽標記、段落標記用p、結構簡章重復的部分用ul, li標簽。
頁面中重要的圖片內容要添加alt=””替換文本,以便圖片丟失時,用戶可以根據替換文本了解頁面內容。據模塊內容定義 class 和id 名稱,如包含logo和搜索框等在內的頭部標簽用 header,包含聯系信息,版權等的模塊用footer 或copyright。
5.合理嵌套HTML 標簽
合理嵌套?HTML 標簽,ul 和 li 是固定嵌套,ul 直接子元素必須是 li,dl 和 dt、dd 是固定嵌套,dl 的直接子元素必須是 dl 和 dd。p 標簽不允許嵌套 p 標簽。a 標簽不允許嵌套 a標簽和其他交互性元素,比如 button。盡可能的控制元素嵌套層級,不合理的嵌套會影響頁面性能。
6.保證結構與表現相分離
CSS表現層和JavaScript表現層分別歸屬于獨立的.CSS和 js文件。
在頁面中盡量避免使用行內樣式,即?style=”…”,應該盡量使用 class 或者 id 來定義新的樣式,然后在對應的CSS文件里面修改,js同理。
2.CSS 書寫規范
1.編碼?
編碼統一為utf-8。
2.書寫代碼前
確定版心,PC 端要確定頁面有效區域寬度(常見有效區寬度為1000px、1200px)如超過1200px需要與需求溝通確認。
考慮樣式表規劃,提高樣式重復使用率。
規劃重置樣式表:
因為瀏覽器的兼容問題,不同瀏覽器對某些標簽默認值的解析是不同的,如果沒對CSS初始化往往會出現不同瀏覽器之間的頁面顯示差異。為了避免這種差異需要使用樣式重置。
例如:
1、提前溝通頁面中模棱兩可的需求和交互效果,方便后續合理布局;
2、布局時考慮后續交互效果處理的便利性,必要時預留出交互效果中涉及到的樣式類。
頁面主體:
(如鼠標點擊后的樣式等)
3.書寫代碼時
1.添加注釋:應該為大區塊樣式添加注釋,小區塊適量注釋。
2.class 與id的命名。
命名要語義化、簡明化;
CSS命名時要加前綴zg如:.zg_top{****};
常用命名方法一:選擇器名稱由小寫英文、數字和_來組合命名:如zg_top,
zg_footer;避免使用中文拼音,盡量使用簡易的單詞組合;
常用命名方法二:首字母大寫,駝峰式命名如:topNav;
3、保持代碼縮進與格式:建議單行書寫,也可根據自身習慣,后期統一優化處理。
4、CSS屬性書寫順序:
建議遵循:布局定位屬性->自身屬性->文本屬性->其他屬性。也可根據自身習慣書寫,但盡量保證同類屬性寫在一起。
自身屬性主要包括:width、height、background、margin、padding和border 等。
文本屬性主要包括:color、font、text-decoration、text-align、vertical-align等。
5、書寫代碼過程中要注意兼容問題,對熟知的兼容問題在書寫代碼過程中一并處理。注:需要注意ie8以下的項目和專題,慎用?CSS3 除圓角、投影等偏向界面修飾性屬性之外的其他屬性,避免兼容問題。
3.注意事項
頁面中的文本內容,除了需求特意說明之外,一般能用文字的都用文字,保證靜態頁面的可編緝性。
注:專題里的特殊字體一般要切圖,但具體情況與需求溝通。
pc 端頁面需要兼容 IE8 以下時,布局中如果用到 HTML5的標簽,注意處理兼容或避免使用。
頁面布局時能用正常文檔流布局的就不要使用定位布局。
盡可能不使用表格布局,但頁面設計中以表格形式展示的內容模塊也要盡量使用表格布局。通常頁面中需要添加鏈接的部分,PC 端要設置在新窗口打開屬性。