最近在學習HTML5網頁設計,老師布置了一份作業,要求設計一個可以自適應不同屏幕大小的網頁,顯示出自己的信息和一些作品。
下面是我的作業代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的作品集</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>我的作品集</h1> <nav> <a href="#about">關于我</a> <a href="#works">我的作品</a> </nav> </header> <main> <section id="about"> <h2>關于我</h2> <p>我是一個熱愛編程和設計的學生,正在學習Web開發,并在業余時間創作一些小作品。</p> <p>在我看來,Web開發是一種很有趣的工作,不僅可以將自己的思想和創意通過互聯網與全世界分享,還可以為用戶提供便捷的使用體驗。</p> </section> <section id="works"> <h2>我的作品</h2> <p>以下是一些我最近做的作品,歡迎瀏覽。</p> <ul> <li><a href="work1.html">作品1</a></li> <li><a href="work2.html">作品2</a></li> <li><a href="work3.html">作品3</a></li> </ul> </section> </main> <footer> <p>? 2021 我的作品集. All rights reserved.</p> </footer> </body> </html>
在我的代碼中,我使用了HTML5的語法規范,使用了meta標簽設置了網頁的字符集和視口屬性,使用了link標簽引入了外部CSS文件。
在網頁中,我設計了一個header標簽來顯示網站標題和導航欄,使用了nav標簽來包含導航鏈接。主要內容則放在main標簽內,使用section標簽分隔出關于我和我的作品兩個部分。最后,使用footer標簽來顯示版權信息。
通過CSS文件的樣式設置,我實現了網頁的自適應效果,使得不同屏幕大小的設備都能正常顯示網頁內容,達到了作業要求。
通過這次作業,我學會了如何使用HTML5語法規范,掌握了基本的網頁設計方法和技巧,同時也提高了對網頁設計的興趣。