学习前端的第一天

学习前端，前端就好比如盖房子~

• html就充当了房子结构这部分，也是房子的基础。
• css呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板...这些给房子改变风格，样式的就是css
• javascript呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是javascript

所以，想必思路也很清晰了，学习前端分为下面几个阶段

第一阶段——HTML的学习 HTML，超文本标记语言。 HTML是一个网页的骨架，就好比是盖房子的结构~这也是前端页面的基础。 个人感觉有两点可以尝试： 1，语义化的去记忆。比如ul li这个就是列表，button就是按钮，table就是表格。其实这也是html5所倡导的，语义化标签。 2，试着写一个一个小的demo，也许就只是一个列表，一个表格，或者一个按钮。也许写着写着你就懂了呢？ 学习HTML就是要自己不断的去写，去尝试。看着自己的代码能跑起来，有了心目中的效果，这种心情还是很开心的！给大家推荐一个网站，w3cSchool，这里面有在线的代码编辑器。可以边写边看到效果~

第二阶段——CSS的学习 CSS，层叠样式表。 CSS是能够真正做到网页表现与内容分离的一种样式设计语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制，拥有对网页对象和模型样式编辑的能力，并且能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS看似比较复杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本掌握大半了。这时我们就能对网页中各个元素进行精准的排版，做出符合我们意愿的网页了。

说完装修，就要给房子打造一些功能啦~

第三阶段——JavaScript的学习 JavaScript是一种致以式脚本语言，是一种动态类型、弱类型、基于原型的语言。 简单来说，javascript是一个可以运行在浏览器上面的语言（当然现在基于一些库/框架已经远不只是在浏览器上了），它可以操控浏览器，让浏览器听从我们的命令。这有点像一个电视剧和遥控器，而javascript就是我们的遥控器。浏览器根据javascript的指令，做出相应的反馈。比如操作DOM（也可以理解成为操作HTML），可以操作CSS。有了javascript就可以让我更加灵活&动态的操控HTML,CSS. 严格来说、HTML和CSS还算不上真正的“语言”，而javascript却是如假包换的脚本型语言，既然是语言，那就会有字符串，数组，对象等等。而我们的javascript可以处理这些与数据有关的工作，比如给数组排个序，去个重等等。 而我们依靠javascript可以做些什么呢？网页上常见的轮播图，网站的注册功能，提交我们的留言，刷新获取新闻等等。当然，我们强大的javascript远不止此啦~以后再为大家深入介绍~ 然而因为历史原因，比如我们灰常“尊敬”的 IE 浏览器~出了一套自己的javascript标准，没有和主流javascript标准兼容啊！！作为一个前端er是不是应该把更多精力用在有意义的地方呢，而不是解决兼容。。。 所以，似乎我们还需要一个利器，来让我们更快速的开发~没有错，这就是我们的——jQuery！

第四阶段——jQuery的学习 jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 如果继续用盖房子做例子，jQuery更像是一个装修队。我们只需要关注我们的房子设计本身，把我的想法，理念告知这个装修队，让它来给我们处理那些杂七杂八的事情。比如会不会吵到邻居？怎么协调物业？干活总得有人手的，对吧... jQuery的优点我就不挨个说啦，一句话，jQuery是你更上一层楼的利器，也是我们前端er一大利器！

web前端的一些小建议

这里跟大家扯一扯学习前端的小方法，是我自己的学习方法，大家凑合看看，倒也不一定对~

在写css前，其实html的结构要是比较合理的，这样写css也会比较顺手。在写一个网页之前，建议先琢磨几分钟，不要上来就写。多去看看别人是怎么写的，然后结合自己的项目，心中有一个大致规划。可以先把最外层轮廓写好，先不着急去写某一个具体的部分。

这里给大家分享一些css小技巧：

1、使用reset.css

火狐和IE这两种不同的浏览器，在绘制CSS样式方法上截然不同。这种情况下，使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。（可以去网上找一下，很多的）

2、CSS缩写

CSS缩写简化了你的CSS代码，更重要的是，它让你的代码更加整洁易懂。

不是像这样创建CSS

1234567.header {··background-color: #fff;··background-image: url(image.gif);··background-repeat: no-repeat;··background-position: top left;·}

而是像这样创建CSS

123.header {··background: #fff url(image.gif) no-repeat top left·}

3、理解class和id

这两个选择器总是让初学者感到迷惑。在CSS中，Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。

4、实用的<li>

<li>也叫链接列表，在与<ol>或<ul>正确搭配的时候非常好用，尤其是用在导航菜单样式上。

5、少用<table>多用<div>

CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>，<div>里的内容不会 被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然，有大量表格内容时，还是用 <table>吧。

6、CSS调试工具

在设计CSS时，能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你，你可以把它装在浏览器上：比如FireFox Web Developer、DOM Inspector、Firebug等

7、!Important

所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。