前端工程师新手必读：掌握基本技能弄清概念

　　一些前端的新同学甚至什么也不填，放一张无任意命名意义的图上去就算了事，养成这样的习惯是非常不好的。

　　2、规范语义使用标签

　　很多同学说是学习div+css，其实这个说法是存在误区的，甚至是错误的。一个规范标准的页面是合理地使用标签，使其更加语义化，如果只是靠一堆堆的div通过层层的嵌套来布局完成的话，那么，除了div和a标签这两个标签外，所有的HTML元素都没有存在的必要了。

　　上面是一个前来应聘的朋友发给我看的一个页面布局作品(点击进行查看)，这个同学还算是工作了一定的时间的，据他介绍之前是在游戏公司工作的，但不知是不是当时所在的公司是不是他负责 前端这块的，不做评论。

　　这个朋友的页面在浏览器查看没有什么大问题，浏览骂的兼容性还可以说是没有太大问题的，虽然从页面的效果上看起来没有什么问题，用小bug一看，可以看到他写的这个代码好像还蛮整齐的，所有的东西都是一层层的div，包裹得很仔细，类的命名也很有规律，但仔细一看，这个导航做的很有问题。查看一下源文件，发现不仅仅只是导航的问题了，整个页面都有问题，所有的body下出现过的HTML标签加起来总共只有七个，分别是：div、a、strong、 font、input、br、img。先不说他写行内样式、align在HTML4.01中已经丢弃的属性这些很低级错误的问题，一个很大的问题就是，语义的使用极不规范，使用层层的div来包裹定位。

　　例如这个导航可以用一个无序列表ul来就可以完成了，这样简洁明了，不需要这么多div和巨量的样式来进行控制，最重要的是语义化也比较清晰了。

　　网页布局就像是一篇文章那样，有标题、有段落、有加强、有突出，HTML提供了这么多的元素给我们使用，就是要求我们要按照其语义来使用，该用标题的时候用标题(h)，该用段落的时候用段落(p)，该重点强调的时候用强调的强调(em、strong),而不是都不管三七二十一，千篇一律的先用div 来包裹再来进行控制。我们使用了这些相应语义的HTML元素，同样可以使用css来进行控制的，可以达到任何我们想要的布局效果的。css的魅力就在于此。

　　研究表明， 语义化的标签，越少的嵌套，对浏览器的解析就越快，显示的速度就越快，当然对不同用户群的用户体验也就越好!特别是对于一些特殊群体和阅读设备，如盲人，使用的是阅读HTML的机器，对于一块块的div，就不知道哪里是标题哪里是正文了，只能阅读到的是这里有一整块的内容。如果使用的是语义化的标签就不一样了，即使看不到屏幕，但也知道哪里是标题哪里是标题下相应的正文。所以，我们有css这个这么神奇的东西帮助我们网页布局的时候，语义化的使用HTML 标签，用最少的嵌套和代码实现同样的效果，就是我们前端工程师所追求的。

　　再次回到前面div+css布局的一些误区，什么是div?它的英文名是division，意思是分开、分割、分块的意思。也就是说div在网页中是用来进行分块布局或是在没有更适合的HTML元素的情况下用来配合分块布局的，如果胡乱的滥用div，那么就会犯上"div控"了。刚入门不久的新同学最容易会犯这种思想的。

　　CSS：

　　CSS (Cascading Style Sheets)指的是层叠样式表，现在普遍在用的版本是css2.1 ，虽然已经发布了3.0的版本，且有一些个人的博客和站点已经使用HTML5+CSS3了，但受目前国内的主流浏览器IE6的影响，更多的人还是在使用 2.1的版本，在这个的基本上有选择性的使用少量的不影响兼容的css3某些功能，css3的普及还需时日。不管如何，css3的出现让我们眼前一亮，增加了很多新的属性，如圆角、阴影、渐变、动画、流媒体等等的效果，让页面实现的效果更加方便和容易。

　　现在要和大家分享的并不是css3哪些激动人心的属性如何使用和实现，因为这些当我们学习到了一定阶段的时候都会去学习到css3这个将来必将成为王者的使用，现在与大家分享一些与版本无关的东西，让大家在学习的过程中少走一些弯路。

　　1、 Reset

　　关于重置也有太多的东西要说了，YUI、Eric Meyer等都有各自不同的方法，甚至有些人是不用重置的，不管怎样，只要遵循一个原则：适合自己的就好。所以不对这方面过多的强求，也不作过多的讨论。因为要讨论的话几大篇幅也讨论不完。当然我自己有一个自己用的reset的地方，究竟好与不好，大家有空的时候可以研究，最好能把研究的结果与我分享，我也很愿意听。这个是我的Reset的文件，大家可以点击下载(aqy106_lab.css)

　　2、 样式书写要注意的事项

　　看过《Efficient, maintainable CSS》的译文《如何书写高效、可维护、组件化的CSS》，里面讲到一些样式的书写要注意的事项。还是看一看这个同样是一个新同学写的样式，看上去很整齐，命名也很有次序，但是仔细一看，问题还是很多的，先不说命名，因为这个得用另外的一个篇幅去说了。

　　如果作为一般的小站这样写，样式的也许只是多几个K的大小的问题，在性能上影响并不大，但在大型的网站中，几个K的大小就不容忽视了。

　　基于前人的总结，个人认为高效的css书写应该要注意：

　　1)、精简属性写法，提高可观赏性