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