整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實用視頻。
主要內(nèi)容：這是HTML課程的第五課，主要講解HTML的圖片和超鏈接。讓自己設(shè)計的網(wǎng)頁更加多元素。
在上節(jié)中主要講解了HTML的文字標簽和格式標簽。上篇請戳→→04程序員定要學HTML，字體段落標簽介紹，60秒搞定
其實如果沒有記住也無所謂。畢竟這些標簽都是HTML中比較常用的，在以后的相關(guān)的案例中也會使用。此系列教程主要講解HTML從基礎(chǔ)到精通。自己能夠設(shè)計一個完整的前端網(wǎng)頁項目。
程序員寫代碼
在HTML中添加圖片其實很簡單，就是添加一個img的標簽。
圖片標簽的語法
一般有src、alt、width、height四種屬性就夠用了。
效果：
圖片的顯示效果
src表示的是圖片的路徑，這里面的值應該怎么寫呢？
（1）html文件和圖片在相同一個文件夾下。
HTML文件和圖片文件在相同的目錄下，可以直接書寫文件的名稱。
寫文件名的寫法，如上面的HTML
（2）圖片在HTML文件所在目錄的文件夾內(nèi)：
如圖：
圖片文件在文件夾內(nèi)
此時需要加上文件夾名稱，并加上“/”表示下層目錄：
下層目錄的圖片寫法
（3）圖片文件在上層目錄
如果圖片在HTML文件所在的上層目錄，則需要寫“..”表示向上一級。如圖：
上層目錄
超鏈接就是可以鏈接到某個資源的東西，比如我們打開百度首頁搜索后，產(chǎn)生的就是超鏈接：
這些藍字超鏈接
這些藍色的文字標題，我們點擊之后可以跳轉(zhuǎn)到新的網(wǎng)站。這就是超鏈接。下面我們自己寫一個超鏈接：
超鏈接的寫法
超鏈接預覽
超鏈接中的潮涌屬性包括：href（網(wǎng)頁地址）、title（說明描述）、target（打開網(wǎng)頁的位置）、name（名稱）。
其中href支持帶有任何協(xié)議的連接。title是對超鏈接的說明。
程序員
target包括四個值：
_blank
在新的窗口打開連接
_self
在當前窗口打開超鏈接
_parent
在父窗口打開超鏈接，這個后面會說，不常用
_top
在整個窗口中打開被鏈接文檔。
每天一個知識點，帶你邁向軟件編程大神，一起努力吧。
標
網(wǎng)頁必定會存在跳轉(zhuǎn)不同網(wǎng)頁的功能，幾乎可以在所有的網(wǎng)頁中找到鏈接，點擊鏈接可以從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁。
跳轉(zhuǎn)到百度
1、標簽
<a />
2、屬性
Href:要跳轉(zhuǎn)到的地址
Target：跳轉(zhuǎn)的網(wǎng)頁在哪個窗口打開
Target常用的值有兩個，_self表示在自身網(wǎng)頁中打開，_blank表示新打開一個窗口。默認是_self。
3、示例
<a target="_blank">我要跳轉(zhuǎn)到百度</a>
超鏈接標簽除了有跳轉(zhuǎn)網(wǎng)頁的功能以外，還有一個功能，就是書簽功能，經(jīng)常會用在小說網(wǎng)站或者文檔網(wǎng)站。
跳轉(zhuǎn)到書簽位置
超鏈接標簽本身是具有跳轉(zhuǎn)功能，再結(jié)合書簽功能，就能達到跳轉(zhuǎn)到其他頁面的書簽位置。用法都一樣，只不過書簽是定在其他網(wǎng)頁，然后本頁面的超鏈接標簽的href的值，是跳轉(zhuǎn)路徑+#+書簽標簽。以下示例：
1、在目標網(wǎng)頁里定好書簽
在目標網(wǎng)頁里定好書簽
2、本網(wǎng)頁的超鏈接標簽對接好目標地址以及目標書簽.
對接目標地址以及目標書簽
跳轉(zhuǎn)到目標網(wǎng)頁并定位到書簽位置
超鏈接標簽知識體系
同的鏈接可以有不同的樣式。
鏈接樣式
鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。
特別的鏈接，可以有不同的樣式，這取決于他們是什么狀態(tài)。
這四個鏈接狀態(tài)是：
a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻
實例
a:link {color:#FF0000;} /* 未訪問鏈接*/
a:visited {color:#00FF00;} /* 已訪問鏈接 */
a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上 */
a:active {color:#0000FF;} /* 鼠標點擊時 */
當設(shè)置為若干鏈路狀態(tài)的樣式，也有一些順序規(guī)則：
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面
常見的鏈接樣式
根據(jù)上述鏈接的顏色變化的例子，看它是在什么狀態(tài)。
讓我們通過一些其他常見的方式轉(zhuǎn)到鏈接樣式：
文本修飾
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，我們一起飛！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
