HTML5是一種用來構建網頁的標準，它可以讓我們創建美觀、交互性強的網頁，其中一個功能就是讓圖片全屏，同時提供文字解釋。下面就是如何實現的代碼示例：
<html>
<head>
<title>My webpage</title>
<style>
#fullscreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999; /* Make sure it's above everything else */
text-align: center;
}
#fullscreen img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<p>Here is an image with a fullscreen button.</p>
<div id="fullscreen">
<img src="image.jpg" alt="My image">
<p>This is my beautiful image, I took it on vacation last year.</p>
<button onclick="toggleFullscreen()">Fullscreen</button>
</div>
<script>
function toggleFullscreen() {
var elem = document.getElementById("fullscreen");
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
/* Close fullscreen */
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
/* Open fullscreen */
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
}
</script>
</body>
</html>以上是一個簡單的HTML5代碼，其中包括一個img標簽用來顯示圖片，同時也添加了一個div容器來放置圖片和文字解釋，并且在容器中添加了一個全屏按鈕。當用戶點擊全屏按鈕，會執行toggleFullscreen()函數，用來觸發全屏狀態的開啟或關閉。在CSS樣式中，我們將div容器設置為絕對定位，并設置其寬度和高度都為100%，使得圖片和文字都能夠充滿屏幕。在JS腳本中，我們使用了瀏覽器提供的API來實現全屏的切換效果。