2025 最新前端 100 道经典面试题及详细答案汇总整理

简介: 本文整理了100道前端常见面试题及其详细答案,涵盖HTML、CSS、JavaScript等多个领域,助你系统复习前端知识。内容包括HTML5新特性、CSS盒模型、Flex与Grid布局区别、选择器优先级等核心知识点,以及伪类和伪元素的区别等细节。适合准备面试或巩固基础的开发者学习。资源可从文末链接下载。

我将从HTML、CSS、JavaScript等多个前端知识领域,整理出100道常见面试题,并给出详细答案,助你系统复习前端知识。

一、HTML相关

1. 介绍一下HTML5的新特性

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

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">,确保浏览器正确解析页面中的字符,避免出现乱码问题。
  • namecontent:配合使用定义各种元数据。例如,name="description"时,content属性用于描述页面的主要内容,有助于搜索引擎理解页面并在搜索结果中展示摘要信息;name="keywords"时,content属性列出与页面相关的关键词,帮助搜索引擎优化,但目前其对搜索排名的影响相对较小;name="viewport"时,content属性用于控制页面在移动设备上的视口显示,如<meta name="viewport" content="width=device - width, initial - scale = 1.0">,可使页面在不同尺寸的移动设备上自适应显示。
  • http - equivcontent:模拟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)四个部分组成。内容区域是元素实际包含内容的部分,其大小由widthheight属性定义(在box - sizing为默认值content - box时)。内边距是内容与边框之间的空白区域,通过padding - toppadding - rightpadding - bottompadding - left属性或padding简写属性来设置。边框围绕在内边距之外,可通过border - widthborder - styleborder - color等属性设置其宽度、样式和颜色,也有border简写属性。外边距是元素边框之外与其他元素之间的空白区域,通过margin - topmargin - rightmargin - bottommargin - left属性或margin简写属性来设置。

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

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

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

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

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

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

如果要绘制其他方向的三角形,只需调整不同边框的属性值。例如,绘制一个向上的三角形,可将border - top设置为有颜色的边框,border - leftborder - rightborder - 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: leftfloat: right)。
  • 绝对定位元素(position属性的值为absolutefixed)。
  • 行内块元素(display属性的值为inline - block)。
  • overflow属性的值不是visible(如overflow: hiddenoverflow: autooverflow: scroll等)。

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

  • 防止外边距合并:当两个相邻的块级元素都设置了垂直外边距时,它们的外边距会发生合并,取其中较大的值。通过将其中一个元素或它们的共同父元素设置为BFC,可以避免这种外边距合并现象。例如,两个相邻的<div>元素,都设置了margin - top: 20pxmargin - 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选择器的优先级决定了当多个选择器同时作用于一个元素时,哪个选择器的样式会最终生效。权重计算规则用于确定每个选择器的优先级数值。具体如下:

  1. 优先级顺序
    • 内联样式:直接在HTML元素的style属性中定义的样式,具有最高优先级。例如:<div style="color: red;">
    • ID选择器:使用#符号后跟ID名称的选择器,如#my - id
    • 类选择器、伪类选择器和属性选择器:类选择器使用.符号后跟类名,如.my - class;伪类选择器如:hover:active等;属性选择器如[type = "text"]。这三类选择器的优先级相同。
    • 标签选择器和伪元素选择器:标签选择器直接使用HTML标签名,如divp等;伪元素选择器如::before::after等。它们的优先级也是相同的。
    • 通配符选择器*:优先级最低,它会匹配所有元素,但样式很容易被其他选择器覆盖。
  2. 权重计算规则
    • 内联样式:权重为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中用于选择元素特定状态或特定部分的机制,但它们有明显的区别:

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

2025, 前端,面试题,HTML,CSS,JavaScript,Vue,React, 性能优化,安全,闭包,事件循环,响应式布局,虚拟 DOM,Webpack



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


目录
相关文章
|
8天前
|
XML 前端开发 JavaScript
2025 年最新 CSS 面试题 100 道及详细答案解析
本文整理了100道CSS面试题及答案,涵盖基础概念、选择器与特性、布局(如Flexbox和Grid)、动画与过渡、响应式设计等核心内容。从CSS的基础知识如盒模型、`box-sizing`属性,到高级应用如伪类选择器(LVHA、CSS3新增伪类)和视觉格式化模型(BFC),帮助开发者系统掌握CSS技能。此外,还涉及浏览器兼容性、CSS优化及预处理器等内容,为前端工程师提供全面的学习资源。资源可从[此链接](https://pan.quark.cn/s/50438c9ee7c0)获取。
67 5
|
移动开发 开发框架 JavaScript
uniapp如何与原生应用进行混合开发?
uniapp如何与原生应用进行混合开发?
867 0
|
开发者
【面试题精讲】面向对象三大特征
【面试题精讲】面向对象三大特征
|
7天前
|
存储 Web App开发 缓存
清理C盘空间的6种方法,附详细操作步骤
释放C盘空间并不难。只要掌握合适的方法,哪怕你是电脑小白,也能轻松清理出几十GB空间。下面就为大家介绍6种实用、安全、细致的清理方法,并附上操作步骤。
|
7天前
|
人工智能 Nacos 开发者
Nacos 开源 MCP Router,加速 MCP 私有化部署
Nacos MCP Router 发布全新版本。带来了多项重要更新,包括对 SSE 和 StreamableHTTP 协议的全面支持、Docker 容器化部署方案以及革命性的 MCP Server 协议一键转换功能。文章中详细的介绍更新内容并简单演示了使用过程。Nacos MCP Router 新版本的发布,不仅提升了开发者的使用体验,也为 MCP 服务的广泛应用和生态繁荣奠定了基础,欢迎关注。
276 64
|
10天前
|
人工智能 Java 开发工具
MCP Java 开发指南
MCP Java 开发指南
364 21
MCP Java 开发指南
|
7天前
|
安全 JavaScript 前端开发
Typora免费下载,不需要激活,Typora早期版本,Markdown编辑器
Typora是一款支持实时预览的Markdown编辑器,跨平台兼容Windows、macOS和Linux,适合写作、笔记和技术文档。本文提供合法安全的Typora早期免费版安装方案及常见问题解决方法,助你快速上手。同时详细介绍了Markdown基础用法,包括标题、加粗、斜体、列表、链接、图片、引用、代码块和表格等常用语法,帮助用户高效编写结构化内容。
964 18
|
9天前
|
存储 安全 Java
2025 年一线互联网大厂最新高质量 Java 面试八股文整理带答案及实操要点
本文整理了一线互联网大厂最新的高质量Java面试八股文及答案,涵盖Java基础、集合、多线程等多个核心方面,帮助你高效备考。内容包括面向对象与面向过程的区别、`equals`与`==`的对比、`final`和`static`的用法,以及ArrayList与LinkedList的区别、HashMap的工作原理等。同时,深入探讨了多线程创建方式、生命周期、上下文切换及死锁问题,并附有实操代码示例。资源链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
293 1
|
12天前
|
数据安全/隐私保护 Android开发 Windows
2025 年三款免费高清无水印视频录制工具推荐合集
本文介绍了三款免费高清录屏软件:EVCapture、Bandicam 和 屏幕录像机(oCam)。EVCapture 功能强大,支持视频录制与直播,提供分屏录制、实时按键显示等;Bandicam 适合游戏录屏,可自定义录制区域并添加Logo,还支持音频和摄像头设置;oCam 小巧灵活,支持多种视频格式(如GIF、MP4等)及音频、截图功能。三者均无水印,画质清晰,满足不同录屏需求。资源地址已提供,可供下载体验。
739 0
|
8月前
|
缓存 监控 Java
大厂性能优化的10大顶级方案 (万字图文史上最全)
本文详细介绍了大厂性能优化的10大顶奢方案,涵盖代码优化、缓存优化、异步优化、多线程优化、前端优化、微服务架构优化、硬件升级、数据库优化、过载保护优化以及度量与监控系统等方面。每部分不仅提供了理论知识,还结合实际案例和代码示例,帮助读者全面理解和应用这些优化策略。文章还特别强调了架构设计的重要性,指出架构师需要具备多方面的知识和技能,包括硬件、软件、网络协议、分布式知识等,以应对复杂的技术挑战。最后,作者尼恩分享了自己多年的经验,提供了丰富的技术资源和实战指导,助力读者在面试和工作中取得成功。
大厂性能优化的10大顶级方案 (万字图文史上最全)