字节青训营笔记

青训营第一天——HTML

html:超文本标记语言 a new tip：

<input list="data"> //可以自己输入，也可以选择datalist中的数据（比select标签灵活）
<datalist id="data">
    <option>111</option>
    <option>222</option>
    <option>333</option>
</datalist>
复制代码

文本注释标签：

<cite></cite>:加以区分
<code></code>：代码段标签（多行代码时，可以用pre标签包裹）
<strong></strong>:加粗强调
<em></em>:强调
<q></q>:引号标记
复制代码

总结：

HTML的目的是为传递内容，标记内容，最终达到语义化（无论是标签，属性或属性值都有它自己的含义，需要我们在不同的地方选择合适的标签）

青训营第二天-CSS

选择器：

.A —— 类选择器   —— 选择class="A"的标签
#A —— id选择器   —— 选择id="A"的标签
A  —— 标签选择器 —— 选择A标签
A B —— 后代选择器 —— 选择为A后代元素的B
A>B —— 子选择器 ——  选择为A子代元素的B
A+B —— 兄弟选择器 —— 选择为A同级的元素B
A~B —— 相邻选择器 —— 选择与A相邻的同级元素B
复制代码

伪类选择器： A::before,A::after —— 在使用伪类时content是必要的属性(例)

         .rating {
            position: relative;
            text-decoration: none;
            color: white;
            font-size: 1.2rem;
            text-align: center;
        }

        .rating::after,
        .rating::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            height: 50px;
            width: 50px;
            border: 5px solid rgb(151, 211, 207);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0.2);
            opacity: 0;
            transition: all 0.3s linear;
        }
        .rating::after {
            width: 70px;
            height: 70px;
            border: 2px solid rgb(122, 203, 223);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0.8);
        }
        .rating:hover::after,
        .rating:hover::before {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        } 
复制代码

定位position:

相对定位relative：用于设置相对自己所在位置的偏移距离，该元素实际任在原位置没有脱离文档流，只是渲染效果的偏移。
绝对定位absolute: 相对与它的父辈元素进行定位，原位置没有该元素，脱离了文档流
固定定位fixed: 相对与视图窗口进行定位，原位置没有该元素，脱离了文档流
注：只有在position的定位下，才能对层级设置z-index生效。
复制代码

青训营第三天——JS

数组

二维数组的定义：

var arr = new Array(5).fill(new Array(5).fill(1))
arr[4][2] = 0
console.log(arr)
复制代码

输出：这样的结果与我们预想的不同，因为在定义数组时使用fill（）函数传入数组对象去填充数组，残剩二维数组时，实际传入fill()函数的是数组对象的储存地址,即指向同一个数组。

arr0

传入的数组

arr1

...

因此在定义二维数组时，不能采用上面的方法，应采用循环的方式

        var grid = new Array(n)
        for (let k = 0; k < n; k++) {
            grid[k] = new Array(n)
            for (let b = 0; b < n; b++) {
                grid[k][b] = 1
            }
        }
复制代码

数组拷贝：

浅拷贝：拷贝的是数组的内存地址，在操作一个数组时，会影响其他数组 深拷贝：拷贝的时数组的值，在操作一个数组时，不会影响其他数组

    var arr1=[1,1,1]
    var arr2 = arr1//浅拷贝
    var arr3 = arr1.concat([])//深拷贝，或[].concat(arr1)
    var arr4 = [...arr1] //深拷贝
    var arr5 = arr1.slice(0)
    arr2[1]=2
    arr3[1]=3
    arr4.push(4)
    arr5.push(5)
    console.log(arr1,arr2,arr3,arr4,arr5)
复制代码

输出：

HTTP

初识HTTP

http:超文本传输协议；属于应用层协议，基于TCP协议，无状态请求,简单可拓展

跨域：根本原因是浏览器的同源原则。

1.cors:服务端通过添加相应的响应头去解决 2.代理服务器：客服端通过配置代理服务器