HTML5 简介

HTML5，作为现代网页开发的核心技术之一，自推出以来就受到了广泛关注。它不仅提供了丰富的API，还增强了网页的表现力和交互性。本教程将带你轻松上手HTML5编程，通过实战案例，让你快速掌握HTML5的核心技能。

HTML5 基础知识

1. HTML5 基本结构

HTML5 文档的基本结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. HTML5 新增元素

HTML5 引入了许多新元素，如 <article>, <section>, <nav>, <header>, <footer> 等，这些元素有助于提高网页的结构性和语义化。

3. HTML5 属性

HTML5 增加了一些新的属性，如 placeholder, autofocus, required 等，这些属性可以增强表单的可用性和用户体验。

实战案例：制作一个简单的博客页面

1. 页面布局

首先，我们需要设计一个简单的博客页面布局。以下是一个简单的HTML5页面结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        header {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
        article {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
        }
        footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的博客</h1>
    </header>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

2. 添加图片

为了使页面更加生动，我们可以添加一张图片。以下是如何在文章中插入图片：

<img src="image.jpg" alt="文章配图" width="300">

3. 添加视频

HTML5 支持多种视频格式，如 MP4、WebM 和 Ogg。以下是如何在页面中添加视频：

<video controls>
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持视频标签。
</video>

总结

通过本教程，你已成功制作了一个简单的博客页面。这只是HTML5编程的冰山一角，接下来，你可以学习更多高级特性，如 Canvas、SVG、Web Storage 等。不断实践，相信你将成为一名优秀的HTML5开发者！