古詩詞大全網 - 藝術簽名 - html的img標簽是如何使用的

html的img標簽是如何使用的

img標簽的使用:通過img標簽的src屬性顯示獲取到的圖像,img標簽的height和width屬性設置圖像的大小、當圖像無法顯示時,使用alt屬性來顯示替代文本。

html的img標簽可以用於在網頁上顯示圖像,它是僅包含屬性的空標記,沒有結束標記</>。

img標簽的屬性

img標簽內可以包含:src屬性、height和width屬性、alt屬性。其中src屬性和alt屬性是HTML img標簽的重要屬性。

下面我們來具體看看img標簽的這些屬性:

1、src屬性

src屬性是描述圖像源或路徑的必要屬性,它指示瀏覽器在服務器上查找圖像的位置。

那麽獲取圖像?分兩種情況:

1)、獲取同壹文件夾中圖像

當HTML文件和圖像在同壹個文件夾中時,像這樣:

我們可以直接在src屬性中填寫圖像名稱,如:

<div class="demo">

<h1>img標簽</h1>

<img src="1.jpg" />

</div>效果圖:

2)、在另壹個目錄/文件夾中,如:

則可以像這樣訪問圖像:

<div class="demo">

<h1>img標簽</h1>

<img src="img/1.jpg" />

</div>效果圖如上圖壹樣。

如果復雜點,當我們將 1.jpg的圖像放在本地磁盤E ------> img文件夾中時,我們可以這樣顯示圖片:

< img src="E:/img/1.jpg">2、height和width屬性

img標簽的height和width屬性可以用來設置圖像的高度和寬度,例:

<img src="img/1.jpg" width="450px" height="300px"/>效果圖:

img標簽圖像的高度和寬度也可以通過css來設置,例:

img{

width:450px;

height:300px;

}3、alt屬性

當圖像無法在瀏覽器上顯示時,可以使用alt屬性顯示替代文本。

例:想要顯示1.jpg圖片,但文件夾中沒有

<h1>img標簽</h1>

<img src="img/1.jpg" width="450px" height="300px"/>效果圖:

總結: