資源描述：
《HTML5中的圖像、音頻和視頻》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、HTML5中的圖像、音頻和視頻第4章4.3在網(wǎng)頁(yè)中插入視頻
2、（1）掌握文件路徑（2）掌握?qǐng)D像元素的使用方法。（3）掌握多媒體元素的常用屬性及使用方法。文件路徑就是文件在電腦中的位置，表示文件路徑的方式有兩種，相對(duì)路徑和絕對(duì)路徑。4.1文件路徑4.1.1絕對(duì)路徑絕對(duì)路徑包含了指向目錄或文件的完整信息，包括模式、主機(jī)名和路徑。就路徑來(lái)說(shuō)，絕對(duì)路徑本身與被引用文件的實(shí)際位置無(wú)關(guān)，無(wú)論是在哪個(gè)主機(jī)上的網(wǎng)頁(yè)中，某一文件的絕對(duì)路徑都是完全一樣的。例如："http://www.sina.com.cn/index.html""ftp://222.22.49.189"4.1.2相對(duì)路徑相對(duì)路徑就是指由這個(gè)文件
3、所在的路徑引起的跟其它文件（或文件夾）的路徑關(guān)系。圖4-1文件結(jié)構(gòu)1、引用同一目錄下的文件例如：如圖4-1所示，文件夾admin中的文件login.html要訪問(wèn)logout.html，相對(duì)路徑為"logout.html"。2、引用子目錄下的文件例如：如圖4-1所示，文件夾admin中的文件login.html要訪問(wèn)logout.html，相對(duì)路徑為"logout.html"。3、引用上層目錄的文件如果要引用文件層次結(jié)構(gòu)中更上層目錄中的文件，那么應(yīng)該使用兩個(gè)句點(diǎn)和一個(gè)斜杠，每個(gè)../都表示“到當(dāng)前文件的上一層”。例如：如圖4-1所示
4、，login.html文件要訪問(wèn)book.html文件，相對(duì)路徑為"../bookstore/book.html"4、根相對(duì)路徑根路徑是從網(wǎng)站的最底層開(kāi)始起，一般的網(wǎng)站的根目錄就是域名下對(duì)應(yīng)的文件夾。例如：如圖4-1所示，cart.html文件訪問(wèn)foot.png，如果寫(xiě)成根路徑為"/images/foot.png"當(dāng)前，Web上用的最廣泛的三種格式是GIF、PNG和JPEG。1.JPEG格式JPEG格式由一個(gè)軟件開(kāi)發(fā)聯(lián)合會(huì)組織制定，是一種有損壓縮格式，能夠?qū)D像壓縮在很小的儲(chǔ)存空間，圖像中重復(fù)或不重要的資料會(huì)被丟失，因此容易造成圖
5、像數(shù)據(jù)的損傷,文件后輟名為“．jpg”或“．jpeg”。2.GIF格式GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無(wú)損壓縮格式。3.PNG格式PNG是無(wú)損的格式，因此采用這種格式對(duì)圖像進(jìn)行壓縮時(shí)不會(huì)造成品質(zhì)的損失。GIF只有256種顏色，但PNG卻支持幾百萬(wàn)種顏色。4.2在頁(yè)面中插入圖像![]()
4.2.2插入圖像1、圖像資源屬性——src屬性在![]()
元素中src屬性是不能缺省的?；菊Z(yǔ)法：2、圖像替代文本——alt屬性使用alt屬性，可以為圖像添加一段描述性文本，當(dāng)圖像不能夠正常顯示或鼠標(biāo)指
6、向圖片并暫停在圖片上時(shí)會(huì)顯示的替代文本?；菊Z(yǔ)法：3、圖像的寬高——width和height屬性基本語(yǔ)法：7、百分比"height="像素
8、百分比"/>
圖像的應(yīng)用風(fēng)景圖片
9、始尺寸"/>圖4-2![]()
圖像的應(yīng)用瀏覽效果【例4-1】使用![]()
圖像的應(yīng)用（4-1.html）在HTML中播放視頻并不容易，為此HTML5中新增了video元素，video元素是用來(lái)處理視頻元素。4.3在網(wǎng)頁(yè)中插入視頻
10、HTML5支持三種視頻文件格式：mp4、webm和ogg。目前各種瀏覽器支持的視頻格式不一致。如表4-1列出不同瀏覽器支持的視頻格式。4.3.2插入視頻