前端2024最新面试题合集

1. HTML 篇 ， 2. CSS 篇 ， HTML / CSS 混合篇，JS 篇，Vue 篇，其他杂项篇，主观题篇 1. HTML 篇 - 1.1 语义化的理解 - 1.2 `title` 与 `alt` 属性的区别 - 1.3 `iframe` 的优缺点 - 1.4 `href` 与 `src` 的区别 ### 2. CSS 篇 - 2.1 CSS 盒子模型 - 2.2 CSS 选择器优先级 - 2.3 垂直居中方法 - 2.4 `CSS link` 与 `@import` 的区别和用法 - 2.5 `rgba` 和 `opacity` 的透明效果 - 2.6 `display:none` 和 `visibility:hidden` 的区别 - 2.7 `position` 的值及其定位方式 ### 3. HTML / CSS 混合篇 - 3.1 HTML5 和 CSS3 的新特性 - 3.2 BFC 的概念 - 3.3 常见兼容性问题 ### 4. JS 篇 ### 前端2024最新面试题合集知识点详解 #### 1. HTML 篇 **1.1 语义化的理解** - **定义**：HTML语义化是指使用符合其含义的标签来构建网页内容。这种方式不仅提高了代码的可读性和可维护性，还对搜索引擎优化（SEO）有所帮助。 - **优势**： - **易读性**：提高代码可读性，便于团队协作。 - **SEO**：搜索引擎更容易解析内容的意义。 - **可访问性**：对于辅助技术（如屏幕阅读器）来说更为友好。 - **示例**：使用`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`和`<footer>`等标签来组织页面结构。 **1.2 `title` 与 `alt` 属性的区别** - **`title`**：为页面元素提供额外的信息，在鼠标悬停时显示。 - **`alt`**：为`<img>`标签提供替代文本，当图片无法加载时显示，有助于SEO及屏幕阅读器识别。 **1.3 `iframe` 的优缺点** - **优点**： - **并行加载**：可以并行加载多个脚本，提高加载速度。 - **安全沙箱**：提供安全的执行环境，降低风险。 - **缺点**： - **阻塞`onload`事件**：直到`iframe`加载完毕，主页面的`onload`事件才会触发。 - **加载时间**：即使内容为空，也需要加载时间。 - **缺乏语义**：不利于SEO和可访问性。 **1.4 `href` 与 `src` 的区别** - **`href`**：用于链接，如`<a>`、`<link>`，指定目标地址。 - **`src`**：用于引入资源，如`<script>`、`<img>`、`<iframe>`，指定资源来源地址。 #### 2. CSS 篇 **2.1 CSS 盒子模型** - **组成**：内容(content)、内边距(padding)、边框(border)、外边距(margin)。 - **计算**：盒子模型决定了元素如何占用空间以及与其他元素交互。 **2.2 CSS 选择器优先级** - **优先级顺序**：内联样式 > ID选择器 > 类选择器/伪类/属性选择器 > 标签选择器/伪元素 > 通用选择器。 **2.3 垂直居中方法** - **Flexbox**：通过`display: flex; align-items: center; justify-content: center;`实现。 - **Grid**：利用`display: grid; place-items: center;`进行布局。 - **绝对定位**：结合`top`、`left`等属性，并使用`transform`调整位置。 **2.4 `CSS link` 与 `@import` 的区别和用法** - **`<link>`**：HTML文档中引入外部CSS文件。 - **`@import`**：CSS文件内部导入另一CSS文件。 **2.5 `rgba` 和 `opacity` 的透明效果** - **`rgba`**：设置颜色的同时指定透明度。 - **`opacity`**：设置整个元素的透明度，影响子元素。 **2.6 `display:none` 和 `visibility:hidden` 的区别** - **`display:none`**：元素完全不显示，不占空间。 - **`visibility:hidden`**：元素不可见，但仍占据空间。 **2.7 `position` 的值及其定位方式** - **`relative`**：相对于元素本身的位置偏移。 - **`absolute`**：相对于最近的非静态定位祖先元素定位。 #### 3. HTML / CSS 混合篇 **3.1 HTML5 和 CSS3 的新特性** - **HTML5**： - **语义化标签**：`<header>`、`<nav>`、`<section>`等。 - **表单控件**：`<input type="date">`、`<output>`等。 - **多媒体支持**：`<audio>`、`<video>`。 - **CSS3**： - **选择器增强**：属性选择器、伪类选择器等。 - **盒模型改进**：`box-sizing`属性。 - **响应式设计**：媒体查询。 **3.2 BFC (Block Formatting Context)** - **概念**：一个独立的渲染区域，决定了内部元素如何布局。 - **特点**：浮动元素、绝对定位元素、`overflow`非`visible`的元素都会创建新的BFC。 **3.3 常见兼容性问题** - **IE浏览器**：对于某些CSS3特性的支持较差，需要使用Polyfill。 - **Chrome/Safari/Firefox**：通常支持最新标准，但也存在细节差异。 #### 4. JS 篇 后续章节中我们将深入探讨JavaScript相关的面试知识点，包括ES6+的新特性、异步编程、框架相关知识等。这部分内容将在后续的文章中详细展开。 以上知识点覆盖了HTML、CSS以及它们的混合应用领域，是前端开发人员面试过程中经常遇到的核心知识点。掌握这些内容不仅可以帮助开发者更好地理解前端技术栈，还能提升他们在实际项目中的编码效率和质量。