第6章圖像6.1在頁面中插入圖片6.2設(shè)置圖片的屬性6.3圖文混排6.4為網(wǎng)站添加圖標(biāo)6.5綜合實(shí)例返回6.1在頁面中插入圖片當(dāng)前Web上應(yīng)用最廣泛的三種圖像格式為JPEG,PNG和GIF。當(dāng)前的瀏覽器都可以查看這三種格式的圖像，但應(yīng)該選擇質(zhì)量最高、同時(shí)容量最小的格式。(1)JPEG格式。JPEG格式適用于彩色照片，JPEG支持?jǐn)?shù)百萬種色彩。(2)GIF格式。圖形交換格式GIF是網(wǎng)頁圖像中很流行的格式。(3)PNG格式。其和GIF格式一樣，通常用于保持大量純色圖案或有透明度的標(biāo)志之類。在頁面中插入圖片時(shí)，要使用img元素標(biāo)簽。img元素標(biāo)簽的語法為:下一頁返回6.1在頁面中插入圖片說明:(1)img元素為空元素，在HTML文件中沒有終止標(biāo)簽，但在XHTML中必須在起始標(biāo)簽的右括號前加一個(gè)“/”作為結(jié)束，或?qū)mg元素也加上終止標(biāo)簽。(2)HTML5中img的必要屬性為src和altosrc是指定圖片來源的URL,alt則指定圖片無法顯示時(shí)的替代文字。(3)HTML5中刪除了HTML4中img元素的name、longdesc、align、boder、hspace、vapace屬性。上一頁返回6.2設(shè)置圖片的屬性1.設(shè)置圖片的替代文字屬性alt有時(shí)候網(wǎng)頁中的圖像會(huì)因?yàn)槟撤N原因而無法正常顯示，我們可以為圖像添加一段描述性文字，輔助閱讀。此時(shí)使用imp的alt屬性，格式為:2·設(shè)置圖片的大小屬性width,heigh在默認(rèn)情況下，頁面中的圖像的大小就是圖片默認(rèn)的寬度和高度，我們也可以手動(dòng)更改圖片的大小。但是建議使用專業(yè)的圖像編輯軟件對圖像進(jìn)行寬度和高度的調(diào)整。如果使用img的屬性來設(shè)置，其格式為:圖像的寬度和高度的單位可以是像素，也可以是百分比。返回6.3圖文混排1.使用CSS設(shè)置圖文環(huán)繞我們可以使用float、margin和padding屬性使正文環(huán)繞一個(gè)圖像。(1)float:設(shè)置元素向左或向右浮動(dòng);(2)marlin:設(shè)置元素的外間距，即從邊框到其他元素的間距；(3)padding:設(shè)置元素的內(nèi)間距，即元素到自己邊框的間距。2.應(yīng)用CSS圖像邊框HTML中img元素的border屬性可以給圖片加上邊框，但是無法改變邊框的顏色、無法設(shè)置邊框的線型、無法分別設(shè)置上下左右4條邊框的樣式。而CSS樣式表更為靈活，可以通過CSS設(shè)置豐富的邊框樣式。邊框?qū)傩砸姳?-1。返回6.4為網(wǎng)站添加圖標(biāo)出現(xiàn)在地址欄、標(biāo)簽頁和書簽上的小圖標(biāo)稱作favicon，是favoritesicon(收藏夾)的簡稱。Iphone、ipad等蘋果設(shè)備的主界面要求更大尺寸的圖標(biāo)，推薦大小為114像素x114像素。為網(wǎng)站添加圖標(biāo)的步驟如下:(1)創(chuàng)建一個(gè)16像素x16像素的圖像，保存為Ico或PNG,GIF格式。(2)為觸屏設(shè)備創(chuàng)建一個(gè)114像素x114像素的圖像，保存為PNG格式。(3)在HTML5文檔的head部分，輸入<linkrel="shortcuticon"href="favicon.ico"/>，其中favicon.ico是服務(wù)器上圖標(biāo)的名稱和位置;如果圖像為PNG，則輸入<linkrel="icon"type="image/png"href="favicon.ico"/>;如果圖像為GIF，則輸入<linkrel="icon"type="image/gif"href=”favicon.ico"/>。下一頁返回6.4為網(wǎng)站添加圖標(biāo)(4)在HTML5文檔的head部分，輸入<linkrel="apple-touch-icon"href="apple-touch-icon.pn.png"/>其中apple-touch-icon.png是服務(wù)器上圖標(biāo)的名稱和位置。上一頁返回6.5綜合實(shí)例使用本章所學(xué)的設(shè)置圖片屬性的知識，制作如圖6-8所示的頁面。設(shè)計(jì)要求如下:(1)第一張圖片居左放置，要求設(shè)置右側(cè)和下側(cè)的間距以及邊框。(2)