HTML是一種網頁語言，它可以用來創建各種各樣的頁面效果。其中之一便是紅綠燈效果。通過HTML代碼，我們可以輕松地制作出一個紅綠燈，讓人們在網頁上感受到紅綠燈的溫馨提示。
<!DOCTYPE html>
<html>
<head>
<title>紅綠燈</title>
</head>
<body>
<div style="width: 100px; border: 1px solid black;">
<div style="background-color: red; width: 100px; height: 100px; border-radius: 50%; margin: 10px;" id="red"></div>
<div style="background-color: yellow; width: 100px; height: 100px; border-radius: 50%; margin: 10px;" id="yellow"></div>
<div style="background-color: green; width: 100px; height: 100px; border-radius: 50%; margin: 10px;" id="green"></div>
</div>
<script>
setInterval(function() {
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");
if (red.style.backgroundColor === "red") {
red.style.backgroundColor = "black";
yellow.style.backgroundColor = "yellow";
} else if (yellow.style.backgroundColor === "yellow") {
yellow.style.backgroundColor = "black";
green.style.backgroundColor = "green";
} else {
green.style.backgroundColor = "black";
red.style.backgroundColor = "red";
}
}, 2000);
</script>
</body>
</html>上述代碼中，我們首先創建了一個div，然后在其中添加了三個div，分別表示紅、黃、綠三種燈色。每個div的背景顏色、寬度、高度、圓角等屬性都通過style屬性進行了設置。我們還為每個燈色的div添加了一個id，供JavaScript代碼調用。
接著，我們編寫了一個JavaScript函數，使用setInterval間隔一段時間執行。函數首先獲取三個燈色的div，然后通過比較各自的背景顏色來實現紅綠燈的閃爍。具體地，當紅燈亮時，將紅燈滅掉，將黃燈點亮；當黃燈亮時，將黃燈滅掉，將綠燈點亮；當綠燈亮時，將綠燈滅掉，將紅燈點亮。通過不斷重復此過程，我們實現了一個自動循環的紅綠燈效果。
通過以上代碼，我們可以看到HTML中的語法非常簡單易懂，同時也具有很強的擴展性和靈活性。只要我們有想象力和一定的程序設計能力，便可以創造出各種有趣的頁面效果。