1. causes
最近部门在推微前端，需要按功能拆分多个子应用，主应用在加载的过程中经常出现加载失败的问题。因为 https 地址中，如果加载了 http 资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解决。
此时我才发现自己对meta简直一无所知，本文主要介绍meta，顺带也会提一提head中的其他标签。如有不对请指出，最后欢迎点赞 + 收藏。
2. head tag
head标签与html标签，body标签一样是一个文档必须的元素。
head标签用于定于文档头部信息，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
The header of a document describes various attributes and information of the document, including the title of the document, its location on the Web, and its relationship with other documents. The data contained in the header of most documents will not actually be displayed to readers as content.
下面这些标签可用在 head 部分：base, link, meta, script, style, 以及 title。
注意:应该把 head 标签放在文档的开始处，紧跟在 html 后面，并处于 body 标签或 frameset 标签之前。
3. title tag
title 定义文档的标题，它是 head 部分中唯一必需的元素。浏览器会以特殊的方式来使用标题，设置的内容不会显示在页面中，通常把它放置在浏览器窗口的标题栏或状态栏上，如设置为空标题展示当前页面的地址信息。
When a document is added to a user's link list or favorites or bookmark list, the title becomes the default name for the document's link.
3.1. dir attribute
规定元素中内容的文本方向rtl、ltr。
3.2. lang attribute
Specifies the language code for the content in the element.
4. meta tag
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 attribute
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 文档中使用。
In this way, the browser header information will include:
content-type: text/html charset=utf8
4.1.2. expires
Used to set the browser's expiration time, which is actually the expires property in the response header.
<meta http-equiv="expires" content="31 Dec 2021" />
expires:31 Dec 2008
4.1.3. refresh
This setting means that it will automatically refresh and jump to the specified web page in 5 seconds. If the url value is not set, the browser will refresh this page.
<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com" />
4.1.4. window-target
Forcing pages to appear as a separate page in the current window prevents others from calling their own pages in the frame.
<meta http-equiv="window-target" content="_top'>
4.1.5. pragma
Prevent the browser from accessing page content from the local computer's cache
<meta http-equiv="pragma" content="no-cache" />
4.2. name attribute
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
Represents what tool is used to write and generate the current html. It has no practical effect and is generally created automatically by the editor.
<meta name="generator" content="vscode" />
4.2.5. revised
Specifies the latest version of the page
<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 attribute
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 head 标签的 profile 属性指定的概况文件中进行了定义。html5不支持该属性。
5. base label
base标签定义了文档的基础url地址，在文档中所有的相对地址形式的url都是相对于这里定义的url而言的。为页面上的链接规定默认地址或目标。
<base href="http://www.w3school.com.cn/i/" target="_blank" />
Attributes contained in the base tag.
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 label
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 tag
Write labels for internal style sheets.
<style>
body {
background: #f3f5f9;
}
</style>
8. script tag
加载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
Specifies the character encoding used in external script files.
<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
The address of the external script.
<script src="script.js"></script>
9. bgsound
Background music on the website.
<bgsound src="music.mp4" autostart="true" loop="5"></bgsound>
9.1. src
表示背景音乐的url值。
9.2. autostart
是否自动播放ture自动播放，false不播放，默认为false。
9.3. loop
是否重复播放，值为数字或者infinite，表示重复具体次或无限次。
** Reference source **
Author: Yin Dong
Link: juejin.cn/post/6987919006468407309
Source: Rare Earth Nuggets