概述
前一篇我们讲述了一些常用的工具，接下来我们要正式开始实践了。前端是与用户最直接接触的编码形式，它包括了界面的展示，动画，交互等功能。拿手机淘宝来说，它不仅仅是iOS开发，它里面也有商品宝贝的展示是前端，红包雨的游戏也是前端，前端在近几年已经泛化成大家口中的大前端，可见它的覆盖面极大。这篇文章我们简单介绍一些前端基础。
HTML
How To Make Love. 哦！不！ 是超文本标记语言（Hyper Text Markup Language），既然是标记语言，那么它就是用来标记东西的，没有其他作用。如同你在课本上给一个公式标记了一个重点符号一样，它不会影响公式的内容，但是当你翻书的时候，你看到这个标记了，你知道这是一个重点。
下图的下半部分是百度的HTML结构图，HTML是由很多个标签和文字组成的。
标签：
标签的语义化：标签依然不影响里面的内容，那么它存在的意义就是标志它内容的意义，方便人和浏览器阅读。人阅读好理解，浏览器阅读的意思是浏览器知道这个标签表示什么意思，会用一些特殊的方法展示标签里面的内容，比如当一个文字被“链接标签”包住后，文字就会变成蓝色，表示它是一个链接。看的出来，给标签起一个好名字非常重要。但是如果你不会起名字怎么办呢？不要担心，现在的规范已经总结出来几乎你能用到的99%的标签名称，写多了你就会记住。不过不要只记字，不管它的含义。比如div标签表示的含义是division，一个分区，将一个页面这一部分划分出来。
CSS
如果说HTML是标记内容标志的话，那么CSS是对内容的装饰，让内容更加美观。比如文字的剧中现实，红包从右上角到左下角的滑动都是CSS的作用。
JS
把一个网页比作人的话，HTML就是骨架，CSS是皮肤，JS便是心脏，让网页充满活力。有了JS便可以与网页进行复杂的交互。
JS，JavaScript，它与Java并没有什么太大的关系，要说关系的话可能只有0.1%吧，不过无所谓了2333。
本文不是要讲解怎么写一个网页（至少这一篇不是），那就讲讲平常学习不会注意到的吧。
那么我们来讲讲ECMAScript，What？ECMAScript又是什么鬼？！ECMAScript是一套可以在浏览器里运行的语言规范，那么如果我发明一个语言，只要它遵循这个ES规范，它也可以在浏览器里运行了。Javascript就是遵循这个规范的语言，同时微软近来也开发了一套遵循ES规范的语言Typescript，它比Javascript更加强劲，近来抢占了不少Javascript的份额。
最常使用的是ES6规范，还有更新的ES7、ES8，如果学习使用JS的话可以从ES6语法开始看，它更偏向于面向对象的风格，更好理解
待续。。。
网络请求
上面的HTML+CSS+JS构成了一个网页的基本组成，然后浏览器可以理解这些文件并根据文件渲染出用户看到的页面。那我们就从浏览器的运行方式来简单阐述下网络请求。
一道常见的面试题：当用户从浏览器地址栏输入了www.baidu.com后发生了什么？
(1) 输入域名，按下回车（深入的话可以说出来当按下键盘的一个键操作系统发生了什么）
(2) 浏览器根据DNS获取IP（DNS概念，浏览器缓存，服务器节点，查询方法）
(3) 浏览器根据DNS获取到的IP与web服务器建立TCP(传输控制协议)连接（TCP概念，三次握手）这一步完成后，浏览器就和服务器建立了连接。
(4) 建立连接之后就可以根据地址栏的协议（比如http就是一种协议）发送一个请求了（协议的概念，http概念，https概念）
(5) 浏览器根据服务器返回来的数据进行处理，此时浏览器与服务器断开连接。（四次挥手，http状态码）
(6) 浏览器根据获取到的文件（一般就是html）解析，解析过程中遇到文件里面需要下载js或者css的时候，会重复2-6的步骤下载新的文件，解析完毕后浏览器会生成对应的树型DOM结构（HTML页面一般都是树形结构），然后渲染成实际的页面。
这样粗略的讲了一套浏览器的网络请求，是为了更有代入感的去理解网球请求是什么。网络请求总体来说绕不过“OSI七层模型”或者“TCP/IP参考模型”，他俩基本是一个东西，理解起来方向不同而已。我们以“TCP/IP参考模型”为主讲解下其中的概念。
TCP/IP参考模型一共分四成：应用层、传输层、网络层、链路层。
- 链路层：简单理解为我们看得见摸得着的网线，光缆。负责数据传输最基础的物质。
- 网络层：负责这个网络的之间的节点信息，我们的IP信息就在这一层存着。
- 传输层：我们知道IP信息之后就要建立起连接，那么这一层的作用就是把网络层所表示的独立的IP节点连接起来。上文说的TCP就是这一层的一项协议。
- 应用层：连接起来之后，我们也要约定用什么方式联系吧。比如中国和美国就是网络层中的IP节点，飞机就是传输层中的TCP协议，那么把人从中国送到美国之后发现不会说英文岂不是很尴尬。应用层就提供了一些协议告诉连接的两端我们使用什么方式说话，是英文还是中文，这样把人送过去也是有意义的了。
网络请求不止是浏览器的请求这么简单，这里只是一个介绍，难的就像双十一高流量的网络请求是如何平稳处理的，又会设计到很多概念，但万变不离其中，网络是计算机学生必须打好基础的一门课，无论以后的工作方向是什么。
打包
打包是指将开发中的大量的前端文件合并成几个文件，并进行优化处理（比如压缩代码），这么做的原因有：
- 给浏览器解析的代码要尽可能的少，这样浏览器才能更快的解析并渲染出来
- 代码体积小，网络传输快
- 打包过程中可以做一些代码层面的处理，这样也意味着可以简化一些前期开发的操作
常用的也是目前最火的是webpack，它可以将文件压缩，分类，也有插件对代码进行预处理。而初学者也许对这些概念太抽象，没关系，推荐你们在理解了HTTP+CSS+JS之后，可以直接使用React或者Vue进行开发，市面上有很多成熟的工具把你们做打包的工作，等做完一个项目之后，你们就会有感觉了。
SSR与SPA
SSR：Server Side Render 服务器端渲染
SPA：Single Page Application 单页面渲染
单独把这两个拎出来是因为它们可以帮助你们装逼更好理解前端的工作原理。
SSR通俗理解是页面的解析生成之类的都放在远端的服务器上，服务器解析生成好一个html后发送给客服端。SPA就是把一段略显空白的html发送给浏览器，浏览器在从这html中发现要下载某个js文件（a.js），下载完a.js之后浏览器根据a.js文件中的操作开始渲染这个页面。
显而易见这些操作都放在了浏览器（客户端）上面，减少了服务器的负担。但带来的影响是无法被爬取到这个页面的信息，因为爬虫只能解析从服务器端获取到的文件，SPA产生的页面对爬虫来说就是空白，有用信息就会很少，如果无法被爬取，这样搜索引擎就很可能不会知道这个页面是做什么的，然后就无法给它一个很高的排名。至于即决办法可以你们自己调研一下～
URL与RESTful
URL（Uniform Resoure Locator）是统一资源定位符，它表示每个资源（比如文件）在网络中的位置
RESTful是一种设计风格，表示面向URL的一种网络服务接口书写方式，与他同时使用的大部分是HTTP方法，比如GET，POST。在此我们先引入概念，后续开发中我们会深入了解这两个在开发中的意义。