前端面试题（超全！）

一、HTML考题（8题）

1. 前端页面有哪三层构成，分别是什么？作用是什么？

// 前端三层构成：
有三层，分别是：html、css、js，那html为dom，css是样式，js是交互

// 浏览器进程模型：
（1）浏览器是一个大进程，中包含多个进程，进程中也有很多线程。
（2）那么就拿html和css来说，是靠GUI来渲染的，那么如果要避免回流重绘，
     需要靠GPU进程完成，这样性能会好。
（3）js是靠渲染进程的渲染主线程工作的。其中包含：事件执行线程、定时器线程等等。
     而且JS线程和GUI渲染线程互斥，所以就有了js脚本的异步加载操作。

2. 行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

 1. 行内元素：只有宽度，高度随文字大小。
    例如：、、、、、 等。
 ​
 2. 块级元素：可以设置宽高，独占一行。
    例如：
、
、
~
、
、
、
、、 等。
 ​
 3. 单标签，它们不包含任何内容，但可以有属性。它们通常用于定义结构，不会影响布局。
    例子有：
、
、、等。
 
   
3. 怎么解决2个行内块元素中间的空白
 
  
问题描述： 
原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
 解决方案：
// 方案1：父元素设置font-size:0px（推荐）。



  
  


// 方案2：脱离文档流。
 
   
4. 页面导入样式时，使用link和@import有什么区别？
 
  
1.加载顺序不同：
    link会先加载，多个link按书写顺序加载。 
    @import会在当前页面加载完成后才加载。

2.权重不同：
    link的权重 > @import的权重

3.从属关系不同：
    link 属于 HTML 标签，而 @import 是 CSS 提供的。

4.兼容性问题：
    link 没有兼容性问题，@import 不兼容 ie5 以下。
 
   
5. title与h1的区别、b与strong的区别、i与em的区别？
 
  
 title和h1的区别：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么。
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么。

区别：title他是显示在网页标题上、h1是显示在网页内容上，
      title比h1更重要，用于seo优化。

场景：h1包裹logo。
b和strong、i和em的区别： 
区别：b、i只有功能，没有语义； 
     strong、em不仅有功能，也有语义。

题外话：为了符合css3的规范，b尽量少用，改用strong就行了。
 
   
6. img标签的title和alt有什么区别？
 
  
区别1：title是鼠标移入时显示的提示内容，
       alt是图片没加载出来时显示的提示内容。

区别2：alt用于seo优化(alt > title)。
 
   
7. png、jpg、gif 这些图片格式解释一下，分别什么时候用？
 
  
一、png：
	特点：png格式支持无损压缩，同样尺寸情况下，体积要比jpg/jpeg的大。
	适用场景：png格式适合保存，需要保持高质量细节和透明背景的图像，如图标、线条图、文字、Logo 等。
	
二、jpg：
	特点：jpg格式支持有损压缩。
	适用场景：jpg式适合保存照片、图像和艺术作品等真实场景图像，常用于网站上发布的照片、背景图等。

三、gif：
	特点：gif格式支持无损压缩和动画功能，能够保存多帧图像并以动画形式显示。
	适用场景：gif格式适合保存简单的动画、图标、表情包等图像。适用于网页上的小型动画、简单图标等。

四、webp：
	特点：webp是一种由 Google 开发的图像格式，支持有损压缩和无损压缩，通常比 PNG 和 JPG 文件大小更小，同时保持较高的图像质量。它还支持动画和透明度。
	适用场景：webp格式适合用于网站优化和速度提升，可以帮助减小图像文件大小，提高网页加载速度。特别适合用于要求高速加载和移动设备访问的网页，可以有效减少网页加载时间。

五、总结：
	PNG 适合保存高质量细节和透明背景的图像
	JPG 适合保存照片和真实场景图像；
	GIF 适合保存简单的动画和图标；
	WebP 适合用于网站优化和速度提升，特别适合要求高速加载和移动设备访问的网页（存在兼容性）。
 
   
8. iframe的优点和缺点？ 
 
  
 iframe的优缺点：
​​​​​​​// 什么是iframe?
用于嵌入另一个 HTML 文档或外部资源（如网页、视频、地图等）到当前页面中。

// 优点：
（1）