HTML5面试题及解析

HTML5是当前前端开发中非常重要的技术，为了帮助大家更好地了解HTML5，以下将介绍一些常见的HTML5面试题及其解析。

1. 什么是HTML5？

HTML5是超文本标记语言（HyperText Markup Language）的第五个版本。它是用于构建网页和应用程序的标准化语言。HTML5引入了许多新的元素、属性和API，以改进网页的结构、样式和功能。

2. HTML5中的语义化标签有哪些？

HTML5引入了一些新的语义化标签，这些标签可以更好地描述元素的内容和意义，提高了代码的可读性和可维护性。常见的HTML5语义化标签包括：

  • <header>：定义文档或节的头部。
  • <nav>：定义导航链接的容器。
  • <main>：定义文档的主要内容。
  • <article>：定义独立的自包含文章内容。
  • <section>：定义文档中的节或区域。
  • <aside>：定义页面的侧边栏内容。
  • <footer>：定义文档或节的页脚。

以下是一个使用HTML5语义化标签的示例：

<header>
  网页标题
  <nav>
    <ul>
      <li><a rel="nofollow" href="#">首页</a></li>
      <li><a rel="nofollow" href="#">关于我们</a></li>
      <li><a rel="nofollow" href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  
  <section>
    <h3>节标题</h3>
    <p>节内容...</p>
  </section>
</main>

<footer>
  &copy; 2021 公司名称。保留所有权利。
</footer>

3. 如何在HTML5中播放音频和视频？

在HTML5中，我们可以使用<audio>和<video>标签来播放音频和视频。这两个标签都具有src属性，用于指定音频或视频的来源。以下是一个使用<audio>和<video>标签的示例：

<audio src="audio.mp3" controls></audio>

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

在上面的示例中，src属性指定了音频文件audio.mp3和视频文件video.mp4的来源，而controls属性将显示一个播放器控件，用于播放、暂停和调整音量。

4. 如何使用HTML5的本地存储？

HTML5引入了本地存储的功能，用于在客户端存储数据。本地存储有两种方式：Web Storage和IndexedDB。

Web Storage提供了两个对象：localStorage和sessionStorage。localStorage用于长期存储数据，而sessionStorage用于临时存储数据。以下是一个使用localStorage的示例：

// 存储数据
localStorage.setItem('name', 'John');

// 获取数据
const name = localStorage.getItem('name');

// 删除数据
localStorage.removeItem('name');

IndexedDB是一个更强大的本地存储解决方案，它提供了一个高级的数据库系统，可以存储复杂的数据。以下是一个使用IndexedDB的示例：

// 打开数据库
const request = indexedDB.open('myDatabase', 1);

// 创建对象存储空间
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const store = db.createObjectStore('customers', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

// 存储数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction('customers', 'readwrite');
  const store = transaction.objectStore('customers');

  store.add({ id: 1, name: 'John' });
  store.add({ id: 2, name: 'Jane' });
};

// 获取数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction('customers', 'readonly');