道友请留步,<meta>了解一下

·  阅读 862

meta的作用

meta是用来表示不能够由其他HTML元素(<link> <base> <script> <style>)表示的元数据信息。

什么是元数据

MDN中是这样描述元数据概念的 in its very simplest definition — data that describes data. 描述数据的数据被称之为元数据。

举个例子来说, 我们的HTML页面内容是数据,通过它们我们可以展现一个完整的界面,而描述构成界面的这些数据是怎么样的,就是元数据了。

也就是提供页面的作者、关键字、编码类型、编译方式等各种信息的数据。 它可能不会影响到我们页面的展示,但是会影响到浏览器等对于我们页面的解析方式。

meta关键字

meta的关键字通常有以下几种

name

name: 设置文档级别的元数据,应用于整个页面

格式: <meta name="参数" content="内容">name属性通常和content属性一起使用, 提供类似于键-值对一样的信息。name是键,content代表值。

name的常见参数

  • anchor:提供作者信息,content格式可以自由定义
<meta name="anchor" content="JustDoIt521">
复制代码
  • keyword:关键字信息,可以告诉搜素引擎这个页面的关键字是什么,注意content使用分隔符。
<meta name="keyword" content="meta,前端,掘金">
复制代码
  • generator: 包含生成页面的软件的标识符。 对generator有这样一段描述:

该值必须是标识用于生成文档的软件包之一的自由格式字符串。不得在标记不是由软件生成的页面上使用此值,例如其标记是由用户在文本编辑器中编写的页面。

我理解就是说 标识的字符串格式是自由格式,没有限制, 但是是能标明由哪个软件包生成的该文档。 类似于txt这种不是由软件生产的页面上是不可以使用这个值的。

<meta name="generator" content="WordPress 3.0.1">
// (在stackover上找到的例子)
// 链接 https://stackoverflow.com/questions/3632166/should-i-include-a-meta-generator-tag
复制代码
  • referrer:控制从该页面发出的http请求中请求头的referrer首部内容

*viewpoint:进行移动端开发时设置页面大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
//设置页面宽度为屏幕宽度, 最大最小缩放值为1,不允许用户缩放
复制代码

参考文章 viewport 深入理解

http-equiv

http-equivMDN上是这样描述的属性定义了一个编译指示指令。这个属性叫做 http-equiv是因为所有允许的值都是特定HTTP头部的名称。 有点绕口,http-quiv全称是http-equivalent,http等价。再结合MDN上的描述可以理解为定义了http请求头部信息。来看下常见的参数吧:

http-equiv常见参数

  • content-security-policy: 定义内容策略,即定义http请求允许的服务器源和脚本点。(看来是可以预防下跨站点脚本攻击了嘿)。
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

做了如下限制
脚本:只信任当前域名
<object>标签:不信任任何URL,即不加载任何资源
样式表:只信任cdn.example.org和third-party.org
框架(frame):必须使用HTTPS协议加载
其他资源:没有限制
复制代码

常见的各类资源限制加载

参考文章 Content Security Policy 入门教程

  • content-type: 注意!如果使用这个属性,其值必须是text/html; charset=utf-8,该属性只能用于MIME type为 text/html 的文档,不能用于MIME类型为XML的文档。
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
复制代码
  • refresh: 页面在指定时间间隔后刷新,并跳转到对应的url去。格式如下
// 2秒后页面跳转到百度
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com/">
// 页面每两秒刷新一次
<meta http-equiv="refresh" content="2">
复制代码
  • x-ua-compatible:告知浏览器以何种版本渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
复制代码

charset

声明文章的字符编码格式, 如果使用这个属性,格式为

<meta charset='utf-8'> // 只有这一种用法 一种格式哦
复制代码

总结

不完善的地方还有很多,如有错误请各位不吝指正。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改