首頁 > 開發者 > 網站開發

HTML編碼建議

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   io   ar   color   使用   sp   strong   檔案   on   

1、<!DOCTYPE HTML>      讓瀏覽器自己選擇渲染頁面的標準，同時為了擁抱未來
2、<meta charset="utf-8" />      定義頁面字元編碼，精簡的代碼，同樣的效果
3、樣式檔案放頭部，且盡量減少引入的檔案數量

  1. <head>
  2.         <!--CSS樣式-->
  3.         <link rel="stylesheet" href="xxx.min.css" />
  4. </head>

4、指令檔放底部，當發布項目的時候盡量壓縮合并

  1. <body>
  2.      <!--JS代碼-->
  3.      <script src="xxx.min.js"></script>
  4. </body>

5、為頁面添加註釋

  1. <!--頭部header-->
  2. <header></header>
  3. <!--頭部header-->    
  4. <div class="content"></content>
  5. <!--底部Footer-->
  6. <footer></footer>

6、縮排和換行 使用4個空格作為一個縮排層級，大多數時候，開發工具協助我們完成了此項內容。

  1. // 不建議
  2. <ul><li><a href="#"></a></li><li><a href="#"></a></li></ul>
  3. // 建議
  4. <ul>
  5.         <li><a href="#"></a></li>
  6.         <li><a href="#"></a></li>
  7. </ul>

7、標籤閉合

  1. // 不建議
  2. <br >
  3. <p> xxxx
  4. <p>xxxx
  5.     
  6. // 建議
  7. <br />
  8. <p>xxx</p>
  9. <p>xxx</p>

8、標籤名小寫，標籤屬性值添加雙引號

  1. // 不建議
  2. <P data-id=p1></P>
  3.     
  4. // 建議
  5. <p data-id="p1"></p>

9、使用CSS為頁面添加圖片 當然頁面上的動態內容還是必須使用<img src="#" />標籤的
10、為圖片標籤添加alt和title屬性，圖片的src屬性不可為空

  1. <img title="" src="#" />

11、為頁面當中的塊結構底部添加空白行

  1. <header>
  2.         <h1>w3cfuns</h1>
  3. </header>
  4. <div class="content">
  5.         // something
  6. </div>
  7. <footer>
  8.         <p class="copyRight"></p>
  9. </footer>

12、去除樣式引用和指令碼引用當中的type屬性
13、標籤語義化

  • 結構性元素：       

 p：表示段落，只能包含內嵌元素，不能包含區塊層級元素        

div：本身舞特殊含義，可用於布局，幾乎可以包含任何元素      

 br：表示分行符號        

hr：表示水平分隔字元        

h1-h6：表示標題。其中h1用於表示當前頁面最重要內容的標題，建議每個頁面只有一個H1標籤        

blockquote：表示引用，可以包含多個段落。請勿純粹為了縮排而使用blockquote，大部分瀏覽器預設將blockquote渲染為帶有左右縮排       

  pre：表示一段格式化好的文本

  • 頭部元素：        

title：每個頁面必須有且僅有一個title元素        

base：可用情境——首頁，頻道等大部分連結為新視窗開啟的頁面        

link：用於引入CSS資源時，可省去media和type屬性        

style：type預設為text/css，可以省去        

script：type屬性可以省去；不贊成使用lang屬性；

不要使用古老的<!-//-->這種hack指令碼，它用於阻止第一代瀏覽器將指令碼顯示成文字；

  • 列表元素：        

ul：表示無須列表        

ol：表示有序列表，可用於熱門排行榜等；        

li：表示清單項目，必須是ol/ul的子項目        

dl：表示關聯列表，dd是對dt的解釋；dt和dd的對應關係比較隨意：一個dt對應多個dd、多個dt對應一個dd、多個dt對應多個dd,都合法；可用於名稱單詞解釋、議程列表、網站目錄；

  • 文本元素：        

a：存在href屬性時表示連結，無href屬性但有name屬性工作表示錨點        

em,strong,i,b：表示句意強調，加與不加會引起語義變化，可用於表示不同的心情或語調；strong表示重要性強調，可用於局部或全域，strong強調的是重要性，不會改變句意；        

abbr：表示縮寫        

sub,sup：主要用於數學和化學公式，sup還可用於腳註        

span：本身無特殊含義        

ins,del：分別表示從文檔中增加（插入）和刪除

  • 表單元素：        

推薦使用button代替input，但必須聲明type屬性        

推薦使用fieldset,legend組織表單        

表單的name不能設定為action，enctype,method,novalidate,target,submit會導致表單提交混亂

HTML編碼建議

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More