前端HTML面试题, HTML5 相比于 HTML 有哪些更新?

Step 1

Q:: HTML5 相比于 HTML4 有哪些更新？

A:: HTML5 相比于 HTML4 引入了许多新的元素和 API，增强了网页的语义化、富媒体支持和性能优化。主要更新包括： 1. 新的语义化标签：如 <article>、<section>、<nav>、<header>、<footer> 等，这些标签使得 HTML 结构更具可读性和意义。 2. 增强的多媒体支持：引入了 <audio> 和 <video> 标签，可以在网页中直接嵌入音频和视频，无需插件支持。 3. 本地存储：提供了 localStorage 和 sessionStorage 两种存储方式，允许在客户端存储数据，而不依赖于 cookie。 4. 离线支持：通过应用缓存和 Service Workers，可以构建离线 Web 应用。 5. 新的表单控件：如 <datalist>、<output>、<progress>、<meter> 等，提供了更丰富的表单控件。 6. Canvas 和 SVG：<canvas> 元素允许在网页中绘制图形，SVG 支持矢量图形。 7. Geolocation API：允许获取用户的地理位置。 8. Web Workers：允许在后台线程中运行 JavaScript，避免阻塞主线程。

Step 2

Q:: HTML5 的新语义化标签有哪些？

A:: HTML5 新增了许多语义化标签，如 <header>（头部）、<nav>（导航）、<article>（文章）、<section>（章节）、<aside>（侧边栏）和 <footer>（页脚）等。这些标签有助于提高代码的可读性，并对搜索引擎优化（SEO）有积极影响，因为它们明确地定义了页面结构的不同部分。

Step 3

Q:: 什么是 localStorage 和 sessionStorage，它们有什么区别？

A:: localStorage 和 sessionStorage 是 HTML5 提供的本地存储机制，用于在客户端存储数据。它们的区别在于： 1. 数据存储时间：localStorage 中的数据是持久的，除非手动删除，否则会一直保留；而 sessionStorage 中的数据仅在页面会话期间有效，关闭浏览器或页面时数据会被清除。 2. 数据共享：localStorage 中的数据可以在同一域名下的所有页面中共享，而 sessionStorage 只能在当前页面会话中使用。

Step 4

Q:: 如何使用 HTML5 实现视频播放？

A:: HTML5 提供了 <video> 标签用于嵌入视频。使用时，可以通过 <source> 标签定义多个视频源以支持不同的格式。代码示例：

 
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频播放。
</video>
 

通过添加 controls 属性，可以显示播放控制器。

Step 5

Q:: 什么是 Web Workers，它的作用是什么？

A:: Web Workers 是 HTML5 中引入的一项技术，它允许开发者在后台线程中运行 JavaScript 脚本。这样可以避免脚本执行阻塞主线程，从而提升页面的响应速度和性能，特别是在需要处理大量数据或复杂计算的场景下。Web Workers 主要用于执行耗时的任务，如复杂计算、数据处理或文件解析，避免这些任务阻塞 UI 线程。