最近部門在推微前端,須要按功能拆分多個子應用,主應用在加載的過程當中常常出現加載失敗的問題。由於https地址中,若是加載了http資源,瀏覽器將認爲這是不安全的資源,將會默認阻止。後來在文檔中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
完美解決。javascript
此時我才發現本身對meta
簡直一無所知,本文主要介紹meta
,順帶也會提一提head
中的其它標籤。若有不對請指出,最後歡迎點贊 + 收藏。css
head
標籤與html
標籤,body
標籤同樣是一個文檔必須的元素。html
head
標籤用於定於文檔頭部信息,它是全部頭部元素的容器。head
中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。前端
文檔的頭部描述了文檔的各類屬性和信息,包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。html5
下面這些標籤可用在 head
部分:base
, link
, meta
, script
, style
, 以及 title
。java
注意:
應該把 head
標籤放在文檔的開始處,緊跟在 html
後面,並處於 body
標籤或 frameset
標籤以前。git
title
定義文檔的標題,它是 head
部分中惟一必需的元素。瀏覽器會以特殊的方式來使用標題,設置的內容不會顯示在頁面中,一般把它放置在瀏覽器窗口的標題欄或狀態欄上,如設置爲空標題展現當前頁面的地址信息。github
當把文檔加入用戶的連接列表或者收藏夾或書籤列表時,標題將成爲該文檔連接的默認名稱。瀏覽器
規定元素中內容的文本方向rtl
、ltr
。緩存
規定元素中內容的語言代碼。
meta
元素每每不會引發用戶的注意,可是meta
對整個網頁有影響,會對網頁可否被搜索引擎檢索,和在搜索中的排名起着關鍵性的做用。
meta
有個必須的屬性content
用於表示須要設置的項的值。
meta
存在兩個非必須的屬性http-equiv
和name
, 用於表示要設置的項。
好比<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
,設置的項是Content-Security-Policy
設置的值是upgrade-insecure-requests
。
http-equiv
通常設置的都是與http
請求頭相關的信息,設置的值會關聯到http頭部。也就是說瀏覽器在請求服務器獲取html
的時候,服務器會將html
中設置的meta
放在響應頭中返回給瀏覽器。常見的類型好比content-type
, expires
, refresh
, set-cookie
, window-target
, charset
, pragma
等等。
好比:<meta http-equiv="content-type" content="text/html charset=utf8">
能夠用來聲明文檔類型,設置字符集,content-type
幾乎全部的屬性均可以在meta
中進行設置。
這樣設置瀏覽器的頭信息就會包含:
content-type: text/html charset=utf8
複製代碼
用於設置瀏覽器的過時時間, 其實就是響應頭中的expires屬性。
<meta http-equiv="expires" content="31 Dec 2021">
複製代碼
expires:31 Dec 2008
複製代碼
該種設定表示5秒自動刷新而且跳轉到指定的網頁。若是不設置url的值那麼瀏覽器則刷新本網頁。
<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com">
複製代碼
強制頁面在當前窗口以獨立頁面顯示, 能夠防止別人在框架中調用本身的頁面。
<meta http-equiv="window-target" content="_top'> 複製代碼
禁止瀏覽器從本地計算機的緩存中訪問頁面的內容
<meta http-equiv="pragma" content="no-cache">
複製代碼
name
屬性主要用於描述網頁,與對應的content
中的內容主要是便於搜索引擎查找信息和分類信息用的, 用法與http-equiv
相同,name
設置屬性名,content
設置屬性值。
author
用來標註網頁的做者
<meta name="author" content="aaa@mail.abc.com">
複製代碼
description
用來告訴搜素引擎當前網頁的主要內容,是關於網站的一段描述信息。
<meta name="description" content="這是個人HTML">
複製代碼
keywords
設置網頁的關鍵字,來告訴瀏覽器關鍵字是什麼。是一個常常被用到的名稱。它爲文檔定義了一組關鍵字。某些搜索引擎在遇到這些關鍵字時,會用這些關鍵字對文檔進行分類。
<meta name="keywords" content="Hello world">
複製代碼
表示當前html
是用什麼工具編寫生成的,並無實際做用,通常是編輯器自動建立的。
<meta name="generator" content="vscode">
複製代碼
指定頁面的最新版本
<meta name="revised" content="V2,2015/10/1">
複製代碼
告訴搜索引擎機器人抓取哪些頁面,all / none / index / noindex / follow / nofollow
。
<meta name="robots" content="all">
複製代碼
all
:文件將被檢索,且頁面上的連接能夠被查詢; none
:文件將不被檢索,且頁面上的連接不能夠被查詢; index
:文件將被檢索; follow
:頁面上的連接能夠被查詢; noindex
:文件將不被檢索,但頁面上的連接能夠被查詢; nofollow
:文件將不被檢索,頁面上的連接能夠被查詢。
scheme
屬性用於指定要用來翻譯屬性值的方案。此方案應該在由 head
標籤的 profile
屬性指定的概況文件中進行了定義。html5
不支持該屬性。
base
標籤訂義了文檔的基礎url
地址,在文檔中全部的相對地址形式的url
都是相對於這裏定義的url
而言的。爲頁面上的連接規定默認地址或目標。
<base href="http://www.w3school.com.cn/i/" target="_blank" />
複製代碼
base標籤包含的屬性。
href
是必選屬性,指定了文檔的基礎url
地址。例如,若是但願將文檔的基礎URL定義爲https://www.abc.com
,則可使用以下語句:<base href="http://www.abc.com">
若是文檔的超連接指向welcom.html
,則它實際上指向的是以下url
地址:https://www.abc.com/welocme.html
。
定義了當文檔中的連接
點擊後的打開方式_blank
,_self
,_parrent
,_top
。
link
用於引入外部樣式表,在html
的頭部能夠包含任意數量的link
,link
標籤有如下經常使用屬性。
<link type="text/css" rel="stylesheet" href="github-markdown.css">
複製代碼
定義包含的文檔類型,例如text/css
定義html
文檔和所要包含資源之間的連接關係,可能的值有不少,最爲經常使用的是stylesheet
,用於包含一個固定首選樣式的表單。
表示指向被包含資源的url
地址。
編寫內部樣式表的標籤。
<style> body { background: #f3f5f9; } </style>
複製代碼
加載javascript
腳本的標籤。加載的腳本會被默認執行。默認狀況下當瀏覽器解析到script
標籤的時候會中止html
的解析而開始加載script
代碼而且執行。
<script src="script.js"></script>
複製代碼
指示腳本的MIME
類型。
<script type="text/javascript">
複製代碼
規定異步執行腳本,僅適用於經過src
引入的外部腳本。設置的async
屬性的script
加載不會影響後面html
的解析,加載是與文檔解析同時發生的。加載完成後當即執行。執行過程會中止html
文檔解析。
<script async src="script.js"></script>
複製代碼
規定在外部腳本文件中使用的字符編碼。
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
複製代碼
規定是否對腳本執行進行延遲,直到頁面加載爲止。設置了defer
屬性的script
不會阻止後面html
的解析,加載與解析是共同進行的,可是script
的執行要在全部元素解析完成以後,DOMContentLoaded
事件觸發以前完成。
<script defer src="script.js"></script>
複製代碼
規定腳本語言,與``type```功能相似,不建議使用該字段。
外部腳本的地址。
<script src="script.js"></script>
複製代碼
網站背景音樂。
<bgsound src="music.mp4" autostart="true" loop="5">
複製代碼
表示背景音樂的url
值。
是否自動播放ture
自動播放,false
不播放,默認爲false
。
是否重複播放,值爲數字或者infinite
,表示重複具體次或無限次。
如轉載必須標明文章出處
,文章名稱
,文章做者
,格式以下:
轉自:【掘金 - https://juejin.cn/】 [meta標籤究竟是作什麼的|我竟一無所知] "隱冬"