a 標籤的使用
a標籤：超連結href表示要連結到的地址target打開新網頁的方式_blank表示打開一個新的網頁進行跳轉_self表示在當前頁面進行跳轉
1
| <a href="http://google.com" target="_self">Google</a>
|
- 實現頁面內部的跳轉
<a name="bottom" href="#top">
href屬性寫法：#+name的值
1
2
| <a name="top" href="#bottom">跳到最下面</a>
<a name="bottom" href="#top">跳到最上面</a>
|
- 實現頁面間的跳轉
<a name="a.html" href="b.html#bbb">
href屬性寫法：路徑+#+name的值
1
2
| <a name="a" href="b.html#b">a網頁 跳到 b網頁</a>
<a name="b" href="a.html#a">a網頁 跳到 b網頁</a>
|
1
| <a href="mailto:rivalintw@gmail.com">發mail給Riva</a>
|
href屬性給圖片路徑
一個圖片標籤，跳到另一個地方顯示圖片(連結指向另一個圖片地址)
1
| <a href="1.jpg">連到一張圖片</a>
|
href屬性加#字號就可以了
實現頁面內部的跳轉
回到頂端 & 回到底端
- 先為
a標籤加name屬性，取個名字name="值"- 頂端
name="top" - 底端
name="bottom"
- 想從底端回到最上面的頂端，就在底端的
a標籤加上href屬性，內容值怎麼寫呢？加上#和頂端name的值 ==> href="#top"。- 頂端
<a name="top" href="#bottom">Go to bottom</a> - 底端
<a name="bottom" href="#top">Go to Top</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<title>a標籤的使用</title>
</head>
<body>
<!-- target打開新網頁的方式 _blank開新網頁跳連 _self在當前網網頁跳轉-->
<a href="http://google.com" target="_self">Google</a>
<br/>
<!--回到頂端 & 回到底端 (頁面內部的跳轉) -->
<a name="頂端" href="#底端">回到底端 Bottom</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="底端" href="#頂端">回到頂端 Top</a>
</body>
</html>
|
實現頁面間的跳轉
a網頁跳轉b網頁
<a name="a" href="b.html#b">
href屬性連結的地址內容，先寫路徑再加上#字號和name的值。
例如我a.html要跳轉到b.html，先在b.html網頁的a標籤加上name屬性給他一個名字<a name="快樂鼠">, 在a.html的href屬性加上#和b.html的name值，然後怎麼跳轉？在#名字前面再加上路徑<href="b.html#快樂鼠">。
反之，如果想要再跳回原本的頁面，也是如此。
a.html
1
| <a name="test" href="b.html#快樂鼠">走去看快樂鼠GOGOG~~~</a>
|
b.html
1
| <a name="快樂鼠" href="a.html#test">快樂鼠在這裡</a>
|
練習：兩網頁可以相互跳轉
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <html>
<head>
<title>a標籤的使用</title>
</head>
<body>
<!-- target開啟新網頁的方式 _blank開新網頁跳連 _self在當前網網頁跳轉-->
<a href="http://google.com" target="_self">Google</a>
<br/>
<!--頁面間的跳轉(a.html 跳轉到 b.html)-->
<a name="test" href="快樂鼠.html#快樂鼠">走去看快樂鼠GOGOG~~~</a>
<!--頁面內部的跳轉(回到頂端 & 回到底端)-->
<br/>
<a name="頂端" href="#底端">回到底端 Bottom</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="底端" href="#頂端">回到頂端 Top</a>
</body>
</html>
|
快樂鼠.html
1
2
3
4
5
6
7
8
9
10
| <html>
<head>
<title>快樂鼠</title>
</head>
<body>
<!--頁面間的跳轉(b.html 跳轉到回 a.html)-->
<a name="快樂鼠" href="test.html#test">快樂鼠在這裡</a>
<img src="1.jpg" />
</body>
</html>
|
發送Email
1
| <a href="mailto:rivalintw@gmail.com">發送Email給Riva</a>
|
HTML超連結兩種使用方式
連結到另一個文檔
1
| <a href="Test.htm">跳轉到指定的網頁</a>
|
跳轉指定的地方
1
2
| <a name="上面" href="#下面">跳到下面</a>
<a name="下面" href="#上面">跳到上面</a>
|
一個圖片標籤，跳到另一個地方顯示圖片(連結指向另一個圖片地址)
1
| <a href="1.jpg">快樂鼠真可愛</a>
|
想有連結效果，但又不想連到任何地方
href連結地址寫#就可以了，如果沒有href屬性，就變成純文字<a>這不是連結</a>