对于前端的工作者来说，IE6 就是一场噩梦。它拥有一定的用户量，同时它是过去很多年的产品，它无法适应现在的新技术。所以如果网站要面向全部用户，则需要去针对 IE6 进行单独的 CSS hack 处理。这平白无故的就增加了成本和时间。有过经验的人都知道，为了迎合 IE6 的口味，往往还需要付出巨大的努力，一点一点的寻找 hack 的方法。

正是因为这样，业界频发 Kill IE6 的呼唤。

但实际情况不容乐观，关于 IE6 为什么不消失，潜行者 m 之前写过一篇文章《IE6 在中国消失还需要一段时间》。这样，我们面对一个问题：前端设计要不要放弃 IE6？本文将结合客观的数据，对放弃与不放弃进行一个对比，以供大家的参考。

客观准确的数据很重要。只是说用户很多很少，根本没有权威性和参考性。本文引用的数据是 CNZZ 数据中心的统计数据，CNZZ 是提供网站统计代码服务的网站，他们会统计用户访问网站时使用的浏览器。所以这个数据是非常准确的。

放弃论：

1，针对 IE6 的兼容，需要做大量的 css hack，写这些代码，需要时间和精力，要付出成本。你不仅要学习各种 hack 方法，还要掌握各种新技术的代替方法，以求 IE6 中，能和其他浏览器显示相似效果。

2，IE6 严重制约了国内技术的进步。很多网站追求兼容 IE6，而不敢使用各种新型技术，仍然使用老旧技术，导致技术落后。因此，有言论称，如果新浪等大型网站，拒绝对 IE6 的支持和兼容，逼迫用户去升级用户的浏览器，很快这种现状就会解决。这种方法，有一定的道理，但那些大型网站，往往不愿意得罪用户，而继续保持兼容的做法。

总结：放弃 IE6，我们就可以节约一些成本，同时可以使用最新的技术，打造更好的用户体验，进行创作。但是这样，我们就丢掉了一部分用户。

这部分用户究竟有多少呢？我们来看一下具体的最新数据（http://brow.data.cnzz.com）

IE6 仍然有竟然的 20%的占有率，同时需要注意，360 浏览器等使用的是其他浏览器的内核，如果是 XP 系统默认 IE6 浏览器，那么 360 浏览器等他们使用的 IE 内核为 IE6，仍然相当于使用 IE6，所以这个数据应该还要高一些。简而言之，综合性的网站，五个浏览者，一个就用 IE6。

不弃论：

1，我的网站有大量的 IE6 用户，我如果不兼容，我将损失这部分用户。像新浪等大型门户网站，他们为了照顾这五分之一的用户，不得不去做兼容。毕竟用户就是钱。

总结：兼容 IE6 的最主要原因，还是在于照顾 IE6 的用户。

最终方案：

这里本人思考了一下我的应对方案，以供大家参考。

1，分析网站的用户，针对用户份额确定是否兼容 IE6。如果是一个有关前端技术的网站，那么完全可以使用最新技术，因为浏览者大都是有经验的，一般不会使用 IE6。但是想淘宝、新浪等综合性网站，用户浏览器比较杂乱，则需要考虑兼容。

2，对于小的、实验性的、个人的项目，则完全没有必要拿出精力去做兼容，毕竟访问的人不多，只需要给出个提示即可。但是对于正规的项目，则要考虑一下 IE6 的兼容。

 

前几天,重新做了一下自己的个人介绍页面(www.yujiangshui.com),由于忙,一直没有验证,今天验证了一下,果然不小心出现了几处错误.

在修正网页不规范的过程中,又学到了几个平时不注意的小细节,写这篇文章与大家分享一下.

1,<span>标签中,不能放<h*>标题标签.

<span>标签和<div>标签的区别,一个是行内元素,不换行而div默认是占正行的.一直以来,只注意到了这个区别,而把这两个标签都用来布局了.这是错误的,它们俩的语义不同.<div>是区域的意思,这个才是布局用到的元素.而<span>只是一个比<p>还小的一篇文章中一句话,当然不能包含一个比<p>还大的 <h*>标题标签了.

所以正确的做法是,用div布局,如果需要行内效果,使用css的display:inline;.

2,<script>标签已经不需要任何属性了.

在很久以前,应用在网页中的脚本其实有两种,一种是javascript另一种是微软的vbscript,所以网页中的<script>标签中,必须加上一个属性language,属性值就是javascript或者vbscript,用来区别.

当然,现在几乎没有几个人在网页中使用vbscript,甚至很多人都不知道.今天在验证的时候,w3c给出的建议是:<script>标签的language属性以及被废除,你可以非常放心的去掉它了.

也就是说,以后要使用javascript,只需要写<script>javascript代码</script>就可以了.

验证页面规范,真的有很多好处,可以让你发现平时注意不到的不规范的地方.但是,不需要刻意的强调错误的修正.你可以验证一下淘宝,首页有1000多个错误,就连非常简单的百度首页,也查出了几个错误.这些大网站,有实力非常雄厚的前端团队,结果还有错误的存在.这说明,还是以网站的实际效果为主,多少个不规范的地方也无所谓.

接上面的文章，潜行者m的CSS2笔记（一）。

21，使用line-height属性来控制行高，使文字居中，控制文字排版。

22，使用<label>标签，可以让人点击文本选中相应单选复选，提高网站交互性。例子<label for=”c1”>点击此文本</label><input type=”checkbox” name=”c1” id=”c1” value=”ckbox”/>

23，对于文本下划线，可以使用border-bottom来实现丰富的定义。

24，li{width:120px;text-overflow:ellipsis;}当内容超出对象宽度时，显示为省略号。clip将不显示。必须使用word-break:keep-all;使其被强制不能换行。

25，em是一种相对弹丸。text-indent:2em;表示空出两个字符的距离，em长度相当于本行中字符的倍数，这个单位非常实用。

26，首字下沉使用css伪类。p:first-letter{font-size:2em;float:left;}。first-line伪类对第一行进行设置。

27，在布局中，出现布局的错位等，可以使用相对定位。尽量避免绝对定位。

28，剪切图像可以使用clip。使用div overflow属性进行剪切图像，用img margin移动剪切区域。

29，图片代替文本，内含不显示文本，表明图像的内容，非alt属性。两种实现方法：display:none;text-indent:-99999px;

30，a:link只会对拥有href=“”的a发生作用。

31，使用图片代替文本，对搜索引擎有利，有利seo。

32，使用导航等，显示边框的时候，最好加上一个背景边框，防止错位。

33，pimg{float:left;padding:10px;}设置图片浮动方式，可以将图片嵌入文字流。

34，如果想要添加图片说明，将文字与img放在一个div中，之后对文字等进行设置。

35，表格布局对table、tr、td进行定位，border-collapse：collapse;属性表示将表格中单元格之间线条合并。border-collapse：separate:则将使各单元格的边框独立存在。

36，@import导入命令是将目的文件包含进来。例如：@import url(“home.css”);
还可以指定一个设备类型，指明当前的样式表用于什么操作，例如：
@import url(“pageprint.css”) print;表示在打印文件的时候，使用pageprint.css这个样式表。

37，提高css效率的方法：
1，按照功能划分css文件。
2，在需要这方面功能的页面，引用相应的样式表文件。引用用上面的import

38，用css制造进度条等，使用行间样式。

整本书大部分的内容，都已经吸收同化进潜行者m的身体中，对于这38条笔记的内容，掌握的还不是很熟悉，所以做成笔记，以便在日后进行翻阅。

在随后的一段时间内，我将继续公布潜行者m的个人笔记，包括seo、html5、css3、php、javascript等等。

以前读书，被强迫着做笔记，但是从来没认真的做过。现在读书，基本上每本书看完都要做一下笔记，这个真的非常重要，一本书你看完会有很多之前没有见过的知识点等，这些东西，就需要记下来，一方面用到的时候快速查询，另一方面记下来。《css网站布局实录-基于web标准的网站设计指南》（第二版）这本书，我买了很久了，看了也有3遍了，2个月前又看了一遍，做了一下笔记，现在拿出来共享一下。

注意，这份笔记不适合新手，这里面的知识点，不是系统的基础的，而是经常不小心忽略掉但是又常用的。有经验的朋友，可以看一下，里面的知识点你忽略了多少。

1，相同类型的css定义，默认执行后面的一个，可以用！important语法修改优先性。例如：background-color:red;!important

2，标注某些css hack的地方，使用hack；没完成的地方使用todo。（在大型的工程中，用注释标注一下，方便查询修改）

3，block块状对象占据整行，其他的都移到下一行；in-line行间（内联）允许与下一对象共享一行。

4，尽量减少div的嵌套，会增加浏览器解析的难度。

5，最终宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距，最终高度也是如此，需要精确计算，放置错位。

6，重叠的margin会叠加显示，以大值为准。当两个div设定float之后，就不会叠加了。

7，浮动的清理（clear）。使用clear属性来拒绝某个方向上的浮动，这样就不会浮动到上一层了。（这个最好实践一下）

8，父position:relative;子position:absolute。子在父中绝对定位，将以父位置为基准。

9，div应当重点放在大面积区域上，对于简单的导航等，用ul解决。

10，下拉菜单等，可以通过伪类选择器以及display属性来控制。display:none;表示隐藏当前元素。（通常使用javascript来实现下拉菜单，但是现在用纯css也可以实现的很好）

11，css hack:*html—这种方式仅被IE浏览器支持解析，是最常用的css hack之一。

12，div是一个块，用来整体布局设计——block
span是一个范围，用来区别内容——in-line

13，background-attachment:scroll/fixed;设置背景图片的滚动方式。

14，background-color:transparent;透明模式，显示背景。

15，background-position:左对齐方式 上对齐方式 ;用它可以对图像进行精确的定位，同时实现css sprites功能。例如：background-position:0px -27px;

16，ul/ol属性：
list-style-image:none/url;设置图片作为列表中的项目。
list-style-position:inside/outside;设置项目符号的放置位置。
list-style-type:none/disc/……;设置li的表现形式（没有/点状/圆圈/方块等等）

17，display属性：
block：将对象显示成盒状，后一个对象换行显示。
none：隐藏/不显示对象。
inline：行间内联样式，将对象排列成一行。
inline-block：对象显示成块状，但呈现内联样式。
list-item：将对象作为列表项显示

18，float:left;更适合对象布局，但是浮动多了，容易造成浏览器解析混乱。希望让信息显示为段落，最好使用display:inline;（通常设置一个原子类fl{float:left;display:inline;}，元素浮动的时候，加上class=”fl”)

19，text-indent:value;用于控制段落文本的首行缩进想过。text-indent:20px;表示对象首行缩进20px。如果想要比其他提前一些，可以使用负数值来实现。text-indent:-88888px;设置超大的数值，还可以起到隐藏文本的效果。

20，对于表单样式的控制最基本的方法就是使用border以及background-color。即对表单元素的背景、边框进行设置优化，消除默认难看的样式。

先打这么多，剩下的留在潜行者m的CSS2笔记（二）中。

阮一峰和zac的博客，都是业界公认的名博，两个博客开博的时间都比较早，阮一峰要更早一些。本文就对比一下这两个独立博客的区别，并且总结从中能够学到什么东西。

我个人感觉，他们俩的区别非常明显，阮一峰是实力派，而zac则是偶像派。怎么说呢？

阮一峰的博文，写得都非常有深度，总结的都很全面。这应当归结于他的职业和性格，他阅读非常多的各类的书籍，并且读过之后，就会写一些读书的总结或者自己的感悟，这本身就是博文很好的素材，所以他写的每一篇文章都值得收藏，都像一个完整的参考文档一样。在加上开博时间之久，以及翻译过多本书籍，所以博客积累了很多的人气，有固定的阅读用户。

而zac的博文，现在更新的速度已经大不如从前了，一般每个月更新3，4篇文章，而且这些文章都比较短，更偏向于个人或者抒发一些感慨。当然也会涉及到一些seo最新的动态等。出于seo这个职业，本身就不太好写文章，所以写出的文章，大部分都在于猜测或者做得实验以及国外的研究成果翻译。再加上大部分的seo相关内容，是变化不大的，把以前写过的内容重新拿出来，老调重谈并不是一件好事。但是由于他在seo界的知名度，博客仍然具有极高的人气，有很多的评论，虽然这些评论有很大一部分是来借光宣传的。所以，相对的来说，我更推荐阮一峰的博客，因为在他的博客上，你能够真真正正的学到东西，而在zac博客中，虽然可以学到点，把握seo的最新动态，但是学到的东西，实在是比较少。

这对我们开博有什么启示呢？你更愿意作哪一种博主？这个留给你思考吧。

写了这个题目之后，我真想扇自己两巴掌，这不是明摆的废话吗？！但是就是这样人人都知道的明摆的废话，还有无数的博主在贯彻低质量高数量的方针，所以写下此文，为各位博主认真的分析一下。

从博客的功能讲起。一个博客，它的作用就是写文章，并且显示文章给浏览者看。浏览者之所以要看你的文章，是因为他们需要你的文章，通过你的文章获取一些知识或者解决一些问题。那么，你写的文章，就必须要有一定的价值，狭义的讲，就是要有一定的技术含量，可以帮助别人解决一些他们遇到的问题。只有这样，别人才有来你博客的理由和冲动，也只有提供了大量优质的信息内容，浏览者才会收藏你的网站，并且经常回来看一下。例如，人们想要看最新的科技新闻，肯定会想到月光博客；站长想了解网站建设运营相关，就会去潜行者m博客看看。

所以，网站的内容质量，决定了网站的生存与发展，而这一点尤其体现在博客上。

一个博客的生命力不在于更新频率

看一个博客是否有活力，是否有生命力，并不应该看文章的数量和更新频率。在建博初期，我也曾有过那么一段时间，每天为了更新博客文章而奋斗，曾经定下规定，每天更新三篇文章。而且我的确坚持下来了，但是每天的这三篇文章，很少有技术性很强的文章。我个人是偏重于技术的，但是当时的技术水平不是特别强，所以很难写出大量的技术性文章，但是每天都要去写文章，所以就把每天做的事情和一切乱七八糟的内容组织起来，写成文章发布在博客上。就这样，每天都比较累，但是看着自己博客的文章，很欣慰。

友情链接是博客发展的一个要素，当我觉得文章数量以及够了，就去一个小有名气的博客申请友链，他很正常的拒绝了。之后我就松懈了，感觉开博没有什么意义了，于是博客就荒废了半年左右。之后，又重新整理规划了一下博客，把过去写的大部分的文章都删掉了，因为它们本来就没有什么用。像是日记、心情之类的，除了你的老妈和要好的朋友，估计没有别人想去看。与其写些乱七八糟的文章，还不如把精力集中，写一篇好的文章。

一个博客的内容要有范围和深度

人的精力是有限的，要想写出高质量的文章，是要时间酝酿和编写的，所以博客的内容一定要有一些范围。选择自己最感兴趣和最擅长的领域，专门写此类的文章，这样可以保证文章有一定的深度，也有一个固定的需求人群来关注。即使是很大的博客，也有一定的范围，例如月光博客，就是关注互联网和科技的，它上面你找不到健康养生的文章。很多博客的分类和目录都比较混乱，有wordpress、SEO、黑客技术、软件推荐、健康养生等等文章分类。一个人肯定有很多感兴趣的领域，但不见得每个领域都很精通。

目录杂乱的博客，会找不到博客的方向，找不到写作的重点，乱成一锅粥，每个分类都想照顾到，但是每个分类的更新频率也低。访客也乱，看不到自己想看的文章，最终会慢慢衰竭。如果你说，我精力异常充沛，写文章很多，每个分类都会写很多文章，我还邀请很多人来一块写各个领域的文章。那么我会说，你去建门户网站吧，博客已经不适合你了。

以上两点，就是潜行者m所给出的建议，总结起来，很简单的两条：

1，写出对浏览者有用的文章。

2，求质量不求数量，在质量的基础上，增加数量。

不久前，有个网友联系我，想咨询一下如何对他的网站进行推广。我看了一下，他的网站是某地区的教育培训类网站，于是就给他写了一个推广分析报告，分析一下有几种比较有效的推广方法。

1，SEO。这类网站最适合的推广方法，就是seo了，当人们想要得到某地区的培训，首先会用搜索引擎搜索一下，定向流量比较高。但是SEO的难度也是比较大的，前期付出的成本也比较高，但是利益也比较大。

2，制作视频教程。利用手头的教育教学资源，做一部分免费的公益教程的，然后对外在比较大型的教育类门户网站或者论坛发布。有充足的老师和教育资源，这样做一些简单的教程、简单的介绍一下课程的学习目标以及重要性，可以让人们对课程加深了解，从而增加报名率。可以考虑与教育类门户等合作，在视频教程中，添加上他们的链接表示合作推出，这样那些大型门户甚至会帮你推广一下。当然，前提是，教程必须要有价值，不能全都是广告，只能稍微提一下自己的培训中心，否则其他网站可能不会同意和你合作。

3，写软文。有专业的老师等，可以组织些一些比较基础的考试培训类的指南，比如XX证考试指南，在文章中穿插进自己的培训中心名称或者链接。例如XX培训中心新推出了一份复习资料等等等等。发布在考试论坛或者考试门户网站上，甚至可以考虑去付费发布。

4，编写资源帖。组织现有的资源，在压缩包里面加上自己的信息，然后组织成一个帖子，例如“XX考试XX本电子复习资料大全”等有吸引力的名字。将其发布在考试类论坛上。要注意的是，帖子里面的资源，必须真实可靠有效，一般这种帖子在论坛里面都很火，而且经常被别人转载，可以制造大量外链。

5，邮件营销。通过上面的几个推广方法，我们可以在下面加上“邮件订阅”，使用QQ列表服务，让对此培训有兴趣的人，通过邮件订阅最新的考试培训信息等。可以使用一些吸引性的文字，来吸引提交邮箱。比如每月提供一些免费的考试培训资料，提供最新的考试相关的信息等等，然后在后面添加上自己培训中心的广告。一段时间之后，收订的人会看到你的实力，会大大提高报名率。

6，本地推广。既然是一个培训中心，而且又有地区性，所以应当在本地进行推广。可以按照自己培训的类型，针对性的进行广告传单等推广。比如向中学、高校等，发放传单，开讲座等。以网站作为实力展示的地方，进行推广。

以上就是潜行者m关于教育类网站推广方法的总结与分析，如果你有更多更好的推广方法，请与我交流！

看到这个题目，如果你说，网页设计非常简单，根本不需要什么步骤，直接打开dreamweaver软件，然后设计编写即可。那么我只能说，你太不专业了。网页设计是要有一定的步骤的，有了这一些步骤，你的设计过程会更加高效、紧凑，这个是经验。

首先，网页有三层，内容层、表现层、交互层。这三层分别对应的技术是，html、css、javascript。html是储存数据用的，它的作用就是储存并且显示数据；css是用来排版表现，修饰html中的数据，让它显示更加美观更加合理；javascript脚本就是提高页面交互性，提供一些特效，增加了页面的功能等。既然这样，我们就需要一定的步骤，来分别完成这三层的工作。以下就是潜行者m的个人设计经验，以一个用html5构建博客模板为例。

第一步：设计并且画出原稿（非必须）

在动手编写之前，最好想好画出原稿，这样就能照着原稿进行编写，可以提高效率并且不会丢失主题。但这一步不是必须的，如果你大脑已经想好了要怎么设计，那么不必画出，直接开始设计吧。

第二步：规定内容的展示与元素的命名（必须）

确定需要展示的内容，并且进行命名。一个博客，往往需要在头部放置一个logo，那么我就需要在<body>中添加<header><div id=”logo”></div></header>，即在头部，添加一个id为logo的div。还往往需要使用文章分类，做一个网站导航，我就需要在<body>中添加<nav><ul><li></li></ul></nav>即在nav标签中，使用ul标签来做成一个网站导航。

在使用css去布局网页之前，你必须要先想好网页中要显示什么内容，然后使用对应的html标签，来规划，并且命名一个通俗易懂的名字，这样使用css去布局就变得容易多了，有利于提高效率。所以这一步是非常重要的。

第三步：为html增添css样式（必须）

到了设计最重要的一步，为已经规划好的html元素，赋予相应的样式。比如，让log宽300px，#logo {width:300px;}；取消li标签默认的圆点，同时让它横过来变成导航，nav li{list-style-type:none;display:inline;}。由于在第二步，你已经对相应内容进行了合理的规划和命名，所以这一步，就要简单的多了，只需要按照对应功能添加相应样式即可。

第四步：添加javascript代码（非必须）

如果你想在页面中，添加一些动态交互的行为，或者是一些特效，那么你需要添加一些javascript代码，但这步不是网页设计所必须的。对于设计的工作，我们已经在上两步完成了，这步只是完善页面而已。

以上就是我的设计经验，我以前的设计，是边添加内容，边进行css样式添加，导致非常的混乱和低效。但是现在不同了，希望新手能理解并且应用，希望老手能够留言给出自己的更加合理的经验！

最近网络上，对Kill IE6的呼声越来越强，连微软官方都出来了一个干掉IE6倒计时的网站，来促进IE6的消失。但是在中国，干掉IE6还是需要一定时间的。

首先，微软推广自己浏览器，使用的方法就是与操作系统捆绑，windows xp就与IE6进行了捆绑，在2001年左右推出。一经推出，就立刻在全球范围内流行起来，以其简单易用，美观的特性，被很多人使用。直到十年后的今天，还有很多人在用windows xp系统，同时在用IE6。就像我的母亲，给她装上其他浏览器，都不习惯，就习惯IE6。

在现在的电脑上，大都预装了windows 7系统，WIN7系统中内置的浏览器是IE9，可喜的是，IE8、9正在不断的取代IE6。但是，windows xp系统，在中国实在是流行，现在还到处在安装xp，有些人买电脑甚至特别要求重装成xp系统，同时这些xp系统，大都是盗版的。微软对于IE等微软软件的升级，都会验证系统的合法性，但凡是盗版系统，就不可能升级IE6，这样xp系统用户，除非使用其他内核的浏览器，他的IE内核版本就是6，即使是使用傲游、世界之窗等IE内核浏览器，其调用的系统IE内核版本还是IE6。所以IE6的使用者，在中国还是有不少的，要想让它在中国消失，还是需要一段时间的。所以，我们设计网页等，还是要尽量考虑到IE6，至少不能在里面显示错位。

对于促进IE6的消失，我想了几个解决方案：

1，加深对网民的宣传，让网民知道IE6已经过时了，让他们想办法更换浏览器或者升级IE。例如像www.ie6countdown.cn这类网站，就生动的告诉人们，扔掉IE6。

2，遨游、搜狗等浏览器，创造性的提出了双核的概念，即使用两种浏览器核心来解析网页，可以随时更换。可不可以在调用IE内核的时候，从IE9等浏览器中，提取出最新版本的IE内核，来使用，而不是简单的调用系统目前内置的内核？通过各种数据得知，360浏览器、遨游浏览器等，现有的使用率是非常高的，如果他们这样做了，绝对有利于IE6的消失。

3，firefox、chrome、opera等其他内核浏览器，加大发展力度。比如firefox浏览器，不兼容网银，可以联系银行开发相应的插件。让这些浏览器不断的完善自己的功能，然后大力宣传，挤占IE的市场占有率。大家都知道，IE浏览器，在众多浏览器中，算是比较烂的。对于速度，chrome是最快的；对于功能和兼容性，firefox是最强大的。IE的市场占有率，仅仅是因为捆绑了windows系统。

4，废除windows xp系统，xp系统也已经过时，要使用win7、win8或者linux系统等，取代xp系统。

让我们大家共同努力，Kill IE6，结束前端设计的噩梦！

PS:文章中的网站打错了，有两个比较好的网站，一个是http://www.theie6countdown.cn/，比较有创意的中国IE6倒计时网站。另一个是官方的http://www.ie6countdown.com/

最近学习完了《html5与css3权威指南》，特别是css3部分，体验到了css3的超级强大。特别是一个比较常用的内容：选择器。

css3中，提供了新型的，可以使用通配符的选择方法。例如：[id=^sec]{ }，表示将此样式，应用在所有id以sec开头的html元素，比如id为section、sec3等的元素都会受到这些规则的影响。这样，我们就可以通过元素命名，来区别不同功能区域，并且使用通配符选择器来统一样式。而这一点，和class的功能类似。class与id的区别就在于，id一个网页中，只能有一个，而class可以有多个，这样可以让多个元素使用相同的样式。

因此，作者在书中说，不推荐使用class，class最终会消失。然而在另一本前端著作《编写高质量代码Web前端开发修炼之道》中，却推荐使用原子类的方法，来提高css样式的重用程度。之前，本人也写过一篇关于创建和使用原子类的文章，并且在现在的设计中应用原子类，感觉非常方便灵活性非常强大。在这里，潜行者m不禁思考，class究竟可取不可取？是鸡肉还是鸡肋？

class和id的区别

html中class和id属性，是用来标记元素、区别元素，这样就可以用css来精确控制样式，也可以使用javascript来控制元素。但class和id是有明显区别的，在网页中，id属性的值只能有一个，但是class的值是可以重复的。比如，我定义一个div的id为a，那么网页中不能再出现一个html元素的id为a；但是我定义一个div的class属性为b，我可以再其他的元素中，定义class属性为b。这样，就可以实现代码的重用，比如两个div都是红色背景，只需写出一个class（.r{background-color:#ff0000;})，然后在两个div中都指定class属性为 r 即可，而要使用id控制，则需要在两个div中，都写上background-color:#ff0000;。同时，id和class的优先级也是不同的，id的优先级要高于class，如果对同一个元素，分别用id和class指定同一属性不同的值，浏览器会优先解析id的值。

鸡肉说：

class可以极大的提高代码的重用，特别是使用原子类，既方便维护，又方便应用。而使用id，必须指定id然后指定大量重复的样式。css3中，虽然升级的强大的选择规则，但是仍然比较混乱，不利于维护。同时，存在即合理，w3c制定出class和id是有他们的道理的，负责不同的工作，class仍然会不断的被使用。

鸡肋说：

css3中，强大的id选择规则，已经可以对相近元素指定相同的样式，达到重用的目的。它已经完全可以取代class的作用，而且对于javascript来说，只能使用id来控制，说不定以后class就会消失了。

亲，你怎么看？你觉得是鸡肋还是鸡肉？