良好的HTML編碼風格

時間 2019-11-07

標籤良好 html 編碼風格欄目 HTML 简体版

原文原文鏈接

首發於fxm5547的博客javascript

HTML編碼規範

1 前言

HTML做爲描述網頁結構的超文本標記語言，在百度一直有着普遍的應用。本文檔的目標是使HTML代碼風格保持一致，容易被理解和被維護。css

2 代碼風格

使用 2 個空格作爲一個縮進層級，不容許使用 4 個空格或 tab 字符。 .editorconfig自動配置html

示例：java

<ul>
  <li>first</li>
  <li>second</li>
</ul>
複製代碼

每行不得超過 120 個字符。jquery

解釋：chrome

過長的代碼不容易閱讀與維護。可是考慮到 HTML 的特殊性，不作硬性要求。瀏覽器

3 標籤名必須使用小寫

示例：異步

<!-- good -->
<p>Hello StyleGuide!</p>

<!-- bad -->
<P>Hello StyleGuide!</P>
複製代碼

4 對於無需自閉合的標籤，必須閉合

常見無需自閉合標籤有input、br、img、hr等。示例：ide

<!-- good -->
<input type="text" name="title" />

<!-- bad -->
<input type="text" name="title">
複製代碼

5 HTML 標籤的使用應該遵循標籤的語義

p - 段落
h1,h2,h3,h4,h5,h6 - 層級標題
strong,em - 強調
ins - 插入
del - 刪除
abbr - 縮寫
code - 代碼標識
cite - 引述來源做品的標題
q - 引用
blockquote - 一段或長篇引用
ul - 無序列表
ol - 有序列表
dl,dt,dd - 定義列表

示例：性能

<!-- good -->
<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>

<!-- bad -->
<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>
複製代碼

6 標籤的使用應儘可能簡潔，減小沒必要要的標籤

示例：

<!-- good -->
<img class="avatar" src="image.png">

<!-- bad -->
<span class="avatar">
    <img src="image.png">
</span>
複製代碼

7 屬性名必須使用小寫字母

示例：

<!-- good -->
<table cellspacing="0">...</table>

<!-- bad -->
<table cellSpacing="0">...</table>
複製代碼

8 布爾類型的屬性，建議不添加屬性值

示例：

<input type="text" disabled>
<input type="checkbox" value="1" checked>
複製代碼

9 自定義屬性建議以 xxx- 爲前綴，推薦使用 data-

示例：

<ol data-ui-type="Select"></ol>
複製代碼

10 DOCTYPE

[強制] 使用 HTML5 的 doctype 來啓用標準模式，建議使用大寫的 DOCTYPE。示例：

<!DOCTYPE html>
複製代碼

啓用viewport模式

<meta name="viewport" content="width=device-width, initial-scale=1">
複製代碼

啓用最新渲染模式

<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
複製代碼

10 編碼

HTML 文件使用無 BOM 的 UTF-8 編碼

11 CSS和JavaScript引入

[強制] 引入 CSS 時必須指明 rel="stylesheet" 引入 CSS 和 JavaScript 時無須指明 type 屬性解釋：

text/css 和 text/javascript 是 type 的默認值。

在 head 中引入頁面須要的全部 CSS 資源。 JavaScript 應當放在頁面末尾，或採用異步加載解釋：

將 script 放在頁面中間將阻斷頁面的渲染。出於性能方面的考慮，如非必要，請遵照此條建議。

示例：

<body>
    <!-- a lot of elements -->
    <script src="init-behavior.js"></script>
</body>
複製代碼

[建議] 移動環境或只針對現代瀏覽器設計的 Web 應用，若是引用外部資源的 URL 協議部分與頁面相同，建議省略協議前綴。

解釋：

使用 protocol-relative URL 引入 CSS，在 IE7/8 下，會發兩次請求。是否使用 protocol-relative URL 應充分考慮頁面針對的環境。

示例：

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
複製代碼

11 head

[強制] 頁面必須包含 title 標籤聲明標題 [強制] title 必須做爲 head 的直接子元素，並緊隨 charset 聲明以後解釋：

title 中若是包含 ascii 以外的字符，瀏覽器須要知道字符編碼類型才能進行解碼，不然可能致使亂碼。

示例：

<head>
    <meta charset="UTF-8">
    <title>頁面標題</title>
</head>
複製代碼

12 favicon

[強制] 保證 favicon 可訪問。

解釋：

在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。爲了保證favicon可訪問，避免404，必須遵循如下兩種方法之一：

在 Web Server 根目錄放置 favicon.ico 文件。
使用 link 指定 favicon。

示例：

<link rel="shortcut icon" href="path/to/favicon.ico">
複製代碼

13 圖片

[強制] 禁止 img 的 src 取值爲空。延遲加載的圖片也要增長默認的 src。

解釋：

src 取值爲空，會致使部分瀏覽器從新加載一次當前頁面，參考：https://developer.yahoo.com/performance/rules.html#emptysrc

[建議] 避免爲 img 添加沒必要要的 title 屬性。

解釋：

多餘的 title 影響看圖體驗，而且增長了頁面尺寸。

[建議] 爲重要圖片添加 alt 屬性。

解釋：

能夠提升圖片加載失敗時的用戶體驗。

[建議] 添加 width 和 height 屬性，以免頁面抖動。

[建議] 有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現。

解釋：

產品 logo、用戶頭像、用戶產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便用戶下載。
無下載需求的圖片，好比：icon、背景、代碼使用的圖片等，儘量採用 css 背景圖實現。

14 表單

[強制] 有文本標題的控件必須使用 label 標籤將其與其標題相關聯解釋：

有兩種方式：

將控件置於 label 內。
label 的 for 屬性指向控件的 id。推薦使用第一種，減小沒必要要的 id。若是 DOM 結構不容許直接嵌套，則應使用第二種。

示例：

<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>

<label for="username">用戶名：</label> <input type="textbox" name="username" id="username">
複製代碼

[強制] 使用 button 元素時必須指明 type 屬性值。

解釋：

button 元素的默認 type 爲 submit，若是被置於 form 元素中，點擊後將致使表單提交。爲顯示區分其做用方便理解，必須給出 type 屬性。

示例：

<button type="submit">提交</button>
<button type="button">取消</button>
複製代碼

15 模板中的 HTML

[建議] 模板代碼的縮進優先保證 HTML 代碼的縮進規則

示例：

<!-- good -->
{if $display == true}
<div>
    <ul>
    {foreach $item_list as $item}
        <li>{$item.name}<li>
    {/foreach}
    </ul>
</div>
{/if}

<!-- bad -->
{if $display == true}
    <div>
        <ul>
    {foreach $item_list as $item}
        <li>{$item.name}<li>
    {/foreach}
        </ul>
    </div>
{/if}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。