HTML Links 連結

2018 iT 邦幫忙鐵人賽

DAY 13

自我挑戰組

資工的日常系列第 13 篇

2018鐵人賽

FantasyLin 松鼠

2018-01-01 23:44:17

3905 瀏覽

分享至

學習網址:https://www.w3schools.com/html/html_links.asp
今天是2018/1/1，大家新年快樂阿
可是最近東西有點多，時間不太夠只能弄些比較基本的東西了XD。

連結用顯示文字 tag 來表示。移上去時滑鼠會變小手。
Color:
預設html連結顏色是藍色，開過的連結是紫色，按下(onClick)是紅色，這可以自己設定。

由上到下。沒按過，放上去(mouse over)，點擊，造訪過。
其中:
background-color: transparent;背景顏色:透明
text-decoration: underline|none;把link加底線|不加底線
color: green:指定字的顏色

<head>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>
<a href="html_images.asp" target="_blank">HTML Images</a> 
</body>

在標籤內可以加target=""屬性來定義在何處開起網頁。
_blank - 會直接開啟新分頁。
_self - 用目前的頁面跳(預設效果)
_parent - 在父框架內開啟(還沒用過，不知道效果)
_top - 全瀏覽器顯示，應該是在frame裡才有差
framename - 在指定的framename(某框架)裡開啟

Image as Link(圖片連結)

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

在標籤內指定連結，裡面再包標籤，就能以圖片的方式使用連結。(src圖片資源檔，alt找不到或無法開啟時預設文字)。

Bookmark書籤:
就是一個可以跳到網頁某處的連結。按下後會讓目標在網頁最上方(如果網頁夠長的話)。

<!--指定目標id-->
<h2 id="C4">Chapter 4</h2>
<!--用href屬性選到目標id，用#選id-->
<a href="#C4">Jump to Chapter 4</a>
<!--也可以直接是另一頁的id，網頁名稱後接#id-->
<a href="html_demo.html#C4">Jump to Chapter 4</a>

明天接續~

下一篇:https://ithelp.ithome.com.tw/articles/10195508