html中meta标签说明

meta

一、标签说明

官方说明

​ The HTML <meta> element represents metadata that cannot be represented by other HTML meta-related elements, like base, link, script, style or title.

意思就是meta元素包含了HTML网页中不能在base，link，script，style，title等元素中表示的其他文档级别的元数据

二、标签属性

name

​ 元数据的名称对应于content：元数据的内容

​ 设置name属性的meta元数据将被应用于整个文档

http-equiv

​ 定义一些编译指令，它的值只能是http headers中一些特定的属性名，如：content-type

​ 它的内容放在content属性中

<meta http-equiv="content-type" content="text/html; charset=utf-8" >

content

​ 元数据的内容对应于name和http-equiv

charset

​ 指明当前页面的编码格式，只能设置为utf-8，大小写不敏感，而且此元数据必须位于文档的前1024字节内

<meta charset="utf-8" >

三、http-equiv介绍

​ http-equiv的属性包括：content-security-policy，content-type，default-style，x-ua-compatible，refresh

• content-security-policy

​ 主要是为当前页面定义内容策略，简称CSP。用于指定服务端和脚本端点，帮助阻止跨域脚本攻击

举个栗子

<!-- 站点的所以资源只能使用https方式获取 -->
<meta http-equiv="Content-Security-Policy" content="default-src https:">

详细用法传送门

• content-type

​ 声明文档的MIME类型和字符编码。如果在meta中使用content-type，则必须使用“text/html; charset=utf-8”，效果对等同于meta中设置的charset，

同样必须位于文档的前1024字节内。

​ 另外只能在带有text/html-的文档中使用-不能用于带有XML MIME类型的文档

<meta http-equiv="content-type" content="text/html; charset=utf-8">

• default-style

​ 设置默认CSS样式表集的名称

<!--content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。-->
<meta http-equiv="default-style" content="the document's preferred stylesheet">

• refresh

​ 定时刷新、定时重定向

<!-- 每30秒刷新一次页面 -->
<meta http-equiv="refresh" content="30">
<!-- 定时重定向 3秒后跳转百度-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

• x-ua-compatible

​ 为兼容IE而存在的标签，content属性必须具有值“IE=edge”

<!--可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器-->
<meta http-equiv = "X-UA-Compatible" content = "IE=Edge,chrome=1" >

四、name介绍

meta中最常用的属性，和content一起为页面提供元数据的名称和元数据的值

如：

<!-- 页面配色方案 -->
<meta name="color-scheme" content="dark light">

html规范中支持的name参数

• application-name：应用名称

• author：作者

• description：描述

• generator：制作页面的软件标识

• keywords：文档内容的关键字

• referer：控制页面发送给服务端的referer信息

  content信息	描述
  no-referrer	不要发送HTTP referrer头信息。
  origin	发送referrer的信息。
  no-referrer-when-downgrade	当目标的安全性至少与当前页面一样安全时，发送完整的URL（HTTP（S）→HTTPS），但是在安全性较差的情况下，不发送引荐来源（HTTPS→HTTP）。这是默认行为。
  origin-when-cross-origin	为相同来源的请求发送完整的URL（带参数的URL），但在其他情况下只发送原始URL。
  same-origin	发送相同来源请求的完整URL（带参数的URL）。跨域请求将不包含引荐来源标头。
  strict-origin	当目标的安全性至少与当前页面一样安全时，发送源（HTTP（S）→HTTPS），但在安全性较低时，不发送引荐来源地址（HTTPS→HTTP）。
  strict-origin-when-cross-origin	发送相同来源请求的完整URL（带参数的URL）。当目标至少与当前页面一样安全时发送原始消息（HTTP（S）→HTTPS）。否则，不发送引荐来源。
  unsafe-URL	发送相同来源或跨来源请求的完整URL（带参数的）。

• theme-color：用来定义网页周围或外面的颜色，比如移动端打开页面时，顶部状态栏的颜色

• color-scheme：配色方案，比移动端设置了深色模式，这个属性就可以和浏览器一起兼容深色模式

<!-- 仅使用浅色配色方案 -->
<meta name="color-scheme" content="only light">

其他规范中定义的标准元数据名称

• viewport：视区，此配置用于设置窗口大小及缩放设置，移动端使用

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

  content中的配置名	content中配置的值	描述
  width	正整数或文本 device-width	定义要在其上呈现网站的视口的像素宽度。
  height	正整数或文本 device-height	定义视口的高度。未被任何浏览器使用。
  initial-scale	0.0与之间的正数10.0	定义初始化时设备宽度（device-width纵向模式或device-height横向模式）与视口大小之间的比率。
  maximum-scale	0.0与之间的正数10.0	定义可放大的最大数量。它必须大于或等于minimum-scale。浏览器设置可以忽略此规则，iOS10 +默认情况下会忽略它。
  minimum-scale	0.0与之间的正数10.0	定义最小缩放级别。它必须小于或等于maximum-scale。浏览器设置可以忽略此规则，iOS10 +默认情况下会忽略它。
  user-scalable	yes 要么 no	如果设置为no，则用户将无法放大网页。默认值为yes。浏览器设置可以忽略此规则，默认情况下，iOS10 +会忽略它。
  viewport-fit	auto，contain或cover	该auto值不影响初始布局视口，并且整个网页都是可见的。该contain值表示视口已缩放以适合显示在显示屏上的最大矩形。该cover值表示视口已缩放以填充设备显示。