前端工程师新手必读：掌握网页设计的基本技能和弄清设计的概念

　　公司招了几个刚毕业的学生，作为重构的新手让我来带。
　　首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会，对我工作的肯定和认可，让我带这样的一个重构团队，同时我也明白任务的艰巨，但我一定会将工作做好，不负公司对我的期望。(哈哈，好像从小到大，老师都是教育我们要这样先说的。)
　　在网站的发展史上，初期的网站建设根本不需要网页重构这个职位，WEB1.0时代的网页，只需要程序员，一堆堆的表格嵌套就完成，或者美工进行配合完成，先由美工负责设计好，再用一些自动化的软件拉伸几下，直接将设计好的图就可以通过软件输出表格的布局了，根本不需要重构这个多余的职位。随着 WEB2.0的到来和W3C的规范得到世人的认可，内容和样式的分离更方便进行开发和维护，传统的表格布局和内容混排的方式逐渐地被淘汰，美工已不能完全一手包办越来越复杂的效果和高要求的页面布局了。此因催生了一个新的职位——前端工程师。
　　鄙人刚好作为一名WEB2.0成长起来的前端工程师，虽然说做的项目不多，但乐于与人分享。虽然分享的也许只是一些很表面甚至有些过时的东西，但也只希望为大家提个醒，最好能起到抛砖引玉的作用。
　　一、前端工程师的职能和作用。
　　什么是前端工程师?有人这样来表述：我们是工程师中的设计师，是设计师中的工程师。上班不干别的，就是玩，弄点效果，攒两页面，搞点创新。我们就是前端攻城师(工程师)。当然这个表述有点有点轻巧、调侃的味道，工作绝对不是玩那么简单的，有时候会为一些效果的实现或优化，弄得加班加点一起开发，但其实有两一句表述是非常中肯的，那就是：我们是工程师中的设计师，是设计师中的工程师。这句话将前端工程师的角色的定位说得很准确。前端工程师，在网站开发的初期，以工程师的身份来指导网页的设计，前端工程师明白程序的输出的方法，指导设计师在设计的过程中避免一些不能输出的数据排版，指出哪一些阴影、透明、圆角的使用不能大范围的使用等等;在进行页面的重构的过程中，又将以一个设计师的身份将设置页面转化为静态页面，需要用代码对设计页面进行最初的还原，实现好相应的前台的效果，排列好相应让后台开发的工程师输出数据的地方，以适应后台数据的输出并保持页面的不变形、不走位，在有数据输出正常的情况下，配合程序去修改样式，以尽量达到和设计的效果基本一致。所以在这个页面设计和到程序的现在过程中，需要前端工程师起到一个桥梁的作用。
　　前端开发是一项很特殊的工作，前端工程师的工作说得轻松，看似轻巧，但做起来绝对不是那么的简单。在开发过程中涵盖的东西非常宽广，既要从技术的角度来思考界面的实现，规避技术的死角，又要从用户的角度来思考，怎样才能更好地接受技术呈现的枯燥的数据，更好的呈现信息。简单地说，它的主要职能就将网站的数据和用户的接受更好地结合在一起，为用户呈现一个友好的数据界面。
　　二、前端工程师的发展前景如何
　　前端工程师是是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。互联网的发展速度迅猛，网页由WEB1.0到WEB2.0，再到新生的HTML5、CSS3，到现在手机、3G网络等新科技的兴起，网页也由最原先的图文为主，到现在各种各样的基于哀前端技术实现的应用、交互和富媒体的呈现，更多的信息、更丰富的内容、更友好的体验，已经成为网站前端开发的要求，网站的前端开发发生了翻天可覆地的变化。
　　网站的开发对前端的需要越来越重要，但个新和职业在业务还是很缺，所以高质量的前端开发工程师将会是后五年内一个非常热门的职业，发展的前景非常可观。
　　三、前端工程师需要掌握的技能
　　作为一个前端工程师，需要掌握的技能还真的不少。
　　最基本的三个技能：HTML、CSS、JavaScript
　　这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
　　HTML：
　　指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，现在已经发展到4.01版了，得力于W3C建立的标准和规范，现在已普遍升级到了 XHTML，XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。
　　另外，W3C 与 WHATWG 合作创建一个新版本的 HTML，就是HTML5。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，为HTML世界注入更多惊喜，尽管HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，显示出来的生机和活力已是那样的激奋人心，特别是前端的工作中，那些针对浏览器兼容的问题将能得到很好的解决，更多的效果和应用也能更方便的实现。
　　前端工程师，也必然要与时俱进，紧跟业界时代发展的前沿，不然永远只停留在旧的技术上，只会被无情的淘汰。
　　其实HTML的元素也就不过几十个，常用的元素更少，所以掌握起来的话应该不困难。但就是这些看似简单的元素，很多新手在刚开始的时候就不注意规范，养成一些不好的习惯。
　　1、不要忽略一些细节
　　随便打开一个个网站，随手点到了163的首页，163算是一个比较规范和专业的门户网站了，已经用上了HTML5的一些元素了，具体可以看到源文件。
　　在头部的焦点广告图那里，用小BUG右键查看一下元素，看到这样的一个图像标签img代码：
　　img必备和可选的参数都有写了上了，但是必备参数里的一个值alt没写(其实一些大型的专业门户网站其实也是有存在一些小问题的，只要我们细心一点就能发现)。虽然这样alt不写，在页面中也不会有任何的问题，因为这个alt属性也只是在图像丢失、禁用或加载不到的情况下才显示，但是如果一些其他特定的设备访问或一些其他条件下图片不显示的情况下，那这里就是一块大红XX和一大块白块，多影响用户体验。
　　虽然只是一个小小的alt属性，但是有时候是细节决定决定成败，用与不用，表面上看不出有什么问题，但是在某些特定的条件产生的作用是无法估计的，也就是从这些小小的细节就可以看出一个前端工程师的水平如何。
　　一些前端的新同学甚至什么也不填，放一张无任意命名意义的图上去就算了事，养成这样的习惯是非常不好的。
　　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的魅力就在于此。