在網頁制作中，小球移動是一個非常基礎的效果，也是初學者需要掌握的技能之一。而實現小球移動的關鍵就在于HTML與JavaScript代碼的編寫。

// HTML代碼
<canvas id="myCanvas" width="500" height="500"></canvas>
// JavaScript代碼
var canvas = document.getElementById("myCanvas"); // 獲取畫布元素
var ctx = canvas.getContext("2d"); // 獲取上下文對象
var x = canvas.width/2; // 小球初始x坐標
var y = canvas.height/2; // 小球初始y坐標
var dx = 2; // 小球水平方向移動速度
var dy = -2; // 小球豎直方向移動速度
var ballRadius = 10; // 小球半徑
function drawBall() { // 繪制小球
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() { // 繪制畫布和小球，以及更新小球位置
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除畫布
drawBall(); // 繪制小球
x += dx; // 更新小球位置
y += dy;
if(x + dx >canvas.width-ballRadius || x + dx< ballRadius) { // 檢查小球是否碰到了邊界
dx = -dx; // 反彈
}
if(y + dy >canvas.height-ballRadius || y + dy< ballRadius) {
dy = -dy;
}
}
setInterval(draw, 10); // 每10毫秒更新一次小球位置

以上就是小球移動的HTML與JavaScript代碼，可以通過修改dx和dy變量的值來改變小球移動的速度和方向，進而實現更加豐富的效果。