CSS和HTML是網頁設計中的兩大基石,其中HTML負責網頁內容的組織和結構,在這之上,CSS負責網頁的表現和風格,它們合作完成了一個完整的網頁界面。
<html> <head> <!-- 在這里寫上一些meta標簽以及導入一些必要的樣式庫等等 --> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- “header”標簽,用來放網頁的頭信息 --> <header> <h1>這里是網頁標題</h1> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關于我們</a></li> </ul> </nav> </header> <!-- “main”標簽,用來放網頁的主要內容 --> <main> <section> <h2>這里是一個標題</h2> <p>這里是一些文字內容</p> <img src="path/to/image.jpg" alt="這里是圖片的描述"> </section> <section> <h2>這里是另一個標題</h2> <p>這里是另一些文字內容</p> <img src="path/to/another_image.jpg" alt="這里是另一張圖片的描述"> </section> </main> <!-- “footer”標簽,用來放網頁的底部信息 --> <footer> <p>這里是網頁的版權信息等等</p> </footer> </body> </html>
以上是一個簡單的網頁HTML代碼,使用了header、main和footer等HTML5新標簽,與此同時引入了一個名為“style.css”的樣式表,其中包含了網頁的樣式信息。在實際開發中, HTML結構與CSS樣式之間的配合是非常重要的,只有契合的好,才能得到一個漂亮的網頁。