1. 程式人生 > >10.HTML超連結練習(含錨點連結)

10.HTML超連結練習(含錨點連結)

實現程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習</title>
</head>
<body>
	<center>
	
<!-- 跳轉到id為bottom的元素所在的位置
	 直接在href中寫#id屬性值
-->

	<a href="#bottom">去底部</a>
	<a href="#hello">去指定位置</a>
	<h1>這是我的個人部落格</h1>
	<hr />
	<h2>東風破</h2>
	<!-- 建立超連結時,如果地址不確定可以直接寫一個#作為佔位符 -->
	<a href="#">周杰倫</a>
	 
	<p id="hello">
	一盞離愁孤燈佇立在視窗<br/>
	我在門後假裝你人還沒走<br/>
	舊地如重遊月圓更寂寞<br/>
	夜半清醒的燭火不忍苛責我<br/>
	一壺漂泊浪跡天涯難入喉<br/>
	你走之後酒暖回憶思念瘦<br/>
	水向東流時間怎麼偷<br/>
	花開就一次成熟我卻錯過<br/>
	誰在用琵琶彈奏一曲東風破<br/>
	歲月在牆上剝落看見小時候<br/>
	猶記得那年我們都還很年幼<br/>
	而如今琴聲幽幽我的等候你沒聽過<br/>
	<img src="img/zjl1.jpg" alt="周杰倫" width="300px"><br/>
	誰在用琵琶彈奏一曲東風破<br/>
	楓葉將故事染色結局我看透<br/>
	籬笆外的古道我牽著你走過<br/>
	荒煙漫草的年頭就連分手都很沉默<br/>
	一壺漂泊浪跡天涯難入喉<br/>
	你走之後酒暖回憶思念瘦<br/>
	水向東流時間怎麼偷<br/>
	花開就一次成熟我卻錯過<br/>
	誰在用琵琶彈奏一曲東風破<br/>
	歲月在牆上剝落看見小時候<br/>
	猶記得那年我們都還很年幼<br/>
	而如今琴聲幽幽我的等候你沒聽過<br/>
	誰在用琵琶彈奏一曲東風破<br/>
	楓葉將故事染色結局我看透<br/>
	籬笆外的古道我牽著你走過<br/>
	荒煙漫草的年頭就連分手都很沉默<br/>
	<img src="img/zjl2.jpg" alt="周杰倫" width="300px"><br/>
	誰在用琵琶彈奏一曲東風破<br/>
	歲月在牆上剝落看見小時候<br/>
	猶記得那年我們都還很年幼<br/>
	而如今琴聲幽幽我的等候你沒聽過<br/>
	誰在用琵琶彈奏一曲東風破<br/>
	楓葉將故事染色結局我看透<br/>
	籬笆外的古道我牽著你走過<br/>
	荒煙漫草的年頭就連分手都很沉默
	 </p>
	 <hr />
	 友情連結:<a href="#">A網站</a>|<a href="#">B網站</a>|<a href="#">C網站</a> <br />
	
	 <!-- 
	 如果將連結地址設定為#,則點選超連結以後,會自動跳轉到當前頁面的頂部

	 html中有一個屬性,每一個元素都可以設定,該屬性可以作為標籤的唯一標識,這個屬性就是id,id        
     屬性在同一個頁面中只能有一個不能重複
	 -->
	 <a href="#" id="bottom">回到頂部</a>|

	 <!-- 傳送電子郵件的超連結,點選連結以後可以自動開啟計算機中預設的郵件客戶端
	 href="mailto:郵件地址"
	 -->

	 <a href="mailto:
[email protected]
">聯絡我們</a> </center> </body> </html>