HTML5 用法详细讲解：从基础到进阶

HTML5 是现代网页开发的核心技术，它不仅简化了开发流程，还为构建功能丰富的应用提供了强大的支持。本文将详细介绍 HTML5 的基本用法、核心特性、常用功能以及一些高级用法，帮助你快速掌握 HTML5 的开发技能。

一、HTML5 新特性概览

HTML5 引入了许多新特性，这些特性极大地丰富了网页的互动性和表现力。

（一）新的语义元素

HTML5 引入了许多新的语义元素，如 <header>、<footer>、<article>、<section> 和 <nav> 等，这些元素不仅使代码更易读，还有助于搜索引擎优化（SEO）。

示例代码：

HTML复制

<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <p>文章内容...</p>
</article>

（二）多媒体支持

HTML5 原生支持音频和视频播放，开发者不再需要依赖第三方插件。

示例代码：

HTML复制

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

（三）Canvas 和 SVG

HTML5 引入了 <canvas> 元素，用于在网页上绘制图形。此外，SVG（可缩放矢量图形）也得到了更广泛的支持。

示例代码：

HTML复制

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(20, 20, 150, 50);
</script>

（四）本地存储

HTML5 引入了本地存储（Local Storage）和会话存储（Session Storage），允许开发者在用户的浏览器中存储数据。

示例代码：

JavaScript复制

// 存储数据
localStorage.setItem("username", "JohnDoe");

// 获取数据
var username = localStorage.getItem("username");