前端面经高频考点

最新推荐文章于 2022-09-29 17:21:51 发布

原创

最新推荐文章于 2022-09-29 17:21:51 发布 · 576 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css #html5 #vue.js

这篇博客详细梳理了前端面试中的高频考点，包括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、渐进增强和优雅降级等前端核心技术。

文章目录

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绑定的表单控件上。
实例：

//使用方法一：
<label for="shixue">请输入您的姓名：</label>
<input type="text" id="shixue">
//使用方法二：
<label for="shikai">date: <input type="text" id="shikai"></label>

5、ifram的使用以及有优缺点

ifram元素是一个创建包含另一个文档的内联框架。
常见属性：src height width scrolling(是否有滚动条) IframBorder(是否有边框0是没有 1是有) allowTransparency(是否允许透明)等
优点：
实现跨域通信，实现js脚本的并行加载，用来加载速度较慢的广告
缺点：
会阻塞主页面的onload 事件，产生多个页面，不容易管理。

<iframe src="https://www.baidu.com/" frameborder="0" allowfullscreen="true" width="500px" height="500px" allowTransparency="true" scrolling="no"></iframe>

6、img的srcset属性

作用：响应式页面中会根据不同的屏幕密度选择不同的图片，需要用srcset属性来设置。

<img src="image-128.png" srcset="image-256.png 2x" />

解析：在屏幕密度为 1x 的时候，采用图片 image-128.png，当屏幕密度为 2x 的时候采用图片 image-256.png，但是屏幕密度有 1x 2x 3x 4x，如果给每一张图片都设置四张的话，会增加服务器的加载负担，所以有了下边的 srcset 使用

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

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编写的，以标准模式来渲染，不写或者是写错，均按照混杂模式解析。

总而言之，标准模式让各个浏览器统一执行一套兼容模式，保证旧网站的正常运行。

10、meta标签的作用

作用：描述网页文档的属性，一般由name和content组成。
常见属性
1>、charset 规定编码方式

<meta charset="UTF-8">

2>、浏览器渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge">

告诉浏览器，IE8/9及以上版本的浏览器均以最高IE来渲染页面。http-equiv="X-UA-Compatible"是因为在刚出现IE8浏览器的时候存在页面重构问题，这句代码只对IE8有效就是告诉浏览器在这种情况下只需要在IE6/7下能正常渲染就可以了，不用管最新的IE8。
3>keywords

<meta name="keywords" content="关键词">

4>、description

<meta name="description" content="网页描述">

5>、viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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	视频未加载时显示的图片，即第一帧的画面

<video src="mi.mp4" controls autoplay loop=“true” poster="th.jpg"></video>

音频标签：audio

属性	含义
src	音频指定来源
controls	向用户展示播放控件
autoplay	自动播放
muted	静音播放
loop	循环播放

<audio src="muscic.mp3" controls autoplay loop="true"></audio>

兼容不同的浏览器指定文件来源标签：source

<video   controls muted autoplay='autoplay'>
        <source src="mi.mp4" type="video/mp4">
</video>
<audio  controls autoplay="autoplay" muted loop="true">
        <source src="music.mp3" type="audio/mp3">
</audio>

实现的效果和上边一样
3、新增input表单类型和属性
input表单类型

<form action="www.baidu.com">
        邮箱：<input type="email"> 
        url: <input type="url">
        数字：<input type="number">
        手机号码：<input type="tel">
        颜色：<input type="color">
        搜索框：<input type="search">
        提交：<input type="submit">
        时间(时分秒)：<input type="time">
        日期(年月日)：<input type="date">
        日期时间控件：<input type="datetime-local">
        周：<input type="week">
        月：<input type="mouth">
</form>

下边是关于时间的控件
在这里插入图片描述

点击提交的时候必须按照正确的表单类型写才能提交成功。否则的话，提示提交失败。
input表单属性

<form action="www.baidu.com">
        搜索：<input type="search" placeholder="请输入搜索内容" required autocomplete="on">
        提交文件：<input type="file" multiple>
        提交：<input type="submit">
</form>

属性	含义
placeholder	默认显示内容
required	字段不能为空
autocomplete	默认显示搜索记录，设置为off关掉
multiple	可以提交多文件
pattern	写入想要的正则表达式如 pattern=“/^(+86)?d{10}$/”

表单事件
oninput:表单内容每改变一下就触发该事件
oninvalid:当验证不通过时触发此事件

4、进度条

<body>
    下载进度：
    <progress value="22" max="100"></progress> //max表示总任务数，value表示当前执行的任务数
</body>

5、度量器
用于显示剩余容量或内存

<body>
    <meter min="0" max="1" low="0.3" high="0.8" optimum="0.2" value="0.9"></meter>
</body>

度量器效果：
在这里插入图片描述

参数值有6个，
在这里插入图片描述
6、DOM的查询操作

<script>
        document.querySelector()
        document.querySelectorAll()
</script>

后边可以跟标签，类名(加 .)，id名(加 #)
7、Web存储
新增了在客户端的数据存储，包括localStroge和sessionSrtoge。
localStrog：没有时间的存储
sessionSrtoge：临时的session存储，关闭浏览器就释放数据的存储。

<script>
        localStorage.setItem(key, value)
        localStorage.getItem(key, value)
        localStorage.removeItem(key, value)
    </script>

8、HTML5 API
1、canvas
定义：使用JS在网页上绘制图像
1>、绘制矩形

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">绘制的第一个画布</canvas>
<script> 
var c=document.getElementById("myCanvas"); //获取该元素
var ctx=c.getContext("2d"); //创建该元素的内置H5对象
ctx.fillStyle="#FF0000"; //矩形的颜色
ctx.fillRect(0,0,150,75); //矩形的起始位置 0 0，大小150*75
</script>

2>、绘制线条

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0); //线条的起始位置
ctx.lineTo(200,100); //线条的终止位置
ctx.stroke(); //开始绘制

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(); //绘制图形

4>、绘制实心文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",20,100); //包括绘制的文本内容 起始的x坐标 终止的y坐标 strokeText绘制的是空心文本

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

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);

7>、把一幅图片放在canvas中

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

2、SVG
可伸缩矢量图形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> //polygon是用来绘制折线的 points代表绘制端点，x与y之间用逗号隔开，点与点之间用空格隔开
</svg>

3、拖放

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)<

最低0.47元/天解锁文章