HTML5新特性

HTML5是HTML的重大升级，引入语义化、多媒体、绘图、存储等核心新特性。

语义化标签

页面结构标签

<header>头部区域</header>
<nav>导航区域</nav>
<main>主内容区</main>
<article>独立文章</article>
<section>章节区块</section>
<aside>侧边内容</aside>
<footer>底部区域</footer>

内容标签

<figure>
    <img src="image.jpg" alt="图片">
    <figcaption>图片说明</figcaption>
</figure>

<mark>高亮文本</mark>
<time datetime="2024-05-17">2024年5月17日</time>
<progress value="50" max="100"></progress>
<meter value="0.6" min="0" max="1"></meter>

原生多媒体

视频标签

<video src="video.mp4" controls autoplay muted loop poster="cover.jpg">
</video>

音频标签

<audio src="music.mp3" controls autoplay loop>
</audio>

HTML5原生支持音视频，无需Flash插件。

表单增强

新input类型

<input type="email">           <!-- 邮箱验证 -->
<input type="url">             <!-- URL验证 -->
<input type="tel">             <!-- 电话 -->
<input type="number">          <!-- 数值 -->
<input type="range">           <!-- 滑块 -->
<input type="date">            <!-- 日期 -->
<input type="time">            <!-- 时间 -->
<input type="datetime-local">  <!-- 本地日期时间 -->
<input type="month">           <!-- 月份 -->
<input type="week">            <!-- 周 -->
<input type="color">           <!-- 颜色选择 -->
<input type="search">          <!-- 搜索框 -->

新表单属性

<input placeholder="提示文字">
<input required>
<input pattern="[A-Za-z]{3}">
<input autofocus>
<input autocomplete="off">
<input list="datalist">

<datalist id="datalist">
    <option value="HTML">
    <option value="CSS">
    <option value="JavaScript">
</datalist>

Canvas绘图

基础用法

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

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillRect(10, 10, 100, 80);

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

    // 绘制文本
    ctx.fillText('Hello Canvas', 10, 200);
</script>

Canvas用途

• 绘图、图表、动画
• 游戏、图像处理
• 数据可视化

本地存储

localStorage

// 存储
localStorage.setItem('name', '张三');

// 读取
const name = localStorage.getItem('name');

// 删除
localStorage.removeItem('name');

// 清空
localStorage.clear();

sessionStorage

// 存储（仅当前会话有效）
sessionStorage.setItem('token', 'abc123');

// 读取
const token = sessionStorage.getItem('token');

对比

其他新特性

拖拽API

<div draggable="true" ondragstart="drag(event)">可拖拽元素</div>

<script>
    function drag(ev) {
        ev.dataTransfer.setData('text', ev.target.id);
    }
</script>

地理位置

navigator.geolocation.getCurrentPosition(function(pos) {
    console.log(pos.coords.latitude);   // 纬度
    console.log(pos.coords.longitude);  // 经度
});

Web Workers

// 后台线程执行复杂任务
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {
    console.log(e.data);
};

WebSocket

// 实时双向通信
const ws = new WebSocket('ws://example.com/socket');
ws.onmessage = function(e) {
    console.log(e.data);
};
ws.send('Hello');

新特性速查表

要点总结

1. 语义化：优先使用语义化标签构建页面
2. 多媒体：原生video/audio替代Flash
3. 表单增强：利用新type实现原生验证
4. 本地存储：替代cookie存储大量数据