Google 代碼 HTML5

Google 提供了豐富的 HTML5 代碼示例，可以供開發(fā)者學習和參考。以下是一些例子：

音頻播放器

這里是一個基于 HTML5 的音頻播放器，使用了 JavaScript 控制播放和暫停：

<audio src="music.mp3" preload="auto" controls>
<p>
您的瀏覽器不支持音頻播放。
</p>
</audio>

拖拽排序

這里是一個基于 HTML5 的拖拽排序示例，使用了 drag 和 drop 事件：

<ul id="sortable">
<li draggable="true">Item 1</li>
<li draggable="true">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
</ul>
<script>
var ul = document.getElementById("sortable");
ul.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
});
ul.addEventListener("dragover", function(event) {
event.preventDefault();
var dragging = document.getElementById(event.dataTransfer.getData("text/plain"));
var dropzone = event.target;
if (dropzone.nodeName === "LI") {
dropzone.parentNode.insertBefore(dragging, dropzone.nextSibling);
}
});
</script>

Canvas

這里是一個基于 HTML5 的 Canvas 畫布示例，使用了 JavaScript 繪制圖形：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 50, 50);
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(150, 60);
ctx.stroke();
</script>