W3C是这样介绍meta标签的:
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
# 属性内容
W3C上关于meta属性的介绍
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
# H5头部的各种meta标签
关于H5
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
关于meta
- 声明文档使用的字符编码
<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”>
- uc强制竖屏
<meta name=”screen-orientation” content=”portrait”> - UC强制全屏
<meta name=”full-screen” content=”yes”> - UC应用模式
<meta name=”browsermode” content=”application”> - QQ强制竖屏
<meta name=”x5-orientation” content=”portrait”> - QQ强制全屏
<meta name=”x5-fullscreen” content=”true”> - QQ应用模式
<meta name=”x5-page-mode” content=”app”> - 强制页面在当前窗口以独立页面显示
<meta http-equiv="Window-target" content="_top"＞
- 页面描述
<meta name=”description” content=”不超过150个字符”/> - 网页作者
<meta name=”author” content=”name, email@gmail.com”/> - 页面关键词，给搜索引擎用的
<meta name=”keywords” content=””/> - 搜索引擎抓取
<meta name=”robots” content=”index,follow”/>
- Pics-label(网页等级评定)
<meta http-equiv="Pics-label" contect=""> - windows phone 点击无高光
<meta name=”msapplication-tap-highlight” content=”no”> - 启用360浏览器的极速模式(webkit)
<meta name=”renderer” content=”webkit”> - 避免IE使用兼容模式
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> - 不让百度转码
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
- 针对手持设备优化，主要是针对一些老的不识别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种过渡方式。如下表：
| code | 意义 | code | 涵义 |
|---|---|---|---|
| 0 | 盒状收缩 | 1 | 盒状放射 |
| 2 | 圆形收缩 | 3 | 圆形放射 |
| 4 | 由下往上 | 5 | 由上往下 |
| 6 | 从左至右 | 7 | 从右至左 |
| 8 | 垂直百叶窗 | 9 | 水平百叶窗 |
| 10 | 水平格状百叶窗 | 11 | 垂直格状百叶窗 |
| 12 | 随意溶解 | 13 | 从左右两端向中间展开 |
| 14 | 从中间向左右两端展开 | 15 | 从上下两端向中间展开 |
| 16 | 从中间向上下两端展开 | 17 | 从右上角向左下角展开 |
| 18 | 从右下角向左上角展开 | 19 | 从左上角向右下角展开 |
| 20 | 从左下角向右上角展开 | 21 | 水平线状展开 |
| 22 | 垂直线状展开 | 23 | 随机产生一种过渡方式 |
网友评论