第5章 【HTML5入門精通實戰(zhàn)教程】HTML5圖片和路徑_第1頁
第5章 【HTML5入門精通實戰(zhàn)教程】HTML5圖片和路徑_第2頁
第5章 【HTML5入門精通實戰(zhàn)教程】HTML5圖片和路徑_第3頁
第5章 【HTML5入門精通實戰(zhàn)教程】HTML5圖片和路徑_第4頁
第5章 【HTML5入門精通實戰(zhàn)教程】HTML5圖片和路徑_第5頁
已閱讀5頁,還剩19頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

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

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

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

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

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

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

7、,不過通常在article里。Figure會在瀏覽器會默認添加40PX寬的左右外邊距。引述文本添加署名通常用figurefigcaption和blockquote結(jié)合。 標簽定義 figure 元素的標題.figcaption 元素應(yīng)該被置于 figure 元素的第一個或最后一個子元素的位置。在中,只能出現(xiàn)一次??梢杂幸部梢詻]有,必須與其他內(nèi)容一起包含在里。不能單獨出現(xiàn)。 5.5 figure和figcaption元素代碼: 聯(lián)想集團位于中國北京,主要生產(chǎn)筆記本、臺式機等產(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 絕對路徑和相對路徑絕對路徑絕對路徑是文件在硬盤上的真正物理路徑。使用或者/作為目錄分隔符相對路徑相對路徑是相對于當前文件的路徑。使用/作為目錄分隔符通常網(wǎng)頁中用相對路徑,很少使

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

10、 “/”代表父目錄 例如:當前目錄當前目錄5 “/./”代表爺爺目錄 例如:子目錄子目錄孫子孫子目錄目錄父父目錄目錄爺爺爺爺目錄目錄5.7 綜合實例5.7 綜合實例 5.7 綜合實例 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 綜合實例 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 綜合實例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 綜合實例But theyve decided to halt the crowdfunding efforts because of the mixed comments theyve received about raising money

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論