來源頭條作者:二流小碼農上半部分呢，主要講述的是路徑的選擇，這個是至關重要的，前邊也說過，路徑不僅僅局限于圖片的選擇，以后的css，javascript，以及網頁的跳轉等等，都會牽扯到路徑，所以，才花費了較大篇幅去闡述，也希望大家能夠引起重視。

還有一個知識點需要補充一下，上半部分呢，對于圖片的路徑都是采用的本地路徑，如果我們要加載網上的某一張圖片呢？這個其實更簡單，直接可以把圖片的地址寫到src里，如下圖：

比如，這里有一個網上的圖片地址：

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

代碼如下：

代碼

效果如下：

效果

我們接著講述下面的課程，什么是屬性呢？其實就是某個附加信息，比如人，他的附加信息，有名字，有年齡，那么針對于標簽，屬性就是它的附加信息，有一個需要注意的，屬性是寫在標簽內，也就是起始的標簽內，雖然不區分大小寫，但盡量和標簽統一，使用小寫字母；屬性，是一個鍵值對，語法如下：

key="value"。

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

屬性

其實絕大多數屬性都是這樣呈現的，一般以雙引號為主，有時候也會使用單引號；單雙引號，表述是一致的，下面我們舉個例子，新建一個網頁，引入一個圖片，如下圖：

目錄

代碼如下：

代碼

效果如下：

效果

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

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

代碼如下：

代碼

效果如下：

效果

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

那么對于img這個標簽，它會按照你指定的大小，對另一個做等比例的縮放或放大處理，也就是說，本來圖片寬100px，高100px，你改寫了寬屬性，設置width="20px"，那么隨之的，高也會變成20px，這就是等比例的處理。

我們再看一個例子，同時設置寬和高：

代碼如下：

代碼

效果如下：

效果

兩個屬性都設置的話，那么它就會按照你設置的進行展示，有可能會出現圖片的拉伸或壓縮情況，這種情況的出現，是因為你的圖片過大或者過小而導致的，在實際的開發中，我們也要考慮到這種情況，一般UI，會給我們標注圖片的尺寸，或者比例，我們按照UI的標注去寫，就沒有問題。

上邊兩個就是img的屬性，其實也沒啥難的，無非就是控制寬高而已，需要注意一下，多個屬性之間，我們使用空格隔開，我們再去看另一屬性，alt屬性，alt 屬性用來為圖像定義一串預備的可替換的文本，什么意思呢，就是在圖片無法加載，或者加載錯誤的時候，所展示的文本信息，如下圖，我們故意把圖片的地址寫錯：

代碼

因為我們沒有“life1.png”這張圖片，加載肯定是錯誤的，我們看下效果：

效果

以上是圖片加載錯誤后，給用戶展示的圖片描述信息，如果說圖片展示正常，用戶鼠標滑過圖片，就給出圖片的描述，我們該如何設置呢？實現這種效果，我們就必須再去掌握它的另外一個屬性“title”，我們直接看例子：

代碼

效果如下：

效果

截圖截不了這個效果，就用手機拍的，所以啊，老鐵們，寫這種技術文章是很耗時的，還麻煩給個關注哦，在這里謝謝了。

2、a標簽及屬性的使用

我們經常看到很多網頁里，點擊某個圖片，或者點擊某段文字，就跳轉到了另一頁面，比如淘寶，京東，點擊商品后，就跳轉到商品詳情，今日頭條或者網易新聞，點擊某個新聞，就跳轉了新聞詳情，這是如何實現呢？其實絕大部分都可以用a標簽來實現。

a標簽呢，是一個超鏈接，超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，我們可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分，當我們把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們先看下效果，href是a標簽的屬性，用來跳轉的地址，類似img標簽的src屬性，都是指向的一個路徑。

代碼

效果如下：

效果

因為href里是空的，所以，目前的點擊時沒有一點效果的，下面我們練習下跳轉，這里我們分為兩種，一種是網絡地址跳轉，一種是本地文件跳轉。

第一種，網絡地址跳轉

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

代碼

右鍵選擇瀏覽器中打開：

瀏覽器打開

點擊跳轉百度后，直接打開了百度首頁，大家可以試一試，這里就不貼圖了。

第二種，本地文件跳轉

目前“a標簽.html”和“遠程圖片加載.html”同屬一個目錄，在代碼里，我們直接寫文件的名字。

目錄

在“a標簽.html”里代碼如下：

代碼

效果如下：

效果

點擊之后：

點擊之后

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