前端知識樹狀結構圖
1 檢舉
本範本適用於前端知識體系梳理，透過樹狀結構對前端相關內容進行分層拆解（如 HTML基礎、CSS樣式與佈局、JavaScript語言、瀏覽器原理及前端工程化等），協助系統化建構前端知識架構。
相關推薦
作者其他創作
大綱/內容
看更多
html基礎與語義化
html文檔結構與標籤
html5文檔類型與基本結構
語義化標籤的使用場景
header、nav、main、article、section、aside、footer
figure、figcaption、mark、time、meter
表單元素與輸入類型
input type屬性：text、email、tel、number、date
textarea、select、datalist、output
多媒體與圖形元素
audio與video元素及其屬性
canvas與svg的基礎應用場景
可訪問性（aria）
aria角色與屬性
role屬性定義元素角色
aria-label、aria-labelledby、aria-describedby
鍵盤導航與焦點管理
tabindex屬性的使用
焦點順序與視覺指示
css樣式與布局
css核心概念與選擇器
盒模型與視覺格式化
標準盒模型與怪異盒模型
display屬性：block、inline、inline-block、flex、grid
選擇器與優先級
基礎選擇器：元素、類、id、屬性
組合選擇器與偽類、偽元素
css選擇器優先級計算規則
現代布局方案
flexbox彈性布局
容器屬性：flex-direction、justify-content、align-items
項目屬性：flex-grow、flex-shrink、flex-basis
grid網格布局
定義網格容器與軌道
網格線、網格區域與項目放置
grid-template-areas的使用
響應式設計與媒體查詢
移動優先的媒體查詢策略
視口單位與相對單位
css動畫與變換
過渡與關鍵幀動畫
transition屬性的配置
2d與3d變換
transform屬性：translate、rotate、scale、skew
transform-origin與transform-style
javascript程式語言
javascript核心語法與數據類型
變量、作用域與閉包
var、let、const的區別
作用域鏈與閉包的形成原理
數據類型與操作符
原始類型與引用類型
類型轉換與比較操作符
解構賦值與擴展運算符
函數與執行上下文
函數聲明、表達式與箭頭函數
this關鍵字的綁定規則
調用棧與執行上下文
dom操作與事件處理
dom節點選擇與操作
document.queryselector與queryselectorall
節點創建、插入、刪除與替換
事件模型與事件委託
事件捕獲與冒泡機制
event對象常用屬性和方法
使用事件委託優化性能
異步編程與網絡請求
promise與異步函數
promise的狀態與鏈式調用
async/await語法糖
ajax與fetch api
xmlhttprequest對象的使用
fetch api的請求與響應處理
處理跨域請求（cors）
es6+新特性與模塊化
類與面向對象編程
class語法定義類
繼承與super關鍵字
模塊化開發
es6模塊的導入與導出
模塊加載器與打包工具
前端工程化與工具鏈
包管理與構建工具
npm與yarn包管理器
package.json文件解析
依賴管理與版本控制
構建工具：webpack與vite
webpack核心概念：入口、出口、加載器、插件
vite的開發伺服器與構建原理
代碼質量與協作
代碼風格與靜態檢查
eslint配置與規則
prettier代碼格式化
版本控制與git工作流
git基礎命令：add、commit、push、pull
分支管理與合併策略
自動化與ci/cd
自動構建
自動測試
自動部署
環境與配置管理
多環境配置（dev / test / prod）
環境變量管理
配置分離
版本發布與部署
打包發布
版本管理
部署流程
前端框架與庫
react框架核心概念
組件與jsx語法
函數組件與類組件
jsx表達式與條件渲染
狀態管理與生命周期
usestate與useeffect hooks
類組件的生命周期方法
狀態管理方案
context api跨組件通信
redux狀態管理庫
vue.js框架核心概念
響應式系統與模板語法
數據綁定與指令
計算屬性與偵聽器
組件系統與組合式api
單文件組件結構
setup函數與組合式函數
vue router與狀態管理
路由配置與導航守衛
pinia狀態管理庫
收藏
收藏
0 則評論
下一頁