HTML5水平時間軸是一種常見的網頁設計元素，可以用來展示某個事件的發展歷史或者時間流逝的情況。以下是一些基本的HTML5水平時間軸代碼：

<div class="timeline">
<div class="timeline-item">
<div class="timeline-item-content">
<h2>事件標題</h2>
<p>事件描述</p>
</div>
<div class="timeline-item-marker"></div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<h2>事件標題</h2>
<p>事件描述</p>
</div>
<div class="timeline-item-marker"></div>
</div>
</div>

在這個代碼里，我們首先定義了一個包含了所有時間軸元素的`div`，并且為它加上了類名`timeline`。在這個包裹元素內，每一個時間節點都是一個`div`，并且加上了類名`timeline-item`。在每一個事件節點內，我們又定義了兩個`div`元素，一個是事件的標題和描述，另一個則是時間軸的標記，為了讓標記看起來更方便，我們可以設置其為一個空的`div`。如果我們需要添加更多的事件節點，只需要按照類似的結構添加更多的`div`即可。

同時，我們也可以通過CSS來美化我們的時間軸。以下是一些常見的CSS代碼：

.timeline {
position: relative;
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
}
.timeline-item {
padding: 80px 0;
position: relative;
}
.timeline-item-content {
width: 50%;
position: relative;
top: -20px;
padding: 20px;
background-color: #eee;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.timeline-item-marker {
background-color: #555;
height: 25px;
width: 25px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.timeline-item:before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background-color: #ddd;
z-index: 0;
}

在這個CSS代碼里，我們首先給我們的時間軸加了一些常見的樣式，如總體最大寬度、內容區邊距等等。接著，我們為每個時間節點的內容塊、標記設定了樣式，比如設定了標記的背景顏色、尺寸、圓角等等。最后，我們也加上了時間軸的連接線，通過設置偽元素`before`來實現。可能還有更多具體的樣式調整需求，但是以上的代碼可以為初次嘗試HTML5水平時間軸的開發者們提供一些參考。