1. 引言

HTML5是现代网页开发的核心技术，自2014年正式发布以来，它已经成为构建动态、响应式网页的基石。本文旨在为您提供一个从入门到精通HTML5的全面指南。

2. HTML5基础知识

2.1 HTML5的基本结构

HTML5文档的基本结构包括：<!DOCTYPE html>声明、<html>根元素、<head>头部、<body>主体。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5入门示例</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

2.2 HTML5标签和属性

HTML5引入了许多新标签和属性，以简化页面结构和提高语义性。以下是一些常见的HTML5标签和属性：

  • 新增语义化标签：<header>, <nav>, <article>, <section>, <aside>, <footer>
  • 自定义数据属性：data-*

3. HTML5高级特性

3.1 媒体元素

HTML5提供了对多媒体内容的原生支持，包括<audio>, <video>和<canvas>。

3.1.1 <audio>元素

<audio controls>
    <source src="example.mp3" type="audio/mpeg">
    您的浏览器不支持音频元素。
</audio>

3.1.2 <video>元素

<video controls>
    <source src="example.mp4" type="video/mp4">
    您的浏览器不支持视频元素。
</video>

3.1.3 <canvas>元素

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    您的浏览器不支持 canvas 元素。
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

3.2 表单元素

HTML5为表单元素增加了新的输入类型，如email, tel, url, date, month, week, time, datetime, datetime-local等。

<form>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
    <br>
    <label for="tel">电话:</label>
    <input type="tel" id="tel" name="tel">
    <br>
    <input type="submit" value="提交">
</form>

3.3 本地存储

HTML5提供了本地存储解决方案，如localStorage和sessionStorage。

// 存储数据
localStorage.setItem("key", "value");

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

// 删除数据
localStorage.removeItem("key");

// 清空所有数据
localStorage.clear();

4. 响应式网页设计

响应式网页设计（Responsive Web Design，RWD）是HTML5和CSS3的重要应用之一。它可以让网页在不同设备和分辨率上具有良好的用户体验。

/* 基础样式 */
body {
    font-size: 16px;
}

/* 平板设备样式 */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        font-size: 14px;
    }
}

/* 手机设备样式 */
@media (max-width: 767px) {
    body {
        font-size: 12px;
    }
}

5. 总结

HTML5为现代网页开发带来了许多便利和可能性。通过掌握HTML5核心技术，您可以构建更加丰富、互动和适应性强的网页。本文旨在为您提供一个从入门到精通的全面指南，希望对您的学习有所帮助。