web前端(HTML+CSS+JS)

http://www.php.cn/js-tutorial-396813.html

前端开发三剑客HTML+CSS+JS之名是如雷贯耳，是前端入门的基础之基础，前端程序员们用这三个组件构成了数量众多的网页。然而在初学的时候，由于无法迅速了解全部知识点，所以在学习的时候往往会有盲人摸象的感觉——就是对于各个组件的功能和分工不甚了解，无法从整体上把握学习方向，因而较难构成完整的知识体系，这是比较头疼的事情。我这个人学习有个特点，我喜欢从底层知识学起，然后在这个基础上一层层加上其他内容，最后构成一个完整的框架。这是我习惯的学习方式。

开始的时候，我还是有点头晕的，知识点一个接一个，互相之间也有交叉，前面与后面联系起来，后面又与前面联系起来，搞懂还是要费劲。但还是整个内容过完两三遍之后，整个框架就清晰多了。简单来说，HTML+CSS+JS的分工体现了软件分层的理念。大体的功能分配是：HTML负责描述内容，CSS负责描述元素的样式，JS则负责实现网页的动作。这样说，其实还不够清晰，新手是看不太明白的，我想我们可以从网页的发展历程来理解为什么会有这三种划分。

早期的网页是静态网页，网页中的元素基本都没有动作，人们上网主要是浏览资讯，对于网页的交互性要求也低。我们可以看一下96年雅虎的网站（图摘自网络），网页上有图片，超链接和搜索框，大多都采用的默认样式，这样的网页样式与内容都混合在一起，如果要修改网页的样式，就需要挨个修改，这样就会比较麻烦。那么怎么解决这个问题呢？网页开发的开拓者们 将样式从内容中抽离出来，将所有描述网页样式的语句合并成一个文件，这个文件叫层叠样式表，简称CSS。如果我们要修改样式的话就从这个文件里修改，通过一些选择器，我们可以快速地更改某一个或某一类元素的样式，从而提高效率。

将样式从网页中抽离后，HTML语言只负责描述网页内容，这是什么意思呢？在HTML中，我们用元素标记头部文件，用

完成了内容与表示的分离后，我们要解释网页的动作了。静态页面有个问题是，网页的内容在生成后就不会再变化了。而我们在浏览网页的时候，需要进行交互，我们需要登陆微博来评论点赞转发，我们需要在玩网页游戏的时候控制人物的动作，这部分功能都是由JavaScript(JS)承载的。

JavaScript是一种轻量级的编程语言，它不像C/C++/JAVA等对数据类型作出严格规定，也没有指针，操作符重载等等内容。说起来这名字很有迷惑性，名字里有Java，大家却都说跟Java没有关系，这着实让人头疼。这好比说拍个电影叫《我叫潘金莲》，却说自己跟潘金莲没有关系。（笑）开个玩笑。不过相比起来，JavaScript与Java的语法有很多相似之处，但JavaScript相比Java简单许多。JS不像Java是一个平台型的语言，有各种各样的组件、框架，JS是与web紧密联系起来的。JS通过插入到HTML中执行的，通过JavaScript我们可以实现写入HTML输出，对事件作出反应 ，改变HTML内容、图像、样式，验证输入等功能。基本上网页上所有的交互都是通过JS函数实现的。这个部分也是三剑客中最难的部分，我现在掌握得也是马马虎虎。后面的文章会针对具体的知识点再展开说。

JS文件和CSS文件最终是要应用到HTML中的。在HTML中，我们可以通过

通过最后这部分内容，我们可以试着总结这三个部分的关系了。形象的说，你建一座木屋，html就是他的门，墙，柱子，屋顶，
你要是确定屋子多高，多宽，门，窗在哪，就是css确定，
你在屋子里，把椅子从南拿到北，这个过程就是js。

html是一些网页控件，css是美化这些控件的代码（层叠样式表），js（javascript）是一种增强表现力的脚本语言，可以做出很多动态及交互性较强的效果。