2025年前端面试热门题目——HTML|CSS|Javascript|TS知识

以下是对这些 HTML 面试问题的详细解答：

1. HTML 的 `src` 和 `href` 属性有什么区别?

src (Source) 属性：
- 用于嵌入资源，例如图像、脚本或 iframe。
- 加载资源时，当前页面的加载会暂停，直到资源加载完成。
- 常用于 <img>、<script> 和 <iframe> 标签。
- 例子：
```
<img src="image.jpg" alt="图片">
<script src="script.js"></script>
```
href (Hypertext Reference) 属性：
- 用于建立超链接，指向外部资源或内部的网页。
- 不会暂停页面加载，用户可以点击链接跳转。
- 常用于 <a>、<link> 和 <area> 标签。
- 例子：
```
<a href="https://example.com">访问示例网站</a>
<link href="styles.css" rel="stylesheet">
```

2. 什么是 HTML 语义化?

HTML 语义化是指通过使用具有明确含义的标签，使 HTML 结构具有更好的可读性和意义。

优点：
1. 提高可读性：开发者和浏览器可以更轻松理解文档结构。
2. 增强 SEO：语义化标签帮助搜索引擎更好地索引页面内容。
3. 增强可访问性：辅助工具（如屏幕阅读器）可以更好地解释页面内容。
常见语义化标签：
- header、footer、article、section：定义页面结构。
- nav：定义导航。
- aside：定义侧边内容。
- figure 和 figcaption：定义图像及其说明。

3. DOCTYPE(文档类型)的作用是什么?

定义： DOCTYPE 声明用于告诉浏览器当前 HTML 文档的标准。
作用：
1. 让浏览器以标准模式（Standard Mode）渲染页面。
2. 避免浏览器进入怪异模式（Quirks Mode），导致布局和样式出现问题。
HTML5 DOCTYPE 示例：
```
<!DOCTYPE html>
```

4. HTML 的 `script` 标签中 `defer` 和 `async` 有什么区别?

defer：
- 脚本异步加载，并在 HTML 解析完成后按顺序执行。
- 适合依赖 HTML 结构的脚本。
- 示例：
```
<script src="script.js" defer></script>
```
async：
- 脚本异步加载，加载完成后立即执行（可能在 HTML 未解析完成时执行）。
- 适合独立的脚本（如广告或分析工具）。
- 示例：
```
<script src="script.js" async></script>
```
区别总结：
- defer 保证脚本按顺序执行，适用于多个依赖的脚本。
- async 脚本独立，加载和执行更快。

5. 常用的 HTML meta 标签有哪些?

<meta> 标签用于定义页面的元信息，常用的有：

字符编码：
```
<meta charset="UTF-8">
```

视口设置（适配移动端）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

描述：

<meta name="description" content="页面的描述内容">

关键字：

<meta name="keywords" content="HTML, CSS, JavaScript">

作者信息：

<meta name="author" content="作者名字">

防止搜索引擎索引：

<meta name="robots" content="noindex, nofollow">

6. HTML5 相比于 HTML有哪些更新?

新增语义化标签：
- 如：<header>、<footer>、<article>、<section>、<nav>。
新增表单功能：
- 增加了新的输入类型：email、url、date、number 等。
- 表单属性：required、placeholder、pattern。
支持多媒体：
- 新增 <audio> 和 <video> 标签。
新增 API：
- 地理位置：Geolocation API
- 本地存储：localStorage 和 sessionStorage
- 拖放：Drag and Drop API
- 画布：<canvas> 标签。
废弃元素：
- 移除了 <center>、<font> 等。

7. HTML 中，`img` 标签 `srcset` 属性的作用是什么?

作用： 提供一组图像 URL 和其对应的显示条件，允许浏览器根据设备像素密度或屏幕宽度选择最合适的图像。

示例：

<img src="default.jpg" srcset="small.jpg 480w, medium.jpg 1024w" sizes="(max-width: 600px) 480px, 1024px" alt="图片">

浏览器会根据视口大小和分辨率选择合适的图像。
480w 表示图像宽度为 480 像素。

8. HTML 行内元素有哪些?块级元素有哪些?空 (void) 元素有哪些?

行内元素：
- 不占据独立一行，内容按行排列。
- 常见：<a>、<span>、<img>、<strong>、<em>、<label>。
块级元素：
- 独占一行，通常是容器。
- 常见：<div>、<p>、<h1>~<h6>、<section>、<article>、<ul>、<li>。
空元素：
- 没有闭合标签，只有单个标签。
- 常见：<img>、<input>、<br>、<hr>、<meta>。

9. HTML 中，`title` 与 `h1` 标签的区别是什么?

title 标签：
- 定义网页的标题，显示在浏览器标签栏。
- 对 SEO 友好，用于搜索引擎结果的标题。
- 示例：
```
<title>我的网页标题</title>
```
h1 标签：
- 表示页面的主要标题。
- 用于内容层次结构，通常一个页面只有一个 h1。
- 示例：
```
<h1>欢迎来到我的网站</h1>
```

10. Canvas 和 SVG 有什么区别?

Canvas：

基于像素的绘图。
提供动态绘制能力，但不易修改内容。
使用 JavaScript 绘制，适合实时动画和复杂图像处理。

示例：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 150, 75);
</script>

SVG：
- 基于 XML 的矢量图形。
- 内容可以通过 DOM 轻松修改和操作。
- 适合静态图形或需要高分辨率的图形。
- 示例：
```
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>
```
区别总结：
- Canvas 注重像素，适合动画；SVG 注重结构，适合静态矢量图形。

如果需要进一步展开或补充某些问题，可以继续探讨！
以下是对这些 CSS 和 JavaScript 面试问题的详细解答：

1. 有哪些 CSS 选择器? 请分别介绍

CSS 选择器用于选择 HTML 元素以应用样式。常见选择器有：

通配符选择器 (*)：
- 选择所有元素。
- 示例：
```
* {
  margin: 0;
  padding: 0;
}
```
类型选择器：
- 选择特定标签的元素。
- 示例：
```
p {
  color: blue;
}
```
类选择器 (.)：
- 选择特定类的元素。
- 示例：
```
.classname {
  font-size: 14px;
}
```
ID 选择器 (#)：
- 选择特定 ID 的元素。
- 示例：
```
#idname {
  background-color: yellow;
}
```
属性选择器：
- 根据属性值选择元素。
- 示例：
```
input[type="text"] {
  border: 1px solid gray;
}
```
后代选择器 (A B)：
- 选择 B 元素，前提是它是 A 元素的后代。
- 示例：
```
div p {
  color: green;
}
```
子选择器 (A > B)：
- 选择 A 元素的直接子元素 B。
- 示例：
```
ul > li {
  list-style: none;
}
```
相邻兄弟选择器 (A + B)：
- 选择紧接在 A 后面的 B 元素。
- 示例：
```
h1 + p {
  font-size: 12px;
}
```
通用兄弟选择器 (A ~ B)：
- 选择与 A 同级的所有 B 元素。
- 示例：
```
h1 ~ p {
  color: gray;
}
```
伪类选择器：
- 选择元素的特定状态。
- 示例：
```
a:hover {
  text-decoration: underline;
}
```
伪元素选择器：
- 选择元素的特定部分。
- 示例：
```
p::first-line {
  font-weight: bold;
}
```

2. 如何计算 CSS 的优先级?

CSS 优先级是用数字计算的，规则如下：

行内样式：1000
ID 选择器：100
类选择器、伪类、属性选择器：10
标签选择器、伪元素：1
通配符、继承、默认样式：0

计算优先级的示例：

/* 优先级为：10 (类选择器) */
.class {
  color: red;
}

/* 优先级为：100 (ID 选择器) */
#id {
  color: blue;
}

/* 优先级为：101 (ID + 标签选择器) */
#id p {
  color: green;
}

规则：

优先级高的样式覆盖优先级低的。
同优先级时，后出现的覆盖前面的。

3. CSS 中可继承与不可继承属性有哪些?

可继承属性：
- 文本相关属性：
  - color
  - font 系列：font-family、font-size、font-style 等。
  - visibility
  - letter-spacing、word-spacing。
- 默认行为：通过继承从父级传递到子级。
不可继承属性：
- 盒模型相关属性：
  - margin
  - padding
  - border
  - width、height
  - box-shadow
- 布局相关属性：
  - display
  - position
  - z-index
  - overflow
强制继承：
- 对于不可继承属性，可以通过 inherit 强制继承：
```
div {
  width: inherit;
}
```

4. CSS 中 `display` 属性的值及其作用

display 属性决定元素的显示方式。常见值：

block：
- 块级元素，独占一行。
- 示例：
```
div {
  display: block;
}
```
inline：
- 行内元素，与其他元素共享一行。
- 示例：
```
span {
  display: inline;
}
```
inline-block：
- 具有行内特性，但可以设置宽高。
- 示例：
```
img {
  display: inline-block;
}
```
none：
- 隐藏元素，不占据空间。
- 示例：
```
p {
  display: none;
}
```
flex：
- 设为弹性布局容器。
- 示例：
```
div {
  display: flex;
}
```
grid：
- 设为网格布局容器。
- 示例：
```
div {
  display: grid;
}
```

5. 使用 `link` 和 `@import` 引用 CSS 的区别

<link> 标签：
- 在 HTML 文件中引入 CSS 文件。
- 优点：支持并行加载，适合现代浏览器。
- 示例：
```
<link rel="stylesheet" href="style.css">
```
@import 规则：
- 在 CSS 文件中导入另一个 CSS 文件。
- 缺点：浏览器需要解析 CSS 文件后再加载导入的文件，加载速度较慢。
- 示例：
```
@import url("style.css");
```

6. JavaScript 有哪些数据类型? 它们的区别是什么?

基本数据类型 (Primitive Types)：
- string、number、bigint、boolean、undefined、symbol、null。
- 特点：不可变、存储在栈中。
引用数据类型 (Reference Types)：
- object (包括数组、函数等)。
- 特点：可变、存储在堆中。

7. 如何判断 JavaScript 变量是数组?

Array.isArray() (推荐)：
```
Array.isArray([1, 2, 3]); // true
```
instanceof：
```
[1, 2, 3] instanceof Array; // true
```

Object.prototype.toString：

Object.prototype.toString.call([1, 2, 3]); // "[object Array]"

8. JavaScript 中 `null` 和 `undefined` 的区别是什么?

null：
- 表示一个空的或无效的对象引用。
- 需要手动赋值：
```
let value = null;
```
undefined：
- 表示变量未初始化或不存在。
- 系统自动赋值：
```
let value; // 默认是 undefined
```

9. `typeof null` 的结果是什么? 为什么?

结果：
```
typeof null; // "object"
```
原因：
这是 JavaScript 的一个历史遗留问题，null 最初被设计为对象的特殊值，因此 typeof null 返回 "object"。

10. `typeof` 和 `instanceof` 有什么区别?

typeof：
- 检测变量的数据类型。
- 适合检查基本数据类型。
- 示例：
```
typeof 42; // "number"
```
instanceof：
- 检测对象是否是某个构造函数的实例。
- 示例：
```
[] instanceof Array; // true
```

总结：

typeof 主要用于基础类型判断。
instanceof 用于引用类型判断，尤其是继承关系的判断。
以下是对这些 JavaScript 面试问题的详细解答：

1. 为什么 JavaScript 中 `0.1 + 0.2 !== 0.3`，如何让其相等?

原因：

JavaScript 使用 IEEE 754 双精度浮点数来表示数字，这种表示方式无法精确存储某些小数，例如 0.1 和 0.2。
计算过程中的精度损失导致：
```
0.1 + 0.2; // 0.30000000000000004
```

解决方法：

使用 toFixed() 或 toPrecision()：
- 将结果四舍五入到指定的小数位数。
```
(0.1 + 0.2).toFixed(1); // "0.3"
```
使用乘除法避免小数计算：
- 先将数字放大为整数计算，再缩小。
```
(0.1 * 10 + 0.2 * 10) / 10 === 0.3; // true
```
使用 EPSILON 判断：
- JavaScript 提供 Number.EPSILON 表示最小可区分值。
```
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true
```

2. 说说你对 `fetch` 的理解，它有哪些优点和不足?

`fetch` 是什么?

fetch 是现代浏览器提供的原生 API，用于发起 HTTP 请求，返回一个基于 Promise 的结果。

优点：

语法简单：

使用 Promise，代码更清晰。

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

原生支持：
- 内置支持，不需要额外的库。
可扩展性：
- 支持各种 HTTP 方法、头部设置、跨域请求等。
流式响应：
- 支持 ReadableStream，适合处理大文件。

不足：

不支持超时控制：

需要手动实现超时逻辑。

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 超时 5 秒
fetch(url, { signal: controller.signal });

错误处理复杂：

fetch 仅在网络错误时抛出异常，HTTP 状态码错误（如 404、500）不会自动触发 catch。

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  });

浏览器兼容性：
- IE 不支持，需要 polyfill。

3. JavaScript 中 `Object.keys` 的返回值是无序的吗?

是否有序：

根据规范：
1. 如果对象的属性是数字键（索引），Object.keys 返回的数组按升序排列。
2. 其他非数字键的属性按 插入顺序 返回。

示例：

const obj = { 1: 'one', 3: 'three', 2: 'two', a: 'A', b: 'B' };
console.log(Object.keys(obj)); // ["1", "2", "3", "a", "b"]

4. JavaScript 的 BigInt 和 Number 类型有什么区别?

区别：

表示范围：
- Number：安全整数范围为 -2^53 ~ 2^53（由 Number.MAX_SAFE_INTEGER 定义）。
- BigInt：支持任意大小的整数。

操作：

BigInt 无法与 Number 混合运算。

1n + 2; // TypeError
1n + BigInt(2); // 3n

精度：
- Number 是浮点类型，可能有精度损失。
- BigInt 精确表示整数。
性能：
- BigInt 操作效率较低。

示例：

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(9007199254740991 + 1); // 9007199254740992 (精度丢失)
console.log(9007199254740991n + 1n); // 9007199254740992n (精确)

5. 什么是 JavaScript 的尾调用? 使用尾调用有什么好处?

尾调用：

尾调用是指一个函数的最后一步调用另一个函数。
尾调用条件：
1. 调用是函数的最后一步。
2. 返回调用的结果。

好处：

减少内存占用：
- 避免多余的调用栈帧，提升性能。
- 对递归函数尤为重要（即尾递归优化）。

示例：

普通递归（会累积调用栈）：

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1); // 不是尾调用
}

尾递归（优化调用栈）：

function factorial(n, acc = 1) {
  if (n === 1) return acc;
  return factorial(n - 1, acc * n); // 尾调用
}

6. 使用 `let` 全局声明变量，能通过 `window` 对象取到吗?

答案：不能。
原因：
- 使用 let 或 const 声明的全局变量不会成为 window 对象的属性。
- 示例：
```
let x = 10;
console.log(window.x); // undefined
```
对比：
- 使用 var 声明的全局变量会成为 window 对象的属性。
```
var y = 20;
console.log(window.y); // 20
```

7. `let`、`const` 和 `var` 的区别是什么?

1. `var`：

作用域： 函数作用域。
变量提升： 会提升至作用域顶部，默认值为 undefined。
可重复声明： 可以在同一作用域内多次声明。

2. `let`：

作用域： 块作用域。
变量提升： 也会提升，但在提升前无法访问（称为“暂时性死区”）。
不可重复声明： 同一作用域内不允许重复声明。

3. `const`：

作用域： 块作用域。
常量： 声明时必须初始化，值不能重新赋值（对象属性可以修改）。
不可重复声明： 同一作用域内不允许重复声明。

8. 说说你对 JS 作用域的理解?

1. 什么是作用域?

作用域是指代码中变量、函数或对象的可访问范围。

2. 分类：

全局作用域：
- 定义在任何函数或块外的变量，具有全局可访问性。
- 示例：
```
var globalVar = "I am global";
```

函数作用域：

使用 var 声明的变量在函数内部是局部的。

示例：

function scopeTest() {
  var localVar = "I am local";
  console.log(localVar);
}

块作用域：

使用 let 或 const 声明的变量只能在声明的块中访问。

示例：

if (true) {
  let blockVar = "I am block scoped";
  console.log(blockVar);
}

3. 闭包与作用域：

闭包是函数能够“记住”并访问其定义时的作用域。

示例：

function outer() {
  let outerVar = "I am outer";
  return function inner() {
    console.log(outerVar); // 闭包访问
  };
}
const fn = outer();
fn(); // "I am outer"

1. ES6 箭头函数和普通函数有什么区别?

1.1 语法上的区别：

箭头函数更简洁，不需要 function 关键字：

// 普通函数
function sum(a, b) {
  return a + b;
}

// 箭头函数
const sum = (a, b) => a + b;

1.2 特性上的区别：

this 绑定规则：

箭头函数没有自己的 this，会捕获其定义时的上下文 this。
普通函数的 this 根据调用方式动态绑定。

const obj = {
  value: 10,
  arrowFunc: () => this.value, // 捕获定义时的上下文
  normalFunc() {
    return this.value; // 根据调用时绑定
  },
};

console.log(obj.arrowFunc()); // undefined (指向全局或模块的 this)
console.log(obj.normalFunc()); // 10

arguments 对象：
- 箭头函数没有 arguments 对象，可以通过剩余参数代替。
- 普通函数有 arguments，可以访问函数的实际参数。
```
const arrowFunc = () => console.log(arguments); // Error
function normalFunc() {
  console.log(arguments); // 可用
}
```

作为方法或事件处理函数：

箭头函数的 this 不会改变，适合绑定事件。
普通函数会动态绑定，可能需要手动处理 this。

const obj = {
  value: 42,
  handler: () => console.log(this.value), // 指向全局或模块
};
document.body.addEventListener('click', obj.handler);

是否可作为构造函数：
- 箭头函数不能作为构造函数。
- 普通函数可以通过 new 操作符生成实例。

2. ES6 箭头函数能当构造函数吗?

答案：不能。

箭头函数没有 [[Construct]] 内部方法，无法用 new 操作符调用。

示例：

const Arrow = () => {};
const obj = new Arrow(); // TypeError: Arrow is not a constructor

3. ES6 有哪些新特性?

变量声明：let 和 const
- 块作用域，避免变量提升。
- 示例：
```
let a = 10;
const b = 20;
```
箭头函数
- 简洁语法，自动绑定 this。
- 示例：
```
const add = (a, b) => a + b;
```
模板字符串
- 支持多行和嵌入表达式。
- 示例：
```
const greeting = `Hello, ${name}`;
```

解构赋值

解构对象和数组。

示例：

const [a, b] = [1, 2];
const { x, y } = { x: 3, y: 4 };

展开运算符 ...
- 用于复制、合并或解构。
- 示例：
```
const arr = [...arr1, ...arr2];
```

默认参数

函数参数支持默认值。

示例：

const greet = (name = 'Guest') => `Hello, ${name}`;

类和继承

新增 class 和 extends。

示例：

class Person {
  constructor(name) {
    this.name = name;
  }
}
class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

模块化

使用 import 和 export。

示例：

import { foo } from './module.js';
export const bar = 42;

Promise

用于异步编程。

示例：

const promise = new Promise((resolve, reject) => {
  resolve('Success');
});

Symbol 和 Map/Set
- 新的数据类型和数据结构。
- 示例：
```
const sym = Symbol('id');
const map = new Map();
```

4. TypeScript 有哪些常用类型?

基本类型：
- string, number, boolean, null, undefined, any, void, never.
数组类型：
- number[] 或 Array<number>。
- 示例：
```
const nums: number[] = [1, 2, 3];
```
元组类型：
- 固定长度、已知类型的数组。
- 示例：
```
const tuple: [number, string] = [42, 'Hello'];
```

枚举类型：

定义一组命名常量。

示例：

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

对象类型：

定义对象结构。

示例：

interface Person {
  name: string;
  age: number;
}

联合类型：
- 变量可为多种类型之一。
- 示例：
```
let value: string | number;
```
类型别名：
- 定义自定义类型。
- 示例：
```
type ID = string | number;
```

5. 什么是 TypeScript 的对象类型? 怎么定义对象类型?

对象类型定义：

在 TypeScript 中，对象类型是描述对象结构的类型。
可以使用 interface 或 type 定义对象类型。

定义方式：

使用接口 (interface)：

interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: 'Alice',
  age: 25,
};

使用类型别名 (type)：

type Person = {
  name: string;
  age: number;
};

const user: Person = {
  name: 'Bob',
  age: 30,
};

嵌套对象类型：

interface Address {
  city: string;
  zipCode: number;
}

interface Person {
  name: string;
  address: Address;
}

const user: Person = {
  name: 'Charlie',
  address: {
    city: 'New York',
    zipCode: 10001,
  },
};

可选属性和只读属性：

interface Person {
  name: string;
  age?: number; // 可选
  readonly id: string; // 只读
}

const user: Person = {
  name: 'Diana',
  id: '12345',
};

// user.id = '54321'; // Error: Cannot assign to 'id' because it is a read-only property