淘寶是全球最大的電子商務網站之一。它的頁面設計一直致力于提供最好的用戶體驗，HTML5 的引進讓淘寶頁面的設計和性能更上一個臺階。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淘寶</title> </head> <body> <header> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">女裝</a></li> <li><a href="#">男裝</a></li> <li><a href="#">家居</a></li> <li><a href="#">數碼</a></li> </ul> </nav> <div class="logo"><img src="logo.png"></div> <div class="search"> <input type="text" placeholder="搜索"> <button>搜索</button> </div> </header> <main> <section class="banner"><img src="banner.jpg"></section> <section class="products"> <ul> <li><img src="product1.jpg"><h3>寶貝名稱1</h3></li> <li><img src="product2.jpg"><h3>寶貝名稱2</h3></li> <li><img src="product3.jpg"><h3>寶貝名稱3</h3></li> <li><img src="product4.jpg"><h3>寶貝名稱4</h3></li> </ul> </section> </main> <footer> <p>版權所有 ? 淘寶商城</p> </footer> </body> </html>
在這段 HTML5 代碼中，我們可以看到網頁頭部引入了視口 meta 標簽，它可以讓我們的網頁在不同大小的設備上顯示更佳。網頁主體分為 header、main 和 footer 三部分，其中 header 部分包含了導航欄、網站 logo 和搜索框，main 部分包含 banner 和產品展示，footer 部分是網站著作權信息。此外，HTML5 的語義化標簽還有 article、aside、figure、figcaption 等，它們用于更好地描述和組織頁面內容。
上一篇qq瀏覽器 css3動畫
下一篇html5浮動怎么設置