2022前端面试系列：

（1）前端面试题之HTML篇

（2）前端面试题之CSS篇

（3）前端面试题之js篇

（4）前端面试题之Vue篇（上）

1. src和href的区别

src和href都是用来引用外部的资源，主要区别在于浏览器解析该元素并下载资源时，是否会暂停其他资源的下载和处理；src会暂停，href则不会。

2. 对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

3. script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本，这样将阻塞后续文档的加载。其区别如下：

执行顺序： 带有多个async属性的标签，不能保证加载的顺序；带有多个defer属性的标签，可以按照加载顺序执行；
脚本是否并行执行：

💡 （1）当浏览器遇到带有 async 属性 的 script 时，该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析，所以可能阻塞也可能不阻塞

💡 （2）当浏览器遇到带有 defer 属性的 script 时，该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码

下图可以直观的看出三者之间的区别:

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

4. 行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

常见的行内元素：span、a、img、button、input、select

块级元素：

元素独占一行
未设置宽度时，它的宽度为容器的100%
宽高、行高以及内外边距均可设置
块级元素可以容纳其它行级元素和块级元素

行内元素：

和其它元素都会在一行显示
行高以及内外边距均可以设置，宽高不可设置
宽度就是文字或者图片的宽度，不能改变
行级元素只能容纳文本或者其它行内元素

可以通过display属性对行内元素和块级元素进行切换(主要看第 2、3、4三个值)：

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

5. HTML5有哪些更新

HTML5主要是关于图像、位置、存储、多任务等功能的增加：

语义化标签，如： article、footer、header、nav等
视频video、音频audio
画布canvas
表单控件，calemdar、date、time、email
地理定位
本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
拖拽释放移除的元素：
纯表现的元素：basefont、font、s、strike、tt、u、big、center
对可选用性产生负面影响的元素：frame、frameset、noframes

6. DOCTYPE(文档类型) 的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明。
用于声明当前HTML文档的解析类型(document.compatMode)。
HTML文档的解析类型分为以下两种：

CSS1Compat：标准模式（Strick mode） 浏览器使用W3C的标准解析渲染页面。
BackCompat：怪异模式(混杂模式)(Quick mode) ，浏览器采用更加宽松的、向后兼容的方式来渲染页面

当我们在HTML文档的第一行（必须）定义了，则表示使用标准模式去解析文档。反之，若没有定义，则默认是怪异模式。在怪异模式下，不同的浏览器解析HTML文档的显示效果如CSS可能存在较大差异，所以定义统一使用标准模式正是为了避免怪异模式下各种兼容性问题，去强制统一各浏览器的解析模式。

7. 常用的meta标签有哪些

meta 标签是用来描述网页文档的属性，比如网页的作者，网页描述，关键词等

常用的meta标签：

（1）charset，用来描述HTML文档的编码类型：

<meta charset="UTF-8" />

（2） keywords，页面关键词：

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

（3）description，页面描述：

<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url="

（5）viewport，适配移动端，可以控制视口的大小和比例：

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

其中，content 参数有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

（6）robots，搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检
nofollow：页面上的链接不可以被查询。

8. 说一下 web worker

Web Worker 可以使脚本运行在新的线程中，独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。当计算结束之后，可以通过 postMessage 将结果发送给主线程。 Web Worker 是一个统称，具体可以细分为普通的 Worker、SharedWorker 和 ServiceWorker 等。

应用

处理密集型数学计算
大数据集排序
数据处理（压缩，音频分析，图像处理等）
高流量网络通信

9. head 标签有什么作用，其中什么标签必不可少？

head标签用于定义文档的头部，它是所有头部元素的容器。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<link>, <meta>, <script>, <style>, <base>, <title>。

10. Canvas和SVG的区别

Canvas：

Canvas画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新绘制。

其特点如下：

依赖分辨率
不支持事件处理器
较弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

SVG：

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，
SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。
如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

11. 什么是严格模式与混杂模式？

严格模式：是以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

12. 前端页面有哪三层构成，分别是什么？

构成：结构层、表示层、行为层

结构层（structural layer）

结构层是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容。
表示层（presentation layer）

表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表
行为层（behaviorlayer）

行为层表示网页内容跟用户之间交互行为，简单来说就是用户操作了网页，网页给用户一个反馈，是由JavaScript和DOM 所控制

13. img上 title 与 alt

alt： 全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
title： 当鼠标移动到元素上时显示title的内容

区别：

一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较友好。

14. label的作用是什么？是怎么用的？

label元素不会向用户呈现任何特殊效果，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

最常用label的地方就是表单中的性别单选框了，当点击文字时也能够自动聚焦绑定的表单控件。

15. 你知道SEO中的TDK吗？

在SEO中，TDK其实就是title标题标签、description描述标签、keywords关键词标签

16. 怎么处理HTML5新标签兼容问题？

主要有两种方式：

通过document.createElement(tagName)方法可以让浏览器识别新的标签.
用JavaScript解决：使用HTML5的shiv框架，在head标签中调用以下代码：

<!--[if lt IE 9]>
 <script> src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" </script>
<![endif]-->

17. 对于Web标准以及W3C的理解

Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成

W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：

可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
跨平台，方便迁移到不同设备
降低代码维护成本

18. Quirks（怪癖）模式是什么？它和Standards（标准）有什么区别？

页面如果写了DTD（文档类型定义），就意味着这个页面采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式，这就是Quirks模式，有时候也叫怪癖模式、诡异模式、怪异模式。

区别：总体会有布局、样式解析、脚本执行三个方面区别，这里列举一些比较常见的区别：

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在Quirks模式下，IE的宽度和高度还包含了padding和border
设置行内元素的高宽：在Standards模式下，给行内元素设置width和height都不会生效，而在Quriks模式下会生效
用margin：0 auto设置水平居中:在Standards模式下，设置margin：0 auto；可以使元素水平居中，但是在Quriks模式下失效
设置百分比高度:在Standards模式下，元素的高度是由包含的内容决定的，如果父元素没有设置百分比的高度，子元素设置百分比的高度是无效的

19. a元素除了用于导航外，还有什么作用？

href属性中的url可以是浏览器支持的任何协议，所以a标签可以用来手机拨号

<a href="tel:110">110</a>，也可以用来发送短信<a href="sms:110">110</a>，还有邮件等等

当然，a元素最常见的就是用来做锚点和下载文件。

锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。

前端面试题之HTML篇