meta

meta是html语言head区的一个辅助性标签。
作用有:SEO, 缓存, 窗口大小, 字符集等.

meta标签分两类,http-equivname

1. name

keywords

<meta name="keywords" content="SEO关键字">

description

<meta name="description" content="SEO主要内容">

robots

<meta name="robots" content="none">

content具体参数如下:
信息参数为all:默认值, 文件将被检索,且页面上的链接可以被查询;
信息参数为none:文件将不被检索,且页面上的链接不可以被查询;
信息参数为index:文件将被检索;
信息参数为follow:页面上的链接可以被查询;
信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;
信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;

author

<meta name="author" content="your@email.com">

generator

代表说明网站的采用的什么软件制作

<meta name="generator"content="FrontPage 4.0"/>

copyright

<meta name="copyright" content="the Meta Tags Company"> 

viewport

屏幕的缩放

width             viewport的宽度(数值/device-width)
height            viewport的高度(数值/device-height)
user-scalable     是否允许缩放,(yes/no)
initial-scale     初始化比例(范围从 > 0 到 10)
minimum-scale     允许缩放的最小比例
maximum-scale     允许缩放的最大比例
target-densitydpi 值有以下(一般推荐设置中等响度密度或者低像素密度,后者设置具体的值dpi_value,另外webkit内核已不准备再支持此属性)
   -- dpi_value   一般是70-400//没英寸像素点的个数
   -- device-dpi  设备默认像素密度
   -- high-dpi    高像素密度
   -- medium-dpi  中等像素密度
   -- low-dpi     低像素密度
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi "> 

format-detection

忽略手机号和邮箱

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

X-UA-Compatible

优先使用 IE 最新版本和 Chrome

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

screen-orientation

强制屏幕方向

<meta name="screen-orientation" content="portrait">
<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">

apple-mobile-web-app-capable

开启对web app程序的支持, 即删除默认的苹果工具栏和菜单栏,开启全屏显示

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

apple-mobile-web-app-status-bar-style

改变顶部状态条的颜色, 默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明)

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

2. http-equiv

expires(过期)

<meta http-equiv="expires"content=""> 
必须使用GMT格式

Pragma

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

<meta http-equiv="Pragma"content="no-cache">

Refresh

自动刷新, 停留time秒后指向新页面

<meta http-equiv="Refresh"content="time;URL=http://www.google.com">

Set-Cookie

如果网页过期,那么cookie也将被删除。

<meta http-equiv="Set-Cookie" content="ACCOUNT=9983373; path=/; expires=Thursday, 20-May-09 00:15:00 GMT">

Window-target

强制页面在当前窗口以独立页面显示.
注意:这个属性是用来防止别人在框架里调用你的页面。Content选项:_blank、_top、_self、_parent.

_blank 链接文件在新的窗口中打开

_parent 链接文件将在当前窗口的父级窗口中打开

_self 链接文件在当前窗口(帧)中打开

_top 链接文件全屏显示

<meta http-equiv="Window-target"content="_top">

content-type

<meta http-equiv="content-Type"content="text/html;charset=utf8"> 
or
<meta charset="UTF-8"> H5新标签

content-language

<meta http-equiv="Content-Language"content="zh-cn"/>

Cache-Control

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-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消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

imagetoolbar

<meta http-equiv="imagetoolbar"content="false"/>

Content-Script-Type

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

Pics-label

网站评级, 具体查询RSAC

<meta http-equiv="Pics-label" Contect="(PICS-1.1'http://www.rsac.org/ratingsv01.html'I gen comment 'RSACi North America Sever' by 'inet@microsoft.com'for 'http://www.microsoft.com' on '1997.06.30T14:21-0500' r(n0 s0 v0 l0))">

Page-Enter、Page-Exit

这个是页面被载入和调出时的一些特效

3. 其他标签

Base
你网页上的所有相对路径在链接时都将在前面加上Base

<Base href="http://www.google.com/" target="_blank">

script标签

async
如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

<script type="text/javascript" src="demo_async.js" async="async"></script>

chartset

<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>

defer
IE Only. 规定是否对脚本执行进行延迟,直到页面加载为止. (适用于不影响页面加载的脚本)

<script type="text/javascript" defer="defer"></script>

参考文章
http://blog.csdn.net/kongjiea/article/details/17092413
http://www.jb51.net/web/158860.html
http://www.haorooms.com/post/html_meta_ds


awakening
37 声望2 粉丝