HTML5是當前最流行和廣泛應用的網頁標準之一，新版本HTML5的出現標志著Web技術正在不斷發展和進步，其中新增的功能更是讓人眼前一亮。
下面我們來看一些HTML5新增的功能，這些功能將會大幅提升Web開發的效率和用戶體驗。
<!DOCTYPE html>
<html>
<head>
<!-- 使用meta標簽使頁面適配各種移動設備 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5新增功能示例</title>
</head>
<body>
<!-- 使用新的語義標簽 -->
<header>
<h1>這是一個標題</h1>
<p>這是頁面的頁眉</p>
</header>
<nav>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<a href="#">鏈接3</a>
</nav>
<!-- 媒體標簽 -->
<video src="video.mp4" controls autoplay></video>
<audio src="music.mp3" controls autoplay></audio>
<!-- 表單功能 -->
<form>
<input type="text" placeholder="請輸入您的用戶名">
<input type="email" placeholder="請輸入您的郵箱">
<input type="password" placeholder="請輸入您的密碼">
<input type="submit" value="提交">
</form>
<!-- canvas繪圖 -->
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 50, 50);
</script>
<!-- 地理位置服務 -->
<button onclick="getLocation()">獲取地理位置</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("該瀏覽器不支持地理位置服務");
}
}
function showPosition(position) {
alert("您的位置是：" + position.coords.latitude + ", " + position.coords.longitude);
}
</script>
<!-- Web存儲 -->
<script>
localStorage.setItem("username", "張三");
var username = localStorage.getItem("username");
alert("歡迎您，" + username + "！");
</script>
<!-- WebSocket實時通信 -->
<script>
var socket = new WebSocket("ws://echo.websocket.org");
socket.onopen = function() {
socket.send("Hello WebSocket!");
};
socket.onmessage = function(event) {
alert("收到消息：" + event.data);
};
</script>
</body>
</html>通過以上的示例代碼，我們可以看到HTML5新增功能的實現方式和效果，這些功能的應用將會極大地拓展Web開發的領域，提升用戶體驗和交互性，為Web技術帶來更加廣闊的發展前景。