1. 程式人生 > >html中<a>標簽的用法

html中<a>標簽的用法

ima 榮耀 其他 英文 ack mage span 目標 none

<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>標簽的用法