前天提到除了主要內容之外，網頁通常在版面上還會分出頁首、導覽列、側邊欄與頁尾等區塊。
雖然這些區塊主要是由語意化結構元素來劃分，不過經過昨天的討論可以知道這些元素實際上劃分的是網頁內容的結構，跟版面上劃分的區塊又有些不同。

知道網頁通常會分成哪些區塊，還有這些區塊又要怎麼組織整理才有架構之後，我們還是得面對現實，好好編寫網頁的內容啦～

所以接下來幾天，會開始介紹怎麼在網頁中加入不同類型的內容，像是連結、引文、程式碼等。這樣我們就能幫網頁加上自己想要的東西囉＾＾

以<a>元素建立連結

如果要將網頁內容加上連結，需要使用<a>元素。
所謂的a是anchor⚓️的縮寫，可以將這個元素想像成茫茫網路之海中幫助我們定位的錨點。（但身處這些連結之中，怎麼好像變得更迷茫了 (￣▽￣)

連結的目的地通常是其他頁面，或當前頁面的指定地點。但也可以是檔案，或是email地址、電話號碼等內容。

通往其他網頁的連結

<p>
鐵人們，<br />
歡迎來到<a href="https://ithelp.ithome.com.tw/users/20116445/ironman/8702" target="_blank">前端迷走中：從零開始的新手之路</a>～
</p>

在上面的範例中，用<a>將「前端迷走中：從零開始的新手之路」包起來。但如果只是這樣，跟一般的文字還是沒什麼兩樣。

需要將連結的本體放進之前提過的href屬性，才能真的將文字變成可點選的連結。

至於target屬性，則是用來設定開啟連結的方式。這邊將值設為_blank，表示會在新視窗或新分頁開啟連結。

通往當前網頁的指定地點

前面提到，也可以透過連結前往當前頁面的指定地點。

但如果要這麼做的話，需要先將那個地方所在的元素加上id屬性。

可以將id屬性想像成身分證字號。每個人只有一個身分證字號，且每個人的身分證字號都不一樣。套用在網頁的世界上，就會是每個元素只能有一個id，且每個元素的id不能跟其他元素的重複。（雖然實際上身分證字號可能會重複就是了～）

設定id時需要注意。其屬性值區分大小寫；不能以數字開頭；也不能包含空格。[1]

以下由MDN提供的範例中，將<h2>元素的id屬性值設為Section_further_down。接著以href屬性設定連結的位址時，先以井字號#開頭，再填入<h2>元素的id屬性值。

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

值得一提的是，即便以井字號設定href屬性時沒有加上id屬性值，也不會出錯。像是href="#"這樣子的連結會通往網頁的頂端。[2]
將href的值設為href="#top"也會有同樣的效果，只要頁面中沒有其他元素把id值設為top。

通往其他網頁的指定地點

透過id屬性值，也可以指定連結通往其他頁面的哪個特定位置。

在以下由MDN提供的另一個範例中，便是在表示網址的相對URL後，以#開頭加上其他頁面特定位置的id值。

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing address</a>.
</p>

以target屬性設定連結開啟方式

除了前面提到的_blank之外，<a>元素的target還有其他值可以設定。以下介紹target常見的屬性值與他們代表的連結開啟方式：[3]

• _self
  以當前分頁開啟連結；是target的預設值。
• _blank
  以新分頁或新視窗開啟連結。
• _parent
  會在該連結的上層瀏覽環境（parent browsing context）開啟連結。如果沒有上層瀏覽環境的話，會跟設定成_self一樣。
• _top
  會在該連結的頂層瀏覽環境（topmost browsing context）開啟連結。頂層瀏覽環境通常會是瀏覽器的分頁。[4]如果沒有頂層瀏覽環境的話，會跟設定成_self一樣。

關於上層瀏覽環境跟頂層瀏覽環境可能有點難懂，以下舉例解釋。

假如有個網頁A，以<iframe>嵌入網頁B，網頁B裡又以<iframe>嵌入網頁C。網頁Ｂ中有兩個連結，b1跟b2，其target屬性分別設為_parent跟_top。同樣的，網頁C也有這兩種target屬性的連結c1跟c2。

雖然連結c1的target屬性設為_parent，但在不同瀏覽環境中開啟就會以不同方式開啟連結。
如果是在瀏覽網頁A的分頁點擊c1，則會是在嵌入其中的網頁B開啟。因為此時連結c1的上層瀏覽環境，指的是嵌入在網頁A中的網頁B；如果是在瀏覽網頁B的分頁點擊c1，則會是在當前分頁開啟連結，因為此時上層瀏覽環境指的是網頁B。

由於連結b1跟c2的target屬性設為_top，點擊這些連結都會在該分頁開啟。
如果連結是在瀏覽連結所在網頁的分頁開啟，如在瀏覽網頁B的分頁點擊b1，則會找不到頂層瀏覽環境，於是便在當前分頁開啟連結。
而如果分頁瀏覽的網頁，嵌入了連結所在的網頁，則在這些分頁點擊連結時，連結的頂層瀏覽環境就是當前的分頁。

至於連結b1，如果是在瀏覽網頁A的分頁點擊，則上層瀏覽環境會是嵌入網頁B的網頁A，所以也是以當前分頁開啟連結。如果是在瀏覽網頁B的分頁點擊，則因為找不到上層瀏覽環境，同樣會是在當前分頁開啟。

連結的載體

通常連結都是以文字來呈現，或者說是以文字作為載體。
不過實際上，只要不是規範所謂的互動式內容Interactive content，任何內容都可以當作連結的載體。[5]

所以文字、圖片、清單、表格等內容，都可以當作是連結的載體。只要用<a>元素將這些內容包覆起來，就會把他們變成連結。

文字連結的樣式

不知道大家有沒有注意到，文字連結的顏色好像會改變。

沒錯，這不是你的錯覺。
這些文字連結，預設會根據使用者的操作狀態變更顏色。不過基本上都會帶有底線：[6]

• 沒有點擊過的連結
  預設會是藍色，並帶有底線。
• 點擊過的連結
  預設會是紫色，並帶有底線。
• 點擊中的連結
  預設會是紅色，並帶有底線。

不過這些只是文字連結的預設樣式。可以另外透過CSS設定成不同樣子。

標題作為連結

以下由MDN提供的例子中，將<h1>包覆在<a>之中。於是<h1>代表的網頁標題就變成了連結。

<a href="https://developer.mozilla.org/en-US/">
  <h1>MDN Web Docs</h1>
</a>
<p>
  Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p>

圖片作為連結

由MDN提供的另一個例子示範了怎麼把圖片變成連結。可以注意到代表圖片的<img>元素，被<a>包了起來。

<a href="https://developer.mozilla.org/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>

關於<img>元素，我們之後會再提到。這邊先暫時帶過～

section元素作為連結

即便是用section元素劃分的區塊，也可以作為連結。

在以下由規範提供的例子中，以<section>表示的兩則廣告都被<a>包裹起來，變成了連結。因為代表不同產品，所以加上的網址不同，點擊後會通往不同頁面。

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

網頁之外的連結種類

一般檔案

除了網頁之外，由<a>元素提供的連結也可能是任意的檔案，像是圖片、影片等。

就像是平常在網頁上看到圖片，另外用右鍵點選「在新分頁開啟圖片」那樣。

透過download屬性下載檔案

如果連結通往的是某個檔案，可以另外為<a>元素加上download屬性，這樣點選連結後瀏覽器就會問使用者要不要下載檔案。不過設定的網址需要是同源URL或blob:、data:等（這邊超出範圍了，先帶過就好～）。[3]

透過download屬性的值還可以設定下載檔案的預設名稱。

email地址

如果將href設定為mailto:這種類型的URL。則可以讓某個連結在點擊之後，打開電子信箱的程式開始撰寫以設定的URL為寄件者的信件。

以下為MDN提供的例子：

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

小結

今天介紹了怎麼透過<a>元素建立網頁中的連結。

這些連結通常是通往某個網頁。以href屬性設定連結地址時，可以透過網頁元素的id屬性值，指定要前往那個頁面的哪個地方。也可以透過target屬性值設定連結在哪裡打開。

除了文字之外，也可以將不同內容設定為連結，像是網頁頁首的網站logo。通常點擊這樣的logo就會跳到網站的首頁。

而除了網頁之外，連結還可以是各種檔案。或是email地址、電話號碼等其他類型URL。

參考資料

[1]: W3schools, HTML - The id attribute
[2]: web.dev, Links
[3]: MDN, <a>: The Anchor element
[4]: MDN, <iframe>: The Inline Frame element
[5]: HTML Standard, the a element
[6]: W3schools, HTML Link Colors