1.常用的头部meta
以下三个meta必须首先放在<head>中,其它的<head>内容要放在其后<meta charset="utf-8">声明文档所使用的字符集
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
在页面的头部加入
<meta http-equiv = "X-UA-Compatible" cotent = "IE=edge,chrome=1"/>
这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<a href="http://blog.doyoe.com/2015/10/13/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%B8%80%E5%BC%B9%EF%BC%9Aviewport%E8%AF%A6%E8%A7%A3/">viewport(视口详解)
</a>
2.声明文档的作者
<meta name="author(作者)" content="name, email@example.com">
<meta name="designer(设计者)" content="">
<meta name="owner(所有者)" content="">
3.SEO相关
<meta name="keywords" content="your tags(你的关键字标记短语)" />
每个网页应具有描述该网页内容的一组唯一的关键字。人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符
<meta name="description" content="声明文档的描述消息.你的内容主要描述(控制在150个字符)">
搜索引擎索引方式,robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。
<meta name="robots" content="index,follow" />
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。
<meta http-equiv=“refresh” content=“刷新间隔的时间”>
<meta http-equiv="refresh" content="0;url=" />
4.apple
是否启动webapp功能,会删除默认的苹果工具栏和菜单栏。
<meta name="apple-mobile-web-app-capable" content="yes" />
当启动webapp功能时,显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。这个主要是根据实际的页面设计的主体色为搭配来进行设置。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />