Web前端105天-day64-HTML5_CORE

HTML5 是 HTML 的第五次重大修改。它不仅为现代 web 开发提供了一套强大的标签，还引入了新的功能，比如 Canvas 2D 上下文、SVG、地理位置 API、多媒体标签等。

HTML5 的核心特性包括新的语义标签、Canvas 绘图、本地存储、WebSocket 通信等。

以下是一些简单的 HTML5 示例代码：

使用语义化标签：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>头部信息</header>
    <nav>导航链接</nav>
    <section>
        <article>
            <header>
                <h1>文章标题</h1>
            </header>
            <p>文章内容...</p>
            <footer>
                <ul>
                    <li>标签1</li>
                    <li>标签2</li>
                </ul>
            </footer>
        </article>
    </section>
    <aside>侧边信息</aside>
    <footer>底部信息</footer>
</body>
</html>

使用 Canvas 绘图：




<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
        您的浏览器不支持Canvas。
    </canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

使用本地存储：




<!DOCTYPE html>
<html>
<body>
    <p>点击按钮设置本地存储数据，然后点击获取按钮获取数据。</p>
    <button onclick="setLocalStorage()">设置本地存储数据</button>
    <button onclick="getLocalStorage()">获取本地存储数据</button>
    <p id="demo"></p>
    <script>
        function setLocalStorage() {
            localStorage.setItem('key', 'value');
        }
        function getLocalStorage() {
            var value = localStorage.getItem('key');
            document.getElementById('demo').innerHTML = value;
        }
    </script>
</body>
</html>

使用 WebSocket：




<!DOCTYPE html>
<html>
<body>
    <button onclick="connectWebSocket()">连接WebSocket</button>
    <button onclick="sendMessage()">发送消息</button>
    <p id="demo"></p>
    <script>
        var ws = new WebSocket('ws://localhost:8080');
        ws.onopen = function() {
            console.log('连接已打开...');
        };
        ws.onmessage = function(event) {
            console.log('收到消息: ' + event.data);
            document.getElementById('demo').innerHTML = event.data;
        };
        ws.onclose = function() {
            console.log('连接已关闭...');
        };
        function connectWebSocket() {
            // 连接到WebSocket服务器
        }
        function sendMessage() {
            // 发送消

Web前端105天-day64-HTML5_CORE

评论已关闭

推荐阅读