HTML5 学习指南

本指南包含 HTML5 的核心特性、详细注释和实例代码，帮助您快速学习 HTML5。

1. 语义化标签

HTML5 引入了一系列语义化标签，使页面结构更清晰，有助于搜索引擎理解内容。

常用语义化标签

<header>  
<nav>     
<main>    
<section>  
<article>  
<aside>   
<footer>  
<figure>  
<figcaption>  
<mark>    
<time>    
<address>  
<details>  
<summary>  
<progress>  
<meter>    
<dialog>

实例：语义化页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    
    <!-- 主要内容 -->
    <main>
        <!-- 文章区块 -->
        <section>
            <h2>最新文章</h2>
            <!-- 文章内容 -->
            <article>
                <h3>HTML5 新特性介绍</h3>
                <p>HTML5 引入了许多新特性，如语义化标签、Canvas、本地存储等...</p>
                <!-- 时间标签 -->
                <time datetime="2023-01-01">2023年1月1日</time>
            </article>
        </section>
        
        <!-- 侧边栏 -->
        <aside>
            <h3>热门标签</h3>
            <ul>
                <li><a href="#">HTML5</a></li>
                <li><a href="#">CSS3</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </aside>
    </main>
    
    <!-- 页脚 -->
    <footer>
        <!-- 地址信息 -->
        <address>
            联系我们：info@example.com
        </address>
        <p>© 2023 网站名称. 保留所有权利.</p>
    </footer>
</body>
</html>

注意：语义化标签的主要作用是提高代码可读性和SEO，它们在默认情况下的样式与普通的 <div> 标签类似，需要通过CSS添加样式。

2. Canvas 画布

Canvas 是 HTML5 引入的绘图 API，允许通过 JavaScript 在网页上绘制图形。

基本用法

<canvas id="myCanvas" width="400" height="200">
    您的浏览器不支持 Canvas 元素
</canvas>

<script>
    // 获取 Canvas 元素
    var canvas = document.getElementById('myCanvas');
    // 获取 2D 绘图上下文
    var ctx = canvas.getContext('2d');
    
    // 绘制矩形
    ctx.fillStyle = 'red'; // 设置填充颜色
    ctx.fillRect(10, 10, 100, 50); // 绘制填充矩形 (x, y, 宽, 高)
    
    // 绘制路径
    ctx.beginPath(); // 开始路径
    ctx.moveTo(150, 10); // 移动到起点
    ctx.lineTo(200, 50); // 画线到指定点
    ctx.lineTo(150, 90); // 画线到指定点
    ctx.closePath(); // 关闭路径
    ctx.strokeStyle = 'blue'; // 设置描边颜色
    ctx.stroke(); // 描边路径
    ctx.fillStyle = 'yellow'; // 设置填充颜色
    ctx.fill(); // 填充路径
</script>

实例：Canvas 绘制图形

注意：Canvas 元素的宽高应在 HTML 属性中设置，而不是通过 CSS，否则可能会导致图像拉伸。

3. 表单增强

HTML5 引入了新的表单类型和属性，提供更好的用户体验和数据验证。

新表单类型

<!-- 电子邮件输入框：自动验证电子邮件格式 -->
<input type="email" placeholder="请输入邮箱">

<!-- URL 输入框：自动验证 URL 格式 -->
<input type="url" placeholder="请输入网址">

<!-- 数字输入框：只允许输入数字 -->
<input type="number" min="1" max="100" step="1" value="50">

<!-- 日期选择器：弹出日期选择界面 -->
<input type="date">

<!-- 时间选择器：弹出时间选择界面 -->
<input type="time">

<!-- 日期时间选择器 -->
<input type="datetime-local">

<!-- 月份选择器 -->
<input type="month">

<!-- 星期选择器 -->
<input type="week">

<!-- 颜色选择器：弹出颜色选择器 -->
<input type="color">

<!-- 搜索输入框：在某些浏览器中会显示清除按钮 -->
<input type="search" placeholder="搜索...">

<!-- 电话输入框：在移动设备上会显示数字键盘 -->
<input type="tel" placeholder="请输入电话号码">

<!-- 范围输入框：滑块控件 -->
<input type="range" min="0" max="100" value="50">

表单属性

<!-- required：必填字段 -->
<input type="text" required>

<!-- placeholder：占位符文本 -->
<input type="text" placeholder="请输入内容">

<!-- autocomplete：自动完成 -->
<input type="text" autocomplete="on">

<!-- autofocus：自动聚焦 -->
<input type="text" autofocus>

<!-- pattern：正则表达式验证 -->
<input type="text" pattern="[0-9]{4}" title="请输入4位数字">

<!-- min/max/step：数值范围和步长 -->
<input type="number" min="1" max="100" step="5">

<!-- multiple：允许多选（用于文件输入） -->
<input type="file" multiple>

<!-- accept：指定文件类型 -->
<input type="file" accept="image/*">

实例：HTML5 表单

注意：不同浏览器对 HTML5 表单的支持程度可能不同，某些新特性可能需要 JavaScript 进行 polyfill。

4. 多媒体元素

HTML5 提供了 <audio> 和 <video> 元素，用于在网页中播放音频和视频。

音频元素

<!-- 基本音频播放器 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频元素
</audio>

<!-- 自动播放且循环 -->
<audio autoplay loop>
    <source src="background.mp3" type="audio/mpeg">
</audio>

视频元素

<!-- 基本视频播放器 -->
<video controls width="400" height="300">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频元素
</video>

<!-- 自动播放、静音、循环 -->
<video autoplay muted loop width="400" height="300">
    <source src="background.mp4" type="video/mp4">
</video>

实例：音频播放器

实例：视频播放器

注意：为了兼容性，建议提供多种格式的媒体文件（如 MP3/OGG 音频，MP4/WebM 视频）。

5. 本地存储

HTML5 提供了 localStorage 和 sessionStorage API，用于在客户端存储数据。

localStorage

localStorage 存储的数据会永久保存，除非手动清除。

// 存储数据
localStorage.setItem('username', '张三');
localStorage.setItem('age', '25');

// 获取数据
var username = localStorage.getItem('username');
console.log(username); // 输出：张三

// 删除数据
localStorage.removeItem('age');

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

// 遍历所有存储的数据
for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
    console.log(key + ': ' + value);
}

sessionStorage

sessionStorage 存储的数据仅在当前会话中有效，关闭浏览器标签后会被清除。

// 存储数据
sessionStorage.setItem('token', 'abc123');

// 获取数据
var token = sessionStorage.getItem('token');

// 删除数据
sessionStorage.removeItem('token');

// 清除所有数据
sessionStorage.clear();

实例：本地存储演示

姓名：

结果将显示在这里

注意：本地存储的容量通常为 5MB 左右，且只能存储字符串类型的数据。如果需要存储对象，需要使用 JSON.stringify() 和 JSON.parse() 进行转换。

6. 地理定位

HTML5 的 Geolocation API 允许获取用户的地理位置。

基本用法

// 检查浏览器是否支持地理定位
if (navigator.geolocation) {
    // 获取当前位置
    navigator.geolocation.getCurrentPosition(
        function(position) {
            // 成功回调
            var latitude = position.coords.latitude; // 纬度
            var longitude = position.coords.longitude; // 经度
            var accuracy = position.coords.accuracy; // 精度（米）
            
            console.log('纬度：' + latitude);
            console.log('经度：' + longitude);
            console.log('精度：' + accuracy + '米');
        },
        function(error) {
            // 错误回调
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    console.log('用户拒绝了地理定位请求');
                    break;
                case error.POSITION_UNAVAILABLE:
                    console.log('位置信息不可用');
                    break;
                case error.TIMEOUT:
                    console.log('获取位置超时');
                    break;
                case error.UNKNOWN_ERROR:
                    console.log('未知错误');
                    break;
            }
        },
        {
            // 选项
            enableHighAccuracy: true, // 启用高精度
            timeout: 5000, // 超时时间（毫秒）
            maximumAge: 0 // 缓存时间（毫秒）
        }
    );
} else {
    console.log('您的浏览器不支持地理定位');
}

实例：获取当前位置

位置信息将显示在这里

注意：使用地理定位 API 时，浏览器会向用户请求权限，用户需要同意后才能获取位置信息。

7. Web Workers

Web Workers 允许在后台线程中执行 JavaScript 代码，避免阻塞主线程。

基本用法

// 创建 Worker
var worker = new Worker('worker.js');

// 向 Worker 发送消息
worker.postMessage('Hello Worker!');

// 接收 Worker 发送的消息
worker.onmessage = function(event) {
    console.log('收到 Worker 的消息：' + event.data);
};

// 处理错误
worker.onerror = function(error) {
    console.error('Worker 错误：' + error.message);
};

// 终止 Worker
// worker.terminate();

worker.js 文件

// 接收主线程发送的消息
self.onmessage = function(event) {
    console.log('收到主线程的消息：' + event.data);
    
    // 执行耗时操作
    var result = 0;
    for (var i = 0; i < 1000000000; i++) {
        result += i;
    }
    
    // 向主线程发送结果
    self.postMessage('计算结果：' + result);
};

实例：Web Worker 计算示例

计算结果将显示在这里

注意：Web Workers 不能直接访问 DOM，只能通过消息与主线程通信。此外，由于安全限制，Worker 脚本必须与页面同源。

8. WebSocket

WebSocket 提供了浏览器与服务器之间的全双工通信通道。

基本用法

// 创建 WebSocket 连接
var socket = new WebSocket('ws://echo.websocket.org');

// 连接建立时
socket.onopen = function(event) {
    console.log('WebSocket 连接已建立');
    // 发送消息
    socket.send('Hello WebSocket!');
};

// 接收消息
socket.onmessage = function(event) {
    console.log('收到消息：' + event.data);
};

// 连接关闭时
socket.onclose = function(event) {
    console.log('WebSocket 连接已关闭');
};

// 发生错误时
socket.onerror = function(error) {
    console.error('WebSocket 错误：' + error);
};

// 关闭连接
// socket.close();

实例：WebSocket 演示

消息将显示在这里

注意：WebSocket 连接需要服务器端支持。上面的示例使用了公共的 echo 服务器，仅用于测试。

9. 拖放 API

HTML5 提供了拖放 API，允许用户通过鼠标拖放元素。

基本用法

<!-- 可拖动元素 -->
<div draggable="true" id="dragElement">可拖动的元素</div>

<!-- 放置目标 -->
<div id="dropTarget">放置目标</div>

<script>
    // 获取元素
    var dragElement = document.getElementById('dragElement');
    var dropTarget = document.getElementById('dropTarget');
    
    // 拖动开始时
    dragElement.addEventListener('dragstart', function(event) {
        // 设置拖动数据
        event.dataTransfer.setData('text/plain', '这是拖动的数据');
        // 设置拖动效果
        event.dataTransfer.effectAllowed = 'copy';
    });
    
    // 拖动结束时
    dragElement.addEventListener('dragend', function(event) {
        console.log('拖动结束');
    });
    
    // 拖动元素进入放置目标时
    dropTarget.addEventListener('dragenter', function(event) {
        // 阻止默认行为
        event.preventDefault();
        // 添加样式
        this.style.backgroundColor = '#e3f2fd';
    });
    
    // 拖动元素在放置目标上移动时
    dropTarget.addEventListener('dragover', function(event) {
        // 阻止默认行为，允许放置
        event.preventDefault();
    });
    
    // 拖动元素离开放置目标时
    dropTarget.addEventListener('dragleave', function(event) {
        // 恢复样式
        this.style.backgroundColor = '';
    });
    
    // 放置元素时
    dropTarget.addEventListener('drop', function(event) {
        // 阻止默认行为
        event.preventDefault();
        // 恢复样式
        this.style.backgroundColor = '';
        // 获取拖动数据
        var data = event.dataTransfer.getData('text/plain');
        console.log('放置的数据：' + data);
    });
</script>

实例：拖放示例

拖动我

放置在这里

拖放结果将显示在这里

10. 响应式设计

HTML5 配合 CSS3 的媒体查询，可以实现响应式设计，使页面在不同设备上显示良好。

媒体查询

<!-- 内部样式中的媒体查询 -->
<style>
    /* 默认样式 */
    body {
        font-size: 16px;
    }
    
    /* 当屏幕宽度小于 768px 时 */
    @media (max-width: 768px) {
        body {
            font-size: 14px;
        }
        
        .container {
            width: 100%;
            padding: 10px;
        }
    }
    
    /* 当屏幕宽度小于 480px 时 */
    @media (max-width: 480px) {
        body {
            font-size: 12px;
        }
        
        .container {
            padding: 5px;
        }
    }
</style>

响应式图片

<!-- 使用 srcset 属性提供不同分辨率的图片 -->
<img 
    src="small.jpg" 
    srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" 
    sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1200px" 
    alt="响应式图片"
>

<!-- 使用 picture 元素根据屏幕尺寸选择图片 -->
<picture>
    <source media="(max-width: 480px)" srcset="small.jpg">
    <source media="(max-width: 768px)" srcset="medium.jpg">
    <img src="large.jpg" alt="响应式图片">
</picture>

实例：响应式布局

区块 1

区块 2

区块 3

尝试调整浏览器窗口大小，观察区块布局的变化。

注意：响应式设计需要考虑不同设备的屏幕尺寸和用户体验，除了媒体查询外，还可以使用弹性布局（Flexbox）和网格布局（Grid）来实现更灵活的布局。

11. 其他 HTML5 特性

1. 内容可编辑

<!-- 使元素内容可编辑 -->
<div contenteditable="true">点击此处编辑内容...</div>

2. 数据属性

<!-- 使用 data-* 属性存储自定义数据 -->
<div data-user-id="123" data-user-name="张三">用户信息</div>

<script>
    var element = document.querySelector('div');
    var userId = element.dataset.userId; // 获取数据属性
    var userName = element.dataset.userName;
    
    console.log('用户ID：' + userId); // 输出：用户ID：123
    console.log('用户名：' + userName); // 输出：用户名：张三
    
    // 设置数据属性
    element.dataset.userAge = '25';
</script>

3. 输出元素

<!-- 用于显示计算结果 -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

4. 进度条和度量

<!-- 进度条 -->
<progress value="70" max="100">70%</progress>

<!-- 度量 -->
<meter value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.5">60%</meter>

5. 详情和摘要

<!-- 可展开/折叠的内容 -->
<details>
    <summary>点击查看详细信息</summary>
    <p>这里是详细信息内容...</p>
</details>

实例：内容可编辑

点击此处编辑内容...

实例：数据属性

用户信息

实例：进度条和度量

下载进度： 70% 70%

完成度： 60% 60%

实例：详情和摘要

点击查看详细信息

这里是详细信息内容，包括HTML5的各种新特性和用法。HTML5为网页开发带来了许多新的功能，如语义化标签、Canvas、本地存储、地理位置等。通过学习这些特性，可以创建更加丰富和交互性强的网页应用。

12. 总结

HTML5 引入了许多新特性，使网页开发更加丰富和强大。以下是 HTML5 的主要特性：

语义化标签：使页面结构更清晰，有助于 SEO
Canvas：用于绘制图形、动画等
表单增强：新的表单类型和属性，提供更好的用户体验
多媒体元素：内置的音频和视频播放器
本地存储：localStorage 和 sessionStorage
地理定位：获取用户的地理位置
Web Workers：在后台线程中执行代码
WebSocket：实时双向通信
拖放 API：实现元素的拖放功能
响应式设计：配合 CSS3 媒体查询实现
其他特性：内容可编辑、数据属性、输出元素等

通过学习和掌握这些特性，可以创建更加现代化、交互性强的网页应用。