前端学习——第三天HTML多媒体嵌入

1.插入图片

第一：

使用<img>元素，进行最基本的图片插入，该元素最少要一个src（source）使其生效。src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对URL，就像 <a>元素的 href 属性一样。

<img src="images/1.jpg">
//搜索引擎也读取图像的文件名并把它们计入SEO。
因此你应该给你的图片取一个描述性的文件名（名字中英文）,
这里为了省事。

alt属性：

备选文本；用于图片无法显示时候，作为替代文本

<img src="images/1.jpg" alt="这是一个图片">

高度和宽度：

你不应该使用HTML属性来改变图片的大小。如果你把尺寸设定的太大，最终图片看起来会模糊；如果太小，会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的宽高比，图片可能看起来会扭曲。在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。

<img src="images/1.jpg" alt="这是一张图片" width="400" height="341">
//注意：如果你需要改变图片的尺寸，你应该使用CSS而不是HTML。

图片标题：（title 在鼠标悬停时显示提示)

<img src="images/1.jpg" alt="这是一张图片" title="一个男人">

为图片搭配说明文字的方式来解说图片:

<figure>元素和其的<figcaption>元素
举例：

<figure>
<img src="images/1.jpg" alt="这是一个恐龙" >
<figcaption>写入描述性的文字</figcaption>
</figure>

结果

2.视频和音频内容

video元素

<video src="1.webm" controls>
<!--可有可没有--><p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

• src
  同<img>标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同。
• controls
  用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。
• <video> 标签内<p></p>的内容
  这个叫做后备内容 — 当浏览器不支持<video>标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。
• 其他特性
  width 和 height 你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
  autoplay 这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。
  loop 这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。
  muted 这个属性会导致媒体播放时，默认关闭声音。
  poster 这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
  preload 这个属性被用来缓冲较大的文件，有3个值可选：
• “none” ：不缓冲
• “auto” ：页面加载后缓存媒体文件
• “metadata” ：仅缓冲文件的元数据

audio元素

<audio> 标签<audio> 标签与 <video> 标签的使用方式几乎完全相同
使用：

<audio src="1.mp3" controls>
<p>你的浏览器不支持 HTML5 音频，可点击<a href="1.mp3">此链接</a>收听。</p>
</audio>

注意：video和audio的controls是不可缺的，缺了就不能控制播放进度。也就 无法播放 。

3.嵌入类型的使用

iframe元素（内联框架）

该元素旨在允许您将其他Web文档嵌入到当前文档中。这很适合将第三方内容嵌入您的网站，因为您可能无法直接控制，也不希望实现自己的版本 - 例如来自在线视频提供商的视频，Disqus等评论系统，在线地图提供商，广告横幅等。
例子：

<iframe src="https://player.bilibili.com/player.html?aid=19390801&cid=31621681&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

allowfullscreen

• 如果设置，<iframe>则可以通过全屏API设置为全屏模式（稍微超出本文的范围）。

frameborder

• 如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;

src

• 该属性与<video>/<img>一样包含指向要嵌入文档的URL路径。

width 和 height

• 这些属性指定您想要的iframe的宽度和高度。

备选内容

• 与等其他类似元素相同，您可以在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持<iframe>的浏览器。

sandbox

• 该属性需要在已经支持其他<iframe>功能（例如IE 10及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置;

在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索。

embed元素和object元素

<embed>和<object>元素的功能不同于<iframe>—— 这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash， PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！(插件是一种对浏览器原生无法读取的内容提供访问权限的软件)

//嵌入Flash影片
<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"      pluginspage="http://www.macromedia.com/go/getflashplayer">
//嵌入pdf
<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
</object>

4.自适应图片

使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
例子：

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

注解：

• srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小.
  在每个逗号之前，我们写：

1. 一个文件名 (elva-fairy-480w.jpg.)
2. 一个空格
3. 图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在Mac上，你可以在Finder上选择这个图像，然后按 Cmd + I 来显示信息）。

• sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。
  在这种情况下，在每个逗号之前，我们写：

1. 一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是480像素或更少”。
2. 一个空格
3. 当媒体条件为真时，图像将填充的槽的宽度（440px）

运行过程：

• 查看设备宽度
• 检查sizes列表中哪个媒体条件是第一个为真
• 查看给予该媒体查询的槽大小
• 加载srcset列表中引用的最接近所选的槽大小的图像
• 所以在这里，如果支持浏览器以视窗宽度为480px来加载页面，那么(max-width: 480px)的媒体条件为真，因此440px的槽会被选择，所以elva-fairy-480w.jpg将加载，因为它的的固定宽度（480w）最接近于440px。800px的照片大小为128KB而480px版本仅有63KB大小—节省了65KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。

一种更简单的方法：
如果你支持多种分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过srcset和x语法结合——一种更简单的语法——而不用sizes，来选择适当分辨率的图片。
例子：

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" 
     alt="Elva dressed as a fairy">

有时候，图片大小改变，图片里的某个人或物也会变小，这样就会很难看，所以我们可以做一个特写照片来替换，当照片被缩小时的情况——<picture>元素可以实现
例子：

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

• 这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在这种情况下，如果视窗的宽度为799px或更少，第一个<source>元素的图片就会显示。如果视窗的宽度是800px或更大，就显示第二张图片。
• srcset属性包含要显示图片的路径。请注意，正如我们在<img>上面看到的那样，<source>可以使用引用多个图像的srcset属性，还有sizes属性。所以你可以通过一个 <picture>元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。
• 在任何情况下，你都必须在 </picture>之前正确提供一个<img>元素以及它的src和alt属性，否则不会有图片显示。当媒体条件都不返回真的时候（你可以在这个例子中删除第二个<source> 元素），它会提供图片；如果浏览器不支持 <picture>元素时，它可以作为后备方案。
  示例图片：