meta 標(biāo)簽到底是做什么的，我竟一無所知
1. 起因
最近部門在推微前端，需要按功能拆分多個(gè)子應(yīng)用，主應(yīng)用在加載的過程中經(jīng)常出現(xiàn)加載失敗的問題。因?yàn)閔ttps地址中，如果加載了http資源，瀏覽器將認(rèn)為這是不安全的資源，將會默認(rèn)阻止。后來在文檔中添加了完美解決。
此時(shí)我才發(fā)現(xiàn)自己對meta簡直一無所知，本文主要介紹meta，順帶也會提一提head中的其它標(biāo)簽。如有不對請指出，最后歡迎點(diǎn)贊 + 收藏。
2. head 標(biāo)簽
head標(biāo)簽與html標(biāo)簽，body標(biāo)簽一樣是一個(gè)文檔必須的元素。
head標(biāo)簽用于定于文檔頭部信息，它是所有頭部元素的容器。head中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標(biāo)簽可用在 head 部分：base, link, meta, script, style, 以及 title。
注意:應(yīng)該把 head 標(biāo)簽放在文檔的開始處，緊跟在 html 后面，并處于 body 標(biāo)簽或 frameset 標(biāo)簽之前。
3. title 標(biāo)簽
title 定義文檔的標(biāo)題，它是 head 部分中唯一必需的元素。瀏覽器會以特殊的方式來使用標(biāo)題，設(shè)置的內(nèi)容不會顯示在頁面中，通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上，如設(shè)置為空標(biāo)題展示當(dāng)前頁面的地址信息。
當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時(shí)，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱。
1. dir 屬性
規(guī)定元素中內(nèi)容的文本方向rtl、ltr。
2. lang 屬性
規(guī)定元素中內(nèi)容的語言代碼。
4. meta 標(biāo)簽
meta 元素往往不會引起用戶的注意，但是meta對整個(gè)網(wǎng)頁有影響，會對網(wǎng)頁能否被搜索引擎檢索，和在搜索中的排名起著關(guān)鍵性的作用。
meta有個(gè)必須的屬性content用于表示需要設(shè)置的項(xiàng)的值。
meta存在兩個(gè)非必須的屬性http-equiv和name, 用于表示要設(shè)置的項(xiàng)。
比如,設(shè)置的項(xiàng)是Content-Security-Policy設(shè)置的值是upgrade-insecure-requests。
1. http-equiv 屬性
http-equiv一般設(shè)置的都是與http請求頭相關(guān)的信息，設(shè)置的值會關(guān)聯(lián)到http頭部。也就是說瀏覽器在請求服務(wù)器獲取html的時(shí)候，服務(wù)器會將html中設(shè)置的meta放在響應(yīng)頭中返回給瀏覽器。常見的類型比如content-type, expires, refresh, set-cookie, window-target, charset， pragma等等。
1. content-type
比如：可以用來聲明文檔類型，設(shè)置字符集，content-type幾乎所有的屬性都可以在meta中進(jìn)行設(shè)置。
這樣設(shè)置瀏覽器的頭信息就會包含:
content-type:?text/html?charset=utf8
2. expires
用于設(shè)置瀏覽器的過期時(shí)間, 其實(shí)就是響應(yīng)頭中的expires屬性。
"expires"?content="31?Dec?2021">
expires:31?Dec?2008
3. refresh
該種設(shè)定表示5秒自動刷新并且跳轉(zhuǎn)到指定的網(wǎng)頁。如果不設(shè)置url的值那么瀏覽器則刷新本網(wǎng)頁。
"refresh"?content="5?url=http://www.zhiqianduan.com">
4. window-target
強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示, 可以防止別人在框架中調(diào)用自己的頁面。
"window-target"?content="_top'>
5. pragma
禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面的內(nèi)容
"pragma"?content="no-cache">
2. name 屬性
name屬性主要用于描述網(wǎng)頁，與對應(yīng)的content中的內(nèi)容主要是便于搜索引擎查找信息和分類信息用的, 用法與http-equiv相同，name設(shè)置屬性名，content設(shè)置屬性值。
1. author
author用來標(biāo)注網(wǎng)頁的作者
"author"?content="[email protected]">
2. description
description用來告訴搜素引擎當(dāng)前網(wǎng)頁的主要內(nèi)容，是關(guān)于網(wǎng)站的一段描述信息。
"description"?content="這是我的HTML">
3. keywords
keywords設(shè)置網(wǎng)頁的關(guān)鍵字，來告訴瀏覽器關(guān)鍵字是什么。是一個(gè)經(jīng)常被用到的名稱。它為文檔定義了一組關(guān)鍵字。某些搜索引擎在遇到這些關(guān)鍵字時(shí)，會用這些關(guān)鍵字對文檔進(jìn)行分類。
"keywords"?content="Hello?world">
4. generator
表示當(dāng)前html是用什么工具編寫生成的，并沒有實(shí)際作用，一般是編輯器自動創(chuàng)建的。
"generator"?content="vscode">
5. revised
指定頁面的最新版本
"revised"?content="V2，2015/10/1">
6. robots
告訴搜索引擎機(jī)器人抓取哪些頁面，all / none / index / noindex / follow / nofollow。
"robots"?content="all">
all：文件將被檢索，且頁面上的鏈接可以被查詢；none：文件將不被檢索，且頁面上的鏈接不可以被查詢；index：文件將被檢索；follow：頁面上的鏈接可以被查詢；noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
3. scheme 屬性
scheme 屬性用于指定要用來翻譯屬性值的方案。此方案應(yīng)該在由 head 標(biāo)簽的 profile 屬性指定的概況文件中進(jìn)行了定義。html5不支持該屬性。
5. base 標(biāo)簽
base標(biāo)簽定義了文檔的基礎(chǔ)url地址，在文檔中所有的相對地址形式的url都是相對于這里定義的url而言的。為頁面上的鏈接規(guī)定默認(rèn)地址或目標(biāo)。
base標(biāo)簽包含的屬性。
1. href
href是必選屬性，指定了文檔的基礎(chǔ)url地址。例如，如果希望將文檔的基礎(chǔ)URL定義為https：//www.abc.com，則可以使用如下語句：welcom.html,則它實(shí)際上指向的是如下url地址：https://www.abc.com/welocme.html。
2. target
定義了當(dāng)文檔中的鏈接點(diǎn)擊后的打開方式_blank，_self，_parrent，_top。
6. link 標(biāo)簽
link用于引入外部樣式表，在html的頭部可以包含任意數(shù)量的link，link標(biāo)簽有以下常用屬性。
type="text/css"?rel="stylesheet"?href="github-markdown.css">
1. type
定義包含的文檔類型，例如text/css
2. rel
定義html文檔和所要包含資源之間的鏈接關(guān)系，可能的值有很多，最為常用的是stylesheet，用于包含一個(gè)固定首選樣式的表單。
3. href
表示指向被包含資源的url地址。
7. style 標(biāo)簽
編寫內(nèi)部樣式表的標(biāo)簽。
8. script 標(biāo)簽
加載javascript腳本的標(biāo)簽。加載的腳本會被默認(rèn)執(zhí)行。默認(rèn)情況下當(dāng)瀏覽器解析到script標(biāo)簽的時(shí)候會停止html的解析而開始加載script代碼并且執(zhí)行。
1. type
指示腳本的MIME類型。
3. charset
規(guī)定在外部腳本文件中使用的字符編碼。
4. defer
規(guī)定是否對腳本執(zhí)行進(jìn)行延遲，直到頁面加載為止。設(shè)置了defer屬性的script不會阻止后面html的解析，加載與解析是共同進(jìn)行的，但是script的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成。
5. language
規(guī)定腳本語言，與``type```功能類似，不建議使用該字段。
6. src
外部腳本的地址。
9. bgsound
網(wǎng)站背景音樂。
"music.mp4"?autostart="true"?loop="5">
1. src
表示背景音樂的url值。
2. autostart
是否自動播放ture自動播放，false不播放，默認(rèn)為false。
3. loop
是否重復(fù)播放，值為數(shù)字或者infinite，表示重復(fù)具體次或無限次。
參考來源
[1] https://www.w3school.com.cn/tags/tag_head.asp [2] https://blog.csdn.net/qq_46580571/article/details/106035249
作者：隱冬
https://juejin.cn/post/6987919006468407309
點(diǎn)贊和在看就是最大的支持??