H5 之「 meta大全」

2019-03-10 本文已影响16人果汁凉茶丶

W3C是这样介绍meta标签的:

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

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

<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法

声明文档使用的字符编码
<meta charset=’utf-8′>
为移动设备添加 viewport
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>
优先使用 IE 最新版本和 Chrome
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
关闭自动识别页面中的电话和邮件
<meta name=”format-detection” content=”telphone=no, email=no”/>
Page_Enter 进入页面时的特殊效果
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0, transtion=12)">
Page_Exit 离开页面时的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0, transtion=12)">

设置页面不缓存
<meta http-equiv=”cache-control” content=”no-cache”>
设定禁止浏览器从本地机的缓存中调阅页面内容，即禁用缓存
<meta http-equiv=”pragma” content=”no-cache”>
设置网页过期时间，当设置成0时表示不缓存
<meta http-equiv=”expires” content=”0″>
自动刷新并指向新页面
＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞
如果网页过期，删除存盘的cookie
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞

iOS 设备 begin
<meta name=”apple-mobile-web-app-title” content=”标题”>
添加到主屏后的标题(iOS 6+)，是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
设置IOS工具栏颜色
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name=”HandheldFriendly” content=”true”>
微软的老式浏览器
<meta name=”MobileOptimized” content=”320″>

Page_Enter 进入页面时的特殊效果
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0, transtion=12)">
Page_Exit 离开页面时的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0, transtion=12)">

【详解】
Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：

H5 之「 meta大全 」