HTML中IMG標簽總結(jié)

vspiders 發(fā)布于2019-04-23 13:29 / 2018人閱讀

摘要：一標簽有兩個重要的屬性屬性圖片的地址屬性圖片不顯示是現(xiàn)實的文字二標簽是行級元素屬于行內(nèi)替換元素。三標簽進行居中第一種方式這種方式我不是很喜歡，標簽有事不能設(shè)置為。四標簽事件使用對象的事件可以對顯示異常的圖片進行處理。

一、Img標簽有兩個重要的屬性：

　　1.src? 屬性：圖片的地址

　　2.alt? 屬性：圖片不顯示是現(xiàn)實的文字

二、Img標簽是行級元素：

　　img、input屬于行內(nèi)替換元素。height/width/padding/margin均可用。效果等于塊元素。行內(nèi)非替換元素，例如, height/width/padding top、bottom/margin top/bottom均無效果.只

　　能用padding left/right和margin left/right改變寬度。

三、Img標簽進行居中：

　　1.第一種方式:這種方式我不是很喜歡，Img標簽有事不能設(shè)置為table-cell。容易產(chǎn)生錯誤。

img_div{
        display: table-cell;vertical-align: middle;  /*控制圖片垂直居中*/
        text-align: center;  /*控制圖片水平居中*/      
}

　　2.第二種方式:這種方式Img標簽最好不要帶有margin屬性，否則不會居中。

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}

四、Img標簽事件：

　　1.使用HTML DOM Event 對象的 onerror事件可以對顯示異常的圖片進行處理。

<img src="img/1.jpg" alt="這是一張圖片" onerror="alert(this.alt)">

GPU云服務(wù)器云服務(wù)器獲得html中img標簽 img標簽 img標簽調(diào)用 html標簽中分行

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1947.html

相關(guān)文章

前端基礎(chǔ)入門一（HTML）

摘要：所謂超文本，因為它可以加入圖片聲音動畫多媒體等內(nèi)容，不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件，與世界各地主機的文件連接。意思是超文本引用用于指定鏈接頁面的打開方式，其取值有和兩種，其中為默認值，為在新窗口中打開方式。學(xué)習目標了解常用瀏覽器掌握WEB標準理解標簽語義化掌握常用的排版標簽掌握常用的文本格式化圖像鏈接等標簽掌握三種列表標簽掌握表格標簽掌握表格標簽掌...

張憲坤 2019-08-02 14:08 評論0 收藏0
img標簽設(shè)置display:block，寬度無法100%

摘要：替換元素瀏覽器根據(jù)元素的標簽和屬性，來決定元素的具體顯示內(nèi)容。替換元素是其內(nèi)容不受視覺格式化模型控制的元素，例如標簽，嵌入的文檔之類或者，這些叫做替換元素。 img標簽設(shè)置display:block，寬度無法100% 一些個人總結(jié)，第一次發(fā)文章，有什么不足的地方，還請各位多提意見現(xiàn)象如下代碼，img標簽設(shè)置了display：block，尺寸寬度無法設(shè)定為100% ...

MorePainMoreGain 2019-08-29 16:24 評論0 收藏0
讀后總結(jié)--精通css高級web標準解決方案（第二版）

摘要：無論是否移動，元素仍然占據(jù)原來的空間。絕對定位絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。為啥讀這本書現(xiàn)在前端圈子過于浮躁，掌握基礎(chǔ)無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘當然，根本原因還是覺得自己掌握不好開始總結(jié)吧~ 一. 基礎(chǔ)知識經(jīng)過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...

leone 2019-08-30 13:05 評論0 收藏0
使用vue開發(fā)pc前端及后臺的項目總結(jié)(陸續(xù)更新)

摘要：所以只有寫完整，才是正確的。具體可查看這里愿你成為終身學(xué)習者 showImg(https://segmentfault.com/img/bVbfNh2?w=1920&h=600); 1.讓img標簽適應(yīng)比例縮放項目中做圖片預(yù)覽，如下圖，效果要隨著屏幕的大小來做自適應(yīng)比例縮放，一開始用background-size:cover來做是可行的，但這里有包括上傳圖片的操作，而上傳圖片的文件流...

Baoyuan 2019-08-23 11:26 評論0 收藏0
異步、DOM、事件、頁面加載和優(yōu)化面試題及知識點簡單總結(jié)

摘要：異步編程，不同于同步編程的請求響應(yīng)模式，其是一種事件驅(qū)動編程，請求調(diào)用函數(shù)或方法后，無需立即等待響應(yīng)，可以繼續(xù)執(zhí)行其他任務(wù)，而之前任務(wù)響應(yīng)返回后可以通過狀態(tài)通知和回調(diào)來通知調(diào)用者。異步與單線程知識點：什么是異步(對比同步) 同步：一行一行按順序依次執(zhí)行代碼，當前代碼任務(wù)耗時執(zhí)行會阻塞后續(xù)代碼的執(zhí)行。這是一種典型的請求-響應(yīng)模型，當請求調(diào)用一個函數(shù)或方法后，需等待其響應(yīng)返回，然后執(zhí)...

jasperyang 2019-08-21 16:57 評論0 收藏0