HTML代碼規範
一般規則
一般樣式規則
[Protocol]
儘可能使用HTTPS用於嵌入式資源。
除非圖像不能通過HTTPS獲得,否則對於圖像和其他媒體文件,樣式表和腳本應始終使用HTTPS。
<!--不推薦:省略協議-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--不推薦:使用HTTP-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--推薦-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
/* 不建議:省略協議 */
@import '//fonts.googleapis.com/css?family=Open+Sans';
/* 不推薦:使用HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';
/* 推薦 */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
通用格式規則
[Indentation]
每次縮進2個空格。
請勿使用製表符或將製表符和空格混合使用縮進。
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
[Capitalization]
僅使用小寫字母。
所有代碼都必須小寫:這適用於HTML元素名稱,屬性,屬性值(除非text/CDATA),CSS選擇器,屬性和屬性值(字符串除外)。
<!--不推薦-->
<A HREF="/">Home</A>
<!--推薦-->
<img src="google.png" alt="Google">
/* 不推薦 */
color :#E5E5E5;
/* 推薦 */
color: #e5e5e5;
[Trailing Whitespace]
刪除尾隨空格。尾部的空格是不必要的。
<!--不推薦--> <p>What?_
<!--推薦--> <p>Yes please.
一般元規則
[Encoding]
使用UTF-8(no BOM)。
確保您的編輯器使用UTF-8作爲字符編碼,並且沒有字節順序標記。
通過指定HTML模板和文檔中的編碼。
[Comments]
儘可能解釋代碼。
使用註釋來解釋代碼:它涵蓋了什麼,它的目的是什麼,爲什麼使用或首選各自的解決方案?
[Action Items]
使用TODO來標記待辦事項和動作項。
僅使用關鍵字TODO
突出顯示待辦事項,而不要使用其他常見格式(如@@
)。
在冒號後附加操作項,如TODO: action item。
{# TODO(john.doe): revisit centering #}
<center>Test</center>
<!-- TODO: remove optional tags --->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
HTML
HTML樣式規則
[Document Type]
使用HTML5。
HTML5(HTML語法)是首選的所有HTML文檔:<!DOCTYPE html>
。
(建議使用HTML,例如text/html。不要使用XHTML。XHTML,因爲 application/xhtml+xml既缺乏瀏覽器也沒有基礎結構支持,並且優化空間更少。)
但不要關閉void元素,即,使用 <br>
,而不是 <br />
。
[HTML Validity]
儘可能使用有效的HTML。
使用有效的HTML代碼,除非由於文件大小等其他原因HTML無法做到。
使用有效的HTML是可測試的基線質量屬性,有助於瞭解技術要求和約束,並確保正確使用HTML。
<!--不推薦-->
<title>Test</title>
<article>This is only a test.
<!--推薦-->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
[Semantics]
根據目的使用HTML,使用語義化元素(標籤)。例如,
出於可訪問性,重用和代碼效率的原因,HTML語義化至關重要。
<!--不推薦-->
<div onclick="goToRecommendations();">All recommendations</div>
<!--推薦-->
<a href="recommendations/">All recommendations</a>
[Multimedia Fallback]
提供多媒體的替代內容。
對於多媒體,如圖像,視頻,動畫對象canvas,確保提供其他訪問方式。
出於可訪問性的原因,提供替代內容非常重要:對於圖像,如果沒有@alt
,盲人用戶幾乎無法理解圖像的含義。
<!--不推薦-->
<img src="spreadsheet.png">
<!--推薦-->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
[Separation of Concerns]
結構與表示、行爲分開。
嚴格分開結構(markup),表示形式(styling)和行爲(scripting),並儘量將三個之間的交互保持最小。也就是說,確保文檔和模板僅包含HTML和僅用於結構目的的HTML。將所有表示形式的內容移入樣式表,並將所有行爲形式的腳本移入腳本。
另外,通過從文檔和模板中鏈接儘可能少的樣式表和腳本,使交互範圍儘可能小。
出於維護原因,將結構與表示與行爲分開很重要。
<!--不推薦-->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<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>
<!--推薦-->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<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>It’s awesome!
[Entity References]
不要使用實體引用。
如果文件和編輯器以及團隊之間使用相同的編碼(UTF-8),不需要使用諸如&``mdash;
、&``rdquo;
或&``#x263a;
之類的實體引用。
唯一的例外情況適用於在HTML中具有特殊含義的字符(如<
和&
)以及控制字符或“不可見”字符(如不間斷空格)。
<!--不推薦-->
The currency symbol for the Euro is “&eur;”.
<!--推薦-->
The currency symbol for the Euro is “€”.
[Optional Tags]
省略可選標籤(可選)。
出於文件大小優化和可掃描性的目的,可以考慮省略可選標籤。在HTML5規範定義什麼標籤可以被省略。
<!--不推薦-->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!--推薦-->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
[type Attributes]
省略樣式表和腳本的type
屬性。
HTML5將text/css
和 text/javascript
作爲默認值,寫type屬性是不必要的,即使舊的瀏覽器也可以安全地完成。
HTML格式規則
[General Formatting]
對每個塊,列表或表元素使用換行符,並對每個此類子元素縮進。
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<th scope="col">Income
<th scope="col">Taxes
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
[HTML Line-Wrapping]
中斷長行(可選)。
一行的長度過大影響可讀性,換行的閾值取決於prettier的設定值。換行時,每條連續行應與原始行有縮進。
<md-progress-circular md-mode="indeterminate" class="md-accent"
ng-show="ctrl.loading" md-diameter="35">
</md-progress-circular>
<md-progress-circular
md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35">
</md-progress-circular>
[HTML Quotation Marks]
引用屬性值時,請使用雙引號。
在屬性值周圍使用雙引號(""
)而不是單引號(''
)。
<!--不推薦-->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!--推薦-->
<a class="maia-button maia-button-secondary">Sign in</a>