meta提供页面的有关的元信息，不显示在页面上，而是提供给浏览器和搜索引擎搜索。
使用：放在head中，不需要关闭标签也没有内容。
浏览器支持性：all
属性：charset 、content 、http-equiv 、 name 、scheme
- charset (h5)
html5的新属性，指定html文档的字符编码
value:字符集，浏览器不能识别所有的字符集，广泛使用的有 UTF-8、ISO-8859-1
eg:<meta charset='UTF-8'>
tip: html4中<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- content
描述html元数据，http-equiv和name值
eg:
<meta name="keywords" content="创作,图文">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
- http-equiv
提供了http头，可以用来模拟http响应头
eg:
<meta http-equiv="refresh" content="5">//5s后刷新页面
<meta http-equiv="refresh" content="5,URL=https://www.baidu.com">//停留5s重定向后面的网址上
| http-equiv | 描述 | 值 |
|---|---|---|
| X-UA-Compatible | IE8的专用标记，用来模拟渲染方式 | IE=edge,chrome=1 IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame |
| cache-control | 请求和响应缓存机制 | Public：指示响应可被任何缓存区缓存，可在多用户共存。 Private：缓存响应，但不能被共享缓存处理。 no-cache：响应不缓存。 no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存 max-age：[单位s]页面的最大缓存时间,时间内再次访问不会去服务器. no-transform:百度官方给的禁止转码; no-siteapp:禁止转码;等 |
| expires | 网页过期时间 | 必须使用GMT的时间格式 |
- name
主要用于描述网页
value: description|keyswords|viewport等
tip：如果设置了http-equiv属性，name属性就不应该设置了
keywords;
description;
author;
viewport：用于控制页面缩放
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
renderer：指定双核浏览器默认以何种方式渲染页面;
<meta name="renderer" content="webkit"> //webkit内核
<meta name="renderer" content="ie-comp"> //IE兼容内核
<meta name="renderer" content="ie-stand"> //IE标准内核
content的取值为webkit,ie-comp,ie-stand之一，区分大小写
robots：用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
- scheme
format/URI不支持HTML5。 指定用于解释内容属性值的方案
常用meta总结
<!-- 控制页面缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 双核浏览器优先使用的极速模式(webkit)渲染 -->
<meta name="renderer" content="webkit">
<!-- IE8以最新标准渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--打开dns预解析 -->
<meta http-enquiv="x-dns-prefetch-control" content="on"/>
<!-- 删除默认的苹果工具栏和菜单栏,默认是显示（无需添加 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 在webapp应用下状态条(屏幕顶部条)的颜色,默认default为白色，可以定义为黑色black和灰色半透明black-translucent）
注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
网友评论