嵌入内容

1、图片
img元素
<img src="地址" alt="图片未加载时的展示" srcset=“不同场景下的展示”>
srcset 可以在不同的窗口下提供不同的src 也就是展示不同的图片
sizes 在不同的显示下展示不同的图片
usemap 关联热点图片的名称
ismap 是否服务器端的图片

picture 图片容器

source 图片来源
source可以是多个
picture 里面可以放多个source和img 用于在不同的情况根据浏览器支持的情况显示
浏览器会加载第一个能够显示的图片

2、图片热点
image的 usemap=“#shapes”
图片属性中的usemap属性指向 map中的name属性
map中的area 用shape（形状）coords（位置）href（链接）
这三个属性让图片中不同区域中的点击事件跳转到不同的页面

<img src="a.jpg" usemap="shapes">
<map name="shapes">
    <area shape="rect" coords="50,50,100,100">
    <area shape="rect" coords="25,25,125,125" href="/res/red.html" alt="aaa">
</map>

在商家热点商品推荐的海报中常见使用
3、视频音频
video 插入视频影片

src属性指向视频地址
controls 是否有控制条
poster 视频封面
autoplay 自动播放

<video width="300" height="300" control>
    <source src="a.mp4" type="这里的属性用于不同适应不同浏览器">
    <track src="a.str" > 
    浏览器不支持video元素
</video>

track 字幕
audio 音频

4、iframe 一般用于广告
内嵌的浏览上下文
将另一个html页面嵌入到当前页面中
属性

src 插入源
srcdoc 直接插入内容 （优先于src）
sandbox 用于限制iframe内部对外部内容的操作