META元标记详解-白红宇

META元标记详解

阅读量：7105 次

发布时间：2019-06-28

本文共 4122 字，大约阅读时间需要 13 分钟。

一.META标签的作用

英文解释：The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

META 元素中的信息可以描述 HTML 文档。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间。META标签通常用来为搜索引擎定义页面主题，或者是定义用户浏览器上的Cookie，用于区分作者，设定页面格式，标注内容摘要和关键字，还可以设置页面使其可以根据开发者定义的时间间隔自动刷新等等.

二.META标签解释

META标签分两大部分：页面描述信息(NAME)和Http标题信息(HTTP-EQUIV)，下面介绍常见的属性值和用法：

1.页面描述信息——NAME属性

作用：用于描述网页信息，方便搜索引擎查找、分析网页内容，然后根据META信息给网页分类，具体信息在属性content内.

属性name与content对应key和value，name属性的值代表所提供信息的类型，可以是已经定义好的内容，如description(简介)、keyword(关键字)、refresh(刷新)等等，还可以是其他任意值，比如createdate(创建日期)、versionid(版本号)等等.

(1)author(作者)

作用：标注网页的作者(可以是名字or邮件地址).

用法：<meta name='author' content='Jacktanger,admin@tangijia.cn' />

(2)description(简介)

作用：告诉搜索引擎该网页的主要内容是什么，也就是每次百度一下后，展示结果页面的摘要内容.

用法：<meta name='description' content='本网页主要讲解了XXX' />

(3)keywords(关键字)

作用：告诉搜索引擎可以通过哪些词语可以检索到本网页，提高搜索结果的质量，各关键字之间用英文符合","分隔开.

用法：<meta name='keywords' content='京东,正品' />

(4)viewport(移动端窗口)

作用：常见于移动端网页，在用bootstrap等框架时候都有用过viewport.

用法：<meta name='viewport' content='width=device-width, initial-scale=1' />

(5)generator(编辑器)

作用：所使用的编辑器.

用法：<meta name='generator' content='PCDATA|FrontPage|' />

(6)revised(修改信息)

作用：该网页修改的信息.

用法：<meta name='revised' content='Jacktanger,2017/1/1' />

(7)copyright(版权)

作用：网页的版权信息.

(8)robots(机器人向导)

作用：告诉搜索引擎机器人哪些页面需要索引，哪些页面不需要索引.context属性的值有以下几种：all(默认值，等同于'index,follow'，被检索，包括页面上的link)、none(等同于'noindex,onfollow'，不被检索，包括页面上的link)、index(被检索，让robot机器人/spider爬虫登录)、noindex(不被检索，可查询页面的link，不让robot机器人/spider爬虫登录)、follow(可查询页面的link)、nofollow(不被检索，可查询页面的link，不让robot机器人/spider爬虫根据链接往下查询).

用法：<meta name='robots' content='noindex, nofollow' />

(9)revisit-after(重访)

作用：告诉搜索引擎多久访问一次本页面.

用法：<meta name='revisit-after' content='5 days' />

(10)renderer(双核浏览器渲染方式)

作用：指定双核浏览器默认以何种方式渲染页面.

用法：<meta name='renderer' content='ie-comp' /> --默认IE兼容模式

2.Http标题信息——HTTP-EQUIV

作用：HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容.

HTTP-EQUIV属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有HTTP-EQUIV属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部.

(1)content-type content-language charset(显示文字的设置)

作用：告诉浏览器网页正确显示网页的内容、文字编码.

用法：<meta http-equiv='charset' content='utf-8' />

(2)refresh(刷新)

作用：设置网页过多久(单位是秒)后自动刷新自己或者跳转到其它指定网页.

用法：<meta http-equiv='refresh' content='10' />

(3)expires(过期)

作用：设置网页缓存的过期时间，当网页过期，浏览器会重新请求服务器.

用法：<meta http-equiv='expires' content='0' />--表示不缓存，每次都重新请求

(4)pragma(缓存模式)

作用：设置浏览器对网页的缓存控制，context属性的值：no-cache(不缓存)

用法：<meta http-equiv='pragma' content='no-cache' />

(5)cache-control(缓存控制)

作用：指定请求和响应遵循的缓存机制，context属性的值有以下几种：no-cache(先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存)、no-store(不允许缓存，保证每次访问的网页都是最新的),public(缓存所有响应，不是必须，max-age有类似效果)、private(为单个用户缓存，不允许任何中继CDN存)、maxage=xx(表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求)、no-siteapp(禁止搜索引擎自动转码).

用法：<meta http-equiv='cache-control' content='no-cache' />

(6)set-cookie(设置Cookie)

作用：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度.

用法：<meta http-equiv='set-cookie' content='user=Jacktanger;xxx=yyy' />

(7)X-UA-Compatible(浏览器采取何种版本渲染)

作用：指定浏览器采取何种版本渲染网页.

用法：< meta http-equiv = 'X-UA-Compatible' content = 'IE=edge,chrome=1' />

(8)window-target(显示窗口设置)

作用：强制网页以指定方式显示，可以用来防止别人在框架中调用你的页面，context属性的值有以下几种：_blank、_top(防止嵌入)、_self、_parent.

用法：<meta http-equiv='window-target' content='_top' />

(9)pics-label(网页RSAC等级评定)

作用：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的，不建议将级别设置很高.

用法：<meta http-equiv='pics-label' content='xxx' />

3.META其他的属性

scheme：指定要用来翻译属性值的方案.

大概就是这些了，如果有写错的地方，请大虾帮忙指正~

转载于:https://my.oschina.net/javamaster/blog/820759

你可能感兴趣的文章