前端语言的基本能力
一、HTML、CSS、Javascript的简单理解及关系
1、HTML
HTML的主要作用是构建框架结构，包含控制内容布局，为web工程师提供一个层次结构。它是所有web页面的基始。
2、CSS
CSS(层叠样式表)，它用来给网站添加样式。具体包含给元素添加样式、适配不同的屏幕、尺寸以让网站具备响应式的特征。是网站的外表和体验最重要的一个工具。
3、Javascript
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能。它增加了交互体验，还可以处理复杂的函数、一些特性，使代码可以保证更高的效率以及可用性。
4、三者的关系
一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹。
下图则更有趣地展示了三者的关系:HTML为我们构造了比如说像眼睛、嘴巴的实体，HTML加上CSS可以画出脸蛋加上嘴巴和眼睛的样子，而加上Javascript以后，我们就可以做一个小游戏了，鼠标可以点选人物的外貌，键盘可以调整小圆的方向等等。三者结合起来形成一个系统才是完整的，这三门语言都是同等重要的，缺一不可。
二、HTML、CSS、Javascript的简单介绍
1、HTML
HTML是三剑客中最基本的语言。HTML的最小单位是使用左右尖括号(<>)包裹起来的一串字符，从形式上看可以称作标签，在浏览器中则往往称之为元素。HTML本质就是标签构成的文本文件，通过浏览器、容器，将其集齐为具体的元素，完成文本到页面内容的转化过程。
2、CSS
CSS是一门语法非常简单的语言，只需要一个选择器selector、跟上包含多个declaration的大括号，如下图所示。每个declaration是由键值对组成的，根据需要使用。
CSS语法简单，但要运用得当也是不容易的。首先需要把HTML的结构设计的非常合理，并设计配套的选择器方案。
CSS提供的选择器有很多，比如通用选择器、元素选择器、类选择器、ID选择器、属性选择器、分组选择器、组合器、伪选择器等等。
3、Javascript
3.1 Javascript的设计特点：
(1)借鉴C语言的基本语法；
(2)借鉴Java语言的数据类型和内存管理；
(3)借鉴Scheme语言，将函数提升到“第一等公民”的地位；
(4)借鉴Self语言，使用基于原型(prototype)的继承机制。
3.2 Javascript的功能
Javascript通用的一些作用有：校验用户输入、简单的客户端计算、交互控制、平台无关性、处理数据和时间、生成HTML内容、检测用户浏览器等等。
现在的Javascript包含快捷作用域变量Let/Const、箭头函数。字符串模板、扩展的一些数组方法、支持一些默认参数包括变量重命名等等。
三、HTML、CSS、Javascript在浏览器中是如何运转的
首先浏览器一般包含两种引擎：渲染引擎和Javascript引擎。
渲染引擎主要负责加载页面，根据HTML来生成dom树的结构，接着获取CSS的资源并构建CSSOM树，结合DOM的结构特性和CSSOM的样式特性，渲染引擎会计算最终页面的排版，并推断其中哪些部分可以作为一个整体并为一个图层，这样渲染的效率会更高，最后把页面绘制出来。整体流程如上图所示。
Javascript的本质也是一段文本，它是通过解释器才能运行。JS引擎主要是对JS代码进行词法、语法等分析，通过编译器将代码编译成可执行的机器码让计算机去执行。以V8举例，整体流程如上图所示。
四、总结
通过此次学习，对耳熟能详的三剑客的了解终于不再止于知晓名讳，不过HTML、CSS、Javascript是前端入门学习的三大基础，除了理解外后续还需要更深入的学习如何使用。
