引言

HTML5作为现代网页开发的基石，自推出以来就受到了广泛的关注和喜爱。本文将基于豆瓣高分指南，为您提供一份实战攻略，帮助您轻松掌握HTML5的现代网页开发精髓。

一、HTML5基础

1.1 HTML5结构

HTML5引入了许多新的结构元素，如<header>, <nav>, <article>, <section>, <aside>和<footer>等，这些元素使得网页结构更加清晰。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5结构示例</title>
</head>
<body>
    <header>网站头部</header>
    <nav>网站导航</nav>
    <article>文章内容</article>
    <section>章节内容</section>
    <aside>侧边栏内容</aside>
    <footer>网站底部</footer>
</body>
</html>

1.2 HTML5属性

HTML5增加了一些新的属性，如placeholder, autofocus, required等，这些属性使得表单更加友好。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5属性示例</title>
</head>
<body>
    <input type="text" placeholder="请输入用户名" autofocus required>
</body>
</html>

二、HTML5多媒体

2.1 音频和视频

HTML5提供了<audio>和<video>元素，使得网页可以直接嵌入音频和视频内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5多媒体示例</title>
</head>
<body>
    <audio controls>
        <source src="example.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>
    <video controls>
        <source src="example.mp4" type="video/mp4">
        您的浏览器不支持视频元素。
    </video>
</body>
</html>

2.2 Canvas和SVG

HTML5的<canvas>元素允许您在网页上绘制图形，而<svg>元素则提供了矢量图形的绘制。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5图形示例</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.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 100);
    </script>
</body>
</html>

三、HTML5高级特性

3.1 地理定位

HTML5的Geolocation API允许网页访问用户的地理位置信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5地理定位示例</title>
</head>
<body>
    <button onclick="getLocation()">获取位置</button>
    <p id="demo"></p>
    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }
        function showPosition(position) {
            x.innerHTML = "Latitude: " + position.coords.latitude + 
                          "<br>Longitude: " + position.coords.longitude;
        }
    </script>
</body>
</html>

3.2 Web存储

HTML5提供了两种新的Web存储方式：localStorage和sessionStorage。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Web存储示例</title>
</head>
<body>
    <button onclick="saveData()">保存数据</button>
    <button onclick="getData()">获取数据</button>
    <p id="demo"></p>
    <script>
        function saveData() {
            localStorage.setItem("key", "value");
        }
        function getData() {
            var data = localStorage.getItem("key");
            x.innerHTML = data;
        }
    </script>
</body>
</html>

四、总结

通过本文的介绍，相信您已经对HTML5有了更深入的了解。在实际开发中，不断实践和总结是提高技能的关键。希望这份豆瓣高分指南能帮助您轻松掌握现代网页开发的精髓。