前端基本知识整理

1. HTML

HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，用于构建网页的结构和内容。HTML 由一系列标签组成，每个标签都有其特定的含义和用途。例如， 标签定义了网页的根元素， 标签包含网页的元数据， 标签包含网页的主体内容。

2. CSS

CSS（Cascading Style Sheets，层叠样式表）用于控制网页的外观和布局。CSS 由一系列规则组成，每个规则由一个选择器和一个声明块组成。选择器指定了要应用样式的元素，声明块包含要应用的样式属性和值。例如，以下 CSS 规则将所有

元素的文本颜色设置为红色：

p {
  color: red;
}

3. JavaScript

JavaScript 是一种脚本语言，用于在网页上实现交互式效果。JavaScript 可以操作 HTML 元素、CSS 样式和 DOM（Document Object Model，文档对象模型）。例如，以下 JavaScript 代码将一个名为 “demo” 的

元素的文本颜色设置为红色：

document.getElementById("demo").style.color = "red";

4. DOM

DOM（Document Object Model，文档对象模型）是 HTML 文档的结构表示。DOM 将 HTML 文档表示为一个对象树，其中每个对象代表一个 HTML 元素。DOM 可以通过 JavaScript 进行操作，从而实现交互式效果。例如，以下 JavaScript 代码获取一个名为 “demo” 的

元素并将其文本颜色设置为红色：

var demo = document.getElementById("demo");
demo.style.color = "red";

5. BOM

BOM（Browser Object Model，浏览器对象模型）是浏览器环境的对象表示。BOM 提供了一系列对象，可以访问浏览器窗口、历史记录、导航和屏幕等信息。例如，以下 JavaScript 代码获取当前浏览器的

document.title;

6. 重排

重排（reflow）是指浏览器重新计算元素的几何属性，将元素放到正常的位置的过程。重排通常在以下情况下发生：

• 元素的大小或位置发生变化
• 元素的父元素的大小或位置发生变化
• 元素的显示属性发生变化
• 元素的浮动属性发生变化

重排是一个耗时的过程，应该尽量避免。

7. 重绘

重绘（repaint）是指浏览器重新绘制元素外观的过程。重绘通常在以下情况下发生：

• 元素的背景颜色发生变化
• 元素的文本颜色发生变化
• 元素的边框发生变化
• 元素的阴影发生变化

重绘是一个比重排更快的过程，但仍然应该尽量避免。

8. 原型

原型是 JavaScript 中继承的基础。JavaScript 中的每个对象都有一个原型，原型是一个对象，它包含了该对象的所有属性和方法。当一个对象访问一个不存在的属性或方法时，JavaScript 会自动在该对象的原型中查找该属性或方法。

9. 继承

继承是 JavaScript 中实现代码重用的机制。通过继承，子对象可以继承父对象的所有属性和方法。继承通过原型链实现。

10. 结论

本文介绍了前端领域的基础知识，包括 HTML、CSS、JavaScript、DOM、BOM、重排、重绘、原型和继承等概念。希望这些知识能够帮助初学者快速入门前端开发，为更深入的学习打下坚实的基础。