HTML中網頁超鏈接設計


一、超鏈接的概念:

1>用<a>標簽實現。href屬性設置了要鏈接的網址。

鏈接路徑URL:Uniform Resource Locator的縮寫。統一資源定位符。

4部分組成:協議名、主機名、文件夾名、文件名。

相對URL通常只包含文件夾名和文件名。絕對URL包含全部信息。

2>設置鏈接的目標窗口。target屬性,定義鏈接打開的目標窗口或框架,定義新的窗口。

target屬性的屬性值及其功能:

target屬性值及功能
_blank     將鏈接的文檔載入到一個新的未命名的瀏覽器窗口
_parent 將鏈接的文檔載入包含該鏈接框架的父框架集或窗口。
_self 將鏈接的文檔載入鏈接所在的同一框架或窗口,通常不需要設置
_top 將鏈接的文檔載入整個瀏覽器窗口,而刪除所有的框架
   

 

 

 

 

 

 

 

3>設置鏈接的提示信息,使用<a>標簽的title屬性。

4>鏈接網站內部的不同網頁。將href設置成要鏈接的網頁名稱。

5>使用錨鏈接到同一個網頁的不同位置。添加的錨點:id必須唯一

<a id="html"></a>
 <a id="css3"></a>
 1 <body>
 2     <div style=" width: 500px; height: 600px; background-color: #e4eef9">
 3         <h1 align="center">網頁的超鏈接設計</h1><hr />
 4         <h3 style=" text-align:center ">使用錨鏈接到同一個網頁的不同位置</h3>
 5         <a href="#html">HTML概念</a><br />
 6         <a href="#css3">CSS3概念</a><br />
 7         <a href="#JavaScript">JAVAscript概念</a><hr />
 8         <a id="html"></a>
 9         <h4>HTML</h4>
10         <p>HTML 的具體概念,,,,,,,,,,,你懂得!!!</p>
11         <hr />
12         <a id="css3"></a>
13         <h4>CSS3</h4>
14         <p> 的具體概念,急急急急急急   然后你懂得。!!</p>
15         <hr />
16         <a id="JavaScript"></a>
17         <h4>JAVAscript</h4>
18         <p>javascrpt 的具體的內容!!!!!然后你懂得!!!</p>
19     </div>
20 </body>


 

6>使用錨鏈接到另一個網頁的特定位置。

1  <h3 style="text-align:center ">使用錨鏈接到另一個網頁的特定位置</h3>
2         <a href="錨鏈接練習網頁1.html#html " target="_blank" title=" 你講前往下一個網頁">HTML的介紹</a><br />
3         <a href="錨鏈接練習網頁1.html#css3" target="_blank"  title=" 你就等着瞧吧!哈哈哈">CSS3的介紹</a></div>
1 <body>
2     <a id="html"></a>
3     <h3>HTML介紹</h3>
4     <p>hhffhsjkfkjashfkaflh黃飛鴻放寒假啊上課了 廢話多薩科技家飛回家看發貨就看到就發貨啊發卡量發卡量房價控制法律啊安康</p>
5     <a id="css3"></a>
6     <h3>CSS3介紹</h3>
7     <p>發生的恢復健康哈薩克鏈接粉紅色開講啦護膚老師發科技愛好是開發技術呵呵呵!!!</p>
8 </body>

7>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM