HTML焦点图是网站页面中经常使用到的一种效果，它能够吸引用户的眼球并提升用户体验。下面是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元素作为焦点图的容器，并将其设置为相对定位。然后，我们在容器中插入了若干个img元素，这些元素显示的是不同的图片。为了切换图片，我们又添加了两个a元素作为前后切换的按钮，并为它们定义了类名“prev”和“next”以便于样式的设置。
除此之外，我们还定义了一些CSS样式，如图片的宽高、前后按钮的位置等等。通过这些样式的设置，我们能够使得焦点图显示得更加美观和实用。