HTML利用超鏈接打開鏈接文件
1)先看兩個示例
<html>
<body>
<p>
<a href="../asdocs/html_tutorials/humor02.html">這是一個鏈接</a>
</p>
<p>
<a target=_blank>站長網 站長學院站點鏈接</a>
</p>
</body>
</html>
這個示例演示了如何在HTML文件里創(chuàng)建超鏈接。
<html>
<body>
<p>
你可以將一張圖片作為一個鏈接,點擊這個圖片。
<a href="../asdocs/html_tutorials/humor03.html"><img src="../images/html_tutorials/smile.jpg" ></a>
</p>
</body>
</html>
這個示例演示了如何將一個圖片作為一個超鏈接,即點擊一個圖片,可以連接到其它文件。
2)a和href屬性
HTML用<a>來表示超鏈接,英文叫anchor。
<a>可以指向任何一個文件源:一個HTML網頁,一個圖片,一個影視文件等。用法如下:
<a href="url">鏈接的顯示文字</a>
點擊<a></a>當中的內容,即可打開一個鏈接文件,href屬性則表示這個鏈接文件的路徑。
比如鏈接到admin5.com/html站點首頁,就可以這樣表示:
<a >站長網 站長學院admin5.com/html首頁</a>
3)target屬性
使用target屬性,可以在一個新窗口里打開鏈接文件。
<a target=_blank>站長網 站長學院admin5.com/html首頁</a>
<html>
<body>
<a href="../asdocs/html_tutorials/humor01.html" target="_blank">一則笑話</a>
<p>
如果你將target的屬性值設成_blank,你點擊這個鏈接的時候,網頁就會在一個新窗口出現(xiàn)。
</p>
</body>
</html>
4)title屬性
使用 title 屬性,可以讓鼠標懸停在超鏈接上的時候,顯示該超鏈接的文字注釋。
如果希望注釋多行顯示,可以使用
作為換行符。
<a title = "站長網 站長學院
網頁教程與代碼的中文站點">站長網 站長學院網站</a>
<html>
<body>
<p>
<a title = "站長網 站長學院網頁教程與代碼的中文站點">站長網 站長學院網站</a>
</p>
<p>
<a title = "站長網 站長學院
網頁教程與代碼的中文站點">站長網 站長學院網站</a>
</p>
</body>
</html>
name屬性
使用name屬性,可以跳轉到一個文件的指定部位。
使用name屬性,要設置一對。一是設定name的名稱,二是設定一個href指向這個name:
<a href="#C1">參見第一章</a>
<a name="C1">第一章</a>
<html>
<body>
<p>
<a href="#C6">
參見第六章
</a>
</p>
<p>
<a name="C1"><h2>第1章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C2"><h2>第2章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C3"><h2>第3章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C4"><h2>第4章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C5"><h2>第5章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C6"><h2>第6章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C7"><h2>第7章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C8"><h2>第8章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C9"><h2>第9章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C10"><h2>第10章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C11"><h2>第11章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C12"><h2>第12章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C13"><h2>第13章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C14"><h2>第14章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C15"><h2>第15章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C16"><h2>第16章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
<a name="C17"><h2>第17章</h2></a>
<p>這是站長網 站長學院admin5.com/html- 網頁教程與代碼的中文站點。</p>
</body>
</html>
name屬性通常用于創(chuàng)建一個大文件的章節(jié)目錄(table of contents)。每個章節(jié)都建立一個鏈接,放在文件的開始處,每個章節(jié)的開頭都設置Name屬性。當用戶點擊某個章節(jié)的鏈接時,這個章節(jié)的內容就顯示在最上面。
如果瀏覽器不能找到Name指定的部分,則顯示文章開頭,不報錯。
鏈接到email地址
在網站中,你經常會看到“聯(lián)系我們”的鏈接,一點擊這個鏈接,就會觸發(fā)你的郵件客戶端,比如Outlook Express,然后顯示一個新建mail的窗口。用<a>可以實現(xiàn)這樣的功能。
<a href = "mailto:info@sina.com">聯(lián)系新浪</a>
<html>
<body>
<p>
這是一個最簡單的郵箱地址的鏈接:
<a href="mailto:info@sina.com">給新浪網站發(fā)信</a>
</p>
<p>
這個郵箱地址的鏈接寫了subject內容:
<a href="mailto:info@sina.com?subject=Hello">給新浪網站發(fā)信</a>
</p>
<p>
這個郵箱地址鏈接寫了to, cc, bcc, subject, body的內容:
<a href="mailto:info@sina.com?cc=webmaster@vip.sina.com&bcc=media@sina.com&subject=I%20like%20your%20site&body=真是個好站點!">寫信給新浪</a>
</p>
<p>
<b>注:</b>空格請用%20表示。
</p>
</body>
</html>