賈維斯的智慧工坊

  • Home
  • About
  • Note
  • Project
  • Experience
  • Service
  • Sitemap


MY | NOTES

  1. 首頁
  2. >
  3. 筆記
  4. >
  5. 網頁設計

[HTML/CSS] Anchor tags

超連結在錨點的應用
Jan, 2016

超連結a tags是隨處可見的用法,在介紹錨點前,先複習以下兩種

1、轉移頁面 - 公開網址

原頁面開啟
<a href="網址"> 顯示的文字 </a>

新頁面開啟
<a href="網址" target=_blank> 顯示的文字 </a>

範例
<a href="www.jarvus.net" target=_blank> 顯示的文字 </a>

2、轉移頁面 - 同網域分頁

原頁面開啟
<a href="分頁位置/名稱.檔案類型"> 顯示的文字 </a>

新頁面開啟
<a href="分頁位置/名稱.檔案類型" target=_blank> 顯示的文字 </a>

範例
<a href="note/noteWebAtags.php" target=_blank> 顯示的文字 </a>

將路徑往返上一層
<a href="../note/noteWebAtags.php" target=_blank> 顯示的文字 </a>

3、錨點

錨點就是同個頁面下,要移動到該位置
通常用在至頂或移到第幾個標題
如此頁面中行程規劃的標題

原頁面開啟
<a name="標記名稱"> 顯示的文字(要移動到的位置) </a>
<a href="#要移動到的位置名稱"> 顯示的文字 </a>

範例
<a name="example"> 要移動到這裡 </a>
<a href="#example"> 點我移動至頂 </a>

點我移動至頂
若不想讓標記名稱的 a tag也變成藍字或底線
可更改CSS中的設定

CSS中設定
strong
{
	color: #FF6A6A;
}

strong a
{
	color: #FF6A6A;
	text-decoration: none;
}

strong a:hover
{
	text-decoration: underline;
}

								
範例
<strong><a name="example2"> 要移動到這裡 </a></strong>
<a href="#example2"> 點我移動至頂 </a>

Reference

1、HTML <a> Tag
2、html中的錨點介紹和使用

← Back to note