meta标簽到底是做什麼的，你真的了解嗎？

​

一、起因

最近部門在推微前端，需要按功能拆分多個子應用，主應用在加載的過程中經常出現加載失敗的問題。

因為https位址中，如果加載了http資源，浏覽器将認為這是不安全的資源，将會預設阻止。

後來在文檔中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解決。

此時我才發現自己對meta簡直一無所知，本文主要介紹meta，順帶也會提一提head中的其它标簽。如有不對請指出，最後歡迎點贊 + 收藏。

二、head 标簽

head标簽與html标簽，body标簽一樣是一個文檔必須的元素。

head标簽用于定于文檔頭部資訊，它是所有頭部元素的容器。head中的元素可以引用腳本、訓示浏覽器在哪裡找到樣式表、提供元資訊等等。

文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的标題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的資料都不會真正作為内容顯示給讀者。

下面這些标簽可用在 head 部分：base, link, meta, script, style, 以及 title。

注意:應該把 head 标簽放在文檔的開始處，緊跟在 html 後面，并處于 body 标簽或 frameset 标簽之前。

三、title 标簽

title 定義文檔的标題，它是 head 部分中唯一必需的元素。浏覽器會以特殊的方式來使用标題，設定的内容不會顯示在頁面中，通常把它放置在浏覽器視窗的标題欄或狀态欄上，如設定為空标題展示目前頁面的位址資訊。

當把文檔加入使用者的連結清單或者收藏夾或書簽清單時，标題将成為該文檔連結的預設名稱。

1. dir 屬性​

規定元素中内容的文本方向rtl、ltr。

2. lang 屬性​

規定元素中内容的語言代碼。

四. meta 标簽

meta 元素往往不會引起使用者的注意，但是meta對整個網頁有影響，會對網頁能否被搜尋引擎檢索，和在搜尋中的排名起着關鍵性的作用。

meta有個必須的屬性content用于表示需要設定的項的值。

meta存在兩個非必須的屬性http-equiv和name, 用于表示要設定的項。

比如<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">,設定的項是Content-Security-Policy設定的值是upgrade-insecure-requests。

1. http-equiv 屬性​

http-equiv一般設定的都是與http請求頭相關的資訊，設定的值會關聯到http頭部。也就是說浏覽器在請求伺服器擷取html的時候，伺服器會将html中設定的meta放在響應頭中傳回給浏覽器。常見的類型比如content-type, expires, refresh, set-cookie, window-target, charset， pragma等等。

1）. content-type

比如：<meta http-equiv="content-type" content="text/html charset=utf8">可以用來聲明文檔類型，設定字元集，content-type幾乎所有的屬性都可以在meta中進行設定。

這樣設定浏覽器的頭資訊就會包含:​

content-type: text/html charset=utf8      

2）. expires

用于設定浏覽器的過期時間, 其實就是響應頭中的expires屬性。

<meta http-equiv="expires" content="31 Dec 2021">      

expires:31 Dec 2008      

3）. refresh​​

該種設定表示5秒自動重新整理并且跳轉到指定的網頁。如果不設定url的值那麼浏覽器則重新整理本網頁。

<meta http-equiv="refresh" content="5 url=http://www.webqdkf.com">      

4）. window-target​​

強制頁面在目前視窗以獨立頁面顯示, 可以防止别人在架構中調用自己的頁面。

<meta http-equiv="window-target" content="_top'>      

5）. pragma​​

禁止浏覽器從本地計算機的緩存中通路頁面的内容

<meta http-equiv="pragma" content="no-cache">      

2. name 屬性​

name屬性主要用于描述網頁，與對應的content中的内容主要是便于搜尋引擎查找資訊和分類資訊用的, 用法與http-equiv相同，name設定屬性名，content設定屬性值。

1）. author​​

author用來标注網頁的作者

<meta name="author" content="[email protected]">      

2）. description​​

description用來告訴搜素引擎目前網頁的主要内容，是關于網站的一段描述資訊。

<meta name="description" content="這是我的HTML">      

3）. keywords​​

keywords設定網頁的關鍵字，來告訴浏覽器關鍵字是什麼。是一個經常被用到的名稱。它為文檔定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類。

<meta name="keywords" content="Hello world">      

4）. generator​​

表示目前html是用什麼工具編寫生成的，并沒有實際作用，一般是編輯器自動建立的。

<meta name="generator" content="vscode">      

5)、revised​​

指定頁面的最新版本

<meta name="revised" content="V2，2015/10/1">      

6)、 robots​​

告訴搜尋引擎機器人抓取哪些頁面，all / none / index / noindex / follow / nofollow。

<meta name="robots" content="all">      

all：檔案将被檢索，且頁面上的連結可以被查詢；none：檔案将不被檢索，且頁面上的連結不可以被查詢；index：檔案将被檢索；follow：頁面上的連結可以被查詢；noindex：檔案将不被檢索，但頁面上的連結可以被查詢；nofollow：檔案将不被檢索，頁面上的連結可以被查詢。

3. scheme 屬性​

scheme 屬性用于指定要用來翻譯屬性值的方案。此方案應該在由 head 标簽的 profile 屬性指定的概況檔案中進行了定義。

五、 base 标簽

base标簽定義了文檔的基礎url位址，在文檔中所有的相對位址形式的url都是相對于這裡定義的url而言的。為頁面上的連結規定預設位址或目标。

base标簽包含的屬性。

1. href​

href是必選屬性，指定了文檔的基礎url位址。例如，如果希望将文檔的基礎URL定義為https：//www.abc.com，則可以使用如下語句：<base href="http://www.abc.com">如果文檔的超連結指向welcom.html,則它實際上指向的是如下url位址：https://www.abc.com/welocme.html。

2.target

定義了當文檔中的連結點選後的打開方式_blank，_self，_parrent，_top。

6. link 标簽​

link用于引入外部樣式表，在html的頭部可以包含任意數量的link，link标簽有以下常用屬性。

1. type​

定義包含的文檔類型，例如text/css

2. rel​

定義html文檔和所要包含資源之間的連結關系，可能的值有很多，最為常用的是stylesheet，用于包含一個固定首選樣式的表單。

3. href​

表示指向被包含資源的url位址。

7. style 标簽

編寫内部樣式表的标簽。

8. script 标簽

加載JavaScript腳本的标簽。加載的腳本會被預設執行。預設情況下當浏覽器解析到script标簽的時候會停止html的解析而開始加載script代碼并且執行。

<script src="script.js"></script>

1). type​​​

訓示腳本的MIME類型。<script type="text/JavaScript">。

2). async​​​

規定異步執行腳本，僅适用于通過src引入的外部腳本。設定的async屬性的script加載和執行不會影響後面html的解析，加載及執行是與文檔解析同時發生的。​

<script async src="script.js"></script>      

3). charset​​​

規定在外部腳本檔案中使用的字元編碼。

4). defer​​​

規定是否對腳本執行進行延遲，直到頁面加載為止。設定了defer屬性的script不會阻止後面html的解析，加載與解析是共同進行的，但是script的執行要在所有元素解析完成之後，DOMContentLoaded事件觸發之前完成。

<script defer src="myscript.js"></script>      

5). language​​​

規定腳本語言，與``type```功能類似，不建議使用該字段。

6). src​​​

外部腳本的位址。

9. bgsound

網站背景音樂。

<bgsound src="" autostart="" loop="">      

1). src​

表示背景音樂的url值。

2). autostart​

是否自動播放ture自動播放，false不播放，預設為false。

3). loop​