我将从HTML、CSS、JavaScript等多个前端知识领域，整理出100道常见面试题，并给出详细答案，助你系统复习前端知识。
前端100道面试题及答案汇总一、HTML相关1. 介绍一下HTML5的新特性HTML5新增了很多语义化标签，如
2. DOCTYPE的作用是什么DOCTYPE声明的作用是告诉浏览器使用哪种HTML或XHTML规范来解析页面。不同的DOCTYPE声明会使浏览器以不同的模式渲染页面，标准模式（standards mode）下，浏览器会严格按照HTML或XHTML规范来解析和渲染页面，正确处理CSS样式和盒模型等；而在混杂模式（quirks mode）下，浏览器会模拟旧版本浏览器的行为，可能会出现一些不符合标准的渲染结果。因此，正确声明DOCTYPE对于保证页面在不同浏览器中一致的、符合标准的渲染至关重要。
3. 说说你对HTML语义化的理解HTML语义化就是使用具有明确含义的HTML标签来构建页面结构和内容，让页面不仅能被浏览器正确解析和显示，还能让开发者和搜索引擎等更容易理解页面的内容和结构。例如，使用
- 标签表示标题层级，
标签表示段落，
- 和
- 标签表示列表等。语义化有助于提高代码的可读性和可维护性，当多人协作开发项目时，清晰的语义化结构能让其他开发者快速理解页面内容和布局。对搜索引擎而言，语义化标签能帮助其更好地理解页面内容，提高页面在搜索结果中的排名，从而提升网站的流量和曝光度。同时，对于使用屏幕阅读器等辅助技术的用户，语义化标签也能让他们更方便地理解页面信息。
4. meta标签有哪些常见的属性及作用meta标签用于定义页面的元数据，常见属性及作用如下：
charset：指定文档的字符编码，如，确保浏览器正确解析页面中的字符，避免出现乱码问题。name和content：配合使用定义各种元数据。例如，name="description"时，content属性用于描述页面的主要内容，有助于搜索引擎理解页面并在搜索结果中展示摘要信息；name="keywords"时，content属性列出与页面相关的关键词，帮助搜索引擎优化，但目前其对搜索排名的影响相对较小；name="viewport"时，content属性用于控制页面在移动设备上的视口显示，如，可使页面在不同尺寸的移动设备上自适应显示。http - equiv和content：模拟HTTP响应头信息。例如，http - equiv="refresh"时，content属性可设置页面自动刷新的时间间隔和跳转的URL，如表示5秒后页面自动跳转到http://example.com。5. 如何在HTML中嵌入SVG图形可以通过以下两种常见方式在HTML中嵌入SVG图形：
直接在HTML文件中编写SVG代码：将SVG图形的XML代码直接放在HTML页面的
标签内或其他合适的位置。例如：代码语言：html复制这样浏览器会直接解析并渲染SVG图形。使用标签引用外部SVG文件：将SVG图形保存为独立的文件（如image.svg），然后在HTML中通过
标签的src属性引用该文件，如下：代码语言：html复制
这种方式类似于引用普通图片，但需注意部分浏览器对SVG图片的渲染和支持可能存在差异。此外，还可以通过
代码语言：html复制
代码语言：html复制
二、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，同时设置不同方向边框的宽度和颜色，将不需要的边框设置为透明，从而只显示出需要方向的边框，形成三角形。例如，绘制一个向下的三角形：
代码语言：css复制.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设置为透明：
代码语言：css复制.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的触发条件如下：
根元素（）。浮动元素（float属性的值不是none，如float: left或float: right）。绝对定位元素（position属性的值为absolute或fixed）。行内块元素（display属性的值为inline - block）。overflow属性的值不是visible（如overflow: hidden、overflow: auto、overflow: scroll等）。BFC的应用场景主要有以下几个方面：
防止外边距合并：当两个相邻的块级元素都设置了垂直外边距时，它们的外边距会发生合并，取其中较大的值。通过将其中一个元素或它们的共同父元素设置为BFC，可以避免这种外边距合并现象。例如，两个相邻的
导航栏：可以通过Flex布局轻松实现导航项的水平排列，并使它们在水平方向上均匀分布或按照特定的比例分配空间，同时可以方便地实现导航项的垂直居中对齐。卡片列表：在展示一系列卡片式的内容时，Flex布局能使卡片在一行或一列中整齐排列，并且可以根据容器的大小自动调整卡片的宽度或高度，实现响应式布局。例如，常见的商品列表、文章列表等都可以用Flex布局实现。垂直居中：当需要将一个或多个元素在父容器中垂直居中时，Flex布局提供了非常简洁的方式，通过设置align - items属性为center即可实现。Grid布局（网格布局）则更适用于二维布局，即多行多列的复杂布局场景。它通过定义行和列来创建一个网格容器，元素可以精确地放置在网格的特定位置。以下是Grid布局的一些适用场景：
复杂页面布局：对于一些具有明确网格结构的页面，如电商网站的首页，包含多个不同模块，每个模块又有自己的子模块，使用Grid布局可以清晰地划分页面结构，使各个模块在网格中定位准确，并且能够方便地实现不同屏幕尺寸下的响应式布局。仪表盘：在设计仪表盘类型的页面时，Grid布局可以很好地将各种图表、数据展示区域等按照行列进行排列，使页面布局更加规整和美观。响应式网页设计：Grid布局的强大之处在于可以通过定义不同的网格模板，在不同的媒体查询条件下（如不同的屏幕宽度），灵活地改变页面元素的排列方式，实现高度响应式的设计，为不同设备的用户提供良好的视觉体验。总的来说，Flex布局更侧重于解决局部的、一维的布局问题，使元素在某一方向上的排列和对齐更加灵活；而Grid布局则专注于整体页面的二维结构搭建，适用于构建复杂的、具有明确网格结构的布局。在实际项目中，也可以根据具体需求将两者结合使用，以实现更丰富和高效的页面布局效果。
10. 简述CSS选择器的优先级和权重计算规则CSS选择器的优先级决定了当多个选择器同时作用于一个元素时，哪个选择器的样式会最终生效。权重计算规则用于确定每个选择器的优先级数值。具体如下：
优先级顺序：内联样式：直接在HTML元素的style属性中定义的样式，具有最高优先级。例如：
语法区别：伪类：使用一个冒号:作为前缀，紧跟在选择器后面。例如a:hover表示鼠标悬停在链接上时的状态；:first - child表示某个元素的第一个子元素。伪元素：使用两个冒号::作为前缀（在CSS3中引入这种写法以区分伪类，在一些旧版本浏览器中也可使用一个冒号的写法，但不推荐），紧跟在选择器后面前端面试题，前端面试答案，前端面试汇总，前端面试攻略，JavaScript,Vue,React,HTML,CSS, 前端开发，面试技巧，面试准备，前端知识点，前端笔试，Web 开发
！