010-67952968
Web前端通俗的叫就是网站前台，前端的主要职能就是通过前端技术做出来可以展现给用户浏览的网页，它表现的载体为PC端、H5端等浏览器。在互联网大爆发的环境下，前端技术应运而生。
前端飞速发展的这些年的光景，足以让人眼花缭乱。从最初前端只负责写静态页面、纯粹的功能展示；发展到Ajax使得浏览器客户端可以更加方便快捷地向服务器发送数据信息；发展到Jquery时期面对浏览器兼容性问题；到HTML5规范标准；到Node.js事件循环的异步I/O框架；到Angular、Vue、React主流的三大框架；再到最近的小程序时代......
如今前端已经形成了一个庞大的技术系统。以Git为代表的代码管理仓库；NPM和Yarn为代表的包管理工具；ES6及Babel和TypeScript构成的脚本体系；HTML5、CSS3和相应的处理技术；React、Vue、Angular为主流的框架；Webpack为代表的打包工具；Node.js为基础的Express。
前端技术的不断发展，带来的不仅仅是推动了行业的发展，也同样对社会、对互联网的发展起到了必不可少的作用与地位。
Web前端虽然起步比较晚，但是发展势头迅猛。从发展初期到现今，在各种开发技术、新框架、新标准、种类繁多的JavaScript开源插件的情况下，很多互联网公司已经开始注重web前端开发了。现在各大互联网公司的购物网站、旅游网站等等已经进行使用HTML5新特性进行重构。然而不仅仅是功能性的开发，现在也很注重用户的交互体验和视觉享受效果。所以可以说Web前端的开发的好坏可以直接影响到用户的体验舒适度。
那么web前端开发到底有哪些基础必备的语言？现如今在使用哪些流行框架、语言以及形式呢？他们又有哪些重要知识和底层原理呢？这也是我觉得有必要对这些进行一个研究说明的理由。这也代表着web前端发展到今，如今又在流行着什么样的开发技术，也算是在整理一份相对来说范围较广但是内容较为基础的一篇文章吧。
这些开发技术又能带来什么样的效果功能以及可以应用在哪些方面，可以在哪些方面进行展示使用。这也是我觉得对web前端开发来说是一个比较重要的部分。既要懂得如何开发，又要懂得可以应用在哪些领域。这样才可以说作为一个web前端开发人员的职业素养。
传统的开发方式是以服务器端为主，而Web前端开发为辅，所以也可以说是后端开发的一部分。那么现在的Web前端开发却远远不止如此，甚至可以说与当初的境地截然相反。客户端为主流的形式已经发展迅猛起来。
除了HTML+CSS对于页面网站进行排版布局之外呢，还有至关重要且最为基础的JavaScript作为核心脚本语言进行对页面逻辑以及样式的开发与实现。我觉得可以说Web前端开发的主要核心技术就是HTML+CSS+JavaScript。
那么Jquery也就是通过简化了JavaScript脚本语言的插件库，是一个快速、小型、功能丰富的插件库。简化了JavaScript脚本语言并借助这种易于使用的API实现对DOM操作、时间处理、Ajax等的实现。Zepto与Jquery同理，API相似，不过主要用于移动端开发。
现在主流的三大Web前端开发框架：Angular、Vue、React以及微信小程序都是基于JavaScript脚本语言进行开发并基于此研究出各种新框架。只是每个框架的开发底层原理并不相同，但是在此基础上都对JavaScript进行了极大的优化和改进。
主要围绕Web前端开发技术进行展开，针对发展历程、开发工具、自动化构建工具、核心技术和三大主流框架等进行开展。再对Node.js这个可以让JavaScript运行在服务器上且可以与后端等服务端语言平起平坐的脚本语言进行简单的介绍。最后会对Web前端的应用领域和未来发展方向进行阐述和展望。可以对Web前端开发有一个比较全面的了解。
首先需要解释一下Web，也是我们都知道的，它是万维网的意思，全称为：WorldWideWeb。Web是运行在互联网上的一个系统。Web是通过HTML来描述信息，通过URL定位信息，通过HTTP请求信息，构成了三大核心体系结构，支撑着web的运行。也就是说，客户端通过URL找到网站，发送HTTP请求，服务器接到请求后并返回HTML页面。
1994年，Mosaic浏览器的开发人员创建了网景公司（Netscape），为了方便科研人员查阅资料，开发出浏览器：Navigator （最终命名）。
这个时代的每一次事件操作都需要等待浏览器的长时间响应，并且开发人员是大都数是不分前后端的，是一体的。都是从后端收到浏览器的操作请求之后，发送HTML静态页面到浏览器。这时候的网页都是“只读”的，数据信息流只能从服务器到客户端的单向流通。由此进入了Web1.0时代。
在这个时代发展的同时，微软等公司为了占据市场份额，也纷纷开发出针对自家浏览器的脚本语言。虽然在后期出现了比较统一的ECMAScript标准规范，但是浏览器优先于ECMAScript标准规范流行开来，成为事实。此时形成了HTML是内容，CSS是表现，JavaScript是行为的开发模式。
1998年Ajax的出现，Web前端从单单展示静态页面发展到动态页面、在前端可以进行数据处理、以及与用户的交互。这促进了 Web 2.0 的发展。
之后的第二次浏览器大战使得浏览器兼容成为了开发人员的困扰。为解决各大浏览器的兼容问题，Jquery等插件相继产生，尤其是Jquery最为领先，成为各大网站的标配。
由于浏览器呈现的数据量越来越大，网页的交互行为也越来越多，JavaScript的弊端也越来越明显，尤其是操作DOM，会使得页面速度越来越慢，越来越卡顿。
2009年，Node诞生。根据V8引擎开发了基于时间循环的异步I/O框架-Node.js，不仅仅拓展了JavaScript的无限可能性，还可以让前端开发人员用熟悉的语言来写后台系统，用同一语言可以实现全栈开发的可能。
MV* 等架构在前端逐渐使用起来：AngularJS 、React 、Vue，占据了现在前端开发的半壁江山。随着MV* 等架构的出现，也导致了单页面应用的出现。
随着IOS和Android 智能手机的广泛使用，前端对于跨端需求也日益渐增，使得对HTML5特性的支持力度也逐渐加强。并且加上微信小程序、支付宝小程序的发展，有更多的一套代码可以实现多端使用的框架也越来越受各大公司的欢迎。
notepad++：支持27种编程语言，内置支持27种语言的高亮显示，是一款小巧强大的编辑器。
Sublime Text：是我入门使用的第一款编辑器，现在还在我电脑安装着，不过后面接触的编辑器多了就慢慢不用了。优点是在JavaScript文件中会有颜色可以区分出方法、命名、参数和多重选择并重命名等等。
Visual Studio Code（简称：Vscode）：中文版是微软推出。支持前端多种框架的语法和很多便捷强大的插件下载、安装方便，也免费。是我一直习惯使用的编辑器。
Webstorm：是jetbrains公司必博首页旗下一款JavaScript 开发工具，旗下还有很多适用于各类语言、技术的软件，简直是技术人员的天堂。是多数前端开发人员最喜欢的编辑器之一，功能比较强大而且比较智能。
前端发展迅猛，层出不穷的框架技术为了提高前端的开发效率不断涌现。比如Vue框架将每个页面文件（.vue）都是一个模块，里面集合了基于HTML、CSS和JavaScript开发的新用法，开发完成之后并不能直接运用，需要将其中基于HTML、CSS和JavaScript开发的新用法进行转换拆分。这个转换拆分就需要构建工具来进行，将开发源代码转换成可以执行的HTML、CSS、JavaScript代码文件，还可以对代码文件、图片进行压缩处理，提取文件中的公共代码，将项目中的模块化等等。自动化就是使用一系列的流程对上述描述进行自动化执行。使用程序来完成日程琐碎的重复操作，提高前端的开发效率，解放了开发人员的生产力。
Webpack 是一个打包模块化的工具，在Webpack里一切文件皆模块，通过 loader 进行文件的转换，通过Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。
应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。可以通过配置 entry 属性，来指定一个入口起点（或多个入口起点）。
告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。通过在配置中指定一个 output 字段，来配置这些处理过程。
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
这段代码代表的意思可以理解为：“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 .txt 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”
可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
Webpack 是一个庞大的 Node.js 应用。对于 Webpack 的使用者而言，它是一个简单而强大的工具； 对于 Webpack 的开发者而言，它是一个扩展性的高系统。Webpack 之所以能够成功，我觉得是在于它把复杂的实现过程隐藏起来，只是给用户暴露出来的是一个简单的工具，能让用户快速达成目的。 同时它的整体架构设计很合理，扩展性较高，开发扩展难度不高，所以可以让 Webpack 成为一个几乎能胜任任何场景的工具。
W3C标准包括：HTML（结构标准）、CSS（样式行为标准）、JavaScript（行为标准）。
行内元素：表示一小段的内容，默认会在一行显示，它的宽高会默认被内容所撑开，所以默认是不支持宽高属性的。比如、、、、......它们的默认属性是display:inline。
HTML标签除了一些常用的标签，还有表单。表格、音视频、Canvas等标签。
— 这个元素指定了当前文档使用 UTF-8 字符编码。—(https:\/\/developer.mozilla\/zh-CN\/docs\/Web\/HTML\/Element\/title \o HTML元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。) 元素。这个元素设置页面的标题，显示在浏览器标签页上，同时作为收藏网页的描述文字。
上述代码中的第一行显示有，这行代码表示的是在浏览器对文档进行解析的时候告诉它，我这个文档采用的是什么标准文档，然后浏览器会根据这个标准文档针对这篇文档进行解析。但是DOCTYPE 的格式不正确或者压根没有这一行代码的话，肯定就会以兼容模式来运行了。
浏览器的文档解析是分为两个模式的，一个就是标准模式，另一个是兼容模式，两者又有很大区别。兼容模式下，浏览器会模拟老式浏览器（比如：IE6）对文档进行解析，这样的话，不会因为一些老旧网站而不能正常访问的问题；那么标准模式就是浏览器会依据最新的标准来解析文档。
盒模型有IE 盒模型（border-box）、W3C 标准盒模型（content-box）两种。标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同。
服务热线 010-67952968 