前端常见面试题
一、HTML CSS
1.HTML5
-
HTML5 新特性
<header>标签用于表示页面或区块的头部，比如页面的标题或导航栏。<nav>标签用于表示导航栏。<main>标签用于表示页面的主要内容。<article>标签用于表示独立的文章内容。<section>标签用于表示页面或文章的分段内容。<aside>定义与页面内容稍有关系的部分（如侧边栏）。<footer>标签用于表示页面或区块的底部，比如版权信息或联系方式<mark>：标记文本，通常用于高亮显示搜索结果。
-
新增功能
- 本地存储：
localStorage和sessionStorage。 - 表单元素增强：
<input>支持ype="email"、type="date"等新类型。 - 新的 API：
Canvas、Geolocation API、Web Workers。 - 其他：多媒体支持
videoaudio。
- 本地存储：
2.什么是语义化 HTML？为什么要使用语义化标签？
-
语义化 HTML 是指使用 HTML 标签来明确表示内容的意义，而不是仅仅依赖
<div>和<span>标签。<header>网页标题</header> <main> <article> <h1>文章标题</h1> <p>这是内容</p> </article> <figure> <img src="image1.jpg" alt="图片1"> <figcaption>图片1的描述</figcaption> </figure> <figure> <img src="image2.jpg" alt="图片2"> <figcaption>图片2的描述</figcaption> </figure> </main> -
语义化标签有助于：
- 增强网页的可访问性（例如，屏幕阅读器可以识别语义标签）
- 改善搜索引擎优化（SEO）。
- 提高代码的可读性和可维护性。
3.解释 alt 属性的作用，为什么对图片使用 alt 属性非常重要？
alt属性用于为图像提供替代文本，图像无法加载时，会显示该文本。- 对于提高网页的可访问性非常重要，尤其是对于视觉障碍者，他们使用屏幕阅读器时，
alt文本能够描述图片的内容。
4.清除浮动有哪些方式
-
使用clearfix
-
需要在浮动元素的父元素中添加clearfix类，然后通过该类设置clear:both属性来清除浮动。示例代码如下：。
<div class="clearfix"> <div class="float-left">左浮动元素</div> <div class="float-right">右浮动元素</div> </div>.clearfix::after { content: ""; display: table; clear: both; } .float-left { float: left; } .float-right { float: right; }
-
-
使用空元素添加clear属性
-
在浮动元素的父元素中添加一个空元素，然后使用clear属性来清除浮动。示例代码如下：
<div class="clear-float"> <div class="float-left">左浮动元素</div> <div class="float-right">右浮动元素</div> <div style="clear: both;"></div> </div>
-
5.水平垂直居中的实现方式
-
使用相对定位、绝对定位和transform属性：
-
将父容器设置为相对定位，然后将子容器设置为绝对定位，通过设置left和top为50%，再使用transform属性将内容向左和向上平移50%的宽度和高度，从而实现水平垂直居中对齐。
<div class="container"> <div class="centered"> <!-- 内容 --> </div> </div> .container { position: relative; } .centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
-
-
使用Flexbox布局：
-
将父容器设置为Flex布局，并使用justify-content: center;和align-items: center;属性使内容在水平和垂直方向上都居中对齐。
<div class="container"> <div class="centered"> <!-- 内容 --> </div> </div> .container { display: flex; justify-content: center; align-items: center; }
-
-
使用Grid 网格布局：
.parent { display: grid; place-items: center; /* 水平和垂直都居中 / height: 100vh; / 或者其他需要的高度 */ } -
第四中使用line-height 适用于单行文本：
.parent { line-height: 100vh; text-align: cente }
6.vw和vh
在CSS中，vw（Viewport Width）和vh（Viewport Height）是相对于视口大小的单位。
-
vw：1vw等于视口宽度的1%。例如，如果视口的宽度是1000px，那么1vw就等于10px。
-
vh：1vh等于视口高度的1%。例如，如果视口的高度是800px，那么1vh就等于8px。
vw 和 vh 单位的用途是根据设备的视口大小（即浏览器窗口大小）来调整元素的尺寸。这对于创建响应式布局非常有用，可以使元素在不同设备和窗口尺寸下保持一致的比例。
7.rem，em，px
在CSS中，rem、em和px都是用于指定元素大小的单位。
-
rem（根元素相对单位）
- rem单位是相对于根元素（即元素）的字体大小的单位。如果根元素的字体大小为16px，则1rem等于16px。rem单位的主要优势是能够根据根元素的字体大小进行自适应调整，适用于响应式设计。
-
em（相对父元素单位）
- em单位是相对于最近的父元素的字体大小的单位。如果父元素的字体大小为16px，则1em等于16px。em单位与rem单位不同之处在于，它是根据父元素的字体大小而不是根元素的字体大小进行计算的。因此，em单位也可以用于实现相对父元素的布局。
-
px（像素单位）
- px单位是像素单位，1px表示屏幕上的一个物理像素，不受其他因素影响。px单位是固定大小的单位，无法根据用户设置进行调整。由于设备显示的物理像素不同，使用px单位可能导致在不同设备上显示不一致的问题。
-
总结：
-
rem单位根据根元素的字体大小进行调整，适用于响应式设计。
-
em单位根据父元素的字体大小进行调整，适用于相对布局。
-
px单位是固定的像素单位，不受其他因素影响，适用于精确布局。
8.块级元素和内联元素
-
块级元素
- 块级元素通常会在页面中生成一个独立的块，占据一行或者多行的空间。
- 常见的块级元素有
<div>,<p>,<h1>-<h6>,<ul>,<li>,<table>,<form>等。
-
内联元素
- 内联元素不会在页面中生成一个独立的块，而是与其他元素在一行显示。
- 常见的内联元素有
<span>,<a>,<strong>,<em>,<img>,<input>,<br>等。
9.CSS 选择器的优先级规则
- CSS 的优先级规则是
!important> 内联样式 > ID 选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器
10.CSS 中的 position 属性的不同值及其含义
static：默认值，元素按照正常的文档流进行排列。relative：相对定位，元素相对于其正常位置进行偏移。absolute：绝对定位，元素相对于最近的已定位的祖先元素定位。
-fixed：固定定位，元素相对于浏览器窗口定位，即使页面滚动，元素也会保持固定位置。sticky：粘性定位，元素在滚动时会保持相对位置，直到达到某个偏移量为止。
11.CSS 中的 z-index 属性及其工作原理
z-index属性控制元素的堆叠顺序，数值越大的元素会覆盖数值较小的元素。- 只有在元素的
position为relative、absolute、fixed或sticky时，z-index才起作用。
12.box-sizing 的不同值是什么？有什么区别？
content-box：默认值，width和height只包含内容区域，不包括padding和border。（标准盒模型，默认值）
总占用空间 =width/height+padding+border+marginborder-box：width和height包括内容区域、padding和border。（IE 盒模型(怪异盒模型)，包含padding和border）
总占用空间 =width/height+margin
二、JS
- 深拷贝与浅拷贝
-
浅拷贝
-
浅拷贝只复制对象的第一层属性。这意味着，如果原对象或数组中的值是基本类型（如数字、字符串、布尔值等），那么新对象或数组中的对应值是独立的副本。但是，如果原对象或数组中的值是引用类型（如对象、数组等），那么新对象或数组中的对应值只是指向原引用的一个新引用。
-
例如，有一个对象
obj1 = { a: 1, b: { c: 2 } }，对其进行浅拷贝得到 obj2。此时，obj1.a 和 obj2.a 是独立的副本，但 obj1.b 和 obj2.b 指向同一个对象。如果修改 obj1.b.c 的值，obj2.b.c 的值也会随之改变。 -
实现方式
（1）使用展开运算符const oldObject = { name: 'John', age: 30, hobbies: ['reading', 'coding'] }; const newObject = {...oldObject }; console.log(newObject );在这个例子中，使用展开运算符创建了一个新的对象newObject，它包含了与oldObject 相同的属性。但是，如果修改 oldObject .hobbies，newObject.hobbies也会受到影响，因为它们指向同一个数组。
（2）使用 Object.assign() 方法const oldObject= { name: 'John', age: 30, hobbies: ['reading', 'coding'] }; const newObject= Object.assign({}, oldObject); console.log(newObject);Object.assign() 方法将源对象的所有可枚举属性复制到目标对象，并返回目标对象。同样，如果修改oldObject .hobbies，newObject.hobbies也会受到影响。
（3）手动复制属性
-
-
深拷贝
-
深拷贝会递归地复制对象的所有层级，包括嵌套的对象和数组。这意味着深拷贝创建的新对象与原对象完全独立，任何对原对象的修改都不会影响到新对象，反之亦然。
-
继续以上面的例子，对 obj1 进行深拷贝得到 obj3。此时，obj3 是一个全新的对象，它的所有属性包括嵌套的对象都是独立的副本。修改 obj1.b.c 的值不会影响 obj3.b.c 的值。
-
实现方式
（1）使用 JSON.parse () 和 JSON.stringify ()const oldObject = { name: 'John', age: 30, hobbies: ['reading', 'coding'] }; const deepCloneObject = JSON.parse(JSON.stringify(oldObject )); console.log(deepCloneObject);这个方法将对象转换为 JSON 字符串，然后再将 JSON 字符串转换回对象。这样可以创建一个完全独立的副本。但是，这个方法有一些限制，例如它不能处理函数、正则表达式、日期对象等特殊类型的值。
（2）使用递归函数
（3）使用JavaScript库 -
-
2.闭包
function a(){
var n =0;
function b(){
n++;
console.log(n);
}
这里b函数访问了构造函数a里面的变量，所以形成了一个闭包
因为我们想要持续的使用一个变量，放在全局中会造成全局污染，放在函数中，函数执行完后会销毁，变量也随之销毁，因此需要使用闭包。
扩展：闭包函数是在window作用域下执行的，也就是说，this指向windows
缺点 ： 内存泄露问题， 所以不能滥用闭包。
3. 作用域链
作用域链（Scope Chain）是一个由多个作用域组成的链式结构，它决定了在某个上下文中，变量如何被查找。每当你访问一个变量时，JavaScript 会从当前作用域开始查找，如果找不到，它会依次查找上层的作用域，直到找到该变量或到达全局作用域为止。
每个函数都有自己的作用域 保证了变量对象的有序访问。
比如
函数A 里有函数B 函数B 里有函数C
当函数c 里边访问一个变量 先去自己的作用于找 没有的话往上一级找 没找到 直到 window
扫一扫
25万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
