首頁  >  文章  >  web前端  >  HTML 初學者指南(八)

HTML 初學者指南(八)

黄舟
黄舟原創
2016-12-23 14:46:521089瀏覽


嵌入行中的圖象
多數Web 瀏覽器可以顯示嵌入行中的X 位圖(XBM), GIF, 或JPEG 格式的圖象(即和文本想鄰的圖象) .其他格式的圖象正在合併到Web 瀏覽器中[如, Portable Network Graphic (PNG) 格式]. 每個圖像都花費處理時間並降低文件顯示的速度. 仔細選擇你的文件中的圖象和圖象的個數. 

包含一個嵌入行中的圖像, 輸入: 

HTML 初學者指南(八)
ALT="HTML 初學者指南(八)" HEIGHT=32 WIDTH=32> 

其中圖象名是圖象文件的URL . 

HTML 初學者指南(八) URLs 的語法格式和錨鏈HREF使用的格式相同. 如果圖象文件是GIF 文件, 則圖象名中的文件名部分必須以.gif結束. X 位圖格式的檔案必須以.xbm結尾; JPEG 圖象檔案必須以.jpg或.jpeg結束; Portable Network Graphic 檔案必須以.png結束. 

圖像大小屬性
HTML 初學者指南(八) 標記中你應該包含其它兩個屬性,用於通知瀏覽器正在和文本一起下載的圖象的大小. HEIGHT 和WIDTH 屬性使瀏覽器在下載文件其它部分的時候為圖象留出適當的空間(像素). (從你的圖象處理軟體如Adobe Photoshop中可以得到像素大小.) 

例如, 要在文件中包含一幅自己的肖像, 輸入: 

HTML 初學者指南(八)
ALT="HTML 初學者指南(八)" HEIGHT=32 WIDTH=32> 

注意: 當圖像大小與屬性描述大小不一致時,有些瀏覽器使用HEIGHT 和WIDTH屬性來擴大或縮小一幅圖像以使它適用於分配的空間. 並非所有的瀏覽器開發者都贊同放大/縮小圖象. 因此,在安排時不要假設你的讀者都可以使用這種特性. 最好查看一下圖像大小,使用正確的尺寸. 

圖象定位
對於圖象的顯示你具有一定的靈活性. 你可以讓圖象和文本分開,把圖象放在左邊,右邊,或者中間. 或者你可以讓圖象和文本在同一行。你可以嘗試多種形式,看看哪種最好 

使圖象和文本在同一行
缺省情況下圖象的底部和隨後的文本在同一行顯示,就像現在的這段. 你也可以把ALIGN= 屬性的值設為TOP 或CENTER,把圖象放到一段的頂端或中間。

這段文本與圖象的頂端在同一行(HTML 初學者指南(八)). 注意只有一行文本如此,其他行跳到圖象的底部顯示. 

這一行文本顯示在圖像中間(HTML 初學者指南(八)). 同樣,只有一行顯示在中間,其他行在圖象的下面. 

不帶文字的圖象 
如果要顯示一幅不帶文字的圖象(例如,你的組織的徽標), 只要把它作為單獨的一段即可. 使用段落標記的ALIGN=屬性把圖象調整到窗口的中間或右邊,如下所示: 


HTML 初學者指南(八)

 

結果為: 

圖象顯示在中間; 本段從它下面靠左開始. 

圖象顯示在中間; 本段從它下面靠左開始。替換文字
一些World Wide Web 瀏覽器--主要是那些在VT100 終端機上運行的瀏覽器--不能顯示圖象. 有些用戶會關掉圖像下載功能,就算他們的軟體可以顯示圖象(特別是如果他們是modem 或低速線路的用戶). HTML 提供一種機制使得讀者知道他們看到的頁面上缺少了什麼. 

ALT 屬性使你可以指定一段可以替代圖象來顯示的文本. 例如: 

HTML 初學者指南(八)
ALT="" HEIGHT=48 WIDTH=50> 

其中HTML 初學者指南(八)Arrow.gif 是一個向上的箭頭.在具有圖像顯示功能並且圖像下載開啟的瀏覽器中,你可以看到一個上箭頭的圖形。在VT100 瀏覽器中或圖像下載關閉的情況下, 你的視窗中將顯示HTML 初學者指南(八) 這個單字. 

你應該對出現在你的文件中的每個圖像都使用一個替換文字, 這是一種對讀者的禮貌. 

背景圖象
新版本的Web 瀏覽器可以下載一幅圖像用做顯示一個主頁時的背景. 有些人喜歡使用背景,有些人不喜歡. 通常,如果你想包含一個背景, 你要確保你的文字在背景上依然可以被很清晰地閱讀. 

背景圖象可以是一個物體的組織(例如亞麻布紙張)或圖象(可能是一個徽標). 你可以像生成其他圖像一樣來產生背景圖象。 

不過你只需要製作一個很小的圖象. 瀏覽器會使用一種稱之為「蓋瓦」tiling的特性重複顯示這個圖象,填滿整個瀏覽器視窗。簡單地說,你只要產生一幅圖象,瀏覽器就會自動重複多次,直到填滿你的視窗。當你使用下面說明的標記時,這個動作會自動執行. 

包含背景圖象的標記包含在 標記描述中作為一個屬性: 

 

背景顏色
缺省情況下瀏覽器使用灰底黑字顯示文本. 但是, 你可以改變它們. 一些HTML 作者選擇一個背景顏色,配以文本顏色的相應改變. 

對於這種改變一定要預先看一看,是否還易於閱讀. (例如, 不少人用黑底紅字,非常難以閱讀!) 

使用標記的多種屬性,你可以改變文本,鏈接,看過的鏈接和活動鏈接的顏色. 例如, 輸入: 

 

將創建一個窗口,背景為黑色(BGCOLOR), 文本為白色(TEXTXT),超鏈為銀色(LINK). 

六位的數字和字母的組合代表顏色,它給出某種顏色的RGB (紅red, 綠green, 藍blue)的值. 這個六位數字實際上是三個順序排列的兩位數, 代表從00到FF的紅,綠,藍比重的十六進制值。例如, 000000 表示黑色(沒有任何顏色), FF0000 是亮紅, FFFFFF 是白色(所有三種顏色全部飽和). 這些數字和字母的組合的含義是模糊的. 幸運的是有一個在線資源可以幫助你了解各種組合與顏色的對應關係: 

ColorPro Web server 
外部圖象,聲音,和動畫
你可能希望當用戶激活你的文檔中一個單詞或小的圖像作成的鏈接時,把一幅圖像作為單獨的文件開啟. 這種情況稱為一個外部圖象, 當你不想由於大的圖象而降低主文檔的下載速度時,它是很有用的. 

要包含一個外部圖象的連結, 輸入: 

link anchor 

你也可以用一個小的圖像作為到大圖象的連結. 輸入: 

HTML 初學者指南(八)
ALT="" HEIGHT=48 WIDTH=50> 

讀者看到圖象SmallImage.gif ,點擊它就可以打開文件LargerImage. gif . 

使用相同的語法連結外部動畫和聲音.唯一的不同在於連結檔案的副檔名. 例如, 

link anchor 


以上就是HTML 初學者指南(八)的內容,更多相關內容請關注PHP中文網(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn