Html上的介绍

1. Meta keywords

用法:<meta name=”keywords” content=”your keyword or keywords”/>
这个在过去曾被大力推广的meta优化重点部分,如今已不再流行,甚至来自google的有关人士也已证实:“由于过去对meta keywords标签的滥用,使得google不得不把keywords排除在影响排名的考虑因素之外以确保排名的公正性”。

2. Meta discription

用法:<meta name=”description” content=”Your company name provides what services or products”/>
与keywords标签相反,Meta discription标签在现今的排名中被赋予更高的权重。合理的长度加上合理的关键词密度,清晰地表达你网站的主题,无论是对于读者还是搜索引擎来说,都是百利而无一害。通常情况下,meta keywords标签的长度应保持在200个字符,关键词合理出现四次即可。

3. Meta robots

用法:<meta name=”Robots” content=”INDEX, FOLLOW”>
<meta name=”Robots” content=”INDEX, NOFOLLOW”>
<meta name=”Robots” content=”NOINDEX, FOLLOW”>
<meta name=”Robots” content=”NOINDEX, NOFOLLOW”>
meta robots标签是用来告知搜索引擎蜘蛛,对于当前页面是否收录和是否爬行。有的网站有些页面可能不希望蜘蛛来收录和爬行由于隐私要求或其他,那么在html的head部加上对应的meta robots描述就可以实现。

4. Meta Revisit-after

用法:<meta name=”Revisit-after” content=”1 Day”>
Revisit-after是 用来告诉蜘蛛何时再来访问当前页面。你可以自定义是1天,一周,一个月或是任何你希望的访问频率。

5. Meta page-topic

用法:<meta name=”page-topic” content=”your page topic”/>
page-topic顾名思义是介绍当前页面的主题。你可以用你当前页面的关键词作为网页主题。

6. Meta Distribution

用法:<meta name=”Distribution” content=”Global”>
这个用语声明你网站的发布对象是面向全球,还是仅仅针对当地。

7. Meta Rating

用法:<meta name=”Rating” content=”General”>
Meta rating是对当前页面一个等级衡量,告诉蜘蛛当前页面在整个网站中的权重到底是多少。General是一般页面,Mature是比较成熟的页面,Restricted代表受限制的。

8. Meta Charset

用法:<meta name=”Charset” content=”GB2312″>
定义在用户浏览器上的用来显示的字符集,一般是选用GB2312.

9. Meta expires

用法:<meta name=”expires” content=”1 year”>
定义当前页面的使用期限,过期作废。

10. Meta copyright

用法: <meta name=”copyright” content=”Copyright YourCompany – 2010″>

定义版权所属,一般公司都会采用这个标签,对于网站上所有内容进行版权保护

11. Meta viewport

<meta id="viewport" name="viewport"content="width=320; initial-scale=1.0;maximum-scale=1.0;user-scalable=no;"/>//屏幕的缩放


1. viewport:

也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,

这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;

实际上我们可以操作的属性有4 个:

width -           //  viewport 的宽度 (范围从200到10,000,默认为980 像素)

height -          //  viewport 的高度 (范围从223到10,000)
 
initial-scale -     // 初始的缩放比例 (范围从>0 到10)
 
minimum-scale -    //  允许用户缩放到的最小比例

maximum-scale -    //  允许用户缩放到的最大比例
 
user-scalable -    //  用户是否可以手动缩 (no,yes)

<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport" >

第一个meta标签表示:

    强制让文档与设备的宽度保持1:1;

   文档最大的宽度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值);


   user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小。

(注意:实际测试中发现,HTCG7自身系统浏览器不支持这一条规则,能够对页面进行放大,一旦放大响应的box也随之放大,导致俄页面出现错乱问题,解决方法:定义页面的最小宽度

 min-width,body{min-width: 300px;})

11. Meta Format-detection

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//将不识别邮箱
告诉设备将网页中的电话号码不显示为拨号的超链接
12.

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

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

在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes">   //网站开启对web app程序的支持
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

说明:11和12可参照http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html和http://www.cnblogs.com/yuzhongwusan/archive/2011/11/29/2267568.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章