一、HTML圖像<img>
1.<img>標簽和它的src屬性
在 HTML 中,圖像由 <img> 標簽定義。<img> 是一個空標簽,意思是說,它只包含屬性,并且沒有閉合標簽(而是直接以“/>”結尾)。要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 "source"。源屬性的值是圖像的 URL 地址。定義圖像的語法是:<img src="url" />,URL 指存儲圖像的位置。瀏覽器將圖像顯示在文檔中圖像標簽出現的地方
<!--只指定了src屬性的img--><img src="images/bjpowernode.jpg" /> |
2.<img>標簽的其它屬性
alt 屬性:用來為圖像定義一串預備的可替換的文本,當圖片無法顯示時,就會顯示alt屬性所定義的文本,在圖片正常顯示時,鼠標放上去也會有懸浮提示,比如“點擊查看大圖”。為頁面上的圖像都加上替換文本屬性(alt)是個好習慣,這樣有助于更好的顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。而且,現在XHTML1.0標準已經強制使用alt屬性。在<img>標簽沒有alt屬性時,在VS中會有如下提示。
title屬性:用來顯示當鼠標放到圖片上時顯示的文字,是對圖片的解釋說明性文字。比如現在很多網站瀏覽圖片時的“點擊跳轉到下一頁”。
alt屬性和title屬性的區別:<img>標簽的alt屬性是在圖片因瀏覽器兼容、加載失敗或地址出錯等原因而不顯示時為瀏覽用戶所做的代替語言,其性質為該圖片的代替;而img標簽的title屬性,是表達該圖片的一些額外信息,其性質為一種備注或者注釋,鼠標過去時顯示該段文字。
border屬性:指定邊框,border="0"不顯示邊框。
width(寬度)和height(高度)屬性:指定圖片的顯示大小,如果不指定則是圖片的原始大小。最好指定width、height,哪怕是原始尺寸大小,因為如果不指定大小,圖片會不占頁面位置,圖片下載后才調整大小,會造成頁面布局很亂。如果指定了width、height哪怕圖片沒有加載完成,也會先把位置占上。
<img src="images/1499417200939140562.jpg" /> <!--指定alt屬性的圖片--><img src="images/1499417200939140562.jpg" alt="一幅漂亮的圖片" /><!--指定title屬性的圖片--><img src="images/1499417200939140562.jpg" alt="一幅漂亮的圖片" title="哈哈" /> <!--設置寬度和高度的圖片--><img src="images/xxxx.gif" title="img" alt="img" width="454" height="340" /> |
3.<img>作為超鏈接
新聞熱點
疑難解答
圖片精選