PandaDoc

Appearance

开始 ​

提示

本文档用来记录一些web前端开发工程师高频面试题

目录表 ​

一、HTML ​

1、DOCTYPE的作用 ​

DOCTYPE 是一个声明，它必须位于每个HTML文档的顶部，在 <html> 标签之前。其主要作用是告诉浏览器当前文档使用的HTML版本，使浏览器能够正确地渲染页面。

例如，HTML5 的 DOCTYPE 声明非常简单：

html
<!DOCTYPE html>

这使得浏览器以标准模式渲染页面，避免了怪异模式（quirks mode）带来的兼容性问题。简单来说，它确保了网页在不同浏览器中尽可能一致地显示。

2、对HTML语义化的了解 ​

HTML语义化指的是使用HTML标签时，根据内容的结构和意义来选择合适的标签，而不是仅仅基于表现形式。正确使用语义化标签有助于提升代码的可读性和可维护性，并且对SEO（搜索引擎优化）和无障碍访问也有积极影响。

例如：

  • 使用 <header>、<footer>、<article> 和 <section> 等标签明确网页的结构。
  • 使用 <strong> 和 <em> 分别表示重要文本和强调文本，而不是单纯地使用 <b> 和 <i> 标签。

这样做不仅让页面结构更清晰，还能帮助搜索引擎更好地理解页面内容，同时也能改善屏幕阅读器用户的体验。

3、Web标准以及W3C ​

Web标准是由W3C（万维网联盟）等组织制定的一系列规范和指南，旨在确保网页内容的互操作性和可访问性。这些标准涵盖了HTML、CSS、JavaScript等多个方面，指导开发者如何构建高效、兼容且易于维护的网站。

  • HTML 标准定义了网页结构和内容标记的方式。
  • CSS 标准规定了如何为网页添加样式和布局。
  • JavaScript 标准（如ECMAScript）则描述了脚本语言的行为规则。

遵循Web标准的好处包括：

  • 兼容性：确保网页在不同浏览器和设备上都能正常显示。
  • 可维护性：使代码更加清晰易读，便于维护和扩展。
  • 无障碍性：支持更多的用户，包括使用辅助技术的人群。

W3C通过制定这些标准并推广其应用，促进了互联网技术的发展与统一。遵循这些标准有助于创建更高质量的网页。

4、行级元素和块级元素 ​

行级元素（inline elements） 主要用于包裹文本或其他行内元素，它们不会在页面上开始新行。常见的行级元素包括：

  • <a>：超链接
  • <span>：通用行级容器
  • <img>：图像
  • <strong> 和 <em>：强调文本

块级元素（block-level elements） 总是在新的一行开始，并且尽可能地扩展以占据其父容器的全部宽度。常见的块级元素包括：

  • <div>：通用块级容器
  • <p>：段落
  • <h1> 到 <h6>：标题
  • <ul> 和 <ol>：无序和有序列表

转换方法

可以通过CSS属性来转换元素的显示方式：

  • 将块级元素转换为行级元素：使用 display: inline;

    css
    div {
  display: inline;
}

  • 将行级元素转换为块级元素：使用 display: block;

    css
    span {
  display: block;
}

此外，还有其他一些显示模式如 inline-block，它允许元素既保持行内元素不换行的特点，又具备设置宽高的能力，适用于需要同时控制布局和排列的情况。例如：

css
span {
  display: inline-block;
  width: 100px;
  height: 50px;
}

通过灵活运用这些CSS属性，可以根据设计需求调整元素的显示行为。

5、H5新元素和新特性 ​

HTML5引入了许多新元素和特性，使得网页开发更加灵活、强大。以下是HTML5的一些关键新元素和特性：

新的语义化标签

<header>、<footer>、 <nav>、<article>、<section>、<aside>、<main>

多媒体支持

  • <audio> 和 <video>：提供对音频和视频内容的支持，不再需要第三方插件。

表单增强

  • 新的输入类型：email, url, number, range, date, time, 等。
  • 新的属性：placeholder, required, pattern, autocomplete, 等，提供了更强大的表单验证功能。

图形和绘图

  • <canvas>：通过JavaScript API在网页上绘制图形。
  • SVG（可缩放矢量图形）：一种基于XML的图像格式，适合于创建高质量的矢量图形。

客户端存储

  • Web Storage：包括 localStorage 和 sessionStorage，允许在客户端存储数据。

其他API和特性

  • 地理定位 API：允许获取用户的地理位置。
  • 拖放 API：实现拖放操作。
  • WebSocket API：提供全双工通信协议。

这些新元素和特性大大扩展了HTML的功能，使得开发者能够创建出更加丰富和交互性强的网页。

6、cookie、sessionStorage 和 localStorage 的区别 ​

Cookie、sessionStorage 和 localStorage 都是用来在客户端存储数据的机制，但它们在存储容量、生命周期和作用域等方面存在显著差异。

Cookie

  • 用途：主要用于存储少量用户信息（如登录状态），并随每次请求发送到服务器。
  • 存储大小：通常每个cookie最大为4KB。
  • 生命周期：可以通过设置expires或max-age属性来控制，可以是会话级别的（关闭浏览器即失效）或者持久化的（设定具体过期时间）。

sessionStorage

  • 用途：用于临时存储一个会话期间的数据，适合于保存不需要长期保留的信息。
  • 存储大小：大多数现代浏览器支持至少5MB的数据存储。
  • 生命周期：仅在当前标签页打开期间有效，关闭标签页后数据会被清除。

localStorage

  • 用途：用于长期存储数据，即使浏览器关闭或电脑重启后数据依然存在。
  • 存储大小：大多数现代浏览器支持至少5MB的数据存储。
  • 生命周期：除非手动删除，否则数据将一直保留在用户的设备上。

总结对比

特性CookiesessionStoragelocalStorage
存储大小4KB左右至少5MB至少5MB
生命周期可配置（会话或持久化）当前标签页会话期间持久化，直到被删除
数据共享同一域名下仅限当前标签页同一源下的所有页面
自动发送是（每次HTTP请求）否否

选择哪种存储方式取决于应用的具体需求，例如是否需要跨页面共享数据、数据的有效期要求等。

二、CSS ​

1、 CSS选择器及其优先级 ​

CSS选择器优先级是根据选择器的类型来决定的，优先级决定了当多个规则应用于同一个元素时，哪一个样式会被应用。以下是几种常见的CSS选择器及其对应的优先级规则，从高到低排列：

  1. 内联样式（如：style="..."）——最高优先级。
  2. ID选择器（如：#header）——第二高优先级。
  3. 类选择器、属性选择器和伪类（如：.class, [type="text"], :hover）——第三高优先级。
  4. 元素选择器和伪元素选择器（如：div, ::before）——第四高优先级。
  5. 通用选择器（*）、组合选择器（如后代选择器、子选择器等） ——没有增加优先级。

优先级可以通过计算选择器的特定值来确定：

  • 内联样式加1,0,0,0
  • 每个ID选择器加0,1,0,0
  • 每个类选择器、属性选择器或伪类加0,0,1,0
  • 每个元素选择器或伪元素选择器加0,0,0,1

若优先级相同，则后来的样式会覆盖前面的样式，除非前面的样式带有!important声明，这将使该样式的优先级提升至非常高，但应谨慎使用，因为它可能会导致维护上的困难。

2、CSS中可继承属性 ​

在CSS中，某些属性是可以从父元素继承到子元素的，这被称为“可继承属性”。以下是一些常见的可继承属性：

  1. 文本相关属性：

    • color：文本颜色。
    • font-family：字体系列。
    • font-size：字体大小。
    • font-weight：字体粗细。
    • letter-spacing：字符间距。
    • line-height：行高。
    • text-align：文本对齐方式。
    • visibility：可见性。

  2. 其他：

    • cursor：鼠标指针样式。
    • direction：文字方向（如从左至右或从右至左）。

需要注意的是，并不是所有CSS属性都是可继承的。例如，边距（margin）、填充（padding）、边框（border）、背景（background）等布局相关的属性默认是不可继承的。不过，您可以通过显式地设置inherit关键字来强制这些属性继承自父元素。

3、对盒模型的理解 ​

盒模型是CSS中用于布局和设计的基础概念，它将每个HTML元素视为一个矩形的盒子。这个盒子由四个部分组成：

  1. 内容区（Content）：显示实际内容，如文本或图片。它的大小可以通过width和height属性控制。
  2. 内边距（Padding）：透明区域，位于内容区与边框之间。通过padding属性设置，增加内容区周围的空白。
  3. 边框（Border）：围绕内边距的一条线，可以通过border属性定义其宽度、样式和颜色。
  4. 外边距（Margin）：透明区域，位于边框之外，用来与其他元素保持距离。使用margin属性来调整。

此外，有两种盒模型标准：W3C标准盒模型（默认情况下，width和height只包括内容区）和IE盒模型（width和height包括内容区、内边距和边框）。

可以通过box-sizing属性切换这两种模式:

css
box-sizing: content-box; /* 标准盒模型（默认值） */
box-sizing: border-box;  /* IE盒模型*/

4、 CSS3中有哪些新特性 ​

CSS3引入了许多新特性，增强了网页设计的灵活性和用户体验。以下是一些主要的新特性：

  1. 选择器增强：新增了伪类选择器（如:nth-child）和伪元素选择器（如::before），使得更精确地选取页面元素成为可能。

  2. 圆角边框与阴影：支持圆角边框（border-radius）、阴影效果（box-shadow）。

  3. 渐变：线性和径向渐变可以用来创建平滑的颜色过渡效果，无需使用图片。

  4. 过渡与动画：通过transition属性可以在状态变化时添加动画效果；@keyframes规则允许定义复杂的动画序列。

  5. 变形：transform属性提供了旋转、缩放、倾斜和平移等转换功能。

  6. 布局模式：

    • 弹性盒子布局（Flexbox）：提供了一种更加有效的布局方式，特别适合用于响应式设计。
    • 网格布局（Grid）：一个强大的二维布局系统，用于创建复杂的网页布局。
    • 多列布局：使用column-count和column-width等属性来分割内容。

  7. 媒体查询：让开发者可以根据设备特征应用不同的样式表，实现响应式设计。

  8. 滤镜效果：filter属性可用于应用模糊、亮度调整等视觉效果。

这些特性的加入，使得前端开发人员能够创建更加丰富、动态和美观的用户界面，而不需要依赖额外的JavaScript代码或图片资源。

5、px、em、rem的区别 ​

px、em和rem是CSS中用于定义尺寸的单位，它们各自有不同的特点和适用场景：

  1. px（像素）：

    • 定义：绝对单位，表示屏幕上的物理像素点。
    • 特点：精确控制元素大小，但不随浏览器或用户的缩放设置变化。
    • 使用场景：适合用于需要固定大小的元素，如细线边框或图标大小。

  2. em：

    • 定义：相对单位，基于元素本身的字体大小计算。如果未明确指定，则继承自父元素的字体大小。
    • 特点：相对于当前元素或其最近的父元素的字体大小进行缩放，这使得它非常适合创建响应式布局。
    • 使用场景：适用于希望根据文本大小调整其他属性（如间距或内边距）的情况。然而，由于它是相对于父元素的字体大小，可能会导致嵌套层次较深时难以维护。

  3. rem：

    • 定义：相对单位，基于根元素（即<html>标签）的字体大小计算。
    • 特点：与em类似，但它总是参照根元素的字体大小，避免了嵌套带来的复杂性。
    • 使用场景：非常适用于响应式设计，因为它简化了相对大小的管理。通过仅改变根元素的字体大小，可以轻松地调整整个页面的布局和字体大小，特别适合实现全局一致的缩放效果。

总结：

  • 使用px可以获得最精确的控制，但在创建响应式设计时不够灵活。
  • em允许基于父元素进行相对缩放，适合于局部调整，但需要注意嵌套层级的影响。
  • rem提供了一种简单的方式来在整个文档中保持一致的比例，特别适合快速调整整体设计和实现响应式布局。在现代网页设计中，通常推荐优先使用rem来处理大多数尺寸需求。

6、水平垂直居中的实现 ​

实现元素水平垂直居中的方法有多种，这里提供几种常见的方案：

  1. Flexbox 方法：

    • 父容器设置 display: flex; justify-content: center; align-items: center;。
    • 子元素无需特殊设置即可自动居中。

  2. Grid 方法：

    • 父容器设置 display: grid; place-items: center;。
    • 同样，子元素不需要额外设置。

  3. 绝对定位和 transform 方法：

    • 父容器设置 position: relative;。
    • 子元素设置 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。

  4. 表格布局方法：

    • 父容器设置 display: table; 并包含一个内部的 div 设置为 display: table-cell; vertical-align: middle; text-align: center;。
    • 子元素放在该 div 内，默认即会居中。

选择哪种方法取决于具体的应用场景和个人偏好。Flexbox 和 Grid 因其简洁性和灵活性而特别受欢迎。

9、CSS画三角 ​

要使用CSS绘制一个三角形，您可以借助CSS的边框和透明边框技巧。以下是一个示例：

HTML

html
<div class="triangle-up"></div>

CSS

css
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边透明边界 */
    border-right: 50px solid transparent; /* 右边透明边界 */
    border-bottom: 100px solid #ff0000; /* 底部红色边界，决定三角形的颜色和高度 */
}

这个例子中，我们创建了一个没有宽度和高度的div，然后通过设置其左右边界的宽度为50px并且颜色为透明，底部边界的高度设为100px且颜色为红色（#ff0000），从而形成一个向上指的三角形。

如果你想要不同方向的三角形，只需调整哪个边界的尺寸和颜色。例如，要创建一个向右的三角形，你可以这样修改CSS：

css
.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid #ff0000;
}

这将创建一个指向右侧的红色三角形。通过改变不同的边框属性，你可以轻松地创建任何方向的三角形。

10、说说对BFC的理解 ​

BFC，即块级格式化上下文（Block Formatting Context），是一个在CSS布局中非常重要的概念，它影响着元素的布局和排列方式。以下是对BFC的理解：

  1. BFC的基本概念： BFC是一种独立的渲染区域，其中的元素按照一定规则进行布局和渲染。BFC内的元素相对于外部元素是隔离的，它们不会影响到外部元素的布局，也不受外部元素的影响。

  2. 创建BFC的条件： BFC可以通过以下方式创建：

    • 根元素 <html>
    • 浮动元素（元素的float属性不为none）
    • 绝对定位元素（元素的position属性为absolute或fixed）
    • overflow属性不为visible的元素（例如，overflow: auto;或overflow: hidden;）

  3. BFC的影响： BFC对元素的布局和排列有重要影响，主要体现在以下几个方面：

    • 阻止外部浮动元素影响内部元素的布局。
    • 防止内部元素溢出BFC。
    • 计算BFC高度时，会考虑浮动元素的高度。
    • 内部元素垂直排列不会互相重叠，而是按照规则进行排列。

  4. 常见应用场景： BFC在解决一些常见的布局问题时非常有用，例如清除浮动、避免外边距折叠等。一些常见的应用场景包括：

    • 清除浮动：通过在容器元素上创建BFC，可以清除内部浮动元素对父容器高度的影响。
    • 避免外边距折叠：BFC内部的垂直外边距不会与外部元素的外边距发生折叠，有助于更精确地控制元素之间的间距。
    • 制作两栏布局：可以使用BFC来创建一个左右两栏布局，其中一个栏浮动，另一个创建BFC以避免影响浮动栏的布局。

总之，BFC是CSS布局中的一个重要概念，它能够帮助开发者更好地控制元素的布局和排列，解决一些常见的布局问题。理解BFC对于掌握复杂布局和解决一些奇怪的布局行为问题非常重要。

11、实现移动端1px边框 ​

由于不同的移动设备具有不同的DPR(设备像素比)，以及不同的浏览器支持度，实现1px边框可能需要使用不同的方法。以下是一些常见的实现1px边框的方法：

  1. 使用伪元素::after：

    第一种方法是使用伪元素来创建1px边框。这种方法通常更适合在需要精确控制的情况下使用，因为它可以确保边框的精确显示。例如：

    css
    .element::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #e5e5e5;
}

    这种方法的好处是在高DPR设备上可以获得更清晰的边框效果。

  2. 使用border-image：

    border-image属性允许您使用图像来定义边框。您可以创建一个像素值为1px的图片，然后将其应用到元素的边框上。这种方法需要一些额外的工作，但可以确保在各种情况下都有一致的1px边框。

    css
    .element {
  border-width: 1px;
  border-image: url('1px-border.png') 1 stretch;
}

    在这里，1px-border.png是一个包含1px宽度的实线的图像。

12、重绘 VS 重排 ​

重绘（Repaint）：当页面元素的样式发生变化（如颜色、背景等）但不影响布局时，浏览器重新绘制元素的外观。重绘开销较小。

重排（Reflow）：当元素的尺寸或位置发生变化（如修改width、height、margin等）时，浏览器重新计算布局并重新渲染页面。重排开销较大，可能影响性能。

简单来说，重绘只影响样式，重排则会影响布局。

Copyright © 2024-2026 Panda工作室