基础模块
动态数据放在数据库
==不要写太复杂的选择器 ==
- html
- 网页基础
- 选择器优先级
- 内联>ID>类和伪类>标签>通用
- 一般复杂的优先级大于简单的
- css：网页样式
- RGB表示法
- rgb（0，255，255，0.3）——最后的数表示透明度
- 通过红蓝绿三种颜色表示所有颜色
- ![[Pasted image 20240516123405.png]]
- 16进制表示法
- 0到FF的表示
- #00ffff
- 每两位数表示255，和rgb类似
- 盒子模型
- ![[Pasted image 20240518093002.png]]
- 内联框（inline）
- 仅占据自己所需的空间
- 盒子模型只影响本行内，不受width和height影响，只影响left，right
- 块状元素（block）
- 尽可能占据所有空间，不能并排
- 内联块框（inline—block）
- 内部像内联，外部像块
- 只占据自己所需的空间
- 但受width等所需影响
- 定位模式
- 正常定位
- 根据源代码定位
- 绝对定位
- 自己定位，可能重叠
- 绝对定位的位置受自己第一个属性为相对定位的父元素决定
- 布局
- 文本图像和其他所有元素在网页上排序放置
- 页面布局
- 组件布局
- 布局类型：
- 浮动布局
- flexbox布局
- 适合一维布局
- 允许浏览器自动创建空间
- 弹性容器（flex container）
- gap
- justfy-content
- align-items
- ![[Pasted image 20240521151906.png]]
- 弹性容器（flex items）
- 布局方向叫主轴（main axis）和（cross axis）
- ![[Pasted image 20240521152004.png]]
- ![[Pasted image 20240521151608.png]]
- CSS grid布局
- 网格容器（grid container）
- grid-template-rows
- grid-template-columns
- row-gap：0
- colmun-gap：0
- justigy-items:stretch(水平对齐)
- align-items:stretch（垂直对齐）
- justify-content:start
- item-content:start
- 网格线（grid lines）
- ![[Pasted image 20240525121439.png]]
- 网格项目（grid items）
- grid-column:
- grid-row:
- justify-self:
- align-self:
- js
- 响应用户输出
数组就是对象
- DOM
- 文档对象模型
- html和js之间的连接点
- js特点
- 高级语言
- 不需要向系统请求内存
- 低级语言（C）
- 垃圾收集
- 自动删除旧的，未被使用的数据
- 即时编译
- 编译发生在js引擎内部
- 多范式
- 范式分类
- 程序式编程
- 面向对象编程（OOP）
- 在js中的所有值基本都是对象，除了原始值（数字，字符）
- 函数式编程（FP）
- 头对象函数
- 函数被视为常规变量
- 动态语言
- 变量类型可以随意改变
- 单线程和非阻塞事件循环并发模型
- js引擎可能同时处理多个事件
- js引擎
- 执行js代码的计算机程序
- 谷歌的V8
- nodejs
- 调用栈
- 代码实际运行的地方
- 堆
- 储存对象的地方
- 编译过程
- 机器码编译，生成可执行性文件
- 在CPU中执行
- 解释过程
- 代码同时翻译和执行
- js混合使用编译和解释（即时编译）
- 不会生成可执行性文件
- ![[Pasted image 20240601104555.png]]
-
- 执行上下文
- 环境
- 范围界定
- 作用域链——与执行环境无关
- 声明变量的地方
- 全局作用域
- 函数作用域
- 块作用域‘
- ES-6之后；
- if等语句中定义的变量也是局部变量
- 但只有let和const变量
- 变量提升（hoisting）
- 函数声明 被提升 值为真实的函数
- var 被提升 值为undefined
- let和const 不被提升
- 函数表达式和箭头函数 根据定义方式
- ==不要让箭头函数作为方法，因为窗口函数==
## 工具
- 包管理器
- 包：软件片段
- npm
- 自动构建工具
- gulp webpack parcel
- 版本控制
- git
## scss响应式设计
- css的扩展
## js框架
- react
- angular
- vue