標籤,鏈接到另一個頁面

使用<a>標籤可實現超鏈接,它在網頁製作中可以說是無處不在,只要有鏈接的地方,就會有這個標籤。

語法:

<a  href="目標網址"  title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
  • title屬性的作用,鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大,主要方便搜索引擎瞭解鏈接地址的內容(語義化更友好)。

注意:還有一個有趣的現象不知道小夥伴們發現了沒有,只要爲文本加入a標籤後,文字的顏色就會自動變爲藍色(被點擊過的文本顏色爲紫色),這個可以在css中設置爲自定義的屬性。

練習:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的蓋茨比</title>
</head>
<body>
    <ul>
       <li><a href="#" title="前端開發面試心法">前端開發面試心法</a> </li>
       <li><a href="#" title="零基礎學習html">零基礎學習html</a></li>
       <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li>
    </ul>
    <p>1922年的春天,一個想要成名名叫尼克•卡拉威(<a href="http://yanshisangc.github.io/" title="誰點誰傻逼">託比•馬奎爾Tobey Maguire</a> 飾)的作家,離開了美國中西部,來到了紐約。那是一個道德感漸失,爵士樂流行,走私爲王,股票飛漲的時代。爲了追尋他的美國夢,他搬入紐約附近一海灣居住。</p>
    <p>菲茨傑拉德,二十世紀美國文學巨擘之一,兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象爲"爵士樂時代"吟唱華麗輓歌,其詩人和夢想家的氣質亦爲那個奢靡年代的不二註解。</p>
</body>
</html>

以上的方法是在本頁面跳轉到新鏈接,若要在新的頁面中跳轉鏈接,需要修改一下,只用把

<a href="http://yanshisangc.github.io/" title="誰點誰傻逼">託比•馬奎爾Tobey Maguire</a>

改爲

<a href="http://yanshisangc.github.io/" title="誰點誰傻逼" targe="_blank">託比•馬奎爾Tobey Maguire</a>

即可實現。


有時在網頁中需要鏈接郵箱,點擊後就能自動啓用系統郵箱服務

郵箱鏈接需要在<a>標籤裏面使用mailto屬性,mailto的用法如下表:

字段 功能 示例 效果
mailto: 收件人地址 <a href="mailto:[email protected]">發送</a> 發送
cc= 抄送地址 <a href="mailto:[email protected][email protected]">發送</a> 發送
bcc= 密送地址 <a href="mailto:[email protected][email protected]">發送</a> 發送
; 隔開多個收件人地址 <a href="mailto:[email protected];[email protected]">發送</a> 發送
subject= 郵件主題 <a href="mailto:[email protected]?subject=問候信">發送</a> 發送
body= 郵件內容 <a href="mailto:[email protected]?body=Bonjour">發送</a> 發送

注意:如果mailto後面同時有多個參數的話,第一個參數必須以“?”開頭,後面的參數每一個都以“&”分隔。

下面是一個完整代碼:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mailto</title>
</head>
<body>
    <a href="mailto:[email protected][email protected]&[email protected]
    &subject=近期任務&body=很忙">點此發送郵件</a>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章