HTML5超鏈接和圖片基礎(chǔ)用法詳解
我要評(píng)論一、HTML5 超鏈接（鏈接）
超鏈接可以是一個(gè)文本，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的頁(yè)面或新的文檔或者當(dāng)前文檔中的某個(gè)部分。
當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
1.我們通過(guò)使用 a標(biāo)簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 a標(biāo)簽的方式：
- 通過(guò)使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接
- 通過(guò)target屬性：用來(lái)指定超鏈接打開(kāi)的位置，可選值
- 通過(guò)使用 id 屬性 - 創(chuàng)建文檔內(nèi)的書簽
1.HTML 鏈接 -href 屬性和target屬性
通過(guò)target屬性：可選值有：
? _self默認(rèn)值，在當(dāng)前頁(yè)面中打開(kāi)超鏈接；
_blank在一個(gè)新的頁(yè)面中打開(kāi)超鏈接；
<a target="_blank">大土土隨筆</a>
test.html完整代碼如下：
運(yùn)行效果如下圖：
2.HTML 鏈接 - id 屬性
id 屬性規(guī)定錨（anchor）的名稱。
您可以使用 id 屬性創(chuàng)建 HTML 頁(yè)面中的書簽。
書簽不會(huì)以任何特殊方式顯示，它對(duì)讀者是不可見(jiàn)的。
當(dāng)使用命名錨時(shí)，我們可以創(chuàng)建直接跳至該命名錨（比如頁(yè)面中某個(gè)小節(jié)）的鏈接，這樣使用者就無(wú)需不停地滾動(dòng)頁(yè)面來(lái)尋找他們需要的信息了。
命名錨的語(yǔ)法：
<a id="label">錨（顯示在頁(yè)面上的文本）</a>
**提示：**錨的名稱可以是任何你喜歡的名字。
**提示：**您可以使用name 屬性來(lái)替代id 屬性，命名錨同樣有效。
實(shí)例：
test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測(cè)試</title> </head> <body> <p> <font size="3" color="red">個(gè)人博客</font></p> <a target="_blank">大土土隨筆</a> <hr /> <p> <a href="#bottom">跳轉(zhuǎn)到底部</a> </p> <p> <a href="#C4">查看 Chapter 4 滿江紅</a> </p> <hr /> <h2>Chapter 1 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 2 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 3 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2><a id="C4">Chapter 4 滿江紅</a></h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter5 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 6 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 7 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 8 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 9 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 10 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 11 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 12 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <h2>Chapter 13 滿江紅</h2> <p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長(zhǎng)嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。 靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長(zhǎng)車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p> <hr /> <p> <a id="bottom" href="#">回到頂部</a> </p> </body> </html>
運(yùn)行效果如下：
二、HTML5 相對(duì)路徑
當(dāng)我們需要跳轉(zhuǎn)一個(gè)服務(wù)器內(nèi)部的頁(yè)面時(shí)，一般我們都會(huì)使用相對(duì)路徑，相對(duì)路徑都會(huì)使用.或…開(kāi)頭
./
…/
./表示當(dāng)前文件所在的目錄，在這里當(dāng)前頁(yè)面是test.html./就等于test.html所在的目錄
test.html
運(yùn)行效果：
三、HTML5 圖片
圖片標(biāo)簽用于向當(dāng)前頁(yè)面中引入一個(gè)外部圖片。使用img標(biāo)簽來(lái)引入外部圖片，img標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽。img這種元素屬于替換元素(塊和行內(nèi)元素一鍵，具有兩種元素的特點(diǎn))。
src屬性指定的是外部圖片的路徑（路徑規(guī)則和超鏈接是一樣的）。
alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。當(dāng)瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性可告訴讀者他們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的。
width圖片的寬度（單位是像素）
height圖片的高度（單位是像素）
寬度和高度中如果只修改了一個(gè)，則另外一個(gè)會(huì)等比例縮放。
注意：一般情況下，不建議修改圖片大小，需要多大的圖片就裁剪多大，但是在移動(dòng)端，經(jīng)常需要對(duì)圖片進(jìn)行縮放（大圖縮?。?/p>
圖片的格式：
jpeg(jpg)：支持的顏色比較豐富，不支持透明效果，不支持動(dòng)圖，一般用來(lái)顯示圖片。
gif：支持的顏色比較少，支持簡(jiǎn)單透明，支持動(dòng)圖，一般用來(lái)顯示顏色單一的圖片，動(dòng)圖。
png：支持的顏色豐富，支持復(fù)雜透明，不支持動(dòng)圖。一般用來(lái)顯示顏色豐富，復(fù)雜透明圖片（專為網(wǎng)頁(yè)而生）。
webp：這種格式是谷歌新推出的專門用來(lái)表示網(wǎng)頁(yè)中的一種圖片格式，它具備其他圖片格式的所有優(yōu)點(diǎn)，而且文件還特別的小。它的缺點(diǎn)是兼容性不好。
圖片使用原則：效果一樣，用小的；效果不一樣，用效果好的。
<img src="./img/2023-04-14_HTML5_06.jpg" alt="日落" width="200">
運(yùn)行效果如下：
到此這篇關(guān)于HTML5超鏈接和圖片基礎(chǔ)用法詳解的文章就介紹到這了,更多相關(guān)html5超鏈接和圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語(yǔ)法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣2025-02-17