发表更新前端24 分钟读完 (大约3566个字)0次访问

前端

基础知识

HTML

HTML 简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它是构建网页内容的基础，定义了网页的结构和内容。HTML 通过标签（Tags）来描述网页中的文本、图片、链接、表格等元素。

HTML 的核心概念

  1. 标签（Tags）：

    • HTML 使用标签来定义网页中的元素。
    • 标签通常成对出现，例如 <p> 和 </p>。
    • 有些标签是自闭合的，例如 <img> 和 <br>。

  2. 元素（Elements）：

    • 一个完整的 HTML 元素包括开始标签、内容和结束标签。
    • 例如：<p>这是一个段落。</p>。

  3. 属性（Attributes）：

    • 属性用于为 HTML 元素提供附加信息。
    • 属性通常位于开始标签中，以键值对的形式出现。
    • 例如：<a href="https://www.example.com">链接</a>。

HTML 的基本结构

一个典型的 HTML 文档结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
  • <!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档。
  • <html>：HTML 文档的根元素。
  • <head>：包含元数据（如字符集、标题、样式表链接等），不会显示在页面上。
  • <body>：包含网页的可见内容。

常用 HTML 标签

1. 文本标签

  • 标题：

    1
    2
    3
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

  • 段落：

    1
    <p>这是一个段落。</p>

  • 加粗：除<strong>外，还有一个标签<b>会使包围的文字加粗。b元素代表侧重实用目的而不带任何额外重要性也不暗示不同语态或语气的一段文本，比如一段文本摘要中的关键字、一段审查中的产品名称、文本驱动软件中的可执行语句或者一篇文章的导语。<strong>元素代表内容的强烈的重要性、严重性或者紧急性，可以被用在标题（heading）、说明（caption）或者段落（paragraph）上，来显示这部分被包围的文字的重要性；可以被用来标记警告或者警示标志；还可以被用来表示需要被尽快看见的部分。

    1
    <strong>加粗文本</strong>

  • 斜体：<em>意为对内容的强调(emphasis)，强调位置的不同通常会带来整个句子含义的变化（参考重读）。此外，还有一个标签<i>表示斜体(italic)，但这个没有强调的语义。这里关系到HTML5最大的特性之一——语义化，所有被HTML5保留的标签都带有其特有的语义，<b>和<i>也被重新赋予了语义，相比较而言，标签的样式反而变得不那么重要。<i>元素代表在普通文本中具有不同语态或语气的一段文本，某种程度上表明一段不同特性的文本，比如一个分类学名称、一个技术外语、一个外语习语、一个音译、一个想法，或者西方文本中的一艘船名。

    1
    <em>斜体文本</em>

2. 链接和图片

  • 链接：
    1
    <a href="https://www.example.com">点击这里</a>
  • 图片：
    1
    <img src="image.jpg" alt="图片描述">

3. 列表

  • 无序列表：
    1
    2
    3
    4
    <ul>
        <li>项目1</li>
        <li>项目2</li>
    </ul>
  • 有序列表：
    1
    2
    3
    4
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>

4. 表格

1
2
3
4
5
6
7
8
9
10
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

5. 表单

1
2
3
4
5
6
7
8
9
<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <button type="submit">提交</button>
</form>

6. 语义化标签

  • <header>：页眉。
  • <footer>：页脚。
  • <section>：文档中的一部分。
  • <article>：独立的内容块。
  • <nav>：导航栏。

HTML5 新特性

  1. 语义化标签：

    • 例如 <header>、<footer>、<article> 等，使代码更具可读性。

  2. 多媒体支持：

    • 音频：
      1
      2
      3
      <audio controls>
          <source src="audio.mp3" type="audio/mpeg">
      </audio>
    • 视频：
      1
      2
      3
      <video controls width="320">
          <source src="video.mp4" type="video/mp4">
      </video>

  3. 表单增强：

    • 新增输入类型：email、date、number、range 等。
    • 新增属性：placeholder、required、autofocus 等。

  4. Canvas 和 SVG：

    • Canvas：用于绘制图形。
      1
      <canvas id="myCanvas" width="200" height="100"></canvas>
    • SVG：矢量图形。
      1
      2
      3
      <svg width="100" height="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
      </svg>

HTML 开发工具

  1. 编辑器：

    • Visual Studio Code（推荐）。
    • Sublime Text。
    • Atom。

  2. 浏览器开发者工具：

    • Chrome DevTools。
    • Firefox Developer Tools。

  3. 在线工具：

    • CodePen：在线编写和测试 HTML 代码。
    • JSFiddle：类似 CodePen 的在线编辑器。

CSS

CSS 简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 文档外观和格式的样式表语言。它用于控制网页的布局、颜色、字体、间距等视觉效果。CSS 与 HTML 和 JavaScript 一起构成了现代网页开发的三大核心技术。

CSS 的核心概念

  1. 选择器（Selectors）：

    • 用于选择需要样式化的 HTML 元素。
    • 例如：p 选择所有 <p> 元素，.class 选择具有特定类的元素。

  2. 属性（Properties）：

    • 用于定义元素的样式。
    • 例如：color、font-size、margin 等。

  3. 值（Values）：

    • 属性的具体设置。
    • 例如：color: red; 中的 red 就是值。

  4. 规则集（Rule Set）：

    • 由选择器和一组声明（属性和值）组成。
    • 例如：
      1
      2
      3
      4
      p {
          color: red;
          font-size: 16px;
      }

  5. 层叠（Cascading）：

    • 当多个样式规则应用于同一个元素时，CSS 会根据优先级和规则顺序决定最终的样式。

  6. 盒模型（Box Model）：

    • 每个 HTML 元素都可以看作一个盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。

CSS 的基本语法

1
2
3
4
选择器 {
    属性1: 值1;
    属性2: 值2;
}

示例：

1
2
3
4
5
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

CSS 的引入方式

  1. 内联样式：

    • 直接在 HTML 元素的 style 属性中定义样式。
    • 示例：
      1
      <p style="color: red; font-size: 16px;">这是一个段落。</p>

  2. 内部样式表：

    • 在 HTML 文件的 <head> 中使用 <style> 标签定义样式。
    • 示例：
      1
      2
      3
      4
      5
      6
      <style>
          p {
              color: red;
              font-size: 16px;
          }
      </style>

  3. 外部样式表：

    • 将 CSS 代码保存在单独的 .css 文件中，并通过 <link> 标签引入。
    • 示例：
      1
      <link rel="stylesheet" href="styles.css">

常用 CSS 属性

1. 文本样式

  • 颜色：
    1
    color: red;
  • 字体大小：
    1
    font-size: 16px;
  • 字体粗细：
    1
    font-weight: bold;
  • 文本对齐：
    1
    text-align: center;

2. 盒模型

  • 内边距：
    1
    padding: 10px;
  • 外边距：
    1
    margin: 20px;
  • 边框：
    1
    border: 1px solid black;

3. 背景

  • 背景颜色：
    1
    background-color: yellow;
  • 背景图片：
    1
    background-image: url('image.jpg');

4. 布局

  • 浮动：
    1
    float: left;
  • 定位：
    1
    2
    3
    position: absolute;
    top: 10px;
    left: 20px;
  • Flexbox：
    1
    2
    3
    display: flex;
    justify-content: center;
    align-items: center;
  • Grid：
    1
    2
    display: grid;
    grid-template-columns: 1fr 1fr;

CSS 选择器

  1. 元素选择器：

    1
    2
    3
    p {
        color: red;
    }

  2. 类选择器：

    1
    2
    3
    .class-name {
        font-size: 16px;
    }

  3. ID 选择器：

    1
    2
    3
    #id-name {
        background-color: yellow;
    }

  4. 后代选择器：

    1
    2
    3
    div p {
        color: blue;
    }

  5. 伪类选择器：

    1
    2
    3
    a:hover {
        color: green;
    }

CSS 进阶特性

  1. 媒体查询（Media Queries）：

    • 用于实现响应式设计。
    • 示例：
      1
      2
      3
      4
      5
      @media (max-width: 600px) {
          body {
              background-color: lightblue;
          }
      }

  2. 动画（Animations）：

    • 使用 @keyframes 创建动画。
    • 示例：
      1
      2
      3
      4
      5
      6
      7
      @keyframes slide {
          from { transform: translateX(0); }
          to { transform: translateX(100px); }
      }
      div {
          animation: slide 2s infinite;
      }

  3. 过渡（Transitions）：

    • 用于在状态变化时添加平滑效果。
    • 示例：
      1
      2
      3
      4
      5
      6
      button {
          transition: background-color 0.5s ease;
      }
      button:hover {
          background-color: blue;
      }

CSS 开发工具

  1. 浏览器开发者工具：

    • Chrome DevTools：用于调试和实时修改 CSS。
    • Firefox Developer Tools：功能类似，适合前端开发。

  2. CSS 预处理器：

    • Sass：支持变量、嵌套、混合等功能。
    • Less：类似 Sass，语法更接近原生 CSS。

  3. CSS 框架：

    • Bootstrap：提供现成的组件和样式。
    • Tailwind CSS：实用工具优先的 CSS 框架。

JavaScript

JavaScript 简介

JavaScript（简称 JS）是一种轻量级、解释型的编程语言，主要用于为网页添加交互功能。它是现代 Web 开发的三大核心技术之一（另外两个是 HTML 和 CSS）。JavaScript 不仅可以运行在浏览器中，还可以通过 Node.js 运行在服务器端。

JavaScript 的核心特点

  1. 动态类型：

    • 变量不需要声明类型，类型在运行时确定。
    • 例如：let x = 10; 和 x = "hello"; 都是合法的。

  2. 基于原型：

    • JavaScript 使用原型链实现继承，而不是传统的类继承。

  3. 事件驱动：

    • JavaScript 可以通过事件（如点击、鼠标移动等）触发特定的函数。

  4. 单线程：

    • JavaScript 是单线程的，但通过异步编程（如 Promise、async/await）可以实现非阻塞操作。

  5. 跨平台：

    • JavaScript 可以在浏览器、服务器（Node.js）、移动端（React Native）等多个平台运行。

JavaScript 的基本语法

1. 变量声明

  • var：传统声明方式，作用域为函数级。
  • let：块级作用域，推荐使用。
  • const：块级作用域，用于声明常量。
1
2
let name = "Alice";
const age = 25;

2. 数据类型

  • 基本类型：
    • 字符串（String）："Hello"。
    • 数字（Number）：10、3.14。
    • 布尔值（Boolean）：true、false。
    • null 和 undefined。
  • 引用类型：
    • 对象（Object）：{ key: "value" }。
    • 数组（Array）：[1, 2, 3]。
    • 函数（Function）：function() {}。

3. 运算符

  • 算术运算符：+、-、*、/。
  • 比较运算符：==、===、>、<。
  • 逻辑运算符：&&、||、!。

4. 控制结构

  • 条件语句：
    1
    2
    3
    4
    5
    if (age > 18) {
        console.log("成年人");
    } else {
        console.log("未成年人");
    }
  • 循环语句：
    1
    2
    3
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }

5. 函数

  • 普通函数：
    1
    2
    3
    function greet(name) {
        return "Hello, " + name;
    }
  • 箭头函数：
    1
    const greet = (name) => "Hello, " + name;

JavaScript 的核心概念

1. DOM 操作

  • DOM（Document Object Model）是 HTML 文档的编程接口。
  • JavaScript 可以通过 DOM 操作 HTML 元素。
  • 示例：
    1
    document.getElementById("myElement").innerHTML = "Hello, World!";

2. 事件处理

  • JavaScript 可以为 HTML 元素添加事件监听器。
  • 示例：
    1
    2
    3
    document.getElementById("myButton").addEventListener("click", function() {
        alert("按钮被点击了！");
    });

3. 异步编程

  • 回调函数：
    1
    2
    3
    setTimeout(function() {
        console.log("1 秒后执行");
    }, 1000);
  • Promise：
    1
    2
    3
    4
    fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
  • async/await：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    async function fetchData() {
        try {
            const response = await fetch("https://api.example.com/data");
            const data = await response.json();
            console.log(data);
        } catch (error) {
            console.error(error);
        }
    }

4. 面向对象编程

  • 构造函数：
    1
    2
    3
    4
    5
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    const alice = new Person("Alice", 25);
  • 类（ES6）：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        greet() {
            console.log(`Hello, my name is ${this.name}`);
        }
    }
    const bob = new Person("Bob", 30);
    bob.greet();

JavaScript 的进阶特性

1. ES6+ 新特性

  • 模板字符串：
    1
    2
    const name = "Alice";
    console.log(`Hello, ${name}`);
  • 解构赋值：
    1
    2
    const [a, b] = [1, 2];
    const { name, age } = { name: "Alice", age: 25 };
  • 模块化：
    1
    2
    3
    4
    5
    6
    // module.js
    export const add = (a, b) => a + b;

    // main.js
    import { add } from './module.js';
    console.log(add(1, 2));

2. 闭包

  • 闭包是指函数可以访问其词法作用域中的变量，即使函数在其词法作用域之外执行。
  • 示例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function outer() {
        const x = 10;
        function inner() {
            console.log(x);
        }
        return inner;
    }
    const closure = outer();
    closure(); // 输出 10

3. 原型链

  • JavaScript 使用原型链实现继承。
  • 示例：
    1
    2
    3
    4
    5
    6
    7
    8
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.speak = function() {
        console.log(`${this.name} makes a noise.`);
    };
    const dog = new Animal("Dog");
    dog.speak(); // 输出 "Dog makes a noise."

JavaScript 开发工具

  1. 浏览器开发者工具：
    • Chrome DevTools：用于调试 JavaScript 代码。
    • Firefox Developer Tools：功能类似，适合前端开发。
  2. 代码编辑器：
    • Visual Studio Code（推荐）。
    • Sublime Text。
    • Atom。
  3. 包管理工具：
    • npm：Node.js 的包管理器。
    • yarn：更快的包管理工具。
  4. 构建工具：
    • Webpack：模块打包工具。
    • Babel：将 ES6+ 代码转换为兼容性更好的代码。

应用

旋转loading动画

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>百看不腻的旋转loading动画</title>
    <link rel="stylesheet" href="7.css">
</head>

<body>
    <div class="loader">
        <div class="left-box">
            <div class="dots-top">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="dots-bottom">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
        <div class="right-box">
            <div class="dots-top">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="dots-bottom">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>
</body>
</html>
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}
.loader{
    /* 相对定位 */
    position: relative;
    text-align: center;
}
.left-box{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    /* 默认旋转0度 */
    transform: rotate(0deg);
}
.right-box{
    /* 绝对定位 */
    position: absolute;
    top: -29px;
    left: -9px;
    /* 默认旋转90度 */
    transform: rotate(90deg);
}
.dots-top{
    position: absolute;
    top: -78px;
    right: 196px;
    transform: rotate(0deg);
}
.dots-bottom{
    position: absolute;
    top: 40px;
    right: -216px;
    transform: rotate(180deg);
}
.dot{
    /* 绝对定位 */
    position: absolute;
    width: 240px;
    height: 240px;
    z-index: 5;
    /* 默认旋转45度 */
    transform: rotate(45deg);
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: spin 2s linear infinite;
}
/* 圆点 */
.dot::after{
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #a08fd5;
    border-radius: 50%;
}
/* 接下来为每一个圆点设置不同的层级、动画延迟时间、背景颜色、缩放 */
/* 第一个默认就好，不用改 */
/* 从第二个开始 */
.dot:nth-child(2){
    z-index: 4;
    animation-delay: 0.1s;
}
.dot:nth-child(2)::after{
    background-color: #c0b1eb;
    transform: scale(0.8);
}
.dot:nth-child(3){
    z-index: 3;
    animation-delay: 0.2s;
}
.dot:nth-child(3)::after{
    background-color: #f5e866;
    transform: scale(0.6);
}
.dot:nth-child(4){
    z-index: 2;
    animation-delay: 0.3s;
}
.dot:nth-child(4)::after{
    background-color: #ffef3d;
    transform: scale(0.4);
}
.dot:nth-child(5){
    z-index: 1;
    animation-delay: 0.4s;
}
.dot:nth-child(5)::after{
    background-color: #ffea00;
    transform: scale(0.2);
}

/* 定义动画 */
@keyframes spin {
    0%{
        transform: rotate(45deg);
    }
    5%{
        transform: rotate(45deg);
        animation-timing-function: ease-out;
    }
    70%{
        transform: rotate(405deg);
        animation-timing-function: ease-in;
    }
    100%{
        transform: rotate(405deg);
    }
}

首先，先确认div之间的嵌套关系

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
27
.loader (最外层容器)
├── .left-box (左侧盒子)
│   ├── .dots-top (顶部点容器)
│   │   ├── .dot (点)
│   │   ├── .dot (点)
│   │   ├── .dot (点)
│   │   ├── .dot (点)
│   │   └── .dot (点)
│   └── .dots-bottom (底部点容器)
│       ├── .dot (点)
│       ├── .dot (点)
│       ├── .dot (点)
│       ├── .dot (点)
│       └── .dot (点)
└── .right-box (右侧盒子)
    ├── .dots-top (顶部点容器)
    │   ├── .dot (点)
    │   ├── .dot (点)
    │   ├── .dot (点)
    │   ├── .dot (点)
    │   └── .dot (点)
    └── .dots-bottom (底部点容器)
        ├── .dot (点)
        ├── .dot (点)
        ├── .dot (点)
        ├── .dot (点)
        └── .dot (点)

重点是css的动画

  1. Flexbox 布局：实现居中布局。
  2. 定位：绝对定位与相对定位的结合使用。
  3. 变换：旋转与缩放。
  4. 伪元素：通过 ::after 添加内容。
  5. 动画：关键帧动画与动画延迟。
  6. 层级与选择器：z-index 和 :nth-child() 的使用。
  7. 样式细节：背景颜色、圆角等。

前端

https://sonder10110.github.io/前端/front-end/

作者

sonder

发布于

2025-03-06

更新于

2025-03-07

许可协议

关注我

目录

最新文章

归档

标签

DL1
操作系统1
数据结构1
未知1
算法模板1
系统组件1
计组1
计网1
×