H5 之「 meta大全 」

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 随机产生一种过渡方式
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,701评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,649评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,037评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,994评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,018评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,796评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,481评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,370评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,868评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,014评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,153评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,832评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,494评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,039评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,437评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,131评论 2 356

推荐阅读更多精彩内容

  • 随着html5的普及和Web技术的净化,从Windows XP的IE6到IE8、IE9、IE10、IE11,Edg...
    波段顶底阅读 2,206评论 1 1
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 735评论 0 2
  • meta   元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关...
    hx永恒之恋阅读 678评论 0 2
  • 先附上几篇网上查找的关于meta标签的资料、文章,看完这个几篇文章后,会对meta标签有一定的了解!HTML me...
    米斯特卢阅读 1,607评论 0 2
  • 寒英琼玉飞天舞, 玲巧精莹挂树梢。 侠女斗篷迎雪立, 银装素裹领风骚。 注:平起,中华新韵 2018年12月7日,...
    情爱千秋阅读 1,198评论 18 53