HTML編碼規范

法

縮進使用soft tab（4個空格）；
嵌套的節點應該縮進；
在屬性上，使用雙引號，不要使用單引號；
屬性名全小寫，用中劃線做分隔符；
不要在自動閉合標簽結尾處使用斜線（HTML5 規范指出他們是可選的）；
不要忽略可選的關閉標簽，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現；雖然doctype不區分大小寫，但是按照慣例，doctype大寫（關于html屬性，大寫還是小寫）。<!DOCTYPE html> <html> ... </html> lang屬性根據HTML5規范：應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎么去發音和翻譯。
更多關于 lang 屬性的說明在這里；在sitepoint上可以查到語言列表；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區分香港，臺灣，大陸。而微軟給出了一份更加詳細的語言列表.aspx)，其中細分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標簽可以指定頁面應該用什么版本的IE來渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據HTML5規范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。HTML5 規范鏈接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 屬性順序屬性應該按照特定的順序出現以保證易讀性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是為高可復用組件設計的，所以應處在第一位；
id更加具體且應該盡量少使用，所以將它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean屬性

boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；
更多內容可以參考 WhatWG section on boolean attributes：
boolean屬性的存在表示取值為true，不存在則表示取值為false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成標簽

在JS文件中生成標簽讓內容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。

減少標簽數量

在編寫HTML代碼時，需要盡量避免多余的父節點；很多時候，需要通過迭代和重構來使HTML變得更少。

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

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

實用高于完美

盡量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。

TML 符號實體

HTML 符號是不呈現在標準的鍵盤上，比如數學運算符、箭頭符號、技術符號和形狀。

如需向 HTML 頁面添加這些符號，您可以使用 HTML 實體名稱。

如果不存在實體名稱，您可以使用實體編號。

如果字符沒有實體名稱，您可以使用十進制（或十六進制）引用。

實例

結果如下：

我將顯示 €

HTML 支持的數學符號

如果您使用的是一個 HTML 實體名稱或一個十六進制編號，字符總是能正確顯示。

這是與您頁面使用的字符集相互獨立的！

字符	編號	實體	描述
?	∀	∀	所有（for all）
?	∂	∂	部分（part）
?	∃	∃	存在（exists）
?	∅	∅	空（empty）
?	∇	∇	倒三角（nabla）
∈	∈	∈	屬于（isin）
?	∉	∉	不屬于（notin）
?	∋	&ni;	包含的成員（ni）
∏	∏	∏	連乘（prod）
∑	∑	∑	總和（sum）

完整的數學（Math）參考手冊

HTML 支持的希臘字母

字符	編號	實體	描述
Α	Α	Α	Alpha（中文注音：阿耳法）
Β	Β	Β	Beta（中文注音：貝塔）
Γ	Γ	Γ	Gamma（中文注音：伽馬）
Δ	Δ	Δ	Delta（中文注音：德耳塔）
Ε	Ε	Ε	Epsilon（中文注音：艾普西隆）
Ζ	Ζ	Ζ	Zeta（中文注音：截塔）

完整的希臘（Greek）參考手冊

HTML 支持的其他實體

字符	編號	實體	描述
?	©	©	版權所有（REGISTERED SIGN）
?	®	®	注冊商標（REGISTERED SIGN）
€	€	€	歐元符號（EURO SIGN）
?	™	™	商標（trademark）
←	←	←	向左箭頭（LEFTWARDS ARROW）
↑	↑	↑	向上箭頭（UPWARDS ARROW）
→	→	→	向右箭頭（RIGHTWARDS ARROW）
↓	↓	↓	向下箭頭（DOWNWARDS ARROW）
?	♠	&spades;	黑桃（BLACK SPADE SUIT）
?	♣	&clubs;	黑梅花（BLACK CLUB SUIT）
?	♥	&hearts;	黑心（BLACK HEART SUIT）
?	♦	&diams;	黑方塊（BLACK DIAMOND SUIT）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

覽器支持

所有主流瀏覽器都支持 <a> 標簽。

標簽定義及使用說明

<a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。

<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。

在所有瀏覽器中，鏈接的默認外觀如下：

未被訪問的鏈接帶有下劃線而且是藍色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的

提示和注釋

提示：如果沒有使用 href 屬性，則不能使用 hreflang、media、rel、target 以及 type 屬性。

提示：通常在當前瀏覽器窗口中顯示被鏈接頁面，除非規定了其他 target。

提示：請使用 CSS 來改變鏈接的樣式。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<a> 標簽既可以是超鏈接，也可以是錨。在 HTML5 中，<a> 標簽是超鏈接，但是假如沒有 href 屬性，它僅僅是超鏈接的一個占位符。

HTML5 有一些新的屬性，同時不再支持一些 HTML 4.01 的屬性。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
charset	char_encoding	HTML5 不支持。規定目標 URL 的字符編碼。
coords	coordinates	HTML5 不支持。規定鏈接的坐標。
downloadNew	filename	指定下載鏈接
href	URL	規定鏈接的目標 URL。
hreflang	language_code	規定目標 URL 的基準語言。僅在 href 屬性存在時使用。
mediaNew	media_query	規定目標 URL 的媒介類型。默認值：all。僅在 href 屬性存在時使用。
name	section_name	HTML5 不支持。規定錨的名稱。
rel	alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag	規定當前文檔與目標 URL 之間的關系。僅在 href 屬性存在時使用。
rev	text	HTML5 不支持。規定目標 URL 與當前文檔之間的關系。
shape	defaultrectcirclepoly	HTML5 不支持。規定鏈接的形狀。
target	_blank_parent_self_topframename	規定在何處打開目標 URL。僅在 href 屬性存在時使用。
typeNew	MIME_type	規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。注：MIME = Multipurpose Internet Mail Extensions。

全局屬性

<a> 標簽支持 HTML 的全局屬性。

事件屬性

<a> 標簽支持 HTML 的事件屬性。

創建超級鏈接

本例演示如何在 HTML 文檔中創建鏈接。

將圖像作為鏈接

本例演示如何使用圖像作為鏈接。

在新的瀏覽器窗口打開鏈接

本例演示如何在新窗口打開一個頁面，這樣的話訪問者就無需離開您的站點了。

創建電子郵件鏈接

本例演示如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

創建電子郵件鏈接 2

本例演示更加復雜的郵件鏈接。

使用錨跳轉到同一個頁面的不同位置

本例演示如何使用錨的 id 屬性跳轉到頁面的不同位置（ HTML5 不支持 name 屬性）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：現代化 PHP 應用服務器，自動支持 HTTPS/HTTP2/HTTP3 等
下一篇：程序員浪漫起來沒文科生什么事：HTML制作表白愛心-無需編程基礎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。