1. 程式人生 > >html的img標籤 強大的title

html的img標籤 強大的title

 示例:

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

瀏覽器支援

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器都支援 <img> 標籤。

<img> 標籤定義 HTML 頁面中的影象。

<img> 標籤有兩個必需的屬性:src 和 alt。

註釋:從技術上講,影象並不會插入 HTML 頁面中,而是連結到 HTML 頁面上。<img> 標籤的作用是為被引用的影象建立佔位符。

提示:通過在 <a> 標籤中巢狀 <img> 標籤,給影象新增到另一個文件的連結

alt 與 title 屬性區別:

圖片中的 alt 屬性是在圖片不能正常顯示時出現的文字提示。

圖片中的 title 屬性是在滑鼠在移動到元素上的文字提示。

alt 屬性和 title 屬性的區別:

1、alt 屬性的特點

A、alt屬性(注意是“屬性”而不是“標籤”)包括替換說明,對於影象和影象熱點是必須的。它只能用在img、area和input元素中(包括applet元素)。對於input元素,alt屬性意在用來替換提交按鈕的圖片。比如:

<input type="image" src="image.gif" alt="Submit" />

B、alt屬性保證那些文字確實為那些看不到影象的人提供了說明資訊,並且在上下文中有意義。對於那些裝飾性的圖片可以使用空的值(alt="",引號中間沒有空格),而不是使用不相關的替換文字比如 “blue bullet”。

C、Alt屬性值得長度必須少於100個英文字元或者使用者必須保證替換文字儘可能的短。

2、title 屬性的特點

A、title屬性為設定該屬性的元素提供建議性的資訊,即提供非本質的額外資訊,大部分的視覺化瀏覽器在滑鼠懸浮在特定元素上時顯示title文字為提示資訊(tool tip),然而這又由製造商來決定如何渲染title文字。一些瀏覽器會將title文字顯示在狀態列裡。比如早期版本的Safari瀏覽器。

B、title屬性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有標籤。但是並不是必須的。

C、title屬性有一個很好的用途,即為連結新增描述性文字,特別是當連線本身並不是十分清楚的表達了連結的目的。這樣就使得訪問者知道那些連結將會帶他們到什麼地方,他們就不會載入一個可能完全不感興趣的頁面。另外一個潛在的應用就是為影象提供額外的說明資訊,比如日期或者其他非本質的資訊。

D、title屬性值可以比alt屬性值設定的更長。不過要注意的是,有些瀏覽器會截斷過長的文字(比如工具提示或其他)。比如Mozilla核心的瀏覽器只能顯示最先的60個字元。

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>測試alt屬性和title屬性</title> </head> <body> <p>一個影象: <img src="smiley.gif" alt="Smiley face" width="32" height="32"><br/> 一個影象: <img src="smiley.gif" title="Smiley face" width="32" height="32"></p> </body> </html>

以下是測試結果:

圖一是 alt 的顯示結果:

圖二是 title 的顯示結果: