第5章 【HTML5入門(mén)精通實(shí)戰(zhàn)教程】HTML5圖片和路徑

1、HTML5 入門(mén)精通實(shí)戰(zhàn)教程講師：金超服第5章 圖片和路徑 5.1 圖片概述 5.1.1 基本概念和圖片格式 5.1.2 圖片像素、分辨率、大小、尺寸 5.1.3 圖片工具和圖片壓縮 5.2 標(biāo)簽及必要屬性 5.3 標(biāo)簽及可選屬性 5.4 HTML5已廢棄的圖片屬性 5.5 figure和figcaption元素 5.6絕對(duì)路徑和相對(duì)路徑 5.7 綜合實(shí)例第5章 圖片和路徑（大綱） 圖片是指由圖形、圖像構(gòu)成的平面媒體。 總體上可以分為點(diǎn)陣圖和矢量圖兩大類。 常見(jiàn)的顏色模式：RGB、CMYK、LAB。 網(wǎng)頁(yè)上常用JPEG、GIF、PNG格式。 下面的表格對(duì)比常見(jiàn)格式5.1 概念和格式格式格式用法

2、用法顏色顏色透明透明動(dòng)畫(huà)動(dòng)畫(huà)JPEG 適用于照片，顏色較多且接受一些質(zhì)量損失的圖像。1600萬(wàn)以上PNG-8 適用于標(biāo)識(shí)、圖案等顏色較少或連續(xù)顏色的圖像。256PNG-24 與PNG-8相似，支持顏色更多。 1600萬(wàn)以上PNG-32 與PNG-24相似1600萬(wàn)以上GIF與PNG-8相似256webp 谷歌新格式，在顏色相同的情況下，文件大小遠(yuǎn)小于其他格式。多數(shù)瀏覽器不支持，1600萬(wàn)以上5.1 .1概念和格式 圖片由無(wú)數(shù)個(gè)點(diǎn)組成。每個(gè)點(diǎn)就是一個(gè)像素， 每個(gè)像素里都由一個(gè)顏色表現(xiàn)。 圖像分辨率是每英寸圖像內(nèi)有多少個(gè)像素點(diǎn)。 圖片的大小由像素的多少?zèng)Q定，分辨率是單位密度，同量像素圖片的分辨率越

3、高，面積越小。 圖片質(zhì)量大小通常用字節(jié)、千字節(jié)、兆字節(jié)表示。 圖片的尺寸大小通常用寬度和高度的像素表示。5.1.2 像素、分辨率、大小、質(zhì)量 常用的工具 Adobe Photoshop CorelDRAW Fireworks Adobe Illustrator http:/ http:/ Riot5.1.3 工具 圖像由 標(biāo)簽定義， 是單標(biāo)簽。 必要屬性 語(yǔ)法： 注意：不同瀏覽器alt顯示效果略有不同5.2 標(biāo)簽及必要屬性屬性屬性值值描述描述srcurl規(guī)定顯示圖像的 URL。src 指 source。alttext規(guī)定圖像的替代文本。 5.2 標(biāo)簽及必要屬性代碼：插入一個(gè)本地圖片:插入一個(gè)遠(yuǎn)

4、程圖片: 瀏覽器顯示效果： 5.3 標(biāo)簽及可選屬性屬性屬性值值描述描述widthpixels設(shè)置圖像的寬度。為圖像指定 height 和 width ，就可以在頁(yè)面加載時(shí)為圖像預(yù)留空間。heightpixels定義圖像的高度。請(qǐng)不要通過(guò) height 和 width 屬性來(lái)縮放圖像。在 HTML5 中，高度值必須以像素為單位。Ismapismap將圖像定義為服務(wù)器端圖像映射。圖像映射指的是帶有可點(diǎn)擊區(qū)域的圖像。當(dāng)點(diǎn)擊一個(gè)服務(wù)器端圖像映射時(shí)，點(diǎn)擊坐標(biāo)會(huì)以 URL 查詢字符串的形式發(fā)送到服務(wù)器。語(yǔ)法：usemapusemap將圖像定義為客戶器端圖像映射。將一幅圖像 映射為 N 個(gè)區(qū)域，當(dāng)用戶單擊其

5、中某一個(gè)區(qū)域時(shí)，將被鏈接到不同的文檔中。語(yǔ)法：通過(guò)特殊的 和 標(biāo)簽，HTML 創(chuàng)作者可以提供一個(gè)描述 usemap 圖像中超鏈接敏感區(qū)域坐標(biāo)的映射，這個(gè)映射同時(shí)包含相應(yīng)的超鏈接 URL。usemap 屬性的值是一個(gè) URL，它指向特殊的 區(qū)域。用戶計(jì)算機(jī)上的瀏覽器將把鼠標(biāo)在圖像上單擊時(shí)的坐標(biāo)轉(zhuǎn)換成特定的行為，包括加載和顯示另外一個(gè)文檔。 5.3 標(biāo)簽及可選屬性代碼： 瀏覽器顯示效果： 5.4 HTML5已廢棄的圖片屬性屬性屬性值值描述描述aligntopbottommiddleleftrightHTML5 不支持。HTML 4.01 已廢棄。 規(guī)定如何根據(jù)周圍的文本來(lái)排列圖像。borderpi

6、xelsHTML5 不支持。HTML 4.01 已廢棄。 規(guī)定圖像周圍的邊框。hspacepixelsHTML5 不支持。HTML 4.01 已廢棄。 規(guī)定圖像左側(cè)和右側(cè)的空白。longdescURLHTML5 不支持。HTML 4.01 已廢棄。 指向包含長(zhǎng)的圖像描述文檔的 URL。vspacepixelsHTML5 不支持。HTML 4.01 已廢棄。 規(guī)定圖像頂部和底部的空白。 5.5 figure和figcaption元素標(biāo)簽標(biāo)簽描述描述 標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān) 中可以放置一個(gè)或多個(gè)圖像。 不一定包含在article

7、，不過(guò)通常在article里。Figure會(huì)在瀏覽器會(huì)默認(rèn)添加40PX寬的左右外邊距。引述文本添加署名通常用figurefigcaption和blockquote結(jié)合。 標(biāo)簽定義 figure 元素的標(biāo)題.figcaption 元素應(yīng)該被置于 figure 元素的第一個(gè)或最后一個(gè)子元素的位置。在中，只能出現(xiàn)一次。可以有也可以沒(méi)有，必須與其他內(nèi)容一起包含在里。不能單獨(dú)出現(xiàn)。 5.5 figure和figcaption元素代碼： 聯(lián)想集團(tuán)位于中國(guó)北京，主要生產(chǎn)筆記本、臺(tái)式機(jī)等產(chǎn)品，銷量連續(xù)3年奪冠，其服務(wù)及產(chǎn)品質(zhì)量一流。 新款聯(lián)系筆記本 瀏覽器顯示效果： 5.5 figure和figcaption

8、元素代碼： its from mayun and alibaba Today is difficult,tomorrow is more difficult, but the day after tomorrow is beautiful, so we have to work very hard. in order to survive the long journey. -by mayun 瀏覽器顯示效果： 5.6 絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑絕對(duì)路徑是文件在硬盤(pán)上的真正物理路徑。使用或者/作為目錄分隔符相對(duì)路徑相對(duì)路徑是相對(duì)于當(dāng)前文件的路徑。使用/作為目錄分隔符通常網(wǎng)頁(yè)中用相對(duì)路徑，很少使

9、用絕對(duì)路徑?；靖拍?5.6 絕對(duì)路徑和相對(duì)路徑二者比較絕對(duì)路徑相對(duì)路徑絕對(duì)路徑，指的是完整的路徑。相對(duì)路徑，就是在同一個(gè)網(wǎng)站下，不同文件之間的的位置定位。絕對(duì)路徑別人不易采集和抄襲。引用的文件是相對(duì)當(dāng)前網(wǎng)頁(yè)的位置而言的，根據(jù)這個(gè)相對(duì)位置得出相對(duì)路徑。使用絕對(duì)路徑，當(dāng)網(wǎng)站文件上傳到web服務(wù)器上，會(huì)出現(xiàn)圖片和鏈接打不開(kāi)。整個(gè)目錄移動(dòng)，網(wǎng)頁(yè)之間的鏈接關(guān)系不受影響。但是個(gè)別頁(yè)面換了位置，鏈接失效。通常在不同網(wǎng)站插入圖片用絕對(duì)路徑。容易被人大面積采集抄襲。 5.6 絕對(duì)路徑和相對(duì)路徑目錄語(yǔ)法 “./”代表當(dāng)前目錄 例如：1234 “目錄名/”代表子目錄 例如： “目錄名/目錄名”代表孫子目錄 例如：

10、 “/”代表父目錄 例如：當(dāng)前目錄當(dāng)前目錄5 “/./”代表爺爺目錄 例如：子目錄子目錄孫子孫子目錄目錄父父目錄目錄爺爺爺爺目錄目錄5.7 綜合實(shí)例5.7 綜合實(shí)例 5.7 綜合實(shí)例 Chinese boy born with 31 fingers and toes; parents hope for surgery By Jareen Imam and Vivian Kam, CNN Updated 1430 GMT (2230 HKT) May 5, 2016 Hong Hongs mother shows her sons feet. The infant was born with 1

11、6 toes. 5.7 綜合實(shí)例 Story highlights Infant has polydactylism, a condition in which people have extra fingers, toes The boys parents are trying to raise enough money for a life-changing surgery (CNN)Meet Hong Hong. Hes almost 4 months old, lives in China and has 31 fingers and toes. Thats not a typo. T

12、he boy was born in January with 15 fingers and 16 toes in Pingjiang County in Hunan province. He also has two palms on each hand and no thumbs. 5.7 綜合實(shí)例Right now Hong Hong is too young to undergo surgery, the infants father, Zou Chenglin, told CNN. In the meantime, his parents are seeking medical ad

13、vice on how to treat their son. The mother shows her sons hands. He has 15 fingers, two palms on each hand and no thumbs. Doctors have given the family differing advice, with some saying the surgery is much more complicated than originally thought because Hong Hong requires not only the removal of his extra fingers and toes but also needs reconstructed thumbs. 5.7 綜合實(shí)例But theyve decided to halt the crowdfunding efforts because of the mixed comments theyve received about raising money