web前端要学什么内容？入门需要注意什么

首先来介绍下前端（Frontend）到底是什么？前端就是我们肉眼所直观看见的网页是片面的，不全面的，不过大体意思基本一致。

闲话不多说来干货：前端一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。

如上图所示：这是百度的搜索页面，该页面可以大致分为五部分分别由：第一部分是有1组成；第二部分由2，3，4组成；第三部分的元素是5（其中包括6，7，8，9元素）；10构成第4部分；11则是第五部分。

分析完网页的组成部分我们来说说他的核心技术，也就是前面所说的HTML和CSS以及JavaScript/ajax。

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

而CSS和JavaScript以及ajax，则是为了在网页的效果上添加更强的视觉冲击感，可以让网页变得更加的丰富多彩。

上图就是程序员眼中的百度

初学者学习一门新技术往往不知道如何开始，从哪开始，终点是啥。为啥有人月薪 10k，有人却 40k，就看你的技术能不能提高生产率，创造更多价值。学习前端也是这样，要系统全面，前期一定要有刨根问底的精神，遇到问题要究其原因，直到解决为止。下面我把前端需要掌握的技术点做一个总结。

1、首先确定你的目标或道路

我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。

成为Web开发人员的原因有很多，下面列出了一些选择因素：

你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。
你想以自由开发人员的身份来开始自己的业务或代理。
你可以成为其他公司的顾问。
你可以创建自己的应用来赚钱。
编码是你的业余爱好。

从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。后端和全栈开发也是如此。

2、Web开发的基本工具和软件

计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机（如果你拥有的话，那么更好……）。你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows（最新版本）或Linux。

文本编辑器/ IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime Text或Atom。如果我们谈论IDE，那么是Visual Studio（ASP.net或C＃），Eclipse和Netbeans（Java）。是不错的选择。

Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎（JavaScript引擎）。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。

终端：您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git Bash，iTerm，Hyper这些都是可以使用的选项。

设计（可选）：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe XD，Photoshop，Sketch或Figma。

3、从HTML和CSS开始

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。
HTML5（语义元素，属性，文档类型等）
CSS基础知识颜色，字体，位置，盒子模型等。
CSS Grid和Flexbox对齐内容或创建列。
CSS自定义属性

4、响应式布局

您的应用程序应该在所有类型的设备（例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备）上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。
了解如何设置视口
媒体查询不同的屏幕尺寸。
流体宽度
雷姆单位
移动优先

5、自定义可重用CSS组件

与其依赖大型的CSS框架（如Bootstrap），不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。

新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。

你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。

6、CSS框架

学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。

Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。

Tailwind CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。

物化
布尔玛

7、前端必须语言：JavaScript

学习HTML和CSS之后，接下来需要学习的是Vanilla Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言（例如PHP，Python或ASP.net）中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题…

JavaScript基础知识（变量，数据类型，函数，条件等）
DOM（文档对象模型）
JSON（JavaScript对象表示法）
提取API（请求/响应/ Ajax）
如果您想转向React，Vue，Angular或其他框架，现代JS（ES6）概念对于学习非常重要。

8、一些重要工具

Web开发中将使用一些工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。

Git（版本控制）和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。

了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。

大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。

Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。

学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库（例如React），那么这些软件包管理器将使用很多，但是对于其他语言（例如Python或Php），您将使用不同的软件包管理器。

如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。

9、基本部署

此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。

域注册（Namecheap，Google等）
托管托管（InMotion，Hostgator，Bluehost等）
静态主机（Netlify，Github页面）
SSL证书。
FTP，SFTP（文件传输协议）非常适合小型应用程序。
SSH（安全外壳），用于高级应用程序。
CLI和Git。

到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架（如React，Vue或Angular）将是很棒的。

10、前端框架和状态管理

框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。

React： React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将 Redux和 Context API与Hooks一起使用以进行状态管理。

Vue： Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。

Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习 TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和 Services是可以学习此框架的良好状态管理器。

可选学习：

如果您具有这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。

了解服务器端渲染。NextJS（React）和NuxtJS（Vue）是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。

静态网站生成器：Gatsby（反应式）和Gridsome（Vue）

我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。

11、服务器端语言（选择一种）

您应该至少了解一种服务器端语言。要在2020年选择一种语言，下面提供了一些选项…

NodeJS（不是语言，而是运行时环境）
Python（非常适合初学者）
Java（适合大型组织）
Php（适合自由职业）
Ruby（2020年少两极）
C＃
Go

注意：无论你喜欢学习哪种服务器端语言，都要确保你了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串（最重要）。你将同时使用这两种方法。

12、服务器端框架（选择一项）

一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。您可以选择以下给出的选项之一…

Node.js – Express，Koa，Adonis，Feather.js，Nest.js
Python：Django，Flask，
Java：Spring MVC，Grails
PHP：Laravel，Symfony，Codeignitor，Slim
Ruby：Sinatra上的Ruby on Rails
C＃：ASP.NET MVC
Go： Revel

13、数据库（选择一项）

大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。

关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MS SQL。

NoSQL：MongoDB，RethinkDB，CouchDB
云数据库：Firebase，Azure Could DB，AWS
轻量级和缓存：Redis，SQLlite，NeDB

在学习数据库时，您还将学习RDBMS，ORM（对象关系映射器）或ODM（对象数据映射器）的SQL（结构化查询语言）。

GraphQL ：（可选）您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且相当容易实现。

14、CMS：内容管理

您绝对应该了解内容管理系统，尤其是如果您是自由职业者。CMS用于将内容添加到您的网站或应用程序。客户能够更新自己的内容非常好。

传统CMS：WordPress（PHP），Drupal（PHP），Keystone（Javascript），Enduro（Javascript）
其他CMS ：DEDECMS，帝国CMS，PHPcms，Prismic.io，Strati。

15、部署和DevOps

托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。

在大多数公司中，有不同的团队从事DevOps的工作。因此，拥有有关DevOps的知识完全是可选的。您可以了解到，如果您正在从事自己的项目。

SSH（安全外壳）
Web服务器环境：NGINX，Apache
应用程序托管：Linode，Heroku，AWS，Azure，Now。
虚拟化：Docker，Vagrant
测试：单元，功能，集成等
负载平衡，监视，安全性。

以上所有技术工具都足以使你成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的