11.1 HTML5概述

HTML5是现代网页开发的核心技术之一，它带来了许多新的特性和功能，使得网页开发更加高效和强大。在本章中，我们将深入探讨HTML5的核心技术和实战解析。

11.2 HTML5新特性介绍

HTML5引入了许多新特性，以下是一些重要的新特性：

  • 语义化标签：如<header>, <footer>, <article>, <section>等，这些标签帮助开发者更好地组织页面结构。
  • 多媒体支持：HTML5原生支持音频和视频，无需依赖Flash插件。
  • 离线存储：通过localStorage和sessionStorage实现数据的本地存储。
  • 画布（Canvas）：允许开发者绘制图形和动画。
  • 地理定位：通过Geolocation API实现地理位置信息的获取。

11.3 HTML5语义化标签实战

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

11.4 HTML5多媒体实战

以下是一个使用HTML5原生视频标签的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5视频示例</title>
</head>
<body>
    <video controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
</body>
</html>

11.5 HTML5离线存储实战

以下是一个使用HTML5 localStorage存储数据的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5离线存储示例</title>
</head>
<body>
    <button onclick="saveData()">保存数据</button>
    <button onclick="loadData()">加载数据</button>
    <p id="data"></p>

    <script>
        function saveData() {
            localStorage.setItem('key', 'value');
        }

        function loadData() {
            var data = localStorage.getItem('key');
            document.getElementById('data').innerText = data;
        }
    </script>
</body>
</html>

11.6 HTML5画布（Canvas）实战

以下是一个使用HTML5 Canvas绘制圆形的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
    </script>
</body>
</html>

11.7 总结

HTML5作为现代网页开发的核心技术，提供了许多新的特性和功能。通过本章的学习，我们了解了HTML5的新特性、语义化标签、多媒体支持、离线存储和画布（Canvas）等核心技术的实战应用。希望这些内容能够帮助您更好地掌握HTML5技术。