HTML電池圖標是一個經常使用到的圖標，在各種網頁和應用程序中都可以看到。這個圖標表示設備的電量，通常被設計成一個或多個綠色、黃色或紅色矩形，以提醒用戶電力的使用情況。

<!-- 一個矩形電池圖標 -->
<svg width="50" height="25">
<rect x="1" y="1" width="48" height="23" rx="3" ry="3" fill="white" stroke="black" stroke-width="2"></rect>
<rect x="5" y="5" width="36" height="15" rx="2" ry="2" fill="green"></rect>
<rect x="41" y="9" width="6" height="6" rx="2" ry="2" fill="black"></rect>
</svg>

上面的代碼中，我們使用 SVG（Scalable Vector Graphics）標簽來創建電池圖標。我們首先創建一個 50x25 的畫布（<svg width="50" height="25">），然后創建一個白色的矩形（<rect x="1" y="1" width="48" height="23" rx="3" ry="3" fill="white" stroke="black" stroke-width="2"></rect>）來作為電池的外框，填充和描邊的顏色是白色和黑色。

接著，我們創建一個矩形（<rect x="5" y="5" width="36" height="15" rx="2" ry="2" fill="green"></rect>）來表示電池的電量，這個矩形的填充顏色是綠色，寬度和高度是 36x15，圓角的大小是 2px。最后，我們在電池的右上角添加一個黑色正方形（<rect x="41" y="9" width="6" height="6" rx="2" ry="2" fill="black"></rect>），用來表示電池的正極。

通過這些簡單的標簽和屬性，我們就可以輕松地創建一個漂亮的 HTML 電池圖標了。