一. 图片
img
- 图像
- 属性
--src 图片地址,必填
--alt 图片不能显示时显示的内容
--width、height 图片的宽度和高度
--srcset
--sizes
- srcset
--宽度描述符
<div>
<img src="/res/chrome128.png" alt="chrome">
<img src="/res/chrome128.png" alt="chrome"
srcset="/res/chrome256.png 256w, /res/chrome512.png 512w"
sizes="(max-width:1080px) 128px,256px">
</div>
--像素密度描述符
<div>
<img src="/res/chrome128.png" alt="chrome">
<img src="/res/chrome128.png"
srcset="/res/chrome256.png 2x, /res/chrome512.png 3x" alt="chrome">
</div>
- usemap 和img相关联的热点图片的名字
- ismap 布尔属性,表示图片是否是服务器端map的一部分。返回的是图片的坐标值,要放到a元素中链接。
- referrerpolicy referrer信息策略
- crossorigin 跨域图片
- longdesc 对图片的补充,内容可写很长
插入图片
- picture
--容器
- source
--srcset
--type 图片类型
--sizes
--media 媒体查询
<picture>
<source type="image/webp" srcset="/res/chrome.webp">
<!--Chrome浏览器支持-->
<source type="image/png" srcset="/res/chrome256.png">
<img src="/res/chrome256.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>
二、图片热点
- 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>
还有以下属性,同超链接中的属性
--download 表示不用打开资源,直接下载即可
--hreflang
--rel
--target
--type
--referrerpolicy
三、视频音频
video
- 视频,影片,带字幕的音频
- 属性
--src
--width,height
--poster
--preload
--autoplay
--loop
--muted
--controls 控制是否显示控制条
--crossorigin
<video src="/res/video.mp4" controls width="200" height="200">
</video>
- poster表示封面
<video src="/res/video.mp4" controls poster="/res/cover.png" width="200" height="200">
</video>
- autoplay 是否自动播放,默认不自动播放
- loop 是否重复播放
- muted 是否静音
- preload 是否预加载视频
--none 表示不用加载
--metadata 表示加载视频元数据
--auto 表示需要预先加载
<video src="/res/video.mp4" controls autoplay muted loop preload="auto"
poster="/res/cover.png" width="200" height="200">
浏览器不支持video元素
</video>
- source
--src 视频地址
--type 视频格式
<video width="300" height="300" controls>
<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 表示元数据信息,对用户不可见,主要给脚本使用
<video width="300" height="300" controls> <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>
--src 字幕地址
--srclang 字幕语言
--label 显示在控制器上的字母标签
--default 显示当前字幕是否是默认字幕
audio
- 音频
- 属性
--src
--preload
--autoplay
--loop
--muted
--controls
--crossorigin
<audio src="/res/audio.mp3" controls></audio>
- source
- track
<audio controls>
<source src="/res/audio.mp3" type="audio/mp3">
<source src="/res/audio.wav" type="audio/wav">
<track kind="subtitles" src="/res/audio.en.srt" srclang="en" label="English">
<track kind="subtitles" src="/res/audio.zh.vtt" srclang="zh" label="中文">
</audio>
四、广告
插入广告
iframe
- 内嵌的浏览上下文
- 另一个HTML页面嵌入到当前页面中
- 属性
--src 另一个HTML页面地址
--width、height 宽高
--name 当前浏览环境的名称
<iframe width="200" height="220" frameborder="0" src="http://www.baidu.com">
</iframe>
- srcdoc 直接嵌入一个页面内容
<iframe srcdoc="<div>hello world</div>" frameborder="0" width="200" height="220"></iframe>
- sandbox 限制被嵌入内容的操作
--allow-forms
--allow-pointer-lock
--allow-popups
--allow-presentation
--allow-same-origin
--allow-scripts
--allow-top-navigation 允许当前层级打开
注意:当只有一个sandbox时,里面不会允许进行任何动作,包含表单提交等
<iframe sandbox="allow-scripts" src="/res/framea.html" frameborder="0"></iframe>
如果既写了src属性又写了srcdoc属性,优先显示srcdoc的内容。
--allowfullscreen 是否允许全屏显示内容
--allowpaymentrequest 是否允许有支付请求
--referrerpolicy 获取资源时refer信息应该采用哪种策略