HTML的Meta标签详解-创新互联

在VS Code新建html文件，输入!按回车，会自动生成以下html5模板页面。

注意meta和title的位置顺序，否则有可能出现乱码或不起作用等怪异问题。

从以上代码的中可以看到很多meta的标签，他们还有哪些属性，都有什么作用呢？下面为大家详细介绍：

Meta标签是用来描述网页属性的一种语言

是描述 HTML 文档的元数据。例如网页描述、关键词、页面刷新、作者和日期等。

元数据不会显示在客户端，但是会被浏览器解析，或其他 Web 服务调用。

Meta用于定义页面元信息，也就是一些键值对，主要有以下三个属性。

1. http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。

2. name：指定元信息名称，该名称值可以随意指定。

3. content：指定元信息的值。

http-equiv为http响应头，顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。代码格式：

常用的http-equiv属性有以下几种：

1.禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出

注意：这样设定，访问者将无法脱机浏览。

2.清除缓存(再访问这个网站要重新下载！)

3.设定网页的到期时间,一旦网页过期,必须到服务器上重新传输。（已淘汰）

注意：必须使用GMT的时间格式。

4.html+utf-8，content-Type(显示字符集的设定)，设定页面使用的字符集编码

5.几秒后页面自动跳转

注意：其中的2是指停留2秒钟后自动刷新到URL网址。content后面的引号，分别在秒数的前面和网址的后面

6.Set-Cookie如果网页过期,那么存盘的cookie将被删除

注意：必须使用GMT的时间格式。

7.Window-target(显示窗口的设定),用来防止别人在框架里调用自己的页面

8.content-Language（显示语言的设定）

9.X-UA-Compatible （IE兼容模式）用于指定IE浏览器网页的兼容性模式

为了帮助确保网页在将来的 Internet Explorer 版本中具有一致的外观，Internet Explorer 8 引入了文档兼容性。文件兼容性用于定义IE如何渲染网页。
X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

这里设置x-ua-compatible来强制浏览器的渲染方式，优先使用IE的最新版本和 Chrome。

注意：根据官网定义X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。否则，它不起作用。

标准的Meta标签还可以便于搜索引擎排序，提高搜索引擎网站权重排名

1、meta标签的keywords的信息参数，代表网页搜索的关键字。

建议不超过5个关键字，每个关键字8汉字以内；禁忌堆砌，与网站主题无关。

2、meta标签的description的信息参数，用来告诉搜索引擎你的网站主要内容。

字数不要超过80个汉字，160个字符。建议100个字符（50个汉字）左右。

description标签虽然与搜索引擎排名无关，但对于获得SERP中的用户点击率而言极为重要。

3、meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。

4、meta标签的author的信息参数，代表说明网页版权作者信息。

5、meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。

6、指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

7、W3C网页规范，指明页面中脚本的类型。

8、revisit-after代表网站重访,7days代表7天，依此类推。

9、Robots代表告诉搜索引擎机器人抓取哪些页面

Robots的content属性说明如下：
信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

演示京东的meta：

常用Meta信息

1、renderer 告诉浏览器优先使用哪种文档渲染模式

webkit：使用webkit内核
ie-comp：使用ie兼容模式 类似于ie6/7
ie-stand：使用标准ie模式，可以配合x-ua-compatible来指定具体的版本

为解决浏览器兼容性问题，使用了renderer属性，可以让浏览器在第一次打开你的网页时使用指定的内核打开，在你的网页上加上webkit的模式，可以让使用360的用户第一次打开时就使用极速模式打开，一定程度上避免了第一次打开就出问题的情况。

2、referer 告诉服务器端用户是从哪个页面来到当前网页的

referrer有“引用页面”或“来源页面”的意思，用来指定当前页面是从哪个页面跳转过来的，也就是说HTTP请求报头中的referrer包含了跳转至当前页面的上一个页面的url地址。
比如，你点击A页面中链接到B页面的URL地址，当你从浏览器进入B页面时，会向服务器发送请求，在这个请求的报头中会带上一个referrer，包含了A页面的URL地址；
referrer可以告诉你用户是从哪个页面url地址过来的，这样就可以用来统计用户的来源，还可以用于分析用户的兴趣爱好、收集日志、优化缓存等等。
如果禁止referrer，可以防止盗链，或也可以绕过防盗链，也能防范一些攻击。
如果网页中，由于涉及隐私和安全问题，防止 referrer 泄漏就显得很重要了。
比如，很多情况下我们的url会包含用户的个人信息。因此，有时候，我们需要移除或禁用页面上的referer信息
再比如，在后台中使用了referer属性，会导致js和php的一些跳转出现问题，同时，也很有可能会导致一些第三方的统计代码失效，比如cnzz，百度统计，解决方法是不用该属性，或者使用iframe包裹一层，用一个独立的html页面加载统计代码！

referrer有五种属性

1、No Referrer （永远不做记录）
no-referrer：所有请求不发送 referrer。
2、No Referrer When Downgrade（浏览器默认，当降级时候不记录，从https跳转到http）
no-referrer-when-downgrade：
当请求安全级别下降时不发送 referrer。目前，只有一种情况会发生安全级别下降，即从 HTTPS 到 HTTP。HTTPS 到 HTTP 的资源引用和链接跳转都不会发送 referrer。
3、Origin Only（只记录 协议+ host）
same-origin：对于同源的链接和引用，会发送referrer，其他的不会。
origin：在任何情况下仅发送源信息作为引用地址。源信息包括访问协议和域名。
strict-origin：在安全级别下降时不发送 referrer；而在同等安全级别的情况下仅发送源信息。注意：这个是新加的标准，有些浏览器可能还不支持。
4、Origin When Cross-origin（仅在发生跨域访问时记录 协议+host）
origin-when-cross-origin：同源的链接和引用，会发送完全的 referrer 信息；但非同源链接和引用时，只发送源信息。
strict-origin-when-cross-origin（默认值）：同源的链接和引用，会发送 referrer。安全级别下降时不发送 referrer。其它情况下发送源信息。注意：这个是新加的标准，有些浏览器可能还不支持。
5、Unsafe URL（永远记录）
unsafe-url：无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送 Referrer 信息。正如其名，这是最宽松而最不安全的策略。

百度是一种引用策略，可以用来防止图片或视频被盗。它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。有点像我们经常写在请求头的token，也是一种来源验证的方式，也是为了防盗。
如果去掉了referrer,也就是使用了no-referrer,在不同的来源(http)时，避免报错403，强制不验证来源，即任何来源都可以访问，也就是不安全策略。

3、viewport 用于优化移动浏览器的显示（屏幕的缩放）（HTML 5新增）

参数值：

width： viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
height： viewport 的高度，不重要，很少使用 （范围从 223 到 10,000 ）
user-scalable： [yes | no]是否允许缩放
initial-scale： 初始化比例（范围从 >0 到 10） [数值，可带小数]
minimum-scale： 允许缩放的最小比例 [数值，可带小数]
maximum-scale：允许缩放的大比例 [数值，可带小数]

4、format-detection（忽略电话号码和邮箱）

忽略页面中的数字识别为电话号码（IOS）

忽略页面中的邮箱格式识别为邮箱

也可以写成：

5、WebApp全屏模式(IOS)

6、隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

7、不同浏览器

8、转码申明

通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。们可以通过以上这个meta标签来禁止它。

9、常用IOS苹果手机Meta标签

content 参数：
default ：状态栏背景是白色。
black ：状态栏背景是黑色。
black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

10、添加到主屏后的APP图标

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧