HTML是一種標記語言，用于創建網頁和其他信息，包括樣式和布局。下面是一些常用的HTML布局實例代碼。
<!DOCTYPE html>
<html>
<head>
<title>HTML布局實例代碼</title>
<style>
.main {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
grid-gap: 20px;
}
.header, .nav, .content, .sidebar, .footer {
border: 1px solid black;
}
.nav, .sidebar {
grid-row: 2 / span 2;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<h1>Header</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">Nav Link 1</a></li>
<li><a href="#">Nav Link 2</a></li>
<li><a href="#">Nav Link 3</a></li>
</ul>
</div>
<div class="content">
<p>Main Content</p>
</div>
<div class="sidebar">
<p>Sidebar</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>這是一個使用CSS網格布局來創建的基礎布局模板，包括頁頭、頁腳、導航、側邊欄和內容區域。這些元素可以根據需要進行自定義調整。通過在CSS樣式表中設置網格模板和在每個元素中設置網格行和列位置，可以輕松調整和布局。此示例還包括設置網格間距和邊框。這是一個最基本的布局，但是使用此模板可以快速布局網頁。