HTML5【新特性总结】

这篇文章距离上次修改已过436天，其中的内容可能已经有所变动。

HTML5 引入了许多新特性，以下是一些主要的：

语义化标签：HTML5 提供了一些新的语义化标签，如 <header>, <nav>, <section>, <article>, <aside>, 和 <footer>，这些标签可以让页面更容易阅读和理解。
画布（Canvas）：HTML5 的 <canvas> 元素可以通过 JavaScript 来创建图形，这是一种替代 Flash 的方式。
视频和音频：HTML5 提供了 <video> 和 <audio> 标签来嵌入视频和音频内容。
表单控件：HTML5 增加了色彩选择器、日期选择器、时间选择器、数字输入框等表单控件。
本地存储：HTML5 的 Web Storage API 允许网页本地存储数据（如 localStorage 和 sessionStorage）。
地理定位：HTML5 的 Geolocation API 可以获取用户的地理位置信息。
Web Workers：HTML5 的 Web Workers API 允许在后台运行脚本，不影响用户界面的交互。
WebSocket：HTML5 引入了 WebSocket API，提供了在用户浏览器和服务器之间建立一个双向通信的通道。

示例代码：




<!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>
        </ul>
    </nav>
    <section>
        <h2>最新新闻</h2>
        <article>
            <h3>新闻标题</h3>
            <p>新闻内容...</p>
        </article>
    </section>
    <aside>
        <h4>侧边栏</h4>
        <p>侧边内容...</p>
    </aside>
    <footer>
        <p>版权信息</p>
    </footer>
 
    <!-- 视频和音频 -->
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
 
    <!-- 画布 -->
    <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, 75);
    </script>
 
    <!-- 表单控件 -->
    <form>
        <input type="color">
        <input type="date">
        <input type="time">
        <input type="number">
    </form>
 
    <!-- 本地存储 -->
    <script>
        // 存储数据
        localStorage.setItem('key', 'value');
        // 获取数据
        var data = localStorage.getItem('key');
    </script>
 
    <!-- Web Workers -->
    <script>
        if (window.Worker) {
            var myWorker = new Worker('worker.js');
        }
    </script>
 
    <!-- WebSocket -->
    <script>
        var ws = new WebSocket('ws://www.example.com/socket');
        ws

HTML5【新特性总结】

评论已关闭

推荐阅读