HTML 圖像- 圖像標簽（ <img>）和源屬性（Src）

在 HTML 中，圖像由<img> 標簽定義。

<img> 是空標簽，意思是說，它只包含屬性，並且沒有閉合標簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

定義圖像的語法是：

<img src="http://www.runoob.com/images/pulpit.jpg" some_text>

HTML 圖像- Alt屬性

alt 屬性用來為圖像定義一串預備的可替換的文本。

替換文本屬性的值是用戶定義的。

<img src="boat.gif" alt="Big Boat">

HTML 圖像- 設置圖像的高度與寬度

height（高度） 與 width（寬度）屬性用於設置圖像的高度與寬度。

屬性值默認單位為像素:

<img src="2.jpg" alt="Pulpit rock" width="304" height="228">

實例：

排列圖片

 <h4>默認對齊的圖像(align="bottom"):</h4>
    <p>這是一些文本<img src="2.jpg" alt="Smiley face" width="32" height="32">這是一些文本</p>

    <h4>圖片使用 align="midle":</h4>
    <p>這是一些文本。<img src="2.jpg" alt="Smiley face" align="middle" width="32" height="32">這是一些文本。</p>

    <h4>圖片使用 align="top":</h4>
    <p>這是一些文本。<img src="2.jpg" alt="Smiley face" align="top" width="32" height="32">這是一些文本。</p>

浮動圖標

<p>
        <img src="2.jpg" alt="Similey face" style="float: left;" width="32" height="32">一個帶圖片的段落，圖片浮動在這個文本的左邊。
    </p>
    <p>
        <img src="2.jpg" alt="Smiley face" style="float: right" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文本的右邊。
        
    </p>

創建圖片鏈接

 <p>創建圖片鏈接:
    <a href="www.baidu.com/">
        <img border="10" src="2.jpg" alt="教程" width="32" height="32">
    </a> </p>

    <p>無邊框的圖片鏈接:
    <a href="www.baidu.com/">
        <img border="0" src="2.jpg" alt="教程" width="32" height="32">
    </a>
    </p>

HTML 圖像標簽

前端開發：HTML-圖像