主頁 > 知識庫 > HTML背景圖片和背景色_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

HTML背景圖片和背景色_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

熱門標(biāo)簽:百度競價(jià)點(diǎn)擊價(jià)格的計(jì)算公式 美圖手機(jī) 使用U盤裝系統(tǒng) 硅谷的囚徒呼叫中心 檢查注冊表項(xiàng) 網(wǎng)站建設(shè) 阿里云 智能手機(jī)

一、HTML圖像<img>

1.<img>標(biāo)簽和它的src屬性

在 HTML 中,圖像由 <img> 標(biāo)簽定義。<img> 是一個(gè)空標(biāo)簽,意思是說,它只包含屬性,并且沒有閉合標(biāo)簽(而是直接以“/>”結(jié)尾)。要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 "source"。源屬性的值是圖像的 URL 地址。定義圖像的語法是:<img src="url" />,URL 指存儲圖像的位置。瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方

<!--只指定了src屬性的img-->
<img src="images/bjpowernode.jpg" />

2.<img>標(biāo)簽的其它屬性

alt 屬性:用來為圖像定義一串預(yù)備的可替換的文本,當(dāng)圖片無法顯示時(shí),就會顯示alt屬性所定義的文本,在圖片正常顯示時(shí),鼠標(biāo)放上去也會有懸浮提示,比如“點(diǎn)擊查看大圖”。為頁面上的圖像都加上替換文本屬性(alt)是個(gè)好習(xí)慣,這樣有助于更好的顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。而且,現(xiàn)在XHTML1.0標(biāo)準(zhǔn)已經(jīng)強(qiáng)制使用alt屬性。在<img>標(biāo)簽沒有alt屬性時(shí),在VS中會有如下提示。

title屬性:用來顯示當(dāng)鼠標(biāo)放到圖片上時(shí)顯示的文字,是對圖片的解釋說明性文字。比如現(xiàn)在很多網(wǎng)站瀏覽圖片時(shí)的“點(diǎn)擊跳轉(zhuǎn)到下一頁”。 

alt屬性和title屬性的區(qū)別:<img>標(biāo)簽的alt屬性是在圖片因?yàn)g覽器兼容、加載失敗或地址出錯(cuò)等原因而不顯示時(shí)為瀏覽用戶所做的代替語言,其性質(zhì)為該圖片的代替;而img標(biāo)簽的title屬性,是表達(dá)該圖片的一些額外信息,其性質(zhì)為一種備注或者注釋,鼠標(biāo)過去時(shí)顯示該段文字。 

border屬性:指定邊框,border="0"不顯示邊框。 

width(寬度)和height(高度)屬性:指定圖片的顯示大小,如果不指定則是圖片的原始大小。最好指定width、height,哪怕是原始尺寸大小,因?yàn)槿绻恢付ù笮?,圖片會不占頁面位置,圖片下載后才調(diào)整大小,會造成頁面布局很亂。如果指定了width、height哪怕圖片沒有加載完成,也會先把位置占上。

<img src="images/1499417200939140562.jpg" />
 <!--指定alt屬性的圖片-->
<img src="images/1499417200939140562.jpg" alt="一幅漂亮的圖片" />
<!--指定title屬性的圖片-->
<img src="images/1499417200939140562.jpg" alt="一幅漂亮的圖片" title="哈哈" />
 <!--設(shè)置寬度和高度的圖片-->
<img src="images/xxxx.gif" title="img" alt="img" width="454" height="340" />

3.<img>作為超鏈接

<img>作為超鏈接(即圖像超鏈接),就是將<img>標(biāo)簽作為<a></a>標(biāo)簽的鏈接對象。注意:在<img>作為超鏈接對象時(shí),IE瀏覽器會自動(dòng)為<img>加上一條藍(lán)色的邊框(border="1"),這在很多時(shí)候都不是我們想要的,可以通過設(shè)置border="0"來取消邊框。 

<!--圖片超鏈接,將img標(biāo)簽作為超鏈接的對象即可-->
<a href="../HTML超鏈接.html" title="HTML超鏈接語法">
<img src="http://www.bjpowernode.com/image/m.jpg" border="0" alt="圖片鏈接" />
</a>

二、HTML背景

1.背景顏色(Bgcolor)

背景顏色屬性將背景設(shè)置為某種顏色。屬性值可以是十六進(jìn)制數(shù)、RGB 值或顏色名。 

<body bgcolor="#000000">  <!--十六進(jìn)制顏色值-->
<body bgcolor="rgb(0,0,0)">  <!--rgb顏色值-->
<body bgcolor="black">  <!--顏色名稱-->

2.背景(Background)

背景屬性將背景設(shè)置為圖像。屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口,那么圖像將在整個(gè)瀏覽器窗口進(jìn)行復(fù)制。注意:為了加快網(wǎng)頁的顯示速度,提高網(wǎng)站的友好性,背景圖像大小不應(yīng)該超過10k. 

<body background="clouds.gif"> <!--相對URL-->
<body background="http://www.bjpowernode.com /clouds.gif">  <!--絕對URL-->

附注:在新的標(biāo)準(zhǔn)當(dāng)中,HTML元素的背景顏色(bgcolor)和背景圖像(background)屬性已經(jīng)被廢棄,而是用css設(shè)置元素的背景顏色和背景圖片。 

三、顏色(Color)

1.顏色 

顏色(Color)由紅色(Red)、綠色(Green)、藍(lán)色(Blue)混合而成。顏色值:顏色由一個(gè)十六進(jìn)制符號來定義,這個(gè)符號由紅色、綠色和藍(lán)色的值組成(RGB)。每種顏色的最小值是0(十六進(jìn)制:#00)。最大值是255(十六進(jìn)制:#FF)。如黑色的顏色名為black,十六進(jìn)制表示為#000000,rgb值為rgb(0,0,0)。

2.顏色名 

僅僅有 16 種顏色名被 W3C 的 HTML4.0 標(biāo)準(zhǔn)所支持。它們是:aqua(淺綠色), black(黑色), blue(藍(lán)色), fuchsia(紫紅色), gray(灰色), green(綠色), lime(綠黃色), maroon(褐紅色), navy(深藍(lán)色), olive(橄欖色), purple(紫色), red(紅色), silver(銀色), teal(青色), white(白色), yellow(黃色)。如果需要使用其它的顏色,需要使用十六進(jìn)制的顏色值。 

3.Web安全色 

數(shù)年以前,當(dāng)大多數(shù)計(jì)算機(jī)僅支持 256 種顏色的時(shí)候,一系列 216 種 Web 安全色作為 Web 標(biāo)準(zhǔn)被建議使用。其中的原因是,微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色(雙方大約各使用 20 種)。 4.216 跨平臺色 

最初,216 跨平臺 web 安全色被用來確保:當(dāng)計(jì)算機(jī)使用 256 色調(diào)色板時(shí),所有的計(jì)算機(jī)能夠正確地顯示所有的顏色。

標(biāo)簽:湖北 懷化 湘潭 煙臺 賀州 黃山 通遼 山南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML背景圖片和背景色_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266