1. 起因

最近部門在推微前端，需要按功能拆分多個子應用，主應用在加載的過程中經常出現加載失敗的問題。因為https地址中，如果加載了http資源，瀏覽器將認為這是不安全的資源，將會默認阻止。后來在文檔中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解決。

此時我才發(fā)現自己對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 部分中唯一必需的元素。瀏覽器會以特殊的方式來使用標題，設置的內容不會顯示在頁面中，通常把它放置在瀏覽器窗口的標題欄或狀態(tài)欄上，如設置為空標題展示當前頁面的地址信息。

當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標題將成為該文檔鏈接的默認名稱。

1. dir 屬性

規(guī)定元素中內容的文本方向rtl、ltr。

2. lang 屬性

規(guī)定元素中內容的語言代碼。

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。

1. http-equiv 屬性

http-equiv一般設置的都是與http請求頭相關的信息，設置的值會關聯(lián)到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.zhiqianduan.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是用什么工具編寫生成的，并沒有實際作用，一般是編輯器自動創(chuàng)建的。

<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 屬性指定的概況文件中進行了定義。html5不支持該屬性。

5. base 標簽

base標簽定義了文檔的基礎url地址，在文檔中所有的相對地址形式的url都是相對于這里定義的url而言的。為頁面上的鏈接規(guī)定默認地址或目標。

<base href="http://www.w3school.com.cn/i/" target="_blank" />
復制代碼

base標簽包含的屬性。

1. href

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

2. target

定義了當文檔中的鏈接點擊后的打開方式_blank，_self，_parrent，_top。

6. link 標簽

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

<link type="text/css" rel="stylesheet" href="github-markdown.css">
復制代碼

1. type

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

2. rel

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

3. href

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

7. style 標簽

編寫內部樣式表的標簽。

<style>
    body {
        background: #f3f5f9;
    }
</style>
復制代碼

8. script 標簽

加載javascript腳本的標簽。加載的腳本會被默認執(zhí)行。默認情況下當瀏覽器解析到script標簽的時候會停止html的解析而開始加載script代碼并且執(zhí)行。

<script src="script.js"></script>
復制代碼

1. type

指示腳本的MIME類型。

<script type="text/javascript">
復制代碼

2. async

規(guī)定異步執(zhí)行腳本，僅適用于通過src引入的外部腳本。設置的async屬性的script加載不會影響后面html的解析，加載是與文檔解析同時發(fā)生的。加載完成后立即執(zhí)行。執(zhí)行過程會停止html文檔解析。

<script async src="script.js"></script>
復制代碼

3. charset

規(guī)定在外部腳本文件中使用的字符編碼。

<script type="text/javascript" src="script.js" charset="UTF-8"></script>
復制代碼

4. defer

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

<script defer src="script.js"></script>
復制代碼

5. language

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

6. src

外部腳本的地址。

<script src="script.js"></script>
復制代碼

9. bgsound

網站背景音樂。

<bgsound src="music.mp4" autostart="true" loop="5">
復制代碼

1. src

表示背景音樂的url值。

2. autostart

是否自動播放ture自動播放，false不播放，默認為false。

3. loop

是否重復播放，值為數字或者infinite，表示重復具體次或無限次。

參考來源

• [1] w3chool head^[1] www.w3school.com.cn/tags/tag\_he…^[2] "w3c"
• [2] head標簽及子標簽^[3] blog.csdn.net/qq\_46580571…^[4] "Wangkiwa