HTML5是目前最流行的網(wǎng)頁(yè)開發(fā)語(yǔ)言之一。它擁有許多新的功能和特性,可以制作出更加豐富和多樣化的網(wǎng)頁(yè)。建立一個(gè)屬于自己的個(gè)人網(wǎng)站是一個(gè)很好的學(xué)習(xí)HTML5的機(jī)會(huì)。下面是一個(gè)簡(jiǎn)單的HTML5代碼示例,可以用來建立一個(gè)基本的個(gè)人網(wǎng)站。
<!DOCTYPE html> <html> <head> <title>My Personal Website</title> </head> <body> <header> <h1>Welcome to My Personal Website</h1> <nav> <ul> <li><a href="#about">About Me</a></li> <li><a href="#projects">My Projects</a></li> <li><a href="#contact">Contact Me</a></li> </ul> </nav> </header> <main> <section id="about"> <h2>About Me</h2> <p>I am a web developer with over five years of experience. I love creating beautiful and functional websites that solve real-world problems.</p> </section> <section id="projects"> <h2>My Projects</h2> <ul> <li><a href="#">Project 1</a></li> <li><a href="#">Project 2</a></li> <li><a href="#">Project 3</a></li> </ul> </section> <section id="contact"> <h2>Contact Me</h2> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <label for="message">Message:</label> <textarea id="message" name="message"></textarea> <br> <input type="submit" value="Send"> </form> </section> </main> <footer> <p>Copyright ? 2021</p> </footer> </body> </html>
這個(gè)代碼示例包括了頁(yè)面頭部、導(dǎo)航欄、正文部分和底部。在頭部里定義了網(wǎng)頁(yè)標(biāo)題,并引入了可能需要的外部資源,比如CSS樣式表。在導(dǎo)航欄中包括了三個(gè)鏈接,分別指向一個(gè)自我介紹、一個(gè)項(xiàng)目列表頁(yè)和一個(gè)聯(lián)系表單頁(yè)。
在正文部分,使用了HTML5新的語(yǔ)義化標(biāo)簽,比如<header>、<main>和<section>,這些標(biāo)簽可以幫助搜索引擎更好地理解網(wǎng)頁(yè)內(nèi)容。在每個(gè)<section>標(biāo)簽中,包括了標(biāo)題和相應(yīng)的內(nèi)容,其中<form>標(biāo)簽用來制作一個(gè)聯(lián)系表單,通過輸入姓名、郵箱和消息內(nèi)容,可以向網(wǎng)站主人發(fā)送消息。
在底部中,使用了<footer>標(biāo)簽,包括一個(gè)版權(quán)信息。這個(gè)實(shí)例還是比較簡(jiǎn)單的,但是可以根據(jù)自己的需求,添加更多的功能和特性,來制作一款更加完善和實(shí)用的個(gè)人網(wǎng)站。