溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下head標簽中有哪些屬性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
head 標簽里有什么？
每一個 HTML 文檔中，都有一個不可或缺的標簽：<head> ，它作為一個容器，主要包含了用于描述 HTML 文檔自身信息（元數據）的標簽，這些標簽一般不會在頁面中被顯示出來，大多情況下是給瀏覽器和搜索引擎看的。
可以用在 <head> 里面的標簽有： <title> , <base> , <link> , <style> , <meta> , <script> , <noscript> 。
元信息標簽介紹
<title>
定義文檔的標題，顯示在瀏覽器的標題欄或標簽頁上，一般會完整地概括整個網頁的內容。
<base>
給頁面上所有相對 URL 的提供一個基礎。一份文檔中只能有一個 <base> 標簽。
目前我只觀察到「淘寶網」使用了這個標簽。
<link>
規定外部資源與當前文檔的關系，常于鏈接樣式表，如下所示：
<link rel="stylesheet" href="xxx.css" type="text/css">
當然還有很多其他的作用：
<link rel="canonical" href="...">
在網站中常有多個 url 指向同一個頁面的情況，上述標簽告知搜索引擎頁面的主 url 是什么，以便搜索引擎保留主要頁面而去除其他重復頁面。
<link rel="alternate" type="application/rss+xml" title="RSS" href="...">
上述標簽除搜索引擎可以看懂以外，也能被很多瀏覽器插件識別。
<link rel="icon" href="https://cache.yisu.com/upload/information/20200318/90/5649.jpg">
多數瀏覽器會讀取這個 link 的資源并展示在頁面上。
<link rel="dns-prefetch" href="//xxx.com">
提前對一個域名做 dns 查詢。強制對域名進行預讀取在有的情況下很有用,。
比如, 在網站的主頁上，強制在整個網站上對頻繁引用的域名做預解析處理，即使它們不在主頁本身上使用。雖然主頁的性能可能不受影響，但是會提高站點整體性能。
<style>
包含文檔的樣式信息。
<meta>
一種通用的元數據信息表示標簽，一般以鍵值對出現，如：<meta name="xxx" content="yyy">
charset 屬性
<meta charset="UTF-8">
從 HTML5 開始，上述寫法被推薦使用，用于聲明當前文檔所使用的字符編碼，推薦放在 <head> 中的第一位。
http-equiv屬性
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
在 HTML4 中，上述代碼用于聲明字符集，但是現在已不被推薦。
除了 content-type ，還有其他幾個值：
content-language （已過時）、set-cookie （已過時）、default-style 、refresh 、content-security-policy
因為不常用，所以就不一一介紹了，也挺容易理解，感興趣可以點擊 這里 了解。
name 屬性
其實 <meta> 標簽可以被自由定義，只要讀取和寫入的雙方約定好 name 和 content 的格式就可以了。來看一個例子：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
上面這種用法并不在 HTML 標準中，但是卻移動端開發的事實標準。這里來解釋一下 content 中的內容：
width ：頁面寬度，可以是一個正整數；也可以一個字符串 "device-width" ，表示跟設備寬度相等。height ：頁面高度，可以是一個正整數；也可以一個字符串 "device-height" ，表示跟設備高度相等。initial-scale ：初始縮放比例。minimum-scale ： 最小縮放比例。maximum-scale ： 最大縮放比例。user-scalable ：是否允許用戶縮放。
name 屬性的值除了可以是 viewport 之外，還有相當多的值：
application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。
同樣的，就不一一介紹了，感興趣可以點擊 這里 了解。
<script>
用于嵌入或引用可執行腳本。來看幾個 script 標簽常見的全局屬性：
async
使瀏覽器使用另一個線程下載腳本，這時不會阻塞頁面渲染。當腳本下載完成后，瀏覽器會暫停渲染，執行腳本，執行完畢后繼續渲染頁面。
async 無法保證腳本的執行順序，哪個腳本先下載結束就會先執行。
defer
同樣會使瀏覽器并行下載腳本，但是下載完畢不會立即執行，而是會等到 DOM 加載完成后（即剛剛讀取完 </html> 標簽）再執行腳本。
defer 可以保證腳本的執行順序就是它們在頁面上出現的順序。
src
定義引用外部腳本的地址，指定此屬性的 script 標簽內不應再有嵌入的腳本。如果腳本文件使用了非英語字符，還應該注明字符的編碼。如：
<script charset="utf-8" src="https://www.example.com/script.js"></script>
type
默認值是 text/javascript
想了解更多關于 <script> 標簽的詳細內容可以點擊 這里 。
<noscript>
如果頁面上的腳本類型不受支持或者當前在瀏覽器中關閉了腳本，則在此中定義腳本未被執行時的替代內容。
總結
本文到這里就結束了，其實關于 link 和 meta 標簽還有很多沒有介紹到，很多相關標簽都是有特殊的需求，只有在特定情況下才會使用，比如移動端開發就會用許多在 PC 上并不需要的標簽。
當然平時使用也主要是看需求，就拿我目前來說，只是些許用到過一些與 viewport 和 SEO 相關的標簽。
鑒于此我推薦一個不錯的學習方法，就是去各大網站查看它們的 head 標簽里都有什么，遇到沒見過的就去搜索一下，熟悉起來會很快。
我這邊看過的網站有：「淘寶網」、「阿里巴巴」、「京東」、「網易嚴選」、「起點中文網」等。
以上是“head標簽中有哪些屬性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
