Ladies and gentlemen，从今天开始，阿传将持续更新“前端面试题”系类文章。

废话不多说，直接上干货

---

1、前端页面有哪三层构成

前端页面分为结构层（HTML）、样式层（CSS）、行为层（JS），他们的作用如下：

1、结构层：用来定义页面的内容结构，可以告诉浏览器页面是什么样子。

2、样式层：用来对结构层的内容进行装饰，使页面更加美观。

3、行为层：用来执行逻辑行为，使页面可以对用户的交互做出反馈，或执行复杂的逻辑行为。

---

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

1、行内元素是指不单独占用一行的元素，无法设置宽高，常见的行内元素有：

<a> <span> <img> <b> <em> <strong> 等

2、块级元素是指需要单独占一行的元素，可以设置宽高，常见的块级元素有：

<div> <p> <ul> <ol> <il> <table> <from> <h1>~<h6>等

3、空元素是指没有内容的元素，通常用来描述结构使用，常见的空元素有：

<hr>（水平线） <br>（换行） <img>（图片，当src属性设置为空时）

---

3、怎么解决2个行内块元素中间的空白

产生原因：元素被当成行内块进行排版的时候，元素之前的空格、换行符会被浏览器进行处理。根据white-space的默认规则，这些空格、换行符会被处理成一个空字符，这就导致了出现空白。解决方法如下：

1、手动删除元素之间的空格或换行符（不推荐）

2、将其父元素的font-size属性设置为0（推荐）

---

4、页面导入样式时，使用link和@import有什么区别

两者的区别主要在于加载顺序、权重关系、所属关系和兼容性：

	加载顺序	权重关系	所属关系	兼容性
link	和HTML标签一起加载 多个link标签之间按照顺序加载	高	HTML标签	没有兼容问题
@import	在CSS样式文件加载时加载 根据其在CSS文件中的位置决定加载时机	低	CSS语法	不兼容IE5以下

---

5、iframe的优点和缺点

优点：

1、内容更丰富：使用iframe标签可以嵌入其他源或服务器的内容，让页面更丰富

2、操作独立性：使用iframe标签嵌入的内容与当前页面相互独立，他们之前的交互不会相互影响

3、方便使用：只需要一个标签就能方便的展示其他内容

缺点：

1、潜在的性能问题：如果同一个页面中引入多个iframe标签，可能会引起性能问题

2、潜在的安全问题：如果不慎引入不安全的源，可能引起安全性问题，例如点击劫持

---

6、对 HTML 语义化的理解

语义化是指用适当的标签来描述页面内容的结构和含义。语义化可使代码的可读性更好、结构更加清晰，有利于团队的开发和维护；可使屏幕阅读器等辅助技术更好的理解页面结构，准确的表达出页面结构；可以使SEO性能更佳。

---

7、HTTP的几种请求方法

1、GET请求：用来获取服务器的信息，获取到的是头部、资源等全部信息

2、HEAD请求：用来获取服务器的信息，获取到的是头部信息

3、POST请求：用来向服务器发送信息

4、PUT请求：用来向服务器更新信息，更新服务器上的部分信息

4、PATCH请求：用来向服务器更新信息，更新服务器上的部分信息

5、DELET请求：用来删除服务器上的信息

---

8、前端优化SEO的方法

1、正确的使用title、description，keywords，搜索引擎会按照这个顺序权重逐个减小

2、更好的语义化标签和W3C语法的使用，有利于页面被更好的理解

3、少用iframe标签，避免页面变得复杂

4、提网站的加载速度

5、除了纯背景以外，所有的img标签都需尽量增加alt属性

---

9、script标签中defer和async的区别

用于控制JavaScript脚本的执行顺寻和时机：

	加载顺序	执行顺序	执行时机	使用场景
defer	按顺序加载	在HTML加载完成后按顺序执行	在HTML加载后立即执行	脚本不依赖DOM
async	同步加载	在脚本加载完成之后按照顺序执行	在脚本加载后立即执行	脚本依赖DOM

---

10、Canvas和SVG区别 

1、canvas：一种通过JavaScript来实行2D图形的语言，逐像素进行渲染，当位置发生变化的时候，就会重新渲染。

2、svg：一种通过XML来实现2D图形的语言，通常用于绘制矢量图形