一、超鏈接
< a>標簽代表html里的鏈接
1.URL
講到超鏈接,URL就不得不提了,URL神通廣大,不過我這里只是淺談一下URL,URL除了網頁,還有其他文件(pdf,文本等),還可以是指向該html的某個位置,還可以是Email地址
什么是URL?
既然是淺談,其實我們就可以把URL簡單的看成一個網址或者地址
它在< a>標簽下的使用:< a href=”URL”>< /a>
定義URL
URL稱為統一資源定位符,在html很多標簽下都是需要URL這個定位符的,如圖片,表單,還有js中
URL的組成
協議:http
主機:baidu.com(這里以百度為例)
端口:80(默認)(若是ftp服務器,則是21端口)
資源:即路徑:aaa/html/w_linux.html
參數:?變量名=值&變量名=值……
URL絕對與相對路徑
1.相對路徑(周邊文件):相對于你現在的位置,去找上一個路徑或下一個及多個路徑。例:
< a href=”w_linux.html”>找當前目錄下的w_linux.html
< a href=”./w_linux.html”>./是默認的 .代表當前路徑,與上面相同
< a href=”./aaa/bbb/w_linux.html”>在當前路徑下找下一級的html
< a href=”../aaa/w_linux.html”>..代表上一級目錄
2.絕對路徑(從根開始找)
http://www………..
二、a標簽常用屬性
1.href
代表一個URL的鏈接源(點擊后鏈接到什么地方)
2.target
1.target=_blank:點擊鏈接的時候,是新的瀏覽器窗口打開,而不是在本瀏覽器內打開
2.target=_self:這是默認的,也就是在本瀏覽器中打開
還有兩個屬性不常見,話不多說。
3.title
代表鏈接的附加提示消息
< a href=”URL” title=”提示信息”>鏈接名字< a>
三、錨點(定位作用)
錨點:定位網頁內部的鏈接,簡單的說就是你在這個網頁里點擊一個鏈接,會跳到該網頁里的某個位置
1.使用
1.< a name=”one”>< /a>放在定位的位置處,用name屬性是給該位置命名
< a name=”two”>< /a>
2.< a href=”#one”>鏈接名< /a>,”#”這個符號是區分是在本網頁找位置,否則服務器會誤認為找某個文件或其他網站
< a href=”#two”>鏈接名< /a>
3.< a href=”#”>< /a>或< a href=”“>< /a>都代表點擊后回到頂部(但是,如果不寫#會很危險,所以只要用第一個有#的就好)
4.其實也可以從另一個html中找這里的位置,比如這里的叫w_linux.html,另一個叫text.html,那就在text.html中寫< a href=”w_linux.html#one”>找到w_linux.html中的one位置< /a>
四、綜述代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
</head>
<body link="#8a2be2" bgcolor="#f0f8ff" alink="#8a2be2" vlink="blue" text="#8a2be2">
<h1>
<em>
<strong>
<u>阿水的阿里</u>
</strong>
</em>
</h1>
<a href="http://my.csdn.net/w_linux" >
<h2>目錄</h2>
</a>
<br>
<ol>
<li>
<a href="#one" title="這里是第一篇"> 第一篇</a>
</li>
<li>
<a href="#two" title="這里是第二篇">第二篇</a>
</li>
<li>
<a href="#three" title="這里是第三篇" >第三篇</a>
</li>
</ol>
<hr>
<a name="one"></a>
<h3><strong><u>第一篇</u></strong></h3>
這里添加第一篇的內容信息
<a name="two"></a>
<h3>第二篇</h3>
這里添加第二篇的內容信息
<a name="three"></a>
<h3>第三篇</h3> 這里添加第三篇的內容信息 <hr>
<a href="">返回</a>
</body>
</html>
五、效果圖