小菜的前端编程散谈（1）

小菜的前端编程散谈（1）

前端，传统的前端包含哪些东西呢？

1. HTML（HTML5)
2. CSS（CSS3）
3. Javascript（ECMAScript）

我把这3样东西统称为资源，在一个Web系统中，用户通过浏览器上网，输入URL的那一刻起，就意味着通过HTTP协议发送一个远程请求，服务端会将一个URL请求映射到一个具体的URL，然后将关联的资源分别返回给浏览器端，浏览器拿到了这些资源之后，负责解释、执行并呈现（渲染）。（借助于Fiddler或者浏览器开发者工具中可以很容易监视到这一个过程，不妨动手试一下）

那么请问，为什么要分成3种资源呢？为什么不使用统一的语言来表示呢？OK，计算机编程中，不同的领域有不同的语言（特定领域语言，DSL），他们分别是应对不同的场景，扮演不同的角色，执行不同的功能职责，这样其实是一种模块化分工的思想，代码写得多了就知道这样的好处了，OK，这3种资源有啥不一样的呢？

HTML，标记语言，负责呈现网页的结构以及内容，显示什么？。打个比方，一栋房子，它有多少层，每一层里面，有几间房间，卧室、厨房、卫生间的分布，玻璃窗户的分布，房子的结构和房子的内容。可以通过静态HTML标记呈现，也可以通过Javascript编程动态展现，对于JS来说，一个完整的HTML文档就是一棵树，称之为DOM（Document Object Model，文档对象模型）
CSS，样式语言，负责网页内容的显示样式，如何显示？还是上面的例子，一个房子里面某个房间的墙是什么颜色？窗户是什么颜色什么风格？等等
Javascript，脚本语言，为什么有了HTML和CSS还需要脚本语言呢？脚本实际上就是为整个HTML Document增加了动态交互的能力。再打个比方，比如人的身体是HTML为内容，人的衣服为CSS样式，但是，这样的人只是一个静态的人，实际的人其实是具备行为的，比如天冷了要加件衣服，天热了要脱衣服。这其实就表示动态处理内容（Document）的能力

那么，如何学习这3件套呢？

OK，其实要学好一个东西，首先要理解它的精粹，然后围绕着精粹进行展开，就比较容易融会贯通帮助学习提高效率
HTML，其实HTML要按两个部分来分，HTML5之前的HTML和HTML5，为什么要这么分呢？因为HTML5这个版本在整个版本的HTML中的更新是一个跨时代的里程碑式的版本，里面涵盖了很多现代式Web应用和移动Web应用的特性，所以HTML5的东西要单独放到后面再讲，一步一步来嘛。

工欲善其事，必先利其器。找个好的代码编辑器吧，这样写代码就更加有效率了，写出来的代码也支持自动格式化，也比较美观，暂推荐Sublime配合其丰富的插件，当然其实使用Visual Studio Code也不错

说到HTML的学习，有哪些比较重要的资源呢？我觉得对于新手来说，HTML基本上没必要看书，主要去w3cschool和MDN这两个站点去学习就完全够了。那么HTML包含哪些重要的部分已经怎样的学习步骤呢？我大概列一下

1. 熟悉大部分的HTML元素，布局元素（div table p ul ol等），表单元素（input type），知道每个元素是干嘛用的
2. 知道对HTML元素进行分类，知道行内元素和块级元素有什么区别。有哪些块级元素有哪些行内元素
3. 熟悉如何在HTML中引用CSS和javascript，有哪些方式呢？

CSS,那么CSS里面有哪些比较重要的东西呢？我也把CSS3之前的罗列一下

1. 熟悉大部分常用的CSS样式属性元素和属性值
2. 熟悉CSS选择器
3. 熟悉CSS的一些设计，按HTML元素设计按Id设计按Class设计，样式类的复用和继承，可以找一个不错的网站，使用浏览器开发工具看看别人的样式是怎样设计的，然后吸取一些经验
4. 深入玩转CSS盒子模型，知道Margin、Padding和Border的区别以及它们各自的应用场景分别是怎样的呢？还有定位、浮动、对齐等

Javascript，其实Javascript发展到ECMAScript 6版本之后很多东西都和原来不一样了，但是考虑到市场上大部分还是原有老版本的Javascript，况且作为学习必须从原来的版本开始学着是必须的。

等一下，Javascript已经进入编程的范畴了，所以，需要直接进入Javascript编程吗？不！我还是讲讲编程的东西吧，让从来没有接触编程的人大致体会一下编程是个啥子东西呢？所以，下篇见！