HTML5是目前最新的網頁標準之一，擁有大量的新特性和功能，讓開發人員可以更加輕松、靈活地構建優秀的網站。網頁布局是網頁的骨架，一個優秀的網站需要有合理的布局，才能更好地展示內容和提供用戶友好的體驗。以下是一個簡單的HTML5網頁布局代碼示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>簡單的網頁布局示例</title>
<style>
/* 全局樣式 */
body {
font-size: 14px;
line-height: 1.5;
color: #333;
margin: 0;
padding: 0;
}
/* 頭部樣式 */
header {
background-color: #fff;
height: 64px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* 內容區域樣式 */
#content {
margin-top: 80px;
width: 960px;
margin: 80px auto 0;
}
/* 底部樣式 */
footer {
background-color: #f5f5f5;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關于</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>
</header>
<div id="content">
<h1>歡迎來到我的網站</h1>
<p>我是一名Web開發者，正在學習HTML5和CSS3，這是我的第一個網站布局示例。</p>
</div>
<footer>
<p>Copyright ? 2020
<a href="#">XXX公司</a> All Rights Reserved.</p>
</footer>
</body>
</html>上述代碼中，我們首先定義了全局樣式，包括字體大小、行高、顏色以及頁面的間距。接著，我們定義了頭部、內容區域和底部的樣式，分別設置了它們的背景、高度、對齊方式等。在頁面中，我們使用了header、div和footer這些HTML5語義化標簽，使得代碼更加易讀易懂。可以看出，HTML5的新特性讓網頁布局更加簡單靈活，而且還能為SEO優化提供幫助。