引言

HTML5作为现代网页开发的核心技术之一，自从推出以来就受到了广泛关注。本文将集结一些大学期末作业中的HTML5编程精华，帮助读者深入了解HTML5的特性和应用。

HTML5基础

1. HTML5新标签

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

<!DOCTYPE html>
<html>
<head>
    <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>
        </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">等，这些元素有助于提高表单的可用性和用户体验。

<!DOCTYPE html>
<html>
<head>
    <title>HTML5表单元素示例</title>
</head>
<body>
    <form>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
        <br>
        <label for="tel">电话：</label>
        <input type="tel" id="tel" name="tel">
        <br>
        <label for="date">日期：</label>
        <input type="date" id="date" name="date">
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

HTML5高级特性

1. Canvas绘图

Canvas是HTML5中用于在网页上绘制图形的一个元素。以下是一个简单的Canvas绘图示例：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas绘图示例</title>
</head>
<body>
    <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>
</body>
</html>

2. SVG图形

SVG（可缩放矢量图形）是一种用于创建矢量图形的XML标记语言。以下是一个简单的SVG图形示例：

<!DOCTYPE html>
<html>
<head>
    <title>SVG图形示例</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
</body>
</html>

总结

本文集结了一些大学期末作业中的HTML5编程精华，旨在帮助读者更好地了解HTML5的特性和应用。通过学习这些内容，读者可以提升自己的HTML5编程能力，为未来的网页开发打下坚实基础。