

首页  思维导图  详情



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）

知识共享（

 Collect

Get Started

Web前端知识体系大全

 Collect

Get Started

年度总结模板：阅读书单总结与知识体系构建

 Collect

Get Started

Web前端知识体系大全

 Collect

Get Started

Web前端知识体系大全





0 条评论

下一页