前端在计算机领域中还是一个非常重要的一个存在的，当然也是有难度的，不是那么容易。很多小白，想要学习前端，不过不知道怎么开始，所以下面我们就给大家分享一些关于前端的入门知识，有需要的可以看看。

前端学习资料1

01工具篇

工欲善其事，必先利其器，在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，达妹也要给代价要推荐其他的一些工具，才能够让你在学习的道路上更加顺畅。

1、WebStorm

不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。

2、goole

一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候某度出来的东西重复性很大，最重要的是垃圾信息很多，在某度找不到的答案，在这里很容易找到，Google 也是达妹的必备搜索。

3. Github

全球最大的开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧，应该避免重复造轮子，这里能够找到你需要的工具或代码。

4. Markdown

Markdown 轻量级标记语言，简洁的语法，达妹认为人人都应该掌握，在用 world 时的场景，每次写完文章之后，不得不话费很多时间进行格式的排版，使用它你就可以避免这些烦恼。

02HTML篇

一些准备就绪之后，开始我们的学习之旅，首先先从 HTML 开始。

HTML名为「超文本标记语言」，是整个页面的结构基础，它承载了我们的页面内容。

w3school 教程：内容非常的基础，适合小白学习，对 HTML 有一个入门了解。

freeCodeCamp：一个非常好的入门网站，采用闯关的模式，就像游戏打怪升级一样，非常的有乐趣，准备自学的小伙伴不妨试试。

03CSS 篇

HTML 承载了页面的内容，但是有时候会略显单调与「丑陋」，CSS 的作用就是为这些内容加上样式，就像一个美女也要有漂亮的外衣去修饰才会更加漂亮，「人靠衣装马靠鞍」，网页的内容也是需要穿上一件漂亮的外衣去吸引用户。而 CSS 则完成了这个装饰。

芯晴素材网-网页特效代码，是集各种网页素材以及网页源码为一体的面向开发人员的一个网页素材网站。

前端网页制作过程中所涉及到的任何特效代码，都可以来这里搜索，非常方便使用，在你还不会自己写代码时，先看看别人是如何写这种动效代码的，鼠标特效、图片切换、导航、鼠标、图片轮播、文字滚动、css、菜单、图片放大等特效代码全部都有。

04JavaScript篇

有了 HTML 与 CSS，网页也就有了内容和样式，但是会缺少与用户的互动，所有的内容都静静的躺在那里死气沉沉。就好比一个美女穿着漂亮的衣服在你面前一动不动好像也没有什么吸引力，但如果又唱歌，又跳舞，还向你抛媚眼，那可真就把持不住了。JavaScript 就是给网页添加这样的「行为」。

前端学习资料2

一、基本环境准备

1.1、在线文档

W3School

1.2、编辑器

根据个人爱好，不过更推荐用 VS Code

Microsoft出品，轻量但强大，针对于编写现代Web和云应用的跨平台源代码编辑器。可以在Mac OS X、Windows和 Linux等操作平台使用。

具有对JavaScript、TypeScript和Node.js的内置支持，并具有丰富的其他语言(例如C++，C#，Java，Python，PHP，Go)和运行时(例如.NET和Unity)扩展的生态系统。

优点：免费开源，轻量流畅，功能丰富，支持插件，界面简洁，智能代码补全，运行速度很快

1.2.1、VS Code插件安装

为VSCode安装以下插件，便于我们进行更好的开发工作:

Chinese (Simplified) Language Pack for Visual Studio Code：中文(简体)语言包(PS1：不完全显示中文，但是大多数都会译为英文;PS2：喜欢原生态或者英文OK的话，可忽略)Ayu：简单的主题与明亮的颜色vscode-icons：好看的图标Live Server：A Quick Development Live Server with live browser reload，即提供一个live服务器，并且支持代码与浏览器之间的实时同步刷新(PS：这样我们在写前端代码时就能实时看到效果了)二、HTML字符实体和常用标签

网页的大标题

前端学习资料3

一、HTML

1.对 HTML 语义化的理解

见标签知其意思 header main nav aside footer h1-h6 ul li

优点：结构清晰、方便搜索引擎搜素(seo)、方便理解维护

2.区别：src 和 href

src

比如常见的 这里的 src 所指的是这个图片的所在的位置路径，script 和 iframe 也是，src 被解析的时候，会进行下载并编译，同时会暂停该文档其他资源的下载和处理，所以 js 文件的载入最好在 body 中，而不是在 head 中。

href

href被添加，元素会被识别为 css 文件进行处理，且不会停止其它资源的运行。所以建议用 link 加载 css 文件，而不是 @import。

常用的有：

超链接

引用css样式

3.DOCTYPE 的作用

作用：DOCTYPE 是文档类型 document type 的缩写。主要作用是告诉浏览器的解析器使用哪种 HTML 规范来解析页面。而如果 DOCTYPE 缺失，或形式不正确，会导致 html 文档或 HTML 文档不是以标准模式(浏览器对页面的渲染具有统一的规范)而是以混杂模式(不同浏览器有不同的的页面渲染)运行。

4.HTML5 的新特性

简化了文档声明，HTML5 的文档声明只需要

简化了编码声明，只需要

删除了一些能用 CSS 代替的就标签，比如

增加了一些新标签，改善文档结构的

增加了一些新的 JavaScript 的 API ，比如地理定位、请求动画帧、离线存储等

配合一些框架，例如 cordova 和 react 等，可以开发基于 HTML5 的移动应用。

5.script 标签中的 defer 和 async

作用：平常的 script 标签如果直接使用， html 会按顺序下载和执行脚本，并阻碍后续 DOM 的渲染。如果 script 发生延迟，就会阻碍后续的渲染，使得页面白屏。

defer

异步下载文件

不阻碍 dom 的渲染

如果有多个 defer 会按顺序执行

执行顺序：在文档渲染后执行，在 DOMContentLoader 事件调用前执行。

2.async

异步下载文件

不影响 dom

如果有多个 defer 谁快先执行谁

推荐的应用场景：

defer：如果你的脚本代码依赖于页面中的 dom 元素(文档是否解析完毕)，并且也不会产生其他脚本需要的数据。

async：如果你的脚本并不关心页面中的 dom 元素(文档是否解析完毕)，并且也不会产生其他脚本需要的数据。

6. 行内元素 块级元素 空元素

行内元素：a \ b \ span \ input \ img \ strong \ br \ em \ big \ small

块元素：div \ ul \ ol \ li \ h1-h6 \ p \ dl \ dt \ address

空元素：img \ input \ link \ meta

7.meta 标签

meta 元素被用于规定页面的描述、关键词、文档的作者、最后的修改时间以及其他元数据。标签始终位于 head 元素中。

meta 属性：必选属性 content-进行描述说明的， 相当于键值;可选属性 http-equiv、name 和 scheme, http-equiv-添加 http 头部内容，name-浏览器解析

包括：

①charset charset定义使用的字符编码

②SEO

#网页关键词

#网页描述

③viewport

8.JPG和PNG的区别

1.JPG是有损压缩格式，PNG是无损压缩格式

2.JPG图片没有透明背景，PNG有透明背景

前端学习资料4

前端入门知识主要包括以下几个方面：

HTML：HTML 是网页的基础，你需要了解它的基本结构、标签、属性等。HTML5 是目前最常用的版本，它引入了一些新的特性，比如视频和音频标签、画布(Canvas)等。

CSS：CSS 负责网页的样式和布局。你需要学习如何选择元素、设置样式、使用盒模型、布局等。此外，现代前端开发中常用的 CSS 预处理器(如 Sass、Less)和 CSS 框架(如 Bootstrap)也是你需要了解的。

JavaScript：JavaScript 是前端开发的灵魂，它负责实现网页的动态效果和交互性。你需要学习 JavaScript 的基础语法、DOM 操作、事件处理、异步编程等。同时，了解 ES6 及其以上的新特性也是很有帮助的。

响应式设计：随着移动设备的普及，响应式设计变得越来越重要。你需要学习如何使用 CSS 媒体查询、弹性布局(Flexbox)或网格布局(Grid)等技术来实现响应式设计。

前端开发工具和框架：熟悉一些常用的前端开发工具(如 VS Code、Chrome 开发者工具等)和框架(如 React、Vue、Angular 等)可以大大提高你的开发效率。这些工具和框架都有其特定的学习曲线，但一旦掌握，你会发现它们非常强大和方便。

UI/UX 设计基础：虽然不是必须的，但了解一些 UI/UX 设计的基础知识可以帮助你更好地理解用户需求，从而创建出更友好、易用的网页。

版本控制和协作：Git 是目前最常用的版本控制系统，你需要学习如何使用 Git 进行代码管理、协作和部署。此外，了解一些常用的协作工具(如 GitHub、GitLab 等)也是很有帮助的。

以上就是前端入门的一些基础知识，当然还有很多细节和深入的内容需要你去学习和探索。但只要你掌握了这些基础知识并付诸实践，你就可以开始你的前端之旅了!

前端学习资料5

1.JS为什么单线程一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。

而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具体以哪个线程为主就是个问题了，线程的调度问题是一个比较复杂的问题。

HTML5新的标准中允许使用new Worker的方式来开启一个新的线程，去运行一段单独的js文件脚本，但是在这个新线程中严格的要求了可以使用的功能，比如说他只能使用ECMAScript, 不能访问DOM和BOM。这也就限制死了多个线程同时操作DOM元素的可能。

2.使用css写出一个三角形角标

元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。

3.水平垂直居中我一般只使用两种方式 定位 或者 flex，我觉得够用了。

父级控制子集居中

4. css一行文本超出…

5.多行文本超出显示…

6.IOS手机容器滚动条滑动不流畅

前端学习资料6

第一阶段：前端入门网页基础

html5+css3→ 页面布局实战(响应式/移动端/pc端页面)

1、 前端入门基础核心必看html+css

这是入门前端最基础的内容。学会后，就能达到初级Web前端工程师水平。熟悉了前端开发的HTML与CSS基础知识，就能够配合UI设计师进行项目布局开发了。

HTML+CSS教程，零基础web前端开发入门必看视频

本系列从概念到具体基础知识点全程干货满满，为前端小白入门找到了很好的学习抓手，可以作为前端开发学习“梦开始的地方”，老师深入浅出的讲解和动画视频解析并用真实的案例巩固知识，学练结合，打好基础，不怕学不会!

2、 页面布局实战

有了第一步的基础知识，你就可以实战各种页面布局了。学会后，更加夯实初级Web前端工程师水平，能够完成各种PC端与移动端网页布局与样式设计实现了。

web前端项目实战之拉勾网(项目上手)

本课程讲的是HTML+css pc端项目实战，通过讲解拉勾网得首页、登录页等，学完即可进一步学会应用HTML+CSS，掌握页面布局和标签、属性等的使用，让你从小白进化为真正的网页美化师。

第二阶段：前端入门开发内功

javascript(基础+进阶)→ ES6→ Ajax→ Promise→Git→node.js→PC端全栈项目开实战

1、javascript(基础+进阶)

JavaScript全套视频教程(10天学会Js，前端javascript入门必备)

本视频主打内容最全最新，包括JS基础，基于面向对象开发实战，前后端交互实战，jQuery与BootStrap，以及CSS预处理器Sass，打造一站式知识长龙服务，适合有HTML和CSS基础的同学学习。

2、ES6

ES6的发布是大前端的里程碑。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 。

最新版Web前端ES6-ES13教程，JavaScript高级进阶视频教程

本视频主打内容最全最新，包括ES6-ES13所有新特性 以及 实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。

3、 Ajax

Ajax技术可以使网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载(刷新)整个页面。

web前后端交互Ajax从入门到精通全套教程

本视频主打内容最全最新，包括Ajax XHR基础语法、fetch和axios使用、以及 跨域解决方案，打造一站式知识长龙服务，适合有JS基础的同学学习。

4、 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象 。

web前端进阶Promise js从入门到实战全套教程

本视频主打内容最全最新，包括Promise基础语法、手写Promise、async与await 以及 实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。

5、 Git

前端Git教程，从入门到实战迅速上手git

项目管理工具Git教程上线啦～一看就会，上手不废的最新版从入门到实战全套教程，视频包括Git常用命令、Git分支管理、团队以及跨团队协作、VSCode集成Git，稳稳拿捏Git

6、 node.js

前端Node.JS教程,快速入门nodejs全套完整版

本视频你将从认识Nodejs开始学习npm、nrm、yarn;内置模块、路由、express、MongoDB、身份认证、koa、MySQL、Socket、Mocha等知识点全覆盖，学完本系列视频可以让前端程序员插上后端的翅膀，真正成为一名全栈工程师，助力同学横向全面发展。

7、 PC端全栈项目开实战(2选1)

PC端原生JavaScript项目案例实战开发

本PC项目实战视频是基于JS开发，强化ES6-ES13的项目应用，打通前后端数据交互，并实战应用周边生态Sass以及Bootstrap, 打造一站式知识长龙服务，适合有js基础的同学学习。

web前端js+nodejs后端express框架博客系统项目实战教程，前后端交互开发毕设项目

本套使用主要教会大家，如何利用nodejs的一个express框架和js开发一个blog项目。教会大家使用js做后端，使用js做前端，成为一名全栈工程师。

适合作为一个课程设计或者毕业设计，最终我们实现了一个完整的博客系统，包括用户的登录、注册，图片上传，文章的发布、富文本编辑器、删除、编辑、修改、列表展示，评论的发布、删除、列表展示。最终实现了用户的文章和评论的后台管理和博客的前台展示和评论功能。

前端学习资料7

学习web前端开发，到底要掌握哪些技术知识点呢?

1、首先HTML和css这两部分非常简单，同时也是前端开发的基础。是所有进入前端开发领域的基础内容。

2、Div布局，DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素

3、了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。

4、html5+css3：移动端的网页制作。在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用Java引擎，现在也是前端的一个趋势。

5、一些框架的应用：angular.js，node.js，bootsttap、vue.js等框架的应用。

6、了解web服务器对Apache的基本配置，并且掌握htaccess配置技巧。

7、web前端开发技术，还需要学习一些seo优化技术，因为前端是经常会和网站接触的。

8、掌握web前端开发技术的同时，适当的学习一些后台开发语言(java，php等)也是一个不错的选择。

上面为大家分析了作为前端开发工程师应该掌握的那些技术知识点，其中服务器和后台开发以及SEO技术及时不能掌握到精通的程度，至少要了解其核心内容。毕竟作为前端和这三个部分有很大的关联性，在工作中会有非常多的配合工作。而自学过程中，很多人都太关注基础知识的学习，例如HTML5、CSS、JS等。忽略了其他的很多方面。导致找工作的时候并不顺利。

自学不仅仅需要明确学习的知识点内容，还要有非常大的毅力以及掌握有效的学习方法。

前端需要掌握什么

1.软件设计

作为前端开发者，你需要有能力将UI设计师给你的原稿制作为一个页面，所以基本的切图和图片操作能力还是需要有的，并不是所有公司都有专门的设计帮你处理图片，大多数时候我们使用的都是Photoshop，所以是你需要学习的软件之一。

2.开发编辑器

第二个需要掌握的技能就是编辑器的使用了，当然如果你说我只用记事本，那就当我没说。身为一名优秀的开发者编辑器肯定少不了，熟练使用编辑器能够帮助我们更高效的开发，常见的例如：Visual Studio Code、Dreamweaver、submit等等。

3.前端代码知识

作为前端开发工程师，前端技术html、css、原生JavaScript这些肯定是少不了的，尤其是现今的HTML5+CSS3更是你必须掌握的，能够创造出更多有趣的页面。

4.前端框架

除了原生的技术之外，一些常用的框架也是你要学习的，比例jQuery、vue等等，都是我们在开发过程中经常会使用到的工具。

5.代码管理工具

除了会开发代码之外，你还需要会部署和管理代码，这个时候git工具就是你最好的帮手了，全世界范围内都在使用它，你再不学习一下是不是就来不及了。

6.开发测试

在开发过程中谁也无法保证哪里就会出错无法运行的情况，所以基础的调试功能我们也要学会，很多前端工程师都喜欢使用Chrome浏览器进行调试，因为里面提供了超级多的开发者工具和扩展工具，超级好用。

除了上面提到的之外，作为前端开发者经常逛一逛技术论坛和贴吧是很有帮助的，看一下大家最近在讨论哪些技术，有什么新的技术能够运用到自己的项目中，只有不断的学习新的技术你才能距离技术大牛更进一步。

前端的发展前景

从疫情暴发到现在，各行各业都开始线上办公，而线上工作就需要有前端后端

从电脑到手机，再到可穿戴设备等一切移动终端都需要有交互式来驱动。

从VR看房、VR装修、AI机器人到手机厂商的智慧大屏都需要前端技术的支持。

如果说以前Web应用更多在“产生”数据阶段，那以后就是如何更好的“展现”数据阶段。

在大数据快速发展的趋势性，数据可视化对前端有很大的影响。

例如SVG，Canvas和WebGL的发展。

不仅要了解浏览器底层技术还要熟悉上层可视化库和可视化应用。

例如：Echarts，HighLights，BI分析工具Tableau

还有就是软件的web化

例如钉钉和VSCode，在UI层大量用到的Web技术

最后一点，交互多样化

近几年图像识别，语音识别，深度学习有了很大的突破，让前端的交互也有了很大的进步。

例如:一下人机对话功能的实现。

WebRTC，通过它，前端可以便捷地处理图像，视频，语音等内容。

总结：未来前端的发展还有很长的路要走，学习大数据相关开发，人工智能，紧跟大趋势。

前端学习资料8

01 JavaScript

JavaScript 应该说是前端吃饭的家伙，深度、广度要兼备。基本上主流的前端框架都是基于 JavaScript 开发的，像 Vue，是由前端大神尤雨溪开源的 JS 框架;像 React，是 Facebook 开发的一款 JS 库。下面这些知识点，是一名前端开发必须要掌握的

JavaScript 知识点

原始值和引用值类型及区别

判断数据类型的常用方法

类数组和数组的区别与转换

数组常见的 API

bind，call，apply 的区别

new 的原理

如何正确判断 this

闭包及其作用

原型和原型链

继承的实现方式及比较

对象的深拷贝与浅拷贝

防抖和节流

作用域和作用域链、执行期上下文

DOM 常见操作方法

Ajax 请求的过程

JS 垃圾回收机制

JS 中的 String、Array和Math方法

addEventListener 和 onClick() 的区别

事件委托

BOM 的 location对象

浏览器从输入 URL 到页面渲染的整个流程

跨域、同源策略及跨域实现方式和原理

JavaScript 中的 arguments

EventLoop 事件循环

发布订阅者模式与观察者的实现

函数柯里化及其通用封装

“”和“=” 以及 Object.is() 的区别

let、const 和 var 的概念与区别

Symbol 概念及其作用

Set 和 Map 数据结构

XSS 和 CSRF 攻击

浏览器进程及重要的线程

为什么 JS 引擎是单线程的

为什么 GUI 渲染线程与 JS 引擎线程互斥

JS 引擎线程与事件触发线程、定时器触发线程、异步 HTTP 请求线程

前端常见性能优化

defer 和 async 的区别

Object.defineProperty 与 Proxy 的区别

单页应用的好处

使用 IntersectionObsever API 监听元素出现在视图

gitflow 工作流

服务端渲染与浏览器渲染

webpack 打包原理

CommonJS 与 ES6模块的差异

箭头函数和非箭头函数的区别

数组扁平化的几种方式

input change keyup 的区别

02 HTML 和 CSS

随便打开一个网页，按下 F12 就可以看到大量的 HTML 和 CSS 代码。一个网页美不美观，能不能得到用户的喜欢，除了 UI 设计，除了 JavaScript 来控制逻辑，剩下就是 CSS 样式了。

HTML 知识点

1、html基本结构

html标签是由 <> 包围的关键词。

html标签通常成对出现，分为标签开头和标签结尾。

有部分标签是没有结束标签的，为单标签，单标签必须使用 / 结尾。

页面所有的内容，都在 html 标签中。

html标签分为三部分：标签名称，标签内容，标签属性。

html标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页

结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内容。

标签的内容是在一对标签内部的内容。

标签的内容可以是其他标签。

2、标签属性

class属性：用于定义元素的类名

id属性：用于指定元素的唯一 id，该属性的值在整个html文档中具有唯一性

style属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定

title属性：用于指定元素的额外信息

accesskey属性：用于指定激活元素的快捷键

tabindex属性：用于指定元素在 tab 键下的次序

dir属性：用于指定元素中内容的文本方向，属性只有 ltr 或 rtl 两种

lang属性：用于指定元素内容的语言

3、事件属性

window 窗口事件：

onload，在网页加载结束之后触发

onunload，在用户从网页离开时发生(点击跳转，页面重载，关闭浏览器窗口等)

form 表单事件：

onblur，当元素失去焦点时触发

onchange，在元素的值被改变时触发

onfocus，当元素获得焦点时触发

onreset，当表单中的重置按钮被点击时触发

onselect，在元素中文本被选中后触发

onsubmit，在提交表单时触发

keyboard 键盘事件：

onkeydown，在用户按下按键时触发

onkeypress，在用户按下按键后，按着按键时触发。(该属性不会对所有按键生效，不生效的有：alt，ctrl，shift，esc)

mouse 鼠标事件：

onclick，当在元素上发生鼠标点击时触发

onblclick，当在元素上发生鼠标双击时触发

onmousedown，当元素上按下鼠标按钮时触发

onmousemove，当鼠标指针移动到元素上时触发

onmouseout，当元素指针移出元素时触发

onmouseup，当元素上释放鼠标按钮时触发。

Media媒体事件

onabort，当退出时触发

onwaiting，当媒体已停止播放但打算继续播放时触发

4、文本标签

段落标签：

，段落标签用来描述一段文字

标题标签：，标题标签用来描述一个标题，标题标签总共有六个级别

强调语句标签：，用于强调某些文字的重要性

更加强调标签： 和 标签一样，用于强调文本，但它强调的程度更强一些

无语义标签：，标签是没有语义的

短文本引用标签：，简短文字的引用

长文本引用标签：

，定义长的文本引用

换行标签：

前端学习资料9

一、前端三要素HTML(结构)：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容

CSS(表现)：层叠样式表(Cascading Style Sheets)，设定网页的表现样式

JavaScript(行为)：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

结构层(HTML)略

表现层(CSS)CSS层叠样式表是一门标记语言，而不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它的主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面的形式重复输出，导致难以维护

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是”用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”

常用的CSS预处理器有哪些

SASS：基于Ruby，通过服务端处理，功能强大，解析效率高。需要学习Ruby语言，上手难度高于LESS

LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS

行为层(JavaScript)JavaScript是一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行

Native原生JS开发

原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称是ES，特点是大部分浏览器都支持。截止到目前，ES3标准已发布如下版本：

ES3

ES4(内部，未正式发布)

ES5(全浏览器支持)

ES6(常用，当前主流版本)

ES7

ES8

ES9(草案阶段)

区别就是逐步增加新特性

浏览器不支持新特性是前端发展的一个很大阻碍，需要进行额外的操作，把ES6写完的代码打包编译成ES5，这样才能让全浏览器支持

前端学习资料10

学习前端技能可以按照以下步骤进行：

确定学习目标：首先，你需要明确你的学习目标。你是想成为一名专业的前端开发者，还是只是想学习一些基础的前端技能?明确你的目标可以帮助你更好地规划你的学习计划。

学习基础知识：如前所述，你需要学习 HTML、CSS、JavaScript 等基础知识。你可以通过阅读相关的书籍、在线教程或参加在线课程来学习这些基础知识。同时，也可以参考一些优秀的学习资源或社区，如 MDN 文档、W3Schools、Stack Overflow 等。

实践练习：理论知识的学习是很重要的，但实践练习同样不可或缺。你可以通过创建一些简单的网页或项目来应用你所学到的知识。这不仅可以帮助你巩固所学知识，还可以让你在实践中发现问题并寻求解决方案。

深入学习：当你掌握了基础知识后，你可以开始深入学习一些更高级的前端技能，如响应式设计、前端框架和库、性能优化等。这些技能可以帮助你更好地应对复杂的开发需求，提高你的开发效率和质量。

参与开源项目或社区：参与开源项目或社区可以让你接触到更多的实际项目和经验丰富的开发者。这不仅可以让你学习到更多的知识和经验，还可以让你与其他开发者交流和协作，提升你的团队合作和沟通能力。

持续学习和跟进最新技术：前端技术日新月异，你需要持续学习和跟进最新的前端技术。你可以通过阅读技术博客、参加行业研讨会、加入开发者社区等方式来了解最新的技术动态和趋势。

建立自己的作品集：建立一个自己的作品集可以展示你的技能和经验，也可以帮助你获得更多的机会和项目。你可以将你的作品分享到社交媒体或在线平台上，让更多的人看到你的才华和实力。

总之，学习前端技能需要耐心和毅力，也需要不断实践和探索。只要你保持学习的热情和动力，相信你一定可以成为一名优秀的前端开发者!