前端开发手册（经验之谈，不断更新）

来源：互联网发布：unity3d卡牌游戏技能编辑：程序博客网时间：2024/04/29 18:21

前言：作为一个前端开发人员，你需要掌握的技术可谓之是多之又多，很负责任的告诉你，前端的技术不比后台的技术少，甚至还要更多，而且更新换代更快。这里说一个事情：很多人打心眼里任务前端就很简单，后台写起来就很高大上，这直接导致很多人在学技术的时候偏重了后台的技术而冷落了前端开发技术。如果你是这样的人那么只能说你对开发还有很长的路要走，当然这里也包括本人。

1.前端语言

前端语言主要指HTML，CSS和JavaScript。它们都有各自的职责，而且你要让它们各司其职，不到万不得已千万不要让它们插手别的事情。HTML负责页面的结构，CSS负责页面的形式，JavaScript负责页面的动作。在开发的时候，要让这三者实现分离：HTML文件里面尽量不要出现CSS和JavaScript的代码，同理，CSS和JavaScript也是如此。用一句话说就是：结构，形式，动作要实现严格分离。

1.1 html

总述
HTML5现在可以说是如日中天，它已经成为网页开发甚至移动端开发的必选语言了，很多国外的大型网站已经完全舍弃flash而选择使用HTML5来代替它。可以见得学习HTML5是多么重要。HTML语言在前端开发主要负责页面结构的编写。也就是确定页面内容的结构。我们在编写页面的时候，页面的主要内容一定要使用HTML来直接展现，而不要用JavaScript来展现页面的主要内容，因为JavaScript不一定在任何情况下都能工作，如果JavaScript不能正常工作，我们用JavaScript展示的页面主要内容就不能很好的呈给用户，这样就很失败了。比如很多页面的广告就是JavaScript呈现的，我们的很多屏蔽广告插件就是通过拦截这些JavaScript来屏蔽广告的。

1.2 css

总述
css是用来定义页面的形式。**也就是确定页面的内容该以什么样的形式呈现给用户。**css要和HTML实现分离，不要出现行内样式，也不要在HTML里面定义样式，正确的做法是在HTML外部定义一个css文件来定义页面样式，在HTML里面通过< link >标签来引用。分离，一定要做好，反复强调，是因为这会为后期的维护等等带来很大的便利。

1.3 JavaScript

总述
JavaScript是前端开发的首选语言，没听错，就是首选语言。既然可是称得上是“首选语言，自然有他的强大之处。比如，可是使你的页面具有动态效果，用户使用起来更加舒适。学习JavaScript要从原生js开始学起，一开始就学习js的一些库的话有很多弊端：比如越学越迷茫，只是会用，但是对于其底层原理却不是很懂，这为你的前端之路就埋下了一个定时炸弹，不知道什么时候就会出来炸你个怀疑人生。学习JavaScript时，要理解一个很重要的概念，那就是DOM：DOM指的是一套对文档内容进行抽象和概念化的方法。

1.3.1准备工作

编写JavaScript脚步只需要一个文本编辑器和一个web浏览器就足够了。这里文本编辑器推荐使用Sublime Text，浏览器推荐使用谷歌的chrome。另外，编写好的JavaScript脚步文件最好通过< script >标签放到HTML文档的最后，< /body >标签之前，这样能使浏览器更快的加载页面。

1.3.2语法

语句：让每条语句都独占一行的做法更能容易跟踪JavaScript脚本的执行顺序。每条语句后加一个分号。

注释：在JavaScript中建议大家用“//”来注释单行，用“/* */”来注释多行。

变量：JavaScript中变量和其他元素名称区分大小写。变量命名要能够”望文生义”。

数据类型：JavaScript是一种弱类型语言。JavaScript在声明变量的时候不用明确变量类型。JavaScript几种重要的数据类型：字符串（var mood=”happy”;//也可以使用单引号’mood’）、数值（var age=20;）、布尔值（var sleep=true;）、数组（var beatles =array(4);）、对象。