[快速入門前端 6] 區塊元素和超連結

html 前端新手村 div 路徑

Doris 2023-05-12 11:11:43 ‧ 1966 瀏覽

分享至

DIV (區塊元素)

<div>元素（HTML 文件區塊元素）是無標籤語意的容器元素，雖然它不代表任何意義，卻是使用最多的標籤之一，主要用來把相似或者被劃分為同一區塊的內容包在同個 div 內，以便後續添加 css 樣式或讓 JavaScript 進行互動。
<div>是一個區塊元素，預設會獨佔一整行的空間，也就是説當我們利用<div>將不會<a>、<input>等標籤包住時，後面的元素會從下一行開始排列。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>這是頁面標題</title>
  </head>
  <body>
    <div>
		<!-- 裡面可以放任何標籤，也可以放 另一個 div -->
	</div>
  </body>
</html>

參考資料：https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/div

超連結

超連結，是指將某段文字連結至網路頁面、檔案、圖片、或信箱等地方的連結，，例如透過點選關鍵文字，使用者可以從網頁中跳到別的頁面，在 HTML 中，超連結的基本寫法為<a href="要連結的 URL">要顯示的連結文字或圖片</a>。

超連結<a>常見屬性：

href：是超連結中必要也是最重要的屬性，讓瀏覽器知道點選標籤中的內容後要做什麼
target：指定打開連結的位置，預設為_self(在當前分頁中打開)，常見的還有_blank(在新分頁中打開)
download：點擊連結時指定瀏覽器下載 url 的檔案，download 的屬性值可以預設下載檔案的檔名，若省略則使用原始檔名，例如download="下載檔名"。

前面我們說到超連結有許多不同的功能，主要是依照 href 來控制，接下來就來看看常見的超連結用法吧！

普通文字連結跳轉

<a href="https://www.google.com/" target="_blank">去看看 Google 吧</a>

圖片連結跳轉
若想以圖片當作超連結，可以在 <a> 標籤中放入圖片。

<a href="https://www.google.com/" target="_blank">
    <img src="./img.png">
</a>

Email 超連結
在 href 屬性中加入 mmailto: 可將連結直接跳轉至預設的郵件編輯器寫信。

<a href="mailto:123@gmail.com">我的信箱</a>

電話超連結
在 href 屬性中加入 tel: 時，若設備允許通話會跳轉至通話介面。

<a href="tel:0911111111">我的電話</a>

頁面錨點
<a> 標籤中有個特別的功能叫頁面錨點，可以跳往同頁面的某區塊，只要將 href 的屬性值設為 #+該區塊的id 就能實現此功能。

<a href="#detail">跳到明細</a>

<div id="detail">這是明細</div>

除此之外，<a href="#"></a> 為回到最上；<a href=""></a> 為重整頁面。

路徑 - Path

路徑，是指某個檔案存放的位置，當我們需要引入圖片或者文件時，需要路徑才可以找到要引入的檔案並正確顯示。路徑又分為絕對路徑和相對路徑，簡單來說，相對路徑就像問路時有人跟你說：前面路口左轉，紅綠燈再右轉就到了，會因為你目前所在的位置不同而有所改變。而絕對路徑就像是門牌地址，不管你現在在哪，就是要到那個地址就對了。

相對路徑
- 指的是目標檔案相對於目前目錄的路徑，會隨著目前目錄的不同而發生改變
- 常用的開頭有 ./ -> 當前位置的資料夾；../ -> 上一層資料夾
- 相對路徑表示範例
  - ./test.html ( 同一檔案目錄下的 test.html 檔案 )
  - ../index/test.html ( 上層目錄下的 test.html 檔案 )
  - ../../index/home/test.html ( 上上層目錄下的 home 目錄下的 test.html 檔案 )
絕對路徑
- 指的是一個絕對的位置，只要目標檔案沒有被移動，絕對路徑都會一樣
- 絕對路徑表示範例
  - D:/index/test.html ( 電腦D槽中的 index 目錄下的 test.html 檔案 )
  - https://upload.wikimedia.org/wikipedia.svg.png ( 網路上某一固定位置 )