meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目 前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和 keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个： name 属性 1、<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等； 2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词； 3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容； 4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者； 5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"> 其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。 http-equiv属性 1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"> 和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言； 又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集； 2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内，跳转到页面http://yourlink； 3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式； 4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出； 5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式； 6、<meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的； 7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用； 8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果，这个功能即 FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。 以上是常用的几个meta属性，有个人主页的朋友不妨在你的主页中加上它，效果可是不一样的哦：）。 个人建议：最后看明白，不要加的太多了。。得到相反的效果！
2 JS判断浏览器：
function addfavorite() { switch(getOs()) { case 1:window.external.addFavorite('http://www.yiqixue.com','虚拟世界');break; case 2:window.sidebar.addPanel('虚拟世界', 'http://www.yiqixue.com', "");break; case 0:alert("您的浏览器也太牛了，我都不知道如何显示了。唉。");break; } } function getOs() { if(navigator.userAgent.indexOf("MSIE")>0)return 1; if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2; if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 3; if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 4; if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 5; return 0; } </script>
<a href="Javascript:void(0)" οnclick="addfavorite()">加入收藏</a>
判断浏览器类型
<SCRIPT LANGUAGE="JavaScript"> <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { //浏览器为IE }else{ if (window.navigator.userAgent.indexOf("Firefox")>=1) { //浏览器为Firefox }else{ //浏览器为其他 } } //--> </SCRIPT> 1.Class与ID的区别
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class ="Frodo" ，class="Gandalf"，class="Aragorn" 来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。 至 于ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很 少会出现大于一次的情况。 归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。（刚才在Dreamweaver中试了一下，确实，并没有出错） 在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。 2.Margin与Padding的区别 两 者都是代替表格最重要的作用->分割块的好方法，区别在于Margin是不同的Tag间互相隔离的距离而Padding是同一元素中不同内容分割使 用，这在表格中最看得清楚。尤其是当对一个区域加载了背景样式之后，Padding下的内容背景色会发生改变，而Margin则不会有所改变。
<link> 元素所参考的样式用户可以自由的选择加以改变，而导入的样式表单就自动的与剩下的样式表融合在一起了
CSS与HTML文档结合的4中方法： 1 使用<link>元素链接到外部的样式文件 2 在<head>元素中使用"style"元素来指定 3 使用CSS "@import"标记来导入样式表单 4 在<body>内部的元素中使用"style"属性来定义样式
一个例子: <html> <head> <title>css demo</title> <link rel=stylesheet type="text/css" href="css/name.css" title="cool"> <style> @import url(css/name2.css); H1 {color:red} <style> </head> <body> <H1>CSS demo by JET</H1> <p style="color:blue">good luck. </body> </html>
1 用link进行引用
<link rel="stylesheet" type="text/css" href="my.css">
2 用import进行引用
<style type="text/css"> @import url(my.css); </style>
第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。
问题1.到底link和@import有什么区别？ 我们先来看看他们的定义
link元素 HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另 外形式的信息（RSS）、联系信息等等。 @import 指定导入的外部样式表及目标设备类型。 其实link和@import的最根本区别就是，link 是一个html 的一个标签 ，而@import 是css 的一个标签 , link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能 调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。：）
问题2.link合import到底那个更好？ 上面说了因为上面的老大不一样，所以在使用上就会有一些细节的区别，不能说总体谁好谁坏， 只能说具体情况具体分析。 1）我要用javascript进行样式选择； 这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。 看下列代码
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" /> <link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" /> <link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" /> <link rel="alternate stylesheet" href="/css/slate.css" type="text/css" media="screen" title="slate" /> 这是一段很经典的改变页面风格的代码，因为我们今天主要讲的是link和import，所以我这里只列出了引用css部分。 我们先来看看link里面个个属性都是表达了什么意思： [1]rel:用来声明链接对象的作用或者类型。 譬如上面的的代码："stylesheet"表示链接一个默认的css,而"alternate stylesheet"折表示备选的css [2]href:这个就不用我说了吧，引用css的文件路径。 [3]tyle:文件类型 [4]media:应用的设备，"screen"是说明应用在屏幕上。 [5]title:是css的名称。 这段代码中一共有5个css,第一个是基本样式，而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。
2）我要在应用打印样式； 打印样式顾名思义就是打印页面时候的样式。 这个样式在普通浏览下是没有效果的，只有在打印的时候生效。 如果要为页面单独引用打印样式的话，link和@import都可以的。
link代码
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="print" />
@import代码
<style type="text/css"> @import url(foo.css) print; </style>
另外对于css来说还有一种方式@media：
@media print { @import "print.css" } 用@media先制定设备为 print,然后再用@impor链接
3）我要引用多个样式； 如果要在一个页面上引用多个样式组合产生效果的话，永link和@import也是都可以的。
link代码
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" />
@import代码
<style type="text/css"> @import url(../css/base/my.layout.css); @import url(../css/base/my.typo.css); </style>
不过个人觉得，用@import引用多文件的时候更加清晰一些 另外对于多样式还有一种link于@import的组合用法。 先用link引用一个css文件
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> 然后在这个css文件里面再引用。
<style type="text/css"> @import url(../css/base/my.layout.css); @import url(../css/base/my.typo.css); </style> 这样做的好处是，如果你一个站点所有页面引用的样式都是一样的， 而有又多个css，如果你每个页面都加4,5个一样的css样式，却是浪费代码和精力， 所以莫不如这样做，所有一个页面都引用一个css，然后一个css在引用多个css，方便 管理和维护。
加载css link与@import的区别：其实 link 与 @import 在显示效果上还是有很大区别的，基本上来看 link 的加在会在页面显示之前全部加在完全，而 @import 会是读取完文件之后加在，所以如果网速很好或很快的情况下，会出现先开始无css定义，而后加载css定义。@import加载页面时开始的瞬间会有闪烁 （无样式表的页面），然后才恢复正常（加载样式后的页面），Link没有这个问题。
他们从方法上是一样的，只是在浏览器识别上有点差距，link在支持CSS的浏览器上都支持而@import只在5.0一行的版本有效，而且还能用 于浏览器过滤也就是hack的使用，兼容一些老版本的浏览器。所以最好还是使用link通用型更强，但是对于高版本的浏览器，也就是现在的浏览器来说，其 实都一样，这是个没有太大意义的区分 。
@import最优写法：@import的写法一般有下列几种： @import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别 @import url(style.css) //Windows NS4, Macintosh NS4不识别 @import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import url("style.css") //Windows NS4, Macintosh NS4不识别 由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器也是最多了。而从字节优化的角度来看@import url(style.css)无愧于最值得推荐的写法。
CSS代码格式可以缩减样式表文件的大小 在编写CSS样式表的时候，为了能够方便以后阅读样式定义代码，我们会将每一条代码写在一行上。但是我发现这样写似乎并不好，因为CSS代码毕竟不像程序 代码有很强的逻辑性，它主要以名称和值的对应方式写的。所以写在同一行上不会特别影响阅读。反而会减少样式表文件的尺寸，因为减少了很多换行符和间隔符。 我测试了一下发现文件的尺寸可以减少12%左右。如果样式表文件比较大或者文件比较多的时候就会明显减少客户端的下载量，提高了网页的打开速度。 注意样式名称的冒号和后面的值之间不要写空格，只是在两个样式之间用空格分割。 具体格式如下： 程序代码： div {margin:20px; padding:10px; background-color:#F00;}
