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 随机产生一种过渡方式

推荐阅读更多精彩内容

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