HTML5網頁設計離不開登錄頁面，這是用戶登錄網站的入口，本文通過pre標簽展示登錄頁面的基礎代碼。 首先，我們需要一個表單用于用戶輸入信息。代碼如下：

<form action="login.php" method="post">
<label>用戶名:</label>
<input type="text" name="username">
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<input type="submit" value="登錄">
</form>

這段代碼包含一個form標簽，該標簽的action屬性指向服務器端處理登錄的地址，method屬性為post表示使用POST方法提交數據。兩個label標簽與兩個input標簽一一對應，分別用于輸入用戶名和密碼。 接下來，我們需要驗證用戶輸入的信息是否正確。處理邏輯如下：

// 過濾用戶輸入
$username = htmlspecialchars($_POST["username"]);
$password = htmlspecialchars($_POST["password"]);
// 驗證用戶名密碼
if ($username === "admin" && $password === "123456") {
// 登錄成功
echo "歡迎回來！";
} else {
// 登錄失敗
echo "用戶名或密碼錯誤，請重新輸入！";
}

首先，我們使用htmlspecialchars函數對用戶輸入進行過濾，以防止XSS攻擊。然后，我們使用if語句判斷用戶名和密碼是否正確，如果正確則輸出歡迎信息，否則輸出錯誤信息。 最后，我們需要將登錄頁面美化一下。可以使用CSS樣式表來實現。代碼如下：

form {
border: 1px solid #ccc;
padding: 10px;
width: 300px;
margin: 0 auto;
}
label {
display: inline-block;
width: 80px;
}
input[type="text"], input[type="password"] {
width: 180px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 3px;
cursor: pointer;
}

這段CSS代碼可以使表單在頁面中居中顯示，并對輸入框和提交按鈕進行樣式美化。 以上便是一個基本的HTML5登錄頁面的代碼和處理邏輯。當然，實際的登錄頁面肯定不止這么簡單，還需要考慮到安全性、記住密碼等功能。但是無論怎樣，登錄頁面都是一個網站開發中必不可少的組成部分。