html代碼規範

來源:互聯網
上載者:User

標籤:卸載   targe   順序   體驗   相同   字元編碼   cell   flex   屬性   

HTML代碼規範

   我們知道,前端工程師入門容易,通過學習基本的HTML和CSS就能在瀏覽器上看到實際的效果,可是要寫好的HTML,就不是那麼容易了。這裡將和大家分享HTML規範,希望大家讀完之後都能夠有所收穫。本文將主要以下面三個部分展開:

  • HTML整體結構
  • HTML代碼格式
  • HTML內容語義

 http://bootstrap.cn/p/codeguide.html  這裡的規範也不錯,有時間看看。

第一部分:HTML整體結構

  1.HTML基礎設施

   (1)檔案應以<!DOCTYPE.....>首行頂格開始,這句話告訴瀏覽器這是一個什麼檔案,我們推薦使用<!DOCTYPE html>。

   (2)必須在head元素內部的meta標籤內聲明文檔的字元編碼charset, 如:<meta charset="UTF-8">,這句代碼告訴瀏覽器應該此HTML檔案使用的字元集是什麼,如果不加此行代碼,那麼在瀏覽器中可能顯示為亂碼。

   (3) 頁面的title是極為重要的不可缺少的一項。

    當我們在sublime text編輯器中輸入!並按下tab鍵便得到:

12345678910 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>     </body></html>

  

 

  2.HTML代碼結構和視覺順序基本保持一致

        (1).按照從上之下,從左至右的視覺順序書寫HTML結構。

            (2).有時候為了便於搜尋引擎抓取,我們也會將重要內容在HTML結構順序上提前,以為搜尋引擎抓取網頁內容是自上而下的,所以將重要內容在HTML結構順序上提前可便於抓取重要的內容。

         (3).不要使用table布局,現在基本上被淘汰了,而應該代之以div來布局,方便控制。

  

 

    3.結構、表現、行為三者分類,避免內聯。

     (1).使用link引入外部css檔案到head中。注意:一般我們不適用@import來引入外部css檔案。兩者的區別可以看我的另外一篇博文《添加css的方式:link和@import的區別》。  

             (2).使用script將js檔案引入,共置於body底部,這時js檔案會最後載入,html會最先載入,使用者體驗會更好。(注意:並不是所有的js檔案都要放置於body的底部,如當我們需要使用js檔案動態修改meta元素內容時,需要將js檔案引入到head標籤中,可以看我的博文《探究移動端開發》中flexible.js檔案的引入)。

  

 

   4.保持良好的樹形結構

     (1).每一個區塊層級元素都另起一行,每一行都是用tab縮排對齊。如果不是區塊層級元素,比如幾個行內元素,我們把他寫在一行即可。注意:html、 head、 body 以及body下的第1級標籤(即直接子項目)不縮排,其他的都正常縮排。如所示:

  

         (2).當然,我們也可以在大的模組之間用空行空開,在模組內不要使用多餘的空行。

   

    

    5.其他需要注意的問題

      (1).一個標籤上引用的className不要過多,越少越好。

                  (2).對於一個語義化的內部標籤,應該盡量避免使用className。

                

 

 

第二部分:HTML代碼格式

       1.說明文案的注釋方法

    (1)開始注釋:<!-- 注釋文案 -->

            (2)結束注釋:<!-- /注釋文案 -->

             (3)允許只有開始注釋。

 

 

  

     2.嚴格嵌套

     (1).應當以最嚴格的xhtml strict標準來嵌套,不如內嵌元素不能包含區塊層級元素等等。

              (2).正確閉合標籤且必須閉合。

 

 

      3.嚴格的屬性

     (1).屬性和值全部小寫,每個屬性都必須有一個值,每個值必須加雙引號。

               (2).沒有值的屬性必須使用自己的名稱做為值(checked、disabled、readonly、selected等等)。

               (3).可以省略style標籤和script標籤的type屬性。

 

 

第三部分:HTML內容語義

  1.加強資源型內容的可訪問性和可用性。

    比如在img標籤內加入alt屬性,在audio內加入文案和連結等等。

  2.加強不可見內容的可訪問性

    比如背景圖片的文字應該同時卸載HTML中,並使用css使其不可見,有利於搜尋引擎抓取你的內容,也可在css失效的情況下看到內容。

  3.適當使用實體

    以實體代替與HTML文法相同的字元,避免瀏覽器解析錯誤。

    常用的HTML字元實體(建議使用實體):

    常用的字元實體(不建議使用實體):

 

  

  

 

  更多HTML、CSS規範點擊這裡。

 

   

html代碼規範

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.