我将从HTML、CSS、JavaScript等多个前端知识领域，整理出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等。它们的优先级也是相同的。 - 通配符选择器
*：优先级最低，它会匹配所有元素，但样式很容易被其他选择器覆盖。
- 内联样式：直接在HTML元素的
- 权重计算规则：
- 内联样式：权重为
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中引入这种写法以区分伪类，在一些旧版本浏览器中也可使用一个冒号的写法，但不推荐），紧跟在选择器后面
- 伪类：使用一个冒号
2025, 前端，面试题，HTML,CSS,JavaScript,Vue,React, 性能优化，安全，闭包，事件循环，响应式布局，虚拟 DOM,Webpack
资源地址：
https://pan.quark.cn/s/99820819b158
