head 標籤裏有什麼？

時間 2019-12-04

標籤 head 標籤什麼简体版

原文原文鏈接

每個 HTML 文檔中，都有一個不可或缺的標籤：<head> ，它做爲一個容器，主要包含了用於描述 HTML 文檔自身信息（元數據）的標籤，這些標籤通常不會在頁面中被顯示出來，大多狀況下是給瀏覽器和搜索引擎看的。javascript

能夠用在 <head> 裏面的標籤有： <title> , <base> , <link> , <style> , <meta> , <script> , <noscript> 。css

元信息標籤介紹

定義文檔的標題，顯示在瀏覽器的標題欄或標籤頁上，通常會完整地歸納整個網頁的內容。html

給頁面上全部相對 URL 的提供一個基礎。一份文檔中只能有一個 <base> 標籤。java

目前我只觀察到「淘寶網」使用了這個標籤。瀏覽器

規定外部資源與當前文檔的關係，常於連接樣式表，以下所示：cookie

<link rel="stylesheet" href="xxx.css" type="text/css">

固然還有不少其餘的做用：app

<link rel="canonical" href="...">

在網站中常有多個 url 指向同一個頁面的狀況，上述標籤告知搜索引擎頁面的主 url 是什麼，以便搜索引擎保留主要頁面而去除其餘重複頁面。async

<link rel="alternate" type="application/rss+xml" title="RSS" href="...">

上述標籤除搜索引擎能夠看懂之外，也能被不少瀏覽器插件識別。性能

<link rel="icon" href="https://xxx.png">

多數瀏覽器會讀取這個 link 的資源並展現在頁面上。學習

<link rel="dns-prefetch" href="//xxx.com">

提早對一個域名作 dns 查詢。強制對域名進行預讀取在有的狀況下頗有用,。

好比, 在網站的主頁上，強制在整個網站上對頻繁引用的域名作預解析處理，即便它們不在主頁自己上使用。雖然主頁的性能可能不受影響，可是會提升站點總體性能。

包含文檔的樣式信息。

一種通用的元數據信息表示標籤，通常以鍵值對出現，如：<meta name="xxx" content="yyy">

<meta charset="UTF-8">

從 HTML5 開始，上述寫法被推薦使用，用於聲明當前文檔所使用的字符編碼，推薦放在 <head> 中的第一位。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

在 HTML4 中，上述代碼用於聲明字符集，可是如今已不被推薦。

除了 content-type ，還有其餘幾個值：

content-language （已過期）、set-cookie （已過期）、default-style 、refresh 、content-security-policy

由於不經常使用，因此就不一一介紹了，也挺容易理解，感興趣能夠點擊這裏瞭解。

其實 <meta> 標籤能夠被自由定義，只要讀取和寫入的雙方約定好 name 和 content 的格式就能夠了。來看一個例子：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

上面這種用法並不在 HTML 標準中，可是卻移動端開發的事實標準。這裏來解釋一下 content 中的內容：

name 屬性的值除了能夠是 viewport 以外，還有至關多的值：

application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。

一樣的，就不一一介紹了，感興趣能夠點擊這裏瞭解。

用於嵌入或引用可執行腳本。來看幾個 script 標籤常見的全局屬性：

async
使瀏覽器使用另外一個線程下載腳本，這時不會阻塞頁面渲染。當腳本下載完成後，瀏覽器會暫停渲染，執行腳本，執行完畢後繼續渲染頁面。

async 沒法保證腳本的執行順序，哪一個腳本先下載結束就會先執行。
defer
一樣會使瀏覽器並行下載腳本，可是下載完畢不會當即執行，而是會等到 DOM 加載完成後（即剛剛讀取完 </html> 標籤）再執行腳本。

defer 能夠保證腳本的執行順序就是它們在頁面上出現的順序。
src

定義引用外部腳本的地址，指定此屬性的 script 標籤內不該再有嵌入的腳本。若是腳本文件使用了非英語字符，還應該註明字符的編碼。如：
```
<script charset="utf-8" src="https://www.example.com/script.js"></script>
```
type
默認值是 text/javascript