meta的用法

来源:互联网 发布:蓝牙音乐耳机推荐知乎 编辑:程序博客网 时间:2024/05/17 01:45

html网页中head之meta标签
什么是meta标签?
在一个网页中meta标签常常被用做网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。

网页显示字符集网页编码
简体中文:<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

中文:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

繁体中文:<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />

英 语:<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

2、网页制作者信息 
<meta name="author" content="Evance" />

3、网页关键字声明(搜索引擎优化地方) 
<meta name="keywords" content="abc,xxx,defg,xyz" />

4、网页简介说明(搜索引擎优化地方)
<meta name="description" content="简介内容如本页div+css教程之meta标签说明-www.divcss5.com" />

5、防止别人在框架里调用你的页面<meta http-equiv="Window-target" content="_top" />

6、自动跳转(此标签用法可以让网页在多少秒后自动从当前页面跳转到另外一个网页页面或网站)
<meta http-equiv="Refresh" content="5;URL=http://www.divcss5.com" /> 
Content后跟值为当前页面在多少时间跳转;
Url值为跳转到具体网页网站

7、网页告诉搜索机器人向导对此网页操作(用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引)
<meta name="robots" content="all" /> 
content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。

搜索引擎:robots取值
none 
搜索引擎将忽略此网页,等价于noindex,nofollow。 
noindex 
搜索引擎不索引此网页。 
nofollow 
搜索引擎不继续通过此网页的链接索引搜索其它的网页。 
all 
搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。 
index 
搜索引擎索引此网页。 
follow 
搜索引擎继续通过此网页的链接索引搜索其它的网页。 
搜索引擎对搜索与收录方法介绍-百度站长工具

说明:根据W3C标准,需要直接用斜杠一个">"结束,如<meta .... ... />构成完整的一个link标签。
 


meta实例图示

文章出处和来源网址:http://www.divcss5.com/html/h68.shtml




响应式 Web 设计 - Viewport


什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。


设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
  • width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
  • height:和 width 相对应,指定高度。
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale:允许用户缩放到的最大比例。
  • minimum-scale:允许用户缩放到的最小比例。
  • user-scalable:用户是否可以手动缩放。

文章出处来自:http://www.runoob.com/css/css-rwd-viewport.html

下面这个网址也有关于meta的详细介绍
http://www.dreamdu.com/xhtml/tag_meta/
0 0
原创粉丝点击