前端程式碼規範html

黃金定律

語法

• 用四個空格代替tab
• 巢狀元素應當縮排四個空格
• 屬性的定義要加雙引號
• 不要在自閉合標籤里加 /

相容模式

<meta http-equiv='X-UA-Compatible' content='IE=edge，chrome=1'>

引入css和js檔案

• H5專案不用寫type

屬性順序

• class
• id，name
• data-
• src，for，type，href，value，mac-length，，，，，

布林屬性

• checked，seclected等不用寫true

語義化標籤

• nav
• header
• section。。。。

合理使用標籤

1. 內聯元素不能巢狀塊級元素
2. li用於ul或ol下
3. dd，dt用於dl下
4. thead，tbody，tfoot,tr,td,用於table下
5. a標籤裡不可以巢狀互動式元素a，button。select等
6. ，p，h1-h6不可以巢狀塊級元素div，h1-h6，p，ul，ol。li

嚴禁多div，多span

標籤屬性命名規範

1. id和class的名稱一律小寫，必須增加字首fd—（公司統一要求），多個單單詞以連字元“-”連線，如id：連線符命名法id="fd-hello-world"

2. name:採用駝峰命名法name="helloWorld"

3. 對於作為js鉤子的id和class命名規則以"js-"開頭，後面加上原有的命名，在使用class的時候需要放在最前面，如：class="js-tab-01 fd-tab-01" （注意：鉤子，不允許在css中定義任何文字的樣式效果）~不太理解的一條。

4. id和class的命名基本能原則：內容優先，表現為輔。首先根據內容來命名。如：header，footer，nav

5. 對於狀態類名不需要增加"fd-"字首，但是不允許單獨寫css樣式，必須和其他非狀態類的類名一塊使用

     <ul >
           <li class="fd-item active">選中</li>
           <li  class="fd-item">未選中</li>
       </ul>
       <style>
               ul .fd-item{
               color: red;
           }
           	ul .fd-item.active{
               color: green;
           }
       </style>
    
   

6. 常用狀態名字，此類命名不需要增加字首fd-.以下就disable可單獨使用，其他禁止單獨使用

   • hover 劃過時

   • visited 訪問過後

   • waring 警告

   • default 預設

   • current 當前的

   • selected 選中的

   • disabled 禁用的

   • focus 獲得焦點

   • blur 失去焦點

   • success 成功

   • checked 選中（checkbox）

   • error 出錯

   • active 啟用

禁忌

  1. 結構層，行為層，表現層，分離這是基本原則，頁面中不允許出現css內容（包括行內樣式和style）
  2. js必須放到body結束標籤前，禁止放到head標籤裡面
  3. 儘量不要用 `<br>`來換行
  4. 原則上img禁止來人為干預圖片顯示的尺寸，儘可能發揮瀏覽器自身的功能
  5. 不同語種之間加半形空格
  6. 嚴禁使用`<font size=?>`標識，已經廢棄了

按模組添加註釋

在每個模組開始和結束的地方添加註釋

<!--新聞列表模組-->
	<div class='news'>
	...
	</div>
<!--新聞列表模組-->

文件模板

此處省略。。。。。

程式碼檢測

驗證程式碼有效性

不全後續補充