HTML焦點圖是網(wǎng)站頁面中經(jīng)常使用到的一種效果，它能夠吸引用戶的眼球并提升用戶體驗。下面是HTML焦點圖的基本代碼格式：
<html>
<head>
<title>HTML焦點圖代碼示例</title>
<style type="text/css">
/* 樣式代碼 */
.carousel {
position: relative;
}
.carousel img {
width: 100%;
height: 400px;
}
.carousel .prev,
.carousel .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.carousel .prev {
left: -50px;
}
.carousel .next {
right: -50px;
}
</style>
</head>
<body>
<div class="carousel">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<a href="#" class="prev">前一個</a>
<a href="#" class="next">后一個</a>
</div>
</body>
</html>在上面的代碼中，我們首先定義了一個類名為“carousel”的div元素作為焦點圖的容器，并將其設(shè)置為相對定位。然后，我們在容器中插入了若干個img元素，這些元素顯示的是不同的圖片。為了切換圖片，我們又添加了兩個a元素作為前后切換的按鈕，并為它們定義了類名“prev”和“next”以便于樣式的設(shè)置。
除此之外，我們還定義了一些CSS樣式，如圖片的寬高、前后按鈕的位置等等。通過這些樣式的設(shè)置，我們能夠使得焦點圖顯示得更加美觀和實用。