6. 嵌入内容

图片

<img
  src="..."
  alt="..."
  width="100"
  height="100"
  title="..."
>

• src：图片的地址，可以是相对地址或绝对地址。
• alt：备选文本，图片加载不成功时会显示的内容。
• width：图片的宽度，不带单位，以像素为单位
• height：图片的宽度，不带单位，以像素为单位
• title：悬浮在图片上出现提示文本

图文搭配

更加语义化，将图片和文本描述绑定在一起：<figure>、<figcaption>

<figure>
  <img >
  <figcaption>...</figcaption>
</figure>

响应式图片

使用 <picture>

视频

<video>

<video
  controls
  width="200"
  height="200"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png"
>
  <source src="xxx.mp4" type="video/mp4" />
  <source src="xxx.webm" type="video/webm" />
  <p>你的浏览器不支持此视频。可点击<a href="xxx.mp4">此链接</a>观看</p>
</video>

• <source>：由于每种浏览器支持的容器文件格式和编解码器都有所不同，提高兼容性可以设置多个源（且最好使用 type 属性，这样浏览器可以判断后直接跳过而不用下载后再判断）
• width 和 height：控制视频的尺寸，也可以用 CSS 来控制视频尺寸（无论使用哪种方式，视频都会保持它原始的长宽比——也叫做纵横比）
• autoplay：立即播放
• loop：循环播放
• muted：关闭声音
• poster：封面预览
• preload：用来缓冲较大的文件

添加字幕

向 HTML 视频中添加字幕 - Web 媒体技术 | MDN (mozilla.org)

音频

audio

嵌入其他 web 页面

iframe

Important

使用时最好配置 CSP（内容安全策略）

PDF

object

<object data="mypdf.pdf" type="application/pdf" width="800" height="1200">
  <p>
    You don't have a PDF plugin, but you can
    <a href="mypdf.pdf">download the PDF file. </a>
  </p>
</object>