在設計網頁時，HTML和CSS是必不可少的兩個元素。HTML用來構建網頁的骨架，而CSS則負責其外觀和樣式。在構建一個完整的網頁時，需要將HTML和CSS結合起來。接下來我們將看到如何編寫一個簡單的HTML和CSS設計的網頁代碼。
首先，讓我們看一下HTML代碼：
<!DOCTYPE html> <html> <head> <title>設計網頁</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>設計網頁</h1> </header> <main> <section> <h2>歡迎訪問設計網頁！</h2> <p>這是一個使用HTML和CSS來構建的網頁。</p> </section> </main> <footer> <p>版權所有?2020 by 設計網頁</p> </footer> </body> </html>
代碼分為三個部分：頭部（head），主體（body），和尾部（footer）。在頭部我們使用了title元素來定義網頁的標題，并添加了一個meta標簽來設置網頁的字符集為UTF-8。我們還使用了link元素來連接外部的CSS樣式表。
主體（body）包含了網頁的內容，我們使用了header、main、section和footer元素來劃分網頁的結構，這樣使得網頁的內容更加清晰明了。在header中，我們使用了h1元素來定義網頁的主要標題。在main元素中，我們使用了section元素來定義網頁的一個章節，并使用了h2和p元素來定義章節的標題和正文內容。在footer元素中，我們使用了p元素來定義網頁的版權信息。
接下來，我們看一下CSS代碼：
body {
font-family: Arial, sans-serif;
background-color: #F2F2F2;
color: #333;
margin: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
main {
padding: 20px;
margin: 20px auto;
max-width: 600px;
text-align: justify;
}
section {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
font-size: 24px;
}
p {
line-height: 1.5;
}
footer {
text-align: center;
font-style: italic;
color: #666;
padding: 10px;
}我們使用了CSS選擇器和屬性來設置網頁的樣式。在這個例子中，我們設置了body元素的字體和背景色，并將其外邊距設為0，以消除網頁的默認邊距。我們使用header元素的背景顏色、文本顏色和內邊距來定義網頁的頭部樣式。在main元素中，我們定義了網頁的內容容器的內邊距、外邊距和最大寬度，以及將其文本設置為兩端對齊。我們使用section元素的邊框、內邊距和外邊距來定義網頁的章節樣式。我們使用h1、h2和p元素的字體大小和行高來定義網頁的標題和正文樣式。在footer元素中，我們定義了網頁的版權信息樣式。
總的來說，HTML和CSS是設計網頁的基石。我們可以使用HTML來構建網頁的骨架、內容和結構，而CSS則可以為網頁添加樣式和美觀效果。結合使用HTML和CSS讓我們能夠創造出美麗、具有特色和吸引人的網頁。