前端HTML CSS基础面试题
## html5的新特性1.自定义属性 data-id2.语义化标签3.音频，视频4.画布 Canvas5.地理API6.本地离线存储7.表单控件data time email url search number## CSS3新特性1.文字阴影(text-shadow)2.边框:圆角(border-radius) 边框阴影: box-shadow;3.盒子模型: box-sizing;4.背景:b
·
## html5的新特性
1.自定义属性 data-id
2.语义化标签
3.音频，视频
4.画布 Canvas
5.地理API
6.本地离线存储
7.表单控件 data time email url search number
## CSS3新特性
1.文字阴影(text-shadow)
2.边框:圆角(border-radius) 边框阴影: box-shadow;
3.盒子模型: box-sizing;
4.背景:background-size background-origin
5.渐变：linear-gradient radial-gradient
6.过渡: transtion 可实现动画
7.媒体查询多栏布局
8.border-image
9.2D转换 transform translate(x,y) rotate(x,y)skew(x,y)scale(x,y)
10.3D转换
11.字体图标 font-face
12.弹性布局
## 什么是弹性布局？？
flex布局，是HTML5中新出的布局方式，主要替换传统的float布局。
设置弹性布局：display: flex;
设置元素为弹性布局时，会影响其子元素的排列方式，会使块级元素不再独占一行。
使用布局之后，其子元素无论多少都会在一行显示。
设置布局方向：flex-direction: row;
row；默认的，按照从左至右的顺序排列，类似左浮动。
row-reverse：按照从右至左的顺序排列，类似右浮动。
column：从上至下的顺序排列，类似正常文档流。
column-reverse：从下至上的顺序排列.
设置内容对齐方式：justify-content: ;
center：根据设置的布局排列方向进行居中对齐。
flex-start：对齐开始的位置。
flex-end：对齐结束的位置。
space-around:元素之间的距离等分。左右两边留白，左右两边的距离是元素之间距离的一半。
space-between：左右两边不留白，元素之间的距离等分。
设置换行：flex-wrap: wrap;
flex布局默认不能折行，设置换行之后子元素会从超出父元素的元素进行折行。
删除和隐藏元素的方式：
display: none; 删除元素，不占据原来的位置
visibility: hidden; 影藏元素，还占据原来的位置
## localStorage sessionStorage cookie 之间的区别
### 共同点
都保存在浏览器端 且同源
### 区别
cookie数据在浏览器和服务器之间来回传递；而localStorage sessionStorage不会自动把数据发送给服务器
### 储存的大小
cookie储存只有4k；
localStorage 能够长期存储 出口或者浏览器关闭之后依然处在 用于持久数据
sessionStorage 仅在浏览器窗口关闭之前有效
### 作用域
sessionStorage 不在不同的浏览器窗口中共享，即使是在同一个页面；
localStorage 和 cookie 在所有同源窗口中都是共享的；
## 盒子的垂直水平居中
1、定位
2、margin:auto
3、display:table-cell 表格
4、display:flex 弹性布局
5、transform
## 盒子模型
标准盒子模型：宽度=内容的宽度（content）+ border + padding
IE盒子模型：宽度=内容宽度（content+border+padding)
## display:none 和 visibility: hidden的区别?
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
## link 和@import 的区别
1、link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载（并行），而@import引用的CSS会等到页面被加载完再加载（串行）
2、import只在IE5以上才能识别，而link是HTML标签，无兼容问题
3、link方式的样式的权重 高于@import的权重.
## HTML 标签的分类
1.结构标签: 定义和组织文档结构 标题 列表 段落 <h1> <p> <ul> <li>
2.样式标签: 设置文本和元素样式 字体 颜色 大小等 <b> <i> <u> <span>
3.链接标签: 创建链接到其他网页或者资源的链接 <a>
4.图像标签: 插入图像到网页中 <img>
5.表格标签: 用于创建格式化表格 <table> <ul> <li>
6.表单标签: 创建表单 用于用户输入和提交数据 <from> <input> <button>
7.多媒体标签: 用户嵌入和控制多媒体内容 音频和视频 <audio> <video>
8.其他标签: 用户特定的目的 <head> <body> <div>
## 块级元素 行内元素
### 块级元素--特点
div、ul、li、dl、dd、dt、p、h1-h6
块级元素独占一行 其宽度自动填满父元素宽度
### 行内元素
a、 span、img、input、button、lable
相邻的行内元素会独占一行 直到一行拍不下 才会换行 其宽度会随着元素的内容变化而变化。
### 一般情况下块级元素可以设置width height属性 行内元素设置 width height无效。
## CSS选择器的优先级？
！import>行内元素>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
## CSS选择器有哪些？ 继承问题
1、ID选择器（#id）
2、类选择器（。myclassName）
3、标签选择器（div、h1）
4、相邻选择器（h1+p）
5、子选择器（ul>li）
6、后代选择器（li a）
7、通配符选择器（*）
8、属性选择器（a[rel='exe]）
9、伪类选择器（a:hover,li:nth-child）
### 继承问题
可以继承的属性：font-size font-family color UL Li DL DD Dt；
不可以继承的问题: border padding margin width height。
## 标签语义化的理解
1、去掉或丢掉样式的时候可以让页面呈现清晰的结构；
2、有利于SEO优化；
3、有利于团队开发维护、使代码更具有可读性；
## SEO性能优化
搜索引擎的优化 百度时更容易搜索到你的东西
### 优化方式
1、网站的title
2、meta标签 description网站的描述；
3、meta标签 keywords关键字
4、语义化标签
5、css js使用外部链接
6、img标签的alt属性 title属性
## 常见的语义化标签
<header>文档的头部区域
<section>标签对定义了文档中的节
<footer>文档的底部内容
<aside>页面主区域内容之外的内容
<artcile>独立的内容
## CSS和@import的区别？？
### 适用范围
@import可以在网页中使用 也可以在css文件中使用 用来将多个css文件引入到一个css文件中；
link只能将css文件引入到网页页面中；
### 兼容性
@import 只在IE5以上才能识别
link标签 无此问题
### 权重
link引入的样式权重大于@import
## display:none visibility:hidden的区别？
display:none 设置之后 该元素下的元素都会隐藏 占据空间消失 引起回流
visibility 具有继承性 子元素也会继承此属性 若设置visibility:visible则子元素会显示 会引起重绘；
## 页面的重回和回流？
当render的一部分或者全部的元素因改变自身宽度，布局，显示或者隐藏元素结构发生变化，导致需要重新构建页面的时候 就产生了回流；
重绘 当一个元素自身的宽度 布局 及显示或隐藏没有改变 而只是改变了元素的外观 就产生了回流
### 回流必定会触发重绘 重绘不一定触发回流。
## position定位？
posiition 定位布局使用 基于某个元素进行定位；
### position：relative 相对定位
基于自身的位置进行定位 不会导致元素脱离文档流
### position：absolute 绝对定位
进行定位时会先往自己的父级一级一级往上查找 看有没有其他定位属性 如果有那么就基于这个上级元素进行定位；如果所有的上级都没有 就急于body定位 脱离文档流；
### position：fixed 固定定位
基于窗口浏览器定位 会使元素脱离文档流；
### position：sticky 粘性定位
基于窗口定位 但是他这个定位位置只有在父级元素消失在窗口的时候才会显示出来。
## CSS单位中 px 、 rem 、 em 的区别？
1、px 像素 绝对单位 像素基于 显示器屏幕分辨率而言
2、em 相对长度单位 相对与当前对象文本的字体尺寸
3、rem CSS3 新增的一个相对单位 使用rem为元素设定字体大小时 仍是相对大小 相对于HTML根源素；
## 雪碧图（精灵图）？
把网站上用到的一些人图片整合到一张单独的图片中 从而减少网站的http请求；图片是在css中定义的
### 优点
1、减少网页的http请求 加快页面加载速度；
2、减少图片的体积；
3、解决了图片的命名困扰，只需要对一张集合的图片上明明就可以了；
### 缺点
1、在高分辨率的屏幕下的自适应页面 如果图片不够观 很容易出现背景断裂
2、维护较为麻烦，如果背景需要改动 一般就要改动这张合并的图；
3、精灵图不能随意改变大小和颜色；
## 伪类和伪元素的区别
是否创建了新元素
伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
## BFC是什么？
BFC 块级格式化上下文
### 布局规则
1、内部的box会在垂直方向 一个接着一个的放着；
2、BOX垂直方向的距离有margin决定 属于同一个BFC的相邻两个BOXmargin会发生重叠；
3、BFC 类似独立盒子 盒子内的子元素不会影响到外面的元素；
### 哪些元素会生成BFC？
1、根元素
2、float 属性不为none
3、position为absolute fixed
4、display 为 inline-block flex
5、overflow 不为 visible；
## 什么是字体图标？
一种特殊的字体 通过这种字体 显示给用户就像一个个图片一样
好处 不会变形 加载速度快 字体图标可以想文字一样 随意通过CSS控制它的大小和颜色；
## 如何避免图片在网页上失真？
首先查看是否是素材的问题 如果是可以找UI改
如果是前端的问题 需要通过容器尺寸区控制
# js基础
## js数据类型
### 基本数据类型
1、number 类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后至少有一位数字）
2、string
3、boolean
4、null
5、undefined
6、symbol
特点：基本数据类型的值是无法被改变的 任何一个方法都不可以改变一个基本数据类型的值
#### null 和 undefined 区别？？
undefined 表示变量声明但未初始化时的值
null 类型被看做空对象指针，只有一个值，即null值，所以在用typeof操作符去检测null类型的值得时候，结果是object类型
### 引用数据类型
引用数据类型也就是对象数据类型object，比如：object、array、function、data等；
引用类型的值可以改变：
## 判断js数据类型
1.typeof
2.instanceof
3、constructor
4、Object.prototype.toString
## instanceof 和 typeof 的区别
相同点： 都常用来判断一个变量是否为空，或者是什么类型的。
不同点：typeof 返回值是一个字符串，用来说明变量的数据类型。
instanceof 用于判断一个变量是否属于某个对象的实例。
## 闭包
能访问其他函数内部变量的函数。
这些变量的值始终保持在内存中 不会再外层函数调用后背自动清除
在函数的内部可以访问全局变量，但是在函数的外部无法访问函数内部的局部变量。 有时候我们需要获取函数内部的局部变量，此时就要使用到闭包。 做法就是在函数内部再定义一个函数，这个函数就可以访问外部的变量，之后我们再把内部函数作为外部函数的返回值，这样就可以在外部函数中读取到局部变量了。 闭包就是定义在一个函数内部的函数，是连接内外函数的桥梁。
### 优点
变量长期驻扎在内存中
减少全局变量的污染
### 特性
1、函数嵌套函数
2、内部函数可以直接使用外部函数的局部变量或参数
3、变量或者参数不会被垃圾回收
### 缺点
1、常驻内存会增大内存的使用量，使用不当会造成内存泄漏。
### 闭包的使用场景
1、返回值
2、函数赋值
3、函数参数
4、自执行函数
5、循环赋值
6、getter setter
7、迭代器
8、首次区分
9、缓存
### 什么是内存泄露
内存泄漏指任何对象在不再拥有或需要它之后仍然存在
setTimeout 的第一个参数使用字符串而非函数的化 会造成内存泄漏
## 原型 原型链
### 原型
指的是显式原型prototype和隐式原型__proto__
每一个函数都有prototype属性
### 原型链
当访问一个对象的某个属性时，会现在这个对象本身属性上查找，如果没有找到则会去他的隐式原型__proto__上去找
即它的构造函数prototype 如果没有找到就会在构造函数的peototype的__proto__中去找 这样一层一层的找就会形成一个链式结构我们成为原型链
## js的继承
1、原型链继承
2、借用构造函数继承
3、组合继承
4、型式继承
5、寄生式继承
6、寄生组合式继承
## Data 为什么是一个函数
vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态
## js中数组的方法
1、push()返回数组中元素的个数，向数组尾部中增加元素，有多少加多少，原数组发生改变
2、pop()从数组的尾部删除一个元素，返回这个删除的元素，不接收参数
3、unshift()返回数组中元素的个数向数组的头部增加元素，括号中有多少就加多少，原数组发生改变
4、shift()从数组的头部删除一个元素，返回这个删除的元素，不接收参数
5、slice(start,end)截取数组，不会修改当前数组
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
6、splice（）可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
7、reverse() 数组翻转，该方法会改变原来的数组，而不会创建新的数组
8、sort()//无参数默认从小到大排序 回调方法（a,b）=>b-a可将数组安装从大到小排序
9、concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组。
10、join(’-’) //将数组转化为为字符串，以括号内的拼接
```
1 <script>
2 var arr =new Array(1,2,3,4,5,6,7,8,9);
3 //push()返回数组中元素的个数，向数组尾部中增加元素，有多少加多少，原数组发生改变。
4 var length=arr.push(10)
5 console.log(arr)//[1,2,3,4,5,6,7,8,9,10]
6 console.log(length)//10
7
8
9 //pop()从数组的尾部删除一个元素，返回这个删除的元素，不接收参数
10 arr.pop()
11 console.log(arr)//[1,2,3,4,5,6,7,8,9]
12 arr.unshift(0)//返回数组中元素的个数向数组的头部增加元素，括号中有多少就加多少，原数组发生改变
13 arr.shift()//从数组的头部删除一个元素，返回这个删除的元素，不接收参数
14 arr.slice(4)//从下标为4的开始截取，直至数组结束
15 arr.slice(0,2)//从下标0开始截取，到下标2结束，不包含下标2的数，此方法原数组不变
16 arr.splice(4)//一个参数，从下标4对应的位置开始删除，直到数组结束,返回被删除后的项目 arr=[0,1,2,3]
17 arr.splice(4,2)//两个参数从下标为4开始，第二个参数删除的长度 arr=[0,1,2,3,6,7,8,9]
18 arr.splice(4,2,10,20);//三个及三个以上的参数。从下标为4的位置开始删除，删除两个元素，并用10,20替换 掉删除的元素。 arr=[0, 1, 2, 3, 10, 20, 6, 7, 8, 9]
19 arr.reverse()//数组翻转，该方法会改变原来的数组，而不会创建新的数组 [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
20 arr.sort()//无参数默认从小到大排序，判断方式：按位判断
21 arr.sort(function(a,b){//从大到小排序
22 return b-a;
23 })
24 var arr1=[11,12]
25 var arr3=arr1.concat(arr,33,44)//将arr1,arr,33,44拼接为一个新的数组，用arr3接收
26 arr.join('-') //将数组转化为为字符串，以括号内的拼接
27 </script>
```
## 数组遍历的方法
1、for循环
```
//使用变量缓存临时数组
for(i=0;i<arr.length;i++)
{
//执行代码块
console.log(i)
}
```
2、forEach循环
```
//遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE
arr.forEach((item,index,array)=>{
//执行代码
item+=1;
})
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
```
3、map循环
```
//map的回调函数中支持return返回值
arr.map(function(value,index,array){
//执行代码
return xxx
})
```
4、for..of遍历
```
//可以正确响应break、continue和return
for (var value of myArray) {
console.log(value);
}
```
5、filter遍历
```
//不会改变原始数组，返回新数组
var arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))
//ES5
arr.filter(function (item) {
return item.done;
});
var arr = [73,84,56, 22,100]
var newArr = arr.filter(item => item>80) //得到新数组 [84, 100]
console.log(newArr,arr)
```
6、every遍历
```
//every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
结果：false
```
7、some遍历
```
//some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.some( function( item, index, array ){
return item > 3;
}));
true
```
8、find()
```
//find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
var stu = [
{
name: '张三',
gender: '男',
age: 20
},
{
name: '王小毛',
gender: '男',
age: 20
},
{
name: '李四',
gender: '男',
age: 20
}
]
function getStu(element){
return element.name == '李四'
}
stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}
```
9、findIndex
```
//对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。
//只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值
//如果数组中没有任何元素返回 true，则 findIndex 返回 -1。
//findIndex 不会改变数组对象。
[1,2,3].findIndex(function(x) { x == 2; });
// Returns an index value of 1.
[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.
```
10、keys，values，entries
```
//ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。
//它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
```
## 数组中map forEach区别？
### 相同点
1、都是循环遍历数组中的每一项
2、forEach map 每次执行匿名函数都支持3个参数 参数分别是 item(当前的每一项)index(索引值)arr(原数组)
### 不同点
#### map
1、map方法返回一个新的数组 数组中的元素为原始数组调用函数处理后的值；
2、map不会对空数组进行检测 map不会改变原始数组；
#### forEach
1、forEach方法用来调用数组的每个元素 将元素传给回调函数；
2、forEach对于空数组是不会调用回调函数的 无论arr是不是空数组，forEach返回的都是 undefied 这个方法只有将数组中的每一项作为callback的参数执行一次；
## 数组中 map 和 forEach 的区别？
### 相同点
1、都是循环遍历数组中的每一项；
2、forEach 和 map 方法里每次执行匿名函数都支持三个参数 参数分别是item(当前每一项),index(索引值),arr(原数组)
### 不同
1、map 方法返回一个新的数组， 数组中的元素为原始数组调用函数处理后的值；
2、map 方法不会对空数组进行检测，map方法不会改变原始数组；
3、forEac方法用来调用数组的每个元素 将元素传给回调函数；
4、forEach对于空数组不会调用回调函数；无论arr是不是空数组，forEach返回的都是undefined 这个方法只是将数组中的每一项作为callback的参数执行一次。
## 箭头函数和普通函数之间的区别
1、箭头函数没有prototype属性
2、箭头函数的this指向定义时外层第一个普通函数的this
3、不能直接修改箭头函数的this；
4、当箭头函数外层没有普通函数时，它的this在严格和非严格模式都是指向window；
5、箭头函数没有外层函数直接使用arguments会报错；
6、箭头函数有外层函数时，arguments继承自外层函数的arguments；
7、使用new调用箭头函数会报错；
8、箭头函数没有外层函数时，new.target会报错；
9、箭头函数不支持重名参数；
10、箭头函数语法更具优雅；
## this指向
1、对象中的this 指向该对象
2、构造函数中的this 指向实例化对象
3、事件函数中的this 代表触发事件函数的元素对象
4、箭头函数中的this 始终指向函数声明时所在作用域的this的值
5、匿名函数中的this 都指向window
## call apply bind 三者的区别？
### 相同点
bind、apply、call 都是用来绑定函数执行时this的指向（改变函数执行时的上下文），同时还可以传参，调用它们的对象必须是一个函数 Function。
### 不同点
call() 接受的是若干个参数的列表
apply()接受的是一个包含多个参数的数组
bind()方法的返回值是函数，需要手动调用才会执行，而 apply 和 call 则是立即调用。
## new 操作符 具体步骤？
第一步：创建一个新对象。
第二步：将构造函数的作用域赋给新对象（因此this就指向了新对象）
第三步：执行构造函数中的代码（为这个新对象添加属性）
第四部：返回新对象
## for in 和 for of 的区别？
1、循环对象属性的时候用 for in ,在遍历对象的时候用for of
2、 for..in 循环出来的是key for of 循环的是value
## js中的继承
1、原型继承
2、借用构造函数继承
3、组合继承
4、型式继承
5、寄生式继承
6、寄生组合式继承
## 深拷贝 浅拷贝
深拷贝 拷贝地址
浅拷贝 拷贝值 （解构赋值）
## 一个页面输入URL到页面加载显示完成 这个过程发生了什么？
1、DNS解析
2、TCP连接（三次握手）
3、发送HTTP请求
4、服务器处理请求并返回HTTP报文
5、浏览器解析渲染页面
6、关闭TCP连接（四次挥手）
## get和post请求的区别？
get 一般用于获取数据
get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；
get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；
get安全性较低
get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳
post 一般用于发送数据
post传递参数，需要把参数放进请求体中，发送给服务器；
post请求参数放进了请求体中，对大小没有要求；
post安全性比较高；
post请求不会走缓存；
## http状态码？
### 2开头--成功
1、200 请求成功；
### 3开头--重定向
1、301永久重定向
2、302临时转移
3、304读取缓存
4、临时重定向
### 4开头(客户端)
1、400数据格式错误
2、401权限不够
3、404路径错误找不到文件
### 5开头(服务器端)
1、500服务器端
2、超负荷
## 常见的异步任务
1、定时器
2、ajax
3、事件绑定
4、async await
5、promise
## 作用域链
内部函数访问外部函数的变量 采用的是链式查找的方式来决定取那个值 这种结构成为作用域链
## js事件循环机制
主线程从任务队列中读取事件 这个过程是循环不断的 所以整个的这种运行机制有成为事件循环。
## 同步任务和异步任务？
1、同步任务 在主线程上排队执行的任务，只有前一个任务执行完毕 才能执行后一个任务
2、异步任务 不进入主线程 进入任务队列的任务只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
## 宏任务微任务
宏任务一般是 整体代码的script setTimeout setinterval
微任务包含 Promise
每执行完一个宏任务 会执行完所有的微任务 执行完之后才会执行下一个宏任务
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)