前端HTML标签 meta中常见的一些属性

meta中常见的一些属性

<meta/> 标签的属性
<meta/> 是什么？
<meta/> 标签主要用于表示和当前文档相关的 元数据 信息。
而 元数据（metadata），简单的来说就是描述数据的数据。例如，一个 HTML 文件是一种数据，但 HTML 文件也能在 head元素中包含描述该文档的 元数据，比如该文件的作者和概要。

1.name

name属性用于指定元数据的名称。

<meta name="description" content="这是一个描述"/>

2.charset

charset属性用于指定网页的字符编码。

<meta charset="UTF-8"/><!-- 若使用这个属性，那么它的值只能是字符串 "utf-8" （不区分 ASCII 大小写），因为 UTF-8 是 HTML5 文档的唯一有效编码
声明字符编码的 <meta> 元素必须完全位于 文档的前 1024 个字节内 -->

3.viewport

viewport属性用于指定网页的视口设置。确保在移动设备上显示的内容不会缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

4.robots

robots属性用于指定搜索引擎的爬虫索引方式。

<meta name="robots" content="index, follow"/><!-- 表示爬虫对此页面的处理行为 或 应当遵守的规则，是用来做搜索引擎抓取的
可设置 <meta name="robots" content="all | none | index | follow">all：搜索引擎将索引此网页，并继续通过此 网页的链接索引文件 将被检索
none：搜索引擎将 忽略 此网页
index：搜索引擎 索引 此网页
follow：搜索引擎继续通过此网页的链接索引搜索 其它的网页 -->

5.author

author属性用于指定网页的作者。

<meta name="author" content="John Doe"/>

6.keywords

keywords属性用于指定网页的关键字。

<meta name="keywords" content="HTML, CSS, JavaScript"/>

7.description

description属性用于指定网页的描述信息。

<meta name="description" content="这是一个描述"/>

清除缓存

在 单页面应用 (Single Page Application, SPA) 中，对应的 html 文件 是不需要被缓存的，只需要对 html 文件中的 CSS、JavaScript 等资源进行缓存（得益于现代构建工具的特性，可以直接使用 强缓存），那么此时我们就可以通过设置 来实现 html 文件清除缓存功能，如下：

    <meta http-equiv="Expires" content="0" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-control" content="no-cache" /><meta http-equiv="Cache" content="no-cache" />

renderer

用来指定支持双核浏览器要采用哪种的渲染方式，如 360 浏览器

<meta name="renderer" content="webkit"/> // 默认 webkit 内核<meta name="renderer" content="ie-comp"/> //默认 IE 兼容模式<meta name="renderer" content="ie-stand"/> //默认 IE 标准模式 

8.generator

generator属性用于指定生成当前网页的软件名称和版本号。

<meta name="generator" content="MyApp 1.0"/>

9.copyright

copyright属性用于指定网页的版权信息。

<meta name="copyright" content="Copyright © 2021 MySite. All Rights Reserved."/>

10.revisit-after

revisit-after属性用于指定搜索引擎爬虫访问网站的频率。

<meta name="revisit-after" content="7 days"/>

其他

http-equiv

通过该属性可以设置特定 HTTP 标头内容，例如（非全部）：

http-equiv="X-UA-Compatible"
一般用来是做 IE 浏览器适配 的，如以下告诉 IE 浏览器使用最高版本来渲染页面http-equiv="Content-Type"
用于声明 MIME 类型 和 文档的 字符编码
```html
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

http-equiv=“x-dns-prefetch-control”

HTML 页面中的 a 标签 会 自动启用 DNS 提前解析 来提升网站性能，但是在使用 https 协议的网站中失效，可通过设置以下方式进行打开

<meta http-equiv="x-dns-prefetch-control" content="on"/>
<meta/> 

这样的方式有利于在发布新版本后，避免通过手动清除浏览器缓存，如果不清除缓存就会加载旧版本的资源。

禁止翻译

通常项目中可能会存在 国际化 的需求，这就意味着用户可以手动选择 当前的语言环境，但除此之外，通过浏览器本身也会存在对应的 翻译插件。
问题点在于，如果用户先使用 浏览器翻译插件 默认翻译文档内容，又切换了 项目中的国际化 功能，那么此时就导致文档中的内容出现翻译不准确。
而这个问题是亲身经历过的，只记得当时用户在 Chrome 浏览器 中反馈翻译不准确甚至出现意料之外字符的问题时，也是花费了一番功夫才确定是用户使用 浏览器翻译插件 的问题，针对 Chrome 浏览器 在访问我们自己的项目时可以让其不进行 自动翻译，可进行如下设置：

<meta name="google" content="notranslate" />

自定义元数据
除了使用 标签本身提供特定元数据内容之外，我们其实也可以自定义元数据，只不过这个元数据不会被当前文档所识别并被应用，例如：

<meta name="theme-color" content="#333" />

# meta 中 name=viewPort 的一些属性## 1. widthwidth 属性设置视口的宽度，为一个正整数，或字符串"device-width"## 2. initial-scaleinitial-scale 属性设置页面的初始缩放值，为一个数字，可以带小数## 3. minimum-scaleminimum-scale 属性设置用户缩放的最小值，为一个数字，可以带小数## 4. maximum-scalemaximum-scale 属性设置用户缩放的最大值，为一个数字，可以带小数## 5. user-scalableuser-scalable 属性是布尔值，表示是否允许用户进行缩放，值为"no"或"yes"，默认为"no"，即不允许用户缩放页面## 6. 示例```html
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">

默认视图宽度 为 设备宽度
默认缩放比为 1
最大、最小缩放比为 1
不允许用户手动缩放

解决视图上移问题

正如前面所示，视图发生偏移只在 IOS 系统 中的 企微环境 出现，这就表明了 微信 webview 渲染 和 企微 webview 渲染 还是存在差异。

viewport-fit — iOS11 新增特性

viewport-fit 是为了适配 iPhoneX 对现有 标签的一个扩展，用于设置网页在可视窗口的布局方式，具有三个属性值：
auto
默认值，跟 contain 表现一致

contain
可视窗口 完全包含 网页内容

cover
网页内容 完全覆盖 可视窗口

既然看起来 企微 webview 中视图高度没法覆盖，那我们就可以通过 设置网页在可视区域的布局方式将视图内容，新增 viweport-fit: cover 使得页面内容完全覆盖整个窗口，即可解决问题：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">