HTML简介

超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签。HTML就是使用标记标签来描述网页。

HTML文档后缀可以是.htm，也可以是.html。

HTML 标签是由尖括号包围的关键词，比如 <html>。标签通常是成对出现的，比如<b>和</b>，第一个出现的是开始标签，第二个则是结束标签。

Web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。

值得一提的是只有<body>区域才会在浏览器显示。

HTML基础

javascript执行顺序

主程序是指脚本中直接执行的代码，不包括任何异步操作或回调函数。它是脚本的初始执行路径。
宏任务是指那些在事件循环的每个阶段执行的任务，通常包括：

  • 定时器（setTimeout、setInterval）
  • 用户交互（如点击事件）
  • 网络请求回调
  • Promise 的 then 和 catch 回调（在微任务队列中执行，但触发它们的操作是宏任务）

微任务是指那些在当前任务执行完成后立即执行的任务，通常包括：

  • Promise 的 then 和 catch 回调
  • MutationObserver 回调

JavaScript的执行顺序遵循以下规则：

  1. 主程序：首先执行主程序中的代码。
  2. 微任务队列：在每次宏任务执行完成后，立即执行微任务队列中的所有任务。
  3. 宏任务队列：在微任务队列执行完成后，从宏任务队列中取出下一个任务执行.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
console.log('主程序开始');

// 宏任务1
setTimeout(() => {
  console.log('宏任务1');
  Promise.resolve().then(() => {
    console.log('宏任务1中的微任务');
  });
}, 0);

// 宏任务2
setTimeout(() => {
  console.log('宏任务2');
}, 0);

// 微任务1
Promise.resolve().then(() => {
  console.log('微任务1');
});

// 微任务2
Promise.resolve().then(() => {
  console.log('微任务2');
});

console.log('主程序结束');

输出为：

1
2
3
4
5
6
7
主程序开始
主程序结束
微任务1
微任务2
宏任务1
宏任务1中的微任务
宏任务2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function fetchData() {
  console.log('开始获取数据');
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
  console.log('数据获取完成');
}

async function fetchData2() {
  console.log('开始获取数据2');
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
  console.log('数据获取完成2');
}

console.log('脚本开始');
await Promise.all([fetchData(), fetchData2()]);
console.log('脚本结束');
1
2
3
4
5
6
脚本开始
开始获取数据
开始获取数据2
数据获取完成2
数据获取完成 # 和上面一条，谁先完成，就先输出哪个
脚本结束

常用的函数

setTimeout：在指定的延迟后执行一次指定的函数。
setInterval：在指定的时间间隔内重复执行一个函数。