HTML 部分

1. 什么是语义化标签？举例说明使用语义化标签的好处。

语义化标签是 HTML 标签的命名和功能符合其含义，具有清晰的目的和作用，例如：

• 语义化标签的例子：<header>：定义页面的头部区域。<nav>：定义导航栏。<article>：定义文章内容。<footer>：定义页脚。

好处：

1. 增强代码可读性：其他开发者可以快速理解代码结构。
2. SEO 友好：搜索引擎会根据语义化标签更好地索引内容。
3. 提高无障碍支持：屏幕阅读器更容易解析内容结构。

2. 描述 HTML5 的新特性，并列举至少 3 个新增标签及其用途。

HTML5 提供了更多语义化和功能性标签，支持多媒体以及离线存储等功能。

• 语义化标签：如 <section>（章节）、<article>（文章）、<aside>（侧边栏）。
• 多媒体标签：<audio> 和 <video> 用于嵌入音视频。
• 绘图标签：<canvas> 用于绘制 2D 图形。

新增标签的用途：

• <header>：定义页面或章节的头部区域。
• <nav>：定义导航栏内容。
• <canvas>：用于绘制图形或动画，结合 JavaScript 使用。

3. 请解释 meta 标签的作用，并举例说明如何实现移动端适配。

meta 标签用于定义页面的元信息，例如字符集、响应式设计、SEO 信息等。

常见的例子：

<meta charset="UTF-8"> <!-- 定义字符集为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
<meta name="description" content="这是一个示例页面"> <!-- SEO 优化 -->

<meta charset="UTF-8"> <!-- 定义字符集为 UTF-8 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 --> <meta name="description" content="这是一个示例页面"> <!-- SEO 优化 -->

实现移动端适配：

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

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

CSS 部分

1. 如何实现一个三角形？并解释其原理。

三角形通过 CSS 边框的透明和颜色结合实现：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

原理：

• 宽高设置为 0，边框设置为特定宽度。
• 透明的边框“隐藏”，有颜色的边框形成三角形。

2. Flex 布局的常用属性和实现水平垂直居中的代码。

常用属性：

• display: flex;：启用 Flex 布局。
• justify-content：定义主轴方向对齐方式（如水平居中）。常见值：flex-start、center、flex-end。
• align-items：定义交叉轴方向对齐方式（如垂直居中）。常见值：stretch、center、flex-end。

水平垂直居中的实现：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container { display: flex; justify-content: center; align-items: center; height: 100vh; }

3. 请解释 CSS 优先级规则，!important、内联样式、ID 选择器和类选择器哪个优先级更高？

优先级顺序：

1. !important：最高优先级。
2. 内联样式（style="..."）。
3. ID 选择器（#id）。
4. 类选择器、伪类（.class、:hover 等）。
5. 元素和伪元素选择器（div、::before）。

4. 什么是 CSS 动画关键帧（@keyframes）？如何创建一个从透明到不透明的动画？

关键帧用于定义动画的关键状态，动画会在这些状态之间过渡。

示例：从透明到不透明的动画

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 2s;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 2s; }

JavaScript 部分

1. 解释事件委托的原理，并举例说明其使用场景。

原理：
利用事件冒泡机制，把子元素的事件绑定到父元素上，从而减少事件绑定的次数。

示例：

document.querySelector('#parent').addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    console.log('Button clicked:', e.target.textContent);
  }
});

document.querySelector('#parent').addEventListener('click', (e) => { if (e.target.tagName === 'BUTTON') { console.log('Button clicked:', e.target.textContent); } });

场景：
动态生成的子元素（如评论列表中的“删除”按钮）。

2. var、let 和 const 的区别是什么？分别适用于哪些场景？

• var：函数作用域，存在变量提升，易导致作用域问题。
• let：块级作用域，无变量提升，适用于需要修改的变量。
• const：块级作用域，声明后不可重新赋值，适用于常量。

3. 你如何解释闭包（closure）？试举例说明它的应用。

闭包：
函数能够记住并访问其定义时的词法作用域，即使函数在其他作用域内执行。

内部函数调用外部函数的变量

应用示例：

代码模块化
防抖，节流

function createCounter() {
  let count = 0;
  return function () {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

function createCounter() { let count = 0; return function () { return ++count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2

4. 请写一段代码，深拷贝一个 JavaScript 对象（不能使用库）。

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

function deepCopy(obj) { if (obj === null || typeof obj !== 'object') return obj; const copy = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepCopy(obj[key]); } } return copy; }

5. 什么是 Promise？如何通过 Promise 实现一个简单的异步请求？

Promise：
用于处理异步操作的对象，有三种状态：pending、fulfilled、rejected。

示例：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
};

fetchData().then(data => console.log(data));

const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Data fetched'); }, 1000); }); }; fetchData().then(data => console.log(data));

框架相关

1. Vue 中，v-if 和 v-show 的区别：

• v-if：按条件渲染，销毁或创建 DOM 元素。
• v-show：通过 CSS 控制显示隐藏，DOM 始终存在。

适用场景：

• v-if：切换较少时使用。
• v-show：需要频繁切换时使用。

2. React 中生命周期函数的用途：

• componentDidMount：组件挂载完成后执行初始化操作。
• shouldComponentUpdate：控制组件是否重新渲染。
• componentWillUnmount：清理操作（如取消订阅）。

3. 虚拟 DOM 的优点：

• 减少真实 DOM 的操作，提高性能。
• 提高跨平台能力（React Native 就是通过虚拟 DOM 实现的）。

综合与开放性问题

1. 浏览器的渲染机制：

1. DNS 解析获取 IP 地址。
2. HTTP 请求下载 HTML、CSS、JS 等资源。
3. HTML 解析生成 DOM 树，CSS 解析生成 CSSOM 树。
4. 渲染树：结合 DOM 和 CSSOM。
5. 布局计算每个元素的位置。
6. 绘制显示到屏幕。

2. 网站性能优化的方式：

1. 图片优化（压缩、懒加载）。
2. 合理使用缓存（如 HTTP 缓存、CDN）。
3. 减少 HTTP 请求（合并文件）。
4. 延迟加载非必要资源。
5. 优化