html5新特性面试题：HTML5新特性面试题，前端开发者的必备知识点

Canvas绘图

Canvas是HTML5中用于动态绘制图形的技术,常用于游戏、数据可视化等场景。

1. Canvas是什么？它与传统HTML元素有何区别？
   Canvas是一个特殊的容器，通过JavaScript控制其内部的绘图上下文，而不是通过DOM元素来渲染内容。

2. 如何在Canvas中绘制一个圆形？
   使用arc()方法可以绘制圆形，

   ctx.beginPath();
   ctx.arc(x, y, radius, 0, Math.PI * 2);
   ctx.stroke();

3. Canvas的坐标系统原点在哪里？
   Canvas的坐标原点位于左上角，x轴向右为正，y轴向下为正。

Web Storage（本地存储）

Web Storage提供了比Cookie更强大的客户端存储方案，包括localStorage和sessionStorage。

1. localStorage和sessionStorage的区别是什么？

   • localStorage的数据没有过期时间，除非被主动清除。
   • sessionStorage的数据在页面会话结束时（关闭标签页）被清除。

2. 如何使用localStorage存储和读取数据？

   // 存储数据
   localStorage.setItem('key', 'value');
   // 读取数据
   const value = localStorage.getItem('key');

3. Web Storage有哪些安全限制？
   存储的数据是字符串类型，且大小有限制（通常为5MB），不同浏览器可能有不同的限制。

WebSocket

WebSocket提供了全双工通信协议,适用于实时数据传输。

1. WebSocket与HTTP的区别是什么？

   • WebSocket是持久化连接,而HTTP是每次请求-响应模式。
   • WebSocket支持双向通信,而HTTP是单向的。

2. 如何建立一个WebSocket连接？

   const socket = new WebSocket('ws://example.com');
   socket.onopen = () => {
     console.log('连接已建立');
   };

3. WebSocket的生命周期有哪些事件？

   • onopen：连接建立时触发。
   • onmessage：接收到消息时触发。
   • onerror：发生错误时触发。
   • onclose：连接关闭时触发。

语义化标签

HTML5引入了更多语义化标签,如<header>、<footer>、<article>等，提升了代码的可读性和SEO优化。

1. 语义化标签有哪些？它们的作用是什么？

   • <header>：页面头部，通常包含标题或导航。
   • <footer>：页面底部，通常包含版权信息或相关链接。
   • <article>块，如博客文章。
   • <section>：页面的分区块。

2. 使用语义化标签有哪些好处？

   • 提升代码可读性。
   • 优化SEO,搜索引擎更容易理解页面结构。
   • 更好的移动端适配。

多媒体支持

HTML5原生支持音频和视频播放,无需依赖插件。

1. HTML5中如何嵌入视频？
   使用<video>

   <video src="movie.mp4" controls></video>

2. 如何控制视频的播放？
   使用JavaScript控制：

   const video = document.querySelector('video');
   video.play(); // 播放
   video.pause(); // 暂停