# 前端基础（HTML + CSS + JavaScript）

一、HTML

基础概念：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）

1、html元素

<!--doctype 有助于在浏览器中正确显示网页，不区分大小写-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>chapter1</title>
</head><!--只有body部分才会在浏览器页面展示-->
<body><!-- h1-h6 标签用来定义标题--><h1>第一个章节标题</h1><!-- p 标签用来定义段落--><p>第一个段落</p><!-- a 标签用来链接，其中 href属性中指定链接的地址,target属性设置为 _blank 则表明链接会在新的窗口打开--><a href="https://www.baidu.com" target="_blank">百度一下</a><p>---------</p><!-- img 标签用来定义图像--><!--绝对路径--><img src="https://static.runoob.com/images/runoob-logo.png" width="300" height="120" alt="网络图片"><!-- br 换行标签，其属于自闭和标签--><br/><!--相对路径1、./ 代表文件的所在目录（可以省略不写）2、../ 代表文件所在的父级目录3、../../ 代表文件所在的父级目录的父级目录4、/ 代表文件所在的根目录--><!--1、当图片和和html文件在同一个目录下--><img src="nnln.png" width="300" height="150" alt="nnln"> <br/><!--2、当图片和html文件在不同目录下（但同一个大目录下）--><!--a、图片在img文件夹下，html和img在一个目录下--><img src="./img/nnln.png" width="300" height="150" alt="nnln"> <br/><!--b、图片在img文件夹下，html在page文件夹下，但img和page在同一个目录下--><!--<img src="../img/nnln.png" width="500" height="500" alt="nnln">--><!--3、当图片和html在不同的目录下--><img alt="nnln" src="file:///E:/image/nnln.png" width="300" height="150"><!--hr标签创建水平线，用作分隔符--><hr><!-- b 标签加粗 & i 标签斜体--><b><i>小帅哥</i></b><br/><br/><!--上标和下标-->x<sub>i</sub>+y<sup>j</sup><br/><br/><!-- strong 标签加粗--><strong>文本加粗</strong><br/><br/><!--small 标签缩小--><small>文本缩小</small><br/><br/><!--pre 标签用来对空行和空格进行控制--><pre>朝辞白帝彩云间  千里江陵一日还两岸猿声啼不住  轻舟已过万重山</pre><!--address 写入地址--><address>email me <a href="https://www.baidu.com">rose@163.com</a></address><!--abbr 标签，当鼠标移动到缩写词上可显示完整--><abbr title="World Wide Web">www</abbr><br/><br/><!--bdo 标签定义文字方向,dir=rtl 从右往左显示--><p><bdo dir="rtl">IT 练习生</bdo></p><!--定义引用--><q>生与死轮回不止</q>
</body></html>

1.1、表格标签

表格	描述
`<table >`	定义表格
`<caption >`	定义表格标题
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<thead >`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot >`	定义表格的页脚
`<col>`	定义用于表格列的属性
`<colgroup>`	定义表格列的组
`<ul>`	定义无序列表
`<ol>`	定义有序列表
`<li>`	定义每行列表内容

<table> 中 border 属性为显示表格边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>chapter1</title><link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body style="background-color: aqua"><h1>标题1</h1><p style="color: red;font-family: Arial,serif;font-size: 20px;text-align: center">吾之荣耀，离别已久</p><table border="1"><caption>成绩表</caption><tr><th>姓名</th><th>语文</th><th>数学</th></tr><tr><td>fer</td><td>90.5</td><td>100</td></tr><tr><td>gb</td><td>88.2</td><td>90.2</td></tr></table>
</body>
</html>

2、html属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”

3、html样式

在 HTML 4 中，有若干的标签和属性是被废弃的，而推荐使用样式 style 来代替

标签	描述
`<center >`	定义居中的内容。
`<font>` 和 `<basefont >`	定义 HTML 字体。
`<s>` 和 `<strike>`	定义删除线文本
`<u>`	定义下划线文本
属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

3.1、外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head><meta charset="UTF-8"><title>chapter1</title><link rel="stylesheet" type="text/css" href="/css/main.css">
</head>

3.2、内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head><meta charset="UTF-8"><title>chapter2</title><style type="text/css">body {background-color: #b3d4fc}p {margin-left: 20px}</style>
</head>

3.3、内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性

 <p style="color: red;font-family: Arial,serif;font-size: 20px;text-align: center">吾之荣耀，离别已久</p>

标签	描述
`< style>`	定义样式定义
`<link>`	定义资源引用
`<div >`	定义文档中的节或区域（块级）
`<span>`	定义文档中的行内的小块或区域

4、html 类

对 HTML 进行分类（设置类），能够为元素的类定义 CSS 样式

为相同的类设置相同的样式，或者为不同的类设置不同的样式

4.1、分类块级元素

HTML

元素是块级元素。它能够用作其他 HTML 元素的容器。

设置

元素的类，能够为相同的

元素设置相同的类：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>chapter3</title><style>.cities {background-color: #222222;color: white;margin: 20px;padding: 20px;}</style>
</head>
<body><div class="cities"><h2>London</h2><p>London is the capital city of England.It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div><div class="cities"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></div><div class="cities"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div>
</body>
</html>

4.2、分类行内元素

<!DOCTYPE html>
<html>
<head>
<style>span.red {color:red;}
</style>
</head>
<body><h1>My <span class="red">Important</span> Heading</h1></body>
</html>

5、html id 属性

HTML id 属性用于为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。

5.1、id 属性的使用

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

5.1.1、class 与 id 的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>chapter4</title><style>/* 设置 id 为 "myHeader" 的元素的样式 */#myHeader {background-color: lightblue;color: black;padding: 40px;text-align: center;}/* 设置类名为 "city" 的所有元素的样式 */.city {background-color: tomato;color: white;padding: 10px;}</style>
</head><body><!--拥有唯一 id 的元素--><h1 id="myHeader">My Cities</h1><!-- 拥有相同类名的多个元素 --><h2 class="city">London</h2><p>London is the capital of England.</p><h2 class="city">Paris</h2><p>Paris is the capital of France.</p><h2 class="city">Tokyo</h2><p>Tokyo is the capital of Japan.</p></body>
</html>

5.1.2、通过 id 和链接实现书签跳转

<!--通过 id 和链接实现书签跳转-->
<p><a href="#baidu" >百度一下</a></p><br/><br/><br/><br/><br/><br/><br/><br/>
<h2 id="baidu">百度</h2>

5.13、在 JavaScript 中使用 id 属性

JavaScript 也可以使用 id 属性为特定元素执行某些任务

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

6、html 中的 JavaScript

JavaScript 使 HTML 页面更具动态性和交互性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>chapter5</title>
</head><body><h1>第一段 JavaScript</h1><button type="button" onclick="document.getElementById('demo').innerHTML=Date()">点击显示日期和时间</button><p id="demo"></p>
</body>
</html>

6.1、html `<script>` 标签

HTML <script> 标签用于定义客户端脚本（JavaScript）

<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件

JavaScript 的常见用途是图像处理、表单验证和内容的动态更改

如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法

7、html 语义元素

语义元素清楚地向浏览器和开发者描述其意义

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息

语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容

标签	描述
`<article>`	定义文章
`<aside>`	定义页面内容以外的内容
`<details>`	定义用户能够查看或隐藏的额外细节。
`<figcaption>`	定义 `<figure>` 元素的标题。
`<figure>`	规定自包含内容，比如图示、图表、照片、代码清单等
`<footer>`	定义文档或节的页脚
`<header>`	规定文档或节的页眉
`<main>`	规定文档的主内容
`<mark>`	定义重要的或强调的文本
`<nav>`	定义导航链接
`<section>`	定义文档中的节
`<summary>`	定义元素的可见标题
`<time>`	定义日期/时间

8、html 中有用的字符实体

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`' (IE不支持)`	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

二、CSS（Cascading Style Sheets）

CSS（层叠样式表）是一种描述 HTML 文档样式的语言
CSS 描述应该如何显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

1、css 语法

CSS 规则集（rule-set）由选择器和声明块组成

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>chapter1</title><style>h1 {color: aqua;text-align: center;}p {color: black;text-align: left;}</style>
</head>
<body><h1>LOL 经典台词</h1><p>我用双手成就你的梦想</p>
</body>
</html>

2、css 选择器

CSS 选择器用于**查找（或选取）**要设置样式的 HTML 元素

css 选择器一共分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

选择器	例子	例子描述
.class	.intro	选取所有 class=“intro” 的元素。
#id	#firstname	选取 id=“firstname” 的那个元素。
*	*	选取所有元素。
element	p	选取所有元素。
element,element,…	div, p	选取所有元素和所有元素。

3、引入 css 的三种方式

有三种插入样式表的方法：

外部 CSS
- 外部样式在 HTML 页面部分内的元素中进行定义
内部 CSS
- 内部样式是在 head 部分的

4、css 框模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容

三、JavaScript

JavaScript 是属于 HTML 和 Web 的编程语言

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
常见的几种 JS 框架

Angular：模块化
React：虚拟 DOM
Vue：渐进式 JavaScript 框架，逐步实现新特性，如实现模块化开发、路由、状态管理等新特性。特点是综合了模块化和虚拟 DOM 的优点
Axios：前端通信框架

UI 框架

Ant-Design：阿里出品，基于 React 的 UI 框架
ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架
Bootstrap： Twitter 推出的一个用于前端开发的开源工具包
AmazeUI：一款 HTML5 跨屏前端框架

JavaScript构建工具

Bable
WebPack

1、Javascript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行

在 html 中可放置 js 脚本的位置

<head>
<body>
外部脚本（优势）
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载

2、JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

3、JavaScript 关键词

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

4、JavaScript 作用域

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const，这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）

注意事项：

通过 let 定义的变量不会被提升到顶端，在声明 let 变量之前就使用它会导致 ReferenceError。变量从块的开头一直处于“暂时死区”，直到声明为止
关键字 const 有一定的误导性，它没有定义常量值。它定义了对值的常量引用。因此，不能更改常量原始值，但可以更改常量对象的属性

5、JavaScript 数据类型

在 JavaScript 中，几乎“所有事物”都是对象

布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象

JavaScript 定义了 5 种原始数据类型：

string
number
boolean
null
undefined

5.1、字符串值

5.2、数值

5.3、布尔值：true、false

5.4、数组

使用对象创建数组

// 创建相同类型数组
var arr = new Array();
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr[4] = 5;
arr[5] = 6;
arr[6] = 7;
arr[7] = 8;
arr[8] = 9;
// 创建不同类型数组
var arr = new Array();
arr[0] = 1;
arr[1] = "2";
arr[2] = 3;
arr[3] = "4";
arr[4] = 5;
arr[5] = "6";
arr[6] = 7;
arr[7] = "8";
arr[8] = 9;

使用字面量创建数组

// 同类型有序数组创建
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 不同类型有序数组创建
var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];

遍历数组
- 普通 for 循环
```
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (var i = 0; i < arr.length; i++) {console.log(arr[i]);
}
```
- forEach() 方法：注意只支持IE8（不包含IE8）以上的浏览器
forEach()方法需要一个函数作为参数，这种函数被称为回调函数，由我们创建但是不由我们调用的。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：

第一个参数：就是当前正在遍历的元素
第二个参数：就是当前正在遍历的元素的索引
第三个参数：就是正在遍历的数组
```
var arr = ["盲僧", "阿木木", "剑圣", "男枪"];
arr.forEach(function (value, index, obj) {// 盲僧 #### 0 #### 盲僧, 阿木木, 剑圣, 男枪// ...console.log(value + " #### " + index + " #### " + obj);
});
```

数组增删方法

push() 方法：向数组的末尾添加一个或多个元素，并返回数组的新的长度

var arr = ["盲僧", "阿木木", "剑圣", "男枪"];
var result = arr.push("巨魔", "猴子", "赵信", "卡兹克", "蜘蛛");
console.log(arr);  // ["盲僧", "阿木木", "剑圣", "男枪", "巨魔", "猴子", "赵信", "卡兹克", "蜘蛛"]
console.log(result);  // 9

pop() 方法：删除数组的最后一个元素，并将被删除的元素作为返回值返回

var arr = ["蔚", "梦魇", "皇子"];
var result = arr.pop();
console.log(arr);   // ["蔚", "梦魇"]
console.log(result); // 2

unshift() 方法：向数组开头添加一个或多个元素，并返回新的数组长度
shift() 方法：删除数组的第一个元素，并将被删除的元素作为返回值返回

数组截取和拼接方法

slice()方法：从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

var arr = ["盲僧", "阿木木", "剑圣", "男枪"];
// 传入两个参数，起始和结束位置，第二个参数省略，则默认从起始位置截取到末尾
var result = arr.slice(1, 4);
console.log(result);
result = arr.slice(3);
console.log(result);
// 负数则指的是从后往前，-2 代表倒数第二个
result = arr.slice(1, -2);
console.log(result);

splice()方法：用于将指定元素从原数组中删除，并将被删除的元素作为返回值返回

第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var arr = ["盲僧", "阿木木", "剑圣", "男枪", "卡兹克"];
var result = arr.splice(3, 2);
console.log(arr);  // ["盲僧", "阿木木", "剑圣"]
console.log(result);  // ["男枪", "卡兹克"]
result = arr.splice(1, 0,"巨魔", "猴子", "赵信");
console.log(arr);   // ["盲僧", "巨魔", "猴子", "赵信", "阿木木", "剑圣"]
console.log(result);

concat()方法：连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr = ["盲僧", "阿木木", "剑圣", "男枪"];
var arr2 = ["蔚", "梦魇", "皇子"];
var arr3 = ["猴子", "赵信"];
var result = arr.concat(arr2, arr3, "艾克", "死歌");
console.log(arr);   // ["盲僧", "阿木木", "剑圣", "男枪"]
console.log(result.length);  //  11

数组转换为字符串
- join()方法：将数组转换为一个字符串，将转换后的字符串作为结果返回，不会对原数组产生影响。可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用 “”,"作为连接符
```
var arr = ["盲僧", "阿木木", "剑圣", "男枪"];
var result = arr.join();
var result1 = arr.join("-");
console.log(result);   //  盲僧, 阿木木, 剑圣, 男枪
console.log(result1);  //  盲僧-阿木木-剑圣-男枪
```

数组反转

reverse()方法：反转数），会直接修改原数组

var arr = ["盲僧", "阿木木", "剑圣", "男枪"];
arr.reverse();
console.log(arr);  //  ["男枪", "剑圣", "阿木木", "盲僧"];

数组中元素排序
- sort()方法：对数组中的元素进行排序，默认会按照Unicode编码进行排序
  - 需要注意对纯数字排序的时候，因为按照Unicode编码排序，可能会得到错误的结果
  - 可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边，浏览器会根据回调函数的返回值来决定元素的顺序
    - 如果返回一个大于0的值，则元素会交换位置
    - 如果返回一个小于0的值，则元素位置不变
    - 如果返回一个等于0的值，则认为两个元素相等，也不交换位置
```
var arr = ["b", "c", "a"];
arr.sort();
console.log(arr);  // ["a", "b", "c"]
var arr1 = [1, 3, 2, 11, 5, 6];
arr1.sort();
console.log(arr1); // 没有得到预期的升序 [1, 11, 2, 3, 5, 6]
var arr2 = [1, 3, 2, 11, 5, 6];
arr2.sort(function (a, b) {return a - b;
});
console.log(arr2); // [1, 2, 3, 5, 6, 11]
```

5.5、对象

call()和apply()方法: 函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行，在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this，call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装到一个数组中统一传递

call()方法：

function fun(a, b) {console.log("a = " + a);console.log("b = " + b);console.log("fun = " + this);
}var obj = {name: "obj",sayName: function () {console.log(this.name);}
};/* a = 2b = 3fun = [object global]   默认fun函数调用，this指代的是global对象===============a = 2b = 3fun = [object Object]
*/
fun(2, 3);
console.log("===============");
// 在调用的时候传入一个对象，这个对象就是this所指向的对象，也就是说可以自己指定this的指向，然后从第二个参数开始，实参将会依次传递
fun.call(obj, 2, 3);

apply()方法：

function fun(a, b) {console.log("a = " + a);console.log("b = " + b);console.log("fun = " + this);
}var obj = {name: "obj",sayName: function () {console.log(this.name);}
};/*a = 2b = 3fun = [object global]===============a = 2b = 3fun = [object Object]
*/
fun(2, 3);
console.log("===============");
fun.apply(obj, [2, 3]);  // 需要将参数封装到一个数组中进行传递

5.5.1、Date 对象

var date = new Date();
console.log(date);console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

5.5.2、Math 对象

/*固定值*/
console.log("PI = " + Math.PI);  // PI = 3.141592653589793
console.log("E  = " + Math.E);  //  E  = 2.718281828459045
console.log("===============");
/*正数*/
console.log(Math.abs(1));        //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1));     //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99));   //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根

5.5.3、String 对象

常用方法：

charAt()方法：根据索引获取指定位置的字符
charCodeAt()方法：获取指定位置字符的字符编码（Unicode编码）
concat()方法：用来连接两个或多个字符串、
indexof()方法：检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1，可以指定一个第二个参数，指定开始查找的位置
lastIndexOf()方法：用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找，也可以指定开始查找的位置
slice()方法：可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回
substring()方法：可以用来截取一个字符串，它和slice()类似，但不能接收负值作为参数，如果传入负数，会默认为0，且第二个参数比第一个参数小时，还会自动调整参数顺序
substr()方法演示：用来截取字符串
- 第一个参数：截取开始位置的索引
- 第二个参数：截取的长度
split()方法：将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组
toUpperCase()方法演示：将一个字符串转换为大写并返回
toLowerCase()方法演示：将一个字符串转换为小写并返回

6、Javascript 函数

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行

7、Javascript 事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件

8、JavaScript 调试

通过调试器，可以设置断点（代码执行被中断的位置），并在代码执行时检查变量

通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”

console.log() 方法
- 如果浏览器支持调试，那么可以使用 console.log() 在调试窗口中显示 JavaScript 的值
设置断点
- 在调试窗口中，可在 JavaScript 代码中设置断点
- 在每个断点中，JavaScript 将停止执行，以便能够检查 JavaScript 的值
- 在检查值之后，您可以恢复代码执行
debugger 关键词
- debugger 关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。这与在调试器中设置断点的功能是一样的。如果调试器不可用，debugger 语句没有效果。如果调试器已打开，此代码会在执行debugger时停止

9、this 指向

以函数形式调用时，this永远都是window
以方法的形式调用时，this是调用方法的对象
以构造函数的形式调用时，this是新创建的那个对象
使用call和apply调用时，this是传入的那个指定对象

10、arguments 参数

在调用函数时，浏览器每次都会传递进两个隐含的参数：

函数的上下文对象： this
封装实参的对象： arguments

arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度，在调用函数时，所传递的实参都会在arguments中保存，比如：arguments.length 可以用来获取实参的长度，即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦，例如：

arguments[0]：表示第一个实参
arguments[1]：表示第二个实参
…
它里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象

function fun(a, b) {// 通过下标获取第一个参数console.log(arguments[0]); // Hello// 通过下标获取第二个参数console.log(arguments[1]);  // World// 获取实参的个数console.log(arguments.length);  // 2// 看看它的函数对象console.log(arguments.callee);   // [Function: fun]console.log(arguments.callee == fun);  // true
}fun("Hello", "World");

11、Javascript 闭包

JavaScript 变量属于本地或全局作用域。

全局变量能够通过闭包实现局部（私有）

var add = (function () {var counter = 0;return function () {return counter += 1;}
})();add();
add();
add();// 计数器目前是 3

变量 add 的赋值是自调用函数的返回值。这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后

12、RegExp 对象

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来。

使用typeof检查正则对象，会返回object

12.1、创建正则对象

匹配模式：

i：忽略大小写
g：全局匹配模式
ig：忽略大小写且全局匹配模式
m：执行多行匹配
使用 | 表示或者的意思 --> [ ] 里的内容也是或的关系
- [a-z]：任意小写字母
- [A-Z]：任意大写字母
- [A-z]：任意字母
- [0-9]：任意数字
- …
使用 ^ 表示除了某些字符是否还包含其它的：
- [^a-z]：除了任意小写字母是否还包含其它的
- [^A-Z]：除了任意大写字母还包含其它的
- [^A-z]：除了任意字母还包含其它的
- [^0-9]：除了任意数字还包含其它的
通过量词可以判断一个内容出现的次数，量词只对它前边的一个内容起作用，如果有多个内容可以使用 () 括起来
- {n} ：正好出现n次
- {m,} ：出现m次及以上
- {m,n} ：出现m-n次
- + ：至少一个，相当于{1,}
- * ：0个或多个，相当于{0,}
- ? ：0个或1个，相当于{0,1}
检查或者判断是否以某个字符或者字符序列开头或者结尾
- ^ ：表示开头，注意在[^字符序列]表达的意思不一样
- $ ：表示结尾
检查一个字符串中是否含有.和\就会使用转义字符
- \. ：表示.
- \\ ：表示\
- \w ：任意字母、数字、，相当于[A-z0-9]
- \W ：除了字母、数字、，相当于[^A-z0-9]
- \d ：任意的数字，相当于[0-9]
- \D ：除了任意的数字，相当于[^0-9]
- \s ：空格
- \S ：除了空格
- \b ：单词边界
- \B ：除了单词边界

// 语法格式
var 变量名 = new RegExp("正则表达式","匹配模式");
// 检查一个字符串中是否含有ab
var reg = new RegExp("ab", "i");
var str = "Abc";
var result = reg.test(str);
console.log(result);  // true// 使用字面量创建
var 变量名 = /正则表达式/匹配模式;
// 检查一个字符串中是否含有a
var reg = /a/i;
var str = "Abc";
var result = reg.test(str);
console.log(result);   // true// 检查一个字符串中是否含有a或b或c
var reg = /a|b|c/;
var str = "Abc";
var result = reg.test(str);
console.log(result);   // true// 检查一个字符串中是否含有字母
var reg = /[A-Z]|[a-z]/;
var str = "abc";
var result = reg.test(str);
console.log(result);   // true// 检查一个字符串中是否除了数字还有其它字母
var reg = /[^0-9]/;
var str = "0123456789a";
var result = reg.test(str);  // true
console.log(result);// 量词使用
var str = "abbc";reg = /(ab){3}/;
console.log(reg.test(str));  // false
console.log("===============");
reg = /b{3}/;
console.log(reg.test(str));   // false
console.log("===============");
reg = /ab{1,3}c/;
console.log(reg.test(str));   // true
console.log("===============");
reg = /ab{3,}c/;
console.log(reg.test(str));   // false
console.log("===============");
reg = /ab+c/;
console.log(reg.test(str));   // true
console.log("===============");
reg = /ab*c/;
console.log(reg.test(str));  // true
console.log("===============");
reg = /ab?c/;
console.log(reg.test(str));
console.log("===============");// 检查一个字符串是否以 a 开头
var str = "abcabca";
var reg = /^a/;
console.log(reg.test(str));  // true// 检查一个字符串是否以 a 结尾
var str = "abcabca";
var reg = /a$/;
console.log(reg.test(str));  // true

12.2、正则方法

这些正则方法其实都是字符串的方法，但是它的参数需要传递正则表达式

split()方法：将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串，这个方法即使不指定全局匹配，也会全都插分

var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result);  // [1, 2, 3, 4, 5, 6, 7]

search()方法：搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1，它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串，serach()只会查找第一个，即使设置全局匹配也没用

var str = "hello abc hello aec afc";
var result = str.search(/a[bef]c/);
console.log(result);  // 6

match()方法：根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下的match()只会找到第一个符合要求的内容，找到以后就停止检索，但可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

var str = "1a2a3a4a5e6f7A8B9C";
var result = str.match(/[a-z]/ig);
console.log(result); // [a, a, a, a, e, f, A, B, C]

replace()方法：将字符串中指定内容替换为新的内容，默认只会替换第一个，但是可以设置全局匹配替换全部

参数：

第一个参数：被替换的内容，可以接受一个正则表达式作为参数
第二个参数：新的内容

var str = "1a2a3a4a5e6f7A8B9C";
var result = str.replace(/[a-z]/gi, "@-@");
console.log(result);  // 1@-@2@-@3@-@4@-@5@-@6@-@7@-@8@-@9@-@

13、JavaScript DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

常用节点分为四类：

文档节点：整个HTML文档
- document对象作为window对象的属性存在的，可以不用获取直接使用
- 通过该对象可以在整个文档访问内查找节点对象，以及创建各种节点对象
元素节点：HTML文档中的HTML标签
- 浏览器会将页面中所有的标签都转换为一个元素节点，可以通过document的方法来获取元素节点
属性节点：元素的属性
文本节点：HTML标签中的文本内容

13.1、DOM 文档常用方法

通过 document 对象来访问和操作 HTML 的实例

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector(CSS选择器)	通过CSS选择器选择一个元素
document.querySelectorAll(CSS选择器)	通过CSS选择器选择多个元素

13.2、DOM 文档事件

窗口事件

属性	描述
onblur	当窗口失去焦点时运行脚本。
onfocus	当窗口获得焦点时运行脚本。
onload	当文档加载之后运行脚本。
onresize	当调整窗口大小时运行脚本。
onstorage	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

键盘事件

属性	描述
onkeydown	当按下按键时运行脚本。
onkeyup	当松开按键时运行脚本。
onkeypress	当按下并松开按键时运行脚本。

表单事件

属性	描述
onblur	当窗口失去焦点时运行脚本。
onfocus	当窗口获得焦点时运行脚本。
onchange	当元素改变时运行脚本。
oninput	当元素无效时运行脚本。
oninvalid	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。
onselect	当选取元素时运行脚本。
onsubmit	当提交表单时运行脚本。

鼠标事件

属性	描述
onclick	当单击鼠标时运行脚本。
ondblclick	当双击鼠标时运行脚本。
onmousedown	当按下鼠标按钮时运行脚本。
onmouseup	当松开鼠标按钮时运行脚本。
onmousewheel	当转动鼠标滚轮时运行脚本。
onmousemove	当鼠标指针移动时运行脚本。
onmousewheel	当转动鼠标滚轮时运行脚本。

事件冒泡

事件的冒泡（Bubble）：指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
事件委派

通过绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，也可以尝试将其绑定给元素的共同的祖先元素，也就是事件的委派。事件的委派，是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
事件绑定
事件传播

14、JavaScript BOM（Browser Object Model）

浏览器对象模型（BOM）可以通过JS来操作浏览器，BOM提供了一组对象，用来完成对浏览器的操作，常见的BOM对象有：

Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

14.1、Window 对象

弹出框
- 警告框
  - 如果要确保信息传递给用户，通常会使用警告框。当警告框弹出时，用户将需要单击“确定”来继续
```
window.alert("sometext");
```
- 确认框
  - 当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false
```
window.confirm("sometext");
```
- 提示框
  - 如果希望用户在进入页面前输入值，通常会使用提示框。当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL
```
window.prompt("sometext","defaultText");
```

定时事件

JavaScript 可以在时间间隔内执行，window 对象允许以指定的时间间隔执行代码，这些时间间隔称为定时事件

主要包含两个方法：

// 在等待指定的毫秒数后执行函数
setTimeout(function, milliseconds)
// 等同于 setTimeout()，但持续重复执行该函数
setInterval(function, milliseconds)

常用窗口属性

// 浏览器窗口的内高度（以像素计）
window.innerHeight
// 浏览器窗口的内宽度（以像素计）
window.innerWidth

其它方法

// 打开新的窗口,参数可选
window.open(URL,name,specs,replace)
// 关闭当前窗口
window.close();

14.2、Navigator对象

Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器，由于历史原因，Navigator对象中的大部分属性都已经不能帮助识别浏览器了，一般只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

var ua = navigator.userAgent;
console.log(ua);

14.3、Location 对象

Location 对象中封装了浏览器的地址栏的信息，如果直接打印 location，则可以获取到地址栏的信息（当前页面的完整路径）

常用属性

console.log(location);          //输出location对象
console.log(location.href);     //输出当前地址的全路径地址
console.log(location.origin);   //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host);     //输出当前地址的主机
console.log(location.port);     //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search);   //输出当前地址的?后边的参数部分

常用方法

location.assign("https://www.baidu.com");   // 用来跳转到其它的页面，作用和直接修改location一样
location.reload(true);      // 用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.replace("https://www.baidu.com");    // 使用一个新的页面替换当前页面，调用完毕也会跳转页面，它不会生成历史记录，不能使用回退按钮回退

15、JavaScript Exception

当错误发生时，JavaScript 提供了错误信息的内置 error 对象。

error 对象提供两个有用的属性：name 和 message

用法类似 Java，使用 try catch finally

四、JavaScript AJAX

AJAX = Asynchronous JavaScript And XML

AJAX 可以实现：

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

五、JSON（JavaScript Object Notation）

JSON 是一种存储和交换数据的语法

JSON 是通过 JavaScript 对象标记法书写的文本

1、交换数据

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本

JSON 属于文本，并且能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器，也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

以这样的方式，能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译

2、发送数据

若数据存储在 JavaScript 对象中，可以把该对象转换为 JSON，然后将其发送到服务器

3、存储并取回数据

把 JS 对象数据存储在本地存储中

4、基本语法

JSON 语法是 JavaScript 语法的子集

4.1、语法规则

JSON 语法衍生于 JavaScript 对象标记法语法：

数据在名称/值对中
数据由逗号分隔
花括号容纳对象
方括号容纳数组

实例：

{"employees":[{ "firstName":"Bill", "lastName":"Gates" },{ "firstName":"Steve", "lastName":"Jobs" },{ "firstName":"Elon", "lastName":"Musk" }
]}

4.2、JSON 数据类型

在 JSON 中的键必须是字符串

有效的数据类型

在 JSON 中，值必须是以下数据类型之一：

字符串
数字
对象（JSON 对象）
数组
布尔
Null

JSON 的值不可以是以下数据类型之一：

函数
日期
undefined

5、JSON.parse()

JSON 的常规用途是同 web 服务器进行数据传输。

在从 web 服务器接收数据时，数据永远是字符串。

通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象

<!DOCTYPE html>
<html>
<body><h1>用 JSON 字符串创建对象</h1><p id="demo"></p><script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script></body>
</html>

6、JSON.stringify()

通过 JSON.stringify() 把 JavaScript 对象转换为服务器可接收的JSON字符串

<!DOCTYPE html>
<html>
<body><h1>从 JavaScript 对象创建 JSON 字符串</h1><p id="demo"></p><script>
var obj = { name: "Bill", age: 62, city: "Seatle" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script></body>
</html>

7、JSONP（JSON with Padding）

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法

JSONP 不使用 XMLHttpRequest 对象

JSONP 使用 <script> 标签取而代之

六、Cookie

Cookie 是一些存储在本地电脑上的文本文件中的数据，当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息，Cookie 的作用就是用于解决 “如何记录客户端的用户信息”：

当用户访问 web 页面时，它的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中，服务端通过这种方式来获取用户的信息。

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 Cookie

七、WebStorage

WebStorage是HTML5中本地存储的解决方案之一

Cookie 问题：

数据大小：作为存储容器，Cookie的大小被限制在4KB左右，只能存储一些简单的配置信息
安全性问题：由于在HTTP请求中的Cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的
网络负担：Cookie会被附加在每个HTTP请求中，在HttpRequest和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失

1、localStorage 方法

localStorage在本地永久性存储数据，除非显式将其删除或清空

2、sessionStorage 方法

sessionStorage 对象存储特定于某个对话的数据，也就是它的生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。存储在sessionStorage中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可以使用

Reference

https://www.w3school.com.cn/html/index.asp

https://www.w3school.com.cn/css/index.asp

https://www.w3school.com.cn/js/index.asp

https://blog.csdn.net/qq_38490457/article/details/109257751