WEB前端入门知识及要点大全

冷不防 2022-12-24 03:53 170阅读 0赞

很多新手朋友刚接触前端，不知道从哪里下手，今天就跟大家分享web前端入门知识及要点大全，希望对大家有帮助！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center]  
一、WEB前端是什么？

使用HTML/CSS/JS以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端开发工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口；也可以独立工作，完成强用户交互的各类应用。

二、WEB前端可以做什么？

最经典的是各种类型的网站：电子商务、企业门户、管理系统、社区平台等；目前也是移动领域首选技术：WebApp、混编App、手机游戏、微信公众号、微信小程序等；前端前沿的应用领域还有：数据可视化、3D建模和渲染、WebVR、WebAR等。

三、WEB前端知识体系包括哪些内容？

前端基础知识：HTML5、CSS3、JavaScript/ECMAScript；前端核心技术：BOM&DOM、jQuery、HTTP、AJAX；前端高阶内容：H5高级、响应式布局、Bootstrap框架；移动端开发：移动端适配、WebApp、混编App、微信公众号、微信小程序；三大主流框架：Vue.js、Angular、React.js及各自的生态圈；全栈相关技术：Node.js、数据库、模块化和自动化构建、项目管理技术。

四、WEB前端学习程度如何？

相较于UI设计师，前端工程师不需要非常高的美术设计功底要求；相较于后台开发工程师，前端工程师在抽象思维和算法方面的要求更低一些；同时，前端工程师必备的英语词汇相对更少，加上达内开发的单词练习和记忆辅助工具，英语零基础学员也可以很快掌握；所以，前端相关技术入门要求更低，无需特别的技术背景和英语基础。但是由于市场的紧缺，初中级工程师领域，前端工程师的薪资水平经常高于同起点的其它工程师。

> 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851中间：231最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

五、名词解释

(1)HTML —— Hypertext Markup Language，超文本标记语言

• HTML是用来描述网页内容和结构的一种语言。例如：网页中的文字、表格、图片等等。• HTML相比其它编程语言更加容易掌握，如

用于表示一段文本， 表示一张图片等等。

(2)H5/HTML5 —— HTML语言第5版本

• HTML5是 HTML语言的最新版本，在之前版本的基础上新增加了很多强大的功能，如绘图、音视频、存储等。• 由于Android和iOS系统对H5最新标准的支持非常好，而且可以实现“一套代码，运行于两种平台”，解决原生移动App开发最大的痛点，所以现在越来越多的移动App开始采用H5来编写。

(3)CSS —— Cascade Style Sheet，层叠样式表

• HTML描述网页的内容，就像是人的身体；CSS描述网页的外观，就好像人的着装。• CSS可用于设定网页内容的颜色、字体、位置、大小等等设定，同时还可以各种炫酷的交互动画。

(4)CSS3 —— CSS语言第3版本

• CSS3是最新的CSS标准，对动画及特效的支持更加丰富，提供的媒体查询技术可用于编写响应式网页。

(5)JS —— JavaScript

• JavaScript 是一种可以嵌入在网页中的脚本语言，用于实现页面内容与用户的交互 ，例如表单验证、页面动画、异步数据加载等等。

(6)jQuery

• JS标准中提供的操作方法很多时候比较复杂，且存在浏览器兼容性问题；jQuery提供了一套简便的方法，用于简化网页中JS的编写。• jQuery提供了四方面的简化方法：DOM操作、事件处理、动画函数、AJAX封装。

(7)AJAX —— Asynchronous Javascript And XML，异步JS和XML

• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页且不影响当前用户操作的情况下，对网页的某部分内容进行更新。

(8)SQL —— Structured Query Language，结构化查询语言

• 项目中有很多需要永久存储的数据，例如商品、用户、评论等等，这些数据一般都是存储在数据库中。 • SQL语言用于访问和处理数据库中数据的标准语言，包括添加、删除、修改、删除等功能。

(9)WebApp

• WebApp是使用HTML5编写的移动Web应用，几乎可以不加修改的运行在PC/Android/iOS等多种平台。• 传统的移动App大多使用Objective-C(iOS)或者Java(Android)编写，一个应用程序需要两套开发人员，向两个不同方向的市场进行发布，非常不便；所以现在越来越多的移动App都在向WebApp迁移。

(10)混编App

• WebApp很多应用中可以取代传统的移动App，但是HTML/JS本身都是运行于浏览器中的，不便直接操作手机底层的硬件设备。• 混编App在底层封装了手机底层及硬件操作，如操作通讯录、摄像头、各类传感器等，上层直接使用JS即可进行调用，从而极大的扩展了WebApp的功能。

(11)微信小程序

• 简称小程序，目前特指可以运行于微信平台上的一种应用框架；相对于传统的移动App而言，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。• 除了极大的方便用户，小程序还可以充分利用微信庞大的用户群实现用户引流，降低App的获客成本。

(12)名词：Vue.js

• Vue是当今世界上发展最迅速的JavaScript框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。• 它于2014年2月首次发布，作者是前谷歌员工尤雨溪，并在社区开源；目前有阿里巴巴、百度、GitLab等众多公司使用。

(13)名词：Angular

• Angular是一个基于TypeScript的JavaScript框架。是目前广泛使用的框架里最有历史的框架。• 在2010年10月发布，目前由Google开发和维护。用户有谷歌，weather.com，福布斯等。

(14)名词：React.js

• React被描述为一个用于构建用户界面的JavaScript库。• 于2013年3月首次发布，由Facebook开发和维护。当前的用户有优步，Netflix，Twitter，Paypal，沃尔玛等。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/20cb97cbb6744b479d0a60f000f562fe.png