# biji2103
**Repository Path**: wangdawei0418/biji2103
## Basic Information
- **Project Name**: biji2103
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-03-22
- **Last Updated**: 2023-08-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# biji2103
###### HTML5新标签
* header
* footer
* article 文章部分
* aside 侧边栏
* section 区域
* dialog 对话框
* nav 导航
* time 时间（行内）
* video 视频
###### 弹性盒部分
```
弹性盒
父元素
形成弹性盒 display:flex;
主轴对齐方式 justify-content
space-between
space-around
space-evenly
交叉轴对齐方式 align-items
center 垂直居中
flex-start 开始
flex-end 结尾
换行/换列 flex-wrap
wrap
多行/多列之间的对齐方式 align-content
space-between 两端对齐
enter 弹性盒竖着的中间
flex-sspace-around 中间是两端的二倍
space-evenly 平均
ctart 弹性盒的最上面开始挨个排
flex-end 弹性盒的最下面开始挨个排
交叉轴和主轴方向 flex-direction
row
row-reverse
column
column-reverse
子元素
调整子项元素在交叉轴的对齐方式align-self
flex-start 交叉轴的起点
flex-end 交叉轴的终点
center 交叉轴中间
```
###### 媒体查询 & 响应式布局
``` css
@media screen and (max-width:700px){
body{
background-color:#00f;
}
}
@media screen and (max-width:1000px) and (min-width:701px){
body{
background-color:#0f0;
}
}
// 超小屏幕 手机 (<768px)
// 小屏幕 平板 (≥768px)
// 大屏幕 大桌面显示器 (≥1200px)
```
###### vw和rem单位
* vw:宽度单位，1vw代表视口宽度的百分之1。
* rem:根元素文字大小的一倍。
###### 移动端看图规划流程：
1.确认设计图的倍率关系 640和750 是2倍图；1200以上 是3倍图； 320 是1倍图；
2.将设计图在PS中“图像大小”改变图片的尺寸，图片尺寸= 原尺寸/倍率;
3.设置HTML元素的font-size
```
640设计情况下：
布局视口:320px 1vw:3.2px , 1rem:3.2px
希望：1rem = 100px
1vw:3.2px
?vw:100px 100 / 3.2 = 31.25
31.25vw:100px
所以我们要为HTML元素的设置font-size：31.25vw;
以后每一次量尺寸自动将尺寸值/100 并将单位修改为rem;
```
```
750设计情况下：
布局视口:375px 1vw:3.75px , 1rem:3.75px
希望：1rem = 100px
1vw:3.75px
?vw:100px 100 / 3.75 = 26.667
26.667vw:100px
所以我们要为HTML元素的设置font-size：26.667vw;
以后每一次量尺寸自动将尺寸值/100 并将单位修改为rem;
```
```
1920设计情况下：
布局视口:640px 1vw:6.4px , 1rem:6.4px
希望：1rem = 100px
1vw:6.4px
?vw:100px 100 / 6.4 = 15.625
15.625vw:100px
所以我们要为HTML元素的设置font-size：15.625vw;
以后每一次量尺寸自动将尺寸值/100 并将单位修改为rem;
```
#### JS部分
###### JS的构成
1.ECMAScript
2.DOM(document object model)
3.BOM
###### JS的引入方式:
* 内部
* 外部
* 行内
```javascript
Document
```
###### 变量：存储数据的容器；
```javascript
// 声明变量并赋值
var a = 5;
// 声明变量但是没有赋值，此时变量里面存储的值是undefined
var b;
// 对已有变量进行重新赋值
a = 10;
```
###### 三个暂且需要记住测试方法：
* console.log(exp) 向控制台输出
* alert(exp) 向警告框输出表达式的计算结果
* document.write(exp) 向页面输出
###### 标识符:变量名,函数名,对象的属性名的命名规则；
* 由数字,字母,_和$一个或多个组合构成;
* 数字不能作为开头;
* js对大小写敏感；
###### !!表达式:js中任何拥有返回值（计算结果）的短语都是表达式，任何表达式也都有返回值（计算结果）;
###### 表达式的分类
* 变量和常量都是简单表达式；
* 用运算符将多个表达式组合成了一个新的表达式的形式就是复杂表达式；
###### 运算符：将简单表达式组合成 复杂表达式的方法。
###### !!数据类型
* number(数字类型): 0,1,2,-1,-2,3.14,NaN(非数字),Infinity(无穷大),-Infinity(无穷小)
* string(字符串):"abc","王大伟","1","NaN","true","undefined"
* boolean(布尔值):true(真) false(假)
* undefined(空值):undefined
* Object(对象)
* function(函数)
###### 事件:当发生了某件事儿之后再执行某些代码。
``` javascript
// 1.保证需要绑定事件的元素拥有一个唯一的ID属性
// 2.在JS里使用 元素ID.onclick = function(){
//
// }
// 3.在function(){}大括号中写需要执行的js代码段
btn.onclick = function(){
/* 事件处理函数； 事件句柄 */
console.log(3)
console.log(4)
}
``
###### 其他数据类型转换数字类型：Number(exp) parseInt(exp) parseFloat(exp)
```javascript
var a = "5";
var b = "王大伟";
var c = "5px";
var d = "3.99999";
var e = "3.14px";
// Number():只要不是纯数字的字符串，返回结果一律为NaN
console.log(Number(a))
console.log(Number(b))
console.log(Number(c))
console.log(Number(d))
// parseInt():有转换数字类型和取整两个操作；从字符串中提取数字部分的功能；
console.log(parseInt(a))
console.log(parseInt(b))
console.log(parseInt(c))
console.log(parseInt(d))
// parseFloat():保留小数版本的parseInt()
console.log(parseFloat(e))
```
###### 如何提取input框中输入的内容：` input的ID值.value `