HTML5影視模板是一種常用的網頁設計模板,它可以為影視類網站提供美觀的設計和便捷的用戶體驗。以下是一段HTML5影視模板的代碼,包含了頁面布局、樣式和內容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>影視網</title> <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> <article> <h2>正在熱映</h2> <div class="movie-list"> <div class="movie"> <img src="movie1.jpg" alt="電影1"> <h3>電影1</h3> <p><a href="#">查看詳情</a></p> </div> <div class="movie"> <img src="movie2.jpg" alt="電影2"> <h3>電影2</h3> <p><a href="#">查看詳情</a></p> </div> </div> </article> <aside> <h2>最新動漫</h2> <ul class="anime-list"> <li><a href="#">動漫1</a></li> <li><a href="#">動漫2</a></li> <li><a href="#">動漫3</a></li> </ul> </aside> </main> <footer> <p>版權信息 ? 2021 影視網</p> </footer> </body> </html>
以上代碼中,<!DOCTYPE html>聲明了文檔類型為HTML5,<html>是頁面的根元素。<head>中包含了頁面的元數據,包括字符集、標題和樣式表。<body>中是頁面的主要內容,其中通過<header>定義了頁眉,包含了網站名稱和導航欄;<main>和<aside>定義了頁面的主要內容和側邊欄;<footer>定義了頁腳,包含了版權信息。頁面中使用了語義化的標簽,如<article>、<nav>和<ul>,使頁面更加易讀易維護。
下一篇html5彈窗代碼大全