HTML5介绍

简介

HTML5是一种用于构建网页和应用程序的标准技术。它是HTML的第五个主要版本，包含了许多新的元素、属性和API，能够通过各种设备和平台来访问和运行。

新特性

语义化标签

HTML5引入了很多新的语义化标签，如<header>、<nav>、<section>、<article>、<footer>等，使网页结构更加清晰，便于开发者和搜索引擎理解内容。

<header>
  <h1>网页标题</h1>
  <nav>
    <ul>
      <li>导航1</li>
      <li>导航2</li>
    </ul>
  </nav>
</header>

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

<footer>
  <p>版权信息</p>
</footer>

多媒体支持

HTML5提供了更好的多媒体支持，包括<audio>、<video>和<canvas>等标签。开发者可以直接在网页中嵌入音频、视频，并通过JavaScript进行控制和操作。

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

<audio src="audio.mp3" controls>
  Your browser does not support the audio tag.
</audio>

<canvas id="myCanvas"></canvas>

表单增强

HTML5为表单提供了很多改进，比如新增的输入类型（email、url、date等）、表单验证、自动填充和拖放上传等功能，简化了开发者的工作量。

<form>
  <input type="email" name="email" required placeholder="Email">
  <input type="url" name="website" placeholder="Website (optional)">
  <input type="date" name="birthday" placeholder="Birthday">
  <input type="file" name="file">
  <button type="submit">Submit</button>
</form>

Web存储

HTML5引入了本地存储和会话存储的API，即localStorage和sessionStorage，使得网页可以离线使用，同时也提供了更大的存储空间。

localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username'));  // 输出: John

兼容性

HTML5的兼容性取决于浏览器，大多数现代浏览器已经全面支持。对于旧版浏览器，可以使用一些JavaScript库或者Polyfill来填补功能缺失。

总结

HTML5是一种功能强大的技术，为开发者提供了许多新特性和改进。使用HTML5可以创建更现代化、丰富多样的网页和应用程序，为用户提供更好的交互体验。

注意：以上示例代码片段采用Markdown标记，仅用于说明，无法直接在HTML页面中运行。