HTML5面试题大全-CSDN博客

本文链接：https://blog.csdn.net/RunLovelace/article/details/127745832

本文整理了HTML5的相关面试题，涵盖了新特性、标签作用、表单控制、跨页面通信、图片优化、语义化、SEO优化、浏览器内核、离线存储等多个方面，帮助前端开发者更好地理解和掌握HTML5。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML5面试题

1.1 H5的新特性有哪些？
画布(Canvas) API
地理(Geolocation) API
音频、视频API(audio,video)
localStorage和sessionStorage
webworker和 websocket
header,nav,footer,aside,article,section
web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了

1.2 Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>

1.3 HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off

1.4 dom如何实现浏览器内多个标签页之间的通信? (阿里)
WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

1.5 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？
<div style="height:1px;overflow:hidden;background:red"></div>

1.6 title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： <strong>会重读，而<B>是展示强调内容。

i内容展示为斜体，me表示强调的文本；

Physical Style Elements -- 自然样式标签

b, i, u, s, pre

Semantic Style Elements -- 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

1.7 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Trident内核:IE系列

Gecko内核:Firefox

Webkit内核:Safari

Blink内核：是基于Webkit内核的子项目,使用的浏览器有：