前端知识框架总结分享
2022-10-26 17:42:44 0 举报AI智能生成
登录查看完整内容
前端知识框架总结分享
作者其他创作
大纲/内容
目前不考虑兼容性，请使用谷歌浏览器
注意
推荐使用小写元素名
关闭所有 HTML 元素
关闭空的 HTML 元素
使用小写属性名
HTML5 属性值可以不用引号，推荐使用引号
图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
HTML 注释
命名不要随意，见名知意。
为id或class命名时，多单词以“-”连接，如：demo-one
空格与缩进
代码编写规范
DOCTYPE
文档类型
理解HTML文档流
chartset
......
meta
head标签里面各种标签含义作用
如：meta里的chartset等（chartset为元数据类型）
文档元数据
文字形式
语义标签——用正确的标签做正确的事情，html语义化让页面的内容结构化，结构更清晰。准确使用语义标签，不要滥用
行内元素与块级元素的区别
空元素
Linking（外部引用式）——link 与 @import的区别
Embedding（嵌入式）
Inline（内联式）
引入CSS的三种常用方式以及优先级
嵌入图片等
嵌入内容
交互元素
表格
表单元素
表单属性
表单
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 为同一阶段
如何
HTML5
语法规则
字体
Border
outline
display 与 visibility
id和class选择器
元素选择器
例：:first-line
伪对象选择器（伪元素选择器）
伪类选择器
例：a[rel = "external"]
属性选择器
后代选择器
子代选择器（子元素选择器）
相邻兄弟选择器
关系选择器
选择器
绝对长度：px
长度
颜色名
十六进制
RGB
RGBA
HSL（了解）
HSLA（了解）
颜色的几种表示方法
颜色
取值单位
用户界面
背景
显示样式
标准盒子模型(W3C盒子模型)
IE盒子模型
盒子模型
static
fix
relative
absolute
附：css position基础 https://segmentfault.com/a/1190000003702416
定位（position）
产生浮动的原因
清除浮动的方法
浮动
位置
属性
何时用
如何用
z-index
变换
动画
过渡
状态
打印（了解）
flex布局（flexbox弹性盒子）—— 一维布局
Grid 布局(网格布局)——二维布局
单列布局
float+margin
position+margin
圣杯布局（float+position+负margin+padding）
双飞翼布局（float+负margin）
三栏布局
多列布局
水平居中
垂直居中
常用居中
常用布局
响应式布局
多列
列表
网状布局
布局
媒体查询
CSS3
数据类型
函数
JS作用域
正则表达式
基础知识
对象
鼠标事件
表单事件
事件处理/监听函数
窗口事件
Event对象
事件流
按键事件
事件
web存储
json与xml
web SQL数据库 （了解）
cookie
客户端存储
DOM节点操作
样式操作
脚本化文档
附一篇个人博客：JS DOM操作及扩展 http://blog.csdn.net/qq_33430445/article/details/76977623
DOM操作
BOM
JavaScript特效
JS闭包
插件的使用（自己写个插件，最好自己封装一下）
Ajax（JQuery阶段，原生ajax也要学习）
推荐书籍：《JavaScript高级程序设计》/《JavaScript权威指南》（这两本书用来提高，也可作为新手入门）
学习网站：菜鸟教程或W3school
考核例子：具有JS动画效果的高质量静态网站
JavaScript
JQuery语法
Ajax与原生Ajax
BootStrap的使用
3天
JQuery：菜鸟教程或W3school
BootStrap：https://v4.bootcss.com/
JQuery与BootStrap
XSS、CSRF、Cookie劫持
传输安全
Oauth
Web安全
Linux
关系型数据库（MySql）
json数据库（MongoDB）
内存数据库（Redis）
数据库
框架
应用场景
pm2
Nginx
Docker+自动化
项目部署
Node
PHP
服务器端常识
需求分析
项目分解
代码测试
代码管理
bug追踪
敏捷开发
软件工程
HTTP
TCP/UDP
IP
网络协议
词法分析AST
代码生成
代码转换
编译原理
单例模式
装饰器模式
代理模式
观察者模式
发布订阅模式
设计模式
数组、字符串、队列、堆栈、链表
二叉树
图
数据结构
排序，搜索，遍历
贪婪算法
动态规划
算法
算法、数据结构
单元测试
性能测试
安全测试
功能测试
自动化测试
微信小程序（云开发）
支付宝小程序
头条小程序
百度小程序
小程序
React-Native
Weex
Flutter
App
Uni-app
mpvue
Chameleon
Taro
多端融合
多端应用
loader
plugin
webpack
gulp
grunt
Jenkins
工程化
dom树
CSSOM
render tree
渲染机制
缓存机制
输入url发生了什么
同源策略
浏览器
小游戏
canvas（echarts）
svg（D3）
WebGL（three.js）
可视化
PS切图
图形学
TypeScript
高阶组件
组件化
Fiber
Hooks
生命周期
源码
redux
React-router
SSR/Next.js
全家桶
React
雅虎军规
重绘回流
缓存
性能优化
性能监控
错误监控
前端监控
组件化设计及通信
Vuex
Vue-router
SSR/Nuxt.js
Vue全家桶
Vue
怪异盒模型
标准盒模型
盒模型
CSS规范
CSS hack
BFC、IFC、FFC、GFC
CSS3 动画
SMACSS<br>
BEM
SUIT
ACSS
ITCSS
CSS 分层
CSS 矩阵
CSS
语义化标签
多媒体标签
HTML
数据类型及转换
面向对象
作用域闭包
异步
模块化
ES6
函数式编程
前端知识框架总结分享
0 条评论
回复 删除
下一页
