HTML5寫情侶界面的代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>情侶界面</title> </head> <body> <!-- 頂部導航欄 --> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">消息</a></li> <li><a href="#">發現</a></li> <li><a href="#">個人中心</a></li> </ul> </nav> <!-- 中間內容區 --> <div id="content"> <div id="profile"> <div class="avatar"> <img src="img/boy.jpg"> <img src="img/girl.jpg"> </div> <h1>李小明 & 王小麗</h1> <p>相愛天數：666天</p> </div> <div id="activities"> <p>最近活動：</p> <ul> <li>一起看電影</li> <li>去公園約會</li> <li>上網聽音樂</li> </ul> </div> </div> <!-- 底部音樂播放器 --> <audio controls> <source src="music/love.mp3" type="audio/mpeg"> <source src="music/love.ogg" type="audio/ogg"> 您的瀏覽器不支持 HTML5 音頻播放器。 </audio> </body> </html>
代碼解釋：
1. DOCTYPE聲明HTML5，使用UTF-8編碼。
2. 頂部導航欄使用<nav>標簽，包含<ul>和<li>標簽。
3. 中間內容區使用<div>標簽，包含具體的個人資料和最近活動信息。
4. 底部音樂播放器使用<audio>標簽，支持MP3和OGG兩種格式的音樂文件。
通過使用HTML5，我們可以快速、簡便地創建出情侶界面，讓兩個人的親密關系在互聯網上得以呈現。