meta 标签

meta标签介绍

  • <meta>元素表示那些不能由其它 HTML 元相关(meta-related)元素((base、link, script、style 或 title)之一表示的任何Metadata信息。
  • 人话就是加了meta标签,干了一些以前标签干不了的事

类型

  • 如果设置了 name 属性,meta 元素提供的是文档级别(document-level)的元数据,应用于整个页面。
  • 如果设置了 http-equiv 属性,meta 元素则是编译指令,提供的信息与类似命名的HTTP头部相同。
  • 如果设置了 charset 属性,meta 元素是一个字符集声明,告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 属性,meta 元素提供用户定义的元数据。

常用的meta标签

<meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<meta name="author" content="name, email@gmail.com" /> <!-- 网页作者 -->
<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->
<meta name="referrer" content="no-referrer"/>//控制由当前文档发出的请求的 HTTP Referer 请求头
<!-- 为移动设备添加 viewport -->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

<meta http-equiv="cache-control" content="no-cache">

总结

  • 描述文档编码方式
  • 描述文档信息
  • 控制移动端窗口
  • 添加请求头的信息
  • 网页重定向
  • 浏览器渲染方式

ps: 整理meta标签是为了解决微信图片防盗链的问题 使用<meta name="referrer" content="no-referrer"/>的确可以解决防盗链图片不显示问题,但是页面发的请求头里origin都没了,会造成其他的问题,如果只是解决图片的请求origin可以直接在<img referrerPolicy="no-referrer" />就可以了

更多

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#attr-name

发布日期:
分类:HTML 标签:

发表评论

您的电子邮箱地址不会被公开。