HTML背景圖片和背景色_動力節點Java學院整理

來源：懂視網責編：小采時間：2020-11-27 14:46:39

HTML背景圖片和背景色_動力節點Java學院整理

HTML背景圖片和背景色_動力節點Java學院整理:一、HTML圖像<img> 1.<img>標簽和它的src屬性在 HTML 中，圖像由 <img> 標簽定義。<img> 是一個空標簽，意思是說，它只包含屬性，并且沒有閉合標簽（而是直接以“/>”結尾）。要在頁面上顯示圖像

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML背景圖片和背景色_動力節點Java學院整理:一、HTML圖像<img> 1.<img>標簽和它的src屬性在 HTML 中，圖像由 <img> 標簽定義。<img> 是一個空標簽，意思是說，它只包含屬性，并且沒有閉合標簽（而是直接以“/>”結尾）。要在頁面上顯示圖像

一、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>作為超鏈接

<img>作為超鏈接（即圖像超鏈接），就是將<img>標簽作為<a></a>標簽的鏈接對象。注意：在<img>作為超鏈接對象時，IE瀏覽器會自動為<img>加上一條藍色的邊框（border="1")，這在很多時候都不是我們想要的，可以通過設置border="0"來取消邊框。

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

二、HTML背景

1.背景顏色（Bgcolor）

背景顏色屬性將背景設置為某種顏色。屬性值可以是十六進制數、RGB 值或顏色名。

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

2.背景（Background）

背景屬性將背景設置為圖像。屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復制。注意：為了加快網頁的顯示速度，提高網站的友好性，背景圖像大小不應該超過10k.

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

附注：在新的標準當中，HTML元素的背景顏色（bgcolor）和背景圖像（background）屬性已經被廢棄，而是用css設置元素的背景顏色和背景圖片。

三、顏色（Color）

1.顏色

顏色（Color）由紅色（Red）、綠色（Green）、藍色（Blue）混合而成。顏色值：顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。如黑色的顏色名為black,十六進制表示為#000000,rgb值為rgb（0,0,0）。

2.顏色名

僅僅有 16 種顏色名被 W3C 的 HTML4.0 標準所支持。它們是：aqua（淺綠色）, black（黑色）, blue（藍色）, fuchsia（紫紅色）, gray（灰色）, green（綠色）, lime（綠黃色）, maroon（褐紅色）, navy（深藍色）, olive（橄欖色）, purple（紫色）, red（紅色）, silver（銀色）, teal（青色）, white（白色）, yellow（黃色）。如果需要使用其它的顏色，需要使用十六進制的顏色值。

3.Web安全色

數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。 4.216 跨平臺色

最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com