第一部分：HTML5简介与基础

HTML5概述

HTML5，即第五代超文本标记语言，是当前网页设计的标准。相较于前几代HTML，HTML5增加了许多新特性，如语义化标签、离线存储、多媒体支持等，使得网页设计更加现代化。

HTML5基本结构

HTML5的基本结构包括文档类型声明、根元素、头部和主体。以下是一个简单的HTML5文档结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML5页面</title>
</head>
<body>
    <h1>欢迎来到我的HTML5页面</h1>
    <p>这里是网页内容</p>
</body>
</html>

HTML5语义化标签

HTML5引入了许多语义化标签，如<header>, <footer>, <article>, <section>等，这些标签有助于提高网页的可读性和搜索引擎优化（SEO）。

第二部分：HTML5实战技巧

离线存储：localStorage与sessionStorage

localStorage和sessionStorage是HTML5提供的离线存储机制，可以用于存储大量数据。以下是一个使用localStorage的示例：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');
console.log(value); // 输出：value

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

多媒体支持：audio与video标签

HTML5提供了<audio>和<video>标签，用于嵌入音频和视频文件。以下是一个使用audio标签的示例：

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

表单元素：新特性与示例

HTML5引入了许多新的表单元素，如<input type="email">, <input type="date">, <input type="number">等。以下是一个使用这些新特性的示例：

<form>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="birthday">生日：</label>
    <input type="date" id="birthday" name="birthday">
    <br>
    <label for="number">数字：</label>
    <input type="number" id="number" name="number" min="1" max="10">
    <br>
    <input type="submit" value="提交">
</form>

第三部分：实战项目：制作一个简单的博客页面

项目目标

通过本实战项目，你将学习如何使用HTML5制作一个简单的博客页面，包括文章列表、文章详情页等。

项目步骤

  1. 设计页面布局：确定页面结构，包括头部、侧边栏、文章列表、文章详情页等。
  2. 创建HTML5文档：编写HTML5代码，使用语义化标签和样式。
  3. 添加CSS样式：美化页面，设置字体、颜色、间距等。
  4. 添加JavaScript交互：实现文章列表的跳转、文章详情页的加载等。

项目示例代码

以下是一个简单的博客页面示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <style>
        /* CSS样式 */
        body {
            font-family: Arial, sans-serif;
        }
        header {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
        article {
            margin-bottom: 20px;
        }
        .article-title {
            font-size: 24px;
            color: #333;
        }
        .article-content {
            margin-top: 10px;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的博客</h1>
    </header>
    <article>
        <h2 class="article-title">第一篇文章</h2>
        <p class="article-content">这里是文章内容...</p>
    </article>
    <article>
        <h2 class="article-title">第二篇文章</h2>
        <p class="article-content">这里是文章内容...</p>
    </article>
</body>
</html>

第四部分：总结与展望

通过本课程，你已掌握了HTML5的基本知识、实战技巧以及制作一个简单的博客页面。HTML5是现代网页设计的基石，希望你在今后的学习中继续深入研究，不断提高自己的技能。随着Web技术的不断发展，相信HTML5将会带来更多的精彩应用。