HTML5简介

HTML5，作为现代网页开发的基石，自2014年成为主流以来，已经深刻地改变了我们构建网页的方式。它不仅提供了丰富的API，还增强了网页的表现力和交互性。从零开始学习HTML5，你将掌握构建现代网页的核心技术。

HTML5基础知识

1. HTML5结构

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5结构示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

2. HTML5表单

HTML5引入了新的表单元素和属性，如<input type="email">, <input type="tel">, <input type="date">等，这些元素使得表单的创建和验证更加简单。

<form>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="phone">电话：</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}">
    <br>
    <input type="submit" value="提交">
</form>

HTML5高级特性

1. Canvas

Canvas是HTML5中用于绘制图形的元素。它允许你使用JavaScript进行绘图，创建复杂的图形和动画。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 100);
</script>

2. SVG

SVG（可缩放矢量图形）是另一种在网页上绘制图形的方法。与Canvas不同，SVG图形是可缩放的，这意味着它们可以在任何大小的屏幕上保持清晰。

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

实战案例

1. 制作一个简单的博客

使用HTML5构建一个简单的博客，包括文章列表、文章详情页和评论功能。

2. 创建一个交互式地图

利用HTML5的Geolocation API和SVG，创建一个可以显示用户位置的交互式地图。

总结

通过学习HTML5的核心技术，你可以构建更加丰富和动态的网页。从基础知识到高级特性，每个部分都是构建现代网页不可或缺的一部分。不断实践和探索，你将能够创造出令人惊叹的网页作品。