康盛博客

在我们使用Dreamweaver新建一个HTML文件的时候，在它产生的HTML页面中我们总是发现有这么一句:<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />,这里重点是meta标签的使用，在本篇就来看什么是meta标签及各种meta标签的意义。

meta是HTML语言中的一个不可见的辅助性标签，它为浏览器或者搜索引擎等提供一些辅助说明的信息，比如文档所使用的编码方式，文档使用的语言等，一些引擎就会依此来网站的语种及国家等。

meta标签分为两大部分，一个是标题信息，一个是描述方面的信息。

meta标签的种类比较的多，下面分别来对这些meta标签进行下详解：
1.HTTP-EQUIV,提供一些信息给浏览器，常见的如下:
 1.1字符集的设定：Content-Type和Content-Language
  示例:：  <Meta http-equiv=”Content-Type” Content=”text/html; Charset=gb2312″> //编码
　　　　　　             <Meta http-equiv=”Content-Language” Content=”zh-CN”> //语言
 1.2标示文档类型：text/xml等
2.Refresh(自动刷新功能，常使用它的重定向功能)
 示例:<Meta http-equiv=”Refresh” Content=”30″> //30秒后自动刷新本页
　　　　　　 <Meta http-equiv=”Refresh” Content=”5; Url=http://www.helpphp.cn/”> //5秒后重定向到www.helpphp.cn
3.Expires(过期时间设置)
 示例:<Meta http-equiv=”Expires” Content=”Sun, 28 Mar 2010 21:21:21 GMT”> //当超过这个设定的时间后，就会重新请求服务上的数据
4.http-equiv=”Pragma”(缓存设置)
 示例:<Meta http-equiv=”Pragma” Content=”No-cach”> //禁用了浏览器的缓存
5.Set-Cookie(设置Cookie)
 示例:<Meta http-equiv=”Set-Cookie” Content=”cookievalue=xxx; expires=Sunday, 28 Mar 2010 21:21:21 GMT; path=/”>

Meta name详解
1.Keywords
 示例:<meta name=”keywords” content=”PHP教程 mysql教程 PHP编程 javascript教程 php培训” /> //页面关键字，SEO方面的设置
2.Description
 示例:<meta name=”description” content=”康盛博客提供原创PHP教程、mysql教程,PHP基础教程,是您学习PHP编程的PHP在线教程” /> //页面描述，提供给搜索引擎的摘要
3.Robots
 示例:<Meta name=”Robots” Content=”All|None|Index|Noindex|Follow|Nofollow”>
 详解:all：文件将被检索，且页面上的链接可以被查询；
　　　       none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
　　　       index：文件将被检索；(让robot/spider登录)
　　　       follow：页面上的链接可以被查询；//在做友情链接时常用此属性
　　　       noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
　　　       nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
4.Author
 示例:<meta name=”author” content=”Http-cn,helpphp.cn” /> //声明作者
5.Copyright
 示例:<meta name=”Copyright” content=”Copyright helpphp.cn All Rights Reserved.” /> //声明版权
6.revisit-after
 示例:<META name=”revisit-after” CONTENT=”7 days”> //通知搜索引擎的来访频率
7.Generator
 示例:<Meta name=”Generator” Content=”FrontPage”> //不常用
本页重点:Meta标签详解

我们在网页中使用引用css的经典方式如下所示：

关于link标签，请参阅link属性详解除了使用link的方式引入CSS外，我们还可以@import方式来引入样式表文件，语法如下：
<style type=”text/css”>@import url(css文件的路径);</style>
或者
@import url(css文件的路径); /*要放在样式表文件的开头部分，否则不加载；加载顺序：最后加载*/
既然两者都能够加载CSS文件，那么两者的区别在哪里呢？下面就来说说@import与link的区别
1.最主要的区别在于link标签是属于xhtml范畴，而@import则是css2.1中特有的
2.加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@import则在整个页面加载完成后才加载
3.兼容性的区别，因@import是CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效
4.在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了

为了演示上述区别，特增加一个示例，内容如下：

说明：这些样式文件内容一样，除了a.css的内容如下：
@import url(”1.css”);/*请放在样式文件的最前面*/
p{font-size:12px; color:#FF0000;}

我们通过使用firefox的Firebug查看文件加载时的情况如下：

通过研究我们发现，a.css中的@import url(”1.css”);在最后才加载，其它的则按正常的顺序加载。所以我们在书写样式时，尽量使用link的方式。当然在IE中是否也是这样，就没有考量了。

本页重点：@import与link的区别