

首页  思维导图  详情



前端知识框架总结分享

2022-10-26 17:42:44   0  举报





AI智能生成

前端知识框架总结分享

前端知识框架

前端知识

模版推荐

作者其他创作

大纲/内容

注意

目前不考虑兼容性，请使用谷歌浏览器

代码编写规范

推荐使用小写元素名

关闭所有 HTML 元素

关闭空的 HTML 元素

使用小写属性名

HTML5 属性值可以不用引号，推荐使用引号

图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示。

HTML 注释

命名不要随意，见名知意。

为id或class命名时，多单词以“-”连接，如：demo-one

空格与缩进

HTML5

目标

文档类型

DOCTYPE

理解HTML文档流

head标签里面各种标签含义作用

meta

chartset

......

文档元数据

如：meta里的chartset等（chartset为元数据类型）

文档主体（重点内容）

文字形式

语义标签——用正确的标签做正确的事情，html语义化让页面的内容结构化，结构更清晰。准确使用语义标签，不要滥用

行内元素与块级元素的区别

空元素

嵌入内容

引入CSS的三种常用方式以及优先级

Linking（外部引用式）——link 与 @import的区别

Embedding（嵌入式）

Inline（内联式）

嵌入图片等

交互元素

表格

表单

表单元素

表单属性

Input类型

字符实体

拖放（JS阶段）

画布与 SVG（JS阶段）

事件（JS阶段）

存储（JS阶段）

应用缓存（PHP阶段，JS阶段可以了解）

地理位置（JS阶段）

何时

14天

学习

实践

考核

如何

学习网站

菜鸟教程：http://www.runoob.com/

W3school ：http://www.w3school.com.cn/index.html

推荐网站：MDN Web文档 https://developer.mozilla.org/zh-CN/

考核例子：具有CSS3动画效果的静态网站(至少6个页面)

注：HTML5与CSS3 为同一阶段

CSS3

目标

语法规则

字体

Border

outline

display 与 visibility

选择器

id和class选择器

元素选择器

例：p, div

伪对象选择器（伪元素选择器）

例：:first-line

伪类选择器

例：a:hover, li:nth-child

属性选择器

例：a[rel = &quot;external&quot;]

关系选择器

后代选择器

子代选择器（子元素选择器）

相邻兄弟选择器

取值单位

长度

绝对长度：px

相对长度：em ,rem

颜色

颜色的几种表示方法

颜色名

十六进制

RGB

RGBA

HSL（了解）

HSLA（了解）

属性

用户界面

显示样式

颜色

背景

盒子模型

标准盒子模型(W3C盒子模型)

IE盒子模型

位置

定位（position）

static

fix

relative

absolute

附：css position基础&nbsp; https://segmentfault.com/a/1190000003702416

浮动

产生浮动的原因

清除浮动的方法

z-index

属性

何时用

如何用

状态

变换

动画

过渡

打印（了解）

布局

flex布局（flexbox弹性盒子）—— 一维布局

Grid 布局(网格布局)——二维布局

常用布局

单列布局

多列布局

float+margin

position+margin

三栏布局

圣杯布局（float+position+负margin+padding）

双飞翼布局（float+负margin）

常用居中

水平居中

垂直居中

响应式布局

网状布局

多列

列表

表格

媒体查询

何时

14天

学习

实践

考核

如何

学习网站

菜鸟教程：http://www.runoob.com/

W3school ：http://www.w3school.com.cn/index.html

考核例子：具有CSS3动画效果的静态网站(至少6个页面)

推荐网站：MDN Web文档 https://developer.mozilla.org/zh-CN/

注：HTML5与CSS3 为同一阶段

JavaScript

目标

基础知识

数据类型

函数

JS作用域

正则表达式

对象

事件

鼠标事件

表单事件

事件处理/监听函数

窗口事件

Event对象

事件流

按键事件

客户端存储

web存储

json与xml

web SQL数据库（了解）

DOM操作

DOM节点操作

样式操作

脚本化文档

附一篇个人博客：JS DOM操作及扩展&nbsp; http://blog.csdn.net/qq_33430445/article/details/76977623

BOM

JavaScript特效

JS闭包

插件的使用（自己写个插件，最好自己封装一下）

Ajax（JQuery阶段，原生ajax也要学习）

何时

14天

学习

实践

考核

如何

推荐书籍：《JavaScript高级程序设计》/《JavaScript权威指南》（这两本书用来提高，也可作为新手入门）

学习网站：菜鸟教程或W3school

考核例子：具有JS动画效果的高质量静态网站

JQuery与BootStrap

目标

JQuery语法

Ajax与原生Ajax

BootStrap的使用

何时

3天

如何

JQuery：菜鸟教程或W3school

BootStrap：https://v4.bootcss.com/

Web安全

XSS、CSRF、Cookie劫持

传输安全

Oauth

服务器端常识

Linux

数据库

关系型数据库（MySql）

json数据库（MongoDB）

内存数据库（Redis）

Node

框架

应用场景

项目部署

pm2

Nginx

Docker+自动化

PHP

软件工程

需求分析

项目分解

代码测试

代码管理

bug追踪

敏捷开发

网络协议

HTTP

TCP/UDP

编译原理

词法分析AST

代码生成

代码转换

设计模式

单例模式

装饰器模式

代理模式

观察者模式

发布订阅模式

算法、数据结构

数据结构

数组、字符串、队列、堆栈、链表

二叉树

图

算法

排序，搜索，遍历

贪婪算法

动态规划

自动化测试

单元测试

性能测试

安全测试

功能测试

多端应用

小程序

微信小程序（云开发）

支付宝小程序

头条小程序

百度小程序

App

React-Native

Weex

Flutter

多端融合

Uni-app

mpvue

Chameleon

Taro

工程化

webpack

loader

plugin

gulp

grunt

Jenkins

浏览器

渲染机制

dom树

CSSOM

render tree

缓存机制

输入url发生了什么

同源策略

图形学

小游戏

可视化

canvas（echarts）

svg（D3）

WebGL（three.js）

PS切图

TypeScript

React

高阶组件

组件化

Fiber

Hooks

生命周期

源码

全家桶

redux

React-router

SSR/Next.js

性能优化

雅虎军规

重绘回流

缓存

前端监控

性能监控

错误监控

Vue

组件化设计及通信

生命周期

源码

Vue全家桶

Vuex

Vue-router

SSR/Nuxt.js

CSS

盒模型

怪异盒模型

标准盒模型

CSS规范

CSS hack

BFC、IFC、FFC、GFC

CSS3 动画

CSS 分层

SMACSS&lt;br&gt;

BEM

SUIT

ACSS

ITCSS

CSS 矩阵

HTML

语义化标签

多媒体标签

JavaScript

数据类型及转换

面向对象

作用域闭包

异步

模块化

ES6

函数式编程

 Collect

Get Started

Web前端知识框架总结分享

 Collect

Get Started

boostrap知识框架总结分享

 Collect

Get Started

Web前端知识体系大全

 Collect

Get Started

用户调查知识框架总结分享





0 条评论

下一页