Creating hyperlinks - 學習該如何開發Web

這篇文章將會介紹超連結的使用語法，並且探討建立它們的最佳實踐方法。

... Note: URL 能夠指向HTML 檔案、純文字檔案、圖片、文字文件、影音檔案等等 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發Web學習HTML：指南與教學HTML介紹CreatinghyperlinksArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.什麼是超連結？解析連結快速理解URL和路徑連結的最佳實踐不要只用看的：建立一個導覽選單E-mail連結小試身手！總結在本主題中的內容RelatedTopics 全新手請從這開始！ Web入門 Web概述 安裝基本軟體 自己的網站會是什麼樣子？ 處理檔案 HTML基礎概念 CSS基礎概念 JavaScript基礎概念 發佈自己的網站 Web運作的方式 HTML—架構Web HTML介紹 HTML概述 HTML入門 標題裡是什麼？HTML中的後設資料(Metadata) HTML文字基礎概念 建立超連結 進階文字格式 文件與網站架構 HTML除錯 親和度：設個字母 親和度：架構出具備內容的網頁 多媒體與嵌入 多媒體與嵌入的概述 HTML中的圖片 視訊與音訊內容 從物件到iframe—其他嵌入技巧 為Web新增向量圖 適應性圖片 親和度：Mozilla形象頁面 HTML表格 HTML表格概述 HTML表格基礎 HTMLtableadvancedfeaturesandaccessibility Assessment:Structuringplanetdata CSS—設計Web的風格 初探CSS 初探CSS（概述） CSS是什麼？ CSS入門 HowCSSisstructured CSS怎麼運作 Assessment:Stylingabiographypage CSS組件 CSSbuildingblocksoverview Cascadeandinheritance CSSselectors Theboxmodel Backgroundsandborders Handlingdifferenttextdirections Overflowingcontent CSSvaluesandunits SizingitemsinCSS Images,media,andformelements Stylingtables DebuggingCSS OrganizingyourCSS Assessment:FundamentalCSScomprehension Assessment:Creatingfancyletterheadedpaper Assessment:Acool-lookingbox 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化 樣式化列表 樣式化連結 Web字型 親合度：設定社區大學首頁的版面 CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout NormalFlow 彈性區塊 格線 浮動 定位 Multiple-columnlayout Responsivedesign Beginner'sguidetomediaqueries Legacylayoutmethods Supportingolderbrowsers Assessment:Fundamentallayoutcomprehension JavaScript—動態的用戶端指令 JavaScript第一步 JavaScript第一步概述 什麼是JavaScript？ 初次接觸JavaScript 出了什麼問題？JavaScript疑難排解 儲存你所需的資訊—變數 JavaScript基礎概念—數字與運算子 處理文字—JavaScript中的字串 有用的字串函式 陣列 親合度：傻瓜故事產生器 JavaScript基礎要件 JavaScript基礎要件概述 於程式碼中決策—條件 程式碼迴圈 函式—可重複使用的程式碼區塊 建立自己的函式 函式回傳值 事件介紹 親合度：圖庫 JavaScript物件介紹 JavaScript物件概述 物件基礎概念 物件原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON資料 物件建構實作 親合度：為彈跳球展示新增功能 非同步的JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客戶端webAPIs 客戶端webAPIs IntroductiontowebAPIs 文件操作 Fetchingdatafromtheserver ThirdpartyAPIs Drawinggraphics VideoandaudioAPIs Client-sidestorage 網頁表單-與使用者資料合作 核心的表單學習途徑 網頁表單概述 Yourfirstform 如何建構網頁表單 Basicnativeformcontrols TheHTML5inputtypes Otherformcontrols Stylingwebforms Advancedformstyling UIpseudo-classes Client-sideformvalidation Sendingformdata 深入網頁表單 Howtobuildcustomformcontrols SendingformsthroughJavaScript CSSpropertycompatibilitytableforformcontrols 無障礙網頁—每個人都可以使用的網頁 無障礙網頁指南 無障礙網頁概述 何謂無障礙網頁？ HTML:Agoodbasisforaccessibility CSSandJavaScriptaccessibilitybestpractices WAI-ARIA基礎 Accessiblemultimedia 行動裝置上的無障礙 無障礙網頁評估 Assessment:Accessibilitytroubleshooting 工具與測試 Client-sidewebdevelopmenttools Client-sidewebdevelopmenttoolsindex Client-sidetoolingoverview Commandlinecrashcourse Packagemanagementbasics Introducingacompletetoolchain Deployingourapp 介紹前端框架 前端框架簡介 Frameworkmainfeatures React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 開始學Vue CreatingourfirstVuecomponent RenderingalistofVuecomponents Addinganewtodoform:Vueevents,methods,andmodels StylingVuecomponentswithCSS UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte Svelte入門 StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular Angular新手入門 開始開發我們的Angular待辦事項應用程式 使用樣式點綴我們的Angular應用程式 建立一個item元件 篩選我們的待辦事項項目 建構Angular應用程式與更多資源 GitandGitHub GitandGitHub概述 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨瀏覽器測試 跨瀏覽器測試概述 跨瀏覽器測試介紹 測試執行策略 處理常見的HTML與CSS問題 處理常見的JavaScript問題 處理常見的親合度問題 建置功能偵測 自動化測試介紹 設定自己的自動化測試環境 伺服端網站程式設計 第一步 第一步概述 伺服端介紹 用戶端概述 伺服端網路框架 網站安全 Django網站框架(Python) Django網站框架(Python)概述 介紹 設定開發環境 線上教學：本地圖書館網站 線上教學2：建立網站骨架 線上教學3：使用模型 線上教學4：Django管理網站 線上教學5：建立我們的首頁 線上教學6：泛型清單與細節檢視 線上教學7：會話(Sessions)框架 線上教學8：使用者授權與許可 線上教學9：搭配表單 線上教學10：測試Django的WebApp 線上教學11：佈署Django至產品 WebApp安全性 親合度：DIY迷你部落格 Express網站框架(node.js/JavaScript) Express網站框架(Node.js/JavaScript)概述 Express/Node介紹 設定Node(Express)的開發環境 Express教學1:本地圖書館網站 Express教學2:建立骨架網站 Express教學3:使用資料庫(Mongoose) Express教學4:路由與控制器 Express教程5:呈現圖書館的資料 Express教學6:使用表單 Express教學7:佈署到正式環境 更多資源 常見問題 HTML問題 CSS問題 JavaScriptquestions Web的運作方式 工具與設定 設計與親合度 什麼是超連結？解析連結快速理解URL和路徑連結的最佳實踐不要只用看的：建立一個導覽選單E-mail連結小試身手！總結在本主題中的內容Creatinghyperlinks 前頁 Overview:IntroductiontoHTML 次頁 超連結(Hyperlinks)真的超級重要—它造就了我們現今所熟知的網路。

這篇文章將會介紹超連結的使用語法，並且探討建立它們的最佳實踐方法。

需求： 我們在HTML入門中介紹過的HTML基礎，以及在HTML的文字基礎知識中介紹過的文字格式化技巧。

目標： 學習如何有效地使用超連結，並利用它們來連結多個檔案。

什麼是超連結？超連結可說是網路中最令人振奮的革新技術。

當然啦，早在網路技術萌芽之初，它們就已經在那了，它們正是網路之所以被稱為「網路」的最大原因—它讓我們的文件能任意地與其他文件(或者資源)相互連結（或是連結文件中的特定部份），讓我們能透過一個簡單的網路位址來經營我們的網路應用（相較之下，本機應用(nativeapps)就必須要安裝在主機上才能使用）。

幾乎所有的網路內容都能被轉換成一個連結，讓網路瀏覽器在這些連結被點擊或觸發之後，跳轉到該網路位址(URL)上。

Note:URL能夠指向HTML檔案、純文字檔案、圖片、文字文件、影音檔案等等可存在網路上的東西。

如果網路瀏覽器不知道如何顯示或者處理該檔案的話，它會問你想要開啟這個檔案（將檔案交由本機應用來處理）還是要下載該檔案（意即你可以待會兒再處理）。

以BBC的主頁為例，裡面就包含了非常多的連結，各自連到不同新聞、網站的其它地方(導覽功能)，或者登入/註冊頁面等等。

解析連結一個基本的連結由元素包裹一段文字而成(當然也不一定要是文字，見下方的區塊級連結)，同時，你需要將網路位址填入href屬性中，這個屬性有時也被叫做超文字參考(HypertextReference)或目標(target)。

I'mcreatingalinkto theMozillahomepage

.

這會產生以下結果： I'mcreatingalinktotheMozillahomepage.利用title屬性來添加額外資訊另外一個你可能會想在連結中附加的屬性是title，它的目的是攜帶一個補充訊息到連結上，好比說目標網頁有什麼樣的資訊，或者是一些警告訊息，範例如下：

I'mcreatingalinkto theMozillahomepage.

這將會產生以下結果（當游標移到連結上方時，標題會以提示的形式出現）： I'mcreatingalinktotheMozillahomepage. Note:連結標題只有在游標停在連結上方時才會出現，也就是說那些只依賴鍵盤來瀏覽網頁的人將會很難看到這個訊息，因此，如果說標題資訊對網頁易用性(usability)有著重大影響的話，你應該把它放在大家都看得到的地方，比方說放在一般的文字元素裡。

不要只用看的：建立你自己的範例連結主動學習時間！我們想要你用自己的文字編輯器來撰寫一個HTML文件(你可以修改我們的入門範本，那應該就很夠用了)。

試著在HTML的主體(body)中，加入一個以上的段落或者其他你學過的內容元素。

將一些內容轉換成連結。

增加標題屬性到連結中。

區塊級連結(Block-levellinks)就像先前所提到的，你可以將任何內容轉換成連結，就算是區塊級元素也沒問題！如果你有一張圖片要轉換成連結，你可以把圖片元素放在標籤裡，像這樣： Note:在往後的教學中，你還會學到更多的圖片使用技法。

快速理解URL和路徑在完全搞懂連結標的(linktarget)之前，你必須要先瞭解什麼是URL和檔案路徑，而這個小節就是要帶你來看這些東西。

URL全名為UniformResourceLocator(一致資源定位器，俗稱網址)，是一條用來指出某樣東西在網路上的位址的字串。

比如說Mozilla的英文主頁就是位在https://www.mozilla.org/en-US/。

URL利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位於檔案系統上的什麼地方。

現在讓我們來看個簡單的目錄結構範例(請見我們的建立超連結目錄)。

creating-hyperlinks是這個目錄結構的根目錄(root)，當你在本地端撰寫網站時，你會將整個網站都放在這樣的資料夾中。

在我們的根目錄裡有index.html和contacts.html兩個檔案，在現實的情況中，index.html會是我們的首頁或者登陸頁面(landingpage，網站或它的某部份的進入點)。

我們的根目錄中有兩個子目錄—pdfs和projects，它們各自都有一個檔案在裡頭，分別是project-brief.pdf和index.html。

請記得，你可以很愉快地在一個專案中擁有兩個index.html，只要它們處在檔案系統上的不同位址。

很多網站都會這麼做，第二個index.html可能會拿來當作是與專案有關資訊的主登陸頁面。

在相同目錄裡：如果你要連結的兩個檔案處在同一個的目錄下，你只需要寫指向的檔案名稱就行了。

比方說，如果你想在index.html(最上層的那個)中加入一個通往contacts.html的超連結，你要用的URL就是contacts.html：

Wanttocontactaspecificstaffmember? Finddetailsonourcontactspage.

往下到子目錄中：如果你想要在index.html(還是最上層的那個)中加入一個指向projects/index.html的超連結，在指出你要的檔案之前，你需要先往下進到projects目錄裡。

要做到這件事，你可以先指出目錄名稱，然後加上一個/，最後再加上檔案名稱。

因此你要寫的URL會是projects/index.html：

Visitmyprojecthomepage.

往上到父目錄中：如果你想要在projects/index.html中加入一個指向pdfs/project-brief.pdf的超連結，你需要先往上進到pdf目錄裡。

而「往上移動一個目錄」可以用..來表示，因此你要寫的URL會是../pdfs/project-brief.pdf：

Alinktomyprojectbrief.

Note:你可以將多個這種語法組成一個較為複雜的URL，例如：../../../complex/path/to/my/file.html。

文件片段(Documentfragments)並不是每次都只能連到文件的頂端，你也可以連到HTML文件中的某個部分，而這個部分叫做文件片段(documentfragment)。

要做到這件事，你得先為你要連的元素設定id屬性，通常你可以把連結設在標題(heading)上，像是下面這樣： Mailingaddress 要連到特定的id，你得在你的URL的後面加上一個#號，像這樣：

Wanttowriteusaletter?Useourmailingaddress.

你甚至可以利用文件片段來連到同個文件的其他部分：

Thecompanymailingaddresscanbefoundatthebottomofthispage.

絕對URLvs.相對URL你會在網路上看到兩個名詞，絕對URL(absoluteURL)和相對URL(relativeURL): 絕對URL：指向網路上的絕對位址，裡頭包含協定(protocol)和網域名稱(domainname)。

舉個例子，假設一個webserver的根目錄有一個projects目錄，裡面放著一個index.html，該網站的網域為http://www.example.com，則網頁可以透過網址http://www.example.com/projects/index.html來取得(或寫成http://www.example.com/projects/也行，因為大多的webserver都能在URL沒有明確指出時，自動找尋如index.html之類的登陸頁面)。

絕對URL無論在什麼地方使用，它都會代表同一個位址。

相對URL：指向一個檔案的相對位址，這跟我們在先前看到的非常類似。

舉例來說，如果我們想要從http://www.example.com/projects/index.html連到同一目錄下的PDF檔，URL就只要檔名就好—像是project-brief.pdf—不需要其它的資訊。

如果那個PDF放在projects中叫做pdfs的子目錄裡，其相對連結就是pdfs/project-brief.pdf(等效的絕對URL為http://www.example.com/projects/pdfs/project-brief.pdf)。

相對URL指向的位址會受到檔案所在的真正位址影響—舉例來說，如果我們將index.html移出projects，並放在網站的根目錄中(也就是在最上層中)，裡頭指向pdfs/project-brief.pdf的相對URL連結會指到http://www.example.com/pdfs/project-brief.pdf，而非http://www.example.com/projects/pdfs/project-brief.pdf。

當然，project-brief.pdf和pdfs的位置不會因為你移動index.html就改變—這會使得你的連結指到錯誤的地方，你一定得非常小心！連結的最佳實踐撰寫連結時有幾個最佳實踐方法，現在讓我們來看看吧。

使用明確的字詞要在你的網頁上加入連結非常簡單，但這還不夠，我們必須確保連結能夠被所有讀者取用到，無論他們的背景或者使用的工具為何。

比如說： 螢幕閱讀器的使用者會在頁面上的連結間跳來跳去，並且閱讀連結時不看上下文。

搜尋引擎使用連結上的文字來為目標建立索引，因此你可以將關鍵字包含在你的連結文字中，藉此有效地說明連結的對象。

以視覺進行閱讀的讀者對於內文往往匆匆一瞥，他們將注目在明顯的頁面特徵，像是連結，因此具有敘述性的連結文字將對他們有所助益。

我們來看幾個例子： 好的連結文字：下載Firefox

下載Firefox

不好的連結文字：點這裡來下載Firefox

點這裡 來下載Firefox

其它小訣竅： 千萬別把URL當作連結文字—URL看起來醜斃了，更別提當螢幕閱讀器將它逐字唸出時會有多糟。

千萬別用「連結(link)」或「連至(linkto)」—那只是廢話罷了。

螢幕閱讀器會直接告訴使用者哪邊有連結；而具有視力的讀者可以直接看出連結，因為連結通常使用不同的顏色，並且設有底線(一般不會打破這項慣例，因為大家都已經習以為常了)，所以也不用多提。

讓你的連結越短越好—太長的連結會使螢幕閱讀器的使用者蒙受其害，因為他們必須從頭聽到尾。

盡量讓連結的文字不一樣，太多重複的連結文字會帶給螢幕閱讀器的使用者麻煩，因為他們可能會從一個連結表中選擇連結，因此若有許多重複的「點這裡」會讓他們相當困惑。

盡可能使用相對連結經過之前的說明，你可能會覺得無論如何都應該採用絕對連結，畢竟它們不會像相對連結一樣，因為頁面被搬移而失效。

然而，對於相同網站內的連結，你應該盡量使用相對連結(連到別的網站的連結必須使用絕對連結)，原因如下： 首先，由於相對URL通常比絕對URL來得短，因此使用它可以增進原始碼的可讀性。

第二，使用相對URL比較有效率。

當你使用絕對URL時，瀏覽器會先查看server在域名系統(DNS，詳情請見網路是如何運作的)上的真實位址，並再從那個位址開始尋找請求的檔案；如果我們使用相對URL，瀏覽器就可以直接從那個server開始搜尋。

因此，如果你在可以使用相對URL時而去使用絕對URL，就會迫使你的瀏覽器不斷地進行額外的工作，進而降低效能。

要連到非HTML的資源時請先聲明當連結連至一個需要下載的資源(像是PDF或Word文件)或是串流(如影音串流)或是其他有潛在未知影響的東西(開啟彈出式視窗或者載入Flashmovie)時，你應該要加上一些文字來預示，以下就是幾個非常惱人的情境： 假設你正處於低頻寬的連線，點擊連結之後，卻開始下載好幾MB的東西。

假設你沒有安裝Flashplayer，點擊連結之後，卻進到一個需要Flash的頁面。

讓我們來看一些可以改善這些情況的方法：

下載銷售報告(PDF,10MB)

觀看影片(將在新分頁開啟串流，HD畫質)

遊玩賽車遊戲(需要Flash)

當連結會觸發下載時，使用下載屬性當你連結一個需要下載的資源時，你可以使用download屬性來提供一個預設的儲存檔名。

以下範例是最新版的Windows版Firefox的下載連結： 下載Windows上的最新版Firefox(64-bit)(English,US) 不要只用看的：建立一個導覽選單在這次練習中，我們想要你利用導覽列來將許多網頁連結在一起，創造出一個具有多個頁面的網站。

這是一個很常見的網站建造方式—每一個網頁都使用同樣的網頁結構，其中包含相同的導覽選單，這樣子一來，當連結被點擊時，會讓人以為還留在原地，但內容卻倏忽更迭。

你需要先在一個目錄中建立下面這四個網頁的複本(你可以在navigation-menu-start目錄下找到完整的清單)： index.html projects.html pictures.html social.html 接著，你可以這麼做： 在指定的地方添加一個無序列表，裡面放著可以連到的網頁名稱。

因為導覽選單其實就是一個連結的列表，所以這麼做在語義上沒什麼問題。

把每一個網頁名稱變成超連結。

把導覽選單複製到每一個頁面上。

把每個網頁中，連到自己的連結移除，因為這種連結毫無意義且令人困惑，此外，無連結的文字可以用來提示使用者的所在位置。

完成後的範例應該會長這樣： Note:如果你卡住了，或者不確定有沒有做對，你可以到navigation-menu-marked-up目錄來偷瞄答案。

E-mail連結你可以建立一個連結或按鈕，使得它被點擊之後，開啟一個正在撰寫中的電子郵件訊息。

這可以透過元素和mailto:URLscheme來達成。

多數情況mailto:會填入收信人的電子郵件地址。

例如： Sendemailtonowhere 它的結果會像是這樣：Sendemailtonowhere。

事實上，電子郵件地址是選填的。

如果你將它留空(也就是說，你的href只寫了"mailto:")，使用者的mailclient會開啟一個寄信視窗，其中並沒有指定收信人，這在使用「分享」連結時非常有用，使用者可以自行決定要寄給誰。

指定細節除了電子郵件地址之外，你還可以提供其他資訊，事實上，任何標準的郵件標頭欄位都能被加到 mailtoURL中，常見的有主旨(subject)、副本(cc)以及主體(body)(這個雖然不是真的標頭欄位，但能讓你放一條簡短的訊息在新郵件的主體中)。

每個欄位與它的值被定義成一組查詢項(queryterm)。

下面是一個包含cc、bcc(密件副本)、subject和body的範例： Sendmailwithcc,bcc,subjectandbody Note:每一個欄位的值必須以URL編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriagereturn)、換頁(pagebreaks)等等)轉換成百分號編碼。

也請注意這裡使用問號(?)來分隔主要URL和其他欄位；以&來分隔mailto:URL中的不同的欄位，這是標準的URL查詢記號(querynotation)。

你可以閱讀GET方法來得知有那些常用的查詢記號。

以下是mailtoURL的其他例子： mailto: mailto:[email protected] mailto:[email protected],[email protected] mailto:[email protected][email protected] mailto:[email protected][email protected]&subject=This%20is%20the%20subject 小試身手！你已經讀完這個章節囉，但你有掌握箇中的重點嗎？你可以在繼續閱讀後面的章節之前，先進行一些測驗—請前往小試身手：超連結。

總結總而言之，以上就是超連結的介紹了！稍後你在後續的課程中學到如何位連結增添樣式時，還會再碰到它們。

HTML的下一章，我們將繼續討論文字語義(textsemantics)，並看一些進階／不常見的特性，相信你會獲益良多的—下一站是：進階文字格式化技巧！ 前頁 Overview:IntroductiontoHTML 次頁 在本主題中的內容 GettingstartedwithHTML What’sinthehead?MetadatainHTML HTMLtextfundamentals Creatinghyperlinks Advancedtextformatting Documentandwebsitestructure DebuggingHTML Markingupaletter Structuringapageofcontent Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年6月23日,byMDNcontributors