掌握HTML5核心技能，挑战你的工程师培训知识大试卷！

第一部分：HTML5基础

1. HTML5是什么？

HTML5是第五代超文本标记语言的简称，它于2014年成为正式的W3C标准。HTML5带来了许多新的功能和改进，使得网页设计和开发更加高效和强大。

2. HTML5的新特性有哪些？

语义化标签：如<article>, <section>, <nav>, <aside>等，有助于提高网页的可读性和SEO优化。
多媒体支持：HTML5原生支持音频和视频，无需使用Flash插件。
离线存储：通过Application Cache和IndexedDB提供离线存储功能。
绘图能力：引入了<canvas>元素，用于二维图形绘制。
新表单控件：如<input type="date">, <input type="email">等，增强了表单的功能性。

3. HTML5文档结构示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Document</title>
</head>
<body>
    <header>
        <h1>Document Title</h1>
    </header>
    <nav>
        <!-- 导航链接 -->
    </nav>
    <main>
        <article>
            <!-- 文章内容 -->
        </article>
        <section>
            <!-- 区域内容 -->
        </section>
    </main>
    <footer>
        <!-- 页脚内容 -->
    </footer>
</body>
</html>

第二部分：HTML5高级技能

4. 如何使用HTML5的离线存储？

HTML5提供了两种离线存储的方法：Application Cache和IndexedDB。

Application Cache

<!DOCTYPE html>
<html manifest="appcache.appcache">
<head>
    <meta charset="UTF-8">
    <title>Application Cache Example</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

// appcache.appcache文件内容
CACHE MANIFEST
CACHE:
    index.html
    style.css
    script.js
NETWORK:
    *

IndexedDB

// 示例：创建一个数据库
var openRequest = indexedDB.open('myDatabase', 1);

openRequest.onupgradeneeded = function(e) {
    var db = e.target.result;
    if (!db.objectStoreNames.contains('users')) {
        db.createObjectStore('users', {keyPath: 'id'});
    }
};

openRequest.onsuccess = function(e) {
    var db = e.target.result;
    // 存储数据
    var transaction = db.transaction(['users'], 'readwrite');
    var store = transaction.objectStore('users');
    store.add({id: 1, name: 'Alice'});
};

5. HTML5的绘图能力

使用<canvas>元素进行绘图的基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Example</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
        Your browser does not support the canvas element.
    </canvas>
</body>
</html>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);

第三部分：实战测试

6. 实战测试题

请简述HTML5相比HTML4有哪些主要改进？
解释HTML5中语义化标签的作用和意义。
如何使用HTML5的离线存储功能？
请编写一个简单的HTML5页面，包含标题、导航、文章内容和页脚。
使用JavaScript在<canvas>元素上绘制一个矩形。

完成以上题目，你可以检验自己对HTML5核心技能的掌握程度。祝你学习愉快！