C1见习工程师学习笔记

键盘里的咬肌

已于 2022-06-29 11:00:39 修改

阅读量121

点赞数

文章标签：学习 css3 html

于 2022-06-01 19:47:20 首次发布

本文链接：https://blog.csdn.net/qq_44434884/article/details/125089200

版权

C1见习工程师学习笔记

一、HTML基础

在这里插入图片描述

1、开发工具

开发工具：vscode，插件：live server，在html文件右键选择open with live server就可以在浏览器中实时看到页面效果。

2、html基本结构

快捷构建：! + Tab键

<!DOCTYPE html>
<!-- 使用html5的标准解析文档 -->
<html lang="en">
<!-- 根标签 -->
    <head>
        <!-- 引入与网页相关的描述及配置信息 -->
        <meta charset="UTF-8">
        <!-- 不使用utf-8的编码规则的话，某些低版本的浏览器可能会出现乱码 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 正文写这里 -->
    </body>
</html>

3、head标签

在这里插入图片描述

meta标签
- 作用：信息引入及说明
- keywords 关键词引入：content里面的关键词利于网络爬虫，对网页进行检索，有合适的话就会提供给读者
```
<meta name="keywords" content="word1,word2,word3">
```
- description 描述引入：
```
<meta name="description" content="页面的描述">
```
- author 作者引入：
```
<meta name="author" content="author name">
```
- viewport 配置引入：
  
  实际上是对移动端的规范和约束
  
  页面从网页端切换到移动端时会等比压缩，字体会变小，为了防止出现等比压缩，使用viewport配置
  
  一些常见的设置：
  - width 视口宽度
  - height 视口高度
  - initial-scale 初始缩放比例
  - maximum-scale 最大缩放比例
  - minimum-scale 最小缩放比例
  - user-scalable 是否允许用户缩放：0：不允许缩放，此时最大/小缩放比例没有用；1：允许缩放
link 标签：引入外部资源
```
<link rel="stylesheet" href="css/now.css">
```
- href：链接文件的路径
- rel：当前文档与链接文档的关系
  - stylesheet：css样式表
  - icon：小图标
- type：目标文件的类型
style标签：内部样式表

script标签：引入js文件

<script src="js/now.js"></script>
<script>
    alert("alert window 2")
</script>

4、块标签

特点：独占一行，默认宽度占满父级，高度为0，子集内容撑开高度。（吸烟入肺！）
h1标签：大标题，一个页面只能有一个
h2标签：副标题，一个页面不要超过8个
h3标签：小标题
搜索权重：title > h1 > h2 > h3
列表：ul 无序，ol 有序，都搭配 li 使用
html5新增标签：article, section, aside, nav, header, footer

本质：自带语义的div，便于一眼看懂代码结构，以前的div+class偏麻烦

5、行标签

特点：
- 同排序跟显示，遇到父级边界换行
- 不支持宽高，内容撑开宽高
- 不支持上下外边距（margin-top/bottom别用）
- 不正常显示上下内边距（padding-top/bottom别用）
- 换行被解析（导致页面显示时行标签之间有空格）
a标签：
- href属性：#：重定向本页面
- target属性：默认值：_self（在本页面打开新地址）， _blank：在新页面打开新地址
i标签：斜体，Italian
b标签：粗体，Bold
sub标签：下标（b圈在下）
sup标签：上标（p圈在上）
html5新标签：em, strong
- em标签：替代i标签，具有一定的搜索权重
- strong标签：替代b标签，具有一定的搜索权重

6、行块标签

特点
- 同排序跟显示，遇到父级边界换行
- 没有宽高时内容撑开宽高
- 换行被解析
img标签
- src：资源路径
- title：鼠标悬停时的提示文本
- alt：图片不能正常显示时的提示文本
- 只给宽度/高度时，会等比例变化

7、行块标签互换

行标签的样式其实是 display: inline
块标签的样式其实是 display: block
行块标签的样式其实是 display: inline-block

二、CSS入门

在这里插入图片描述

1、引入方式

内部：head标签里面写style标签，再写样式，也可以在这里引入别的样式文件（@import url(“xxxx.css”); ）
外部：head标签里面写link标签，引入样式文件，样式文件里面还可以引入别的样式文件（@import url(“xxxx.css”); ）
内联：直接在div标签等里面写style属性，在style属性里面写样式
优先级：内联 > 内部/外部（就近原则）

2、背景色

```
background-color: red;
```
颜色表示方式
- 对应英文名，如 red
- 十六进制，如 #ffffff
- rgb(红, 绿, 蓝)，红绿蓝取值范围0-255，red, green, blue
- rgba(红, 绿, 蓝, 透明度)，透明度取值范围0-1（0：完全透明，1：完全不透明，0.5的0可以省略），red, green, blue, alpha

渐变

background: -webkit-linear-gradient(
        top, rgba(0,0,0,0), rgba(0,0,0,1)
    );

3、背景图

background-image: url(xxx.jpg);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center center;

图片大小表达方式
- background-size: 宽高;
- background-size: 100px;（给定宽，等比例变化）
- background-size: auto 100px;（给定高，等比例变化）
- background-size: contain;（图片的长边占满父级）
- background-size: cover;（图片的短边占满父级）
图片重复
- 默认重复平铺，不想重复就设no-repeat
- 横向平铺：repeat-x
- 纵向平铺：repeat-y
图片位置
- left, center, right, top, bottom 排列组合
- background-position: x y;（左上角为原点，y轴向下，意思是图片的左上角顶点所在位置是块标签以左上角为原点(x, y)坐标的位置）
注意背景图与图片的使用区别
- 图片上面要显示文字时，使用背景图来显示图片更为合适

4、文本常用样式

color：字体颜色
font-size
- 默认16px，一般浏览器支持的最小大小为14px，开发版可以随意
- 相对单位：em，1em=父级标签的字体大小
font-family：一般会写多种字体样式备用，显示效果取决于当前电脑所支持的字体有哪些
文本的对齐方式：text-align属性，center 水平居中
行高：line-height属性，行高等于标签高度时文本会垂直居中
首行缩进：p标签，text-indent属性
字体间距：letter-spacing属性
单词间距：word-spacing属性
文本装饰线：text-decoration属性，none, underline, overline, line-through
字母大小写：text-transform属性，uppercase(全大写), lowercase(全小写), capitalize(首字母大写)

5、常用选择器

通配：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

id：#{}，一个id名，在同一个html中只能出现一次
class：.{}
标签名：p{}
后代：ul li p{}
群组选择器：span, p{}
子代：直接子级，li>p{}
属性选择器：[class] {}, [class=“ok”] {}
兄弟选择器：~

6、选择器优先级

内联样式(1000) > id(100) > class(10) > tag(1)
后代选择器的权重即各个相加之和

三、盒模型

1、

四、浮动与定位

在这里插入图片描述

1、

五、JS入门

1、引入方式

内部
- head标签内，添加script标签
- body标签内，添加script标签
- body标签外，html标签内，添加script标签，浏览器读取时会自动放到body里面
外部
- head标签内，添加script标签，src属性写明文件路径
注意：
- 不要又用src又在标签内写js代码，会只读取src引入的之后就不读下面写的代码了
- 引入方式没有优先级，读取时按顺序执行

2、弹窗alert

alert("xxx");

3、输出console

// 打印一般信息
console.log();
console.info(); // 和log差不多，log更常用
// 打印错误信息
console.error();
// 打印警告信息
console.warn();

4、变量

变量是标识符的一种，标识符包括：变量、函数名、属性名
标识符命名规则：
1. 首字符必须是字母、下划线或者$
2. 其他字符可以是字母、下划线、$或者数字
3. 建议使用驼峰命名法（小驼峰：nameExample；大驼峰：NameExample）
4. 见名知意
js的变量都是弱类型（编译后确定数据类型），C语言等是强类型（编译前确定数据类型）

5、数据类型（6种）

数字型 Number，整型、浮点型都是数字型；
字符串 String，单引号/双引号包裹起来的都算（ES6新增：反引号，即Tab键上面的那个键）；
布尔 Boolean；
未定义 Undefined：只声明，不定义，缺省；
空 Null：var x = null;；
对象类型 Object：标签、数组、对象、Math、Date、函数，都是。

前五种是基础类型，对象是特殊类型。
null 用 typeof 在控制台打印是 Object，但其实是null。
Number 有一个特殊值：NaN（not a number），数据转换时可能会出现，typeof 打印出来是 Number。

6、运算符

算术运算符：+ - * / % ++ –
- ++、-- 在前，先自增/减，再赋值
- ++、-- 在后，先赋值，再自增/减
赋值运算符：= += -= *= /= %=
比较运算符
- == 等于 != 不等于（只判断内容大小）
- === 恒等于 !== 恒不等于（既判断内容大小，又判断数据类型）
- > 大于 < 小于 >= 大于等于 <= 小于等于
- 返回结果都是布尔值
- 字符串比较时挨个比较每个字符的 ASCII 码大小，遇到不相等的字符时立即返回结果

7、数据类型转换和Math对象

隐式转换：
1. 数字、字符串：数字与字符串进行四则运算，+ 转字符串，其余转数字
2. 布尔：非0为真，非空为真（null、“”）
强制转换：
1. 字符串转数字：Number(str)，当字符串不全为数字时，转换结果为NaN
2. 数字转字符串：String(num)
3. 数字转数字：parseInt(num)，parseFloat(num)，int会只保留整数，不会四舍五入
Math对象
1. 向下取整：Math.floor(n);
2. 向上取整：Math.ceil(n);
3. 四舍五入：Math.round(n);
4. 最大/小值：Math.max(n);，Math.min(n);
5. 随机数：Math.random(n);，取值范围：[0, 1)
6. 求幂：Math.pow(底数, 指数);，也可以 底数 ** 指数
7. 开平方：Math.sqrt(n);
8. 绝对值：Math.abs(n);
9. 三角函数：Math.sin(n);等
10. 圆周率：Math.PI;

8、函数

目的：代码简洁，复用率
声明：function 函数名 (一组形参) { 代码体 }
调用：函数名 (一组实参);
一组参数最多255个，可以没有参数

参数的数量不确定时，声明函数时不写形参，调用函数时通过arguments来获取参数

function add() {
    var sum = 0;
    for (var i=0; i<arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
var n = add(1,2,3,4,5);
console.log(n);

匿名函数

var add = function(a,b) {
    return a + b;
}
console.log(add(1,2));

自执行函数

(function(a,b,c) {
    console.log(a+b+c);
})()
// (function(a,b,c) {    console.log(a+b+c);}) 相当于声明
// () 相当于调用

闭包

作用：局部变量数据持久化
表现形式：函数内部嵌套函数
缺点：造成一定的内存压力
本质：函数内有另一个函数调用了变量，使得变量没有释放，执行完才释放

例子：

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>

var buts = document.getElementsByTagName("button");
// 有问题的版本，会一直打印5
for (var i=0; i<buts.length; i++) {
    buts[i].onclick = function() {
        console.log(i);
    }
}
// 解决方式1：闭包
for (var i=0; i<buts.length; i++) {
    (function(item) {
        buts[i].onclick = function() {
            console.log(i);
        }
    })(i)
}
// 解决方式2：对象
for (var i=0; i<buts.length; i++) {
    buts[i].index = i; // 单独做标记
    buts[i].onclick = function() {
        console.log(this.index); // this代表当前事件的拥有者
    }
}

9、作用域

全局变量——全局作用域
局部变量——局部作用域，在函数内部声明，不可以在外部调用
JS变量提升

10、流程控制语句switch

switch(判断的变量) {
    case 常量1:
        代码块1
        break;
    case 常量2:
        代码块2
        break;
    ......
    default:
        代码块n
        break;
}

11、循环

for() {}
while() {}
do{}while();

关键字：
- continue：终止本次循环，进入下一次循环
- break：终止所有循环

12、获取元素

通过id名获取

var d1 = document.getElementById("d1");
d1.innerHTML = "新的内容"; // 更改标签内的内容
d1.className = "color"; // 更改class名，便于修改样式
d1.style.fontSize = "20px"; // 指定详细样式（内联）

通过class名获取

var lis = document.getElementsByClassName("item");
for (var i=0; i<lis.length; i++) {
    lis[i].style.textAlign = "right";
}

通过标签名获取

var lis = document.getElementsByTagName("li");

by id 时是 element，by class 和 tag 时是 elements

13、数组

3种创建方式
1. var array = new Array(1,2,3,4,5);
2. var array = new Array(3); array[0] = 1;
3. var array = [1,2,3,4,5];
数组自带length属性，可用于遍历
可以通过取下表（索引）得方式获取或修改对应的数组元素
常见操作
1. 数组元素的修改与访问：通过下标
2. push(n)：在数组的最后添加一个元素n
3. pop()：删除数组最后一个元素
4. unshift(n)：在数组的开头添加一个元素n
5. shift()：删除数组的第一个元素
6. str1.concat(str2)：拼接数组，返回一个新数组
7. splice(下标, 删除元素的个数, 新插入的元素列表)
8. slice(start[, end])：截取元素，返回一个新的数组，[, end]可给可不给，左闭右开
9. reverse()：反转数组
10. join(规则)：按照规则将数组转为字符串
11. indexOf(子元素)：从数组中查询子元素，返回下标，没有就返回-1
12. sort()：排序
```
var arr = [7,18,-9,-23,0,56];
console.log(arr.sort());
// 会出错，因为本质是按ASCII码来排
```
```
// 不会出错的版本
var arr = [7,18,-9,-23,0,56];
// a b是数组相邻的两个值
// 回调函数，如果返回值大于0，就交换a b的顺序，最终形成升序
arr.sort(function(a, b) {
    return a - b;
})
console.log(arr);
```

遍历

for、while

forEach

// 函数作参数，称之为回调函数
// item：数组的每一个值
// index：下标
books.forEach(function(item, index) {
	console.log(item, index)
})

map：遍历，回调函数中return一个新的值，返回新数组

var arr = [1,2,3,4];
var newArr = arr.map(function(item) {
    return item+1;
})
console.log(newArr);

14、基本数据类型和引用数据类型

基本数据类型的值在栈内存
引用数据类型的值在堆内存，栈内存中存储指向值的地址

基本eg：

var a = 1;
var b = a;
b = 2;
console.log(a); // 输出1

引用eg：

var arr1 = [1,2,3];
var arr2 = arr1; // 实际上是把arr1的地址复制过来了（浅拷贝）
arr2[0] = 10;
console.log(arr1[0]); // 输出10

15、对象结构

定义

var object = {
	key1: "value1",
	key2: "value2"
}

访问

通过“.”语法

console.log(object.key1); // 访问
object.key1 = "value3"; // 修改
console.log(object); // 查看修改结果

通过 [变量]

var str = "key1";
console.log(object[str]);

可以为对象添加任意属性

object.key3 = "value3";
console.log(object);

16、字符串操作

反引号better：支持换行，插入变量方便

<div id = "eg"></div>

var deg = document.getElementById("eg");
var x = "value";
// 方式1：一般引号
deg.innerHTML = "<p>xxxx</p>"+x+"<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>";
// 方式2：反引号
deg.innerHTML = `
	<p>xxxx</p>
	<p>${x}</p>
	<p>xxxx</p>
	<p>xxxx</p>
	<p>xxxx</p>
	<p>xxxx</p>
`;

获取字符串长度：自带length属性
toUppercase()大写，toLowercase()小写

字符串转数组：split(某种规则)

var str = "你好美女";
var arr = str.split(""); // arr = ["你","好","美","女"]
var str = "你-好-美女";
var arr = str,split("-"); // arr = ["你","好","美女"]

获取某个元素第一次出现的下标：indexOf()

var str = "123123";
console.log(str.indexOf(2)); // 输出1
console.log(str.indexOf(4)); // 输出-1，没出现的元素

截取部分字符串
1. substring(start, end)，取值范围左闭右开
2. substr(start, length)
替换字符串：replace(原来的, 要换成的)，一次性替换多个需要用正则表达式，否则只会替换检测到的第一个

17、计时器

setTimeOut(回调函数, time)：延迟time后，执行一次回调函数

setInterval(回调函数, time)：每延迟time后，执行一次回调函数

var timer = null;
var count = 0;
timer = setInterval(function() { // 开始
    count++;
    if(count == 10) {
        clearInterval(timer) // 停止
    }
    console.log("输出示例");
}, 1000)

var timer = null;
// 不要多次使用timer，否则会出问题，例如↓
for (var i=0; i<2; i++) {
    timer = setInterval(function() { // 开始
        console.log("输出示例");
    }, 1000)
}
// 会两个两个地输出，因为setInterval是异步的
// 所以，每次开启计时器之前记得先停止之前的计时器

18、日期对象

创建：var date = new Date();，会获取当前的时间戳
获取当前年或月等
1. 仅年份：date.getFullYear()
2. 仅月份：date.getMonth()，取值范围[0,11]，9月显示8
3. 仅日期：date.getDate()
4. 仅周几：date.getDay()，周日返回0
5. 仅小时：date.getHours()
6. 仅分钟：date.getMinutes()
7. 仅秒数：date.getSeconds()
8. 距离1970.1.1的毫秒数：date.getTime()

六、DOM

1、介绍

document object model，文档对象模型
作用：对文档节点元素进行增删改查操作，配合js实现页面交互

2、增

从无到有即新增。

创建一个新的元素

var 变量名=document.createElement("标签名");//调用该方法后会返回一个空白的节点对象（标签）
var oli=document.crateElement("li")
//然后就可以给该空标签添加内容、属性、样式了
变量名.innerText="西瓜";
变量名.className="box";
变量名.style.color="red";
//创建了后并没有告诉他要放到哪个位置去显示，这时还需要指定显示位置。即此步骤相当于是Ctrl+C

插入到指定的位置去(在父级的内部的末尾追加)-粘贴到指定位置
```
//公式：
父节点.appendChild(子节点)
```
插入到指定的位置去(在兄弟元素的前面追加)-粘贴到指定位置
```
//公式：
父节点.insertBefore(新节点,旧节点);
```

3、删

即将元素彻底删除，不是清空内容。

removeChild

父节点.removeChild(要删除的节点);
//在父节点中删除某个子节点
list.removeChild(child[0])

//如果是删除全部：没有现成的方法，可以使用循环一个个删除

4、改

replaceChild

父节点.replaceChild(新,旧);
//将旧节点换成新节点

5、复制节点

浅复制（默认，只复制标签，不复制内容）

//1. 复制
要复制的节点.cloneNode();//
list.cloneNode();
//2. 粘贴到指定的位置
用上面的appendChild或insertBefore来实现

深复制（所有的都复制：包含内容、样式、属性等，一模一样）

//1. 复制
要复制的节点.cloneNode(true);//
list.cloneNode(true);
//2. 粘贴到指定的位置
用上面的appendChild或insertBefore来实现

6、查

查找某个具体元素-4个选择器

id，class，tag，表单的name

ES6新方法

document.querySelector("#warp"); // 获取id明为warp的标签

document.querySelectorAll("p"); // 获取所有p标签
document.querySelectorAll("p")[1]; // 获取第二个p标签

找到该元素后

a. 属性的添加和修改

节点.属性

b.内容进行添加和修改

节点.innerText  
节点.innerHTML
节点.value

c. 给其添加样式

节点.style.样式名="css样式值"

从任意节点出发，可以往上往下往平级找其他的任意节点（6人理论）

往上找（找祖先）

节点.parentNode;//父节点

//找爷爷，则需要继续通过父节点点出来，即可能要点多次parentNode
节点.parentNode.parentNode;

往下找（找儿子、孙子）

// 1. 找所有的儿子
节点.children;
// 不建议用childNode，会找到文本节点（换行），还有注释，我们不需要对这些搞操作

// 2. 找大儿子
节点.children[0];
节点.firstElementChild;

// 3. 找小儿子
节点.children[节点.children.length-1];
节点.lastElementChild;

// 4. 找其他儿子
// 只能通过下标来找

// 5. 找孙子
节点.firstElementChild.children;// 找到它大儿子的孩子
节点.children.children;// 错误的，因为中间的children得到的是一个数组，必须要添加下标
节点.children[1].children;// 正确的

找兄弟

// 1. 找哥哥（紧挨着它的上一个兄弟）
节点.previousElementSibling;//该节点的上一个兄弟节点
节点.previousElementSibling.previousElementSibling; //他哥哥的哥哥

// 2. 找弟弟（紧挨着他的下一个兄弟）
节点.nextElementSibling;//找一个弟弟，ie6、ie7、ie8不认
// nextSibling会把文本节点（换行）也识别，不好

// 兼容性写法：（nodeType返回值：1 元素节点；2 属性节点；3 文本节点；4 注释）
节点.nextSibling.nodeType == 1 ? 节点.nextSibling : 节点.nextElmentSibling

// 场景：如果要找到们某个元素的所有的兄弟或所有的哥哥或所有的弟弟，怎么办？这样官方没有提供现场的方法，可以自己写一个方法来实现。

7、操作属性的方法

节点.属性名=”属性值“

节点.id="box"
节点.title="sss"
节点.title="";

获取属性

<div id="d1"></div>
//上次课
var id=节点.id;// "d1"
//今天
节点.getAttribute("属性名");//"d1"
节点.getAttribute("id");//"d1"

设置\修改属性

//上次课
节点.id="box";

//今天
节点.setAttribute("属性名",'属性值');
节点.setAttribute("id",'box');

删除属性

//上次课没有，只能清空值

//今天
节点.removeAttribute("属性名");

usElementSibling;//该节点的上一个兄弟节点
节点.previousElementSibling.previousElementSibling; //他哥哥的哥哥

 // 2. 找弟弟（紧挨着他的下一个兄弟）
 节点.nextElementSibling;//找一个弟弟，ie6、ie7、ie8不认
 // nextSibling会把文本节点（换行）也识别，不好
 
 // 兼容性写法：（nodeType返回值：1 元素节点；2 属性节点；3 文本节点；4 注释）
 节点.nextSibling.nodeType == 1 ? 节点.nextSibling : 节点.nextElmentSibling
 
 // 场景：如果要找到们某个元素的所有的兄弟或所有的哥哥或所有的弟弟，怎么办？这样官方没有提供现场的方法，可以自己写一个方法来实现。
 ```