HTML5在網頁開發中被廣泛應用,其中商品列表是每個電商網站必不可少的功能。以下是一個HTML5商品列表的示例代碼:
<ul> <li> <img src="product1.jpg"> <h3>商品名稱1</h3> <p>商品描述1</p> <span>¥100.00</span> <button>添加至購物車</button> </li> <li> <img src="product2.jpg"> <h3>商品名稱2</h3> <p>商品描述2</p> <span>¥200.00</span> <button>添加至購物車</button> </li> <li> <img src="product3.jpg"> <h3>商品名稱3</h3> <p>商品描述3</p> <span>¥300.00</span> <button>添加至購物車</button> </li> </ul>
以上代碼使用了<ul>和<li>標簽來呈現商品列表,每個商品都包括一張圖片、商品名稱、商品描述、價格和添加至購物車的按鈕。使用HTML5標簽可以增加代碼的語義性,提高網站的可訪問性和SEO優化效果。