这篇博客详细梳理了前端面试中的高频考点，包括HTML、CSS、JavaScript和Vue.js的相关知识。HTML部分涵盖行内元素、块级元素、行内块元素的区别、script标签的defer和async属性、src和href的区别等。CSS部分讲解了定位、浮动、margin合并问题及BFC布局。JavaScript部分讨论了var、let、const的区别，以及ES6新特性、箭头函数、对象属性和描述符。Vue.js部分则介绍了Vue的基本原理、双向绑定、MVVM模式等。此外，还涉及到了浏览器的离线存储、拖放API、Web Worker、渐进增强和优雅降级等前端核心技术。
摘要由CSDN通过智能技术生成
展开
文章目录
HTML
1、高频1之行内元素、块级元素、行内块元素的区别
2、高频2之script标签中defer和async的区别
3、src和href的区别
4、lable的作用
5、ifram的使用以及有优缺点
6、img的srcset属性
7、head标签的作用
8、对HTML语义化的理解
9、文档类型的作用
10、meta标签的作用
11、HTML5有哪些更新
12、svg和canvas之间的区别
13、常见的drag api
14、HTML5的离线存储(应用程序缓存)
15、title和h1、strong和b、em和i的区别
16、浏览器乱码
17、浏览器的渐进增强和优雅降级
18、前端存储的方式
19、web worker
CSS
1、高频1之说一下你认知的定位
2、高频2之浮动
3、高频3之margin合并的问题
4、高频4之BFC布局
5、高频5之如何进行移动端的适配
6、高频5之display float 和 position之间的关系
7、水平垂直居中的实现
8、两栏布局的实现
9、三栏布局的实现
8、flex布局的理解以及应用场景
10、对盒子模型的理解
JS
js对象属性和描述符object.defineproperty以及proxy
1、ES6有哪些新特性
1.1、var let const的区别
1.2、const对象的属性可以更改吗
1.3、可以new一个箭头函数吗
1.4、箭头函数和普通函数有什么区别？
1.5、箭头函数的this指向哪里？
1.6、对象和数组的解构
1.7、rest参数的理解
5、JS循环事件、微任务宏任务
6、
VUE
1、vue的基本原理
2、双向绑定的原理
3、MVVM MVC MVP分别是什么？
4、computed watcher methods的区别
5、slot是什么？有什么作用？原理是什么？
6、过滤器是什么 有什么作用？
7、如何保存页面的当前状态？
8、常见的事件修饰符
9、v-if和v-show的区别
10、data为什么是一个函数而不是一个对象？
11、keep-alive的理解
计算机网络和浏览器相关的
1、浏览器安全(6.28)
手写代码篇
1、new操作符(6.28)
2、改变函数的this指向的call方法(6.28)
3、改变函数的this指向的apply方法(6.28)
4、改变函数的this指向的bind方法(6.28)
5、图片的懒加载(6.28)
平时学习相关的
1、代码怎么debug
2、代码怎么存放
3、怎么学的前端
HTML
1、高频1之行内元素、块级元素、行内块元素的区别
设置方式：display：block(块级元素)/inline(行内元素)/inline-block(行内块元素)
块级元素：div p h1-h6 ol ul li dl dt dd
行内元素：span a img strong(b) em(i) input select textarea
空元素：没有内容的HTML元素，即没有闭合标签。比如：meta link img input br
区别:块级元素独占一行，另一个块级元素是独占一行,可以设置width height padding margin。行内元素：不会独占一行，多个行内元素是呈现水平排列的，设置width height无效，只能设置水平方向的padding margin，不能设置垂直方向的padding margin。行内块元素：既有块级元素的特点，也有行内元素的特点，可以设置width height padding margin也可以一行放多个元素。
2、高频2之script标签中defer和async的区别
如果没有defer和async属性的话，当解析到script标签的时候，会停止对后续文档的加载，转去加载和执行script对应的脚本文档，这样的话，会阻塞后续文档的加载。加了defer和async的话，可以实现后续文档的加载和当前文档的加载是异步执行的。
不同的是，async不能保证加载顺序，并且后续文档的加载和渲染和js脚本的加载和执行是完全异步的；defer能保证加载顺序，但是后续文档的加载与JS文档的加载是异步的，js文档的执行是要等到后续文档解析完之后再去执行的。
3、src和href的区别
相同点：都是表示对外部资源的引用，
不同点
1>、src表示对资源的引用，它所指向的内容一般会嵌入到当前元素所在的位置，当浏览器解析到该元素的时候，会停止对当前文档的加载和处理，直至对该元素加载 编译 执行完毕，所以一般情况下 js脚本的引用会被放在最后边。
2>、href表示超文本引用，一般指向网络资源，用来建立当前文本和所指向资源的一一对应关系。当浏览器解析到该元素的时候会并行处理该元素和当前文档资源。
4、lable的作用
用来定义表单控件的，当用户点击lable标签的时候浏览器自动聚焦到与lable绑定的表单控件上。
实例：
//使用方法一：
请输入您的姓名：
//使用方法二：
date:
1
2
3
4
5
5、ifram的使用以及有优缺点
ifram元素是一个创建包含另一个文档的内联框架。
常见属性：src height width scrolling(是否有滚动条) IframBorder(是否有边框0是没有 1是有) allowTransparency(是否允许透明)等
优点：
实现跨域通信，实现js脚本的并行加载，用来加载速度较慢的广告
缺点：
会阻塞主页面的onload 事件，产生多个页面，不容易管理。
1
6、img的srcset属性
作用：响应式页面中会根据不同的屏幕密度选择不同的图片，需要用srcset属性来设置。
1
解析：在屏幕密度为 1x 的时候，采用图片 image-128.png，当屏幕密度为 2x 的时候采用图片 image-256.png，但是屏幕密度有 1x 2x 3x 4x，如果给每一张图片都设置四张的话，会增加服务器的加载负担，所以有了下边的 srcset 使用
1
2
3
w为图片质量，当可视区域小于图片质量值的时候，就采用该图片，浏览器会优先选择一张最小的图片。sizes表示图片的临界尺寸，默认情况下是128px，当可视区宽度大于360px的时候，采用 340px的尺寸。
7、head标签的作用
作用：定义文档的头部，描述文档的各种属性和信息。
有哪些：script link meta title style base(比如a标签没有href属性的话默认情况下会使用base里边的内容)
哪些必不可少： title
8、对HTML语义化的理解
就是根据内容的结构化来选择合适的标签，就是用正确的标签做正确的事情。
优点：对开发者友好，能够清晰代码结构，增强代码的可读性。
常见的语义标签有
标签 语义
header 头部
nav 导航栏
aside 侧边栏
section 区块，有语义的div
footer 底部
main 主要区域
article 主要内容
9、文档类型的作用
DOCTYPE:是一个文档类型声明，告诉浏览器当前的文档是以哪个版本的HTML文档写的，这样的话浏览器才能正确的解析执行该文档，模式设置通过document.compatMode，有两种模式CSS1compat和backcompat
CSS1compat:是标准模式，默认模式，是指浏览器按照w3c标准来解析代码。
backcompat：怪异模式或者是混杂模式，浏览器模拟老式浏览器的行为，以一种向后兼容的模式来解析代码，防止老式浏览器无法正常工作。
<!DOCTYPE html> //就是告诉浏览器文档是以HTML5编写的，以标准模式来渲染，不写或者是写错，均按照混杂模式解析。
1
总而言之，标准模式让各个浏览器统一执行一套兼容模式，保证旧网站的正常运行。
10、meta标签的作用
作用：描述网页文档的属性，一般由name和content组成。
常见属性
1>、charset 规定编码方式
1
2>、浏览器渲染
1
告诉浏览器，IE8/9及以上版本的浏览器均以最高IE来渲染页面。http-equiv="X-UA-Compatible"是因为在刚出现IE8浏览器的时候存在页面重构问题，这句代码只对IE8有效就是告诉浏览器在这种情况下只需要在IE6/7下能正常渲染就可以了，不用管最新的IE8。
3>keywords
1
4>、description
1
5>、viewport
1
content 含义
width device-width
height device-height
initial-scale 初始缩放
maximum-scale 最大缩放
minimum-scale 最小缩放
user-scalable 用户自己缩放 yes/no
6>、robots搜索引擎索引方式
content 含义
all 文件被检索，链接可以被查询
none 文件不允许被检索，链接不允许被查询
index 文件允许被检索
noindex 文件不允许被检索
follow 链接允许被查询
nofollow 链接不允许被查询
11、HTML5有哪些更新
1、语义化标签
header nav aside footer section main article
2、媒体标签
视频标签：video
属性 含义
src 视频路径
controls 向用户展示播放控件
autoplay 自动播放
loop 循环播放
muted 静音播放
poster 视频未加载时显示的图片，即第一帧的画面
1
音频标签：audio
属性 含义
src 音频指定来源
controls 向用户展示播放控件
autoplay 自动播放
muted 静音播放
loop 循环播放
1
兼容不同的浏览器指定文件来源标签：source
1
2
3
4
5
6
实现的效果和上边一样
3、新增input表单类型和属性
input表单类型
邮箱：
url:
数字：
手机号码：
颜色：
搜索框：
提交：
时间(时分秒)：
日期(年月日)：
日期时间控件：
周：
月：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
下边是关于时间的控件
点击提交的时候必须按照正确的表单类型写才能提交成功。否则的话，提示提交失败。
input表单属性
搜索：
提交文件：
提交：
1
2
3
4
5
属性 含义
placeholder 默认显示内容
required 字段不能为空
autocomplete 默认显示搜索记录，设置为off关掉
multiple 可以提交多文件
pattern 写入想要的正则表达式如 pattern=“/^(+86)?d{10}$/”
表单事件
oninput:表单内容每改变一下就触发该事件
oninvalid:当验证不通过时触发此事件
4、进度条
下载进度：
//max表示总任务数，value表示当前执行的任务数
1
2
3
4
5、度量器
用于显示剩余容量或内存
1
2
3
度量器效果：
参数值有6个，
6、DOM的查询操作
1
2
3
4
后边可以跟标签，类名(加 .)，id名(加 #)
7、Web存储
新增了在客户端的数据存储，包括localStroge和sessionSrtoge。
localStrog：没有时间的存储
sessionSrtoge：临时的session存储，关闭浏览器就释放数据的存储。
1
2
3
4
5
8、HTML5 API
1、canvas
定义：使用JS在网页上绘制图像
1>、绘制矩形
绘制的第一个画布
1
2
3
4
5
6
7
2>、绘制线条
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0); //线条的起始位置
ctx.lineTo(200,100); //线条的终止位置
ctx.stroke(); //开始绘制
1
2
3
4
5
3>、绘制圆形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI); //圆心角的x坐标 圆心角的Y坐标 半径 起始角度 终止角度
ctx.stroke(); //绘制图形
1
2
3
4
5
6
4>、绘制实心文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",20,100); //包括绘制的文本内容 起始的x坐标 终止的y坐标 strokeText绘制的是空心文本
1
2
3
4
5>、绘制线性渐变图形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0); //起始 x y终止 x y的坐标
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); //起始x 起始y 绘制的图形大小150*80
1
2
3
4
5
6
7
8
9
10
11
6>、径向渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
1
2
3
4
5
6
7
8
9
10
11
12
13
7>、把一幅图片放在canvas中
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
1
2
3
4
2、SVG
可伸缩矢量图形
//polygon是用来绘制折线的 points代表绘制端点，x与y之间用逗号隔开，点与点之间用空格隔开
1
2
3
3、拖放
<!DOCTYPE HTML>
