影象標籤&&標籤屬性
阿新 • • 發佈：2020-11-20
影象是網頁構成中最重要的元素之一，美觀的影象會為網站增添生命力，同時也可以加深使用者對網站風格的印象。
標籤屬性
使用HTML製作網頁時，如果想讓HTML標籤提供更多的資訊，可以使用HTML標籤的屬性加以設定。其基本語法格式如下：
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>
在上面的語法中，
1.標籤可以擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。
2.屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。
3.任何標籤的屬性都有預設值，省略該屬性則取預設值。
採取鍵值對——key="value" 的格式
比如: <hr width="400" /> 表示：設定 屬性：寬度 、值：400
影象標籤img
HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示影象就需要使用影象標籤<img>。
其基本語法格式如下：
<img src="影象URL" />
img標籤的幾個常用屬性、屬性值及屬性描述：
| 屬性 | 屬性值 | 描述 |
| src | URL | 影象的路徑 |
| alt | 文字 | 影象不能顯示時的替換文字 |
| title | 文字 | 滑鼠懸停時顯示的內容 |
| width | 畫素 | 設定影象的寬度 |
| height | 畫素 | 設定影象的高度 |
| border | 數字 | 設定影象邊框的寬度 |
1 <!--舉個栗子--> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="utf-8" /> 6 <title>Doument</title> 7 </head> 8 <body> 基本影象插入方式<br /> 9 <img src="img/logo.png"/><br /> 10 alt屬性<br /> 11 <img src="img/logo1.png" alt="這是我的小logo！"/><br /> 12 title屬性<br /> 13 <img src="img/logo.png" title="我是一個logo~~"/><br /> 14 width/height屬性<br /> 15 <img src="img/logo.png" width="300"/><br /> 16 border屬性 <br /> 17 <img src="img/logo.png" border="10"/><br /> 18 </body> 19 </html>
注意：
- src屬性用於指定影象檔案的路徑和檔名，他是img標籤的必備屬性。
- URL指儲存影象的位置，可以是本地計算機上的圖片地址，也可以是網際網路上圖片的地址。
- 一般情況下由於圖片會自動等比縮放，強行設定寬高會使頁面失真，因此通常，寬和高設定一個就夠了。