編碼規範-html.md

時間 2019-11-08

標籤編碼規範 html.md html 欄目字符編碼简体版

原文原文鏈接

寫在前面

對於不一樣的編程語言來講，具體的編碼規範各不相同，可是其宗旨都是一致的，就是保證代碼在高質量完成需求的同時具有良好的可讀性、可維護性。javascript

本文大部份內容來自網上，僅供我的參考學習！css

網絡上的知識浩如煙海，而學到了纔是本身的！！
而後，老規矩，帶上咱們可愛的小夥伴...
html

語法

用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。java
嵌套元素應當縮進一次（即兩個空格）。web
對於屬性的定義，確保所有使用雙引號，毫不要使用單引號。chrome
不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的。編程
不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。瀏覽器

doctype

爲每一個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣可以確保在每一個瀏覽器中擁有一致的展示。網絡

HTML5 doctype編程語言
```
<!DOCTYPE html>
  <html>
  </html>
```

HTML 4 doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  </html>

Tips:
<!DOCTYPE> 聲明不是 HTML 標籤
告訴瀏覽器HTML文檔類型

文件兼容性模式

文件兼容性用於定義讓瀏覽器如何編譯你的網頁。此文件解釋文件兼容性，如何指定你網站的文件兼容性模式以及如何判斷一個網頁該使用的文件模式。

IE兼容行
```
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
```
說明:IE=Edge設置通知IE以最高級別模式加載文檔;其餘的有:11/10/9/8/7/5/EmulateIE11/EmulateIE10
chrome 優先
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
說明:優先使用最新版本的IE 和 Chrome 內核

360極速模式優先

<meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

說明:優先使用webkit內核,IE兼容內核,IE標準內核

馬丹寫在最後
```
<meta http-equiv="X-UA-Compatible" content="IE=10;IE=9;IE=8;IE=7;" />
```
瀏覽器從前日後選擇,可是太麻煩了,改用IE=edge,爲了兼容chrome使用chrome=1觸發Google Chrome Frame;可是馬丹,chrome最新版本已經拋棄Google Chrome Frame了,因此最終使用IE=edge搞定.
```
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
```

瀏覽器內核

Trident內核
又稱其爲IE內核，是微軟開發的一種排版引擎。
瀏覽器產品: IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、Netscape 八、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
Gecko內核
開源,以C++編寫的網頁排版引擎。
瀏覽器產品:Firefox、Netscape6至9
WebKit內核
開源,目前流行的瀏覽器內核,常見於Google和Mac的產品中.
瀏覽器產品:Safari、Chrome、傲遊三、國內各類瀏覽器
Presto內核
Opera Software開發的瀏覽器排版引擎
瀏覽器產品:Opera 7.0以上

Tips : CSS3中各個瀏覽器內核兼容的設置

- -moz-：表明FireFox瀏覽器私有屬性  
- -ms-：表明IE瀏覽器私有屬性  
- -webkit-：表明safari、chrome瀏覽器私有屬性  
- -o-：表明opera瀏覽器私有屬性

.class{
      border-radius:20px 40px 10px;
      -webkit-border-radius:20px 40px 10px;
      -moz-border-radius:20px 40px 10px;
      -ms-border-radius:20px 40px 10px;
      -o-border-radius:20px 40px 10px;
    }

sublime有插件能夠自動生成:Autoprefixer

Tips : JS各個瀏覽器內核兼性

其餘問題

文件編碼格式
編寫文件時所有使用無BOM UTF-8模式,並指定瀏覽器文檔編碼方式.
```
<meta charset="UTF-8">
```
引入 CSS 和 JavaScript 文件
根據HTML5規範,在引入CSS和JavaScript文件時通常不須要指定type屬性，由於text/css和text/javascript分別是它們的默認值。非H5的加!
```

  <link rel="stylesheet" href="code-guide.css">
  
  <script src="code-guide.js"></script>
```
說明:js放文件底部,css放文件head
標籤語義化
儘可能遵循 HTML 標準和語義，可是不要以犧牲實用性爲代價。任什麼時候候都要儘可能使用最少的標籤並保持最小的複雜度。

減小標籤的數量
編寫 HTML 代碼時，儘可能避免多餘的父元素。

<!-- Not so great -->
  <span class="avatar">
    <img src="...">
  </span>
  <!-- Better -->
  <img class="avatar" src="...">

少用JavaScript 生成的標籤
經過 JavaScript 生成的標籤讓內容變得不易查找、編輯，而且下降性能。能避免時儘可能避免。
```
<span class="avatar"></span>
  <script>
    document.getElementsByClass('avatar')[0].value = "";
  </script>
```