html5代碼書寫規範

時間 2019-11-21

標籤 html5 html 代碼書寫規範欄目 HTML5 简体版

原文原文鏈接

DOCTYPE 頁面文檔類型統一使用HTML5 DOCTYPE.

<!DOCTYPE html>

Meta字符集設置聲明方法遵循HTML5的規範, Meta文件使用 "UTF-8" 瀏覽器顯示編碼指定.

<meta charset="utf-8">

手機端頁面添加viewport，讓網頁的寬度自動適應手機屏幕的寬度css

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0,width=device-width">
     width:可視區域的寬度，值可爲數字或關鍵詞device-width
     height:同width
     intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
     maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
              maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
     user-scalable:是否可對頁面進行縮放，no 禁止縮放

試用xhtml的編寫格式。元素的標籤和屬性名必須小寫, 屬性值必須加雙引號;

<a href="/">Home</a>

使用html5新標籤，使頁面更語義化。

<time></time>   //	定義日期/時間。
<header></header>//  定義 section 或 page 的頁眉。
<footer></footer> // 定義 section 或 page 的頁腳。
<article></article> //	定義文章。
  .....

-圖標使用css3字體圖標實現html

//html
<i class="icon-bianji"></i>

//css 
 @font-face{font-family: "weiquan";src:url(http://static.kaiba315.com/iconfont-weiquan.ttf);}
[class^="icon-"], [class*=" icon-"]{font-family:'weiquan' !important;font-style:normal;}
.icon-bianji:before { content: "\e600"; }

縮進

使用tab來表示縮進，不要使用空格; 在塊狀元素，列表，表格元素後面使用新行，而且對它的子元素進行縮進.html5

<ul>
    <li><a href="someCategory/" title="someTitle" >someTitle</a></li>
</ul>

空格去除沒必要要的空格

# Bad    
<p>test                  </p>    
# Good
<p>test</p>

-減小標籤的數量編寫 HTML 代碼時，儘可能避免多餘的父元素。不少時候，這須要迭代和重構來實現。css3

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

嵌套和閉合

元素嵌套遵循 (X)HTML Strict 嵌套規則, 推薦使用Firefox插件 HTML Validator 進行檢查; 正確區分自閉合元素和非自閉合元素. 非法閉合包括：<br>..</br>、<script />、<iframe />, 非法閉合會致使頁面嵌套錯誤問題自閉和標籤: 如下元素不要求閉合, 緣由見: HTML(5) 不要求標籤自閉合非閉合標籤:瀏覽器

Table的寫法

</td> 結束標記應該與 <td> 處於同一行，不要換行, 若是換行,瀏覽器將會解析內容爲內容+半角空格.字體

不容許任何沒有內容的空單元格存在,空單元格中必須存在

表格高度和寬度的控制, 不出現多於一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是你改動代碼中任何一個width 和height 的數值，都應該在瀏覽器中看到變化

通常狀況下只有一列的表格，width 寫在 <table> 的標籤內

只有一行的表格，height 寫在 <table> 的標籤內

多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標籤內

儘可能避免 colspan, rowspan 兩個屬性