HTML5是一個重要的網頁設計語言，在現代網頁設計中得到了廣泛應用。 HTML5可以用來創建多種網頁元素，包括標題、段落、圖像、表格等。頭部導航欄是網站中重要的一部分，為訪問者提供了對網站不同部分的快速導航。下面將介紹一些HTML5頭部導航欄的樣式代碼。

樣式1：

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

這個樣式使用了默認的HTML5樣式。通過<nav>元素來定義導航欄， <ul>與<li>標簽用于顯示菜單條目，<a> 元素用鏈接到其他頁面或部分。使用CSS樣式可以美化更好的效果。

樣式2：

<nav>
<ul class="menu">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>
<style>
.menu {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
.menu li {
float: left;
}
.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>

這個樣式使用了CSS樣式表進行設計。在HTML中，使用<ul class=“menu”>元素定義導航欄。CSS樣式表使用’background-color’來為導航欄提供背景，同時使用’float’屬性定義菜單條目的位置，在這個樣式中定義為左浮動。此外，使用’padding’屬性調整文字的位置， 為了使標簽元素變成一個塊元素，使用’display: block;’。這種樣式還包括懸停狀態，這些狀態的效果可以通過設置懸停顏色來實現。在這個樣式中，我們使用的是白色，當懸停在菜單上時背景顏色變成了#111。