html書寫規範

時間 2019-12-04

標籤 html 書寫規範欄目 HTML 简体版

原文原文鏈接

文件及格式化

文件編碼爲 utf-8

更多UTF-8內容: http://zh.wikipedia.org/zh/UTF-8javascript

使用 Tab 進行縮進, 使用正確的縮進來代表嵌套層次
網頁大小

「網頁大小」定義爲網頁的全部文件大小的總和，包括HTML文件和全部的嵌入的對象。用戶喜歡快的而不是新奇的站點。網頁主體加載速度控制在 3S 之內html

命名規則

寫法技巧

DOCTYPE

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

<!doctype html>

兼容性

代碼使用html5標準代碼編寫文檔, 而且ie6, 7, 8, 9, ff, chrome作到兼容, 禁止使用不兼容的標籤,附錄中包含了html5不支持的代碼和新增的代碼,這些標籤禁止使用. 禁止使用特殊的標籤,禁止使用JS對IE6中不支持的標籤進行兼容, 禁止使用HTML5 Shiv 對瀏覽器進行兼容java

Meta字符集設置

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

<meta charset="utf-8">

註釋

邏輯註釋爲了可以和程序註釋進行統一和文件的無差別性修改. 而且註釋不會在前臺代碼實現, 這個也不會影響服務器對編譯過的模版的解析, 註釋示例:

<!--{* 這裏是註釋的內容, 這裏在html源碼項目中不會顯示, 這裏的註釋僅僅用於數據邏輯調用 增長新模塊 (User)[2014-05-06] *}-->
<div>
</div>

模塊註釋建議對超過一屏的代碼頁面模塊進行註釋, 以下降開發人員的嵌套成本和後期的維護成本.

<div id="sample">
    <div class="someCategory">
        ...
</div><!--  .someCategory End -->
</div><!--  #sample End -->

協議

若是連接和當前頁面一致則忽略連接的協議部分, 建議在指向圖片或其餘媒體文件、樣式表和腳本的URL地址中省略http:, https:協議部分chrome

<script src="//www.taobao.com/fp.js">

語義

使用符合語義的標籤書寫 HTML 文檔, 選擇恰當的元素表達所需的含義;瀏覽器

<a href="recommendations/">
    All recommendations
</a>

大小寫元素的標籤和屬性名必須小寫, 屬性值必須加雙引號;

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

縮進

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

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

空格

去除沒必要要的空格優化

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

嵌套和閉合

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

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

- 引號
使用雙引號來標識 html 的屬性

Bad

<a class='maia-button maia-button-secondary'> Sign in </a> # Good <a class="maia-button maia-button-secondary"> Sign in </a> ```

自定義javascript屬性經過給元素設置自定義屬性來存放與 JavaScript 交互的數據, 屬性名格式爲 data-xx (例如：data-lazyload-url)

<div class="bg bg-4"  data-load="false"></div>

目的是使用js調用時候對元素進行識別使用.

TODO

使用 TODO 來標記待作事情，便於後期搜索. 在 TODO 後添加 (姓名或郵件) 來表示分類

<!-- TODO(Mark Zhao): remove duplicate tag -->
<p><span>2</span></p>

焦點分離

將表現，行爲和結構分離：不要在 html 和模板中加入除告終構之外的東西.例如內聯樣式, center等標記. 在文檔中引入儘量少的樣式和腳本

# Bad
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I've read about this on a few sites but now I'm sure:<u>HTML is stupid!!1</u><center>I can't believe there's no way to control the styling of  my website without doing everything all over again!</center><p>
# 
# Good
<h1>My first CSS-only redesign</h1>
<p>I've read about this on a few sites but today I'm actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>

block,list或table元素

針對每一個block,list或table元素另起一行，並在每一個子元素前縮進。這樣可讀性好

<ul>
    <li>some list file</li>
    ...
</ul>
# ~
<table></table>

Table的寫法

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

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

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

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

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

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

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