Web前端经典面试试题及答案.docxVIP

Web前端经典面试试题及答案

1.HTML相关问题

1.1请简述HTML5的新特性

HTML5是HTML最新的修订版本，带来了许多新特性：

-语义化标签：引入了`header`、`nav`、`article`、`section`、`aside`、`footer`等语义化标签，使代码结构更清晰，有利于搜索引擎优化（SEO）和开发者理解页面结构。例如：

```html

header

h1网站标题/h1

/header

nav

ul

liahref=首页/a/li

liahref=关于我们/a/li

/ul

/nav

article

h2文章标题/h2

p文章内容.../p

/article

footer

p版权所有copy;2024/p

/footer

```

-表单增强：新增了多种表单输入类型，如`email`、`url`、`number`、`date`等，浏览器可以对输入进行初步验证。例如：

```html

inputtype=emailplaceholder=请输入邮箱地址

```

-多媒体支持：支持`audio`和`video`标签，无需依赖第三方插件即可在页面中嵌入音频和视频。例如：

```html

videowidth=320height=240controls

sourcesrc=movie.mp4type=video/mp4

您的浏览器不支持视频播放。

/video

```

-Canvas绘图：`canvas`元素提供了一个可以使用JavaScript进行绘图的区域，可用于创建动态图形、游戏等。例如：

```html

canvasid=myCanvaswidth=200height=100/canvas

script

constcanvas=document.getElementById(myCanvas);

constctx=canvas.getContext(2d);

ctx.fillStyle=red;

ctx.fillRect(10,10,50,50);

/script

```

-WebStorage：包括`localStorage`和`sessionStorage`，可以在浏览器中存储数据，前者数据会一直保存，除非手动删除；后者数据在会话结束时会被清除。例如：

```javascript

//存储数据

localStorage.setItem(username,John);

//获取数据

constusername=localStorage.getItem(username);

```

-WebWorkers：允许在浏览器中创建后台线程，执行耗时的脚本而不影响页面的响应性能。例如：

```javascript

//main.js

constworker=newWorker(worker.js);

worker.postMessage(开始工作);

worker.onmessage=function(event){

console.log(收到消息：,event.data);

};

//worker.js

self.onmessage=function(event){

if(event.data===开始工作){

//模拟耗时操作

constresult=1+2;

self.postMessage(result);

}

};

```

1.2简述`img`标签的`srcset`和`sizes`属性的作用

-`srcset`属性：用于提供多个不同分辨率或尺寸的图像源，浏览器会根据设备的屏幕分辨率、视口大小等因素选择最合适的图像加载。例如：

```html

imgsrc=small.jpg

srcset=small.jpg500w,medium.jpg1000w,large.jpg2000w

alt=图片

```

这里的`500w`、`1000w`、`2000w`表示图像的固有宽度，浏览器会根据自身情况选择合适的图像。

-`sizes`属性：配合`srcset`使用，定义不同视口宽度下应该使用的图像尺寸。例如：

```html

imgsrc=small.jpg

srcset=small.jpg500w,medium.jpg1000w,large.jpg2000w