前端核心基础知识总结

前言

在当前内卷严重的技术圈，虽说近两年一直都在唱衰前端开发，甚至有一种所谓的“前端已死”的言论，但是在实际情况下前端开发依然扮演着至关重要的角色，前端是用户与数字产品交互的桥梁。无论是构建复杂且用户体验较高的网页、强大的 Web 应用程序还是响应式的移动界面，前端开发都需要扎实的基础知识，在前端开发领域，基础知识是构建高效、稳定和可维护代码的基石。无论是刚入行的新手还是经验丰富的老手，扎实的前端基础都是必不可少的，尤其在面试过程中，面试官通常会着重考察应聘者对前端基础知识的掌握程度。那么本文就来对前端开发中的必备基础知识以及常用基础知识进行全面总结，包括HTML、CSS和JavaScript，以及一些现代前端开发工具和框架。

一、HTML模块

做前端开发的小伙伴都清楚HTML 是前端开发的基础，它用于构建网页的结构，它由一系列元素组成，这些元素可以定义文档的结构和内容。关于HTML模块的使用也是非常重要的，那么以下分享一下是 HTML 相关的关键知识点。

1. 标签结构

其实HTML是由一系列标签组成，每个标签都有特定的用途，比如`<html>`标签定义整个 HTML 文档；`<head>`标签包含文档的元数据，比如 <title>、<link>、<script>和<meta>；`<body>`标签包含网页的可见内容。在实际的前端开发中，常见的标签还有`<h1>`到`<h6>`用于标题，`<p>`用于段落，`<a>`用于超链接等等，由于篇幅原因这里不再一一介绍。

2. 语义化标签

语义化 HTML 是指使用具有明确含义的标签来构建网页结构，比如`<header>`表示网页的头部，`<nav>`表示导航栏，`<section>`表示页面中的一个章节，`<article>`表示独立的、自包含的内容区域，`<footer>`表示网页的底部，`<aside>`定义与页面主要内容稍显独立的侧边栏。个人觉得语义化标签有助于提高网页的可访问性和搜索引擎优化，是比较重要的模块。

3. 表单元素

另外，表单是网页中用于收集用户输入的重要部分。其实HTML 提供了各种表单元素，比如`<input>`输入字段，如文本框、密码框、单选按钮等、`<select>`、`<textarea>`多行文本输入控件等。在前端开发中，需要了解如何设置表单的属性，比如`type`、`name`、`value`等，以及如何处理表单的提交和验证是前端开发的重要技能。

4. 多媒体元素

其实HTML 支持插入图像、音频和视频等多媒体元素。常用的一些元素，比如`<img>`标签用于插入图像，`<audio>`标签用于插入音频，`<video>`标签用于插入视频。还有就是了解如何设置多媒体元素的属性，比如`src`、`alt`、`controls`等，以及如何处理多媒体的播放和控制是前端开发的必备知识。

二、CSS模块

不用多讲，CSS是用于控制网页的外观和布局，通过CSS可以控制网页的布局、颜色、字体和动画等。虽然前端开发者觉得CSS模块比较简单，但是在实际开发中遇到复杂的页面布局，如果CSS模块知识掌握的不扎实，是不能轻而易举的把样式调好的。那么下面分享一些关于CSS 的键知识点，方便学习查阅。

1. 选择器

选择器用于选择要应用样式的 HTML 元素，常见的选择器有标签选择器（如p、h1）、类选择器（如.className）、ID 选择器（如#idName）、属性选择器（如[type="text"]），以及伪类（如:hover、:focus）等。在实际开发中，了解如何使用选择器来精确地选择元素，并应用不同的样式是 CSS 开发的基础。

2. 盒模型

盒模型是 CSS 中用于描述元素布局的概念。每个 HTML 元素都被视为一个盒子，由内容（content）：显示文本和图像、内边距（padding）：围绕内容的区域、边框（border）：围绕内边距和内容的边框和外边距（margin）：围绕边框的外部空间组成。了解盒模型对于精确控制网页元素的布局至关重要。分享几个简单示例。

示例一：为一个div标签设置了宽度为 200 像素，高度为 100 像素的内容区。

div {
  width: 200px;
  height: 100px;
}

示例二：内边距的存在可以使内容与边框之间有一定的间隔，避免内容过于靠近边框，从而提升页面的美观度和可读性。

div {
  padding: 10px; /* 四个方向的内边距均为 10 像素 */
}
div {
  padding: 10px 20px; /* 上下内边距为 10 像素，左右内边距为 20 像素 */
}
div {
  padding: 10px 20px 30px; /* 上内边距为 10 像素，左右内边距为 20 像素，下内边距为 30 像素 */
}
div {
  padding: 10px 20px 30px 40px; /* 上内边距为 10 像素，右内边距为 20 像素，下内边距为 30 像素，左内边距为 40 像素 */
}

示例三：边框围绕在内容区和内边距之外，可以使用 `border` 属性来设置边框的样式、宽度和颜色。

div {
  border: 1px solid black; /* 1 像素宽的黑色实线边框 */
}

示例四：外边距是元素边框与周围元素之间的空白区域。它可以使用 `margin` 属性来设置，与 `padding` 属性类似，也可以接受一个、两个、三个或四个值，分别对应上、右、下、左四个方向的外边距。

div {
  margin: 20px; /* 四个方向的外边距均为 20 像素 */
}
div {
  margin: 20px 30px; /* 上下外边距为 20 像素，左右外边距为 30 像素 */
}
div {
  margin: 20px 30px 40px; /* 上外边距为 20 像素，左右外边距为 30 像素，下外边距为 40 像素 */
}
div {
  margin: 20px 30px 40px 50px; /* 上外边距为 20 像素，右外边距为 30 像素，下外边距为 40 像素，左外边距为 50 像素 */
}

3. 布局

布局是CSS中非常重要的部分，如果前端开发者在这块基础不牢，会很吃力。分享几个常用的布局方式：

浮动（float）：向左或向右移动元素，直到其边缘触及包含框或另一个浮动元素的边缘。
定位（position）：控制元素在页面上的确切位置。
弹性盒（flexbox）：一种灵活的布局方式，可以轻松地在不同方向上对齐和分配空间。
网格（grid）：二维布局系统，用于创建复杂的页面布局。

4. 响应式设计

响应式也是CSS中很重要的内容，

媒体查询（media queries）：根据不同屏幕尺寸和设备特性应用不同的CSS样式。
百分比宽度：使用百分比而非固定像素来定义元素宽度。
视口单位：相对于视口宽度和高度的单位。

5. 盒模型的计算方式

在标准盒模型中，元素的宽度和高度只包括内容区的宽度和高度，不包括内边距、边框和外边距。而在 IE 盒模型（也称为怪异盒模型）中，元素的宽度和高度包括内容区、内边距和边框。我们在实际前端开发中，可以通过设置 `box-sizing` 属性来切换盒模型的计算方式。默认情况下，`box-sizing` 的值为 `content-box`，表示使用标准盒模型。如果将其设置为 `border-box`，则表示使用 IE 盒模型，比如：

div {
  box-sizing: border-box;
}

三、JavaScript 基础

接下来分享一下前端开发中比较重要的JS模块，这个模块也是前端开发中的逻辑处理模块，非常重要。

1. 数据类型与变量

都知道JavaScript 是一种动态类型语言，用于网页的交互性功能，支持多种数据类型，包括数字（Number）、字符串（String）、布尔值（Boolean）、对象、数组等。前端开发者了解这些数据类型及其操作是 JavaScript 编程的基础。变量用于存储数据，而 JavaScript 的 `var`、`let` 和 `const` 关键字用于声明变量，它们在作用域和生命周期上有所不同。

2. 函数与作用域

关于前端中的函数，其实函数是 JavaScript 中执行特定任务的代码块。了解如何定义函数、传递参数、返回值以及使用箭头函数是 JavaScript 编程的核心。作用域是变量和函数可访问的上下文，JavaScript 有全局作用域、局部作用域和块级作用域，理解这些作用域对于编写清晰和可维护的代码至关重要。另外就是在前端开发中，箭头函数的使用是非常关键的，可以使用 function 关键字或箭头函数。

3. 事件处理

关于事件处理部分，其实事件是用户与网页交互的结果，比如点击、滚动、键盘输入等，JavaScript 通过注册事件监听器来处理这些事件。关于如何使用 `addEventListener` 方法以及事件对象的属性和方法是前端开发的基本技能。其中，关于事件监听，可以使用element.addEventListener('click', function() {...})来实现，还有就是事件冒泡和捕获，事件在DOM树中的传播方式。

4. DOM 操作

想必前端开发者对DOM并不陌生，文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。JavaScript 通过 DOM API 来操作和修改网页内容、结构和样式。个人觉得了解如何使用 DOM 方法来选择元素、创建（使用document.createElement('div')）、添加（使用appendChild()）和删除（使用removeChild()）节点、以及修改属性（使用element.innerHTML）和样式是前端开发的关键。

5. AJAX 与异步编程

最后再来分享关于AJAX相关的内容，其实AJAX允许 JavaScript 在不重新加载整个页面的情况下与服务器交换数据和更新部分网页。那么如何使用 `XMLHttpRequest` 或 `fetch` API 进行异步请求是实现动态网页交互的关键。还有就是JavaScript 的 Promise 和 async/await 语法为异步编程提供了更强大的工具，它们简化了异步代码的编写和理解，这也是前端开发中非常重要的内容之一。

6. 控制结构

关于结构控制，其实就是条件控制，常用的就是条件语句和循环等操作。

条件语句：if、else if、else、switch。
循环：for、while、do...while。

前端框架与工具

再聊聊聊关于前端框架和三方库相关的内容。做前端开发的小伙伴，想必对当前流行的前端框架并不陌生，比如“耳熟能详”的Vue和React。

1. React

React 是由 Facebook 开发的一个用于构建用户界面的 JavaScript 库，它引入了组件化的概念，使得开发者可以通过组合小的、可复用的组件来构建复杂的用户界面。关于 React 的核心概念，比如 JSX、组件生命周期、状态和属性、以及 Hooks 都是前端开发的重要技能。

2. Vue.js

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面，它的核心库只关注视图层，易于学习和集成，同时也可以支持构建复杂的单页应用。掌握了解 Vue 的响应式数据绑定、组件系统、指令和插件是前端开发的基础，是非常重要的前端框架。

3. 包管理器

前端开发中，关于包管理器使用也是非常常用且重要的操作。

npm（Node Package Manager）：JavaScript的包管理器。
Yarn：由Facebook开发的替代npm的包管理器。

4. 构建工具

关于前端打包构建时候用到的工具，也是前端开发中常用的操纵。

Webpack：模块打包器，用于将项目中的各种资源打包成浏览器可以识别的格式。
Rollup：一个现代的JavaScript模块打包器，更适用于库的打包。

5. Git

关于Git使用，其实Git 是一个分布式版本控制系统，用于跟踪代码变更。掌握 Git 的基本命令，比如 `commit`、`push`、`pull`、`branch`、`merge` 等，以及如何使用远程仓库进行代码管理和协作，这都是前端开发的基本且必备技能。

结束语

通过上文的分享介绍，想必读者都进一步了解了前端开发相关的基础知识，其实前端开发是一个不断进化的领域，掌握核心基础知识是成为一名优秀前端开发者的前提。从 HTML、CSS 到 JavaScript，再到前端框架和工具，每一个环节都是构建高质量前端应用不可或缺的部分。而且随着技术的不断进步，新的工具和前端框架层出不穷，但无论技术如何变化，我个人觉得HTML、CSS和JavaScript的核心概念始终是开发前端应用的基石。最后，作为前端开发者只有通过不断学习和实践，我们才可以不断提升自己的技能，以适应不断变化的技术环境和用户需求。