測試您的技能:連結
本技能測試的目的是評估您是否理解如何在 HTML 中實現超連結。 在 HTML 中實現超連結。
任務 1
在這個任務中,我們希望您幫助填寫我們鯨魚資訊頁面的連結。
- 第一個連結應連結到名為
whales.html的頁面,該頁面與當前頁面位於同一目錄中。 - 我們還希望您在滑鼠懸停時為其提供工具提示,告訴使用者該頁面包含有關藍鯨和抹香鯨的資訊。
- 第二個連結應該變成一個可點選的連結,以在使用者的預設郵件應用程式中開啟一封電子郵件,收件人設定為 "whales@example.com"。
- 如果您還將其設定為自動將電子郵件主題行填充為“關於鯨魚的問題”,您將獲得一個加分項。
注意: 示例中的兩個連結都設定了 target="_blank" 屬性。這並非嚴格意義上的最佳做法,但我們在這裡這樣做是為了防止連結在嵌入的 <iframe> 中開啟,從而避免您的示例程式碼丟失!
嘗試更新下面的即時程式碼以重新建立完成的示例。
下載此任務的起點 以在您自己的編輯器或線上編輯器中進行操作。
任務 2
在這個任務中,我們希望您填寫四個連結,使它們連結到相應的位置。
- 第一個連結應連結到名為
blue-whale.jpg的影像,該影像位於當前目錄內的名為blue的目錄中。 - 第二個連結應連結到名為
narwhal.jpg的影像,該影像位於名為narwhal的目錄中,該目錄位於當前目錄的上一級目錄中。 - 第三個連結應連結到英國 Google 圖片搜尋。基本 URL 為
https://www.google.co.uk,圖片搜尋位於名為imghp的子目錄中。 - 第四個連結應連結到當前頁面最底部的段落。它有一個 ID 為
bottom。
注意: 示例中的前三個連結都設定了 target="_blank" 屬性,以便當您單擊它們時,它們會在新標籤頁中開啟連結的頁面。這並非嚴格意義上的最佳做法,但我們在這裡這樣做是為了防止頁面在嵌入的 <iframe> 中開啟,從而避免您的示例程式碼丟失!
嘗試更新下面的即時程式碼以重新建立完成的示例。
下載此任務的起點 以在您自己的編輯器或線上編輯器中進行操作。
任務 3
以下連結連結到關於獨角鯨的資訊頁面、支援電子郵件地址以及大小為 4MB 的 PDF 資訊檔案。在這個任務中,我們希望您
- 使用現有段落中寫得不佳的連結文字,並將其重寫,使其具有良好的連結文字。
- 向任何需要新增警告的連結新增警告。
注意: 示例中的第一個和第三個連結都設定了 target="_blank" 屬性,以便當您單擊它們時,它們會在新標籤頁中開啟連結的頁面。這並非嚴格意義上的最佳做法,但我們在這裡這樣做是為了防止頁面在嵌入的 <iframe> 中開啟,從而避免您的示例程式碼丟失!
嘗試更新下面的即時程式碼以重新建立完成的示例。
下載此任務的起點 以在您自己的編輯器或線上編輯器中進行操作。