2024年Web前端最新HTML面试题整理(1)，面试到三面

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

• ！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是图片标题

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

---

• canvas是画布，适合图形密集型的游戏，不支持事件处理，

• svg是矢量图，不依赖分辨率，不适合游戏，适合大型渲染区域（地图），支持事件处理

15.说一下drag api？

---

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

• dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

• dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

5342f252bca635ca0ab3.png)

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。