2024年Web前端最新HTML面试题整理，带你全面理解View的绘制流程

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

• 优点：展现嵌入的网页；加载速度较慢的内容，如广告；可以跨子域通信；

• 缺点：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标准解析代码

• 混杂模式（怪异模式）：浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作

• HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的方法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

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

---

• 渐进增强是针对低版本浏览器也能保证基础功能，然后对高级浏览器改进追加功能；

• 优雅降级是一开始构建完整功能，再对低版本进行兼容

09.说一下常见的meta标签属性和作用？

---

10.说一下HTML5的离线存储？

---

• 指的是没有网络连接的时候，可以正常访问应用，与网络连接时更新缓存文件

• 在 cache.manifest 文件中编写需要离线存储的资源：

• 在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

• 如何清除缓存：更新 manifest 文件，通过 javascript 操作，清除浏览器缓存

11.说一下怎么做好seo？

---

• 语义化元素

• title和meta标签描述页面内容

• logo使用a标签加背景图

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

---

• strong是有语义的，起到加强语气的效果，遇到阅读器会重读，即为了强调而加粗

• em起到强调文本的作用

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

---

• 响应式页面中经常用到根据屏幕密度设置不同的图片

• 这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片

• alt是图片失效的时候的备用图片地址，title是图片标题

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)