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

時間 2019-12-01

標籤 html 規範標籤資源 meta 梳理欄目 HTML 简体版

原文原文鏈接

結構、樣式、行爲分離

儘可能確保文檔和模板只包含 HTML 結構。
樣式都放到樣式表裏，自定義樣式在入口文件中引入，第三方樣式在link標籤中引入。
行爲都放到腳本里。
例外：當第三包是經過HTML中直接引入的，那麼相關的腳本和樣式建議放在同一個template中，以避免在更改中遺漏。javascript

<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自動格式化。css

# 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 的第一個直接子元素；html

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

語言設置

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

問題主要在於，zh 如今不是語言code了，而是macrolang，能做爲語言code的是cmn（國語）、yue（粵語）、wuu（吳語）等。jquery

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

外鏈資源引用

資源類型

樣式文件用link標籤引入（須要制定rel="stylesheet"），腳本文件用script標籤引入，均不須要加type屬性android

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

資源協議

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

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

主動混合內容：做爲總體與頁面進行交互，而且幾乎容許攻擊者對頁面進行任何操做。主動混合內容包括瀏覽器可下載和執行的腳本、樣式表、iframe、flash 資源及其餘代碼。在瀏覽器中會阻止此類型的內容以保護用戶，表現以下圖：

因此，咱們引用的資源必須是https協議或者是用相對地址而不要直接引用http協議的資源。web

<!-- 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>
複製代碼

統一註釋

單行註釋

<h1>html 註釋標籤的詳細介紹</h1><!-- 文章標題-->
複製代碼

多行註釋

<!-- <p>這是文章的一個段落</p> <p>這是文章的一個段落</p> -->
複製代碼

標籤閉合

非閉合標籤必須有開始和結束標籤

<a href="demo.html">simple</a>
複製代碼

自閉合標籤必須沒有結束標籤

<img src="demo.png" alt="demo"/>
複製代碼

標籤嵌套

標籤嵌套通常來講，只要你正確的閉合和匹配開始標籤和結束標籤，就不會有太大的問題（只是沒有按照規範來，但並不會引發渲染錯誤），可是有些狀況必須引發咱們的重視。chrome

a元素裏不能夠嵌套交互式元素(a、button、select等)

<a>
  <a>aaa</a>
</a>
複製代碼

裏面不能夠嵌套div、h1~h六、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>

複製代碼

相關標籤/搜索

HTML標籤