全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。

主要內容：這是HTML課程的第五課，主要講解HTML的圖片和超鏈接。讓自己設計的網頁更加多元素。

上節回顧

在上節中主要講解了HTML的文字標簽和格式標簽。上篇請戳→→04程序員定要學HTML，字體段落標簽介紹，60秒搞定

其實如果沒有記住也無所謂。畢竟這些標簽都是HTML中比較常用的，在以后的相關的案例中也會使用。此系列教程主要講解HTML從基礎到精通。自己能夠設計一個完整的前端網頁項目。

程序員寫代碼

圖片

在HTML中添加圖片其實很簡單，就是添加一個img的標簽。

圖片標簽的語法

一般有src、alt、width、height四種屬性就夠用了。

效果：

圖片的顯示效果

圖片路徑的寫法

src表示的是圖片的路徑，這里面的值應該怎么寫呢？

（1）html文件和圖片在相同一個文件夾下。

HTML文件和圖片文件在相同的目錄下，可以直接書寫文件的名稱。

寫文件名的寫法，如上面的HTML

（2）圖片在HTML文件所在目錄的文件夾內：

如圖：

圖片文件在文件夾內

此時需要加上文件夾名稱，并加上“/”表示下層目錄：

下層目錄的圖片寫法

（3）圖片文件在上層目錄

如果圖片在HTML文件所在的上層目錄，則需要寫“..”表示向上一級。如圖：

上層目錄

超鏈接

超鏈接就是可以鏈接到某個資源的東西，比如我們打開百度首頁搜索后，產生的就是超鏈接：

這些藍字超鏈接

這些藍色的文字標題，我們點擊之后可以跳轉到新的網站。這就是超鏈接。下面我們自己寫一個超鏈接：

超鏈接的寫法

超鏈接預覽

超鏈接中的屬性

超鏈接中的潮涌屬性包括：href（網頁地址）、title（說明描述）、target（打開網頁的位置）、name（名稱）。

其中href支持帶有任何協議的連接。title是對超鏈接的說明。

程序員

target包括四個值：

_blank

在新的窗口打開連接

_self

在當前窗口打開超鏈接

_parent

在父窗口打開超鏈接，這個后面會說，不常用

_top

在整個窗口中打開被鏈接文檔。

每天一個知識點，帶你邁向軟件編程大神，一起努力吧。

標

1. 超鏈接標簽的作用是什么？
2. 頁面間如何進行跳轉？
3. 快速定位的錨鏈接的使用？

超鏈接標簽的作用

網頁必定會存在跳轉不同網頁的功能，幾乎可以在所有的網頁中找到鏈接，點擊鏈接可以從一個網頁跳轉到另一個網頁。

超鏈接標簽的語法

1、標簽

<a />

2、屬性

Href:要跳轉到的地址

Target：跳轉的網頁在哪個窗口打開

Target常用的值有兩個，_self表示在自身網頁中打開，_blank表示新打開一個窗口。默認是_self。

3、示例

<a  target="_blank">我要跳轉到百度</a>

錨鏈接

超鏈接標簽除了有跳轉網頁的功能以外，還有一個功能，就是書簽功能，經常會用在小說網站或者文檔網站。

綜合運用

超鏈接標簽本身是具有跳轉功能，再結合書簽功能，就能達到跳轉到其他頁面的書簽位置。用法都一樣，只不過書簽是定在其他網頁，然后本頁面的超鏈接標簽的href的值，是跳轉路徑+#+書簽標簽。以下示例：

1、在目標網頁里定好書簽

2、本網頁的超鏈接標簽對接好目標地址以及目標書簽.

總結

同的鏈接可以有不同的樣式。

鏈接樣式

鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。

特別的鏈接，可以有不同的樣式，這取決于他們是什么狀態。

這四個鏈接狀態是：

• a:link - 正常，未訪問過的鏈接

• a:visited - 用戶已訪問過的鏈接

• a:hover - 當用戶鼠標放在鏈接上時

• a:active - 鏈接被點擊的那一刻

實例

a:link {color:#FF0000;} /* 未訪問鏈接*/

a:visited {color:#00FF00;} /* 已訪問鏈接 */

a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上 */

a:active {color:#0000FF;} /* 鼠標點擊時 */

當設置為若干鏈路狀態的樣式，也有一些順序規則：

• a:hover 必須跟在 a:link 和 a:visited后面

• a:active 必須跟在 a:hover后面

常見的鏈接樣式

根據上述鏈接的顏色變化的例子，看它是在什么狀態。

讓我們通過一些其他常見的方式轉到鏈接樣式：

文本修飾

text-decoration 屬性主要用于刪除鏈接中的下劃線：

實例

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

背景顏色

背景顏色屬性指定鏈接背景色：

實例

a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！