三大件区别

HTML 超文本标记语言（英语：HyperText Markup Language，简称：HTML）

CSS 层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联 样式表、串接样式表、阶层式样式表）

对于这个网页

若只有 HTML

若加上了 CSS

可以说 HTML 就是页面的骨架，CSS 是皮肤，JS 就是能让用户和页面互动的神经网络

cd56e9d81730f5e40b37dd7f26642465.fd9f78ff6a7b98b9198c84acbf7b975f

HTML

HTML 可以说是一个个嵌套的小盒子，就像下图这样一层一层嵌套下去。

举个基础的代码例子

1
2
3

<html>
  ...
</html>

嵌套了

<head>
  ...
</head>
<body>
  ...
</body>

而head和body内部又嵌套了一些元素

基础 HTML 标签

HTML 属性

有些标签会携带属性，如下图

实例标签有:

<a>
<img>

<img>是自闭标签，而且照片的位置若为本地文件，则为相对位置

div & span

`<div>` 元素

定义：
- <div> 是块级元素（block-level element），表示文档中的一个块。
- 用于将内容分组，并通常用于布局和样式目的。
特点：
- 独占一行，占据父容器的全部宽度。
- 可包含段落、标题、列表、表格等块级元素或行内元素。
- 默认没有任何样式或特殊含义，通常需要通过 CSS 来添加样式。
常见应用：
- 作为布局的容器。
- 包裹一组内容进行样式化。

例子：

<div class="container">
  <h1>标题</h1>
  <p>这是一个段落。</p>
</div>

`<span>` 元素

定义：
- <span> 是行内元素（inline element），用于包裹文档中的一小块文字或其他行内内容。
- 没有语义，只是一个纯粹的容器。
特点：
- 不会独占一行，只占用它内部内容的宽度。
- 通常用于为一小段内容应用样式或行为。
常见应用：
- 在段落或文本中为某些字符添加样式。
- 与 JavaScript 结合，给某些小范围内容添加交互行为。

例子：

1	<p>我的名字是 <span class="highlight">小明</span>。</p>

`<div>` 和 `<span>` 的区别

特性	`<div>`	`<span>`
类型	块级元素	行内元素
宽度表现	默认占满父容器宽度	仅占自身内容宽度
常见用法	容器、布局	小范围样式或行为
嵌套内容	可以嵌套块级和行内元素	只能嵌套行内元素
语义	无语义	无语义

如何选择？

使用 <div> 时：
- 需要组织和布局整个页面的结构。
- 内容需要换行或分组时。
使用 <span> 时：
- 仅需改变某段文字或内联内容的样式。
- 不需要换行或改变文档流时。

为什么不推荐只用 `<div>`？

1. 缺乏语义

<div> 没有任何语义，只是一个普通的容器。
如果整个页面只有 <div>，对开发者和屏幕阅读器（辅助技术）来说，内容会缺乏意义和上下文。
例如，一个标题用 <h1> 表示会更有意义，而不是简单地用一个 <div> 加样式。

对比：

html复制代码<!-- 语义化 -->
<h1>这是标题</h1>
<p>这是一个段落。</p>
html复制代码<!-- 非语义化 -->
<div class="header">这是标题</div>
<div class="paragraph">这是一个段落。</div>

2. 可维护性差

如果页面只有 <div>，开发人员很难快速理解内容的结构或用途。
用合适的标签（如 <span>、<section>、<article>）可以提高代码的可读性。

3. 对搜索引擎不友好

搜索引擎会根据语义标签更好地理解页面内容，进而提高 SEO 排名。
例如，用 <h1>、<nav>、<article> 等标签可以帮助搜索引擎正确抓取内容。

4. 无助于无障碍支持

屏幕阅读器依赖 HTML 的语义化标签来为视障用户提供更好的体验。
只用 <div> 会使辅助技术难以区分内容的层次结构。

适合 `<div>` 的场景

当你需要一个没有特定语义的容器时。
用来实现布局时，例如网格、弹性盒子（flexbox）。
包裹一组内容，用于样式化或交互。

CSS

若 HTML 看做骨架，那么 CSS 就是衣服

CSS 规则

例子

如果没有 CSS:

如果加上 CSS:

如果给其中一个div加上class

如果加上的是id

`id`和`class`的区别

在 HTML 中，id 和 class 是两种常见的属性，用于标识和区分元素。它们的功能和使用场景不同，以下是它们的区别和用法：

1. 定义与语法

`id`

唯一性：id 是全局唯一的，用于标识一个特定的元素。
语法：id="unique-id"
用途：通常用于需要唯一标识的元素，例如用于脚本交互（如 JavaScript）或特定样式。

`class`

多用性：class 可以重复使用，多个元素可以拥有相同的 class 值。
语法：class="class-name"
用途：主要用于为多个元素分组，便于样式应用或 JavaScript 操作。

2. 使用场景

`id` 的使用场景

唯一标识单个元素：
1
<div id="header">这是头部</div>

JavaScript 操作特定元素：

<div id="btn">点击我</div>
<script>
  document.getElementById("btn").innerText = "已点击";
</script>

锚点链接：

1 2	<a href="#section1">跳到部分1</a> <div id="section1">这是部分1</div>

`class` 的使用场景

为多个元素应用相同样式：

1 2	<div class="box">盒子1</div> <div class="box">盒子2</div>

在 JavaScript 中操作一组元素：

<div class="item">项1</div>
<div class="item">项2</div>
<script>
  const items = document.getElementsByClassName("item");
  for (let item of items) {
    item.style.color = "red";
  }
</script>

使用多个类名：

1	<div class="box highlight">高亮的盒子</div>

3. 区别总结

特性	`id`	`class`
唯一性	页面中只能出现一次	可以多次重复使用
作用范围	适用于唯一元素	适用于一组元素
选择器优先级	在 CSS 中优先级高于 `class`	在 CSS 中优先级低于 `id`
JavaScript 获取	`document.getElementById("id")`	`document.getElementsByClassName("class")`
样式用途	主要用于唯一性样式或特殊用途	用于复用样式

4. 注意事项

**避免过度使用 id**：
- id 应该仅在需要唯一标识元素时使用，比如表单、锚点等。
- 过多使用 id 会降低代码的灵活性，因为它无法复用。
**优先使用 class**：
- 如果只是需要样式或分组，优先选择 class。
- class 更适合响应式设计和组件化开发。
混合使用：
- 如果需要某个元素同时具有唯一性和共享样式，可以同时使用 id和class:
  1
  <div id="main" class="container">主要内容</div>

5. 实践例子

示例页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>id 和 class 示例</title>
    <style>
      #header {
        font-size: 24px;
        color: blue;
      }
      .item {
        font-size: 18px;
        color: green;
      }
    </style>
  </head>
  <body>
    <div id="header">这是唯一的头部</div>
    <div class="item">项目1</div>
    <div class="item">项目2</div>
  </body>
</html>

通过这个例子，你可以看到 id 和 class 的实际用途。

总结

id 是唯一的，用于特定元素的标识。
class 是可以复用的，适用于多个元素的分组和样式共享。
推荐原则：如果是单一用途，使用 id；如果是样式和分组，优先使用 class！

重要的概念

有一些标签，如<h1>有一些默认的样式<div>和<span>没有的

h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0.67em;
  margin-inline-end: 0.67em;
  font-weight: bold;
}

1
2
3

div {
  display: block;
}

div默认显示block，但是没有其他样式

我们自定义 CSS 会覆盖这些默认样式

选择器

后代选择器

语法： A B {样式}

后代选择器选择的是祖先元素为 A 的 B 元素。

/* 选择 .container 的后代 .title */
.container .title {
    color: teal;
}

子选择器

语法： A > B {样式}

子选择器选择的是父元素为 A 的 B 元素。

/* 选择 .container 的直接后代 .title */
.container > .title {
    color: teal;
}

一般兄弟选择器

语法： A ~ B { 样式 }

一般兄弟选择器选择的是所有与 A 同级的，所有在 A 之后的 B 元素。

1
2
3

.third ~ p {
    color: teal;
}

紧邻兄弟选择器

语法： A + B { 样式 }

紧邻兄弟选择器选择的是与 A 同级的，紧跟在 A 之后的 B 元素。

1
2
3

.third + p {
    color: teal;
}

CSS 和 HTML 结合

行内样式表 (基本不使用
内部样式表
外部样式表 (推荐 😍

行内样式

1	<p style="background-color: red; font-size: 30px; color: blue;">这是一个行内样式</p>

内部样式

<style>
 button {
     height: 100px;
     width: 150px;
     background-color: yellow;
     border-radius: 50px;
 }
</style>

外部样式

button {
    height: 100px;
    width: 150px;
    background-color: yellow;
    border-radius: 50px;
}

1	<link rel="stylesheet" href="./style.css">

JavaScript

数据类型

Boolean
Number
String
Null
Undefined

运算符

`===`和`==`

我们判断相等的时候不用==而是用===，这是因为==会强制发生类型转换，导致不同类型也可以相等:

基本语法

赋值语句

let myBoolean = true;
myBoolean = false;

const myNumber = 3;
myNumber = 42; // const修饰的不可变，这样子不会起作用

如果我期望某个值在后面的程序中始终都是不会改变的，那么我们给他加上 const 可以预防错误的赋值操作

`null`和`undefined`

undefined表示”声明但尚未赋值“，
null表示”无值”。

函数

以const修饰是因为我们不希望存在两个相同名字的函数
()内是参数
实际上是把一个匿名函数赋值给一个变量，greatestCommonDivisor指向这个匿名函数

输出函数

1	console.log();

对话框函数

1	alert("Congratulations!;");

`setInterval()`

setInterval 是 JavaScript 中用于定时重复执行某个函数的一个内置方法。它会按照指定的时间间隔重复执行回调函数，直到被手动清除。

语法：

1	setInterval(callback, delay, [arg1, arg2, ...]);

callback：需要重复执行的函数。
delay：时间间隔（单位是毫秒，1 秒 = 1000 毫秒）。
**arg1, arg2, …**（可选）：传递给回调函数的额外参数。

示例：

1
2
3

setInterval(function () {
  console.log("This message will repeat every 2 seconds!");
}, 2000); // 每2秒输出一次消息

解释：

在上面的代码中，setInterval 设置了一个每 2 秒执行一次的回调函数，每次执行时都会输出 "This message will repeat every 2 seconds!"。

注意事项：

setInterval 会一直执行，直到调用 clearInterval 来停止它。
如果回调函数执行时间超过设定的间隔时间，可能会出现回调函数重叠执行的情况。为了避免这种情况，可以在回调函数中控制执行的频率。

取消定时器：

你可以使用 clearInterval 来取消 setInterval 创建的定时器，停止重复执行。

const intervalId = setInterval(function () {
  console.log("This will repeat every second!");
}, 1000);

// 停止定时器
setTimeout(function () {
  clearInterval(intervalId); // 5秒后停止重复输出
}, 5000);

解释：

在上面的代码中，setInterval 每秒输出一次信息，而 setTimeout 在 5 秒后调用 clearInterval，停止了定时器。

总结：

setInterval 用于定时重复执行回调函数。
clearInterval 用于停止定时器。
它常用于轮询、动画、周期性任务等场景。

`setTimeout()`

setTimeout 是 JavaScript 中用于延迟执行某个函数的一个内置方法。它会在指定的时间（以毫秒为单位）后执行一次给定的回调函数。

语法：

1	setTimeout(callback, delay, [arg1, arg2, ...]);

callback：需要延迟执行的函数。
delay：延迟的时间（单位是毫秒，1 秒 = 1000 毫秒）。
**arg1, arg2, …**（可选）：传递给回调函数的额外参数。

示例：

1
2
3

setTimeout(function () {
  console.log("This message is delayed!");
}, 2000); // 2秒后执行回调函数

解释：

在上面的代码中，setTimeout 设置了一个延迟 2 秒后执行的回调函数，函数内输出 "This message is delayed!"。

注意事项：

setTimeout 只会执行一次，如果需要重复执行，可以使用 setInterval。
如果在回调函数执行前调用 clearTimeout，可以取消定时器，不再执行回调函数。

取消定时器：

const timeoutId = setTimeout(function () {
  console.log("This will not run");
}, 2000);

clearTimeout(timeoutId); // 取消定时器

setTimeout 是处理延时操作和非阻塞代码执行的常用方法。

`setInterval() vs setTimeout()`

setInterval() 和 setTimeout() 都是 JavaScript 中用于定时执行回调函数的方法，但它们有一些关键的区别。下面是它们的对比：

特性	`setTimeout()`	`setInterval()`
执行次数	只执行一次	会持续重复执行
用途	一次性任务	周期性任务
取消方法	`clearTimeout()`	`clearInterval()`
行为	延迟执行一次回调函数	每隔指定时间间隔执行回调函数
例子	`setTimeout(() => { console.log("Done"); }, 1000);`	`setInterval(() => { console.log("Tick"); }, 1000);`

总结

使用 setTimeout() 当你需要在某个时间点执行一次任务时。
使用 setInterval() 当你需要定期、持续地执行任务时。
两者都可以通过相应的取消方法 clearTimeout() 和 clearInterval() 停止定时器。

数组

// 初始化
let pets = ["flower", 42, false];

//访问
console.log(pets[2]); // false

//替换
pets[2] = "none"; // ["flower", 42, "none"]

pets.pop(); // ["flower", 42]
pets.push(true); // ["flower", 42, true]
pets.unshift(false); // [false, "flower", 42, true]

let copyPets = { ...pets }; //拷贝[false, "flower", 42, true]
let copyPet = { ...pets[0] }; //拷贝false

条件语句

if (a < b) {
  console.log("a小于b");
} else if (a > b) {
  console.log("a大于b");
} else {
  console.log("a等于b");
}

while 循环

let z = 1;

while (z < 199) {
  z = z * 2;
}

for 循环

对象(Objects)

其实就是键值对

const myCar = {
    make : "Ford",
    year : 2005;
}

console.log(myCar.make); // "Ford"
console.log(myCar["year"]); // 2005;

对象解构赋值

myCar 是一个引用，他引用我们设置的 Object，所以是无法判断是否相等的

类

函数的回调

回调函数（callback function）是指作为参数传递给另一个函数并在该函数完成某些任务后被执行的函数。

简单来说，回调函数就是一个“被调用的函数”，它在某些操作完成后被自动执行。

引例

如果我们有一个函数，他传入一个a 然后对a进行了一系列的运算后返回b出来。

如果我们希望对a进行不同的运算，我们只能复制多次这个函数，然后修改运算部分，这样子我们的代码就冗余了。

因此，我们可以给这个函数传入一个运算函数，然后把运算部分替换成该函数，这样子我们就实现了一份代码多次使用。

举个例子：

假设你在做一个项目，向一个同事请求某项任务的帮助。你告诉他：“帮我做这个任务，做完了就通知我。”你的同事完成任务后会通知你，这个通知就是“回调”。

在 JavaScript 中，回调函数的作用类似，就是让我们指定一些任务完成后的操作。

代码示例：

// 定义一个函数，它接受一个回调函数
function greetUser(name, callback) {
  console.log(`Hello, ${name}!`);
  callback(); // 调用回调函数
}

// 定义一个回调函数
function sayGoodbye() {
  console.log("Goodbye!");
}

// 使用回调函数
greetUser("Alice", sayGoodbye); // 输出：Hello, Alice!  Goodbye!

解释：

greetUser 是一个函数，它接受两个参数：一个名字 (name) 和一个回调函数 (callback)。
在 greetUser 函数内部，当它完成了打印 Hello, Alice! 后，它会调用 callback()，也就是调用 sayGoodbye() 函数。
结果是先输出 Hello, Alice!，然后再输出 Goodbye!。

为什么要用回调函数？

异步操作：在 JavaScript 中，很多操作是异步的（比如读取文件、网络请求等）。回调函数可以在异步操作完成后指定接下来的操作。例如，你发起了一个请求，等服务器响应后，再执行回调函数来处理结果。
灵活性：你可以根据不同的需求传递不同的回调函数，使得代码更加灵活和可复用。

另一个常见的例子：事件处理

当你点击一个按钮时，浏览器会触发一个事件，回调函数会处理这个事件。

// 假设我们有一个按钮，点击时执行回调函数
document.getElementById("myButton").addEventListener("click", function () {
  console.log("Button clicked!");
});

总结：

回调函数就是一个“被传递并等待执行的函数”。它通常作为其他函数的参数，用来在某些操作完成后做特定的事情。在 JavaScript 中，回调函数是处理异步操作和事件响应的常见方式。

`map()`

通过对起始数组的每个元素应用回调函数，创建新的数组。

1 2	const myArray = [1, 2, 3, 4]; const newArray = myArray.map((num) => num * 3);

前端栈学习(一)-初识HTML、CSS、JS三大件

三大件区别

HTML

基础 HTML 标签

HTML 属性

<a>

<img>

div & span

<div> 元素

<span> 元素

<div> 和 <span> 的区别

如何选择？

为什么不推荐只用 <div>？

1. 缺乏语义

2. 可维护性差

3. 对搜索引擎不友好

4. 无助于无障碍支持

适合 <div> 的场景

CSS

CSS 规则

例子

id和class的区别

1. 定义与语法

id

class

2. 使用场景

id 的使用场景

class 的使用场景

3. 区别总结

4. 注意事项

5. 实践例子

示例页面：

总结

重要的概念

选择器

CSS 和 HTML 结合

JavaScript

数据类型

运算符

===和==

基本语法

赋值语句

null和undefined

函数

输出函数

对话框函数

setInterval()

语法：

示例：

解释：

注意事项：

取消定时器：

解释：

总结：

setTimeout()

语法：

示例：

解释：

注意事项：

取消定时器：

setInterval() vs setTimeout()

总结

数组

条件语句

while 循环

for 循环

对象(Objects)

对象解构赋值

类

函数的回调

引例

举个例子：

代码示例：

解释：

为什么要用回调函数？

另一个常见的例子：事件处理

总结：

map()

fliter()

`<a>`

`<img>`

`<div>` 元素

`<span>` 元素

`<div>` 和 `<span>` 的区别

为什么不推荐只用 `<div>`？

适合 `<div>` 的场景

`id`和`class`的区别

`id`

`class`

`id` 的使用场景

`class` 的使用场景

`===`和`==`

`null`和`undefined`

`setInterval()`

`setTimeout()`

`setInterval() vs setTimeout()`

`map()`

`fliter()`