HTML5 – 概览

HTML5是HTML标准的第五个版本，是一种最新的网页标记语言，提供了丰富的新功能和语义元素，使得我们可以创建更好的网站和应用程序。HTML5也是现代web应用程序的基础，是创建跨平台移动应用程序的核心技术之一。本文将介绍HTML5的一些重要特性和用法，帮助你更好地了解和使用HTML5。

语义元素

在HTML5中引入了许多新的语义元素，例如<header>、<footer>、<nav>、<article>等等。这些元素用于更好地定义网站内容的结构和意义，让搜索引擎更好地理解我们的页面内容，从而提高搜索结果的质量。下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>语义元素示例</title>
</head>
<body>
    <header>
        <h1>这是网页的头部</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>这是一篇文章标题</h2>
        <p>这是文章的内容</p>
    </article>
    <footer>
        <p>版权所有 © 2021</p>
    </footer>
</body>
</html>

上面的例子中使用了<header>、<nav>、<article>和<footer>等语义元素。

媒体元素

HTML5还提供了一些新的媒体元素，包括<audio>和<video>等。这些元素使得我们可以方便地在网页中添加和播放音频、视频等媒体内容。下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>媒体元素示例</title>
</head>
<body>
    <h1>这是一个音频文件</h1>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
    <h1>这是一个视频文件</h1>
    <video controls>
        <source src="video.mp4" type="video/mp4">
    </video>
</body>
</html>

上面的例子中使用了<audio>和<video>元素，并用controls属性添加了播放器控制面板。

Canvas

HTML5的Canvas元素让我们可以使用JavaScript在网页上绘制2D和3D图形，创建交互式动画和游戏等。下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "red";
        context.fillRect(10, 10, 50, 50);
    </script>
</body>
</html>

上面的例子中创建了一个200×100的Canvas元素，并在其中绘制了一个50×50的红色正方形。

WebSocket

HTML5的WebSocket API让我们可以在网页中创建持久的双向通信管道。通过WebSocket，我们可以实时发送和接收数据，使用这种技术可以创建实时聊天、在线游戏等交互性强的应用程序。下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket示例</title>
</head>
<body>
    <input type="text" id="message" placeholder="输入消息">
    <button id="send">发送</button>
    <div id="output"></div>
    <script>
        var socket =new WebSocket("ws://localhost:8080");

        socket.onopen = function(event) {
            console.log("连接已建立");
        };

        socket.onmessage = function(event) {
            var data = event.data;
            var div = document.createElement("div");
            div.textContent = data;
            document.getElementById("output").appendChild(div);
        };

        document.getElementById("send").addEventListener("click", function() {
            var message = document.getElementById("message").value;
            socket.send(message);
        });
    </script>
</body>
</html>

上面的例子中创建了一个WebSocket，在用户输入消息后点击发送按钮，会将消息发送给服务器端，服务器端再将消息返回给客户端，客户端将消息显示在页面上。

图形化API

HTML5还提供了一些新的图形化API，例如SVG、CSS3等，这些API可以使我们创建更加丰富和动态的图形界面。下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>图形化API示例</title>
    <style>
        .spinner {
            animation: rotate 2s linear infinite;
            transform-origin: 50% 50%;
            border: solid 2px transparent;
            border-top-color: blue;
            border-radius: 50%;
            height: 30px;
            width: 30px;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="spinner"></div>
</body>
</html>

上面的例子中创建了一个旋转的圆形动画，使用CSS3的@keyframes和transform属性来实现动画效果。