HTML5生日代碼是一種展示HTML5技術特點的慶祝程序。HTML5生日代碼結合了音頻、視頻、動畫和HTML5的最新特性，如Canvas和SVG，讓用戶在HTML發行20周年紀念日上獲得更好的體驗。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Happy 20th Anniversary HTML!</title>
<style>
body {
background-color: #333;
text-align: center;
font-family: sans-serif;
padding-top: 50px;
}
h1, h2, p {
color: white;
}
h1 {
font-size: 5em;
}
h2 {
font-size: 2.5em;
}
</style>
<script>
function play() {
var audio = new Audio('happy-birthday-song.mp3');
audio.play();
}
function animate() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.clearRect(0, 0, canvas.width, canvas.height);
var circles = [];
for (var i = 0; i < 25; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var radius = Math.random() * 100 + 50;
var alpha = Math.random() * 0.8 + 0.2;
var color = 'rgba(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + alpha + ')';
circles.push({
x: x,
y: y,
radius: radius,
color: color
});
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
}
for (var i = 0; i < 25; i++) {
var x1 = circles[i].x;
var y1 = circles[i].y;
for (var j = i + 1; j < 25; j++) {
var x2 = circles[j].x;
var y2 = circles[j].y;
var distance = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
if (distance < circles[i].radius + circles[j].radius) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = Math.random() * 10 + 5;
context.strokeStyle = 'rgba(255, 255, 255, ' + Math.random() * 0.5 + 0.5 + ')';
context.stroke();
}
}
}
}
document.addEventListener('DOMContentLoaded', function() {
play();
animate();
});
</script>
</head>
<body>
<h1>Happy 20th Anniversary HTML!</h1>
<h2>Created with HTML5, CSS3 and JavaScript</h2>
<canvas id="canvas"></canvas>
<p>© 2020 by HTML5 Consortium</p>
</body>
</html>上面的代碼包含了用于播放“生日歌”和用于繪制畫布的JavaScript程序。HTML5生日代碼還使用了CSS3媒體查詢和JavaScript事件監聽器來確保在不同設備和瀏覽器中的表現一致。