HTML5 教程
HTML5 简介HTML5 语义元素HTML5 表单HTML5 音频和视频HTML5 CanvasHTML5 本地存储HTML5 地理定位HTML5 Web WorkerHTML5 拖放 APIHTML5 离线应用
首页 > HTML 教程 > HTML5 教程

HTML5 简介

HTML5 是 HTML 标准的最新版本。

什么是 HTML5

HTML5 是 HTML 标准的第五个版本，于2014年正式发布。HTML5 引入了许多新的语义元素、多媒体支持、图形绘制和离线存储等功能，大大增强了 Web 应用的能力。

HTML5 的新特性

HTML5 的新特性包括：语义化标签、表单增强、音视频支持、Canvas 绘图、本地存储、Web Worker、地理定位等。

HTML5 语义元素

HTML5 引入的语义化标签使文档结构更清晰。

新增语义标签

HTML5 新增了多个语义化标签，用于定义文档的不同部分。

<header>定义页面或区块的头部</header>
<nav>定义导航链接</nav>
<main>定义主要内容区域</main>
<article>定义独立的文章内容</article>
<section>定义文档中的节</section>
<aside>定义侧边栏内容</aside>
<footer>定义页面或区块的底部</footer>

使用语义标签

语义化标签让搜索引擎和开发者更容易理解页面结构。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>语义化页面</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    <footer>&copy; 2024</footer>
</body>
</html>

HTML5 表单

HTML5 大幅增强了表单功能。

新的输入类型

HTML5 新增了多种输入类型。

<input type="email">      <!-- 邮箱 -->
<input type="url">        <!-- URL -->
<input type="tel">        <!-- 电话 -->
<input type="search">     <!-- 搜索 -->
<input type="number">     <!-- 数字 -->
<input type="range">     <!-- 范围 -->
<input type="color">     <!-- 颜色 -->
<input type="date">      <!-- 日期 -->
<input type="time">      <!-- 时间 -->
<input type="datetime-local"> <!-- 本地日期时间 -->

表单属性

HTML5 新增了多个表单属性。

<form novalidate>              <!-- 关闭验证 -->
<input required>                <!-- 必填 -->
<input placeholder="提示文字">   <!-- 占位符 -->
<input pattern="[A-Za-z]{3}">   <!-- 正则验证 -->
<input autofocus>               <!-- 自动聚焦 -->
<input autocomplete="off">     <!-- 自动完成 -->

HTML5 音频和视频

HTML5 原生支持音视频播放。

audio 标签

使用 audio 标签嵌入音频。

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素
</audio>

video 标签

使用 video 标签嵌入视频。

<video width="640" height="480" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 元素
</video>

HTML5 Canvas

Canvas 用于绘制图形和动画。

创建 Canvas

使用 canvas 标签创建画布。

<canvas id="myCanvas" width="500" height="300">
    您的浏览器不支持 canvas
</canvas>

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

绘制路径

使用 Canvas API 绘制各种图形。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 绘制圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "blue";
ctx.fill();

// 绘制线条
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(300, 150);
ctx.strokeStyle = "red";
ctx.stroke();

HTML5 本地存储

HTML5 提供了客户端数据存储方案。

localStorage

localStorage 用于持久化存储数据。

// 存储数据
localStorage.setItem("username", "Tom");
localStorage.setItem("theme", "dark");

// 读取数据
const username = localStorage.getItem("username");
const theme = localStorage.getItem("theme");

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

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

sessionStorage

sessionStorage 用于会话级存储，关闭浏览器后数据丢失。

// 存储数据（会话级）
sessionStorage.setItem("pageLoadCount", "1");

// 读取数据
const count = sessionStorage.getItem("pageLoadCount");

// 删除数据
sessionStorage.removeItem("pageLoadCount");

HTML5 地理定位

使用 Geolocation API 获取用户位置。

获取位置

使用 navigator.geolocation 获取用户位置。

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            console.log("纬度: " + lat + ", 经度: " + lng);
        },
        function(error) {
            console.log("获取位置失败: " + error.message);
        }
    );
} else {
    console.log("浏览器不支持地理定位");
}

HTML5 Web Worker

Web Worker 允许在后台线程运行脚本。

创建 Web Worker

Web Worker 用于在后台执行耗时任务。

// main.js
const worker = new Worker("worker.js");

worker.onmessage = function(event) {
    console.log("计算结果: " + event.data);
};

worker.postMessage(1000000);

// worker.js
self.onmessage = function(event) {
    let result = 0;
    for (let i = 0; i < event.data; i++) {
        result += i;
    }
    self.postMessage(result);
};

HTML5 拖放 API

HTML5 提供了原生的拖放功能。

拖放元素

使用 draggable 属性使元素可拖动。

<!-- 拖动源 -->
<img src="image.png" draggable="true" id="dragImage">

<!-- 放置目标 -->
<div id="dropZone" style="width: 200px; height: 200px; border: 1px dashed #ccc;">
    拖放图片到这里
</div>

<script>
    const img = document.getElementById("dragImage");
    const zone = document.getElementById("dropZone");
    
    img.addEventListener("dragstart", function(e) {
        e.dataTransfer.setData("text", e.target.id);
    });
    
    zone.addEventListener("dragover", function(e) {
        e.preventDefault();
    });
    
    zone.addEventListener("drop", function(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData("text");
        zone.appendChild(document.getElementById(data));
    });
</script>

HTML5 离线应用

使用 Application Cache 创建离线应用。

离线缓存清单

使用 manifest 文件指定需要缓存的资源。

<!-- index.html -->
<html manifest="app.appcache">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>离线应用</h1>
        <script src="app.js"></script>
    </body>
</html>

<!-- app.appcache -->
CACHE MANIFEST
# version 1.0

CACHE:
/index.html
style.css
app.js
logo.png

NETWORK:
/api/
上一篇HTML 教程
下一篇CSS 教程