HTML編碼規(guī)范

版規(guī)則

縮進(jìn)

使用2個(gè)空格縮進(jìn)

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫

只允許使用小寫。

所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規(guī)Meta規(guī)則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點(diǎn)，則遵守該站點(diǎn)的編碼規(guī)則。

<!-- 網(wǎng)頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項(xiàng)目的復(fù)雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環(huán)注釋：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項(xiàng)卡內(nèi)容注釋：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規(guī)HTML設(shè)計(jì)規(guī)則

文檔類型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達(dá)到性能上的提升。

可以使用一些工具驗(yàn)證你的代碼，如 W3C HTML validator

HTML 的語義性

根據(jù)HTML各個(gè)元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標(biāo)簽說明：

div 主要用于布局，分割頁面的結(jié)構(gòu);
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當(dāng)頁面中出現(xiàn)第一行為類似標(biāo)題/簡(jiǎn)述，然后下面為詳細(xì)描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標(biāo)題, 根據(jù)重要性依次遞減;
h1 最重要的標(biāo)題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標(biāo)簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對(duì)齊;
s 刪除線;
strike 刪除線;
noframes 無視框時(shí)的內(nèi)容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個(gè)別視框;
frameset 視框格式總定義;

多媒體元素降級(jí)處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標(biāo)簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標(biāo)簽中忽略type屬性。

HTML5默認(rèn)type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規(guī)則

每個(gè)塊元素、列表元素或表格元素都獨(dú)占一行，每個(gè)子元素都相對(duì)于父元素進(jìn)行縮進(jìn)。按設(shè)計(jì)稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁面良好層次

保證整個(gè)頁面在未加載樣式表時(shí)仍有較好的層次清晰的頁面結(jié)構(gòu)。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權(quán)重標(biāo)簽使用

H標(biāo)簽使用

h1 權(quán)重高，體現(xiàn)當(dāng)前網(wǎng)頁中相對(duì)比較重要的信息，但不宜過多，建議一個(gè)頁面只放一個(gè);
h2 可以做副標(biāo)題;
h3 可以做新聞列表;
h4-h6 可做相關(guān)新聞的列表標(biāo)簽屬性完整;

strong、b使用

將需要加粗的文字使用b標(biāo)簽來顯示。

將需要強(qiáng)調(diào)的文字（主要指包含關(guān)鍵詞的信息）使用strong標(biāo)簽來強(qiáng)調(diào)主要內(nèi)容。

注：b是粗體標(biāo)簽，屬于實(shí)體標(biāo)簽，它所包圍的字符將被設(shè)為bold（粗體）；strong 是加重語氣標(biāo)簽，屬于邏輯標(biāo)簽，它的作用是加強(qiáng)字符語氣。

標(biāo)簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關(guān)說明或目的意義。

例如：當(dāng)使用overflow隱藏掉a中的溢出文字時(shí)，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內(nèi)容是什么；又或者當(dāng)一個(gè)圖片型鏈接出現(xiàn)時(shí)，該a中的title同樣是必不可少的，它可以告訴用戶這個(gè)圖片鏈接是做什么用的。

注：僅在img里添加alt標(biāo)簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時(shí)顯示出來的提示文字，要想鼠標(biāo)移上去顯示提示信息應(yīng)該用title，嚴(yán)謹(jǐn)?shù)膶懛ㄊ莍mg里加入alt和title這兩個(gè)標(biāo)簽。

精簡(jiǎn)代碼

代碼保持精簡(jiǎn)，最優(yōu)化，這樣搜索引擎才更喜歡。

、唯一定律

無論有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是唯一個(gè)人編寫的。

二、HTML

2.1 語法

（1）用兩個(gè)空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。

（2）嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。

（3）對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。

（4）不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規(guī)范中明確說明這是可選的。

（5）不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li> 或 </body>）。

2.2 Example

三、HTML5 doctype

為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。

四、語言屬性

根據(jù) HTML5 規(guī)范：

強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。

五、IE 兼容模式

IE 支持通過特定的 <meta> 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

六、字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

七、引入 CSS 和 JavaScript 文件

根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值。

八、實(shí)用為王

盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。

九、屬性順序

9.1 從大到小

HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。

（1）class

（2）id, name

（3）data-*

（4）src, for, type, href, value

（5）title, alt

（6）role, aria-*

9.2 Example

9.3 說明

class 用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁面內(nèi)的書簽），因此排在第二位。

十、布爾（boolean）型屬性

10.1 注意

（1）布爾型屬性可以在聲明時(shí)不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。

（2）元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

（3）如果屬性存在，其值必須是空字符串或 [...] 屬性的規(guī)范名稱，并且不要在首尾添加空白符。

簡(jiǎn)單來說，就是不用賦值。

10.2 Example

十一、減少標(biāo)簽的數(shù)量

編寫 HTML 代碼時(shí)，盡量避免多余的父元素。很多時(shí)候，這需要迭代和重構(gòu)來實(shí)現(xiàn)。

十二、減少 JavaScript 生成的標(biāo)簽

通過 JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯，并且降低性能。能避免時(shí)盡量避免。

最后，小編還給大家準(zhǔn)備了web前端的學(xué)習(xí)資料

獲取方式：請(qǐng)大家轉(zhuǎn)發(fā)+關(guān)注并私信小編關(guān)鍵詞：“資料”即可獲取前端自學(xué)教程一套。

ublime / vscode 快捷生成HTML代碼的實(shí)現(xiàn)

文章目錄

1.基本html結(jié)構(gòu)

2.生成div加類名的快捷鍵

3.帶類名的div

4.帶id的div

5.屬性【】

6.后代>

7.兄弟+

8.上級(jí)^

9.乘法*

10.文本{}

1、基本html結(jié)構(gòu)

操作：輸入 !+Enter鍵

注意：這里輸入“！”+回車鍵前，需要清空原來生成的基本結(jié)構(gòu)

實(shí)現(xiàn)效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     
</body>
</html>

2、生成div加類名的快捷鍵

操作：輸入 div.list>div.item_$*6

實(shí)現(xiàn)效果：

<div class="list">
    <div class="item_1"></div>
    <div class="item_2"></div>
    <div class="item_3"></div>
    <div class="item_4"></div>
    <div class="item_5"></div>
    <div class="item_6"></div>
</div>

3、帶類名的div

操作：輸入 div.wrapper

實(shí)現(xiàn)效果：

<div class="wrapper"></div>

4、帶id的div

操作： div#wrapper

實(shí)現(xiàn)效果：

<div id="wrapper"></div>

5、屬性 []

操作： span[title=“test”]

實(shí)現(xiàn)效果：

<span title="test"></span>

6、后代 >

操作：輸入div>span>a

實(shí)現(xiàn)效果：

<span title="test"></span>

7、兄弟 +

操作： div+p+span

實(shí)現(xiàn)效果：

<div></div>
<p></p>
<span></span>

8、上級(jí) ^

操作： div>span^i

實(shí)現(xiàn)效果：

<div><span></span></div>
<i></i>

9、乘法 *

操作： ul>li*2

實(shí)現(xiàn)效果：

<ul>
    <li></li>
    <li></li>
</ul>

10、文本 {}

操作： div>span{這是文本}

實(shí)現(xiàn)效果：

<div><span>這是文本</span></div>

在線咨詢

上一篇：ASP.NET MVC-HTML 幫助器
下一篇：使用Python構(gòu)建Markdown到HTML的轉(zhuǎn)換管道

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML編碼規(guī)范

版規(guī)則

縮進(jìn)

大小寫

行為空格

常規(guī)Meta規(guī)則

編碼

注釋

常規(guī)HTML設(shè)計(jì)規(guī)則

文檔類型

HTML 的正確性

HTML 的語義性

多媒體元素降級(jí)處理

type屬性

HTML代碼格式規(guī)則

HTML與SEO

頁面良好層次

權(quán)重標(biāo)簽使用

標(biāo)簽屬性使用

精簡(jiǎn)代碼

ublime / vscode 快捷生成HTML代碼的實(shí)現(xiàn)

文章目錄

1、基本html結(jié)構(gòu)

操作： 輸入 !+Enter鍵

實(shí)現(xiàn)效果：

2、生成div加類名的快捷鍵

操作： 輸入 div.list>div.item_$*6

實(shí)現(xiàn)效果：

3、帶類名的div

操作： 輸入 div.wrapper

實(shí)現(xiàn)效果：

4、帶id的div

操作： div#wrapper

實(shí)現(xiàn)效果：

5、屬性 []

操作： span[title=“test”]

實(shí)現(xiàn)效果：

6、后代 >

操作： 輸入div>span>a

實(shí)現(xiàn)效果：

7、兄弟 +

操作： div+p+span

實(shí)現(xiàn)效果：

8、上級(jí) ^

操作： div>span^i

實(shí)現(xiàn)效果：

9、乘法 *

操作： ul>li*2

實(shí)現(xiàn)效果：

10、文本 {}

操作： div>span{這是文本}

實(shí)現(xiàn)效果：

您的項(xiàng)目需求

操作：輸入 !+Enter鍵

操作：輸入 div.list>div.item_$*6

操作：輸入 div.wrapper

操作：輸入div>span>a