目录

计算机通识

进制转化

位运算

储存单位换算

宽带换算

数据校验

奇偶校验

CRC循环冗余（不一定考）

字符编码

ASCII码

多媒体格式

码率计算公式

TCP/IP协议簇

子网划分

等长子网划分（根据子网数划分）

不等长子网划分（根据每个子网内的主句数分别划分子网段）

IPV4

地址分类

私有IP地址

IP报文格式

IPV6

表示方法​

地址类型

OSI7层模型

各层作用

各层协议

域名规则

网络拓扑

网络命令

ping命令

ipconfig/ifconfig命令

netstat命令

常用网络端口

端口范围：

常用端口范围：

TCP/IP使用的端口号：

其他：

HTTP报文识别

请求报文

响应报文

HTTP是一种无状态(stateless) 协议

HTTP请求方法

常见http状态码

HTTPS基本概念

工作流程

HTTP 与 HTTPS 区别

数据结构

链表

数组

堆

栈

队列

树

图

散列表（Hash）：

算法常识

查找

排序

WEB基础

HTML元素

文档元数据

内容区域标签

1、

标签

2、元素

3、标签

4、标签

5、元素

转义字符

文本内容标签

内联元素标签

图片与多媒体标签

表格内容标签

CSS

引入方式

背景属性

1、background-size属性

2、background-repeat

3、background

字体样式

基础选择器

伪类选择器

伪元素选择器

CSS优先

块元素与行内元素

盒子模型

定位

浮动

JS基础

变量命名规则

逻辑运算

隐式类型转化

条件分支

for循环

Math内置对象

对象属性

函数定义与调用

常见内置函数

字符串定义与转义字符

字符串常见方法与属性

数组

Web进阶

DOM结构及节点

常用节点获取方法和属性

DOM修改

DOM添加

DOM删除

DOM控制CSS样式

节点写入

事件基础

鼠标及键盘事件

窗口事件

BOM window对象

BOM计时器

计算机通识

进制转化

我之前在复习数字逻辑电路时写过进制转化，这里不写了，直接给链接，有例题

数字电子技术复习第一章_yuwoxinanA3的博客-CSDN博客   看第1.2数制与编码

位运算

这个也直接给链接

位运算（&、|、^、~、>>、 | 菜鸟教程

储存单位换算

1 字节（Byte）= 8 位（bit）
1KB（Kilo Byte，千字节）= 1024B（Byte）
1MB（Mega Byte，兆字节）= 1024KB
1GB（Giga Byte，吉字节）= 1024MB
1TB（Tera Byte，太字节）= 1024GB
1PB（Peta Byte，拍字节）= 1024TB
1EB（Exa Byte，艾字节）= 1024PB
1ZB（Zeta Byte，泽字节）= 1024EB
1YB（Yotta Byte，尧字节）= 1024ZB
1BB（Bronto Byte，珀字节）= 1024YB
1NB（Nona Byte，诺字节）= 1024BB  
1DB（Dogga Byte，刀字节）= 1024NB

宽带换算

任务里讲的确实草率，这里引用简单易懂的说法

日常生活我们都认为为什么装了百兆宽带，而下载速度只有几十MB/s呢？看看下面你就懂了

mbps是Million bits per second的缩写，是一种传输速率单位，指每秒传输的位（比特）数量

通常我们说的宽带的100兆还是千兆啊，说的就是网络的带宽，是一Mbps为单位的

1Mbps=0.125MB/s（等号左边是带宽，等号右边是网速）

Mbps缩写中严格限定M为大写，b、p、s为小写

换算实质：
4Mbps=每秒钟传输4M比特，要注意单位，4M比特不是4M字节

100Mbps=100/8=12.5MB/s
4Mbps=4/8(MB/s)=0.5MB/s

数据校验

奇偶校验

CRC循环冗余（不一定考）

B站某博主的10分钟视频

【期末复习】7天快速通过计算机网络期末考试｜谢希仁版｜考前急救｜高效通过｜粉丝投稿_哔哩哔哩_bilibili大家觉得视频还不错，记得关注、点赞、硬币三联哈，希望大家多多支持我们 谢谢！！ 【资料】：免费获取计算机网络期末复习资料，思维导图（进交流裙获取：490042041） 【答疑】：大家学习过程中有任何问题，会第一时间回复大家（评论里提问）https://www.bilibili.com/video/BV1PK4y1X7ze?p=14

字符编码

ASCII码

 多媒体格式

码率计算公式

码率（kbps）= 文件大小（KB）*8/时间（秒）

TCP/IP协议簇

子网划分

等长子网划分（根据子网数划分）

题目：请将IP网络183.164.128.0/17划分为等长的8个子网，并分别给出每个子网的子网地址、广播地址、子网掩码、IP 地址总数、可分配IP地址数和可分配IP地址范围。

不等长子网划分（根据每个子网内的主句数分别划分子网段）

题目：某ISP拥有一个网络地址块201.123.16.0/21, 现在该ISP要为4个组织分配IP地址，其需要的地址数量分别为985、 486、 246以及211， 请给出一个合理的分配方案，并说明各组织所分配子网的子网地址、广播地址、子网掩码、IP 地址总数、可分配IP地址数和可分配IP地址范围。

IPV4

地址分类

私有IP地址

IP报文格式

IPV6

表示方法

地址类型

OSI7层模型

各层作用

各层协议

域名规则

网络拓扑

 

网络命令

ping命令

ping命令：这是在开发中使用频率极高的一个命令，主要用于确定网络的连通性，例如很多刚刚安装操作系统的计算机，第一件事就是先看看是否能联网，所以往往执行的第一条命令就是ping命令。它的格式是：ping 主机名/域名/IP地址。

ipconfig/ifconfig命令

ipconfig/ifconfig命令：当使用不带任何参数选项ipconfig/ifconfig命令时，显示每个已经配置了的接口的IP地址、子网掩码和缺省网关值。其中在Windows中使用的是ipconfig，而在Mac或Linux系统中，使用的是ifconfig。

netstat命令

netstat命令：能够显示活动的TCP连接、计算机侦听的端口、以太网统计信息、IP路由表、IPv4以及IPv6统计信息，通过它可以了解网络当前的状态。

常用网络端口

端口范围：

TCP与UDP段结构中端口范围在0～65535之间。

常用端口范围：

端口号小于256的是常用端口，服务器一般都是通过常用端口号来识别的。

TCP/IP使用的端口号：

任何TCP/IP实现所提供的服务都用0～1023之间的端口号。

其他：

1024～49151端口号是被注册的端口号，可以由用户自由使用，也是被IANA指定为特殊服务使用，从49152～65535是动态或私有端口号（以上并不是强制的）

HTTP报文识别

请求报文

请求报文是由请求方法，请求URI，协议版本，可选的首部字段以及内容实体构成。

例

  GET /index.html HTTP/1.1Host: www.cnblogs.com/ACFLOOD Content-Length: 16

本例中，GET表示请求方法，/index.jsp是请求URI，HTTP/1.1是协议版本，其余的是首部字段。

响应报文

响应报文基本上由协议版本，状态码(返回请求成功或失败情况)，对状态码的解释短语，可选的首部字段以及内容实体构成。

例

     HTTP/1.1 200 OK Date: Mon, 10 May 2016 07:50:15 GMTContent-Length: 300Content-Type: text/html

本例中，HTTP/1.1表示协议版本，200表示状态码，OK是对状态码的描述，Date是响应日期，与Content-Length和Content-Type一样，都属于首部字段。

HTTP是一种无状态(stateless) 协议

HTTP是一种无状态(stateless) 协议，HTTP协议本身不会对发送过的请求和相应的通信状态进行持久化处理。这样做的目的是为了保持HTTP协议的简单性，从而能够快速处理大量的事务，提高效率。

然而，在许多应用场景中，我们需要保持用户登录的状态或记录用户购物车中的商品。由于HTTP是无状态协议，所以必须引入一些技术来记录管理状态，例如Cookie。

session与cookie的区别

（1）Cookie以文本文件格式存储在浏览器中，而session存储在服务端它存储了限制数据量。它只允许4kb它没有在cookie中保存多个变量。

（2）cookie的存储限制了数据量，只允许4KB，而session是无限量的

（3）我们可以轻松访问cookie值但是我们无法轻松访问会话值，因此它更安全

（4）设置cookie时间可以使cookie过期。但是使用session-destory（），我们将会销毁会话。

HTTP请求方法

  • GET：获取资源。通过URI请求访问已被识别的资源，经过服务器解析后返回相应内容。

  • POST：传输实体。例如登录注册时表单的提交。

  • PUT：传输文件。类似于FTP协议中的文件上传，PUT方法要求在请求报文的主体包含文件，保存到指定URI的位置。由于PUT方法没有验证机制，存在安全性问题，所以必须配合采用安全标准(如REST)。

  • HEAD：获得报文首部。不返回报文主体，仅返回首部。

  • DELETE：删除文件。DELELTE方法请求删除服务器上的资源，同样存在安全性问题。所以必须有验证机制与之配合。

  • OPTIONS：询问服务器支持哪些方法。示例:

    请求报文

    OPTIONS * HTTP/1.1Host: www.cnblogs.com

    响应报文

    HTTP/1.1 200 OKAllow: GET, POST, HEAD, OPTIONS

    本例中，客户端通过OPTIONS *询问服务器支持的方法。响应报文最后返回了支持的 方法类型。

    • TRACE：追踪路径。发送请求时，通过在Max-Forwards首部字段中填入数值，每经过一个服务器数值减一，当减为零之后停止传输，最后收到请求的服务器发出响应。

    • CONNECT：通过与代理服务器建立隧道，使用隧道协议加密之后，与服务器进行TCP通信。常用的隧道协议有SSL(Secure Socket Layer)以及TLS(Transport Layer Security)。

常见http状态码

状态码第一位数字决定了不同的响应状态，有如下：

  • 1 表示消息
  • 2 表示成功
  • 3 表示重定向
  • 4 表示请求错误
  • 5 表示服务器错误

200 OK：客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。
503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。

HTTPS基本概念

HTTPS（全称是Hyper Text Transfer Protocol over SecureSocket Layer）是身披SSL/TLS外壳的HTTP。它在HTTP之上利用SSL/TLS建立安全的信道，加密数据传输。它被广泛用于互联网上安全敏感的通讯，例如电商、支付等应用。

加密算法

对称加密：加密与解密用同一套密钥，如DES、3DES和AES等

非对称加密：加密和解密所使用的密钥不同，如RSA、DSA等

不可逆加密：明文加密后无法通过解密来复原，如MD5、SHA等

SSL

TLS

全称Transport Layer Security，传输层协议，它是在SSL3.0基础上设计的，相当于SSL的后续版本，它的目标是让SSL更安全。

证书与证书链

大学读完之后有毕业证书，并且这个证书可以在学信网查询

专业上有注会、CCIE、律师证等，可以在国家职业认证机构或委托机构的网站上查到

公司注册之后，营业执照信息也可以在天眼查或企查查上找到

证书的作用

  • 过往经历的证明

  • 第三方信用担保

  • 唯一合法性检验

工作流程

HTTPS 默认工作在 TCP 协议443端口，它的工作流程一般如以下方式：

  • 1、TCP 三次同步握手
  • 2、客户端验证服务器数字证书
  • 3、DH 算法协商对称加密算法的密钥、hash 算法的密钥
  • 4、SSL 安全加密隧道协商完成
  • 5、网页以加密的方式传输，用协商的对称加密算法和密钥加密，保证数据机密性；用协商的hash算法进行数据完整性保护，保证数据不被篡改。

HTTP 与 HTTPS 区别

  • HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。
  • 使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。
  • HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。
  • http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
  • HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

数据结构

链表

链表（Linked List）：它和数组一样，也是一组数据的集合，但和数组不一样的是，它并不是一组连续的数据集合，而是通过指针连接在一起的。

数组

数组（Array）：它是将具有相同类型的若干数据组织在一起的集合，这是一种最基本而且也是一种最经常使用的数据结构。

堆

堆（Heap）：它是一种特殊的树型结构，它的特点是根结点的值是所有节点中最大或者最小的，而且根结点的子节点也是一个堆结构。

栈

栈（Stack）：一种特殊的线性表，只能在一个表的固定端进行数据节点的插入和删除操作，栈正是一种按照后进先出（LIFO）的原则来存储数据的数据结构。

队列

队列（Queue）：和栈类似，但不同的是，它是在一端执行入队操作，而在另一端进行出队操作。

树

树（Tree）：这是一种典型的非线性结构，之所以叫做“树”，是因为它的结构看起来就像一颗倒过来的树，它只有一个根结点，但可以有多个后继节点。

图

图（Graph）：这也是一种非线性数据结构，在图结构中，数据节点称为顶点，顶点之间的连线称为边。

散列表（Hash）：

这种数据结构来源于散列函数，它的思想是如果存在x，那么就必然有一个唯一的存储位置f(x)可以找到x，这样通过数学函数就直接计算出x的存储位置而不用在进行比较、查找以后才知道。

算法常识

查找

顺序查找：它的基本思想就是从第一个元素开始，按顺序遍历待查找序列，直到找出给定目标或者查找失败

二分查找：又叫折半查找，它要求列表必须是有序的。它的原理是每次都把待比较元素A和列表中间的元素B进行比较，如果A小于B，那么A再和位于B前半部分的元素进行比较，并且再次选择中间元素进行比较，直到比较完所有元素为止。

排序

冒泡排序：它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小（大）的元素会经由交换慢慢“浮”到数列的顶端。

选择排序：是一种简单直观的排序算法。它的工作原理是：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。

WEB基础

HTML元素

文档元数据

html文件组成

文档类型声明        <!DOCTYPE HTML>

html元素  即根元素  此处表示文档HTML部分的开始

head元素  此处包含着文档的元数据，元数据向浏览器提供了有关文档内容、标记的信息、js脚本和对外部资源的引用（css样式表）

head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>

<title></title>

用于定义文档的标题

该标题会出现在浏览器窗口的标题栏或状态栏上

把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称

例：<title>CSDN能力认证中心</title>

<link />

用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标

<link />是空元素，仅包含属性，只能存在于head部分

<style></style>

用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间

<script></script>

用于给页面添加脚本

可以直接在script开始和结束标签之间包含JavaScript脚本)

也可以通过script的src属性链接外部脚本文件

<meta />

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性值作为元数据的名称，content作为元数据的值

keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一

charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等

http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：

  • content-type：规定文档的字符编码，等同于charset属性设置字符编码

  • default-style：设置默认CSS样式表组的名称

  • refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）

<base />

用于为页面中的所有相对链接设置默认URL或默认target属性

body元素 此元素里面包含着文档内容

内容区域标签

语义化标签

 表单标签

HTML表单用于收集用户输入。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。

1、<form></form>标签

用于创建HTML表单，常用属性如下：

  • action：规定表单提时，表单数据提交的URL

  • method：规定用于发送form-data的HTTP方法，常用属性值为get、post

2、<input />元素

<input />元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的

3、<label></label>标签

用于为input标签提供标注

点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上

label标签的for属性值应当与相关元素的id属性值相同

4、<select></select>标签

用于创建下拉列表

select元素中的<option></option>标签用于定义列表的可选项

<select><option value=" trainee">C1见习工程师能力认证</option><option value="web ">C4前端基础能力认证</option><option value=" java">C4Java基础能力认证</option><option value=" python">C4Python基础能力认证</option>
</select>

5、<button></button>元素

用于定义普通按钮

转义字符

文本内容标签

段落标签 <p>
段落内的换行符将会忽略，段落内的多个空格将被一个空格所代替

换行元素<br />

插入空行来进行换行

预排版标签 <pre>
保留空白字符，能够以正常排版方式显示空格与段落，字体是等宽字体

分级标题<h1><h2><h3><h4><h5><h6>
标题格式化显示，值越大，字越小，<h4>是默认的文本字体大小

文本块引用<blockquto>

字体样式与大小
斜体<i></i>
粗体<b></b>
强调斜体<em></em>
强调加粗<strong></strong>
字体大一号<big></big>
字体小一号<small></small>
上标标签<sup></sup>

下标标签<sub></sub>

水平线<hr/>

绘制一条水平线分开上下文, 默认3像素

内联元素标签

不占行的，依附于块级元素存在，直接修改高度，宽度一般是无效的

a，span，label，input，select，textarea，img，strong，em，code，br

图片与多媒体标签

图片：img

src 属性：图片路径；

alt 属性：图片无法显示时使用的替代文字；

title：鼠标悬停时显示的文字 ；

视频：video元素

src 属性：视频路径 ；

controls 属性：【布尔属性】指定后，会显示播放控件；

autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态；

muted ：静音，某些浏览器强制提升用户体验自动播放时需设置该属性；

loop ：【布尔属性】指定后，视频将循环播放；

height：设置视频播放器的高度；

width：设置视频播放器的宽度；

poster：规定视频下载时显示的图像，或者是在当用户点击播放按钮前显示的图像。

Preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay”则忽略该属性。

音频：audio元素

src 属性：音频路径；

controls 属性：【布尔属性】指定后，会显示播放控件；

autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态；

muted ：静音 某些新浏览器强制提升用户体验 自动播放时需设置该属性；

loop  ：【布尔属性】指定后，视频将循环播放；

figure元素

用作文档中插图的图像

<figure><p>黄浦江上的的卢浦大桥</p><img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

表格内容标签

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元

CSS

引入方式

行内样式

直接使用HTML元素的style属性引入CSS样式

例：<p style=＂font-size: 16px; color: #333;＂>软件工程师能力认证</p>

内嵌样式

使用<style></style>标签引入样式

<style>p {color: #333;font-size: 16px;}
</style>

 外部样式

链接样式（最常用）

在<head></head>标签中，使用<link />标签链接外部的CSS文件

link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css

例：<link rel="stylesheet" href="style.css" type="text/css" />

导入样式

使用@import url()引入CSS文件

  • 在CSS文件中直接使用@import url()

  • 在HTML文件中需要在<style></style>标签中使用@import url()

在HTML初始化时，@import url()导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分

// 在HTML文件中导入
<style>@import url(style.css);
</style>
// 在CSS文件中导入
@import url(style.css);

背景属性

1、background-size属性

1.1 contain

  • 保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示

  • 有可能出现图片无法完全覆盖背景区域

1.2 cover

  • 保持图片纵横比不变，最大程度覆盖背景区域

  • 有可能导致背景图片部分区域无法显示

2、background-repeat

2.1、repeat（默认）

  • 允许水平和垂直方向重复（平铺）背景图片

2.2、repeat-x

  • 只允许水平方向重复（平铺）背景图片

2.3、repeat-y

  • 只允许垂直方向重复（平铺）背景图片

3、background

  • 简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表

background: #ff0000 url('smiley.gif') no-repeat cover;

字体样式

1、color属性

用于设置文本的颜色，可设置的值有：

  • 颜色名，如【red】

  • 十六进制值，如【#FFFFFF】

  • RGB值，如【rgb(255, 0, 0)】

  • rgba值，如【rgba(255, 0, 0, 0.9)】

2、font-size属性

用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等

字体大小未设置时默认字体大小为16px

3、font-weight属性

  • 用于设置文本的粗细，可设置的值有：

4、font-family属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family："Times New Roman", "Georgia", "Serif";

5、text-align属性

用于设置文本的水平对齐方式，可设置的值有：

  • center（居中对齐）

  • left（左对齐）

  • right（右对齐）

文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

6 line-height属性

用于设置行间距，可设置的值如下

  • 数字：行间距为当前字体大小乘此数字

  • 固定值：设置固定的行间距，如20px

  • 百分比：行间距为当前字体大小乘百分比

7、text-indent属性

用于指定首行缩进值，可设置的值如下

  • 固定值：设置固定首行缩进，如20px

  • 百分比：首行缩进值为父元素宽度乘此百分比

8、letter-spacing属性

用于设置字间距，设置固定值为字间距，如10px

9、word-spacing属性

用于指定文本中单词之间的间距，设置固定值为单词间距，如10px

10、text-decoration

用于设置文本的装饰线，是下表属性的简写

  • 例：

text-decoration: underline wavy red;  /* 表示为红色波浪形下划线 */

11、text-transform

用于设置文本大小写字母，常用属性如下

  • uppercase：全部文本均为大写字母

  • lowercase：全部文本均为小写字母

  • capitalize：文本的每个单词首字母为大写字母

12、writing-mode

设置文本在水平或垂直方向的排布方式

  • horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向

sideways-lr：文本流在垂直方向，从下至上、从左至右排列

sideways-rl：文本流在垂直方向，从上至下、从右至左排列

vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向

vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

13、white-space

用于设置文本的空白符处理方式，属性值如下

基础选择器

1、通配选择器

可以与其他选择器相结合，选择某元素下的所有元素

/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/
.box * { color: #000; }

由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式

* {margin: 0;padding: 0;border: 0;
}

2、标签选择器

标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等

3、id选择器

id属性的属性值应当是当前文档唯一

4、类选择器

class属性值在文档中可以重复

5、组合选择器

通过间隔符将基础选择器连接起来，实现组合选择的效果

伪类选择器

伪元素选择器

一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用

为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符

CSS优先

浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下

  • 【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】

通配符选择器【*】和关系选择符【+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等】对优先级没有影响

在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级

选择器权重计算

选择器的权重可以相加

#header .nav li { list-style: none; }

该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111

对于同一个元素的两种选择器均声明了同一个属性情况

  • 权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性

  • 权重不同时，权重大的选择器生效

!important规则

当你在一个样式声明中使用!important规则时，这个样式将覆盖其他的任何声明
!important规则与优先级无关，但是会直接影响样式的最终显示结果

块元素与行内元素

1、块级元素

  • 在浏览器显示时总是独占一行

  • 宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响

  • 可以包含内容、行内元素和其他块级元素

  • 宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度

  • 常见块级元素：div、form、footer、h1-h6、ol、ul、p、video

  • 设置display属性为display: block可将元素转换为块级元素

2、行内元素

  • 不独占一行，默认不自动换行

  • 宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响

  • 一般只能包含内容和其他行内元素，不可包含块级元素

  • 设置宽高无效，宽高默认为内容的宽高

  • 常见行内元素：span、label、a、em、strong、img

  • 设置display属性为display: inline可将元素转换为行内元素

3、行内块级元素

  • 综合块级元素与行内元素的特性

  • 不独占一行

  • 元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响

  • 宽高未设置时默认为内容宽高

  • 常见行内块级元素：button、input、textarea、select

  • 设置display属性为display: inline-block可将元素设置为行内块级元素

盒子模型

盒模型由里到外包括四个部分：内容部分，padding（内边距），border（边框），margin（外边距）

内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置

  • padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过【padding】相关属性设置大小

  • border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框颜色

  • margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小

标准盒模型

在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小

标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小

怪异盒模型

在怪异盒模型中，给盒模型设置的width和height就是盒模型的实际大小，宽高已经包含了border和padding

怪异盒模型的实际大小 = 盒模型设置的width、height（包含border和 padding）

在怪异盒模型中，内容部分的实际宽高是盒模型的宽高减去padding和border

不管是标准盒模型还是怪异盒模型，margin都不计入盒子的实际大小。但是margin会影响盒模型所占空间，即影响的盒子模型的外部空间。在计算盒子模型的实际占位大小时才会将margin计入其中。

浏览器默认使用标准盒模型，如需使用怪异盒模型，可用通过将盒模型设置为box-sizing: border-box实现

定位

什么是脱离文档流

文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流
元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化

position定位

position属性用于指定元素的定位类型，属性值可为

  • static（默认定位）

  • relative（相对定位）

  • absolute（绝对定位）

  • fixed（固定定位）

  • sticky（粘性定位）

设置定位类型后可以通过设置top、right、bottom、left属性确定定位的位置

 static定位

  • 页面上的每个盒子从上到下、从左到右依次排列的布局

<div class="box-container"><div class="box1">box1</div><div class="box2">box2</div>
</div>

 relative定位

  • 相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变

上述static定位示例代码中，将box1设置以下属性，元素会相对于自身原始位置向右偏移20px，向下偏移50px

    .box1 {position: relative;top: 50px;left: 20px;}

absolute定位

  • 元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流

上述static定位示例代码啊中，将box2以及其父级元素box-container设置如下属性

box2元素相对于relative定位的box-container向右偏移25px，向下偏移30px

.box-container {position: relative;
}
.box2 {position: absolute;top: 30px;left: 25px;
}

fixed定位

  • 相对于浏览器窗口进行定位，元素脱离文档流

常用于顶部导航栏、顶部搜索框、侧边联系客服等板块

 sticky定位（存在兼容性问题）

  • 根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合

常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置

层级属性z-index

  • 用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效

  • 数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）

z-index属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素

上述absolute定位的示例中，给box1、box2添加背景后可以清晰看见，box2覆盖box1

将box1、box2增加以z-index属性，可将box1、box2层级改变，使box1在box2的上方

.box1 { z-index: 1; }
.box2 { z-index: 0; }

 浮动

float属性

  • 用于设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性

元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

  • 下表为float可设置的属性值

clear属性

  • 用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方

  • 下表为float可设置的属性值

<style>.layout {width: 120px;height: 300px;margin: 10px;background-color: cadetblue;float: left;}.content {width: 340px;height: 300px;margin: 10px;background-color: powderblue;float: left;}footer {width: 500px;height: 40px;background-color: darkseagreen;}
</style>
<main><section class="layout flex-center">侧边栏</section><section class="content flex-center">内容</section>
</main>
<footer></footer>

在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开

main后的footer元素在页面布局时无法在main后正常显示（如下图）

section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方

/* 清除左右两侧浮动 */
footer {clear: both;
}
/* 或清除左侧浮动*/
footer {clear: left;
}

浮动布局

  • 浮动在布局中最常用于实现两列布局或三列布局

在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可

JS基础

变量命名规则

变量名不能以数字或者某些特殊字符开头

1
1a
*a
(a
%a
<r
// 以上都是非法的变量名，会直接报错

变量名不能是关键字

补充

  • 一般应当坚持使用拉丁字符(0-9,a-z,A-Z)和下划线字符。

  • 不应当使用规则之外的其他字符，因为它们可能引发错误，或对国际用户来说难以理解。

  • 变量名不要以下划线开头—— 以下划线开头的被某些JavaScript设计为特殊的含义，因此可能让人迷惑。

  • 变量名不要以数字开头。这种行为是不被允许的，并且将引发一个错误。

  • 一个可靠的命名约定叫做 "小写驼峰命名法"，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符。

  • 让变量名直观，它们描述了所包含的数据。不要只使用单一的字母/数字，或者长句。

  • 变量名大小写敏感

  • 最后也是最重要的一点—— 你应当避免使用JavaScript的保留字给变量命名。保留字，即是组成JavaScript的实际语法的单词！因此诸如 var, function, let和 for等，都不能被作为变量名使用。浏览器将把它们识别为不同的代码项，因此你将得到错误。

逻辑运算

比较运算符

我们假定 num = 5，下表中解释了比较运算符

 逻辑运算符

我们假定num = 5，下表中解释了逻辑运算符：

隐式类型转化

字符串和数字的运算

字符串和数字进行加运算时，会将数字转换成字符串，然后和另一个字符串进行拼接

字符串和数字进行减、乘、除运算，以及大小比较时，会将字符串转换成数字，再和另一个数字进行运算或比较

各种值转换成布尔值

 数字0，空字符串""，null，undefined 转成布尔值的时候都是false

 非0数字，非空字符串转成布尔值的时候都是true

任何数组（即使是空数组），任何对象（即使是空对象） 转成布尔值的时候都是true

条件分支

if分支

 基本语法结构

if (条件1) { // 代码块1
} else if (条件2) { // 代码块2
} else { // 代码块3
}

 说明

  • 如果条件1为真就会执行代码块1。即使条件2为真也不会去执行代码块2，更不会执行代码块3

  • 只有当条件1为假，并且条件2为真的时候，才会执行代码块2

  • 如果条件1和条件2都为假，才会执行代码块3

  • else if 和 else 部分不是必需的。

  • 可以有多个else if

switch分支

 基本语法结果

switch (expression) { case value1: // 当 expression 的结果与 value1 匹配时，执行此处语句     [break;] case value2: // 当 expression 的结果与 value2 匹配时，执行此处语句     [break;] ... case valueN: // 当 expression 的结果与 valueN 匹配时，执行此处语句     [break;] [default: // 如果 expression 与上面的 value 值都不匹配，执行此处语句 [break;]]
}

说明

  • []表示这一部分语句是可选的，并不是说正常代码中要加[]

  • expression和value的是进行严格模式的匹配

  • 如果所有case都没有匹配到，将执行default分支的代码

for循环

1、for循环的使用方法

  • for：多次遍历代码块

  • for/in：遍历对象属性

2、使用示例

for (语句 1; 语句 2; 语句 3) {要执行的代码块
}

2.1 for循环是您希望创建循环时经常使用的语法结构，代码结构如下：

  • 语句 1 在循环（代码块）开始之前执行。

  • 语句 2 定义运行循环（代码块）的条件。

  • 语句 3 会在循环（代码块）每次被执行后执行。

2.2 for循环代码实例一（普通遍历）：

for (var i = 0; i < 10; i++) {console.log(i)
}
// 执行结果
0 1 2 3 4 5 6 7 8 9for (var i = 0; i < 10; i+=2) {console.log(i)
}
// 执行结果
0 2 4 6 8

说明：

  • 语句1在循环之前设置一个变量(var i = 0),从0开始遍历

  • 语句2定义运行循环的条件(i必须小于10)，当i = 10的时候不满足循环条件

  • 语句3会在代码块每次执行之后对变量值i进行递增(i++)

  • 语句3 (i+=2) 相当于每次循环迭代器i+2，也可以这么写（i=i+2）

2.3 for循环代码实例二（数组遍历）：

var arr = [11, 22, 33, 44, 55]
for (var i = 0; i < arr.length; i++) {console.log(arr[i])
}
// 执行结果
11 22 33 44 55

说明：

  • 语句1在循环之前设置一个变量(var i = 0),从0开始遍历(数组下标从0开始)

  • 语句2定义运行循环的条件(i必须小于arr的数组长度)，当arr下标正好是0-3，4的时候不满足循环要求

  • 语句3会在代码块每次执行之后对变量值i进行递增(i++)从arr[0]-arr[3]

2.4 for循环代码实例三（对象遍历）：

var obj = {name:"tom", gender:"man", age:32}
for (var key in obj) {// 打印键console.log(key)// 打印值console.log(obj[key])
}
// 执行结果
name
tom
gender
man
age
32

说明：
JavaScript提供了一种特殊的循环（也就是for .. in循环），用来迭代对象的属性或数组的每个元素，for...in循环中的循环计数器是字符串，而不是数字。它包含当前属性的名称或当前数组元素的索引

Math内置对象

Math对象的作用是：执行常见的算数任务。保存数学公式和信息，与我们在JavaScript直接编写计算功能相比，Math对象提供的计算功能执行起来要快得多。

对象属性 

对象定义(以下操作都基于这个对象)

// 定义一个对象
var obj = { name: "李明", age: 18, gender: "man", city: "山东", hobby: "游泳" }

访问对象属性的语法

// 访问对象属性方式一
obj.name
// 访问对象属性方式二
obj['name']
// 访问对象属性方式三
// 将对象属性赋值给一个变量，使用变量方式访问
var key = 'name'
obj[key]

添加对象的属性语法

// 添加一个属性方式一
obj.nickName = "小明"
// 添加一个属性方式二
obj["nickName"] = "小明"
console.log(obj)
// {name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳', nickName: "小明"}

修改对象的属性语法

// 修改一个属性方式一
obj.age = 19
// 修改一个属性方式二
obj["age"] = 19
console.log(obj)
// { name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳'}

删除对象的属性语法

// 删除一个属性
delete obj.ageconsole.log(obj)
// {name:'李明', gender: 'man', city: '山东', hobby: '游泳'}

for循环遍历对象属性的语法

// for循环遍历对象，需要使用for ... in
for (var key in obj) {console.log(key)console.log(obj[key])
}

函数定义与调用

通过声明来定义函数

function关键字

我们可以使用function关键字来定义一个具有名称的函数，其语法结构如下

function name([param[, param[, ... param]]])
{ [statements]
}

  • []表示可选，并不是正常代码中需要使用[]

  • name表示函数名，()中的表示参数，{}中的表示函数体。在函数被调用的时候，会执行函数体中的代码。

  • 注意：函数被定义的时候，函数体中的代码并不会被执行。只有到函数被调用的时候，函数体中的代码才会被执行。

  • 对于使用函数声明这个方法定义的函数，函数调用可以在函数定义之前，如示例中的pri函数。

通过表达式来定义函数

表达式定义法

我们还可以使用函数表达式的方式来定义一个函数，这时可以将函数直接赋值给一个变量，其语法结构如下

var myFunction = function name([param[, param[, ... param]]]) { statements
}

  • []表示可选，并不是正常代码中需要使用[]

  • name表示函数名，可以省略，()中的表示参数，{}中的表示函数体。在函数被调用的时候，会执行函数体中的代码。

  • 注意：函数被定义的时候，函数体中的代码并不会被执行。只有到函数被调用的时候，函数体中的代码才会被执行。

  • 对于使用函数表达式这个方法定义的函数，函数调用必须在函数定义之后。

  • 如果省略name，我们称该函数为匿名函数。

函数调用

  • 对于使用函数声明的方法定义的函数，可以使用函数名加括号的方式来调用；对于使用函数表达式定义的函数，可以使用表达式所赋值的变量名加括号来调用。如上述代码所示。

  • 在函数被执行的时候，会运行函数体中的代码。如果函数体中有return语句，则会在函数被调用处返回return出来的值，并结束函数的运行。return并不是必需的，没有return的话，函数会返回undefined。

function add1(a, b) { return a + b;
}
var res = add1(4, 5)
console.log(res) // 预期输出：9 function add2(a, b) { a + b;
}
var res = add2(4, 5)
console.log(res) // 预期输出：undefined

  • 函数在调用的时候，会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够，那么函数体中没有绑定的参数将被赋值为undefined

function foo(a, b) { console.log(b)
}
foo(4) // 预期输出：undefined
foo(4,8) // 预期输出：8

常见内置函数

eval

eval函数会将传入的字符串当做 JavaScript 代码进行执行。这是一个十分危险的函数，一般情况不建议使用。

var a = eval("2+2")
console.log(a)
// 预期输出：4
// 这里eval把字符串"2+2"，当成js代码执行，得到结果4 eval("console.log('hello world')")
// 预期输出：hello world
// 这里eval把字符串"console.log('hello world')"，当成js代码执行，打印输出：hello world

isNaN

用来确定一个值是否为NaN。NaN表示不是一个数字。如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。因此，对于能被强制转换为有效的非NaN数值来说（空字符串和布尔值分别会被强制转换为数值0和1），返回false值也许会让人感觉莫名其妙。比如说，空字符串就明显“不是数值（not a number）”。这种怪异行为起源于："不是数值（not a number）"在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题：被测试的值在被强制转换成数值时会不会返回IEEE-754​中所谓的“不是数值（not a number）”。

isNaN('abc') // 返回值：true 因为字符串'abc'不是一个数字
isNaN('12.23') // 返回值：false 因为字符串'12.23'是一个数字 isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // trueisNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // trueisNaN("blabla")   // true: "blabla"不能转换成数值// 转换成数值失败， 返回NaN

parseFloat

根据给定的参数返回其对应的浮点数。

parseFloat(3.14);
parseFloat('3.14');
parseFloat(' 3.14 ');
parseFloat('314e-2');
parseFloat('0.0314E+2');
parseFloat('3.14some non-digit characters');
// 以上的返回值都是3.14

parseInt

解析一个字符串并返回指定基数的十进制整数。

parseInt("0xF", 16);
parseInt("F", 16);
parseInt("17", 8);
parseInt(021, 8);
parseInt("015", 10); // parseInt(015, 8); 返回 13 parseInt(15.99, 10);
parseInt("15,123", 10);
parseInt("FXX123", 16);
parseInt("1111", 2);
parseInt("15 * 3", 10);
parseInt("15e2", 10);
parseInt("15px", 10);
parseInt("12", 13); // 以上都返回15，第二个参数表示基数（可以理解为进制）

字符串定义与转义字符

使用引号来定义字符串

我们可以使用一对单引号或者一对双引号来定义一个字符串

var str1 = "这是双引号定义的字符串"
var str2 = '这是单引号定义的字符串'
// 1. 在JavaScript中双引号定义的字符串和单引号定义的字符串没有本质区别
// 2. 无论是单引号还是双引号，都必须配对使用，不能一个单引号和双引号配对
// 3. 单引号中的字符串中不能出现单引号，可以出现双引号；双引号中的字符串中不能出现双引号，可以出现单引号

使用模板字符串的方式定义字符串：我们可以使用一对反引号来定义字符串

var str1 = `这是一个普通的字符串`
var str2 = `这是一个换行的
字符串`
var a = 2
var b = 3
var str3 = `这是一个可以解析变量的字符串，例如：${a + b}`
// 最终str3的值为：
// 这是一个可以解析变量的字符串，例如：5

转义符

在定义一个字符串的时候，有些特殊字符并不适合直接出现。例如：换行符、单引号（不能出现在单引号内）、双引号（不能出现在双引号内），这个时候可以我们需要使用\转义符，例如：

var str1 = '这是一个换行的\n字符串'
console.log(str1)
// 预期输出：
// 这是一个换行的
// 字符串 // 在这里使用了\n来代表换行符。如果直接在定义字符串的时候回车换行，将出现语法错误 var str2 = "如何使用双引号\""
console.log(str2)
// 预期输出：
// 如何使用双引号"
// 在这里使用了\"来代表双引号。如果在双引号定义的字符串中直接使用双引号，将出现语法错误。单引号同理。 // 如果使用模板字符串的方式定义字符串，可以直接使用回车换行。但是要在其中使用反引号`，也必须转义

字符串常见方法与属性

String对象属性

String对象的常用方法 

数组

数组定义

// 直接使用中括号就能定义一个数组，数组中的值的类型不必相同，数组中可以嵌套数组
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]

数组中值的访问与修改

var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标（或者叫索引）来取数组中的值。下标是从0开始的 arr[0] // 取下标为0的值，即1 arr[3] // 取下标为3的值，即'init' // 我们可以给数组中某一个下标的值进行重新赋值，即修改该下标的值
arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置，此时arr[0]的值就为'name'了，而不是1了

数组常见属性

length

访问一个数组的length属性，返回该数组的长度，即该数组元素的个数

var arr = [1, 2, 5, 'init', ['apple', 2, 4]]arr.length // 返回数组arr的长度，即5

数组常见方法

forEach()

对数组的每个元素执行一次给定的函数

var array1 = ['a', 'b', 'c'] array1.forEach( function(element) {
console.log(element)
})
// 预期输出
// "a"
// "b"
// "c"

indexOf()

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison']
console.log(beasts.indexOf('bison')) // 预期输出: 1
// start from index 2
console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
console.log(beasts.indexOf('giraffe')) // 预期输出: -1

join()

将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

var elements = ['Fire', 'Air', 'Water']
console.log(elements.join()) // 预期输出: "Fire,Air,Water"
console.log(elements.join('')) // 预期输出: "FireAirWater"
console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"

map()

创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法
var map1 = array1.map(function (x) { return x * 2 });
console.log(map1); // 预期输出: Array [2, 8, 18, 32]

pop()

从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop()); // 预期输出: "tomato"
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]

push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

var animals = ['pigs', 'goats', 'sheep'];
var count = animals.push('cows');
console.log(count); // 预期输出: 4
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs');
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

reverse()

将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

var array1 = ['one', 'two', 'three'];
console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"]
var reversed = array1.reverse();
console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"]
// 注意：该方法会修改原数组
console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]

shift()

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

var array1 = [1, 2, 3];
var firstElement = array1.shift();
console.log(array1); // 预期输出: Array [2, 3]
console.log(firstElement); // 预期输出: 1

slice()

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"]
console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"]
console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]

sort()

对数组的元素进行排序，并返回数组。

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"]
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]// 如果sort()方法调用的时候没有传入回调函数，会将数组转成字符串然后进行大小比较并升序排列，字符串的大小比较是按照字典顺序进行的。所以10000会比21小。// 如果sort()方法调用的时候传入了回调函数，会按回调函数的返回值来决定相邻两个元素的排序，例如：
var array1 = [1, 30, 4, 21, 100000];
array1.sort(function (item1, item2) {
return item1 - item2
});
console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]// 这里面的item, item2参数就是array1里面相邻的两个元素
// 如果这个回调函数返回的结果大于0，那么item2将排在item1的前面
// 如果这个回调函数返回的结果小于0，那么item1将排在item2的前面
// 如果这个回调函数返回的是0，那么item1和item2的位置不变

unshift()

将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

var array1 = [1, 2, 3];
console.log(array1.unshift(4, 5)); // 预期输出: 5
console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]

Web进阶

DOM结构及节点

整个HTML的结构都可以由类似上图的树结构表示，整个树结构由节点组成

  • document对象指代整个文档节点, 它是文档内其他节点的访问入口，提供了操作其他节点的方法

  • 节点可以分为元素节点、文本节点和属性节点

  • 节点之间有层级关系，父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点，同级的子节点被称为同胞（兄弟或姐妹）

常用节点获取方法和属性

要进行DOM操作，首先要获取到需要操作的节点或节点集合，接下来以下面的示例代码为基础，介绍常用的DOM获取方法和属性。

<div class="box" id="container"><p class="item" title="111">项目1</p><p class="item">项目2</p><p>项目3</p><input type="text" value="123">
</div>

注：复制示例代码到HTML文件中，并在浏览器内打开这个HTML文件。（Chrome浏览器中右键选择“检查”可打开控制台，选择控制台的Console可运行代码，回车查看结果）。

DOM修改

innerHTML代码示例 

改变p元素内容

// 更改为文字
document.querySelector('p').innerHTML = '测试项目'
// 更改为html内容（p元素中内容替换为span元素）
document.querySelector('p').innerHTML = '<span>测试项目</span>'

 setAttribute(name, value)代码示例

参数：name为属性名，value为属性值

改变input的type属性

document.querySelector('input').setAttribute('type', 'button')

通过属性名更改属性 

改变input的type属性

document.querySelector('input').type = 'button'

DOM添加

createElement(tagName)代码示例

创建一个<div>元素

newDiv = document.createElement('div')
// 可以直接对创建完的元素进行操作，如：修改元素内文字
newDiv.innerHTML = '我是新元素'

appendChild(node)代码示例

创建一个新元素 <p>，然后添加到 <div> 的最尾部：

var p = document.createElement('p');
document.querySelector('div').appendChild(p)

insertAdjacentHTML(position, text)代码示例

  • position（内容相对当前元素位置）：

    • 'beforebegin'：元素自身的前面

    • 'afterbegin'：插入元素内部的第一个子节点之前

    • 'beforeend'：插入元素内部的最后一个子节点之后

    • 'afterend'：元素自身的后面

将一个新元素 <p> 插入到 <div> 的最尾部：

// 执行添加
var div =  document.querySelector('div')
div.insertAdjacentHTML('beforeend', '<p></p>')

DOM删除

removeChild(child)

<div><p>项目1</p><p>项目2</p>
<div>
<script>// 删除div中的第一个p元素var parent = document.querySelector('div')var child = document.querySelector('p')parent.removeChild(child)
</script>

remove()

<div><p>项目1</p><p>项目2</p>
<div>
<script>// 删除div中的第一个p元素var p1 = document.querySelector('p')p1.remove()
</script>

DOM控制CSS样式

通过style属性控制样式

style属性可以设置或返回元素的内联样式

  • 语法：element.style.property = value

  • property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。

var box = document.querySelector('div')
box.style.color = "#fff" // 将元素中文字设置为白色
box.style.marginLeft = "100px" // 将元素左外边距设置为100px

通过classList控制样式

classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使用classList中的方法可以方便的访问和控制元素类名，达到控制样式的目的

classList常用方法介绍

<div class="box">classList test</div>
<script>var box = document.querySelector('.box')box.classList.add('box1', 'box2')    // [box] => [box, box1, box2]box.classList.remove('box1', 'box2') // [box, box1, box2] => [box]box.classList.replace('box', 'box2')  // [box] => [box2]box.classList.contains('box1')  // 当前元素不包含类名box1，返回falsebox.classList.toggle('active')   // [box2] => [box2, active]
</script>

节点写入

节点写入常用方式

innerHTML

  • 在div中写入h1元素

<body><div></div>
</body>
<script>document.querySelector('div').innerHTML = '<h1>我是新内容</h1>'
</script>

如果写入内容中包含html标签字符串，会被解析成对应的html标签

innerText

  • 在div中写入字符串

<body><div></div>
</body>
<script>document.querySelector('div').innerText = '<h1>我是新内容</h1>'
</script>

html标签字符串不会被解析，会被当作普通字符串写入

document.write()

document.write('我是新内容')
document.write('<h1>我是新内容</h1>')

和innerHTML类似，写入内容如果包含html标签字符串，会被解析成对应的html标签。document.write()根据运行时机，会写入文档不同的位置

事件基础

事件定义

用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情

事件举例：鼠标单击，双击，键盘输入，页面或图像载入

事件三要素（事件源，事件，事件处理程序）

  • 事件源：谁触发的，一般指某个元素节点

  • 事件：怎么触发的

  • 事件处理程序：触发后发生了什么事

事件绑定

事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。

方式一：行内事件属性赋值

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

 方式二：事件属性赋值

var btn = document.querySelector('button');
btn.onclick = function() {alert('事件属性赋值')
}

方式三：事件监听

addEventListener(type, listener, useCapture)

  • type: 事件类型

  • listener: 监听器（处理程序）

  • useCapture: 默认为false，设置为true时，不会因冒泡触发监听器

const btn = document.querySelector('button');
btn.addEventListener('click', function() {alert('事件监听')
})

事件属性赋值与事件监听区别：

  • 事件属性多次赋值，只会执行最后一次事件处理程序；事件监听可以添加多个监听器，执行多个事件处理程序；

  • 事件属性赋值兼容IE8及以下浏览器，而事件监听最低兼容到IE9浏览器

鼠标及键盘事件

常用鼠标事件

代码示例：

var btn = document.querySelector('button')
btn.addEventListener('mouseenter', function() { // 鼠标移入文字为红色this.style.color = 'red'
})
btn.addEventListener('click', function() {  // 鼠标单击文字为蓝色this.style.color = 'blue'
})
btn.addEventListener('mouseleave', function() { // 鼠标移出文字为黑色this.style.color = 'black'
})

事件处理程序中的this指代当前操作元素

 常用键盘事件

键盘事件经常用于表单元素中，如：input输入框

代码示例：

var input = document.querySelector('input')
input.addEventListener('keydown', function() {console.log('keydown', this.value) // 获取上一次输入值
})
input.addEventListener('keypress', function() {console.log('keypress', this.value) // 获取上一次输入值
})
input.addEventListener('keyup', function() {console.log('keyup', this.value) // 获取当前输入值
})

使用时注意触发顺序（keydown->keypress->keyup），不同的键盘事件触发时机不同，返回的结果有区别

 常用键盘事件属性

使用键盘事件属性可以精确的控制键盘操作，如：回车触发，方向键触发

代码示例：

// 以输入a为例，分别查看三种事件返回结果
var input = document.querySelector('input')
input.addEventListener('keydown', function(event) {console.log(event.keyCode)      // 65console.log(event.charCode)     // 0console.log(event.key)           // a
})
input.addEventListener('keypress', function(event) {console.log(event.keyCode)      // 97console.log(event.charCode)     // 97console.log(event.key)           // a
})
input.addEventListener('keyup', function(event) {console.log(event.keyCode)      // 65console.log(event.charCode)     // 0console.log(event.key)           // a
})

可以看到，三种事件中，只有key属性返回的结果保持统一，如果不考虑IE8以下浏览器兼容性，推荐使用key来代替keyCode和charCode

窗口事件

常用鼠标事件

 load事件代码示例

<script>
/* 输出div中文字内容 */
// 方式一
window.addEventListener('load', function() {console.log(document.querySelector('.box').innerHTML)
})
// 方式二
window.onload = function() {console.log(document.querySelector('.box').innerHTML)
}
</script>
<div class="box">主要内容</div>

此处JS代码在元素之前，所以应该将代码放在load事件中，等待元素加载完成后再获取其内容。

使用onload绑定事件时，注意一个页面不要存在多个onload，这样会只会运行最后一个onload中的代码，推荐使用addEventListener绑定事件。

 beforeunload事件代码示例

window.addEventListener("beforeunload", function (e) {var confirmationMessage = "confirm close window ?"// 兼容WebKit与非WebKit内核浏览器(e || window.event).returnValue = confirmationMessagereturn confirmationMessage
})

根据returnValue或return的值可自定义对话框信息（只对IE有效）

 resize事件代码示例

/* 调整浏览器窗口时，获取可视窗口宽高 */
window.addEventListener("resize", function (e) {console.log(window.innerWidth) // 可视窗口宽console.log(window.innerHeight) // 可视窗口高
})

多用于检测不同屏幕尺寸，自适应布局

scroll事件代码示例

/* 获取滚动条垂直滚动距离 */
window.addEventListener("scroll", function () {var myTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 兼容写法console.log(myTop);
})

常用于检测滚动条滚动距离

BOM window对象

BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。

BOM结构

window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法

使用window子对象时，可以使用完整语法，也可以忽略window，如：window.alert()与alert()效果相同

 window对象

open(url, name, features, replace)

  • url: 打开指定页面的url，如果没有则打开空白页

    • name: 指定target属性或窗口名称，支持以下值：

      • _blank –- url加载到新窗口（默认）

      • _parent –- url加载到父框架

      • _self –- url替换当前页面

      • _top –- url替换任何可加载的框架集

      • name -- 窗口名称

  • features: 设置新打开窗口的功能样式（如：width=500）

  • replace

    • true –- url替换浏览历史中的当前条目

    • false –- 在浏览历史中创建新条目

// 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '_self')
// 新窗口打开csdn首页，并设置窗口宽高500px
open('https://www.csdn.net/', '_blank', 'width=500,height=500')

 scrollTo(xpos, ypos)

  • xpos：距离网页左上角x坐标

  • ypos：距离网页左上角y坐标

<style>.box { height: 3000px; }
</style>
<div class="box"><p>我是顶部</p>
</div>
<script>
window.addEventListener('load', function() {scrollTo(0, 500) // 页面加载后，滚动到距离顶部500px})
</script>

 location对象

location对象包含当前url信息，经常用于网址判断，url跳转

获取网址信息

// 以https://www.csdn.net/nav/python?param1=111&param2=222#first为例，
查看输出结果
console.log(location.href)// “https://www.csdn.net/nav/python?param1=111&param2=222#first”
console.log(location.host)        // “www.csdn.net”console.log(location.protocol)    // “https://”console.log(location.pathname)  // “/nav/python”console.log(location.search)     // “?param1=111&param2=222”console.log(location.hash)       // “#first”

通过给href属性赋值url字符串的方式，可以跳转到对应url

location.href = 'https://www.csdn.net'

history对象 

history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转

 navigator对象

navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性

判断是否为谷歌内核：

navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核

screen对象

screen对象包含用户屏幕的信息

BOM计时器

定时器方法

setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)

setTimeout()可执行代码字符串，如：a+b，但不推荐使用，有安全风险;

定时器到期时，可以通过setTimeout()的额外参数（参数1, 参数2…）给执行函数传递参数（IE9及以下浏览器不支持此语法）;

定时器清除方法clearTimeout(id)，id为setTimeout()的返回值;

示例：

<p class="info"></p>
<button class="btn">清除定时器</button>
<script>var info = document.querySelector('.info')var btn = document.querySelector('.btn')var t1 = setTimeout(function() {info.innerHTML = '已经5秒了'}, 5000);// 点击按钮可清除定时器var btn = document.querySelector('.btn')btn.addEventListener('click', function() {clearTimeout(t1)info.innerHTML = '定时器已清除'})
</script>

setInterval(代码字符串或函数, 运行间隔毫秒数，参数1, 参数2…)

语法与setTimeout()相似，区别是setInterval()第二个参数为运行间隔;

由于setInterval()是循环执行，如果没有特殊需求，则必须限制执行次数，使用clearInterval(id)清除定时器;

示例：

<p class="info"></p>
<script>var info = document.querySelector('.info')var num = 0var t1 = setInterval(function() { // 每隔1秒显示当前时间，5次后停止info.innerHTML = '当前时间：' + String(new Date())if (num >= 4) { clear() }num++}, 1000)// 清除定时器function clear() {clearInterval(t1)info.innerHTML = '定时器已清除'}
</script>

C1认证复习材料（参照考纲,任务）相关推荐

  1. 2020、2021年江西信息技术/通用技术高考知识点总复习资料汇总（含高考视频教学及考纲知识点分布)

    2020年江西信息技术高考考点知识点.历年真题解析 复习资料 /// 所有的文章与视频都是本人精心录制整理,谢谢大家观看,小伙伴们要加油哟! 信息技术基础(必修) 2013到2019江西信息技术高考真 ...

  2. 通用技术和信息技术合格考知识点_2020年江西信息技术/通用技术高考知识点总复习资料汇总（含高考视频教学及考纲知识点分布)...

    2020年江西信息技术高考考点知识点.历年真题解析 复习资料 /// 所有的文章与视频都是本人精心录制整理,谢谢大家观看,小伙伴们要加油哟! 2020年江西信息技术第一章 信息与信息技术-知识点及历年 ...

  3. 思科推出最新认证考纲 将首先应用于CCIE认证

    今天,IT专业人士除要具备深厚的专业知识与技术外,更重要的是要对所处企业的业务环境有深刻理解,并能有效通过技术手段为业务增长创造更为有利的IT空间,从而为企业业务带来真正的价值.在这样的背景下,让技术 ...

  4. 硬件工程师笔试机考复习考纲

    硬件工程师考纲简略版 (未完待续) 1 概念 1.1 无源元件基础知识:电阻.电感 1.2 有源器件:二极管.三极管.mos管 1.2.1 二极管 二极管是用半导体材料(硅.硒.锗等)制成的一种电子器 ...

  5. 项目管理指南PMBOK第七版通读总结，新考纲通读指南+第七版怎么学

    PMP考试已经改版. 相信大家都以熟知. 那么这里给大家分享几点关于新考纲大家该怎么去备考,以及关于新教材的一些改变. [本文小目录]: PMP新考纲 改版详情 PMP新考纲 备考指南 PMP新考纲 ...

  6. 高职单招计算机知识点,高职单招计算机类考试复习材料

    适用于福建省高职单招2011年后的新考纲 高职单招计算机类考试复习材料 一.计算机基础知识 一.第一代(1946~1958):电子管数字计算机 计算机的逻辑元件采用电子管,应用以科学计算为主.其特点是 ...

  7. 超全C1认证学习笔记，内容详细，赶快收藏

    在我们考过C认证和正在考C认证的同学们当中,都有十分认真的同学.他们每堂课都认证的记下笔记,归纳好,方便自己后续的复习. 今天我们也收到我们C认证考生的投稿,他一共投稿了三篇文章,内容包括计算机通识. ...

  8. ap计算机科学a考纲,AP计算机考试考点分析_备考规划指导_5分容错率介绍

    离五月的日子越近,就越想要打醒一月报名时信心膨胀的自己.随着AP考试在国内的普及率越来越高,越来越多的出国党也开始不仅把眼光放在托福和SAT的考试上,而是挑战更高的难度的AP.今天,笔者将为大家带来A ...

  9. 9月PMP考试起用新考纲，这些变化你了解了吗？

    www.xmws.cn 微思网络官网 --思科.华为.红帽.Oracle.CISP.VMware .PMP-- 一.PMP认证简介 PMP(Project Management Professiona ...

最新文章

  1. python爬虫入门教程--优雅的HTTP库requests（二）
  2. 【数字信号处理】相关函数 ( 卷积与交换性 | 相关函数不具有交换性 | 推导过程 )
  3. php清空html_php怎么清除html代码
  4. vs android 压缩,Android Studio是否压缩classes.dex文件？
  5. 关于meta便签详解
  6. 需求说明 用户登陆功能的实现 c#
  7. Author Topic Model[ATM理解及公式推导]
  8. 一个项目有两个pom_Python Selenium设计模式之POM设计模式
  9. C++简单实现 前缀树
  10. 原价399，限时1元！7天人工智能入门训练营：带你从0掌握机器学习算法！
  11. 计算机基础备课计划,《计算机应用基础》教学计划备课讲稿.doc
  12. 树莓派4b 调整屏幕分辨率
  13. 【Practical】并行化：VLIW
  14. java100内奇数和偶数的和
  15. Latex表格单元格内文本顶着上格线解决
  16. 干货 | Elasticsearch 索引生命周期管理 ILM 实战指南
  17. linux命令tcp和tt,Linux中tcpdump命令起什么作用呢？
  18. 使用计算机翻译软件,memoQ(计算机翻译工具)
  19. 【软考必读】软考高级证书对工作的6大帮助
  20. Windows redis最新版本5.0.9下载

热门文章

  1. 微信小程序入门ColorUI组件库使用方法
  2. 如何实现搜索附近的店铺
  3. 关于华硕飞行堡垒系列无法使用扇热小风扇的问题
  4. canvas绘制图形API(一）
  5. 拯救脂肪肝第一步！以飞桨3D医疗影像分割方案MedicalSeg自主诊断脂肪肝
  6. 设置文字样式并写入CAD
  7. 软件工程与软件开发模型、软件开发方法
  8. Pinia（小菠萝）使用方法
  9. git官网下载不了或下载很慢的解决办法！
  10. Unity3d中UGUI组件精简复盘（十九）ContentSizeFitter组件