從零開始前端學習[2]:img标簽的使用

• img标簽的相關屬性
• img标簽的使用

提示

作者:章飛_906285288

部落格位址:http://blog.csdn.net/qq_29924041

img标簽的相關屬性

img标簽介紹

img标簽是前端頁面中用來加載圖像，圖檔的，當時有時候我們也不一定會使用img來進行圖檔的加載操作，而會使用background來作為背景添加上，但是img圖檔的使用，沒有了圖檔的頁面能叫前端麼？？

特點:

img标簽是一個單标簽，即<img/>而不是<img></img>這樣一個對應結尾的部分

//簡單的使用方式:
    <img src="../a.png" width="300px" height="200px" alt="圖檔加載失敗的時候的文字" title="滑鼠放在圖檔上顯示的文字"/>
           

img标簽的屬性

img的标簽屬性有以下一種

• src屬性: <img src=”圖檔加載的路徑，可以是本地圖檔，也可以是網絡圖檔，圖檔類型可以是png，gif，jpg”/>
• width寬度屬性: <img width=”300px”/>
• height高度屬性:<img height=”300px”/>
• alt圖檔加載失敗顯示的文字:<img alt=”圖檔加載失敗的時候顯示的文字”/>
• title滑鼠放在圖檔上顯示的文字:<img height=”滑鼠放在圖檔上面顯示出的文字”/>

img标簽的使用

//絕對路徑加載方式
        <img src="C:\Users\1.gif" alt="">  
        //從網絡上加載圖檔的方式顯示
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501781310551&di=033390815b785653300c6b68a67820b2&imgtype=0&src=http%3A%2F%2Fwww.liyuanhuadian.com%2Fimages%2F201502%2Fgoods_img%2F510_P_1424106841363.jpg" alt="" width="300px" height="200px">
        //可以加載png圖檔
        <img src="img/1.png" alt="">
        //加載jpg圖檔
        <img src="1.jpg" alt="">
        //相對路徑去加載jpg圖檔
        <img src="../1.jpg" alt="">
           

單純的使用img标簽并不能展示出什麼效果，前端所有的效果顯示都是需要結合Css和js來進行顯示的，标簽的使用比較簡單，但是效果的實作不是那麼簡單了