1. <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
  2. <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  3. <head>
  4.     <!-- 声明文档使用的字符编码 -->
  5.     <meta charset='utf-8'>
  6.     <!-- 优先使用 IE 最新版本和 Chrome -->
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  8.     <!-- 页面描述 -->
  9.     <meta name="description" content="不超过150个字符"/>
  10.     <!-- 页面关键词 -->
  11.     <meta name="keywords" content=""/>
  12.     <!-- 网页作者 -->
  13.     <meta name="author" content="name, email@gmail.com"/>
  14.     <!-- 搜索引擎抓取 -->
  15.     <meta name="robots" content="index,follow"/>
  16.     <!-- 为移动设备添加 viewport -->
  17.     <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  18.     <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-
  19.  
  20. meta.orz -->
  21.  
  22.     <!-- iOS 设备 begin -->
  23.     <meta name="apple-mobile-web-app-title" content="标题">
  24.     <!-- 添加到主屏后的标题（iOS 6 新增） -->
  25.     <meta name="apple-mobile-web-app-capable" content="yes"/>
  26.     <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
  27.  
  28.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  29.     <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  30.     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  31.     <!-- 设置苹果工具栏颜色 -->
  32.     <meta name="format-detection" content="telphone=no, email=no"/>
  33.     <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  34.     <!-- 启用360浏览器的极速模式(webkit) -->
  35.     <meta name="renderer" content="webkit">
  36.     <!-- 避免IE使用兼容模式 -->
  37.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  38.     <!-- 不让百度转码 -->
  39.     <meta http-equiv="Cache-Control" content="no-siteapp" />
  40.     <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  41.     <meta name="HandheldFriendly" content="true">
  42.     <!-- 微软的老式浏览器 -->
  43.     <meta name="MobileOptimized" content="320">
  44.     <!-- uc强制竖屏 -->
  45.     <meta name="screen-orientation" content="portrait">
  46.     <!-- QQ强制竖屏 -->
  47.     <meta name="x5-orientation" content="portrait">
  48.     <!-- UC强制全屏 -->
  49.     <meta name="full-screen" content="yes">
  50.     <!-- QQ强制全屏 -->
  51.     <meta name="x5-fullscreen" content="true">
  52.     <!-- UC应用模式 -->
  53.     <meta name="browsermode" content="application">
  54.     <!-- QQ应用模式 -->
  55.     <meta name="x5-page-mode" content="app">
  56.     <!-- windows phone 点击无高光 -->
  57.     <meta name="msapplication-tap-highlight" content="no">
  58.     <!-- iOS 图标 begin -->
  59.     <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
  60.     <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
  61.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  62.     <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
  63.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
  64.     <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
  65.     <!-- iOS 图标 end -->
  66.  
  67.     <!-- iOS 启动画面 begin -->
  68.     <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
  69.     <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
  70.     <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
  71.     <!-- iPad 竖屏 1536x2008（Retina） -->
  72.     <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
  73.     <!-- iPad 横屏 1024x748（标准分辨率） -->
  74.     <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
  75.     <!-- iPad 横屏 2048x1496（Retina） -->
  76.  
  77.     <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
  78.     <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
  79.     <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
  80.     <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
  81.     <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
  82.     <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
  83.     <!-- iOS 启动画面 end -->
  84.  
  85.     <!-- iOS 设备 end -->
  86.     <meta name="msapplication-TileColor" content="#000"/>
  87.     <!-- Windows 8 磁贴颜色 -->
  88.     <meta name="msapplication-TileImage" content="icon.png"/>
  89.     <!-- Windows 8 磁贴图标 -->
  90.  
  91.     <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  92.     <!-- 添加 RSS 订阅 -->
  93.     <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
  94.     <!-- 添加 favicon icon -->
  95.  
  96.     <!-- sns 社交标签 begin -->
  97.     <!-- 参考微博API -->
  98.     <meta property="og:type" content="类型" />
  99.     <meta property="og:url" content="URL地址" />
  100.     <meta property="og:title" content="标题" />
  101.     <meta property="og:image" content="图片" />
  102.     <meta property="og:description" content="描述" />
  103.     <!-- sns 社交标签 end -->
  104.  
  105.     1、name属性 
  106.  
  107. name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 
  108.  
  109. meta标签的name属性语法格式是： 
  110.  
  111.     <meta name="参数"content="具体的参数值">。 
  112.  
  113. 其中name属性主要有以下几种参数：　 
  114.  
  115. A、Keywords(关键字)　 
  116.  
  117. 说明：keywords用来告诉搜索引擎你网页的关键字是什么。 
  118.  
  119. 举例：<meta name="keywords"content="science,education,culture,politics,ecnomics，relationships,entertaiment,human"> 
  120.  
  121. B、description(网站内容描述) 
  122.  
  123. 说明：description用来告诉搜索引擎你的网站主要内容。(前175字符易被检索) 
  124.  
  125. 举例：<meta name="description"content="Thispageisaboutthemeaningofscience,education,culture."> 
  126.  
  127. C、robots(机器人向导) 
  128.  
  129. 说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 
  130.  
  131. content的参数有all,none,index,noindex,follow,nofollow。默认是all。 
  132.  
  133. 举例：<metaname="robots"content="none"> 
  134.  
  135. 信息参数为all：文件将被检索，且页面上的链接可以被查询； 
  136.  
  137. 信息参数为none：文件将不被检索，且页面上的链接不可以被查询； 
  138.  
  139. 信息参数为index：文件将被检索； 
  140.  
  141. 信息参数为follow：页面上的链接可以被查询； 
  142.  
  143. 信息参数为noindex：文件将不被检索，但页面上的链接可以被查询； 
  144.  
  145. 信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；
  146.  
  147. D、author(作者) 
  148.  
  149. 说明：标注网页的作者 
  150.  
  151. 举例：<metaname="author"content="root,root@xxxx.com"> 
  152.  
  153. E、META标签的generator 
  154.  
  155. <metaname="generator"content="信息参数"/> 
  156.  
  157. meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。 
  158.  
  159. F、META标签的COPYRIGHT 
  160.  
  161. <METANAME="COPYRIGHT"CONTENT="信息参数"> 
  162.  
  163. meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。
  164.  
  165. G、META标签的revisit-after 
  166.  
  167. <METAname="revisit-after"CONTENT="7days"> 
  168.  
  169. revisit-after代表网站重访,7days代表7天，依此类推。 
  170.  
  171. 2、http-equiv属性 
  172.  
  173. http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 
  174.  
  175. meta标签的http-equiv属性语法格式是： 
  176.  
  177. <metahttp-equiv="参数"content="参数变量值">； 
  178.  
  179. 其中http-equiv属性主要有以下几种参数： 
  180.  
  181. A、Expires(期限) 
  182.  
  183. 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 
  184.  
  185. 用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 
  186.  
  187. 注意：必须使用GMT的时间格式。 
  188.  
  189. B、Pragma(cache模式) 
  190.  
  191. 说明：禁止浏览器从本地计算机的缓存中访问页面内容。 
  192.  
  193. 用法：<metahttp-equiv="Pragma"content="no-cache"> 
  194.  
  195. 注意：这样设定，访问者将无法脱机浏览。 
  196.  
  197. C、Refresh(刷新) 
  198.  
  199. 说明：自动刷新并指向新页面。 
  200.  
  201. 用法：<metahttp-equiv="Refresh"content="2;URL=http://www.jb51.net">(注意后面的引号，分别在秒数的前面和网址的后面) 
  202.  
  203. 注意：其中的2是指停留2秒钟后自动刷新到URL网址。 
  204.  
  205. D、Set-Cookie(cookie设定) 
  206.  
  207. 说明：如果网页过期，那么存盘的cookie将被删除。 
  208.  
  209. 用法：<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 
  210.  
  211. 注意：必须使用GMT的时间格式。 
  212.  
  213. E、Window-target(显示窗口的设定) 
  214.  
  215. 说明：强制页面在当前窗口以独立页面显示。 
  216.  
  217. 用法：<metahttp-equiv="Window-target"content="_top"> 
  218.  
  219. 注意：用来防止别人在框架里调用自己的页面。 
  220.  
  221. F、content-Type(显示字符集的设定) 
  222.  
  223. 说明：设定页面使用的字符集。 
  224.  
  225. 用法：<metahttp-equiv="content-Type"content="text/html;charset=gb2312"> 
  226.  
  227. G、content-Language（显示语言的设定） 
  228.  
  229. 用法：<metahttp-equiv="Content-Language"content="zh-cn"/> 
  230.  
  231. H、Cache-Control（指定请求和响应遵循的缓存机制）
  232.  
  233. Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括
  234.  
  235. no-cache、no-store、max-age、max-stale、min-fresh、on 
  236.  
  237. I、ly-if-cached，响应消息中的指令包括
  238.  
  239. public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下：
  240.  
  241. Public指示响应可被任何缓存区缓存
  242.  
  243. Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效 
  244.  
  245. no-cache指示请求或响应消息不能缓存 
  246.  
  247. no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
  248.  
  249. max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
  250.  
  251. min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
  252.  
  253. max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
  254.  
  255. J、META标签的http-equiv="imagetoolbar" 
  256.  
  257. <metahttp-equiv="imagetoolbar"content="false"/> 
  258.  
  259. 指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
  260.  
  261. K、META标签的Content-Script-Type 
  262.  
  263. <Metahttp-equiv="Content-Script-Type"Content="text/javascript"> 
  264.  
  265. W3C网页规范，指明页面中脚本的类型。 
  266.  
  267.     <title>标题</title>
  268.  
  269. </head>

　　

html中Meta属性的更多相关文章

  1. html的meta总结，html标签中meta属性使用介绍(转)

    html的meta总结,html标签中meta属性使用介绍 2014年11月5日 5928次浏览 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/po ...

  2. html的meta总结，html标签中meta属性使用介绍

    引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...

  3. html标签中meta属性使用介绍

    前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...

  4. HTML5中meta属性大集合

    1.声明文档的字符编码 <meta charset='utf-8'> 2.声明文档的兼容模式 <meta http-equiv="X-UA-Compatible" ...

  5. [转] HTML5中meta属性的使用详解

    meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...

  6. HTML5中meta属性

    meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...

  7. HTML5中meta属性的使用详解

    meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...

  8. HTML中Meta属性http-equiv="X-UA-Compatible"详解

    HTML下head中的http-equiv="X-UA-Compatible"详解: X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这 ...

  9. 我刚知道的WAP app中meta的属性

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

随机推荐

  1. 7月份计划-----dream

    梦想还是要有的,万一实现了呢? 数学 150[total] 专业课 150[total] 英语 100[total] 政治 100[total] 第一轮复习计划开始执行 1.专业课: 通过课件把所有的 ...

  2. JUNIT单元测试时统计代码的覆盖率工具eclemma安装

    EclEmma是Eclipse里的一个插件,安装简单,覆盖率显示直观.安装EclEmma.打开Eclipse,点击Help → Software Updates → Find and Install, ...

  3. thrift实例

    Thrift实例 Apache thrift是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架. 它采用接口描述语言定义并创建服务,支持可扩展的跨语言服务开发,所包含的代码生 ...

  4. 第三方苹果开发库之ASIHTTPRequest（翻译版）

    本文转载至 http://www.cnblogs.com/daguo/archive/2012/08/03/2622090.html   来自:http://www.dreamingwish.com/ ...

  5. 【原创】Hibernate自动生成（1）

    本实战是博主初次学习Java,分析WCP源码时,学习HibernateTools部分的实战,由于初次接触,难免错误,仅供参考,希望批评指正. 开发环境: Eclipse Version: Photon ...

  6. ls --color=xxx

      默认的ls是由"ls --color=auto"组成的,假如某个目录中的文件特别多,我不希望显示颜色(可以加快显示),那就需要指定单独的参数. [root@localhost ...

  7. iOS 导航引发坐标高度问题

    iOS7 后导航结构发生变化,有新的控制属性诞生,一下为两个属性引发的控制器视图高度问题 translucent  = YES  导航透明    (默认) translucent  = NO   导航 ...

  8. Is this its limit?

    import sys import os curPath = os.path.abspath(os.path.dirname(__file__)) rootPath = os.path.split(c ...

  9. scikit-learn（project中用的相对较多的模型介绍）：1.14. Semi-Supervised

    參考:http://scikit-learn.org/stable/modules/label_propagation.html The semi-supervised estimators insk ...

  10. linux环境下redis安装

    本篇文章主要说明的是Linux环境下redis数据库的安装: 首先进入目标目录: 下载安装包,执行命令: wget http://download.redis.io/releases/redis-4. ...