前端需要掌握的基本技能

HTML
- 前端页面的内容
CSS
- 前端的样式
JavaScript
- 前端的交互和逻辑相关

HTML

超文本标记语言 (Hypertext Markup Language)

是 xml 的另一种编写形式，需要添加 <!DOCTYPE html> 指定该文件是 html 5

标签(Tag)：HTML文档由标签组成，标签用于描述文档的结构和内容。标签通常是成对出现的，例如：<html></html>,<head></head>,<body></body>等等。

元素(Element)：一个元素是由开始标签、结束标签和标签之间的内容组成的，例如：<p>这是一个段落</p>。有些标签是自闭和的，例如：<img>，没有结束标签

属性(Attribute)：标签可以有属性，属性为标签提供了更多的信息。例如，<a href="https://www.example.com">这是一个链接</a>，其中 href 是 a 标签的属性，它告诉浏览器点击链接时要访问的 URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

CSS

层叠样式表

用于编写页面的样式

可以编写在行内、style 标签内、外部引入

在目前流行的框架中也流行 css-in-js、原子化 CSS、CSS module 的写法

body {
    margin: 0;
    padding: 0;
}

选择器 Selector

选择器是用来选择 HTML 元素并应用样式的模式。例如，p 选择器可以选择所有的段落，#header 选择器可以选择具有 ID 为 "header" 的元素

!important
內联样式
ID 选择器
类选择器 - 伪类选择器
元素选择器 - 伪元素选择器
* 通配符选择器

JavaScript

一个可以在浏览器运行的脚本语言

由 ECMA 制定统一的标准，V8 引擎和 node 、bun 、deno 等都可以说是 ECMAScript 的实现

有 JavaScript 产生的一些主流的前端框架

React
Vue
Svelte
Solid.js

一些重要的知识点

闭包

闭包(Closure)是指函数可以访问在其词法作用域(Lexical Scope)之外定义的变量。具体来说，当一个内部函数被外部函数引用并在外部函数返回后仍然保留对外部函数作用域中变量的引用时，就会形成一个闭包。

function counter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

let c = counter();
c(); // 1
c(); // 2
c(); // 3

在这个例子中，闭包用于保留计数器的状态并在每次调用时增加计数器的值。

原型链

原型链是 JavaScript 中一种用于实现继承的机制。每个 JavaScript 对象都有一个指向其原型(prototype)的内部链接。当试图访问一个对象的属性或方法时，JavaScript 引擎会先查找对象本身是否有该属性或方法，如果没有，就会沿着原型链一层一层向上查找，直到找到该属性或方法或者原型链的顶端。

Promise

Promise 是 JavaScript 中一种处理异步操作的机制。Promise 用于解决回调函数嵌套过多、代码难以理解和维护的问题，通过一种更加优雅的方式来处理异步操作。

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 异步操作
    setTimeout(function() {
      let data = {name: "John", age: 30};
      if (data) {
        resolve(data);
      } else {
        reject("Error: Data not found");
      }
    }, 2000);
  });
}

fetchData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

前端知识串讲 | 青训营笔记