文章目錄

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 &ldquo;&eur;&rdquo;.
<!--推薦--> 
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>

HTML開發規範

文章目錄

HTML代碼規範

一般規則

一般樣式規則

通用格式規則

一般元規則

HTML

HTML樣式規則

HTML格式規則

直播下的HTML5

重學前端-模塊一Javascript 1-9講

HTML開發規範

如何編譯運行vscode源碼

編譯運行vscode源碼遇到的問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結