在進行網頁開發時，布局是非常重要的一環。其中，HTML和CSS的作用就是實現網頁布局。HTML負責網頁的內容結構，而CSS則是負責網頁的樣式設計。下面，我們來詳細了解一下HTML-CSS布局。

首先，HTML負責實現網頁的結構，其中最常使用的標簽包括div、header、footer、main等。這些標簽可以將網頁分為不同的塊，以便于后續的樣式設計。以下是一個典型的HTML布局結構示例：

<div class="container">
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</div>

接下來，我們使用CSS來美化這個布局結構。首先，需要使用CSS選擇器選擇對應的HTML標簽，例如：

.container {
width: 1000px;
margin: 0 auto;
background-color: #f1f1f1;
}
header {
height: 100px;
background-color: #333;
color: #fff;
}
main {
height: 500px;
background-color: #fff;
}
footer {
height: 50px;
background-color: #333;
color: #fff;
}

上述代碼實現了以下效果：

• 設置容器的寬度為1000像素，并居中
• 設置header、main、footer的高度及背景顏色等樣式

通過HTML和CSS的結合，我們可以實現各種布局效果。尤其是隨著CSS的不斷發展，現在已經可以實現響應式布局，即可以根據不同設備的寬度來適配不同的頁面布局。這是非常方便和實用的功能。

總的來說，HTML-CSS布局是網頁開發中不可或缺的一部分。它可以讓網頁看起來更美觀、更易于閱讀，也可以讓網頁更具有交互性和可操作性。因此，學習HTML-CSS布局技術是每個網頁開發者必備的一項技能。