HTML5寫情侶界面的代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>情侶界面</title> </head> <body> <!-- 頂部導(dǎo)航欄 --> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">消息</a></li> <li><a href="#">發(fā)現(xiàn)</a></li> <li><a href="#">個(gè)人中心</a></li> </ul> </nav> <!-- 中間內(nèi)容區(qū) --> <div id="content"> <div id="profile"> <div class="avatar"> <img src="img/boy.jpg"> <img src="img/girl.jpg"> </div> <h1>李小明 & 王小麗</h1> <p>相愛天數(shù)：666天</p> </div> <div id="activities"> <p>最近活動：</p> <ul> <li>一起看電影</li> <li>去公園約會</li> <li>上網(wǎng)聽音樂</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. 頂部導(dǎo)航欄使用<nav>標(biāo)簽，包含<ul>和<li>標(biāo)簽。
3. 中間內(nèi)容區(qū)使用<div>標(biāo)簽，包含具體的個(gè)人資料和最近活動信息。
4. 底部音樂播放器使用<audio>標(biāo)簽，支持MP3和OGG兩種格式的音樂文件。
通過使用HTML5，我們可以快速、簡便地創(chuàng)建出情侶界面，讓兩個(gè)人的親密關(guān)系在互聯(lián)網(wǎng)上得以呈現(xiàn)。