前端面试题

html

1.什么是html标签语义化

语义化的主要目的就是让大家直观的认识标签和属性的作用。比如article、header、footer、section等等

2.标签alt和title的属性的区别是什么

title的优先级大于alt，无论图片是否显示正常，分别设置title和alt时，鼠标悬停于图片上，则显示各自的文本，同时设置时，只显示title的文字描述。

3.iframe的优缺点

(1). iframe能够原封不动的把嵌入的网页展示出来。

(2). 如果有多个页面引用iframe，那么只需修改iframe的内容，就可以实现每一个调用页面的修改，方便便捷。

(3). 网页有时为了统

一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，增加代码的复用性。

(4). 如果遇到一些加载缓慢的第三方内容，例如广告和图标等，可以用iframe来解决。

缺点：

(1). 会阻塞主页面的onload() 事件<onload事件会在页面和图像资源加载完成时触发>

(2). 不利于搜索引擎识别

.(3). 会增加服务器的http请求，不建议大型网站大量使用

4.html5新特性

1.语义化标签：header nav article section aside footer

2.谋体标签： video source audio

3.canvs svg geolocation

4. localstorage sessionStorage

5.history go forward back pushstate

css

1.flex布局

父元素设置display：flex，称为容器，所有的子元素称为项目，设置后， float clear vertical-align属性失效

容器的六个属性：

1.flex-direction：row row-reverse column column-reverse 定义主轴的方向

2.flex-wrap: nowrap wrap wrap-reverse 定义主轴元素已满后，是否换行

3.flex-flow:row nowrap 前面两大属性的简写形式

4.justify-content: flex-start flex-end center space-around space-between 定义项目在主轴的对齐

5.align-items:flex-start flex-end center baseline stretch 定义项目在辅轴上的对齐方式

6.align-contend: flex-start flex-end center baseline space-around space-between 30..00 当多条轴线时，定义在辅轴的对齐方式

项目的六个属性：

1.order： 定义项目的排列顺序

2.flex-grow: 定义项目的放大比例，默认为0，有剩余空间也不放大；为1时，平均分配空间

3.flex-shrink: 定义项目的缩小比列，默认为1，空间不足时缩小

4.flex-basic：分配剩余空间之前项目占据主轴的大小，默认为auto

5.flex: 以上三个属性的简写，默认为0 1 auto

6.align-self: auto flex-start flex-end center baseline stretch 定义单个项目在辅轴的对齐方式

2.介绍一下css的盒子模型

盒子模型是由content padding border margin组成，还有height weight两个辅助属性

3.设置垂直居中的几种方式

1.行内元素，设置父元素的height和line-height相等

2.行内元素，设置vertical-align：middle和line-height

3.文本，设置flex的justify-content：center和align-item：center 来居中

4.定位，父元素设置宽高100%，相对定位 ， 子元素上下左右设置为0，margin：auto

5.定位，父元素设置高度100%，相对行为；子元素高宽一定，top：50%,left:50% transform:translate(-50%,-50%) 

4.rgbahe和opacity的透明效果有什么不同

opacity的效果是作用于元素，以及元素内所有内容的透明度，取值0到1

rgba的效果作用于元素的颜色或背景色，子元素并不会继承透明效果，取值0到1

5.display的四种定位

static：默认值，固定不动

relative：相对定位，相对于其本身在普通文档流中的位置进行定位

absolute：绝对定位，相对于距离其本身最近的开启了相对定位的祖先元素进行定位

fixed：固定定位，相对于窗口，也就是浏览器左上角进行定位的

6.css3新特性

1. 圆角 border-raduis 阴影：box-shadow

2. 过渡：transition property duration timing-function

3. 动画： animation keyframs

4. 变换： tranform translate-定位 rotate-旋转 scale-缩放 skew-倾斜

5. 渐变： gradient linear-gradient

6.背景：image cilp origin repeat size

7.css选择器 子选择器 副选择器 兄弟选择器 属性选择器 伪类选择器 nth选择器 伪元素

7.BFC是什么

w3c对于bfc的定义 浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow:

不为默认值visible的块级盒子，都会为它们的内容创建BFC

BFC就是一块单独的容器，他有自己的渲染规则，里面的元素不会影响到外面的元素

8.·

 javascript

1.js的数据类型

string number boolean null nudefined symbol bigint

引用数据类型 object

2.判断数据类型的方法

typeof instanceof object.property.toString.call（）

3.null和nudfined的区别

null：定义了值，但是没有指向任何对象

nudefined：值未定义，根本不存在，在内存中不存在这个标识符所指向的地址

4.箭头函数的特点 

1. 不需要function关键字来创建函数

2. 它省略了return关键字 

3.它改变了this指向，普通函数指向函数本身，箭头函数不绑定this，捕获上下文的this

4.它是匿名函数，不能作为构造函数使用，不能使用new关键字

5.不能绑定arguments，使用rest参数解决

6.没有原型对象prototype这个属性

5.new操作符具体做了什么

1.创建一个新的空对象

2.新对象与构造函数通过原型链进行连接

3.绑定this值到新对象

4.根据返回值的类型做判断，如果是值，则返回新的对象；如果是引用类型，则返回这个引用类型的对象

6.document.write 和 innerHtml的区别？

1.document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。

7.什么是ajax过程？

1.创建XMLHttpRequest对象，也就是创建一个异步调用对象

2.创建一个新的http请求，并指定http请求的url 方法 和 验证信息

3.发送http请求

4.获取异步调用返回的数据

5.使用js和dom实现局部刷新

8.解释一下js的同源策略

是js的重要安全标准，目的是阻止某个文档或脚本从多个不同源转载

同源指的是 协议 域名 端口

9.介绍一下闭包以及其作用

闭包是什么https://blog.csdn.net/hanyanshuo/article/details/127382363

闭包是指有权访问另一个函数内部变量的函数

闭包是有自己的独立的环境和表达式的函数

应用场景：闭包的几种使用场景总结https://blog.csdn.net/LTT1995/article/details/109593352