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

已于 2023-06-27 16:21:10 修改
阅读量1.1k 收藏 8
点赞数 2
分类专栏： 前端 文章标签： html 前端 javascript
于 2022-07-17 22:13:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40949254/article/details/125837772
版权

一、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 中有用的字符实体

显示结果描述实体名称实体编号
空格&nbsp; &#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
’撇号&apos; (IE不支持)&#39;
￠分（cent）&cent; &#162;
£镑（pound）&pound; &#163;
¥元（yen）&yen; &#165;
€欧元（euro）&euro;&#8364;
§小节&sect; &#167;
©版权（copyright）&copy; &#169;
®注册商标&reg;&#174;
™商标&trade; &#8482;
×乘号&times; &#215;
÷除号&divide;&#247;

二、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” 的那个元素。
**选取所有元素。
elementp选取所有

元素。

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 = 2
    b = 3
    fun = [object global]   默认fun函数调用，this指代的是global对象
    ===============
    a = 2
    b = 3
    fun = [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 = 2
    b = 3
    fun = [object global]
    ===============
    a = 2
    b = 3
    fun = [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 参数

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

  1. 函数的上下文对象： this
  2. 封装实参的对象： 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 文档事件

  1. 窗口事件

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

  2. 键盘事件

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

  3. 表单事件

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

  4. 鼠标事件

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

  5. 事件冒泡

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

  6. 事件委派

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

  7. 事件绑定

  8. 事件传播

14、JavaScript BOM（Browser Object Model）

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

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

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

14.1、Window 对象

  1. 弹出框

    • 警告框

      • 如果要确保信息传递给用户，通常会使用警告框。当警告框弹出时，用户将需要单击“确定”来继续
      window.alert("sometext");

    • 确认框

      • 当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false
      window.confirm("sometext");

    • 提示框

      • 如果希望用户在进入页面前输入值，通常会使用提示框。当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL
      window.prompt("sometext","defaultText");

  2. 定时事件

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

    主要包含两个方法：

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

  3. 常用窗口属性

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

  4. 其它方法

    // 打开新的窗口,参数可选
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，则可以获取到地址栏的信息（当前页面的完整路径）

常用属性

// 创建 a 标签并设置 href 属性
var url = document.createElement('a');
url.href = 'https://www.alivinfer.com:7788/?s=python#test';
console.log(url.href);      // https://www.alivinfer.com/?s=python#test
console.log(url.protocol);  // https:
console.log(url.host);      // www.alivinfer.com:7788
console.log(url.hostname);  // www.alivinfer.com
console.log(url.port);      // 7788
console.log(url.pathname);  // /
console.log(url.search);    // ?s=python
console.log(url.hash);      // #test
console.log(url.origin);    // https://www.alivinfer.com:7788

常用方法

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

14.4、存储对象

  • Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

    • localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
    • sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
    方法描述
    key(n)返回存储对象中第 n 个键的名称
    getItem(keyname)返回指定键的值
    setItem(keyname, value)添加键和值，如果对应的值存在，则更新该键对应的值。
    removeItem(keyname)移除键
    clear()清除存储对象中所有的键

15、JavaScript Exception

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

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

用法类似 Java，使用 try catch finally

四、JavaScript AJAX

AJAX = Asynchronous JavaScript And XML

AJAX 可以实现：

  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据
  1. 网页中发生一个事件（页面加载、按钮点击）
  2. 由 JavaScript 创建 XMLHttpRequest 对象
  3. XMLHttpRequest 对象向 web 服务器发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由 JavaScript 读取响应
  7. 由 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

阿绵
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习html+css+js.zip
01-05
前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端...
Web前端 知识点总结（HTML、CSS、JS）
qq_43655412的博客
08-28 2367
Web前端 知识点总结（HTML、CSS、JS）
使用JavaScript编写HTML
weixin_73261958的博客
11-12 2915
使用JavaScript编写HTML
前端是什么？简述主要技术HTML+CSS+JavaScript
weixin_41550144的博客
03-26 2988
1、什么是前端？ 在Web开发中，有前端与后端之分。前端负责页面的布局，后端负责页面的逻辑。 前端负责设计网页的样子，也就是我们看到的一个个彩色的方框和文字，但是一个网站只有这些按钮还远远不够啊，肯定还有服务器记录我们输入的信息数据。所以，后端负责的就是我们看不到的那些逻辑程序，它负责处理我们在网页上输入的那些信息或者点击信号等。 2、什么是HTML/DIV+CSS/JavaScript技术？ 1...
html，css和js
weixin_44985964的博客
11-30 3952
访问某个变量。没有被定义创建函数/函数声明/函数定义function 函数名（形参列表）{函数体return 返回值；}
认识前端三大件：HTML+CSS+JavaScript
qq_44706873的博客
10-25 3341
认识前端三大件：HTML+CSS+JavaScript 简要明了的理解一下： HTML是网页内容的载体，内容就是网页制作者放在页面上想让用户浏览的信息，比如文字，图片，视屏等等，就是定义网页内容。 css是网页样式的表现，可以想象成网页的衣服，比如标题的变化，背景图片以及边框等等，就是定义我这个网页的布局是什么样的。 JavaScript是用来实现网页上的动态效果，控制网页行为，比如有什么样的动作...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
仿华为商城部分前端界面html+css+js
最新发布
06-28
web前端商城网页项目
html+css+javascript
05-09
道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
京东首页Html+css+javascript代码
04-15
用前端三语言简单实现京东首页搭建，实现了导航栏和轮播图功能，对购物网站搭建框架有了基本的了解。
html是前段还是后端,什么是前端？前端与后端的区别？
weixin_42155721的博客
06-07 8421
什么叫前端开发？关键依据本人对前端开发的了解，梳理了一些变成前端开发所必须掌握的基本知识，期望可以协助一些刚进坑的小伙伴们。一、初识前端前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。前端技术一般分为前端设计和前端开发，前端设计一...
【Web基础入门】一文搞懂HTML + CSS + JavaScript 简单了解
weixin_43895667的博客
08-01 3290
1、HTML：HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等 2、CSS：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化 3、JavaScript核心语法、内置支持类、JS调试、JSDOM...
前端技术栈之html,css,js
lydon1314的博客
08-08 4507
本文是对于前端技术的简短介绍，主要是关于css和html一些基础知识，以及javascript和ajax的简单介绍
HTML + CSS + JavaScript 两小时快速入门教程
枯木何日可逢春
09-01 9249
1. html 1.1 HTML的结构 文档结构介绍： 文档声明：用于声明当前HTML的版本，<!DOCTYPE html>是HTML5的声明 html根标签：除文档声明以外，其它内容全部放在根标签html内部 文档头部配置：head标签，是当前页面的配置信息，外部引入文件 文档显示内容：body标签，里边的内容会显示到浏览器页面上 1.2 HTML语法规范 扩展名是html或者htm html标签不区分大小写 1.3 HTML常用标签 1.3.1 排版标签 字体标签 <
HTML+CSS+JavaScript
11-25
一、网页设计与策划01 网页与网站的概念02 网页核心技术(HTML/CSS/JAVASCRIPT)简介03 什么是HTML04 什么是CSS05 什么是JavaScript06 网页的设计流程07 HTML5概述、浏览器及内核08 编写第一个HTML页面09 HTML页面基本结构10 章节练习二、网页的基本实现（HTML标签）01 HTML基本语法02 标签及属性03 标签04 标题标签05 段落标签06 水平分隔线标签07 换行标签08 文本的格式化标签09 特殊字符标签10 图像标签14 相对路径与绝对路径11 章节练习-《清平乐》12 章节练习-《李清照简介》13 章节练习-《家电排行》15 章节练习-《百度网简介》16 超级链接标签17 锚点链接18 影像地图19 《table》表格标签20 无序列表标签21 有序列表标签22 定义列表标签23 章节练习-《工资明细》24 章节练习-《我的电脑》25 章节练习-《在线考试》三、层叠样式表01 CSS简介02 CSS样式规则03 CSS样式的调用方法04 标签选择器05 类选择器06 ID选择器07 标签指定式选择器08 包含(后代)选择器09 群组选择器10 通配符选择器11 属性选择器12 关系选择器13 链接伪类选择器四、样式属性01 字体属性02 文本属性03 阴影效果04 对象内溢出文本05 背景设置06 定义列表的样式五、盒模型网页布局01 初识盒子模型02 边框属性(border)03 边距属性(padding与margin)04 圆角边框05 阴影效果06 浮动属性(float)07 元素定位(position)08 溢出属性(overflow)
HTML+CSS+JavaScript简易教程
热门推荐
_TFBoy的小茶馆
03-22 3万+
1 Web(万维网) web原理：服务器和客户端（浏览器）之间的对话 客户端：连接到服务器并发送请求（一般指浏览器） 服务器：运行着服务器软件，根据请求提供页面（就像一个服务员一样）。永远在线。 url: Uniform Resourse Locator, 统一资源定位符。也叫URI, Uniform Resourse Identifier, 统一资源标识符。URL一般以www开头。 ...
前端开发基础 HTML+CSS+JS
小白典的博客
04-28 9124
HTML介绍 HTML(Hyper Text Markup Language)是超文本标记语言，并不是编程语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令用来说明文字、图像、视频、表格、链接等，目前广泛使用的是HTML5 CSS介绍 CSS(Cascading Style Sheets)是层叠样式表，用来表现HTML文件样式的标准语言。CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局
Html+Css+JavaScript快速入门
Challenge_and_smiles的博客
07-03 976
--------HTML基础-------- Hyper Text Markup Language：超文本标记语言. 什么是超文本：不仅仅是文本，还包括文本的样式(字体 大小 颜色等)，还包括多媒体(图片、音频、视频). 和xml的区别：XML标签可以任意定制，HTML标签固定就有那么多种. 学习HTML主要学习有哪些标签，标签有哪些属性，标签和标签间的嵌套关系. html常用标签： 文本标签： 1：<h1></h1> ...<h6></h6>
HTML+CSS+JavaScript入门教程（万字）
lsl5713的博客
11-24 8592
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML（HyperText Markup Language）:超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如：使用展示图片W3C标准：网页主要由三部分组成HTMLCSSJavaScipt。
前端html+css+js注册+登录案例
06-07
好的，以下是一个简单的前端HTML + CSS + JS注册和登录案例： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>注册和登录</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>欢迎注册和登录</h1> <div class="container"> <div class="form-container"> <h2>注册</h2> <form id="register-form" onsubmit="return validateRegisterForm()"> <label for="username">用户名:</label> <input type="text" name="username" id="username"> <label for="password">密码:</label> <input type="password" name="password" id="password"> <label for="email">电子邮件:</label> <input type="email" name="email" id="email"> <button type="submit">注册</button> </form> </div> <div class="form-container"> <h2>登录</h2> <form id="login-form" onsubmit="return validateLoginForm()"> <label for="username">用户名:</label> <input type="text" name="username" id="login-username"> <label for="password">密码:</label> <input type="password" name="password" id="login-password"> <button type="submit">登录</button> </form> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` body { font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4; } h1 { text-align: center; margin-top: 50px; } .container { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 50px; } .form-container { background-color: #fff; padding: 20px; margin: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; background-color: #f4f4f4; } button[type="submit"] { background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } button[type="submit"]:hover { background-color: #3e8e41; } ``` JavaScript代码： ``` function validateRegisterForm() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var email = document.getElementById("email").value; if (username == "") { alert("请输入用户名"); return false; } if (password == "") { alert("请输入密码"); return false; } if (email == "") { alert("请输入电子邮件"); return false; } alert("注册成功！"); return true; } function validateLoginForm() { var username = document.getElementById("login-username").value; var password = document.getElementById("login-password").value; if (username == "") { alert("请输入用户名"); return false; } if (password == "") { alert("请输入密码"); return false; } alert("登录成功！"); return true; } ``` 这个案例包含一个注册表单和一个登录表单。当用户提交表单时，JavaScript代码会验证输入是否有效，并根据结果显示成功或失败消息。您可以将此代码作为起点，进行更多的开发和改进，以实现更完整的注册和登录功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值