端發展越來越快，每天都有數不勝數的技術發布。

想要入門前端卻沒有一條較為理想的路徑？

在這個世界里兜兜轉轉了很久還是感覺在外圍搬磚？

那么你可能需要這份技術學習路線圖！

我們把學習前端分為三重境界：

• 單機寫基礎網頁

• 聯機高效寫網頁

• 讓網頁能夠被更多人使用

接下來我們就通過介紹這三重境界來為你呈現詳細的學習路線圖。

單機寫基礎網頁

何為單機呢？其實就是一個人

你一個人使用 Web 基礎技術開發網站，沒有將代碼分享給別人（你可能不知道程序世界的代碼分享規則），同時只是在本地環境運行你的網站，你甚至對網站如何能把其他人訪問到毫無頭緒。

這個階段也是成為一名前端工程師最最基礎的一環，大部分初學者還停留在這個階段，那么我們來看一下這個階段需要什么樣的技能。

HTML + CSS + JavaScript

沒錯，其實就是我們耳熟能詳的前端三劍客，雖然看起來是最最入門的內容，但是需要了解的內容也不少，就類似我們需要先學 26 個字母，學各種漢字基礎，才能寫作或者創作詩歌一樣。了解這三門技術大致需要了解那些內容以及有哪些學習資源推薦呢？

HTML

HTML 代表超文本標記語言。 它用于前端，為網頁提供結構，您可以使用 CSS 設置樣式并使用 JavaScript 進行交互。

HTML 的學習大致需要 6 個階段：

• 學習基礎知識：https://www.w3schools.com/html/html_intro.asp

• 編寫語義化的 HTML：https://www.w3schools.com/html/html5_semantic_elements.asp

• 了解表單與校驗：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

• 遵守一些約定與最佳實踐：https://github.com/hail2u/html-best-practices

• 了解可訪問性：https://www.w3schools.com/accessibility/index.php

• 了解 SEO 基礎：https://developers.google.com/search/docs

CSS

CSS 或級聯樣式表是用于設置任何網站前端樣式的語言。 CSS 是萬維網的基礎技術，與 HTML 和 JavaScript 并列。

學習基礎的 CSS 大致需要 3 個階段：

• 學習基礎知識：https://www.w3schools.com/css/

• 學會如何布局，其中布局又包括以下知識：
• Floats 浮動：https://css-tricks.com/all-about-floats/
• Positioning 定位：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
• Display 展示：https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
• 盒子模型：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
• CSS 網格：https://cssgridgarden.com/
• Flex 彈性盒布局：https://flexboxfroggy.com/
• 學習媒體查詢知識與 Web 響應式設計：https://www.freecodecamp.org/learn/responsive-web-design/

JavaScript

JavaScript 允許您向頁面添加交互性。 您可能在網站上看到的常見示例是滑塊、點擊交互、彈出窗口等。

學習基礎的 JavaScript 大致需要 5 個階段：

• 基礎的語法：https://javascript.info/

• 學習 DOM 操作：https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

• 學習 Fecth API 與 Ajax（XHR）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

• 學習 ES6 與模塊化 JavaScript：https://www.javascripttutorial.net/es6/

• 理解進階知識 Hositing：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting 事件模型：https://javascript.info/bubbling-and-capturing 作用域： https://developer.mozilla.org/en-US/docs/Glossary/Scopehttps://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/ 原型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Shadow DOM：https://www.youtube.com/watch?v=7Tok22qxPzQ 嚴格模式等：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

了解了上面的這些內容，你基本上算是一名基礎的前端工程師了，你可以編寫各種各樣的基礎界面，也應該在學習的過程中產出了很多個 DEMO 了。

聯機高效寫網頁

請注意我們這一小節的關鍵詞：聯機、高效。

在這個階段，你將學會如下知識：

• 如何以程序員的方式將代碼與人分享并能夠嘗試參與別人代碼的改進

• 高效的編寫網站

• 理解網站是如何互通的，你是如何訪問的網頁的

基于上述的目標，這一階段的關鍵技術如下：

• Git、Github

• Internet、Network 原理

• 開發框架： JS/HTML：Reatc/Redux、Vue/Vuex 等CSS：Sass、Styled Components、TailwindCSS 等構建：Webpack、Babel、Npm Scripts 等包管理：Yarn、Npm 等

• 開發規范 CSS：BEM 等JavaScript：Airbnb JavaScript Style Guide 等

Git

Git 是一種版本控制系統。

版本控制系統允許您跟蹤代碼庫/文件隨時間的變化。 它們允許您毫無問題地返回到代碼庫的某個先前版本。 此外，它們還有助于與處理相同代碼的人協作——如果您曾經與其他人合作過一個項目，您可能已經知道將其他人的更改復制和合并到您的代碼庫中的挫敗感； 版本控制系統可以讓你擺脫這個問題。

你可以通過下面的鏈接學習它：

• https://www.youtube.com/watch?v=zbKdDsNNOhg

• https://www.youtube.com/watch?v=SWYqp7iY_Tc

• https://youtu.be/Y9XZQO1n_7c?t=21

Github

GitHub 是使用 Git 進行軟件開發和版本控制的互聯網托管提供商。 它提供了 Git 的分布式版本控制和源代碼管理功能，以及它自己的特性。

你可以通過下面的鏈接學習它：

• https://github.com/

• https://docs.github.com/en/get-started/quickstart/hello-world

Internet

互聯網是一個全球性的計算機網絡，它們相互連接，通過一組標準化的協議進行通信。

• 了解互聯網是如何工作的？ https://www.vox.com/2014/6/16/18076282/the-internethttp://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm

• 什么是 HTTP？ https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/https://developer.mozilla.org/en-US/docs/Web/HTTP/Overviewhttps://kamranahmed.info/blog/2016/08/13/http-in-depth/

HTTP 是基于 TCP/IP 的應用層通信協議，它標準化了客戶端和服務器之間的通信方式。 它定義了如何通過 Internet 請求和傳輸內容。

• 什么是瀏覽器？它們是如何工作的？ https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/https://www.browserstack.com/guide/browser-rendering-enginehttps://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

Web 瀏覽器是一種軟件應用程序，它使用戶能夠通過其圖形用戶界面訪問和顯示網頁或其他在線內容。

• 什么是 DNS？它們是如何工作的？ https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/

域名系統 (DNS) 是 Internet 的電話簿。 人類通過域名（如 nytimes.com 或 espn.com）在線訪問信息。 Web 瀏覽器通過 Internet 協議 (IP) 地址進行交互。 DNS 將域名轉換為 IP 地址，因此瀏覽器可以加載 Internet 資源

• 什么是域名？ https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name

名是用于訪問網站的唯一且易于記憶的地址，例如“google.com”和“facebook.com”。 借助 DNS 系統，用戶可以使用域名連接到網站。

• 什么是主機？ https://www.youtube.com/watch?v=htbY9-yggB0

虛擬主機是一種在線服務，可讓您將網站文件發布到互聯網上。 因此，任何可以訪問互聯網的人都可以訪問您的網站。

JavaScript 框架

React

• https://reactjs.org/

• https://reactjs.org/tutorial/tutorial.html

React 是最流行的用于構建用戶界面的前端 JavaScript 庫。 React 還可以使用 Node 在服務器上渲染，并使用 React Native 為移動應用程序提供動力。

Redux

• https://redux.js.org/

• https://redux.js.org/introduction/getting-started

Redux 是 JavaScript 應用程序的可預測狀態容器。 它可以幫助您編寫行為一致、在不同環境（客戶端、服務器和本機）中運行并且易于測試的應用程序。 最重要的是，它提供了出色的開發人員體驗，例如實時代碼編輯與時間旅行調試器相結合。

當然狀態管理方面目前也有 Mobx 與 Recoil 等有力的競爭者。

上述的是 React 生態，此外 JavaScript 社區還有 Vue 與 Angular 等其他非常有競爭力的框架。

CSS 框架

Styled Components

• https://github.com/styled-components/styled-components

利用標記的模板文字（最近添加到 JavaScript）和 CSS 的強大功能，styled-components 允許您編寫實際的 CSS 代碼來設置組件的樣式。 它還刪除了組件和樣式之間的映射——將組件用作低級樣式構造！

CSS Modules

• http://www.ruanyifeng.com/blog/2016/06/css_modules.html

給 CSS 加入了局部作用域與模塊依賴

Sass

• http://www.ruanyifeng.com/blog/2012/06/sass.html

為 CSS 加入編程元素，被稱為 CSS 預處理器

TailwindCSS

• https://tailwindcss.com/

供一系列輔助類，直接為 HTML 標記添加這些預設的輔助類就可以快速完成一組專業的網站。

構建相關

Webpack

• https://webpack.js.org/

Webpack 是一個模塊打包器。 它的主要目的是捆綁 JavaScript 文件以在瀏覽器中使用，但它也能夠轉換、捆綁或打包幾乎任何資源或資產。

除了 Webpack，目前前端圈比較火的還有：

• 為庫打包的更佳選擇：Rollup

• 基于瀏覽器 ESM 的 Bundless 解決方案：Vite

Npm scripts

• http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

組合 Yarn、Npm、Pnpm 等包管理一起使用，來便捷的執行一系列腳本

Babel

• http://www.ruanyifeng.com/blog/2016/01/babel.html

Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行

開發規范

BEM

• https://en.bem.info/

• https://juejin.cn/post/6844903672162304013

塊、元素、修飾符方法（通常稱為 BEM）是 HTML 和 CSS 中類的流行命名約定。 由 Yandex 團隊開發，其目標是幫助開發人員更好地理解給定項目中 HTML 和 CSS 之間的關系。

JavaScript Style Guide

• https://github.com/airbnb/javascript

編寫 JavaScript 最合理的方法之一

經歷上面的一陣狂風亂炸的洗禮之后，你現在已經能夠理解如下知識了：

• 網頁是如何運行的

• 如何使用框架（JS、CSS 框架）、現代的前端工程化集合工具輔助你高效的編寫界面

• 在編寫代碼的時候，遵守相關的規范，寫出更容易讓其他人讀懂的代碼

• 將你的代碼使用版本控制系統 Git 來追蹤，并通過 Github 將你的代碼分析給其他程序員學習

讓網頁被更多人使用

如果你想讓你的網站被更多人使用，甚至是你要開發一款產品，完成你的創業目標，那么你可能還需要一些額外的知識輔助你。

在這個階段你需要了解的知識點如下：

• 確保你的網站安全：HTTPS、Cors、內容安全策略等

• 確保的應用盡可能少 BUG：TypeScript、Jest、Cypress、Enzyme、React Testing Library

• 讓用戶在沒有網的情況下也能使用：PWA、Storage、Web Socket、Service Workers 等

• 讓你的網站被更快的訪問：Lighthouse、Devtools、Performance Metrics、RAIL Model、PRPL Pattern

• 讓你的網站能更好的被索引：SSR

• 讓你的應用分散在各個平臺：React Native、Flutter、Electron

• 讓你的網站也能夠處理更復雜的動效：WebAssembly 等

Web 安全

HTTPS

• https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/

• https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https

• https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https

HTTPS 是一種在 Web 服務器和瀏覽器之間發送數據的安全方式。

CORS

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

跨域資源共享 (CORS) 是一種基于 HTTP 標頭的機制，它允許服務器指示除其自身之外的任何來源（域、方案或端口），瀏覽器應允許從中加載資源。

CSP（內容安全策略）

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

• https://developers.google.com/web/fundamentals/security/csp

內容安全策略是一種計算機安全標準，用于防止在受信任的網頁上下文中執行惡意內容而導致的跨站點腳本、點擊劫持和其他代碼注入攻擊。

測試工具

Jest

• https://jestjs.io/

Jest 是一個令人愉快的 JavaScript 測試框架，專注于簡單性。 它適用于使用以下項目的項目：Babel、TypeScript、Node、React、Angular、Vue 等等！

React Testing Library

• https://github.com/testing-library/react-testing-library

完備的 React DOM 的測試輔助庫

Cypress

• https://www.cypress.io/

對應用進行端到端測試

Enzyme

• https://github.com/enzymejs/enzyme

測試 React 的輔助庫

類型檢查工具

TypeScript

• https://www.typescriptlang.org/

• https://www.typescriptlang.org/docs/

• https://www.typescriptlang.org/docs/handbook/intro.html

TypeScript 是一種基于 JavaScript 的強類型編程語言，可為您提供任何規模的更好的工具。

離線使用

Web 最新的 Progressive Web Apps （PWA）技術，使得 Web 網站可以像 App 一樣，擁有離線使用、推送通知等功能。

PWA 主要包含下面幾個部分：

• Storage

• WebSockets

• Service Workers

• Location

• Notifications

• Device Orientation

• Payments

• Credentials

主要的參考學習資源如下：

• https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

• https://github.com/GoogleChrome/workbox

性能相關

Web 性能是加載時間和運行時的客觀測量和感知用戶體驗。 Web 性能是指網站加載、變得交互和響應所需的時間，以及在用戶交互期間內容的流暢程度。

性能涉及到計算、衡量與改進性能，主要涉及下面這些知識點：

• PRPL Pattern

• RAIL Model

• Performance Metrics

• Lighthouse

• Devtools

主要的參考學習資源如下：

• https://developer.mozilla.org/zh-CN/docs/Web/Performance

• https://web.dev/

SEO 相關

SEO（Search Engine Optimization）—— 搜索引擎優化，目的是幫助我們的網站在Google或者Baidu搜索的時候排名會提升靠前。

Next.js

• https://nextjs.org/

• https://nextjs.org/docs/getting-started

• https://www.freecodecamp.org/news/the-next-js-handbook/

Next.js 是一個構建在 Node.js 之上的開源開發框架，支持基于 React 的 Web 應用程序功能，例如服務器端渲染和生成靜態網站。

多平臺

React Native

• https://reactnative.cn/

• https://github.com/facebook/react-native

使用 React 來開發移動端應用，如 Android 或 iOS。

Flutter

• https://flutter.cn/

• https://flutter-io.cn/

Flutter 為應用開發帶來了革新： 只要一套代碼庫（Dart），即可構建、測試和發布適用于移動、Web、桌面和嵌入式平臺的精美應用

Electron

• https://www.electronjs.org/

• https://wizardforcel.gitbooks.io/electron-doc/content/tutorial/tutorial.html

Electron（原名為Atom Shell）是GitHub開發的一個開源框架。它通過使用Node.js（作為后端）和Chromium的渲染引擎（作為前端）完成跨平臺的桌面GUI應用程序的開發。Electron現已被多個開源Web應用程序用于前端與后端的開發，著名項目包括GitHub的Atom和微軟的Visual Studio Code。

高性能應用

WebAssembly

• https://developer.mozilla.org/zh-CN/docs/WebAssembly

• https://juejin.cn/post/7035991254257106958

WebAssembly是一種新的編碼方式，可以在現代的網絡瀏覽器中運行 － 它是一種低級的類匯編語言，具有緊湊的二進制格式，可以接近原生的性能運行，并為諸如C / C ++等語言提供一個編譯目標，以便它們可以在Web上運行。它也被設計為可以與JavaScript共存，允許兩者一起工作。

當你學完了這個部分的內容，基本上已經是算是一位高階的前端工程師了，能夠在任何大廠勝任各種研發工作，當然能夠堅持到這里不容易，需要持續的努力，加油

寫在最后

本文從三個維度切入了在 2022 年作為一名前端工程師需要學習的內容，以及給出了詳細的學習路線圖和對應的學習資源，當然有些資源都是國外的，需要自備科學上網工具，后續會基于這條學習路線圖進行完善，并且補充詳細的中文學習資源，敬請期待。

??/ 感謝支持 /

以上便是本次分享的全部內容，希望對你有所幫助^_^

喜歡的話別忘了 分享、點贊、收藏 三連哦~

歡迎關注公眾號 程序員巴士，來自字節、蝦皮、招銀的三端兄弟，分享編程經驗、技術干貨與職業規劃，助你少走彎路進大廠。

TML常用標簽

1. web標準

1.1 web標準的構成

主要包括 結構 、 表現 和 行為 三個方面。

標準說明結構用于對 網頁元素 進行整理和分類（HTML）表現用于設置網頁元素的 外觀樣式 （CSS）行為網頁模型的定義及 交互 的編寫（JavaScript）

如果將web標準比喻為一只鳥，則

• 結構=身體
• 表現=羽毛
• 行為=動作（飛行、站立等）

1.2 標簽關系

雙標簽關系分為：

• 包含關系（父子）
• 并列關系（兄弟）

(1)包含關系

<!--head標簽包含title標簽-->
<head>
    <title></title>
</head>

(2)并列關系

<!--head標簽與body標簽并列-->
<head></head>
<body></body>

2. HTML基本結構

標簽名定義<html></html>html標簽<head></head>文檔的頭部<title></title>文檔的標題<body></body>文檔的主體

<!DOCTYPE html>   <!--文檔類型聲明標簽-->  
<html lang="en">    <!--en:英語，zh-CN:中文-->
    
    <head>
        <!--字符集，UTF-8為萬國碼，統一使用-->
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
    </body>
    
</html>

3. HTML常用標簽

3.1 標題標簽

一個標題獨占一行。（塊級元素）

<h1>
    一級標題（字號最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
    六級標題（字號最小）
</h6>

3.2 段落標簽

用于將HTML文檔分割為若干段落。

特點：

• 文本在一個段落中會根據瀏覽器窗口的大小自動換行
• 段落之間有空隙

<p>
    這是一個段落
</p>

3.3 換行標簽

用于強制換行。

特點：

• 單標簽
• 換行沒有像段落那樣的空隙

<br>這是換行標簽

3.4 文本格式化標簽

語義標簽加粗<strong></strong>傾斜<em></em>刪除線<del></del>下劃線<ins></ins>

3.5 盒子標簽

用于界面布局。

特點：

• div一行只能放一個（塊級元素）
• span一行可以放多個（行級元素）

<div>
    這是大盒子
</div>
<span>這是小盒子</span>

3.6 圖像標簽和路徑

(1)圖像標簽

用于定義頁面中的圖像。

<!--屬性與屬性之間用空格分開-->
<img src="圖像的url" alt="" title="">

屬性說明src圖片路徑（ 必須屬性 ）alt圖像不能顯示時的替換文本title鼠標放到圖像上顯示的提示文本width設置圖像的寬度height設置圖像的高度border設置圖像的邊框粗細（在CSS中修改）

注：圖像的寬和高一般只修改其中一個，另一個會隨之調整。

(2)路徑

• 相對路徑：文件相對于HTML頁面的位置

相對路徑分類符號說明同一級src="文件名"下一級/src="同一級文件夾名稱/文件名"上一級../src="../文件名"

• 絕對路徑：完整的路徑名稱（一般很少用）。eg. C:\xxx\xxxx.jpg

注意：絕對路徑用“\”分隔，相對路徑用“/”分隔。

3.7 超鏈接標簽和鏈接分類

(1)超鏈接標簽

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

屬性作用href鏈接目標的url（ 必須屬性 ）target鏈接頁面的打方式。_self：在當前窗口打開（默認值），_blank：在新窗口打開

(2)鏈接分類

1. 外部鏈接：例如http://www.bilibili.com
2. 內部鏈接：網站內部頁面之間的相互鏈接，例如index.html
3. 空鏈接：#
4. 下載鏈接：地址里是一個文件或壓縮包
5. 網頁元素鏈接：在網頁中的各種網頁元素都可以添加超鏈接
6. 錨點鏈接：可以快速定位到頁面中的某個位置鏈接：<a href="#名字"></a>找到目標位置標簽，里面添加一個id屬性，<h2 id="名字"></h2>返回頂部：<a href="#"></a>

3.8 注釋和特殊字符

(1)注釋

<!--這是一行注釋-->

(2)特殊字符

特殊字符描述字符的代碼空格符<小于號<>大于號>&和號&￥人民幣¥?版權©?注冊商標®°攝氏度°±正負號±?乘號×?除號÷2平方²3立方³

注：重點記住前三個。

大家平時學習web前端的時候肯定會遇到很多問題，小編我為大家準備了web前端學習資料，將這些免費分享給大家！如果想要的可以找我領取

領取方式：

如果想獲取這些學習資料，先關注我然后私信小編“01”即可免費領取！（私信方法：點擊我頭像進我主頁右上面有個私信按鈕）

如果這篇文章對你有幫助，請記得給我來個評論+轉發噢