前端常见 100 道面试题及详细答案汇总整理-CFANZ编程社区

前端100道面试题及答案汇总

一、HTML相关

1. 介绍一下HTML5的新特性

HTML5新增了很多语义化标签，如<header>、<nav>、<article>、<section>、<footer>等，使页面结构更加清晰，利于搜索引擎优化和代码维护。还引入了音频和视频标签<audio>、<video>，可方便地在网页中嵌入多媒体内容，无需依赖第三方插件。同时，提供了本地存储功能，包括localStorage（永久存储）和sessionStorage（会话存储），可在客户端存储数据。另外，新增了canvas元素用于图形绘制，Geolocation API用于获取用户地理位置信息，以及表单的新输入类型，如email、url、number、range等，增强了表单的功能和验证。

2. DOCTYPE的作用是什么

DOCTYPE声明的作用是告诉浏览器使用哪种HTML或XHTML规范来解析页面。不同的DOCTYPE声明会使浏览器以不同的模式渲染页面，标准模式（standards mode）下，浏览器会严格按照HTML或XHTML规范来解析和渲染页面，正确处理CSS样式和盒模型等；而在混杂模式（quirks mode）下，浏览器会模拟旧版本浏览器的行为，可能会出现一些不符合标准的渲染结果。因此，正确声明DOCTYPE对于保证页面在不同浏览器中一致的、符合标准的渲染至关重要。

3. 说说你对HTML语义化的理解

HTML语义化就是使用具有明确含义的HTML标签来构建页面结构和内容，让页面不仅能被浏览器正确解析和显示，还能让开发者和搜索引擎等更容易理解页面的内容和结构。例如，使用<h1> - <h6>标签表示标题层级，<p>标签表示段落，<ul>和<ol>标签表示列表等。语义化有助于提高代码的可读性和可维护性，当多人协作开发项目时，清晰的语义化结构能让其他开发者快速理解页面内容和布局。对搜索引擎而言，语义化标签能帮助其更好地理解页面内容，提高页面在搜索结果中的排名，从而提升网站的流量和曝光度。同时，对于使用屏幕阅读器等辅助技术的用户，语义化标签也能让他们更方便地理解页面信息。

4. meta标签有哪些常见的属性及作用

meta标签用于定义页面的元数据，常见属性及作用如下：

charset：指定文档的字符编码，如<meta charset="UTF - 8">，确保浏览器正确解析页面中的字符，避免出现乱码问题。
name和content：配合使用定义各种元数据。例如，name="description"时，content属性用于描述页面的主要内容，有助于搜索引擎理解页面并在搜索结果中展示摘要信息；name="keywords"时，content属性列出与页面相关的关键词，帮助搜索引擎优化，但目前其对搜索排名的影响相对较小；name="viewport"时，content属性用于控制页面在移动设备上的视口显示，如<meta name="viewport" content="width=device - width, initial - scale = 1.0">，可使页面在不同尺寸的移动设备上自适应显示。
http - equiv和content：模拟HTTP响应头信息。例如，http - equiv="refresh"时，content属性可设置页面自动刷新的时间间隔和跳转的URL，如<meta http - equiv="refresh" content="5;url = http://example.com">表示5秒后页面自动跳转到http://example.com。

5. 如何在HTML中嵌入SVG图形

可以通过以下两种常见方式在HTML中嵌入SVG图形：

直接在HTML文件中编写SVG代码：将SVG图形的XML代码直接放在HTML页面的<body>标签内或其他合适的位置。例如：

<svg width=100 height=100>
  <circle cx=50 cy=50 r=40 stroke=green stroke - width=4 fill=yellow />
</svg>

这样浏览器会直接解析并渲染SVG图形。

使用<img>标签引用外部SVG文件：将SVG图形保存为独立的文件（如image.svg），然后在HTML中通过<img>标签的src属性引用该文件，如下：

<img src=image.svg alt=SVG Image>

这种方式类似于引用普通图片，但需注意部分浏览器对SVG图片的渲染和支持可能存在差异。此外，还可以通过<object>或<embed>标签来嵌入SVG，<object>标签的使用方法为：

<object data=image.svg type=image/svg + xml></object>

<embed>标签的使用方法为：

<embed src=image.svg type=image/svg + xml>

<object>和<embed>标签相比<img>标签，功能更强大，可通过JavaScript等方式对嵌入的SVG进行更多交互操作，但语法相对复杂一些。

二、CSS相关

6. CSS盒模型由哪些部分组成，box - sizing属性有什么作用

CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。内容区域是元素实际包含内容的部分，其大小由width和height属性定义（在box - sizing为默认值content - box时）。内边距是内容与边框之间的空白区域，通过padding - top、padding - right、padding - bottom、padding - left属性或padding简写属性来设置。边框围绕在内边距之外，可通过border - width、border - style、border - color等属性设置其宽度、样式和颜色，也有border简写属性。外边距是元素边框之外与其他元素之间的空白区域，通过margin - top、margin - right、margin - bottom、margin - left属性或margin简写属性来设置。

box - sizing属性用于控制盒模型的计算方式，它有两个主要取值：

content - box（默认值）：在这种模式下，元素的width和height只计算内容区域的大小，元素的实际宽度 = width + padding + border，高度同理。例如，设置一个元素width: 200px; padding: 10px; border: 5px solid black;，那么该元素在页面上占据的实际宽度为200 + 10×2 + 5×2 = 230px。
border - box：在这种模式下，元素的width和height包括了内容、内边距和边框的大小，即元素的实际宽度和高度就是设置的width和height值，内容区域的大小会根据width、padding和border的值自动调整。例如，同样设置一个元素width: 200px; padding: 10px; border: 5px solid black; box - sizing: border - box;，该元素在页面上占据的实际宽度就是200px，内容区域的宽度为200 - 10×2 - 5×2 = 170px。border - box模式在进行响应式布局和页面排版时非常有用，可避免因元素的padding和border导致布局错位的问题，使布局更加可控和灵活。

7. 如何使用CSS绘制一个三角形

可以利用CSS的边框属性来绘制三角形。其原理是通过设置元素的宽度和高度为0，同时设置不同方向边框的宽度和颜色，将不需要的边框设置为透明，从而只显示出需要方向的边框，形成三角形。例如，绘制一个向下的三角形：

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

在上述代码中，width和height都设置为0，因为不需要元素本身有实际的宽度和高度。border - left和border - right设置为透明，宽度为50px，border - bottom设置为黑色，宽度为100px，这样就形成了一个底边为100px，高为100px的向下的三角形。

如果要绘制其他方向的三角形，只需调整不同边框的属性值。例如，绘制一个向上的三角形，可将border - top设置为有颜色的边框，border - left、border - right和border - bottom设置为透明：

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

绘制向左或向右的三角形同理，通过调整对应方向的边框属性即可实现。

8. 解释一下BFC的概念、触发条件和应用场景

BFC（Block Formatting Context）即块级格式化上下文，是CSS中的一个独立渲染区域，它规定了内部元素如何布局，以及与外部元素的相互作用。在BFC中，块级元素会垂直排列，并且同一个BFC内的元素不会相互影响，不同BFC之间的元素布局也不会相互干扰。

BFC的触发条件如下：

根元素（<html>）。
浮动元素（float属性的值不是none，如float: left或float: right）。
绝对定位元素（position属性的值为absolute或fixed）。
行内块元素（display属性的值为inline - block）。
overflow属性的值不是visible（如overflow: hidden、overflow: auto、overflow: scroll等）。

BFC的应用场景主要有以下几个方面：

防止外边距合并：当两个相邻的块级元素都设置了垂直外边距时，它们的外边距会发生合并，取其中较大的值。通过将其中一个元素或它们的共同父元素设置为BFC，可以避免这种外边距合并现象。例如，两个相邻的<div>元素，都设置了margin - top: 20px和margin - bottom: 20px，如果它们在同一个普通容器中，实际它们之间的垂直距离是20px而不是40px。但如果将其中一个<div>元素设置为BFC（如添加overflow: hidden），则它们之间的垂直距离就会变为40px。
清除浮动：当父元素包含浮动子元素时，如果父元素没有设置高度，且子元素都为浮动元素，那么父元素的高度会塌陷为0。此时，将父元素设置为BFC（如添加overflow: hidden），父元素就会自动包含浮动子元素的高度，实现清除浮动的效果。
避免元素被浮动元素覆盖：当一个非浮动元素和一个浮动元素在同一容器中时，非浮动元素可能会被浮动元素覆盖。将非浮动元素设置为BFC，它就会形成自己的独立渲染区域，不会与浮动元素重叠，从而避免被覆盖。

9. Flex布局和Grid布局的适用场景有哪些不同

Flex布局（弹性布局）主要适用于一维布局，即单行或单列的排列场景。其核心特点是能够方便地控制元素在主轴和交叉轴上的对齐方式、元素之间的间距以及元素的伸缩性。以下是一些常见的适用场景：

导航栏：可以通过Flex布局轻松实现导航项的水平排列，并使它们在水平方向上均匀分布或按照特定的比例分配空间，同时可以方便地实现导航项的垂直居中对齐。
卡片列表：在展示一系列卡片式的内容时，Flex布局能使卡片在一行或一列中整齐排列，并且可以根据容器的大小自动调整卡片的宽度或高度，实现响应式布局。例如，常见的商品列表、文章列表等都可以用Flex布局实现。
垂直居中：当需要将一个或多个元素在父容器中垂直居中时，Flex布局提供了非常简洁的方式，通过设置align - items属性为center即可实现。

Grid布局（网格布局）则更适用于二维布局，即多行多列的复杂布局场景。它通过定义行和列来创建一个网格容器，元素可以精确地放置在网格的特定位置。以下是Grid布局的一些适用场景：

复杂页面布局：对于一些具有明确网格结构的页面，如电商网站的首页，包含多个不同模块，每个模块又有自己的子模块，使用Grid布局可以清晰地划分页面结构，使各个模块在网格中定位准确，并且能够方便地实现不同屏幕尺寸下的响应式布局。
仪表盘：在设计仪表盘类型的页面时，Grid布局可以很好地将各种图表、数据展示区域等按照行列进行排列，使页面布局更加规整和美观。
响应式网页设计：Grid布局的强大之处在于可以通过定义不同的网格模板，在不同的媒体查询条件下（如不同的屏幕宽度），灵活地改变页面元素的排列方式，实现高度响应式的设计，为不同设备的用户提供良好的视觉体验。

总的来说，Flex布局更侧重于解决局部的、一维的布局问题，使元素在某一方向上的排列和对齐更加灵活；而Grid布局则专注于整体页面的二维结构搭建，适用于构建复杂的、具有明确网格结构的布局。在实际项目中，也可以根据具体需求将两者结合使用，以实现更丰富和高效的页面布局效果。

10. 简述CSS选择器的优先级和权重计算规则

CSS选择器的优先级决定了当多个选择器同时作用于一个元素时，哪个选择器的样式会最终生效。权重计算规则用于确定每个选择器的优先级数值。具体如下：

优先级顺序：
- 内联样式：直接在HTML元素的style属性中定义的样式，具有最高优先级。例如：<div style="color: red;">。
- ID选择器：使用#符号后跟ID名称的选择器，如#my - id。
- 类选择器、伪类选择器和属性选择器：类选择器使用.符号后跟类名，如.my - class；伪类选择器如:hover、:active等；属性选择器如[type = "text"]。这三类选择器的优先级相同。
- 标签选择器和伪元素选择器：标签选择器直接使用HTML标签名，如div、p等；伪元素选择器如::before、::after等。它们的优先级也是相同的。
- 通配符选择器*：优先级最低，它会匹配所有元素，但样式很容易被其他选择器覆盖。
权重计算规则：
- 内联样式：权重为1,0,0,0（可理解为四个等级的权重值，从高到低分别对应内联样式、ID选择器、类/伪类/属性选择器、标签/伪元素选择器）。
- ID选择器：每个ID选择器的权重为0,1,0,0。
- 类选择器、伪类选择器和属性选择器：每个此类选择器的权重为0,0,1,0。
- 标签选择器和伪元素选择器：每个此类选择器的权重为0,0,0,1。
- 当多个选择器组合使用时，将各个选择器的权重值对应相加。例如，div.my - class的权重为0,0,1,1（一个标签选择器权重0,0,0,1加上一个类选择器权重0,0,1,0）；#my - id div的权重为0,1,0,1（一个ID选择器权重0,1,0,0加上一个标签选择器权重0,0,0,1）。
- 如果两个选择器的权重值相同，那么后出现的样式声明会覆盖先出现的样式声明（在同一个样式表中）。如果样式来自不同的样式表，一般来说，浏览器默认样式表的优先级最低，用户自定义样式表（如果有的话）优先级高于浏览器默认样式表，而作者定义的样式表（即开发者编写的样式表）优先级最高。同时，使用!important声明可以强制使某个样式规则具有最高优先级，但应尽量避免过度使用!important，因为它会使样式的可维护性变差。

11. 伪类和伪元素有什么区别，举例说明

伪类和伪元素都是CSS中用于选择元素特定状态或特定部分的机制，但它们有明显的区别：

语法区别：
- 伪类：使用一个冒号:作为前缀，紧跟在选择器后面。例如a:hover表示鼠标悬停在链接上时的状态；:first - child表示某个元素的第一个子元素。
- 伪元素：使用两个冒号::作为前缀（在CSS3中引入这种写法以区分伪类，在一些旧版本浏览器中也可使用一个冒号的写法，但不推荐），紧跟在选择器后面

前端面试题，前端常见面试题，前端面试题汇总，前端面试题答案，JavaScript 面试题，HTML 面试题，CSS 面试题，前端框架面试题，Vue 面试题，React 面试题，Angular 面试题，前端性能优化面试题，跨域问题面试题，前端路由面试题，前端组件化面试题

资源地址： https://pan.quark.cn/s/99820819b158