整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
們看看網頁開發(fā)和設計的基本知識之一，用alt屬性來設計你的HTML，為什么這么重要。
如果頁面上的圖像不是真的出于任何目的，那么您可能很難為其提供有意義的替代文本，因此將alt屬性留在image標簽之外是相當常見的：
<img src="background.jpg" />
除了這在技術上是無效的HTML，這對誰從ALT文本中受益的人沒有用。
一些用戶將依靠屏幕閱讀器來向他們描述頁面內容。當您為圖片添加替代文字時，會通知他們圖片的內容。
<img src="search.jpg" alt="Search Button" />
一些圖像被歸類為裝飾性的，意味著它們不表達任何意義或目的。如果它們只是裝飾性的，你實際上希望屏幕閱讀器完全忽略它們，因為這對用戶來說只是不必要的騷擾。
要使屏幕閱讀器忽略圖像，請?zhí)峁┮粋€空白的alt屬性。這告訴屏幕閱讀器跳過它：
<img src="stars.jpg" alt="" />
您可能認為完全不提供alt屬性會導致屏幕閱讀器跳過圖像，但事實并非如此。由于您沒有向瀏覽器提供關于圖片是否具有裝飾性的說明，因此通常會通知圖片存在，并可能會告訴用戶文件名，這只是令人困惑。
最后建議您的圖片代碼中加入alt屬性！
們繼續(xù)學習圖片標簽在實際開發(fā)中的使用。
看案例：
事例中有的圖片正常顯示，有的圖片沒有正常顯示，出現(xiàn)了一個破損的小圖片，并且在破損的小圖片右側有一些文本。
文本作用就是對圖片解釋說明，這個圖片由于某種原因不能正常顯示但仍然能用文本來提示用戶這個圖片所展示的內容，尤其對屏幕閱讀器友好，或者視力障礙者可以通過屏幕閱讀器知道這里有個圖片，圖片想要展示什么內容。
實現(xiàn)這個效果很簡單，只需要在 img 標簽上添加一個 alt 屬性
編輯器中，新建一個 image7.html，創(chuàng)建一個 img 圖片標簽，引入一個圖片，添加 alt 屬性，值為這是千鋒教育的logo
瀏覽器中打開，并沒有發(fā)現(xiàn) alt 屬性中的文本，alt 屬性定義的圖片描述，只有當圖片加載失敗時才會顯示。
接下來我們就把圖片的路徑，修改成一個破損圖片的路徑，回到瀏覽器中，我們看到了一個破損的小圖標，也有了相應的文本提示且占頁面空間的。
為了進一步對圖片進行解釋說明 我們把鼠標放在正常顯示的圖片上面的時，鼠標的右下角會顯示一個提示文本，這個效果只需要在 img 標簽上添加一個 title 屬性，title 是標簽名，也是屬性名，標簽名和屬性名并不沖突。
回到編輯器，新建一個 image8.html，創(chuàng)建一個 img 標簽，引入一張圖片，在 img 標簽上添加一個 title 屬性，賦值為 千鋒HTML5學科——前端培訓界的扛把子 回到瀏覽器查看效果，把鼠標放在圖片上面，看到鼠標后面有了對應的文本提示 。
當鼠標位置不同，顯示文本的位置也不同， title 屬性定義的內容不占據(jù)頁面空間 且默認隱藏的，只有鼠標劃入的時候才會顯示 。
網頁圖片兩個有用的功能都實現(xiàn)了
文章配套視頻鏈接：
「鏈接」
片
當我們在制作頁面的時候，通常會遇到圖片的三種表現(xiàn)形式，如下：
1、內容圖片
內容圖片是頁面中真正的內容，沒有內容圖片，就無法完整的理解頁面內容。如淘寶網上的商品展示圖片，這些圖片是網頁的一部分，它們能幫助你決定這個頁面的內容是否是你需要的。
內容圖片
2、布局圖片
布局圖片出現(xiàn)在頁面背景中，要想理解頁面的內容，它們不是必須的。如蘋果官網的這個圖片，沒有這個圖片也能理解頁面上文字描述的內容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產品，箭頭圖片點擊可以看到更詳細的產品等。
交互圖片
在HTML中我們用 img 標簽創(chuàng)建圖片，英文是image的縮寫。
<img src="" alt="">
內容圖片
布局圖片是在CSS中被創(chuàng)建出來的，使用CSS中的background屬性，如：
1）background-color 定義背景顏色，設置背景圖片時，要始終設置背景顏色，確保背景圖片沒有成功時會顯示一個背景顏色
2）background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
3）background-repeat可以設置背景是否平鋪在容器中，包含四個關鍵字：
4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個關鍵字，如：
background-position：top left 設置圖片顯示在容器的左上角，第一個關鍵字可以是top、center、bottom，第二個關鍵字可以是left、center、right
CSS中和背景相關的屬性可以簡寫在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1）Jpeg 可以展示一張照片或者復雜圖像
2）png最適合展示網頁插畫、logo和網頁小圖標
3）gif適合展示網頁插畫、logo和網頁小圖標
建議：
一般情況下用戶交互圖片都是一些小圖標，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個文件中，可以提高網絡和服務器性能，如：
交互圖片
交互圖片
具體如何操作呢？后續(xù)教頭會通過視頻給大家詳細演示，請繼續(xù)關注。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
