2024前端HTML5面试题

以下是本人呕心沥血总结的前端HTML5面试题，希望对大家有所帮助。

01.说一下对语义化的理解？

对开发者友好，让人更容易读懂，利于代码可读性；
对机器友好，让搜索引擎更容易读懂，利于seo。

02.说一下HTML5有哪些更新/新增？

新增语义化标签，音频视频标签；
新增localstorage，sessionstorage本地存储；
新增DOM查询 document.querySelector() 、 document.querySelectorAll()。

03.说一下defer和async的区别？

多个带defer的script标签里js同步执行，async是异步执行；
defer等所有元素解析完成之后，DOMContentLoaded之前执行。

04.说一下iframe有哪些优点和缺点？

优点：展现嵌入的网页；加载速度较慢的内容，如广告；可以跨子域通信；
缺点：iframe会阻塞主页面onload事件；不利于搜索引擎识别；增加http请求。

05.说一下web worker?

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
通过postMessage将结果回传到主线程，这样复杂操作的时候，就不会阻塞主进程了。

06.行内，块级，空元素，替换元素有哪些？

行内：button，span
块级：div，p，ul，h1
替换元素：img，iframe，video
空元素：link，meta

07.DOCTYPE的作用？严格模式和混杂模式的区别？

！DOCTYPE告诉浏览器以HTML5标准解析页面，如果不写，则进入混杂模式。
严格模式（标准模式）：以w3c标准解析代码
混杂模式（怪异模式）：浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作。

08.说一下渐进增强和优雅降级的区别？

渐进增强是针对低版本浏览器也能保证基础功能，然后对高级浏览器改进追加功能；
优雅降级是一开始构建完整功能，再对低版本进行兼容。

09.说一下怎么做好seo？

（1）语义化元素；
（2）title和meta标签描述页面内容；
（3）logo使用a标签加背景图。

10.说一下b和strong，i和em的区别？

strong是有语义的，起到加强语气的效果，遇到阅读器会重读，即为了强调而加粗；
em起到强调文本的作用。

11.说一下img的srcset作用？alt和title的区别?

响应式页面中经常用到根据屏幕密度设置不同的图片。
这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。
alt是图片失效的时候的备用图片地址，title是图片标题。

12.说一下canvas和svg的区别？

canvas是画布，适合图形密集型的游戏，不支持事件处理；
svg是矢量图，不依赖分辨率，不适合游戏，适合大型渲染区域（地图），支持事件处理。

好啦，以上总结的是一些基础的HTML5的面试题，希望对各位小伙伴有所帮助，后续还会有更多的面试干货，关注我持续更新哦。