前言
Web前端开发是一个快速发展的领域，掌握HTML、CSS和JavaScript这三大核心技术是成为优秀前端工程师的基础。本文将系统梳理这三个技术栈的核心知识点，并结合常见的面试题进行深入解析，帮助读者快速复习和巩固知识。
一、HTML 核心知识点
1. HTML5 语义化标签
HTML5引入了许多语义化标签，这些标签不仅让代码更具可读性，还对SEO（搜索引擎优化）和无障碍访问（Accessibility）有重要意义。
常用语义化标签：
<header>：定义文档或节的页眉。<nav>：定义导航链接。<main>：定义页面的主要内容。<article>：定义独立的内容区域。<section>：定义文档中的节。<aside>：定义侧边栏内容。<footer>：定义文档或节的页脚。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化标签示例</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>这是一篇关于语义化标签的文章。</p>
</article>
<aside>
<p>侧边栏内容</p>
</aside>
</main>
<footer>
<p>© 2023 网站名称</p>
</footer>
</body>
</html>
2. 表单元素与验证
HTML5增强了表单功能，新增了多种输入类型和验证属性。
常用输入类型：
email：邮箱输入框。url：URL输入框。number：数字输入框。date：日期选择器。range：滑动条。
常用验证属性：
required：字段必填。pattern：正则表达式验证。min和max：数值范围限制。minlength和maxlength：字符长度限制。
示例：
<form>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<br>
<label for="age">年龄（18-99）：</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<br>
<label for="password">密码（至少8位）：</label>
<input type="password" id="password" name="password" minlength="8" required>
<br>
<button type="submit">提交</button>
</form>
3. 多媒体标签
HTML5支持原生的音频和视频播放，无需依赖第三方插件。
常用标签：
<audio>：音频播放。<video>：视频播放。
示例：
<!-- 音频播放 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
<!-- 视频播放 -->
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频播放。
</video>
二、CSS 核心知识点
1. 盒模型
CSS盒模型是布局的基础，每个元素都被视为一个矩形盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。
盒模型的两种模式：
content-box：默认模式，宽度和高度只包含内容。border-box：宽度和高度包含内容、内边距和边框。
示例：
/* 设置盒模型为 border-box */
* {
box-sizing: border-box;
}
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
background-color: lightblue;
}
2. Flexbox 布局
Flexbox 是一种现代的布局方式，适合处理一维布局（行或列）。
常用属性：
display: flex：定义 Flex 容器。justify-content：主轴对齐方式。align-items：交叉轴对齐方式。flex-direction：主轴方向。flex-wrap：是否换行。
示例：
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
height: 200px;
background-color: #f0f0f0;
}
.item {
width: 100px;
height: 50px;
background-color: lightcoral;
margin: 5px;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
3. Grid 布局
Grid 是一种二维布局方式，适合处理复杂的页面布局。
常用属性：
display: grid：定义 Grid 容器。grid-template-columns：定义列模板。grid-template-rows：定义行模板。gap：定义网格间距。
示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
background-color: #e0e0e0;
padding: 10px;
}
.grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
4. 响应式设计
响应式设计通过媒体查询（Media Queries）和相对单位（如 rem、vw、vh）实现。
示例：
/* 默认样式 */
body {
font-size: 16px;
}
/* 平板设备 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 手机设备 */
@media (max-width: 480px) {
body {
font-size: 12px;
}
}
三、JavaScript 核心知识点
1. 数据类型与类型转换
JavaScript 有 8 种数据类型：
- 基本类型：
String、Number、Boolean、Null、Undefined、Symbol、BigInt。 - 引用类型：
Object。
类型转换：
- 显式转换：
Number()、String()、Boolean()。 - 隐式转换：运算符操作时自动转换。
示例：
// 显式转换
let str = "123";
let num = Number(str); // 123
let num2 = 456;
let str2 = String(num2); // "456"
// 隐式转换
let result = "5" + 1; // "51"
let result2 = "5" - 1; // 4
2. 作用域与闭包
作用域：
- 全局作用域：在任何地方都可以访问。
- 函数作用域：只在函数内部可以访问。
- 块级作用域（ES6）：使用
let和const定义的变量。
闭包： 闭包是指函数可以访问其外部作用域的变量。
示例：
// 闭包示例
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
3. 异步编程
JavaScript 是单线程语言，异步编程通过回调函数、Promise 和 async/await 实现。
Promise 示例：
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("数据加载完成");
}, 2000);
});
};
fetchData().then((data) => {
console.log(data);
});
async/await 示例：
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => resolve("数据加载完成"), 2000);
});
};
async function getData() {
const data = await fetchData();
console.log(data);
}
getData();
4. ES6+ 新特性
- 箭头函数：
const add = (a, b) => a + b; - 解构赋值：
const { name, age } = person; - 模板字符串：
`Hello, ${name}` - 模块化：
import和export。 - 类：
class关键字。
示例：
// 箭头函数
const multiply = (a, b) => a * b;
// 解构赋值
const person = { name: "Alice", age: 25 };
const { name, age } = person;
// 模板字符串
const greeting = `Hello, ${name}`;
// 模块化
// math.js
export const add = (a, b) => a + b;
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5
// 类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
}
const alice = new Person("Alice", 25);
alice.sayHello();
四、常见面试题解析
1. HTML 面试题
Q: 什么是语义化标签？为什么使用它们？
- A: 语义化标签如
<header>、<nav>等，能够清晰地描述内容的结构，提升代码可读性，利于SEO和无障碍访问。
Q: HTML5 新增了哪些表单输入类型？
- A:
email、url、number、date、range等。
2. CSS 面试题
Q: 什么是盒模型？如何切换盒模型？
- A: 盒模型包含内容、内边距、边框和外边距。通过
box-sizing: border-box可以切换为包含内边距和边框的盒模型。
Q: Flexbox 和 Grid 的区别是什么？
- A: Flexbox 是一维布局，适合处理行或列；Grid 是二维布局，适合处理复杂的页面结构。
3. JavaScript 面试题
Q: 什么是闭包？闭包的优缺点是什么？
- A: 闭包是函数可以访问其外部作用域的变量。优点是能封装私有变量，缺点是可能导致内存泄漏。
Q: Promise 和 async/await 的区别是什么？
- A: Promise 是基于回调的异步处理方式，而 async/await 是基于 Promise 的语法糖，使异步代码更像同步代码，更易读。
五、总结
本文详细梳理了 HTML、CSS 和 JavaScript 的核心知识点，并结合常见面试题进行了解析。希望这些内容能帮助你更好地复习和掌握前端开发的基础知识。在实际开发中，多动手实践，结合项目经验，才能更深入地理解和运用这些技术。祝你面试顺利！