Web标准

Web标准也称网页标准，由一系列的标准组成，大部分有W3C（World Wide Web Consortium，万维网联盟）负责指定
三个组成部分：
- HTML：负责网页的结构（页面元素和内容）
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小）
- JavaScript：负责网页的行为（交互效果）

HTML

HTML（HyperText Markup Language）：超文本标记语言
- 超文本：超越了文本的限制，比如普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言：由标签"<标签名>"构成的语言
  - HTML标签都是预定义好的。例如：使用<h1>展示标题，使用<img>展示图片，使用<video>展示视频
  - HTML代码直接在浏览器中运行，HTML标签由浏览器解析

CSS

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式

HTML快速入门

HTML大体分为<head>头部和<body>身体

<head>中主要存放给浏览器看的信息，比如CSS样式、网页标题等

<body>中主要存放给用户看的信息，比如文字、图片、视频等

HTML标签的特点：

html标签不区分大小写，建议小写
html标签的属性值使用单引号/双引号都可以
html语法结构松散，但建议规范书写

标题标签：<h1> - <h6>

超链接：<a href=”” target=””>…</a>

href：指定资源访问的url
traget：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在空白页打开

视频标签：<video>

src：指定视频的url
controls：是否显示播放控件
width：宽度
height：高度

图片标签：

src：指定图片的url
width：宽度
height：高度

标签	作用
<b> / <strong>	加粗
<u> / <ins>	下斜线
<i> / <em>	倾斜
<s> / <del>	~~下斜线~~

字符实体	属性/说明
	空格
<	<
&gl;	>

CSS快速入门

CSS引入方式：

行内样式：写在标签的style属性中（通常配合JavaScript使用）
内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
外部样式：写在一个单独的.css文件中（通常通过link标签在网页中引入）

颜色表示：

关键字：red、green
rgb表示法：rgb(255, 0, 0)、rgb(134, 100, 89)
rbga表示法：rgba(255, 0 , 0, 0.5)、rgba(134, 100, 89, 1)
十六进制：#ff0000、#cccccc、#f00

颜色属性：

color：设置文本内容的颜色
background-color：设置背景颜色

CSS选择器

选择器	写法	示例	示例说明
元素选择器	元素名称 {…}	h1 {…}	选择页面上所有的<h1>标签
类选择器	.class属性值 {…}	.cls {…}	选择页面上所有class属性为cls的标签
id选择器	#id属性值 {…}	#hid {}	选择页面上id属性为hid的标签
分组选择器	选择器1, 选择器2 {…}	h1, h2	选择页面上所有的<h1>和<h2>标签
属性选择器	元素名称[属性] {…}	input[type] {…}	选择页面上有type属性的<input>标签
	元素名称[属性名=”值”] {…}	input[type=”text”]	选择页面type属性为text的<input>标签
后代选择器	元素1 元素2 {…}	form input {…}	选择<form>标签内的所有<input>标签

优先级排行：

!important - 最高优先级（应避免滥用）
内联样式 - style属性中的样式
ID选择器 - #id形式的选择器
类选择器、属性选择器、伪类 - .class、[type]、:hover等
元素选择器、伪元素 - h1、p、::before等
通用选择器 - *

盒子模型

盒子：页面中的所有元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方标的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边框区域（margin）

布局标签：网页开发中，会使用div和span这两个没有语义的布局标签
特点：
- div标签：
  1. 一行只显示一个（独占一行）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高（width、height）
- span标签：
  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

Flex布局

Flex是Flexible Box的缩写，意为“弹性布局”，是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力
通过给父容器添加flex的相关属性，来控制子元素的位置和排列方式

属性	取值	含义
display	flex	使用flex布局
flex-direction （设置主轴）	row	主轴方向为x轴，水平向右
	column	主轴方向为y轴，垂直向下
justify-content （子元素在主轴上的对齐方式）	flex-start	从头开始排列
	flex-end	从尾部开始排列
	center	从主轴居中对齐
	space-around	平分剩余空间
	space-between	先两边贴边，再平分剩余空间

Form表单

表单标签：<form>
表单属性：
- action：表单数据提交的url地址
- method：表单提交方式
  - get：表单数据拼接在url后面，?username=java，大小受限
  - post：表单数据在请求体中携带，没有大小限制
注意：表单项必须有name属性才可以提交

表单项

<input>：表单项，通过type属性控制输入形式
<select>：定义下拉列表，<option>定义列表项
<textarea>：文本域

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
hidden	定义隐藏域
submit/reset/button	定义提交按钮/重置按钮/可点击按钮

Table表格

标签	描述
<table>	定义表格整体
<thead>	用于定义表格头部（可选）
<tbody>	定义表格中的主体部分
<tr>	表格的行，可以包裹多个<td>
<td>	表格单元格（普通），可以包裹内容；如果是表头单元格，可以替换为<th>

总结

HTML

类别	标签	说明
文本处理标签	<h1> - <h6>	一级标题 - 六级标题
	<br> 、<p>	换行、段落
	<strong>、<em>、<ins>、<del>	文本加粗、倾斜、下划线、删除线
图片、音视频标签	<img src=”…”>	图片（路径：绝对路径、相对路径）
	<audio src=”…”>、<video src=”…”>	音频、视频
布局标签	<div>、<span>	盒子模型，没有语义的布局标签
表格标签	<table>、<thead>、<tbody>	表格、表头、表格主题
	<tr> / <th>、<td>	行 / 单元格
表单元素	<form>	定义表单（属性：action、method）
	<input type=”text/button>	表单项（文本输入框、按钮）
	<select> / <option>	表单项（下拉列表/选项）

CSS

类别	属性	说明
盒子模型	作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示
	width、height	高度、宽度
	box-sizing	高度和宽度的计算方式；content-box，border-box
	padding	内边距（上、右、下、左；上下、左右）
	border	边框
	margin	外边距（上、右、下、左；上下、左右）
flex弹性布局	作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力
	display	flex：使用flex布局
	flex-direction	设置主轴方向（row：x轴，水平方向；column：y轴，垂直方向）
	justify-content	子元素在主轴上的对齐方式

JavaScript

JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果
组成：
- ECMAScript：规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等等
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等
- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等

JS引入方式

内部脚本：将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可以改善显示速度
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 通过<script src=”…”></script>引入外部JS文件
书写规范：
- 结束符：每行结尾以分号结尾，可有可无（建议统一加上或统一不加）

变量&常量

JS中用let关键字来声明变量（弱类型语言，变量可以存放不同类型的值）
变量名需要遵循如下规则：
- 只能用字母、数字、下划线（_）、美元符号（$）组成，且不能以数字开头
- 变量名严格区分大小写，如name和Name是不同变量名
- 不能使用关键字如let、var、if、for等
var也可以声明变量，且被var声明的变量作用域为全局（不严谨不推荐）
const用于声明常量，被常量修饰的基本数据类型的数据是不能更改值的

输出语句

一般利用alert或console.log，还有不常用的一种方式：document.write(...)

window.alert(…)：将内容通过浏览器弹窗的方式提示给用户

console.log(…)：将内容通过浏览器控制台的方式提示给用户

document.write(…)：将内容直接写入到html的body中（不常用）

数据类型

JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）
基本数据类型：
- number：数字（整数、小数、NaN（Not a Number））
- boolean：布尔（true、false）
- null：对象为空。JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的
- undefined：当声明的变量未初始化时，该变量的默认值是undefined
- string：字符串，单引号、双引号、反引号都属于字符串标记符号，推荐使用单引号
获取数据类型：typeof运算符可以获取数据类型

函数

具名函数

介绍：函数（function）是被设计用来执行特定任务的代码块，方便程序的封装、复用

定义：JavaScript中的函数通过function关键字进行定义，语法为：

function functionName(参数1, 参数2, ...) {
    // 要执行的代码
}

function add(a, b) {
    return a + b;
}

调用：函数名称（实际参数列表）
1
2
3
4
let result = add(10,20);
let test = add(10,20,100,200);
alert(result); // 30
alert(test) // 30
方法的实参和形参个数可以是不一致的，但尽量保持一致，方便阅读

匿名函数

匿名函数是指一种没有名称的函数，可以通过两种方式定义：函数表达式和箭头函数

// 函数表达式
let add1 = function(a, b) {
	return a + b;
}

// 箭头函数
let add2 = (a, b) => {
	return a + b;
}

let res1 = add1(10,20);
let res2 = add2(100,200);

console.log(res1);	// 30
console.log(res2);	// 300

自定义对象

定义格式

let 对象名 = {
	属性名1: 属性值1,
	属性名2: 属性值2,
	属性名3: 属性值3,
	方法名: function (形参列表) {...}
}
    
let zs = {
    name: '张三',
    age: 18,
    gender: '男',
    sleep: function () { console.log("睡觉"); }
}

调用格式：

对象名.属性名;
对象名.方法名();

console.log(zs.name);
zs.sleep();

注意事项：

如果在自定义对象的方法中，使用的是箭头函数，箭头函数中的this指向的并不是当前这个对象，而是这个对象的父级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        let user = {
            name: 'Jane',
            age: 25,
            isAdmin: false,
            courses: ['html', 'css', 'js'],
            wife: null,
            sayHello: () => {
                console.log(this.name + "Hello");
            },
            son: {
                name: 'Jimmy',
                age: 5,
                sayHello: () => {
                    console.log(this.name + "Hello");
                }
            }
        }

        user.sayHello();    // Hello
        console.log('---------------');
        user.son.sayHello();    // Hello
    </script>
</body>
</html>

JS中的作用域只存在全局作用域、函数作用域、块级作用域。对象中嵌套对象，这些对象的定义都在全局作用域中，所以其中的箭头函数会继承全局作用域的this（即window对象）

所以，为了避免混乱的this对象，当使用箭头函数时，函数体内不要使用this关键字。如果用到了this对象，那么可以用普通的函数表达式进行方法声明

JSON

概念：JavaScript Object Natation，JavaScript对象标记法（JS对象标记法书写的文本）
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
特点：JSON格式的文本所有的key必须使用双引号括起来

// JS对象
const usrs = {
	name: "Tom",
	age: 20,
	gender: "男",
	hobby: ["read", "basketball", "play E-Game"]
}

// JSON字符串
let userInfo = `{
	"name": "Tom",
	"age": 20,
	"gender": "男",
	"hobby": ["read", "basketball", "play E-Game"]
}`

为了避免换行等JSON格式问题，推荐使用反引号将JSON格式字符串包裹起来

JS中提供了JSON.stringify(...)将JS对象转换为JSON格式字符串，或用JSON.parse(...)将JSON格式字符串解析为JS对象：

const car = {
    price: 200000,
    brand: 'Audi',
    color: 'black'
}
let carJSON = JSON.stringify(car);
console.log(carJSON);   // {"price":200000,"brand":"Audi","color":"black"}

let computerJSON = `{
    "CPU": "Intel Core i7",
    "GPU": "NVIDIA GeForce RTX 3080",
    "RAM": "32GB DDR4",
    "SSD": "1TB"
}`
let computer = JSON.parse(computerJSON);
console.log(computer.CPU);  // Intel Core i7
console.log(computer.GPU);  // NVIDIA GeForce RTX 3080
console.log(computer.RAM);  // 32GB DDR4
console.log(computer.SSD);  // 1TB

DOM

概念：Document Object Model，文档对象模型
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式
- 对HTML DOM事件做出反应
- 添加和删除HTML元素

DOM操作

DOM操作核心思想：将网页中所有的元素当作对象来处理。（标签的所有属性在该对象上都可以找到）
操作步骤：
- 获取想要操作的DOM元素对象
- 操作DOM对象的属性或方法（查文档或询问AI）
获取DOM对象
- 根据CSS选择器来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')
- 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('选择器')
  - 注意：得到的是一个NodeList节点集合，是一个伪数组（有长度、有索引的数组）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM operation</title>
</head>
<body>
    <h1 id="title1">Test DOM1</h1>
    <h1>Test DOM2</h1>
    <h1>Test DOM3</h1>
    <div style="background-color: pink;width: 100px;height: 100px;"></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        // 获取元素
        let myH1 = document.querySelector('h1');
        let myH1List = document.querySelectorAll('h1');

        // 查看获取的DOM对象
        console.log(myH1);  // <h1 id="title1">Change Value By DOM</h1> （浏览器对对象进行了可视化处理）
        console.dir(myH1);  // h1#title1（可以查看详细属性）
        console.log(myH1List);  // NodeList(3) [h1#title1, h1, h1]
        
        // 操作DOM对象
        myH1.innerHTML = "Change Value By DOM";
        myH1List[1].style.color = 'red';
        myH1List[2].align = 'center';
    </script>
</body>
</html>

获取DOM元素的方式有很多，比如document.getElementById(‘id’)、document.getElementsByTabName(‘div’)、document.getElementsByClassName(‘cls’)，这些方式通过名称就可以知道是利用ID、标签、类名获取DOM元素

事件监听

事件：HTML事件是发生在HTML元素上的”事情“。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件
语法：事件源.addEventListener('事件类型', 事件触发执行的函数);
事件监听三要素：
- 事件源：哪个DOM元素触发了事件，要获取DOM元素
- 事件类型：用什么方式触发，比如：鼠标点击 click
- 事件触发执行的函数：要做什么事情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">按钮喔</button>
    <p id="paragraph">复制我试试</p>
    <script>
        document.querySelector('#btn1').addEventListener('click', function () {
            alert('点击了');
        })
        document.querySelector('#paragraph').addEventListener('copy', function () {
            alert('复制了');
        })
    </script>
</body>
</html>

vscode中，摁住ctrl并左键单击addEventListener，进入到lib.dom.d.ts文件下，搜索GlobalEventHandlersEventMap可以看到所有的事件

常见事件

鼠标事件：click（鼠标点击）、mouseenter（鼠标移入）、mouseleave（鼠标移出）

键盘事件：keydown（键盘按下）、keyup（键盘抬起）

焦点事件：focus（获得焦点）、blur（失去焦点）

表单事件：input（用户输入）、submit（表单提交）

JS模块化

关键字：export、import

当JS文件需要引入另外一个JS文件的属性或方法时，需要用到import关键字。而另一个文件，需要将要暴露出去的内容使用export关键字暴露出去。
当涉及export或import时，这个JS文件就编程了模块化文件，如果要在HTML文件中引入这个JS文件，还需要在<script>标签生命引入类型：

1	<script src="./test.js" type="module"></script>

Vue

（建议参照Vue | Norlcyan’s Blog），这里Vue的部分内容

Vue准备步骤：

引入Vue模块
创建Vue的应用实例
定义元素（div），交给vue控制

数据驱动试图：

准备数据
用插值表达式渲染

常用指令

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

v-for指令：
- 作用：列表渲染，遍历容器的元素
- 语法：<h1 v-for="(item, index) in items" :key="item.id"\>
- 注意：想要让哪个标签遍历多次，指令就加在哪个标签上
v-bind指令：
- 场景：动态为标签属性绑定值（插值表达式不能在标签内使用）
- 语法：v-bind:属性="变量"/:属性="变量"
v-if和v-for：
- 作用：根据条件判断，是否展示某元素
- 区别：
  - v-if条件不成立，直接不渲染这个元素（不频繁切换的场景）
  - v-show通过CSS样式，来控制元素的展示与隐藏（频繁切换的场景）
v-model指令：
- 作用：表单元素上进行双向数据绑定，用于获取或设置表单项数据
- 注意：v-model=”变量”，变量必须在data中声明
v-on指令：
- 作用：事件绑定
- 语法：v-on:click="..."/@click="..."

Vue路由

组成：
- Router实例：路由实例，基于createRouter函数创建，维护了应用的路由信息
- <router-link>：路由链接组件，浏览器会解析成<a>
- <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	数据更新前
updated	数据更新后
beforeUnmount	组件销毁前
unmounted	组件销毁后

生命周期应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面

Ajax

介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML（XML：Extensible Markup Language，可扩展标记语言。本质是一种数据格式，可以用来存储复杂的数据结构）
作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分页面的技术，如：搜索联想、用户名是否可用的校验等等

Axios

Axios对原生的Ajax进行了封装，简化书写，快速开发
官网：http://www.axios-http.cn
步骤：
- 引入Axios的js文件
- 使用Axios发送请求，并获取响应结果

示例：

axios({
	method: 'GET',
	url: 'https://web-server.itheima.net/emps/list'
}).then((result) => {
	console.log(result.data);
}).catch((err) => {
	alert(err);
});

第一个括号内可以有以下参数：

method：请求方式，GET/POST

url：请求路径

data：请求数据（POST）

params：发送请求时携带的url参数，如：…?key=val（GET）

或者换一种方式发送请求：

// GET请求
axios.get(url).then((res) => {...})catch((err) => {...})

// POST请求
axios.post(url).then((res) => {...})catch((err) => {...})

Web前端

Web标准

HTML

CSS

HTML快速入门

CSS快速入门

CSS选择器

盒子模型

Flex布局

Form表单

表单项

Table表格

总结

HTML

CSS

JavaScript

JS引入方式

变量&常量

输出语句

数据类型

函数

具名函数

匿名函数

自定义对象

JSON

DOM

DOM操作

事件监听

常见事件

JS模块化

Vue

常用指令

Vue路由

Vue生命周期

Ajax

Axios