<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

<head>

    <!-- 声明文档使用的字符编码 -->

    <meta charset='utf-8'>

    <!-- 优先使用 IE 最新版本和 Chrome -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 页面描述 -->

    <meta name="description" content="不超过150个字符"/>

    <!-- 页面关键词 -->

    <meta name="keywords" content=""/>

    <!-- 网页作者 -->

    <meta name="author" content="name, email@gmail.com"/>

    <!-- 搜索引擎抓取 -->

    <meta name="robots" content="index,follow"/>

    <!-- 为移动设备添加 viewport -->

    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-

meta.orz -->

    <!-- iOS 设备 begin -->

    <meta name="apple-mobile-web-app-title" content="标题">

    <!-- 添加到主屏后的标题（iOS 6 新增） -->

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

    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

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

    <!-- 设置苹果工具栏颜色 -->

    <meta name="format-detection" content="telphone=no, email=no"/>

    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

    <!-- 启用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">

    <!-- uc强制竖屏 -->

    <meta name="screen-orientation" content="portrait">

    <!-- QQ强制竖屏 -->

    <meta name="x5-orientation" content="portrait">

    <!-- UC强制全屏 -->

    <meta name="full-screen" content="yes">

    <!-- QQ强制全屏 -->

    <meta name="x5-fullscreen" content="true">

    <!-- UC应用模式 -->

    <meta name="browsermode" content="application">

    <!-- QQ应用模式 -->

    <meta name="x5-page-mode" content="app">

    <!-- windows phone 点击无高光 -->

    <meta name="msapplication-tap-highlight" content="no">

    <!-- iOS 图标 begin -->

    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>

    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>

    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>

    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->

    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->

    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

    <!-- iPad 竖屏 1536x2008（Retina） -->

    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

    <!-- iPad 横屏 1024x748（标准分辨率） -->

    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

    <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>

    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->

    <meta name="msapplication-TileColor" content="#000"/>

    <!-- Windows 8 磁贴颜色 -->

    <meta name="msapplication-TileImage" content="icon.png"/>

    <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

    <!-- 添加 RSS 订阅 -->

    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->

    <!-- 参考微博API -->

    <meta property="og:type" content="类型" />

    <meta property="og:url" content="URL地址" />

    <meta property="og:title" content="标题" />

    <meta property="og:image" content="图片" />

    <meta property="og:description" content="描述" />

    <!-- sns 社交标签 end -->

    1、name属性 

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 

meta标签的name属性语法格式是： 

    <meta name="参数"content="具体的参数值">。 

其中name属性主要有以下几种参数：　 

A、Keywords(关键字)　 

说明：keywords用来告诉搜索引擎你网页的关键字是什么。 

举例：<meta name="keywords"content="science,education,culture,politics,ecnomics，relationships,entertaiment,human"> 

B、description(网站内容描述) 

说明：description用来告诉搜索引擎你的网站主要内容。(前175字符易被检索) 

举例：<meta name="description"content="Thispageisaboutthemeaningofscience,education,culture."> 

C、robots(机器人向导) 

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 

content的参数有all,none,index,noindex,follow,nofollow。默认是all。 

举例：<metaname="robots"content="none"> 

信息参数为all：文件将被检索，且页面上的链接可以被查询； 

信息参数为none：文件将不被检索，且页面上的链接不可以被查询； 

信息参数为index：文件将被检索； 

信息参数为follow：页面上的链接可以被查询； 

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询； 

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

D、author(作者) 

说明：标注网页的作者 

举例：<metaname="author"content="root,root@xxxx.com"> 

E、META标签的generator 

<metaname="generator"content="信息参数"/> 

meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。 

F、META标签的COPYRIGHT 

<METANAME="COPYRIGHT"CONTENT="信息参数"> 

meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。

G、META标签的revisit-after 

<METAname="revisit-after"CONTENT="7days"> 

revisit-after代表网站重访,7days代表7天，依此类推。 

2、http-equiv属性 

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 

meta标签的http-equiv属性语法格式是： 

<metahttp-equiv="参数"content="参数变量值">； 

其中http-equiv属性主要有以下几种参数： 

A、Expires(期限) 

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 

用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 

注意：必须使用GMT的时间格式。 

B、Pragma(cache模式) 

说明：禁止浏览器从本地计算机的缓存中访问页面内容。 

用法：<metahttp-equiv="Pragma"content="no-cache"> 

注意：这样设定，访问者将无法脱机浏览。 

C、Refresh(刷新) 

说明：自动刷新并指向新页面。 

用法：<metahttp-equiv="Refresh"content="2;URL=http://www.jb51.net">(注意后面的引号，分别在秒数的前面和网址的后面) 

注意：其中的2是指停留2秒钟后自动刷新到URL网址。 

D、Set-Cookie(cookie设定) 

说明：如果网页过期，那么存盘的cookie将被删除。 

用法：<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 

注意：必须使用GMT的时间格式。 

E、Window-target(显示窗口的设定) 

说明：强制页面在当前窗口以独立页面显示。 

用法：<metahttp-equiv="Window-target"content="_top"> 

注意：用来防止别人在框架里调用自己的页面。 

F、content-Type(显示字符集的设定) 

说明：设定页面使用的字符集。 

用法：<metahttp-equiv="content-Type"content="text/html;charset=gb2312"> 

G、content-Language（显示语言的设定） 

用法：<metahttp-equiv="Content-Language"content="zh-cn"/> 

H、Cache-Control（指定请求和响应遵循的缓存机制）

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括

no-cache、no-store、max-age、max-stale、min-fresh、on 

I、ly-if-cached，响应消息中的指令包括

public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下：

Public指示响应可被任何缓存区缓存

Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效 

no-cache指示请求或响应消息不能缓存 

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

J、META标签的http-equiv="imagetoolbar" 

<metahttp-equiv="imagetoolbar"content="false"/> 

指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

K、META标签的Content-Script-Type 

<Metahttp-equiv="Content-Script-Type"Content="text/javascript"> 

W3C网页规范，指明页面中脚本的类型。 

    <title>标题</title>

</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. Markdown常用语法学习

    Markdown常用语法学习,这些就够用了. 演示地址: https://github.com/YalongYan/Markdown-- 特别提示:  标题'##'后面必须加一个空格,否则编译不对.# ...

  2. 计算CPU利用率

    一般来说对于需要大量cpu计算的进程,当前端压力越大时,CPU利用率越高.但对于I/O网络密集型的进程,即使请求很多,服务器的CPU也不一定很到,这时的服务瓶颈一般是在磁盘的I/O上.比较常见的就是, ...

  3. 读书笔记-HBase in Action-第三部分应用-(1)OpenTSDB

    OpenTSDB是基于HBase的开源监控系统,能够支持上万规模集群监控和上亿数据点採集. 当中TSDB代表Time Series Database,OpenTSDB在时间序列数据的存储和查询上都做了 ...

  4. 忘记glassfish密码，那就重置密码呗

    方法一:如果现有的 domain 上并没有你所需要的东西,删除现有的 domain,重新创建一个 domain. 找到安装glassfish的目录下的 \bin\asadmin 目录,然后打开asad ...

  5. python模块, 包的初识

    Python 模块(Module), 是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 模块让你能够有逻辑地组织你的 Python 代码段. 把相关的代 ...

  6. An Ordinary Game(简单推导)

    An Ordinary Game Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement There ...

  7. 深入 JavaScript 中的对象以及继承原理

    ES6引入了一个很甜的语法糖就是 class, class 可以帮助开发者回归到 Java 时代的面向对象编程而不是 ES5 中被诟病的面向原型编程. 我也在工作的业务代码中大量的使用 class, ...

  8. vue项目创建流程和使用

    vue项目的创建 npm run dev 让项目执行起来 #下载vuex npm install vuex --save#下载axiosnpm install axios --save 当我们生成项目 ...

  9. JVM虚拟机调参

    一.堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为 ...

  10. 找到最大或最小的N个值

    对于python原生的数据类型来说,并不存在直接的方法可以找到最大或最小的N个值, 传统的方法必须先排序,然后再截取相应的值,而且对于集合这类数据类型来说还不能直接排序, 需要先转化为列表才行,有的时 ...