前端知識樹狀結構圖
0 檢舉
本範本適用於前端知識體系梳理，透過樹狀結構對前端相關內容進行分層拆解（如 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 則評論
下一頁