1. 起因
最近部門在推微前端，需要按功能拆分多個子應用，主應用在載入的過程中經常出現載入失敗的問題。因為 https 位址中，如果載入了 http 資源，瀏覽器將認為這是不安全的資源，將會預設阻止。後來在文件中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解決。
此時我才發現自己對meta簡直一無所知，本文主要介紹meta，順帶也會提一提head中的其他標籤。如有不對請指出，最後歡迎點讚 + 收藏。
2. head 標籤
head標籤與html標籤，body標籤一樣是一個文件必須的元素。
head標籤用於定義文件頭部資訊，它是所有頭部元素的容器。head中的元素可以引用腳本、指示瀏覽器在哪裡找到樣式表、提供元資訊等等。
文件的頭部描述了文件的各種屬性和資訊，包括文件的標題、在 Web 中的位置以及和其他文件的關係等。絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者。
下面這些標籤可用在 head 部分：base, link, meta, script, style, 以及 title。
注意:應該把 head 標籤放在文件的開始處，緊跟在 html 後面，並處於 body 標籤或 frameset 標籤之前。
3. title 標籤
title 定義文件的標題，它是 head 部分中唯一必需的元素。瀏覽器會以特殊的方式來使用標題，設定的內容不會顯示在頁面中，通常把它放置在瀏覽器視窗的標題欄或狀態欄上，如設定為空標題展示當前頁面的位址資訊。
當把文件加入用戶的連結列表或者收藏夾或書籤列表時，標題將成為該文件連結的預設名稱。
3.1. dir 屬性
規定元素中內容的文字方向rtl、ltr。
3.2. lang 屬性
規定元素中內容的語言代碼。
4. 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。
4.1. http-equiv 屬性
http-equiv一般設定的都是與http請求頭相關的資訊，設定的值會關聯到http頭部。也就是說瀏覽器在請求伺服器獲取html的時候，伺服器會將html中設定的meta放在響應頭中返回給瀏覽器。常見的類型比如content-type, expires, refresh, set-cookie, window-target, charset， pragma等等。
4.1.1. content-type
比如：<meta http-equiv="content-type" content="text/html charset=utf8">可以用來宣告文件類型、設字元集，目前content-type只能在 html 文件中使用。
這樣設定瀏覽器的頭資訊就會包含:
content-type: text/html charset=utf8
4.1.2. expires
用於設定瀏覽器的過期時間, 其實就是響應頭中的 expires 屬性。
<meta http-equiv="expires" content="31 Dec 2021" />
expires:31 Dec 2008
4.1.3. refresh
該種設定表示 5 秒自動重新整理並且跳轉到指定的網頁。如果不設定 url 的值那麼瀏覽器則重新整理本網頁。
<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com" />
4.1.4. window-target
強制頁面在當前視窗以獨立頁面顯示, 可以防止別人在框架中調用自己的頁面。
<meta http-equiv="window-target" content="_top'>
4.1.5. pragma
禁止瀏覽器從本地電腦的快取中存取頁面的內容
<meta http-equiv="pragma" content="no-cache" />
4.2. name 屬性
name屬性主要用於描述網頁，與對應的content中的內容主要是便於搜尋引擎查找資訊和分類資訊用的, 用法與http-equiv相同，name設定屬性名，content設定屬性值。
4.2.1. author
author用來標註網頁的作者
<meta name="author" content="aaa@mail.abc.com" />
4.2.2. description
description用來告訴搜尋引擎當前網頁的主要內容，是關於網站的一段描述資訊。
<meta name="description" content="這是我的HTML" />
4.2.3. keywords
keywords設定網頁的關鍵字，來告訴瀏覽器關鍵字是什麼。是一個經常被用到的名稱。它為文件定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字對文件進行分類。
<meta name="keywords" content="Hello world" />
4.2.4. generator
表示當前 html 是用什麼工具編寫生成的，並沒有實際作用，一般是編輯器自動建立的。
<meta name="generator" content="vscode" />
4.2.5. revised
指定頁面的最新版本
<meta name="revised" content="V2，2015/10/1" />
4.2.6. robots
告訴搜尋引擎機器人抓取哪些頁面，all / none / index / noindex / follow / nofollow。
<meta name="robots" content="all" />
all：文件將被檢索，且頁面上的連結可以被查詢；none：文件將不被檢索，且頁面上的連結不可以被查詢；index：文件將被檢索；follow：頁面上的連結可以被查詢；noindex：文件將不被檢索，但頁面上的連結可以被查詢；nofollow：文件將不被檢索，頁面上的連結可以被查詢。
4.3. scheme 屬性
scheme 屬性用於指定要用來翻譯屬性值的方案。此方案應該在由 head 標籤的 profile 屬性指定的概況檔案中進行了定義。html5不支援該屬性。
5. base 標籤
base標籤定義了文件的基礎url位址，在文件中所有的相對位址形式的url都是相對於這裡定義的url而言的。為頁面上的連結規定預設位址或目標。
<base href="http://www.w3school.com.cn/i/" target="_blank" />
base 標籤包含的屬性。
5.1. href
href是必選屬性，指定了文件的基礎url位址。例如，如果希望將文件的基礎URL定義為https：//www.abc.com，則可以使用如下語句：<base href="http://www.abc.com">如果文件的超連結指向welcom.html,則它實際上指向的是如下url位址：https://www.abc.com/welocme.html。
5.2. target
定義了當文件中的連結點擊後的開啟方式_blank，_self，_parrent，_top。
6. link 標籤
link用於引入外部樣式表，在html的頭部可以包含任意數量的link，link標籤有以下常用屬性。
<link type="text/css" rel="stylesheet" href="github-markdown.css" />
6.1. type
定義包含的文件類型，例如text/css
6.2. rel
定義html文件和所要包含資源之間的連結關係，可能的值有很多，最為常用的是stylesheet，用於包含一個固定首選樣式的表單。
6.3. href
表示指向被包含資源的url位址。
7. style 標籤
編寫內部樣式表的標籤。
<style>
body {
background: #f3f5f9;
}
</style>
8. script 標籤
載入javascript腳本的標籤。載入的腳本會被預設執行。預設情況下當瀏覽器解析到script標籤的時候會停止html的解析而開始載入script程式碼並且執行。
<script src="script.js"></script>
8.1. type
指示腳本的MIME類型。
<script type="text/javascript">
8.2. async
規定非同步執行腳本，僅適用於透過src引入的外部腳本。設定了async屬性的script載入不會影響後面html的解析，載入是與文件解析同時發生的。載入完成後立即執行。執行過程會停止html文件解析。
<script async src="script.js"></script>
8.3. charset
規定在外部腳本檔案中使用的字元編碼。
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
8.4. defer
規定是否對腳本執行進行延遲，直到頁面載入為止。設定了defer屬性的script不會阻止後面html的解析，載入與解析是共同進行的，但是script的執行要在所有元素解析完成之後，DOMContentLoaded事件觸發之前完成。
<script defer src="script.js"></script>
8.5. language
規定腳本語言，與type功能類似，不建議使用該欄位。
8.6. src
外部腳本的位址。
<script src="script.js"></script>
9. bgsound
網站背景音樂。
<bgsound src="music.mp4" autostart="true" loop="5"></bgsound>
9.1. src
表示背景音樂的url值。
9.2. autostart
是否自動播放ture自動播放，false不播放，預設為false。
9.3. loop
是否重複播放，值為數字或者infinite，表示重複具體次或無限次。
參考來源
作者：隱冬
連結：https://juejin.cn/post/6987919006468407309
來源：稀土掘金