meta標籤究竟是作什麼的|我竟一無所知

1. 原由

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

此時我才發現本身對meta簡直一無所知,本文主要介紹meta,順帶也會提一提head中的其它標籤。若有不對請指出,最後歡迎點贊 + 收藏。css

2. head 標籤

head標籤與html標籤,body標籤同樣是一個文檔必須的元素。html

head標籤用於定於文檔頭部信息,它是全部頭部元素的容器。head中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。前端

文檔的頭部描述了文檔的各類屬性和信息,包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。html5

下面這些標籤可用在 head 部分:base, link, meta, script, style, 以及 titlejava

注意:應該把 head 標籤放在文檔的開始處,緊跟在 html 後面,並處於 body 標籤或 frameset 標籤以前。git

3. title 標籤

title 定義文檔的標題,它是 head 部分中惟一必需的元素。瀏覽器會以特殊的方式來使用標題,設置的內容不會顯示在頁面中,一般把它放置在瀏覽器窗口的標題欄或狀態欄上,如設置爲空標題展現當前頁面的地址信息。github

當把文檔加入用戶的連接列表或者收藏夾或書籤列表時,標題將成爲該文檔連接的默認名稱。瀏覽器

1. dir 屬性

規定元素中內容的文本方向rtlltr緩存

2. lang 屬性

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

4. meta 標籤

meta 元素每每不會引發用戶的注意,可是meta對整個網頁有影響,會對網頁可否被搜索引擎檢索,和在搜索中的排名起着關鍵性的做用。

meta有個必須的屬性content用於表示須要設置的項的值。

meta存在兩個非必須的屬性http-equivname, 用於表示要設置的項。

好比<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, charsetpragma等等。

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="aaa@mail.abc.com">
複製代碼

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

5. base 標籤

base標籤訂義了文檔的基礎url地址,在文檔中全部的相對地址形式的url都是相對於這裏定義的url而言的。爲頁面上的連接規定默認地址或目標。

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

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的頭部能夠包含任意數量的linklink標籤有如下經常使用屬性。

<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腳本的標籤。加載的腳本會被默認執行。默認狀況下當瀏覽器解析到script標籤的時候會中止html的解析而開始加載script代碼而且執行。

<script src="script.js"></script>
複製代碼

1. type

指示腳本的MIME類型。

<script type="text/javascript">
複製代碼

2. async

規定異步執行腳本,僅適用於經過src引入的外部腳本。設置的async屬性的script加載不會影響後面html的解析,加載是與文檔解析同時發生的。加載完成後當即執行。執行過程會中止html文檔解析。

<script async src="script.js"></script>
複製代碼

3. charset

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

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

4. defer

規定是否對腳本執行進行延遲,直到頁面加載爲止。設置了defer屬性的script不會阻止後面html的解析,加載與解析是共同進行的,可是script的執行要在全部元素解析完成以後,DOMContentLoaded事件觸發以前完成。

<script defer src="script.js"></script>
複製代碼

5. language

規定腳本語言,與``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,表示重複具體次或無限次。

參考來源

轉載須知

如轉載必須標明文章出處文章名稱文章做者,格式以下:

轉自:【掘金 - https://juejin.cn/】 [meta標籤究竟是作什麼的|我竟一無所知] "隱冬"

相關文章
相關標籤/搜索