你看我像不像學前端的人（三）——HTML常用標籤（影像標籤）

third_發表於2020-12-08
前端HTML

1. 影像標籤

      1.1 影像標籤的定義

      在HTML標籤中，<img> 標籤用於定義HTML頁面中的影像。

<img src="影像URL" />

      單詞image的縮寫，意為影像。

      src是<img>標籤的必須屬性，它用於指定影像檔案的路徑和檔名。

      所謂屬性：簡單理解就是屬於這個影像標籤的特性。

      1.2 影像標籤的其他屬性

屬性屬性值說明
src圖片路徑必須屬性
alt文字替換文字。影像不能顯示的文字。
title文字提示文字。滑鼠放到影像上，顯示的文字。
width畫素設定影像的寬度。
height畫素設定影像的高度。
border畫素設定影像的邊框粗細。

      1.3 影像標籤的使用

    （1）src屬性基本使用：

      圖片和html檔案放在同一目錄下：

      

      程式碼如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>影像標籤的使用</title>
</head>

<body>
    <h4>影像標籤的使用：</h4>
    <img src="helloworld.img" />
</body>

</html>

      執行效果如下：

      

    （2）alt屬性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>影像標籤的使用</title>
</head>

<body>
    <h4>影像標籤的使用：</h4>
    <img src="helloworld1.img" alt="這是一個壞掉的hello world影像" />
</body>

</html>

       執行效果如下：

       

    （3）title屬性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>影像標籤的使用</title>
</head>

<body>
    <h4>影像標籤的使用：</h4>
    <img src="helloworld.img" title="這是hello world圖片滑鼠移動上去後會顯示的文字" />
</body>

</html>

      執行效果如下：

      

    （4）width屬性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>影像標籤的使用</title>
</head>

<body>
    <h4>影像標籤的使用：</h4>
    <img src="helloworld.img" title="這是hello world圖片滑鼠移動上去後會顯示的文字" width="300" />
</body>

</html>

      執行效果如下：

      

    （5）height屬性使用：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>影像標籤的使用</title>
</head>

<body>
    <h4>影像標籤的使用：</h4>
    <img src="helloworld.img" title="這是hello world圖片滑鼠移動上去後會顯示的文字" height="10" />
</body>

</html>

      執行效果如下：

      

      寬度和高度一般情況修改一個就行了，另外一個讓他自己等比例進行縮放。

    （6）boder屬性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>影像標籤的使用</title>
</head>

<body>
    <h4>影像標籤的使用：</h4>
    <img src="helloworld.img" title="這是hello world圖片滑鼠移動上去後會顯示的文字" width="300" border="15" />
</body>

</html>

      執行效果如下：

      

      一般不在屬性設定，會通過CSS來進行設定。

1.4 影像標籤注意點

    （1）影像標籤可以擁有多個屬性，必須寫在標籤名的後面。

    （2）屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。

    （3）屬性採取鍵值對的格式，即key = "value", 屬性 = "屬性值"。

 

相關文章