Web前端设计开发工具集（框架、验证器、编辑器）

什么是前端开发

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。前端开发主要关注用户体验。

前端开发的技术

超文本标记语言（HTML）

HTML 是基本的前端技术之一，也是前端开发的核心，是所有网站的标记。HTML 元素可帮助您向网站添加表单、按钮、容器和其他功能。

级联样式表（CSS）

CSS 是另一种核心前端技术，有助于为先前创建的HTML网页提供额外的样式。CSS 规则使网页或 Web 应用程序更具交互性和响应性。

JavaScript （JS）

JavaScript 是一种编程语言，对于前端开发人员来说是至关重要的。它允许动态更改网站或 Web 应用程序的内容。

前端开发的工具

代码编辑器

Sublime Text 是一款功能强大的文本编辑器，可在Windows，macOS和Linux上使用。与其他文本编辑器不同，Sublime Text具有快速选择和修改文本的功能。它原生支持许多编程语言和标记语言。用户可以使用主题对其进行自定义。

Atom 是由GitHub开发的源代码编辑器，可以用作IDE的开源工具。具有跨平台功能，可以在主要操作系统上运行。提供了许多 GitHub 包，用于集成和执行拉取和推送请求等操作，并帮助解决合并冲突。

其他代码编辑器推荐：Notepad++、Visual Studio Code、Brackets

版本控制系统

Git 是一个分布式版本控制系统，可跟踪任何一组计算机文件中的更改，通常用于协调在软件开发期间协作开发源代码的程序员之间的工作。其目标包括速度、数据完整性以及对分布式非线性工作流的支持。

SVN 是subversion的缩写，是一个开放源代码的集中式版本控制系统，通过采用分支管理系统的高效管理，简而言之就是用于多个人共同开发同一个项目，实现共享资源，实现最终集中式的管理。

其他版本控制系统推荐：Concurrent Versions System (CVS)、GitLabCSS

预处理器

Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。

其他CSS预处理器推荐：SCSS、Stylus

Javascript框架和库

jQuery 是一个JavaScript库，旨在简化HTML DOM树遍历和操作，以及事件处理，CSS动画和Ajax。它是使用宽松的 MIT 许可证的免费开源软件。

React 是一个用于构建用户界面的 JavaScript 库。换句话说，React 用于构建包含网页、布局和内容的网站前端。React由Facebook开发，旨在为Web创建现代，快速和交互式的用户界面。React 是声明式的、基于组件的、可扩展的 JavaScript 库。

其他Javascript库推荐：D3.js、Vue、Angular

HTML代码验证器

W3C验证标记服务 是验证HTML代码最常用的服务。可以通过指向URI(通用资源标识符)或上载包含源代码的文件或直接在其网站上输入代码来验证代码。

HTML Validator 是一个免费的在线开发人员工具，用于根据W3C标准(称为HTML linter)立即验证HTML代码。支持部分 HTML 代码验证。

其他HTML代码验证器推荐：HTML Lint、HTML Strip

在线编辑器

CodePen (代码笔) 一款前端所见即所得的工具，可以在线编辑制作前端页面，所见即所得。同时网站提供所有常见的 js、css 库，并且支持流行技术(如 SASS)，免去了自建平台的麻烦。

SovitJs 一个可视化的在线编辑平台，可以在线编辑制作可视化大屏页面、工业Web组态界面、物联网3D场景界面，平台提供多种模板及组件，拖拉拽即可轻松实现，并支持动态数据绑定，节省了开发人员繁杂的编码时间及开发成本。

Jsbin 是一种开源的协同Web开发调试工具。其优点是可以快速的提供前端需要的各种开发环境，快速地编辑代码，并实时显示页面最终的效果。

其他在线编辑器推荐：Runjs、Codeanywhere

作为前端开发者，学会使用合适的开发工具，对于节省开发时间和成本来说真的非常重要，因此，今天我跟大家分享不同类别的前端Web开发工具，希望对大家有所帮助。