當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

第四单元：丰富的网页媒体

發布時間：2024/3/13 编程问答 49 豆豆

生活随笔收集整理的這篇文章主要介紹了第四单元：丰富的网页媒体小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第四單元：豐富的網頁媒體

? 看看字總會煩的豐富的媒體更具有表達性，更好的閱讀體驗和美的享受，所以我們這一章學習一下如果在html中插入圖片與視頻，當然也只需要插入幾個標簽，就可以完成相應的效果。

常見的圖片類型

特點GifJpegPngSvgWebp

透明性	布爾透明類型，它可以是全透明，可以是不透明，它并沒有半透明（alpha透明）	不支持透明	Png是完全支持alpha透明的（透明，半透明，不透明）
動畫	支持動畫	不支持動畫	不支持動畫
損耗性	Gif是一種無損耗的圖像格式(LZW壓縮算法進行編碼)	損耗性，有損壓縮格式，因此在編輯過程一般用png作為過渡格式	無損的	無損的、矢量圖	同時支持有損和無損壓縮的、使用直接色的、點陣圖。
顏色	Gif只能顯示 256種顏色,	可以顯示全部顏色,全色顯示	1.PNG8 256色PNG的別名2.PNG24全色PNG的別名3.PNG32全色PNG的別名
適合場景	不適合用來做照片，但它適合對顏色要求不高的圖形（比如說圖標，圖表等）	最適web上面的攝影圖片和數字照相機中		非常適合用來繪制企業Logo、Icon等
圖片大小	得益于數據的壓縮，GIF格式的圖片文件大小遠遠小于其他格式的圖片。				相同質量的圖片，WebP具有更小的文件體積
分類			大致可以分為256色的png和全色的png，可以用256色的png代替gif(因為在相同的圖片效果下，PNG-8具有更小的文件體積)，用全色的png24(體積比jpeg大的多)代替jpeg

? 如上這些常見的圖片文件類型我已經打包成表格你們可以去大概了解，根據需求來選擇使用哪一種文件類型。

2.圖像映射（圖像熱點）

? 圖像映射就是指我們通過一個鏈接可以由這個鏈接到的圖像，顯示到網頁上，支持：矩形、圓形、多邊形。使用img標記，map標記以及一個或多個area標記

img標記用來顯示圖片

map標簽標識所有熱點的容器，這個標簽的name和id標簽，兩者值是一致的。

將img標簽里面usemap屬性值設置為map的name指。

在map標簽中嵌套area標簽，使用area標簽shape屬性和cooras屬性指定熱點在圖片上的形狀和位置等等各種大小。

實例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap" id="planetmap" ><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map> </body> </html>

3.網頁上的視頻和音頻

? 為了更好的去體現你想要呈現的信息表達，就是要使用聽不止靜態的看，就是使用視頻和音頻

1.音頻

? 音頻我們使用的標簽為aduio標簽，我們從一開始就默認我們所講述的HTML5標準，所以這個我們講到這個標簽時我要強調一點就是這個標簽在HTML4標準中是非法的，但在現如今的瀏覽器都全部支持。

實例

屬性

屬性值描述

autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
preload	preload	如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。
src	url	要播放的音頻的 URL。

2.視頻

? 在如今我們最新的HTML5標準中，我們是用video標簽來顯示我們視頻，這是如今支持的video標簽支持的視頻格式

瀏覽器Internet ExplorerEdgeChromeFirefoxSafariOpera

MP4	√	√	√	√	√	√
WebM		√	√	√		√
Ogg			√	√		√

實例

屬性