meta标签究竟是作什么的|我竟一无所知

1. 原由

最近部门在推微前端，须要按功能拆分多个子应用，主应用在加载的过程当中常常出现加载失败的问题。由于https地址中，若是加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解决。

此时我才发现本身对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 部分中惟一必需的元素。浏览器会以特殊的方式来使用标题，设置的内容不会显示在页面中，一般把它放置在浏览器窗口的标题栏或状态栏上，如设置为空标题展现当前页面的地址信息。

当把文档加入用户的连接列表或者收藏夹或书签列表时，标题将成为该文档连接的默认名称。

1. dir 属性

规定元素中内容的文本方向rtl、ltr。

2. lang 属性

规定元素中内容的语言代码。

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请求头相关的信息，设置的值会关联到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="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的头部能够包含任意数量的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脚本的标签。加载的脚本会被默认执行。默认状况下当浏览器解析到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，表示重复具体次或无限次。

参考来源

• [1] w3chool head www.w3school.com.cn/tags/tag_he… "w3c"
• [2] head标签及子标签 blog.csdn.net/qq_46580571… "Wangkiwa"

转载须知

如转载必须标明文章出处，文章名称，文章做者，格式以下:

转自：【掘金 - https://juejin.cn/】 [meta标签究竟是作什么的|我竟一无所知] "隐冬"