Web前端知识体系大全思维导图
2025-03-25 10:32:04 0 举报AI智能生成
Web前端知识体系大全思维导图
作者其他创作
大纲/内容
HTML基础
HTML标签
结构标签（如：<html>, <head>, <body>）
文本标签（如：<p>, <h1>至<h6>, <span>）
链接与锚点（如：<a>）
图像与多媒体（如：<img>, <video>, <audio>）
列表（如：<ul>, <ol>, <li>）
表单（如：<form>, <input>, <button>）
表格（如：<table>, <tr>, <td>）
HTML5新特性
语义化标签（如：<article>, <section>, <nav>）
表单增强（如：<input type="email">, required属性）
多媒体标签（如：<canvas>, <svg>）
Web存储（如：localStorage, sessionStorage）
Web Workers
CSS基础
CSS选择器
基本选择器（如：元素选择器、类选择器、ID选择器）
组合选择器（如：后代选择器、子选择器、相邻兄弟选择器）
属性选择器（如：attribute="value"）
伪类选择器（如：:hover, :focus）
伪元素选择器（如：::before, ::after）
CSS布局
常规流布局（如：display: block, inline, inline-block）
浮动布局（如：float属性）
定位布局（如：position: absolute, relative, fixed, sticky）
弹性盒子（Flexbox）（如：display: flex, flex-direction, justify-content）
网格布局（Grid）（如：display grid, grid-template-columns, grid-template-rows）
CSS样式
文本样式（如：font-size, font-family, color, text-align）
背景与边框（如：background-color, background-image, border）
盒模型（如：width, height, padding, margin, box-sizing）
变换与动画（如：transform, transition, animation）
响应式设计（如：媒体查询@media, viewport元标签）
JavaScript基础
语法基础
数据类型（如：number, string, boolean, null, undefined, object, function）
变量与常量（如：var, let, const）
控制结构（如：if, else, switch, for, while, do...while）
函数（如：函数声明、函数表达式、箭头函数）
DOM操作
获取元素（如：document.getElementById, document.querySelector）
修改内容（如：innerHTML, textContent）
事件处理（如：addEventListener, removeEventListener）
表单操作（如：document.forms, document.inputs）
异步编程
回调函数（如：setTimeout, setInterval）
Promise（如：Promise构造函数、.then, .catch, .finally）
async/await（如：async函数、await表达式）
ES6+新特性
解构赋值（如：数组解构、对象解构）
模板字符串（如：反引号`）
默认参数（如：函数默认参数）
模块化（如：import, export）
类与继承（如：class, extends）
前端工具与框架
版本控制
Git基础（如：git init, git clone, git commit, git push）
分支管理（如：git branch, git checkout, git merge）
远程仓库（如：GitHub, GitLab）
包管理器
npm（如：npm install, package.json, package-lock.json）
yarn（如：yarn add, yarn init）
构建工具
Webpack（如：入口文件、输出配置、加载器、插件）
Gulp（如：任务流、管道操作）
Rollup（如：模块打包）
前端框架
React（如：组件、状态管理、生命周期、Hooks）
Vue（如：模板语法、响应式原理、组件通信、Vue Router）
Angular（如：模块、组件、服务、依赖注入）
CSS预处理器
Sass/SCSS（如：变量、混合、嵌套规则、继承）
Less（如：变量、混合、嵌套、函数）
前端性能优化
资源压缩与合并
HTML压缩（如：移除空格、注释）
CSS压缩（如：去除空格、合并选择器）
JavaScript压缩（如：代码混淆、去除注释）
文件合并（如：减少HTTP请求）
浏览器缓存策略
强缓存（如：Cache-Control, Expires）
协商缓存（如：Last-Modified, Etag）
异步加载
脚本异步加载（如：async, defer属性）
按需加载（如：路由懒加载、组件懒加载）
CDN使用
内容分发网络（如：减少延迟、提高加载速度）
静态资源托管（如：图片、视频、脚本文件）
前端测试与调试
单元测试
测试框架（如：Jest, Mocha）
断言库（如：Chai, Sinon）
测试覆盖率（如：代码覆盖率工具）
集成测试
测试工具（如：Selenium, Puppeteer）
端到端测试（如：Cypress）
性能测试
性能分析工具（如：Chrome DevTools, Lighthouse）
性能优化建议（如：减少重绘与回流、优化资源加载）
调试技巧
浏览器开发者工具（如：Elements, Console, Network）
断点调试（如：设置断点、逐步执行）
日志记录（如：console.log, console.error）
前端安全
跨站脚本攻击（XSS）
防御措施（如：输入验证、输出编码）
内容安全策略（CSP）（如：Content-Security-Policy头）
跨站请求伪造（CSRF）
防御措施（如：CSRF Token, SameSite Cookie属性）
SQL注入
防御措施（如：预处理语句、参数化查询）
安全通信
HTTPS（如：SSL/TLS加密）
HTTP严格传输安全（HSTS）
安全编码实践
避免使用不安全的API（如：eval, innerHTML）
安全的API使用（如：textContent代替innerHTML）
前端工程化
代码规范
风格指南（如：Airbnb JavaScript Style Guide）
代码检查工具（如：ESLint, Prettier）
模块化开发
模块化规范（如：CommonJS, AMD, ES6 Modules）
模块打包工具（如：Webpack, Rollup）
自动化构建
构建脚本（如：npm scripts）
持续集成/持续部署（CI/CD）（如：Jenkins, GitHub Actions）
组件库与UI框架
组件库（如：Ant Design, Element UI）
设计系统（如：Material-UI, Bootstrap）
文档与知识管理
文档工具（如：JSDoc, Markdown）
知识共享（
0 条评论
下一页
