ShopEX模板制作教程之Html規范

2024-07-09 22:58:03

字體：大中小

來源：轉載

供稿：網友

頁面編碼規范和標簽規范

1、頁面統一utf-8編碼，如果中文不能正常顯示，請用editplus打開，另存，編碼選utf-8。友情提示:模板代碼當中很多莫名其妙的換行都可能跟編碼有關！

2、 DTD統一加<!DOCTYPE html>

3、頁面中引入樣式或js時，不需要加類型聲明：（html5 規范）

<link rel="stylesheet" href="..." /><style>...</style><script src="..."></script><script></script>

4、所有編碼均遵循 xhtml 標準，包括標簽、屬性、屬性名全部小寫，屬性值用 "" (雙引號)引起來，標簽要閉合，非單標簽要加對應的結束標記，單標簽以" />"結束。提醒：IE下的頁面變形很多都與標簽未閉合有關系。

5、標簽要按順序合理嵌套。如：

<p><b></p></b>

須修改為：

<p><b></b></p>

6、 <div>里可以包含<p>，但是<p>里不允許包含<div>。類似的還有<ul>和<ol>里不允許包含<li>以外的標簽。

7、 <li>標簽必須被<ul>或<ol>包裹,<dt>和<dd>必須被<dl>包裹。

8、 <input>和<button>必須指明默認的type，form必須有默認的method，可避免在不同瀏覽器下產生的差異。

9、按鈕用<button>而不用<input />。

10、前臺不用table做布局。

11、 html功能塊之間寫明注釋，注釋亦精不亦多。如：

<!-- sample START -->

<div id="sample">		...</div>

<!-- /sample END -->

12、視情況為鏈接添加title，圖片要添加alt及title。

13、把css調用寫在頭部，js盡量寫在尾部。

14、不在html中混合js及event事件。

15、模仿a鏈接點擊樣式可用class="pointer"或class="lnk"，盡量少用javascript:void(0);偽協議，避免ie6出錯。

16、明確指定圖片的width和height。不僅對seo有用，對因各種原因無法顯示圖片的情況下，也能保持布局樣式不變。

17、通過給元素設置自定義屬性來存放與 JS 交互的數據，屬性名格式為 data-xx (例如：data-lazyload-url) 。

id和class命名規范

1、 id 和 class 的命名總規則為：內容優先，表現為輔。首先根據內容來命名，比如 main-nav。如果根據內容找不到合適的命名，可以再結合表現來定，比如 skin-blue， present-tab，col-main。

2、 id 和 class 名稱可采用連字結符連接與駝峰式寫法相結合，i比如 recommend-presents，pictureList-item。d必須使用下劃線進行連接，如product_title。class必須使用連字符進行連接，如productItem-lists。這樣容易區分，同時對腳本調試有幫助。

3、 id 和 class 名稱中只能出現 26 個英文字母、數字、下劃線"_"和連字符"-"，任何其它字符都是不被允許使用的。

4、 id 和 class 盡量用英文單詞命名。對于某些產品特色詞匯，也可以使用拼音，其它任何情況下都禁止使用拼音。

5、系統級前臺class名稱都以 ex 開頭,比如 ex-goods-detail.盡量不要超過三級。