HTML5是一種熱門的網頁設計語言，它能夠讓你輕松地創建出精美的網站。其中，固定上部導航欄是一個非常重要的設計元素，因為它可以讓用戶隨時瀏覽網站的各個頁面，同時也可以提高網站的用戶體驗。下面是一段HTML5固定上部導航欄的代碼，可以讓你輕松地實現這一元素。

<nav>
　　<ul>
　　　　<li><a href="#">首頁</a></li>
　　　　<li><a href="#">新聞</a></li>
　　　　<li><a href="#">產品</a></li>
　　　　<li><a href="#">聯系我們</a></li>
　　</ul>
</nav>
<style>
　　nav {
　　　　position: fixed;
　　　　top: 0;
　　　　left: 0;
　　　　width: 100%;
　　　　background-color: #333;
　　}
　　nav ul {
　　　　list-style: none;
　　　　margin: 0;
　　　　padding: 0;
　　}
　　nav li {
　　　　float: left;
　　}
　　nav li a {
　　　　display: block;
　　　　color: #fff;
　　　　text-align: center;
　　　　padding: 10px 20px;
　　　　text-decoration: none;
　　}
</style>

首先，在導航欄代碼開頭的<nav>標簽內，你可以使用<ul>標簽來創建一個無序列表，然后使用<li>和<a>標簽為每個列表項添加超鏈接。這些超鏈接鏈接到網站的各個頁面。接下來，在CSS代碼段內，你可以通過設置導航欄的position屬性為fixed來固定它在屏幕的頂部。這樣，無論用戶如何滾動屏幕，導航欄都將留在屏幕的頂部。此外，你也可以設置導航欄的background-color屬性來設置其背景顏色，使其與網站的主題相匹配。 最后，你可以使用<style>標簽將CSS代碼嵌入到HTML文檔中。這樣，當用戶加載網站時，所有的代碼都將在同一個頁面中進行渲染，從而加快網站的加載速度。總之，使用上述代碼段，你可以輕松地實現HTML5固定上部導航欄的設計元素，從而提高你的網站的可用性和用戶體驗。