網(wǎng)頁中嵌入其他類型的資源，比如圖片、音頻、視頻等媒體元素。

1.圖片元素的使用

img元素表示圖像，屬性：
-src 圖片地址
-alt 圖片不能顯示時顯示的內(nèi)容
-width 圖片寬度
-height 圖片高度
-srcset （根據(jù)不同的分辨率來顯示不同的類型）
寬度描述符：
srcset="/rec/chrome256.png 256w,/rec/chrome512.png 512w"
像素密度描述符：
srcset="/rec/chrome256.png 2x,/rec/chrome512.png 3x"
-sizes (響應(yīng)式)
sizes="(max-width:1080px) 128px, 256px"

img其他屬性：
·usemap
·ismap 布爾屬性，僅a標(biāo)簽中的img元素可用，表示點擊鏈接時會發(fā)送當(dāng)前坐標(biāo)
·referrerpolicy
·crossrigin
·longdesc

picture和source實現(xiàn)響應(yīng)式：
picture
-容器
source
-type
-srcset
-sizes
-media
<picture>
<source type="image/webp" srcset="/res/chrome.webp">
<source type="image/png" srcset="/res/chrome.png">
<img src="/res/chrome.png" alt="chrome">
</picture>
<picture>
<source srcset="/res/chrome128.png 1x,/res/chrome256.png 2x" media="(max-width: 1080px)">
<source srcset="/res/chrome256.png 1x,/res/chrome512.png 2x">
<img src="/res/chrome128.png" alt="chrome">
</picture>
ratina顯示屏的顯示像素是普通屏幕的兩倍

2.圖片熱點元素的使用

map
-name
area
-alt
-href
-shape
-coords

圖片熱點

<p>
<img src="/res/shapes.png" usemap="#shapes" alt="四個形狀">
<map name="shapes">
<area shape=rect coords="50,50,100,100">
<area shape=rect coords="25,25,125,125" href="/res/red.html" alt="紅色正方形">
<area shape=circle coords="200,75,50" href="/res/green.html" alt="綠色圓形">
<area shape=poly coords="325,25,262,125,388,125" href="/res/blue.html" alt="藍(lán)色三角形">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="/res/yellow.html" alt="黃色多邊形">
</map>
</p>

area的其他屬性（同超鏈接的屬性一樣）
-download
-hreflang
-rel
-target
-type
-referrerpolicy

3.音頻視頻元素的使用

video屬性可加入視頻、影片 和帶字幕的音頻等
屬性：
-src
-width
-height
-poster 封面
-preload 是否預(yù)先加載視頻（-none 不自動加載，-metadata 預(yù)先加載元數(shù)據(jù)，-auto 預(yù)先加載）
-autoplay 是否自動播放，默認(rèn)關(guān)閉
-loop 是否重復(fù)播放，默認(rèn)關(guān)閉
-muted 是否靜音，默認(rèn)關(guān)閉
-controls 是否顯示控制條，默認(rèn)關(guān)閉
-crossorigin
video和source的組合，以兼容各個瀏覽器
-src
-type
<video src="/res/video.mp4" controls muted poster="/res/cover.png" width="200" height="200">瀏覽器不支持video元素</video>
<video width="300" height="300" controls poster="res/cover.png">
<source src="/res/video.mp4" type="video/mp4;codedes='avc1.42E01E,mp4a.40.2'">
<source src="/res/video.ogg" type="video/ogg;codecs='theora,vorbis'">
瀏覽器不支持video元素
</video>

track 添加字幕
-kind 字幕類型
·subtitles（翻譯字幕）
·captions （同步翻譯）
·descriptions （視頻內(nèi)容的文本描述）
·chapters （章節(jié)的標(biāo)題）
·metadata （元數(shù)據(jù)信息，腳本使用）
-src 字幕地址
-srclang 字幕語言
-label 顯示在控制器上字幕的標(biāo)簽
-default 設(shè)置默認(rèn)字幕
<video width="300" height="300" controls poster="/res/cover.png">
<source src="/res/video.mp4" type="video/mp4;codedes='avc1.42E01E, mp4a.40.2'">
<track kind="subtitles" src="/res/video.en.srt" srclang="en" label="English">
<track kind="captions" src="/res/video.zh.vtt" srclang="zh" label="中文">
</video>

audio 插入音頻元素（可當(dāng)做video元素的子集）
-src
-preload
-autoplay
-loop
-muted
-controls
-crossorigin

source元素來表示不同類型的音頻文件，track可加載字幕
<audio src="/res/audio.mp3" controls></audio>
<audio controls>
<source src="/res/audio.mp3" type="audio/mp3">
<source src="res/audio.wav" type="audio/wav">
</audio>

4.iframe元素（可插入廣告）

內(nèi)嵌的瀏覽上下文
另一個html頁面嵌入到當(dāng)前頁面中
-src 另一個html的地址
-width 寬度
-height 高度
-name 當(dāng)前瀏覽環(huán)境的名稱，和target配合，把超鏈接的內(nèi)容顯示在特定的瀏覽環(huán)境中
<iframe width="200" height="220" frameborder="0" src="http://iad.g.163.com/wa/ad?…"></iframe>
-srcdoc 可直接用代碼嵌入頁面內(nèi)容
<iframe srcdoc="<div>hello,world!</div>" frameborder="0" width="200" height="220"></iframe>

iframe中的內(nèi)容可以通過腳本操作外邊的頁面，不安全
所以可以用sandbox屬性可以設(shè)置嵌入頁面的操作權(quán)限
·sanbox（默認(rèn)都不允許）

• allow-forms
• allow-pointer-lock
• allow-popups
• allow-presentation
• allow-same-origin
• allow-scripts
• allow-top-navigation
  <iframe sandbox="allow-top-navigation" src="/res/framea.html" frameborder="0">
  </iframe>

iframe其他屬性
·allowfullscreen
·allowpaymentrequest
·referrerpolicy