常用meta
<meta charset='utf-8'> <!--声明文档使用的字符编码-->
<meta name="description" content="不超过150个字符"/> <!--页面描述-->
<meta name="keywords" content=""/> <!--页面关键词-->
<meta name="author" content="name, [email protected]"/> <!--网页作者-->
<meta name="robots" content="all|none|index|noindex|follow|nofollow"/>
<!--搜索引擎抓取 其中的属性说明如下: -->
<!--设定为all:文件将被检索,且页面上的链接可以被查询;-->
<!--设定为none:文件将不被检索,且页面上的链接不可以被查询; -->
<!--设定为index:文件将被检索; -->
<!--设定为follow:页面上的链接可以被查询; -->
<!--设定为noindex:文件将不被检索,但页面上的链接可以被查询; -->
<!--设定为nofollow:文件将不被检索,页面上的链接可以被查询。 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
<!--为移动设备添加 viewport-->
<meta name="format-detection" content="telphone=no, email=no"/> <!--格式检测-->
<!--
主要作用是是否设置自动将你的数字转化为拨号连接
telephone=no 禁止把数字转化为拨号链接
telephone=yes 开启把数字转化为拨号链接,默认开启
告诉设备不识别邮箱,点击之后不自动发送
email=no 禁止作为邮箱地址
email=yes 开启把文字默认为邮箱地址,默认情况开启
adress=no 禁止跳转至地图
adress=yes 开启点击地址直接跳转至地图的功能, 默认开启
-->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 控制浏览器内核(国内主流浏览器都是双核)目前360安全浏览器支持该功能 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--指定IE浏览器的渲染模式 在不改变IE外观的情况下使用Chrome内核 基于Chrome Frame 2014年开始chrome不再提供Chrome Frame服务,所以使用该标签是必须客户端现在并安装Chrome Frame; IE8及以上版本支持 个人觉得没有大的实用价值-->
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 指定请求和响应遵循的缓存机制 -->
<!--no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。
no-siteapp:禁止当前页面在移动端浏览时,被百度自动转码。
-->
<meta name="screen-orientation" content="portrait"> <!--uc强制竖屏-->
<meta name="x5-orientation" content="portrait"> <!--QQ强制竖屏-->
<meta name="full-screen" content="yes"> <!--UC强制全屏-->
<meta name="x5-fullscreen" content="true"> <!--QQ强制全屏-->
<meta name="browsermode" content="application"> <!--UC应用模式-->
<meta name="x5-page-mode" content="app"> <!--QQ应用模式-->
<meta name="format-detection" content="telephone=no"> <!--禁止自动探测并格式化手机号码-->
页面刷新
<meta http-equiv="refresh" content="1"> <!--当前页面每一秒后刷新一下-->
<meta http-equiv="refresh" content="0;url='/'"> <!--当前页面一秒后跳转到首页-->
<meta http-equiv="refresh" content="0;url='https://www.baidu.com'"> <!--当前页面一秒后跳转到百度-->
控制页面缓存
<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
webapp meta标签
<meta name="apple-mobile-web-app-title" content="标题"> <!--添加到IOS主屏后的标题。-->
<meta name="apple-mobile-web-app-capable" content="yes"/> <!--是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏(iOS 6 新增)-->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!--添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!--制定iphone中safari顶端的状态条的样式(default:白色,black:黑色,black-translucent:半透明)只有在 “apple-mobile-web-app-capable” content=”yes” 时生效-->
<!--保留历史记录以及动画效果-->
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<!--添加到主屏后的标题-->
<meta name="apple-mobile-web-app-title" content="App Title">