HTML5是一種新的網頁標準，它為我們帶來了更多方便和創意，今天我們來講講如何利用HTML5的一些新特性來制作一個水果代碼頁面。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水果代碼</title> </head> <body> <header> <h1>水果代碼</h1> </header> <nav> <ul> <li><a href="#apple">蘋果</a></li> <li><a href="#banana">香蕉</a></li> <li><a href="#orange">橙子</a></li> <li><a href="#pear">梨</a></li> </ul> </nav> <section id="apple"> <h2>蘋果</h2> <img src="apple.png" alt="蘋果圖片"> <p>蘋果，是薔薇科蘋果屬的植物，是重要的經濟水果之一。</p> </section> <section id="banana"> <h2>香蕉</h2> <img src="banana.png" alt="香蕉圖片"> <p>香蕉，是芭蕉科芭蕉屬的植物，果實可食用，是全球第四大水果。</p> </section> <section id="orange"> <h2>橙子</h2> <img src="orange.png" alt="橙子圖片"> <p>橙子，是蕓香科柑橘屬植物，是北方地區人們過年必備的水果之一。</p> </section> <section id="pear"> <h2>梨</h2> <img src="pear.png" alt="梨圖片"> <p>梨，又稱雪梨、白梨，是薔薇科梨屬植物的果實，也是一種常見的水果。</p> </section> </body> </html>
在這段代碼中，我們利用了HTML5的語義化標簽<header>、<nav>和<section>來定義這個水果代碼頁面的結構，通過利用id屬性和a標簽的href屬性鏈接到各個水果的內容頁。同時，我們使用了<img>標簽來展示水果的圖片，豐富了頁面的內容。除此之外，我們還利用了<meta>標簽來設置頁面的編碼格式，確保中文文字的正常顯示。
上一篇radio css屬性