html中<a>標簽的用法
<a>標簽的三種用法
<!--本博客所有示例均在頁面底部-->
1 頁面跳轉
<!--href 是屬性,"引號引起來的是屬性值"
寫法<a href = "路徑" target="屬性值">這個路徑在這指的是需要跳轉的頁面的網址</a>
<!--記憶方式:target英文單詞含義 對象 。即後面的屬性值對前面的屬性進行處理,對象的處理方式為(下面五種方式)-->
target的屬性值有:
_blank:target="_blank" 含義:在一個新的窗口打開被連接文檔 <!--記憶方式:英文單詞blank 形容詞 空的 即在空的頁面打開-->
_self:target="_self" 含義:在當前頁面打開被鏈接文檔 <!--記憶方式: self 名詞 自己 即在當前頁面打開-->
_parent:target="_parent" 含義:在父框架集中打開被鏈接文檔 <!--記憶方式: parent 名詞單數 父親或母親,即在父框架打開-->
_top:target="_top" 含義:在整個窗口打開被鏈接文檔 <!--記憶方式:top名詞頂部 即在頂部窗口打開-->
註:這是4 個保留的目標名稱用作特殊的文檔重定向操作,特殊屬性值
framename:在指定的框架中打開被鏈接文檔,把frame看做內置瀏覽器。
_parent,_top,name,必須結合frame的使用(還理解不了,在學習)
2 定位
設定錨點:
在要定位到的位置找一個標簽給他加id屬性,屬性值就是錨點名稱
示例:
<a href="#">內容</a> <!--#的意思是跳轉到本頁-->
定位錨點:
跳轉到指定錨點
3 下載 or其他
a 標簽跳轉到的文件 瀏覽器打不開,然後會選擇提供下載
例如RAR文件(即href路徑為rar文件)
<a href = "../../槍.rar">內容</a>
示例:
頁面跳轉代碼:
1 <body> 2 3 <h3>Table of Contents</h3> 4 <ul> 5 <li><a href="pref.html" target="view_window">preface</a></li> 6 <li><a href="chap1.html" target="view_window">chapter</a></li> 7 <li><a href="chap2.html" target="view_window">chapter</a></li> 8 <li><a href="chap3.html" target="view_window">chapter</a></li> 9 10 </body>跳轉頁面代碼
運行截圖
註意:實際運行過程,<a href="路徑">內容</a>均會展現內容下有下劃線以及鼠標移動至內容處變小手。
定位代碼:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>例文-錨點鏈接</title> 6 </head> 7 <div align="center"><!--後面標題內容居中--> 8 <h3><a href="#music">音樂</a></h3><!--標題內容--> 9 <h3><a href="#movie">電影</a></h3> 10 <h3><a href="#game">遊戲</a></h3> 11 </div> 12 <div style="font-size: 60px;"><!--設置字體尺寸--> 13 ...<br><!--換行--> 14 ...<br> 15 ...<br> 16 ...<br> 17 </div> 18 <div id="music"><!--對照前面的href="music",效果為點擊音樂後跳轉到下面標題內容--> 19 <h3>推薦音樂</h3> 20 <ul> 21 <li>紅昭願</li> 22 <li>光輝歲月</li> 23 <li>少年中國說</li> 24 <li>青花瓷</li> 25 </ul> 26 </div> 27 <div style="font-size: 60px"> 28 ...<br> 29 ...<br> 30 ...<br> 31 ...<br> 32 </div> 33 <div id="movie"> 34 <h3>推薦電影</h3> 35 <ul> 36 <li>霸王別姬</li> 37 <li>肖申克的救贖</li> 38 <li>速度與激情</li> 39 <li>加勒比海盜</li> 40 </ul> 41 </div> 42 <div style="font-size: 60px"> 43 ...<br> 44 ...<br> 45 ...<br> 46 ...<br> 47 </div> 48 <div id="game"> 49 <h3>推薦遊戲</h3> 50 <ul> 51 <li>英雄聯盟</li> 52 <li>王者榮耀</li> 53 <li>絕地求生</li> 54 <li>大話西遊</li> 55 </ul> 56 </div> 57 <div style="font-size: 60px"> 58 ...<br> 59 ...<br> 60 ...<br> 61 ...<br> 62 ...<br> 63 ...<br> 64 ...<br> 65 ...<br> 66 </div> 67 68 <body> 69 </body> 70 </html>錨點鏈接示例
運行截圖:
下載代碼:
<a href = "../../槍.rar">內容</a>
運行截圖
html中<a>標簽的用法