我将从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