那些我不知道的Meta标签

迈不过友情╰ 2022-09-04 12:51 204阅读 0赞

## 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属性。

expires:31 Dec 2008

#### 3. refresh ####

该种设定表示5秒自动刷新并且跳转到指定的网页。如果不设置url的值那么浏览器则刷新本网页。

#### 4. window-target ####

强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面。

#### 5. pragma ####

禁止浏览器从本地计算机的缓存中访问页面的内容

### 2. name 属性 ###

`name`属性主要用于描述网页，与对应的`content`中的内容主要是便于搜索引擎查找信息和分类信息用的, 用法与`http-equiv`相同，`name`设置属性名，`content`设置属性值。

#### 1. author ####

`author`用来标注网页的作者

#### 2. description ####

`description`用来告诉搜素引擎当前网页的主要内容，是关于网站的一段描述信息。

#### 3. keywords ####

`keywords`设置网页的关键字，来告诉浏览器关键字是什么。是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

#### 4. generator ####

表示当前`html`是用什么工具编写生成的，并没有实际作用，一般是编辑器自动创建的。

#### 5. revised ####

指定页面的最新版本

#### 6. robots ####

告诉搜索引擎机器人抓取哪些页面，`all / none / index / noindex / follow / nofollow`。

`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`标签有以下常用属性。

### 1. type ###

定义包含的文档类型，例如`text/css`

### 2. rel ###

定义`html`文档和所要包含资源之间的链接关系，可能的值有很多，最为常用的是`stylesheet`，用于包含一个固定首选样式的表单。

### 3. href ###

表示指向被包含资源的`url`地址。

## 7. style 标签 ##

编写内部样式表的标签。