HTML5代碼實例測試 HTML5是一種用于構建網頁的標準化標記語言，能夠為頁面提供更加生動、豐富、可交互的效果。對于開發者而言，熟練掌握HTML5是非常重要的一部分，尤其是對于代碼實例的測試也是不可或缺的。下面我們來看幾個HTML5代碼實例及其測試。

第一個例子演示了如何使用HTML5的畫布元素來繪制不同顏色和尺寸的矩形圖形：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "#00FF00";
ctx.fillRect(70, 10, 60, 60);
ctx.fillStyle = "#0000FF";
ctx.fillRect(140, 10, 50, 30);
</script>

上述代碼中，我們首先在HTML中定義了一個canvas元素，然后在JavaScript中獲取這個元素，進而獲取畫布上下文，通過fillStyle屬性設置填充顏色，使用fillRect方法繪制矩形圖形。

第二個例子中，我們將演示如何使用HTML5的音頻元素來播放音樂文件：

<audio id="myAudio" controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<script>
var audio = document.getElementById("myAudio");
audio.play();
</script>

上述代碼中，我們首先定義了一個audio元素，其中的source子元素用于指定音頻文件的地址和格式，如果瀏覽器不支持這兩種格式，會默認使用文本提示語句。在JavaScript中，我們通過getElementById方法獲取音頻元素，然后使用play方法播放音頻文件。

第三個例子中，我們將演示如何使用HTML5的拖動元素來實現拖放功能：

<div id="myDrag" draggable="true">這是一個可以拖動的元素。</div>
<script>
var drag = document.getElementById("myDrag");
drag.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
});
document.body.addEventListener("dragover", function(event) {
event.preventDefault();
});
document.body.addEventListener("drop", function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
var drag = document.getElementById(data);
event.target.appendChild(drag);
});
</script>

上述代碼中，我們首先定義了一個div元素，并將draggable屬性設置為true，表示該元素可以被拖動。在JavaScript中，我們通過addEventListener方法為drag元素添加了一個dragstart事件，當用戶開始拖動元素時，會觸發這個事件。在事件處理函數中，我們使用setData方法將被拖動元素的id存儲到event.dataTransfer中。另外，我們還添加了dragover和drop事件處理函數，用于控制拖動的效果，以及拖動后的元素位置。

綜上所述，我們可以看出HTML5對于網頁的豐富效果和操作方式的改進，更好地滿足了用戶對于互聯網的需求。同時對于代碼實例的測試也需要我們不斷跟進，保持學習的狀態。