HTML5是一種最新的網頁設計語言，它可以實現一些強大的功能，如視頻、音頻播放等。在HTML5中，也有一種非常有趣的元素，那就是笑臉元素。

<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.strokeStyle = '#000';
ctx.stroke();
//左眼和右眼
ctx.beginPath();
ctx.arc(80, 80, 10, 0, 2 * Math.PI);
ctx.arc(120, 80, 10, 0, 2 * Math.PI);
ctx.fillStyle = '#000';
ctx.fill();
//嘴巴
ctx.beginPath();
ctx.arc(100, 120, 30, Math.PI / 4, Math.PI * 3 / 4);
ctx.strokeStyle = '#000';
ctx.stroke();
</script>

上述代碼是HTML5中創建笑臉元素的原始代碼。首先，我們需要使用canvas元素來創建一個畫布，然后使用JavaScript代碼來繪制元素。畫布的寬度和高度可以自行設置，本例中設置為200x200。

在JavaScript代碼中，我們要使用canvas繪圖上下文（context）來繪制圖形，首先繪制一個圓形，并設置顏色為黑色。接下來，繪制兩個小圓形作為左眼和右眼，并將顏色設置為黑色。最后，使用arc函數來繪制嘴巴，并將顏色設置為黑色。

通過以上代碼，我們可以在網站中添加一個有趣的笑臉元素，并且可以自由修改其大小、顏色等屬性。