HTML5美食網站設計代碼示例：
<!DOCTYPE html> <html> <head> <title>美食網站</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>美食網站</h1> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">美食推薦</a></li> <li><a href="#">食譜大全</a></li> </ul> </nav> </header> <main> <section id="featured"> <h2>推薦美食</h2> <article> <h3>魚香肉絲</h3> <img src="http://example.com/yuxiangrousi.jpg" alt="魚香肉絲"> <p>這是一道中國傳統美食，由肉絲、木耳、蔥姜蒜等調料制成。</p> </article> <article> <h3>意式面條</h3> <img src="http://example.com/yisimiantiao.jpg" alt="意式面條"> <p>這是意大利傳統美食，由意大利面、番茄醬、奶酪等調料制成。</p> </article> </section> <section id="recipes"> <h2>食譜大全</h2> <ol> <li><a href="#">魚香茄子</a></li> <li><a href="#">糖醋排骨</a></li> <li><a href="#">鐵板牛肉</a></li> <li><a href="#">炒飯</a></li> </ol> </section> </main> <footer> <p>版權所有 ? 2022 美食網站</p> </footer> </body> </html>
以上是一個簡單的HTML5美食網站設計代碼示例，頁面結構清晰，語義化良好，通過CSS樣式表設計可使網站更加美觀。
上一篇html5美女代碼
下一篇js跟css實現加載效果