meta标签大全

<!--
    x-ua-compatible(浏览器兼容模式)
    仅对IE8+以效
    告诉浏览器以什么版本的IE的兼容模式来显示网页
    <meta http-equiv="X-UA-Compatible" content="IE=5" >
    <meta http-equiv="X-UA-Compatible" content="IE=7" >
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    其中最后一行是永远以最新的IE版本模式来显示网页的。
    另外加上Emulate模式
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
    Emulate模式后则更重视<!DOCTYPE>
    （细心的人会注意到，用IE9去访问带有x-ua-compatible的页面时是不会出现兼容视图按钮的）
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <!--
    expires(期限)
    可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅
    必须使用GMT的时间格式
    -->
    <meta http-equiv="expries" content="Wed, 26 Feb 2012 08:21:57 GMT" />
    <!--
    pragma(cach模式)
    禁止浏览器从本地的缓存中调阅页面内容
    设定后访问者将无法脱机浏览
    -->
    <meta http-equiv="pragma" content="no-cache" />
    <!--
    refresh(刷新)
    定时让网页自动链接到指定URL，单位是秒
    -->
    <meta http-equiv="refresh" content="5;url="http://www.baidu.com" />
    <!--
    set-cookie(cookies设定)
    定义Cookies
    -->
    <meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Wed, 26 Feb 2012 08:21:57 GMT;path=/" />
    <!--
    window-target(显示窗口的设定)
    设置当前窗口页面显示方式
    如果设置成_top就会强制页面在当前窗口以独立页面显示，防止别人在框架里调用页面
    -->
    <meta http-equiv="window-target" content="_top" />
    <!--
    content-type(显示字符集设定)
    设定页面使用的字符集
    -->
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <!--
    content-language(显示语言的设定)
    设置页面的显示语言
    -->
    <meta http-equiv="content-language" content="zh-cn" />
    <!--
    keywords(关键字)
    告诉搜索引擎这个网页的关键字
    -->
    <meta name="keywords" content="girl, sexy, hot" />
    <!--
    description(简介)
    告诉搜索引擎网站的主要内容
    -->
    <meta name="description" content="This page is about pretty girls." />
    <!--
    robots(机器人向导)
    告诉搜索引擎哪些页面需要索引，哪些页面不需要索引
    content的值包括：all, none, index, noindex, follow, nofollow。 默认是all
    -->
    <meta name="robots" content="none" />
    <!--
    author(作者)
    标网页作者
    -->
    <meta name="author" content="cqqjj1029@gmail.com" />

WebApp 里的Meta标签

viewport 即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说，980的 宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是 320。

因此我们必须改变viewport，我们就有如下几种属性值可以设置：

width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）

height: viewport 的高度 （范围从 223 到 10,000 ）

initial-scale: 初始的缩放比例 （范围从>0到 10 ）

minimum-scale: 允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例

user-scalable: 用户是否可以手动缩放

对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone 会根据你设置的属性自动推算其他属性值 ，而非直接采用默认值。

如 果你把initial-scale=1 ，那么 width 和 height在竖屏时自动为320*356 （不是320*480 因为地址栏等都占据空间 ），横屏时自动为 480*208。类似地 ，如果你仅仅设置了 width ，就会自动推算出initial-scale 以及height。例如你设置了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了

那么到底这些设置如何让 Safari 知道 ？其实很简单 ，就一个 meta ，形如 ：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> 设置了meat后我们页面将如此呈现了

2.meta标签里的name属性

name 属性
(1)、＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；

(2)、＜meta name="keywords" contect=""＞向搜索引擎说明你的网页的关键词；

(3)、＜meta name="Description" contect=""＞告诉搜索引擎你的站点的主要内容；

(4)、＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；

(5)、＜meta name="Robots" contect="all | none | index | noindex | follow | nofollow"＞

其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询

3.webapp里主要的mate用途

<meta name="apple-touch-fullscreen" content="yes">  添加到主屏幕后，全屏显示。

<meta name="apple-mobile-web-app-capable" content="yes" />

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明： 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。

<meta name="sharecontent" data-msg-img="缩略图地址" data-msg-title="标题" data-msg-content="简介" data-msg-callBack="" data-line-img="缩略图地址" data-line-title="标题" data-line-callBack=""/>

最新文章

  1. ThinkPHP学习总结
  2. Eclipse快捷键 10个最有用的快捷键
  3. linux下的c编程
  4. The Monocycle(BFS)
  5. ubuntu 修改保存报错E37:No write since last change(add ! to override)的解决方法
  6. 转 RMI、RPC、SOAP通信技术介绍及比对
  7. RAID0_RAID1_RAID10_RAID5各需几块盘才可组建
  8. 和阿文一起学H5-- H5排版八大套路
  9. 【Java基础】static关键字相关
  10. Spring.net 学习
  11. parentNode和parentElement区别
  12. 各种Web漏洞测试平台
  13. Centos7安装Redis3.2.8
  14. VS2017无法发现单元测试，不能运行单元测试的解决方案
  15. 汇编实现: C库常见函数,串操作指令作用
  16. 拆分窗口QSplitter
  17. LeetCode142：Linked List Cycle II
  18. 基于Oracle的SQL优化（崔华著）-学习笔记
  19. Android ListView实现新闻客户端的新闻内容图文混排
  20. 使用装饰器@property

热门文章

  1. Java并发工具类Semaphore应用实例
  2. MYSQL的JOB
  3. c# 注册全局热键
  4. Makefile关键字
  5. PowerShell命令卸载Win10内置应用
  6. Addthis使用
  7. 初步了解Entity Framework
  8. hdu-5493 Queue(二分+树状数组)
  9. [No000017]单词拼写记不住？试试这俩方法-单词拼写，怎么记又快又好？
  10. vijos[1355]车队过桥问题