HTML5如何設置焦點圖 在網(wǎng)頁設計中，焦點圖是非常重要的元素之一，能夠吸引用戶的眼球，突出網(wǎng)頁的重點內(nèi)容。那么，HTML5如何設置焦點圖呢？ 首先，我們需要在HTML文檔中添加一些基本的元素，如圖片鏈接、標題等等。

在這個示例中，我們會使用HTML5的<figure>和<figcaption>標簽，來添加一個基本的焦點圖。

<figure>
<img src="image.jpg" alt="這里是圖片的描述文字">
<figcaption>這里是圖片的標題</figcaption>
</figure>

以上代碼中，我們需要插入一張圖片，并設置圖片的描述文字。<figcaption>標簽可以用來添加圖片的標題。 接著，我們需要使用CSS樣式，來對焦點圖進行布局、樣式的調(diào)整。

下面這段CSS代碼，可以將圖片放置在父級<div>元素中，并設置其寬度，以及將圖片設置成居中顯示。

div {
width: 320px;
margin: 0 auto;
text-align: center;
}
figure {
display: inline-block;
}

最后，我們還可以使用JavaScript來增加焦點圖的效果與交互。

以下這個JavaScript代碼塊，可以讓焦點圖實現(xiàn)簡單的自動播放功能。

window.onload = function() {
var figureList = document.getElementsByTagName('figure'),
i = 0,
len = figureList.length;
setInterval(function() {
figureList[i % len].classList.remove('active');
figureList[++i % len].classList.add('active');
}, 2000);
}

代碼中通過setInterval函數(shù)，實現(xiàn)了自動輪播效果。其中figureList是獲取到頁面中所有的<figure>元素，通過classList屬性，切換.active類，來實現(xiàn)輪播效果。 以上就是HTML5如何設置焦點圖的基本方法，可以根據(jù)需求進行不同的調(diào)整和改進。