HTML規範——標籤，資源，meta梳理

維和土豆發表於2019-11-28
HTML

結構、樣式、行為分離

儘量確保文件和模板只包含 HTML 結構。
樣式都放到樣式表裡，自定義樣式在入口檔案中引入，第三方樣式在link標籤中引入。
行為都放到指令碼里。
例外：當第三包是通過HTML中直接引入的，那麼相關的指令碼和樣式建議放在同一個template中，以免在更改中遺漏。

<script src="https://frontend-alioss.learnta.com/lib/redactor/lib/eruda/1.9.0/eruda.min.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', function(event) {
    var UA = navigator.userAgent;
    var isMobile = /(android|iphone|ipad|ipod)/i.test(UA);
    if (isMobile) {
      eruda.init();
    }
  });
</script>
複製程式碼

縮排

統一四個空格縮排。
在.editorconfig中定義indent。
通過prettier自動格式化。

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab
複製程式碼

檔案編碼

使用utf-8。且指定字元編碼的 meta 必須是 head 的第一個直接子元素；

<meta charset="utf-8"> ；
複製程式碼

語言設定

lang屬性的取值應該遵循 BCP 47 - Tags for Identifying Languages。

問題主要在於，zh 現在不是語言code了，而是macrolang，能作為語言code的是cmn（國語）、yue（粵語）、wuu（吳語）等。

<!--簡體中文-->
<html lang="zh-cmn-Hans">
<!--繁體中文-->
<html lang="zh-cmn-Hant">
<!--英文-->
<html lang="en">
複製程式碼

外鏈資源引用

資源型別

樣式檔案用link標籤引入（需要制定rel="stylesheet"），指令碼檔案用script標籤引入，均不需要加type屬性

<link rel="stylesheet" src="index.css" />
<script src="index.js" />
複製程式碼

資源協議

禁止引用http協議的靜態資源，由於目前大多數都是基於https協議開發的網站，https協議的網站引用http協議的資源，會出現混合內容（mixed content）安全性問題：

  1. 被動混合內容：不與頁面其餘部分進行互動的內容，從而使中間人攻擊在攔截或更改該內容時能夠執行的操作受限。被動混合內容包括影像、視訊和音訊內容，以及無法與頁面其餘部分進行互動的其他資源。在瀏覽器中會報warning，但不影響正常載入，表現如下圖：

image.png

  1. 主動混合內容：作為整體與頁面進行互動，並且幾乎允許攻擊者對頁面進行任何操作。 主動混合內容包括瀏覽器可下載和執行的指令碼、樣式表、iframe、flash 資源及其他程式碼。在瀏覽器中會阻止此型別的內容以保護使用者，表現如下圖：

image.png

所以，我們引用的資源必須是https協議或者是用相對地址而不要直接引用http協議的資源。

<!-- recommended -->
<script src="//cdn.bootcss.com/jquery/3.4.1/core.js"></script>

<!-- not recommended -->
<script src="http://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
複製程式碼

統一註釋

  1. 單行註釋
<h1>html 註釋標籤的詳細介紹</h1><!-- 文章標題-->
複製程式碼
  1. 多行註釋
<!--
<p>這是文章的一個段落</p>
<p>這是文章的一個段落</p>
-->
複製程式碼

標籤閉合

  1. 非閉合標籤必須有開始和結束標籤
<a href="demo.html">simple</a>
複製程式碼
  1. 自閉合標籤必須沒有結束標籤
<img src="demo.png" alt="demo"/>
複製程式碼

標籤巢狀

標籤巢狀一般來說，只要你正確的閉合和匹配開始標籤和結束標籤，就不會有太大的問題（只是沒有按照規範來，但並不會引起渲染錯誤），但是有些情況必須引起我們的重視。

  1. a元素裡不可以巢狀互動式元素(a、button、select等)
<a>
  <a>aaa</a>
</a>
複製程式碼

  1. 裡面不可以巢狀div、h1~h6、p、ul、ol、li、dl、dt、dd、form等。 

<p>
  <div>aaa</div>
</p>
複製程式碼

meta設定

SEO優化

頁面關鍵字

<meta name="keywords" content="your tags" />
複製程式碼

頁面描述

<meta name="description" content="150 words" />
複製程式碼

搜尋引擎索引方式

面向對外使用者的採用all。面向內部使用者的採用none。

<!--
    all：檔案將被檢索，且頁面上的連結可以被查詢；
    none：檔案將不被檢索，且頁面上的連結不可以被查詢；
    index：檔案將被檢索；
    follow：頁面上的連結可以被查詢；
    noindex：檔案將不被檢索；
    nofollow：頁面上的連結不可以被查詢。
 -->
<meta name="robots" content="all" />
複製程式碼

IE相容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
複製程式碼

上面這行程式碼基本上在每個網站中都可以看到，但具體是什麼意思呢？這裡稍作解釋，首先，這個標籤只對IE瀏覽器管用。

  • ie=edge，是指以此客戶端支援的最新版本渲染，如ie9就以9方式渲染，即使使用者在瀏覽器上設定了其他版本ie相容模式也無效。
  • chrome=1幾乎無用，因為這個是基於使用IE的使用者還下載了chrome frame這個外掛，但是曉得去下載chrome frame 的使用者根本不會去用IE，而且chrome frame在14年之後也不提供支援服務了。但最好還是加上。

瀏覽器核心

目前國內很多瀏覽器都採用雙核心甚至多核心。那麼這時候我們最好指定我們優先使用的核心。

<meta name="renderer" content="webkit">
複製程式碼

遮蔽百度轉碼

在百度移動搜尋引擎中，為了更好地滿足使用者需求，會同時為使用者提供PC網頁和mobile網頁，但目前受互動、相容和流量等因素影響，PC頁在移動終端中的直接瀏覽體驗較差。因此，百度移動搜尋對缺乏可替代mobile資源的PC頁進行格式轉碼，將其轉換為適合手機瀏覽的mobile頁，使其能夠在移動終端瀏覽器有較好的瀏覽體驗。為了最大程度改善PC頁在手機上的瀏覽體驗，轉碼時會去除PC頁中不能在手機瀏覽器上瀏覽的內容，並改善不適用mobile的互動功能。
這是官方說明，但實際上百度很有可能在轉碼時把你的頁面樣式弄沒了，或者說給你加一條廣告之類。那麼，如果不希望自己的站點被轉碼、依然希望手機端使用者瀏覽PC頁該如何操作呢？可以使用no-transform協議，no-transform協議為如下兩種形式：

<!-- 舊版的語法 -->
<meta http-equiv="Cache-Control" content="no-transform"/>
<!-- 新版的語法，據說比較可靠，但其實即使都用了，也未必100%不轉碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 告訴百度你的頁面時適配手機和pc的，不用他幫忙轉 -->
<meta name="applicable-device" content="pc,mobile"/> 
複製程式碼

禁止自動翻譯

禁止chrome自動翻譯。

<meta name="google" value="notranslate">
複製程式碼

移動端設定

viewport
<!--
width：寬度（數值 / device-width）（範圍從200 到10,000，預設為980 畫素）
height：高度（數值 / device-height）（範圍從223 到10,000）
initial-scale：初始的縮放比例 （範圍從>0 到10）
minimum-scale：允許使用者縮放到的最小比例
maximum-scale：允許使用者縮放到的最大比例
user-scalable：使用者是否可以手動縮 (no,yes)
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
複製程式碼

忽略數字自動識別為電話號碼
<meta content="telephone=no" name="format-detection" />
複製程式碼

忽略識別郵箱
<meta content="email=no" name="format-detection" />
複製程式碼

其他

專案中由於種種原因並未使用，故放在”其他“一欄中，不代表不重要，而是根據專案需求而定。

  • 強制豎屏（由於不是所有瀏覽器都支援的，所以不敢在專案中使用）
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
複製程式碼
  • WebApp全屏模式（離線應用）
<!-- 啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
複製程式碼
  • 隱藏狀態列/設定狀態列顏色（只有在開啟WebApp全屏模式時才生效）
<!-- content的值為default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
複製程式碼
  • 新增到主屏後的標題（只有在開啟WebApp全屏模式時才生效）
<meta name="apple-mobile-web-app-title" content="標題">
複製程式碼
  • 禁止瀏覽器從本地計算機的快取中訪問頁面內容（禁止在非聯網的情況下訪問本頁內容）
<meta http-equiv="Pragma" content="no-cache">
複製程式碼

總結

上述規範主要是根據專案使用場景制定，這裡整理了一份通用模板，可供大多數專案使用。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <!-- 編碼格式 -->
    <meta charset="UTF-8" />
    <!-- seo 頁面關鍵詞 -->
    <meta name="keywords" content="your tags" />
    <!-- seo 頁面描述 -->
    <meta name="description" content="150 words" />
    <!-- 移動端顯示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- IE瀏覽器使用IE最新版本渲染，如果安裝了外掛則使用chrome渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 多核瀏覽器有限使用webkit核心渲染 -->
    <meta name="renderer" content="webkit" />
    <!-- 移動端禁止識別手機號 -->
    <meta content="telephone=no" name="format-detection" />
    <!-- 移動端禁止識別郵箱 -->
    <meta content="email=no" name="format-detection" />
    <!-- 禁止chrome自動翻譯 -->
    <meta name="google" value="notranslate">
    <!-- 禁止百度轉碼 舊版的語法 -->
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <!-- 禁止百度轉碼 新版的語法，據說比較可靠，但其實即使都用了，也未必100%不轉碼 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- 告訴百度你的頁面時適配手機和pc的，不用他幫忙轉 -->
    <meta name="applicable-device" content="pc,mobile"/>
    <!-- 搜尋引擎 檔案將被檢索，且頁面上的連結可以被查詢 -->
    <meta name="robots" content="all" />
    <title>Document</title>
    <link rel="stylesheet" src="//xxx.com/index.css" />
  </head>
  <body>
    <h1>hello world</h1>
    
    <script src="//xxx.com.index.js"></script>
  </body>
</html>

複製程式碼

相關文章