如何連結網站中的兩個頁面-js教程-PHP中文網

如何連結網站中的兩個頁面

Susan Sarandon

發布： 2024-10-08 06:23:02

原創

940 人瀏覽過

How to Connect Two Pages in a Website

在本指南中，您將學習如何使用基本 HTML 連結網站上的兩個頁面。連結頁面允許使用者輕鬆地在網站的不同部分之間導航。讓我們開始吧！

建立兩個 HTML 文件首先，建立兩個要連結的 HTML 檔案。例如，讓我們建立一個名為index.html（您的主頁）和另一個名為about.html（您的關於頁面）。

每個檔案的 HTML 可能如下所示：

index.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to the Home Page</h1>
    <p><a href="about.html">Go to About Page</a></p>
</body>
</html>

登入後複製

about.html：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Page</title>
</head>
<body>
    <h1>About Us</h1>
    <p><a href="index.html">Go to Home Page</a></p>
</body>
</html>

登入後複製

2. 連結頁面

為了連接兩個頁面，我們使用 HTML 中的標籤，它定義了一個超連結。標籤內的 href 屬性指定要連結的檔案的路徑。

例如：


<a href="about.html">Go to About Page</a>

登入後複製

在此範例中，按一下連結後，使用者將前往 about.html 頁面。

同樣，在「關於」頁面上，您可以使用以下方式建立返回主頁的連結：


<a href="index.html">Go to Home Page</a>

登入後複製

文件結構為了使這些連結正常工作，這兩個文件應位於同一資料夾中。如果您的 HTML 檔案位於不同的資料夾中，則需要在 href 屬性中指定正確的檔案路徑。

如果兩個檔案位於同一資料夾中，您的檔案結構應如下所示：


/website-folder
   ├── index.html
   ├── about.html

登入後複製

如果檔案位於不同的資料夾中，請調整 href 屬性以反映正確的路徑。

測試連接設定連結後，在 Web 瀏覽器中開啟 index.html 檔案。您將看到一個鏈接，可將您帶到“關於”頁面。當您單擊它時，它應該導航到 about.html。同樣，在「關於」頁面上，按一下連結應返回主頁。

結論
這樣您就可以使用 HTML 輕鬆連接網站上的兩個頁面。這是建立網站的基本步驟，確保使用者順利導航。快樂編碼！

以上是如何連結網站中的兩個頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何連結網站中的兩個頁面

2. 連結頁面