HTML文檔頭部與元數據
在之前的文章中，我對 html 文檔的內容做了簡單的分割，這篇文章對其中的文檔標題—— head 部分進行一個簡單的總結～
如果沒有耐心看長篇大論，可以直接到本文末尾，將會有一個包含了本文大部分內容的 demo～
文檔頭部的作用
head 標籤本身並不攜帶任何信息，它主要是作爲盛放其它語義類標籤的容器。
head 大部分內容是不可見的，除了 title 和 圖標之外。head 中可以包含的標籤有 base，title，script，style，link，meta
下面從簡到繁開始總結
base
base 標籤的作用是給頁面上的所有的相對路徑提供一個基礎URL
<base href="http://www.raaabbit.ink" target="_blank">
注意：
- 一份 html 文檔最多隻有一個 base 標籤，多出的 base 都不會生效
- 這個標籤存在一定的危險性，容易造成和 javascript 的配合問題
title
title 標籤的作用是給頁面賦予一個標題，並呈現在瀏覽器 tab 上，可以參考我的另一篇文章 -> html文檔標題
注意：
這個標籤要能夠儘量概括頁面的內容，因爲它可能還會作爲收藏夾中的標題，作爲搜索引擎的搜索結果，作爲社交平臺分享的標題等等，應當能夠起到概括內容的作用
script
script 是一段可執行腳本，一般來說都是 js 代碼
<script type="text/javascript" src="./javascript.js">
一般來說，爲了保證效率，script 會被放在 body 的末尾，具體原因請參考我的另外一篇文章 -> body末尾引入JS與JS異步加載
其他關於 script 標籤的細節將會在 js 基礎相關的 blog 裏面寫到
style
style 是直接寫入在頁面內部的樣式
<style>
body{
background:#fff;
}
</style>
相比這種方式，使用 link 引入外部的 CSS 樣式表更容易維護
link
link 標籤相對於前面的幾個標籤來說要稍稍複雜一些
link 的作用是制定外部資源和當前文檔的關係，具有屬性href、ref、media、hreflan、type和sizes。其中 href、ref和media 更加常用。
使用 link 標籤的例子：
<!-- 引入外部 CSS 樣式表 -->
<link rel="stylesheet" href="./style.css">
<!-- 引入頁面小圖標 -->
<link rel="shortcut icon" href="ico.ico"/>
其中 rel 說明引入的資源文件是樣式表，href 表示引用的文件位置是當前目錄下的 style.css
link的rel屬性
| 屬性值 | 作用 |
|---|---|
| alternate | 指示鏈接到該文檔的另一個版本 |
| author | 指示鏈接到當前文檔的作者主頁 |
| help | 指向一個跟網站或頁面相關的幫助文檔 |
| icon | 引入代表當前文檔的圖標，新的sized屬性與這個屬性結合使用，指定鏈接圖片的寬高 |
| license | 鏈接到當前的文檔的版權聲明 |
| next | 指示鏈接到文檔是一組文檔中的下一份 |
| pingback | 處理當前文檔被引用情況的服務器地址 |
| prefetch | 指明需要緩存的目標資源 |
| prev | 標明瞭上一個文檔 |
| search | 鏈接到可以用於搜索當前頁面和相關頁面的資源 |
| sidebar | 鏈接到可以作爲附屬上下文的文檔 |
| stylesheet | 引入樣式表 |
| tag | 創建應用於當前文檔的標籤 |
link的media屬性
這個屬性的主要作用是進行媒體查詢，按照媒體類型來決定是否引入這個資源文件：
| 屬性值 | 作用 |
|---|---|
| screen | 計算機屏幕 |
| tty | 終端 |
| tv | 電視 |
| projection | 投影儀 |
| handheld | 手持設備 |
| 打印的頁面 | |
| braille | 盲文設備 |
| aural | 語音合成器 |
| all | 所有 |
當然按照媒體查詢的規則，也是可以直接按照尺寸進行查詢的，CSS中的媒體查詢請參考文章 -> CSS基本語法/幾個特別的規則語法
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
meta
meta是本文的重頭戲，因爲這一部分在 head 中佔據的比重尤其之大，並且它也最爲複雜，那我們就按照類別進行簡單的梳理：
charset 聲明字符集（必要！！）
聲明頁面的字符集是必要的，並且要寫在最前面，否則有很大可能會導致亂碼
<meta charset="utf-8">
通常我們會聲明字符編碼爲 utf-8，這種編碼方式也被稱作“萬國碼”可以兼容很多語言。
具有name屬性的meta(基本)
具有 name 和 content 屬性的 meta 標籤是最基本的
name用來執行元數據的名，content用來執行元數據的值：
<meta name="keywords" content="Raaabbit 的 博客">
這個就表示頁面的 關鍵字 是 Raaabbit 的 博客 這樣做會對 SEO 更加有利
注意： name 是一種相對更加自由的約定，http 標準規定了一些 name 作爲大家使用的共識，同時也鼓勵開發者發明自己的 name 使用。
下面是一些常見的name和content組合的總結：
| name | content | 作用 |
|---|---|---|
| keywords | 字符串 | 設置網頁的關鍵詞有利於SEO |
| description | 字符串 | 用一段文字描述網頁，有利於SEO |
| generator | 字符串 | 說明使用的編輯器 |
| author | 字符串 | 說明作者信息 |
| robots | All/Index/Nofollow/Noindex/None | 頁面可被搜索引擎搜索的情況 |
| copyright | 字符串 | 版權信息 |
| application-name | 字符串 | 應用名稱 |
| viewport | width，height，inital-scale，minimum-scale，maximum-scale，user-scalable | 決定頁面的大小和縮放 |
| referrer | never/always/origin/default | 跳轉策略，有助於安全性 |
注意： viewport 並不是 HTML 的標準定義，但是收到瀏覽器的支持併成爲事實標準
具有http-equiv屬性的meta
設置了http-equiv屬性的meta是一個編譯指令，即由服務器提供的來指示頁面應如何加載
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
比如上面的這段代碼就能夠讓 IE 瀏覽器以最高級的 Edge 模式進行渲染
下面也對常見的一些 http-equiv 進行一個總結
| http-equiv | content | 作用 |
|---|---|---|
| content-type | text/html;Charset=UTF-8 | 指定http編碼方式 |
| content-language | zh-cn | 指定內容的語言 |
| set-cookies | 模擬 http 請求頭set-cookie，設置cookie | |
| default-style | 指定默認樣式表 | |
| refresh | 5;url=https://raaabbit.github.io/ | 指定時間(5s)後刷新或者跳轉（如果沒有url就是刷新） |
| X-UA-Compatible | 聲明 UA 兼容性 | |
| cache-control | no-cache | 清除緩存 |
| Expires | GMT 時間格式 | 設置網頁緩存到期時間 |
| Pragma | no-cache | 設置瀏覽器禁止從本地緩存中調用 |
| window-Target | _top | 強制頁面在當前窗口中以獨立頁面顯示，防止頁面被當作 frame |
| content-security-policy | 聲明內容安全策略 |