超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。
我們通過使用 <a> 標簽在 HTML 中創建鏈接。
有兩種使用 <a> 標簽的方式:
鏈接的 HTML 代碼很簡單。它類似這樣:
<a href="url">Link text</a>
href 屬性規定鏈接的目標。
開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。
實例
<a >百度</a>
上面這行代碼顯示為:百度
點擊這個超鏈接會把用戶帶到 百度 的首頁。
提示:"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔:
<a target="_blank">百度</a>
name 屬性規定錨(anchor)的名稱。
您可以使用 name 屬性創建 HTML 頁面中的書簽。
書簽不會以任何特殊方式顯示,它對讀者是不可見的。
當使用命名錨(named anchors)時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
命名錨的語法:
<a name="label">錨(顯示在頁面上的文本)</a>
提示:錨的名稱可以是任何你喜歡的名字。
提示:您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。
實例
首先,我們在 HTML 文檔中對錨進行命名(創建一個書簽):
<a name="tips">基本的注意事項 - 有用的提示</a>
然后,我們在同一個文檔中創建指向該錨的鏈接:
<a href="#tips">有用的提示</a>
您也可以在其他頁面中創建指向該錨的鏈接:
<a href="url#tips">有用的提示</a>
本例演示如何在新窗口打開一個頁面,這樣的話訪問者就無需離開你的站點了。
<html> <body> <a target="_blank">百度</a> <p>如果把鏈接的 target 屬性設置為 "_blank",該鏈接會在新窗口中打開。</p> </body> </html> ?
HTML基礎教程:超鏈接的使用
作用:可以讓我們從一個頁面跳轉到其他頁面,或者是當前頁面的其他位置
使用方法:使用 a標簽 來定義超鏈接
a標簽 是行內元素 、a標簽 可以嵌套除它自身的任何元素
1、屬性:href 指定跳轉的目標的路徑
(1) 可以跳轉外部網站的一個地址 也可以跳轉內部頁面的地址
<a href="index.jsp" target="_blank">超鏈接</a>
<a href="https://www.baidu.com" target="_self">
<div class="aa">
超鏈接
</div>
</a>
(2) 可以直接將超鏈接的href的屬性設置為 '#'
這樣點擊超鏈接以后頁面不會發生跳轉 而是當前頁面的頂部位置
<a id="bottom" href="#">回到頂部</a>
(3) 跳轉到指定位置 ,只需要將href屬性設置為 #目標元素的id屬性值 (錨點)
<a href="#bottom">去底部頂部</a>
2、屬性:targer 用來指定超鏈接打開的位置
(1). _self :當前頁打開(默認值)
<a href="https://www.baidu.com" target="_self">當前頁面<a>
(2). _blank :新建頁面打開
<a href="index.jsp" target="_blank">新頁面打開</a>
全部a標簽屬性
鏈接a標簽是網頁最常用的一個元素,如何能夠把超鏈接的樣式外觀控制得完美也是一項前端必備技能。
目標
在所有瀏覽器里,超鏈接的樣式幾乎都是一樣,尤其是在新聞類的網站里,更是如此。
新聞類網站
幾乎都是藍色的文字,點擊的瞬間變紅色,瀏覽過的超鏈接是紫色。因為這就是官方默認的樣式。
官方樣式
偽類就是不同狀態的名字。
語法:標簽:偽類值
偽類值
link就是默認樣式,在未被訪問時的樣式
link
visited是訪問后的樣式
visited
hover是鼠標經過顯示的樣式
hover
active是鼠標單擊激活時的樣式
active
hover偽類不只限于a標簽,幾乎所有的標簽都可以用,是一個非常強大的偽類!
只要是需要鼠標經過,做出樣式改變的,就一定是hover偽類。
網上很多的需要鼠標經過做動畫效果的,就是靠hover偽類。
動畫效果
思維導圖
*請認真填寫需求信息,我們會在24小時內與您取得聯系。