來(lái)源頭條作者:二流小碼農(nóng)上半部分呢，主要講述的是路徑的選擇，這個(gè)是至關(guān)重要的，前邊也說(shuō)過(guò)，路徑不僅僅局限于圖片的選擇，以后的css，javascript，以及網(wǎng)頁(yè)的跳轉(zhuǎn)等等，都會(huì)牽扯到路徑，所以，才花費(fèi)了較大篇幅去闡述，也希望大家能夠引起重視。

還有一個(gè)知識(shí)點(diǎn)需要補(bǔ)充一下，上半部分呢，對(duì)于圖片的路徑都是采用的本地路徑，如果我們要加載網(wǎng)上的某一張圖片呢？這個(gè)其實(shí)更簡(jiǎn)單，直接可以把圖片的地址寫到src里，如下圖：

比如，這里有一個(gè)網(wǎng)上的圖片地址：

https://avatar.csdnimg.cn/B/C/8/0_ming_147.jpg

代碼如下：

代碼

效果如下：

效果

我們接著講述下面的課程，什么是屬性呢？其實(shí)就是某個(gè)附加信息，比如人，他的附加信息，有名字，有年齡，那么針對(duì)于標(biāo)簽，屬性就是它的附加信息，有一個(gè)需要注意的，屬性是寫在標(biāo)簽內(nèi)，也就是起始的標(biāo)簽內(nèi)，雖然不區(qū)分大小寫，但盡量和標(biāo)簽統(tǒng)一，使用小寫字母；屬性，是一個(gè)鍵值對(duì)，語(yǔ)法如下：

key="value"。

看到上邊的語(yǔ)法，我們是不是想到了第一天講述的img標(biāo)簽的用法，還記得嗎？是不是里面也有個(gè)屬性，src，如下圖：

屬性

其實(shí)絕大多數(shù)屬性都是這樣呈現(xiàn)的，一般以雙引號(hào)為主，有時(shí)候也會(huì)使用單引號(hào)；單雙引號(hào)，表述是一致的，下面我們舉個(gè)例子，新建一個(gè)網(wǎng)頁(yè)，引入一個(gè)圖片，如下圖：

目錄

代碼如下：

代碼

效果如下：

效果

很簡(jiǎn)單的一個(gè)例子，只是展示一個(gè)圖片，在實(shí)際開(kāi)發(fā)中，一般我們會(huì)控制圖片的大小，也就是圖片的寬高，畢竟有的圖片太大了，直接展示影響美觀，怎么樣控制寬高呢？這里就需要屬性了，寬屬性：wdith，高屬性：height，我們分別使用一下：

把圖片的寬調(diào)整為，寬100px，px是像素，也就是單位，下個(gè)課程，我們講述一下，這里，我們先作為了解,px可以書寫，也可以不寫，默認(rèn)就是像素單位。

代碼如下：

代碼

效果如下：

效果

有的朋友想問(wèn)了，我明明只寫了寬，沒(méi)有寫高，為什么顯示這樣呢？這個(gè)需要大家了解一下，如果，我們只僅僅得寫了寬，或者只寫了高，

那么對(duì)于img這個(gè)標(biāo)簽，它會(huì)按照你指定的大小，對(duì)另一個(gè)做等比例的縮放或放大處理，也就是說(shuō)，本來(lái)圖片寬100px，高100px，你改寫了寬屬性，設(shè)置width="20px"，那么隨之的，高也會(huì)變成20px，這就是等比例的處理。

我們?cè)倏匆粋€(gè)例子，同時(shí)設(shè)置寬和高：

代碼如下：

代碼

效果如下：

效果

兩個(gè)屬性都設(shè)置的話，那么它就會(huì)按照你設(shè)置的進(jìn)行展示，有可能會(huì)出現(xiàn)圖片的拉伸或壓縮情況，這種情況的出現(xiàn)，是因?yàn)槟愕膱D片過(guò)大或者過(guò)小而導(dǎo)致的，在實(shí)際的開(kāi)發(fā)中，我們也要考慮到這種情況，一般UI，會(huì)給我們標(biāo)注圖片的尺寸，或者比例，我們按照UI的標(biāo)注去寫，就沒(méi)有問(wèn)題。

上邊兩個(gè)就是img的屬性，其實(shí)也沒(méi)啥難的，無(wú)非就是控制寬高而已，需要注意一下，多個(gè)屬性之間，我們使用空格隔開(kāi)，我們?cè)偃タ戳硪粚傩裕琣lt屬性，alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本，什么意思呢，就是在圖片無(wú)法加載，或者加載錯(cuò)誤的時(shí)候，所展示的文本信息，如下圖，我們故意把圖片的地址寫錯(cuò)：

代碼

因?yàn)槲覀儧](méi)有“l(fā)ife1.png”這張圖片，加載肯定是錯(cuò)誤的，我們看下效果：

效果

以上是圖片加載錯(cuò)誤后，給用戶展示的圖片描述信息，如果說(shuō)圖片展示正常，用戶鼠標(biāo)滑過(guò)圖片，就給出圖片的描述，我們?cè)撊绾卧O(shè)置呢？實(shí)現(xiàn)這種效果，我們就必須再去掌握它的另外一個(gè)屬性“title”，我們直接看例子：

代碼

效果如下：

效果

截圖截不了這個(gè)效果，就用手機(jī)拍的，所以啊，老鐵們，寫這種技術(shù)文章是很耗時(shí)的，還麻煩給個(gè)關(guān)注哦，在這里謝謝了。

2、a標(biāo)簽及屬性的使用

我們經(jīng)常看到很多網(wǎng)頁(yè)里，點(diǎn)擊某個(gè)圖片，或者點(diǎn)擊某段文字，就跳轉(zhuǎn)到了另一頁(yè)面，比如淘寶，京東，點(diǎn)擊商品后，就跳轉(zhuǎn)到商品詳情，今日頭條或者網(wǎng)易新聞，點(diǎn)擊某個(gè)新聞，就跳轉(zhuǎn)了新聞詳情，這是如何實(shí)現(xiàn)呢？其實(shí)絕大部分都可以用a標(biāo)簽來(lái)實(shí)現(xiàn)。

a標(biāo)簽?zāi)兀且粋€(gè)超鏈接，超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，我們可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分，當(dāng)我們把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>我們先看下效果，href是a標(biāo)簽的屬性，用來(lái)跳轉(zhuǎn)的地址，類似img標(biāo)簽的src屬性，都是指向的一個(gè)路徑。

代碼

效果如下：

效果

因?yàn)閔ref里是空的，所以，目前的點(diǎn)擊時(shí)沒(méi)有一點(diǎn)效果的，下面我們練習(xí)下跳轉(zhuǎn)，這里我們分為兩種，一種是網(wǎng)絡(luò)地址跳轉(zhuǎn)，一種是本地文件跳轉(zhuǎn)。

第一種，網(wǎng)絡(luò)地址跳轉(zhuǎn)

我們直接跳到百度首頁(yè)，代碼如下：

代碼

右鍵選擇瀏覽器中打開(kāi)：

瀏覽器打開(kāi)

點(diǎn)擊跳轉(zhuǎn)百度后，直接打開(kāi)了百度首頁(yè)，大家可以試一試，這里就不貼圖了。

第二種，本地文件跳轉(zhuǎn)

目前“a標(biāo)簽.html”和“遠(yuǎn)程圖片加載.html”同屬一個(gè)目錄，在代碼里，我們直接寫文件的名字。

目錄

在“a標(biāo)簽.html”里代碼如下：

代碼

效果如下：

效果

點(diǎn)擊之后：

點(diǎn)擊之后

基本上本地的文件跳轉(zhuǎn)，和上半部分的圖片的路徑是一樣的，如果對(duì)于路徑，你已經(jīng)很清晰了，那么文件在子目錄或者在父目錄，根目錄，相信你也沒(méi)有問(wèn)題，無(wú)非就是"../"和“/”及文件夾的使用，這里就不舉太多的例子了，畢竟之前已經(jīng)花費(fèi)了很大篇幅在說(shuō)路徑問(wèn)題，如果你目前仍然對(duì)路徑有不解，可以看看之前所講的內(nèi)容，或者看對(duì)應(yīng)的第二天的視頻，我也會(huì)重復(fù)去講。