心田花开前端面试题及详细答案（真实面试版）.docxVIP

心田花开前端面试题及详细答案（真实面试版）

一、HTML基础面试题

1、HTML5新增了哪些常用标签？实际项目中用过哪些？

参考答案：

HTML5主要新增了语义化标签、媒体标签、表单标签这几类，我项目里用得最多的是语义化标签。

常用语义化标签：header、nav、main、section、article、aside、footer，替代了以前全用div的写法，代码结构更清晰，也利于SEO和读屏设备识别。

媒体标签：audio音频、video视频，做教育课程页面的时候用过，适配课程视频播放场景。

表单新增：input的type类型（date、tel、number）、placeholder、required自动校验，做学员报名表单、信息录入页面经常用到，能减少很多自定义校验代码。

2、语义化标签的好处是什么？

参考答案：

第一，代码可读性高，团队协作的时候，别人一眼就能看出哪部分是导航、哪部分是主体内容，不用靠class名称猜；

第二，利于SEO，搜索引擎能精准识别页面模块权重，对教育官网的页面收录、排名有帮助；

第三，适配无障碍访问，屏幕阅读器可以识别标签语义，适配特殊用户使用；

第四，结构和样式分离，后期维护、改页面结构更方便。

3、iframe的优缺点？项目中什么时候会用？

参考答案：

优点：可以嵌套独立页面，隔离样式和JS污染，不用改写原有代码就能嵌入第三方页面，比如教