HTML5 高级特性

HTML5 概述

HTML5 是 HTML 的最新版本，引入了许多新特性和 API，使得 Web 开发更加丰富和强大。这些特性不仅增强了网页的功能，还提高了开发效率和用户体验。

语义化标签

常用语义化标签

<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
    
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li><a href="#">相关文章 1</a></li>
            <li><a href="#">相关文章 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>版权所有 &copy; 2024</p>
</footer>

语义化标签的优势

• 提高代码可读性和可维护性
• 有助于搜索引擎优化 (SEO)
• 改善屏幕阅读器的可访问性
• 使文档结构更加清晰

Canvas 绘图

基本用法

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // 绘制矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 100, 50);
    
    // 绘制圆形
    ctx.beginPath();
    ctx.arc(200, 100, 50, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
    
    // 绘制文本
    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('Hello Canvas!', 50, 150);
</script>

常用 Canvas API

• fillRect() - 绘制填充矩形
• strokeRect() - 绘制矩形边框
• clearRect() - 清除矩形区域
• beginPath() - 开始新路径
• moveTo() - 移动到指定点
• lineTo() - 绘制直线
• arc() - 绘制圆弧
• fill() - 填充路径
• stroke() - 绘制路径边框
• fillText() - 绘制填充文本
• strokeText() - 绘制文本边框

SVG 矢量图形

基本用法

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- 绘制矩形 -->
    <rect x="10" y="10" width="100" height="50" fill="red" />
    
    <!-- 绘制圆形 -->
    <circle cx="200" cy="100" r="50" fill="blue" />
    
    <!-- 绘制文本 -->
    <text x="50" y="150" font-family="Arial" font-size="20" fill="black">
        Hello SVG!
    </text>
    
    <!-- 绘制路径 -->
    <path d="M 10 180 Q 100 120 200 180 T 400 180" stroke="green" stroke-width="2" fill="none" />
</svg>

SVG 与 Canvas 的比较

特性	SVG	Canvas
绘制方式	基于矢量	基于像素
可扩展性	无损缩放	缩放会失真
事件处理	可以为元素添加事件	需自行实现事件检测
性能	复杂图形性能较差	复杂图形性能较好
适用场景	图标、徽标、简单图形	游戏、复杂动画、数据可视化

地理定位

基本用法

<button onclick="getLocation()">获取位置</button>
<p id="location"></p>

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        document.getElementById('location').innerHTML = "您的浏览器不支持地理定位。";
    }
}

function showPosition(position) {
    document.getElementById('location').innerHTML = 
        "纬度: " + position.coords.latitude + "<br>" +
        "经度: " + position.coords.longitude;
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            document.getElementById('location').innerHTML = "用户拒绝了地理定位请求。";
            break;
        case error.POSITION_UNAVAILABLE:
            document.getElementById('location').innerHTML = "位置信息不可用。";
            break;
        case error.TIMEOUT:
            document.getElementById('location').innerHTML = "获取位置超时。";
            break;
        case error.UNKNOWN_ERROR:
            document.getElementById('location').innerHTML = "发生未知错误。";
            break;
    }
}
</script>

地理定位 API 方法

• getCurrentPosition() - 获取当前位置
• watchPosition() - 监视位置变化
• clearWatch() - 清除位置监视

本地存储

localStorage

<button onclick="saveData()">保存数据</button>
<button onclick="loadData()">加载数据</button>
<p id="data"></p>

<script>
function saveData() {
    localStorage.setItem('name', 'John');
    localStorage.setItem('age', '30');
    document.getElementById('data').innerHTML = "数据已保存";
}

function loadData() {
    const name = localStorage.getItem('name');
    const age = localStorage.getItem('age');
    document.getElementById('data').innerHTML = "姓名: " + name + "<br>年龄: " + age;
}
</script>

sessionStorage

// 保存数据到 sessionStorage
sessionStorage.setItem('username', 'admin');

// 从 sessionStorage 获取数据
const username = sessionStorage.getItem('username');

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

// 清空 sessionStorage
sessionStorage.clear();

localStorage 与 sessionStorage 的区别

特性	localStorage	sessionStorage
存储时间	持久化，除非手动删除	会话期间，关闭浏览器后清除
作用域	同一域名下的所有窗口	仅当前窗口
存储容量	约 5MB	约 5MB

Web Workers

基本用法

<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<p id="result"></p>

<script>
let worker;

function startWorker() {
    if (typeof(Worker) !== "undefined") {
        if (typeof(worker) == "undefined") {
            worker = new Worker("worker.js");
        }
        worker.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "您的浏览器不支持 Web Workers。";
    }
}

function stopWorker() {
    worker.terminate();
    worker = undefined;
}
</script>

worker.js

let i = 0;

function timedCount() {
    i++;
    postMessage(i);
    setTimeout(timedCount, 1000);
}

timedCount();

Web Socket

基本用法

<button onclick="connectWebSocket()">连接 WebSocket</button>
<button onclick="sendMessage()">发送消息</button>
<p id="messages"></p>

<script>
let socket;

function connectWebSocket() {
    socket = new WebSocket("wss://echo.websocket.org");
    
    socket.onopen = function(event) {
        document.getElementById("messages").innerHTML += "连接已建立<br>";
    };
    
    socket.onmessage = function(event) {
        document.getElementById("messages").innerHTML += "收到: " + event.data + "<br>";
    };
    
    socket.onclose = function(event) {
        document.getElementById("messages").innerHTML += "连接已关闭<br>";
    };
    
    socket.onerror = function(error) {
        document.getElementById("messages").innerHTML += "错误: " + error.message + "<br>";
    };
}

function sendMessage() {
    const message = "Hello WebSocket!";
    socket.send(message);
    document.getElementById("messages").innerHTML += "发送: " + message + "<br>";
}
</script>

拖放功能

基本用法

<div id="dragSource" draggable="true" style="width: 100px; height: 100px; background: red; margin: 10px;">
    可拖动元素
</div>

<div id="dropTarget" style="width: 200px; height: 200px; border: 2px dashed black; margin: 10px;">
    放置目标
</div>

<script>
const dragSource = document.getElementById('dragSource');
const dropTarget = document.getElementById('dropTarget');

// 拖动开始事件
dragSource.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', '这是拖动的数据');
    dragSource.style.opacity = '0.5';
});

// 拖动结束事件
dragSource.addEventListener('dragend', function(event) {
    dragSource.style.opacity = '1';
});

// 拖动经过事件
dropTarget.addEventListener('dragover', function(event) {
    event.preventDefault(); // 允许放置
    dropTarget.style.backgroundColor = 'lightgray';
});

// 拖动离开事件
dropTarget.addEventListener('dragleave', function(event) {
    dropTarget.style.backgroundColor = 'white';
});

// 放置事件
dropTarget.addEventListener('drop', function(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData('text/plain');
    dropTarget.innerHTML = '已放置: ' + data;
    dropTarget.style.backgroundColor = 'white';
});
</script>

实践练习

1. 使用 Canvas 创建一个简单的绘图应用
2. 使用 SVG 创建一个复杂的图形
3. 实现地理定位功能，显示用户当前位置
4. 使用 localStorage 存储用户偏好设置
5. 创建一个使用 Web Worker 的后台计算任务
6. 实现拖放功能，允许用户拖动元素

常见问题

1. 浏览器兼容性

• 检查特性的浏览器支持情况
• 使用 polyfill 或降级方案
• 使用特性检测

2. 性能问题

• Canvas 绘制复杂图形时注意性能
• 本地存储不要存储过多数据
• Web Worker 不要创建过多

3. 安全问题

• 地理定位需要用户授权
• Web Socket 连接需要注意安全
• 本地存储的数据可能被访问

小结

• HTML5 引入了许多强大的新特性和 API
• 语义化标签提高了代码的可读性和可维护性
• Canvas 和 SVG 提供了丰富的图形绘制能力
• 地理定位、本地存储等 API 增强了 Web 应用的功能
• Web Worker 和 Web Socket 提高了应用的性能和实时性
• 拖放功能改善了用户体验

下一章我们将学习 HTML 可访问性，了解如何创建更加包容的网页。