HTML5 高级特性

什么是 HTML5 高级特性？

HTML5 引入了许多高级特性，使网页开发更加灵活和强大。这些特性包括语义化标签、多媒体支持、Canvas 绘图、本地存储等。

HTML5 语义化标签

HTML5 引入了一系列语义化标签，用于描述网页的不同部分：

<header> 
    <h1>网站标题</h1>
</header>

<nav> 
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</nav>

<main> 
    <section> 
        <h2>新闻资讯</h2>
        <article> 
            <h3>新闻标题</h3>
            <p>新闻内容...</p>
        </article>
    </section>
</main>

<aside> 
    <h3>侧边栏</h3>
    <p>侧边栏内容...</p>
</aside>

<footer> 
    <p>© 2024 网站名称. 保留所有权利.</p>
</footer>

HTML5 多媒体支持

HTML5 提供了内置的音频和视频支持，无需使用 Flash 等插件：

<!-- 音频标签 -->
<audio controls> 
    <source src="audio.mp3" type="audio/mpeg"> 
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频标签。 
</audio>

<!-- 视频标签 -->
<video controls width="320" height="240"> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频标签。 
</video>

HTML5 Canvas 绘图

HTML5 Canvas 元素用于在网页上绘制图形，通过 JavaScript 进行操作：

<canvas id="myCanvas" width="400" height="200"></canvas> 
<script>
    var canvas = document.getElementById("myCanvas"); // 获取 canvas 元素
    var ctx = canvas.getContext("2d"); // 获取绘图上下文
    
    // 绘制矩形
    ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色
    ctx.fillRect(10, 10, 150, 100); // 绘制填充矩形
    
    // 绘制圆形
    ctx.beginPath(); // 开始路径
    ctx.arc(250, 100, 50, 0, Math.PI*2); // 定义圆形路径
    ctx.strokeStyle = "#00FF00"; // 设置描边颜色为绿色
    ctx.stroke(); // 绘制描边
</script>

HTML5 本地存储

HTML5 提供了本地存储功能，可以在客户端存储数据：

<!-- localStorage: 持久存储，数据不会过期 -->
localStorage.setItem("username", "张三"); // 存储数据
var username = localStorage.getItem("username"); // 获取数据
localStorage.removeItem("username"); // 删除数据
localStorage.clear(); // 清空所有数据

<!-- sessionStorage: 会话存储，数据在会话结束后过期 -->
sessionStorage.setItem("cart", JSON.stringify(["商品1", "商品2"])); // 存储对象（需要序列化）
var cart = JSON.parse(sessionStorage.getItem("cart")); // 获取对象（需要反序列化）

HTML5 地理定位

HTML5 提供了地理定位功能，可以获取用户的位置信息：

<button onclick="getLocation()">获取位置</button>
<p id="location"></p>

<script>
    function getLocation() {
        if (navigator.geolocation) { // 检查浏览器是否支持地理定位
            navigator.geolocation.getCurrentPosition(showPosition, showError); // 获取位置
        } else {
            document.getElementById("location").innerHTML = "您的浏览器不支持地理定位。";
        }
    }
    
    function showPosition(position) {
        var lat = position.coords.latitude; // 纬度
        var lon = position.coords.longitude; // 经度
        document.getElementById("location").innerHTML = "纬度: " + lat + "<br>经度: " + lon;
    }
    
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                document.getElementById("location").innerHTML = "用户拒绝了地理定位请求。";
                break;
            case error.POSITION_UNAVAILABLE:
                document.getElementById("location").innerHTML = "位置信息不可用。";
                break;
            case error.TIMEOUT:
                document.getElementById("location").innerHTML = "获取位置超时。";
                break;
            case error.UNKNOWN_ERROR:
                document.getElementById("location").innerHTML = "发生未知错误。";
                break;
        }
    }
</script>

HTML5 拖放功能

HTML5 提供了拖放 API，实现元素的拖放功能：

<div id="draggable" draggable="true" style="width: 100px; height: 100px; background-color: red;">可拖动</div> 
<div id="droppable" style="width: 200px; height: 200px; background-color: yellow; margin-top: 20px;">放置区域</div>

<script>
    var draggable = document.getElementById("draggable");
    var droppable = document.getElementById("droppable");
    
    // 拖动开始事件
    draggable.addEventListener("dragstart", function(event) {
        event.dataTransfer.setData("text/plain", event.target.id); // 设置拖动的数据
    });
    
    // 拖动经过事件
    droppable.addEventListener("dragover", function(event) {
        event.preventDefault(); // 阻止默认行为，允许放置
    });
    
    // 放置事件
    droppable.addEventListener("drop", function(event) {
        event.preventDefault(); // 阻止默认行为
        var data = event.dataTransfer.getData("text/plain"); // 获取拖动的数据
        event.target.appendChild(document.getElementById(data)); // 将拖动元素添加到放置区域
    });
</script>

HTML5 表单增强

HTML5 增强了表单功能，添加了新的输入类型和验证功能：

<!-- 新的输入类型 -->
<input type="email" placeholder="请输入电子邮件"> 
<input type="url" placeholder="请输入网址"> 
<input type="number" min="1" max="100" value="50"> 
<input type="date"> 
<input type="time"> 
<input type="range" min="0" max="100" value="50"> 
<input type="color"> 
<input type="search" placeholder="请输入搜索内容"> 

<!-- 新的表单属性 -->
<input type="text" required> 
<input type="text" minlength="3" maxlength="20"> 
<input type="text" pattern="^1[3-9]\d{9}$" placeholder="请输入手机号码"> 
<input type="number" min="18" max="100"> 
<input type="text" autocomplete="off"> 
<input type="text" autofocus> 
<input type="file" multiple>

HTML5 其他高级特性

Web Workers：在后台线程中运行 JavaScript 代码，提高性能
Web Sockets：提供全双工通信通道，实现实时通信
Server-Sent Events：服务器向客户端推送事件
MathML：用于显示数学公式
SVG：用于显示可缩放矢量图形