13 HTML：嵌入内容

网页中嵌入其他类型的资源，比如图片、音频、视频等媒体元素。

1.图片元素的使用

img元素表示图像，属性：
-src 图片地址
-alt 图片不能显示时显示的内容
-width 图片宽度
-height 图片高度
-srcset （根据不同的分辨率来显示不同的类型）
宽度描述符：
srcset="/rec/chrome256.png 256w,/rec/chrome512.png 512w"
像素密度描述符：
srcset="/rec/chrome256.png 2x,/rec/chrome512.png 3x"
-sizes (响应式)
sizes="(max-width:1080px) 128px, 256px"

img其他属性：
·usemap
·ismap 布尔属性，仅a标签中的img元素可用，表示点击链接时会发送当前坐标
·referrerpolicy
·crossrigin
·longdesc

picture和source实现响应式：
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="蓝色三角形">
<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 是否预先加载视频（-none 不自动加载，-metadata 预先加载元数据，-auto 预先加载）
-autoplay 是否自动播放，默认关闭
-loop 是否重复播放，默认关闭
-muted 是否静音，默认关闭
-controls 是否显示控制条，默认关闭
-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 （视频内容的文本描述）
·chapters （章节的标题）
·metadata （元数据信息，脚本使用）
-src 字幕地址
-srclang 字幕语言
-label 显示在控制器上字幕的标签
-default 设置默认字幕
<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 插入音频元素（可当做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元素（可插入广告）

内嵌的浏览上下文
另一个html页面嵌入到当前页面中
-src 另一个html的地址
-width 宽度
-height 高度
-name 当前浏览环境的名称，和target配合，把超链接的内容显示在特定的浏览环境中
<iframe width="200" height="220" frameborder="0" src="http://iad.g.163.com/wa/ad?…"></iframe>
-srcdoc 可直接用代码嵌入页面内容
<iframe srcdoc="<div>hello,world!</div>" frameborder="0" width="200" height="220"></iframe>

iframe中的内容可以通过脚本操作外边的页面，不安全
所以可以用sandbox属性可以设置嵌入页面的操作权限
·sanbox（默认都不允许）

• 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