第四单元：丰富的网页媒体
生活随笔
收集整理的這篇文章主要介紹了
第四单元：丰富的网页媒体
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第四單元：豐富的網頁媒體
? 看看字總會煩的豐富的媒體更具有表達性，更好的閱讀體驗和美的享受，所以我們這一章學習一下如果在html中插入圖片與視頻，當然也只需要插入幾個標簽，就可以完成相應的效果。
常見的圖片類型
| 透明性 | 布爾透明類型，它可以是全透明，可以是不透明，它并沒有半透明（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標記
實例
<!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標準中是非法的，但在現如今的瀏覽器都全部支持。
實例
<!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> <audio src="song.ogg" controls="controls"</audio> </body> </html>屬性
| autoplay | autoplay | 如果出現該屬性，則音頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| loop | loop | 如果出現該屬性，則每當音頻結束時重新開始播放。 |
| preload | preload | 如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。 |
| src | url | 要播放的音頻的 URL。 |
2.視頻
? 在如今我們最新的HTML5標準中，我們是用video標簽來顯示我們視頻，這是如今支持的video標簽支持的視頻格式
| MP4 | √ | √ | √ | √ | √ | √ |
| WebM | √ | √ | √ | √ | ||
| Ogg | √ | √ | √ |
實例
<!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> <video src="movie.ogg" width="320" height="240" controls="controls"> </video> </body> </html>屬性
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| loop | loop | 如果出現該屬性，則當媒介文件完成播放后再次開始播放。 |
| preload | preload | 如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。 |
| src | url | 要播放的視頻的 URL。 |
| width | pixels | 設置視頻播放器的寬度。 |
| height | pixels | 設置視頻播放器的高度。 |
總結
以上是生活随笔為你收集整理的第四单元：丰富的网页媒体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言调用函数的方法案例,C语言经典例题
- 下一篇： 梁漱溟：人生的三种态度 | 合道的生活