前端規範，HTML的<head>標籤內<meta>、<title>等標籤順序是怎樣的?

01-07

首先，看了一下幾個公司的規範：
百度efe的：ecomfe/spec · GitHub
騰訊 AlloyTeam：Code Guide by @AlloyTeam
Github：Styleguide · GitHub
發現都沒有HTML中&標籤里其他標籤如：&、&、&、&順序該如何書寫。

然後，看了BAT各大網站，發現順序也是各異。
知乎抽風，上傳暫時不了圖片，無法品鑒了。
就想問一下哪些前端團隊規範了這塊東西？是根據什麼規定順序的？

沒有特定規定。

不過我至少有一條建議：確保&放在最前，讓瀏覽器儘早獲得字元編碼信息，如果要瀏覽器據此決定轉碼可以早點轉。

瀉藥，剛注意到。

其實都答的七七八八了啊。

基本上就這幾個標籤么

&、&、&、&、&、&

它們沒有（規範上的）既定順序標準。

一般是按照具體經驗來分配。

如：

當然，約往後位置約不重要。比如 4 5 調換也沒啥大事兒。

基本規律是：

meta 最好寫在第一個，特別是 meta chaset 設定必須寫第一個，它們是元數據，能讓數據獲取方得知此頁面的元數據。最先得知頁面編碼，進而獲取之後meta（如果有）內的作者、關鍵字等數據（因為這些內容可能是非ASCII字元）時，可以用指定編碼方式獲取。獲取方得到全部元數據後可以自行判斷是否繼續獲取其後內容。
title 緊隨 meta 之後是因為可能獲取方需要知道頁面標題信息，並且在最先獲取 chaset 信息後知道此標題的編碼方式。如果獲取方是頁面瀏覽器，那麼它可以最先用正確的頁面編碼方式顯示標題給用戶。
link、style 緊隨 meta，其實還是主要為 link 大部分都是 CSS 樣式文件考慮。由於外聯樣式可以並行下載，不會阻塞後續處理工作，style 也能讓瀏覽器儘快得知頁面排版布局信息。
base 一般情況下用的不多，只要不放第一個基本沒啥關係。
script 放在最後，是基於script 不關是下載還是執行都會阻塞頁面考慮，讓它盡量偏後。（當然，這在絕大部分現代瀏覽器中不是事兒了，它會盡量"拖後"外聯腳本下載時機）現在大多數情況沒有特殊需求 script 都不放在 head 里了，而是放在 body 最後一個子節點上（也有給扔 html body 之外的，瀏覽器容錯還是能給它修正回 body 最後節點上）。

這道題是屬於明顯沒有唯一答案的，跟著自己的需求以及客戶端變化來就好了。

之前寫過的一篇博文中的一段：

關於頁面head

首先要指定編碼，當然服務端也要指定編碼，保持一致。
然後是對於可以切換內核的瀏覽器提示優先切換內核，諸如國內佔比比較大的360瀏覽器6.0版本之後。然後是IE相關的瀏覽器使用其支持的最高版本的文檔模式。
接著考慮可以使用viewport來支持不同尺寸和解析度的設備。
關於頁面相關說明，諸如作者可以在適當位置添加。
蜘蛛是否抓取索引的標誌可以考慮添加。
接著是dns-prefetch緩存assets相關的域名。
如果你確定頁面多數內容是彈出新窗口，那麼可以指定頁面的鏈接打開模式。
對於不支持或者禁用腳本的網站，可以使用轉向帶參數，請求無腳本時候的網站內容。
頁面標題是頁面必不可少的，同時也是蜘蛛索引的重要指標，可以考慮程序動態輸出。
引入主要的樣式文件，同時根據設備類型來引入設備相關的樣式文件，以支持平板以及印表機。
前端腳本通過後端變數設置版本，以利於文檔和靜態資源的更新。
關於前置全局腳本，需要做到：
- 如果頁面不作為iframe內容使用，要防止惡意被嵌套，發生誤導或者釣魚相關的事情。
  - 如果使用類名作為鉤子來告知頁面程序是否支持調用，可以在此進一步處理。
  - 對於舊版本的IE，這裡特指版本小於等於IE8的老舊瀏覽器，如果要做優雅降級，那麼需要再此做前置程序處理。
  - 如果頁面程序存在依賴數據來渲染的情況，前置的數據也推薦放置於此。
  - 如果頁面依賴腳本載入器，可以在此添加載入器腳本。
  - 對於舊版本的瀏覽器可以使用IE條件注釋配合shim腳本，以及respond來提供一些額外的功能支持，以減少寫代碼時的額外處理，以及保持一致性訪問。
  - 頁面關鍵詞和相關說明也是至關重要的，如果你做SEO的話。
  - 如果你還要提供RSS以及PING,請也在此一併提供。
  - 對於搜索引擎提供shortlink，以合併改版rewrite後的狀況。

摘自：如何相對正確的書寫頁面head

最近也有留意這個問題，在 Google 的開發文檔中有提到 & 需要遵循以下三點：

在 &標籤內；
在任何內容的前面，也就是 & 標籤內的第一個；
包括 DOCTYPE 和空格， & 聲明需要在前 512 位元組內；

& & & & &My home page& & & ... & &

& 放在 & 前的原因，有可能是字元編碼引起跨站腳本攻擊。

Important: The & tag must appear in the document before any content that could be controlled by an attacker, such as a & tag containing a dynamically generated title for the document.

定義和用法

& 標籤為 input 元素定義標註（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控制項。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上。

& 標籤的 for 屬性應當與相關元素的 id 屬性相同。

實例

帶有兩個輸入欄位和相關標記的簡單 HTML 表單：

&&Male&&

&&Female&&

瀏覽器支持

所有主流瀏覽器都支持 & 標籤。

Safari 2 或更早的版本不支持 & 標籤。

HTML 與 XHTML 之間的差異

NONE

提示和注釋：

注釋："for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設置為相關元素的 id 屬性的值。

可選的屬性

DTD 指示此屬性允許在哪種 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

屬性值描述DTDforelement_id規定 label 與哪個表單元素綁定。STF標準屬性

id, class, title, style, dir, lang, xml:lang

事件屬性

accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup,onmouseover

更多好文章：

其實這些沒有嚴格的規範啦，一般&在最後，其他的也無傷大雅了