小菜的前端编程散谈（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编程吗？不！我仍是讲讲编程的东西吧，让历来没有接触编程的人大体体会一下编程是个啥子东西呢？因此，下篇见！