diff options
Diffstat (limited to 'files/zh-cn/learn/html/multimedia_and_embedding')
8 files changed, 1956 insertions, 0 deletions
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..3b292c1b9c --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,361 @@ +--- +title: 在网页中添加矢量图形 +slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +tags: + - HTML + - SVG + - 图像 + - 指南 +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div class="summary"> +<p>矢量图形在很多情况下非常有用 — 它们拥有较小的文件尺寸，却高度可缩放，所以它们不会在镜头拉近或者放大图像时像素化。在这篇文章中，我们将为您呈现如何在网页中添加矢量图形。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提：</th> + <td>你需要了解 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML的基本知识</a> 并且知道如何 <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">在你的文档中插入图片</a>.</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解如何嵌入 SVG (矢量) 图形到网页中。</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>提示：</strong></span> 本文的目的并不是教你 SVG；仅仅是告诉你它是什么，以及如何在网页中添加它。</p> +</div> + +<h2 id="什么是矢量图形？">什么是矢量图形？</h2> + +<p>在网上，你会和两种类型的图片打交道 — 位图和矢量图:</p> + +<ul> + <li>位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li> + <li>矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 {{glossary("SVG")}} 格式可以让我们创造用于 Web 的精彩的矢量图形。</li> +</ul> + +<p>为了让你清楚的认识到两者的区别，我们来一个例子。你可以在我们的 Github 仓库中在线查看这个例子：<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — 它并排展示了两个看起来一致的图像，一个红色的五角星以及黑色的阴影。不同的是，左边的是 PNG，而右边的是 SVG 图像。</p> + +<p>当你放大网页的时候，区别就会变得明显起来 — 随着你的放大，PNG 图片变得像素化了，因为它存储是每个像素的颜色和位置信息 — 当它被放大时，每个像素就被放大以填满屏幕上更多的像素，所以图像就会开始变得马赛克感觉。矢量图像看起来仍然效果很好且清晰，因为无论它的尺寸如何，都使用算法来计算出图像的形状，仅仅是根据放大的倍数来调整算法中的值。</p> + +<p><img alt="Two star images, one raster and one vector. At their default size they look identical" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> + +<p><img alt="Two star images zoomed in. The raster one on the left starts to look pixellated, whereas the vector one still looks crisp." src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> + +<div class="note"> +<p><strong>注意</strong>: 上面的图片实际上都是 PNG 图片 —— 每个例子中左边的图片代表光栅图片，右边的星星代表矢量图。还有，访问 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> 示例来查看真正的例子！</p> +</div> + +<p>此外，矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。</p> + +<h2 id="SVG是什么？">SVG是什么？</h2> + +<p><a href="/zh-CN/docs/Web/SVG">SVG</a> 是用于描述矢量图像的{{glossary("XML")}}语言。 它基本上是像HTML一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。 SVG用于标记图形，而不是内容。 非常简单，你有一些元素来创建简单图形，如{{svgelement("circle")}} 和{{svgelement("rect")}}。更高级的SVG功能包括 {{svgelement("feColorMatrix")}}（使用变换矩阵转换颜色）{{svgelement("animate")}} （矢量图形的动画部分）和 {{svgelement("mask")}}（在图像顶部应用模板）</p> + +<p>作为一个简单的例子，以下代码创建一个圆和一个矩形：</p> + +<pre class="brush: html notranslate"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="black" /> + <circle cx="150" cy="100" r="90" fill="blue" /> +</svg></pre> + +<p>这将创建以下输出：(如果无法查看图片，<a href="https://mdn.mozillademos.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web$samples/What_is_SVG?revision=1467150">这里</a>)<img alt="" src="https://mdn.mozillademos.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web$samples/What_is_SVG?revision=1467150" style="height: 100px; width: 100px;"></p> + +<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>从上面的例子可以看出，SVG很容易手工编码。 是的，您可以在文本编辑器中手动编写简单的SVG，但是对于复杂的图像，这很快就开始变得非常困难。 为了创建SVG图像，大多数人使用矢量图形编辑器，如 <a href="https://inkscape.org/en/">Inkscape</a> 或 <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>。 这些软件包允许您使用各种图形工具创建各种插图，并创建照片的近似值（例如Inkscape的跟踪位图功能）。</p> + +<p>SVG除了迄今为止所描述的以外还有其他优点：</p> + +<ul> + <li>矢量图像中的文本仍然可访问（这也有利于 {{glossary("SEO")}})）。</li> + <li>SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素。</li> +</ul> + +<p>那么为什么会有人想使用光栅图形而不是SVG？ 其实 SVG 确实有一些缺点：</p> + +<ul> + <li>SVG非常容易变得复杂，这意味着文件大小会增加; 复杂的SVG也会在浏览器中占用很长的处理时间。</li> + <li>SVG可能比栅格图像更难创建，具体取决于您尝试创建哪种图像。</li> + <li>旧版浏览器不支持SVG，因此如果您需要在网站上支持旧版本的 IE，则可能不适合（SVG从IE9开始得到支持）。</li> +</ul> + +<p>由于上述原因，光栅图形更适合照片那样复杂精密的图像。</p> + +<div class="note"> +<p><strong>注意：</strong>在Inkscape中，将文件保存为纯SVG以节省空间。 另请参阅<a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">如何为Web准备SVG</a>。</p> +</div> + +<h2 id="将SVG添加到页面">将SVG添加到页面</h2> + +<p>在本节中，我们将介绍将SVG矢量图形添加到网页的不同方式。</p> + +<h3 id="快捷方式：htmlelementimg">快捷方式：{{htmlelement("img")}}</h3> + +<p>要通过 {{htmlelement("img")}}元素嵌入SVG，你只需要按照预期的方式在 src 属性中引用它。你将需要一个<code>height</code>或<code>width</code>属性（或者如果您的SVG没有固有的宽高比）。如果您还没使用过<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><img></span></font>元素，请阅读<a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML中的图片</a>教程 。</p> + +<pre class="brush: html notranslate"><img + src="equilateral.svg" + alt="triangle with all three sides equal" + height="87px" + width="100px" /> +</pre> + +<h4 id="优点">优点</h4> + +<ul> + <li>快速，熟悉的图像语法与<code>alt</code>属性中提供的内置文本等效。</li> + <li>可以通过在{{htmlelement("a")}}元素嵌套<code><img></code>，使图像轻松地成为超链接。</li> +</ul> + +<h4 id="缺点">缺点</h4> + +<ul> + <li>无法使用JavaScript操作图像。</li> + <li>如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。 （从SVG文件调用的外部样式表不起作用）</li> + <li>不能用CSS伪类来重设图像样式（如<code>:focus</code>）。</li> +</ul> + +<h3 id="疑难解答和跨浏览器支持">疑难解答和跨浏览器支持</h3> + +<p>对于不支持SVG（IE 8及更低版本，Android 2.3及更低版本）的浏览器，您可以从<code>src</code>属性引用PNG或JPG，并使用{{htmlattrxref("srcset", "img")}}属性 只有最近的浏览器才能识别）来引用SVG。 在这种情况下，仅支持浏览器将加载SVG - 较旧的浏览器将加载PNG：</p> + +<pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> +</pre> + +<p>您还可以使用SVG作为CSS背景图像，如下所示。 在下面的代码中，旧版浏览器会坚持他们理解的PNG，而较新的浏览器将加载SVG：</p> + +<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> +background<code>-image: url("image.svg"); +background-size: contain;</code></pre> + +<p>像上面描述的<code><img></code>方法一样，使用 CSS 背景图像插入SVG 意味着它不能被 JavaScript 操作，并且也受到相同的 CSS 限制。</p> + +<p>如果 SVG 根本没有显示，可能是因为你的服务器设置不正确。 如果是这个问题，<a href="/zh-CN/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">这篇文章</a>将告诉你正确方向。</p> + +<h3 id="如何在HTML中引入SVG代码">如何在HTML中引入SVG代码</h3> + +<p><br> + 你还可以在文本编辑器中打开SVG文件，复制SVG代码，并将其粘贴到HTML文档中 - 这有时称为将<strong>SVG内联</strong>或<strong>内联SVG</strong>。确保您的SVG代码在<code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code>标签中（不要在外面添加任何内容）。这是一个非常简单的示例，您可以粘贴到文档中：</p> + +<pre class="brush: html notranslate"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<h4 id="优点_2">优点</h4> + +<ul> + <li>将 SVG 内联减少 HTTP 请求，可以减少加载时间。</li> + <li>您可以为 SVG 元素分配<code>class</code>和<code>id</code>，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。 实际上，您可以使用任何 <a href="/zh-CN/docs/Web/SVG/Attribute#Presentation_attributes">SVG外观属性</a> 作为CSS属性。</li> + <li>内联SVG是唯一可以让您在SVG图像上使用CSS交互（如<code>:focus</code>）和CSS动画的方法（即使在常规样式表中）。</li> + <li>您可以通过将 SVG 标记包在{{htmlelement("a")}}元素中，使其成为超链接。</li> +</ul> + +<h4 id="缺点_2">缺点</h4> + +<ul> + <li>这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。</li> + <li>额外的 SVG 代码会增加HTML文件的大小。</li> + <li>浏览器不能像缓存普通图片一样缓存内联SVG。</li> + <li>您可能会在{{svgelement("foreignObject")}} 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。</li> +</ul> + +<ul> +</ul> + +<h3 id="如何使用_htmlelementiframe_嵌入SVG">如何使用 {{htmlelement("iframe")}} 嵌入SVG</h3> + +<p>您可以在浏览器中打开 SVG 图像，就像网页一样。 因此，使用<code><iframe></code>嵌入 SVG 文档就像我们在 <a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/其他嵌入技术">从对象到iframe - 其他嵌入技术</a> 中进行研究一样。</p> + +<p>这是一个快速回顾：</p> + +<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="Triangle with three unequal sides" /> +</iframe></pre> + +<p>这绝对不是最好的方法：</p> + +<h4 id="缺点_3">缺点</h4> + +<ul> + <li>如你所知， <code>iframe</code>有一个回退机制，如果浏览器不支持<code>iframe</code>，则只会显示回退。</li> + <li>此外，除非 SVG 和您当前的网页具有相同的 {{glossary('origin')}}，否则你不能在主页面上使用 JavaScript 来操纵 SVG。</li> +</ul> + +<h2 id="动手学习：使用SVG">动手学习：使用SVG</h2> + +<p>在这个动手学习部分中，我们希望你能够体验一下 SVG 的乐趣。 在下面的“input”部分，您将看到我们已经提供了一些样例来开始使用。 您还可以访问 <a href="/zh-CN/docs/Web/SVG/Element">SVG元素参考</a>，了解更多关于SVG可以使用的其他玩具的细节，也可以尝试一下。 这部分都是为了锻炼你的研究技巧，并且有一些乐趣。</p> + +<p>如果你卡住了，无法使你的代码工作，你可以随时使用 Reset 按钮进行重置。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><code><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 200px;"> + <svg width="100%" height="100%"> + <rect width="100%" height="100%" fill="red" /> + <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> + <polygon points="120,0 240,225 0,225" fill="green"/> + <text x="50" y="100" font-family="Verdana" font-size="55" + fill="white" stroke="black" stroke-width="2"> + Hello! + </text> + </svg> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution" disabled> +</div></code></pre> + +<pre class="brush: css notranslate"><code>html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</code></pre> + +<pre class="brush: js notranslate"><code>var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = ''; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="总结">总结</h2> + +<p>本文提供了一个矢量图形和 SVG 的快速浏览，让你了解他们的作用，以及如何在网页中引入 SVG。 它从来没有打算成为学习 SVG 的完整教程，只是一个指南，让你在网上遇到 SVG 时知道它是什么。 所以不要觉得你不是一个 SVG 专家而担心。如果你想了解更多关于它的工作原理，我们在下面列出了一些可能会帮助您的信息。</p> + +<p>在本模块的最后一篇文章中，我们将详细探索响应式图像，查看 HTML 可以让您的图像在不同设备上更好地适配。</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li> + <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li> + <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li> + <li><a href="http://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li> + <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a> （它不像光栅图形那么简单！）</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + + + +<h2 id="在这个模块中">在这个模块中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..78b73be90b --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,476 @@ +--- +title: HTML中的图片 +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">在一开始时，Web仅有文本，那真的是很无趣。幸运的是，没过多久网页上就能嵌入图片和其他有趣的内容了。虽然还有许多其他类型的多媒体，但是从地位比较低的{{htmlelement("img")}}元素开始是符合逻辑的，它常常被用来在网页中嵌入一张简单的图片。在这篇文章中，我们将看到怎样深入的使用它，包括基本的用{{htmlelement("figure")}}来添加说明文字，以及怎样把它和CSS背景图片链接起来。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>掌握基本的电脑知识，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>，基本的<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>知识，熟悉<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML基础</a></td> + </tr> + <tr> + <th scope="row">学习目标：</th> + <td>学习如何在 HTML 页面插入简单的图片，为图片添加简单的说明，以及 CSS 背景图片与 HTML 图片的关系。</td> + </tr> + </tbody> +</table> + +<h2 id="怎样将一幅图片放到网页上">怎样将一幅图片放到网页上?</h2> + +<p>我们可以用{{htmlelement("img")}} 元素来把图片放到网页上。它是一个空元素（它不需要包含文本内容或闭合标签），最少只需要一个 <code>src</code> （一般读作其全称 <em>source）</em>来使其生效。<code>src</code> 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对URL，就像 {{htmlelement("a")}} 元素的 <code>href</code> 属性一样。</p> + +<div class="note"> +<p><strong>注意：</strong>在继续之前，你应该阅读<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#URLs与路径(path)快速入门">快速入门URL和路径</a>来复习一下相对和绝对URL。</p> +</div> + +<p>举个例子来看，如果你有一幅文件名为 <code>dinosaur.jpg</code> 的图片，且它与你的 HTML 页面存放在相同路径下，那么你可以这样嵌入它：</p> + +<pre class="brush: html"><img src="dinosaur.jpg"></pre> + +<p>如果这张图片存储在和 HTML 页面同路径的 <code>images</code> 文件夹下（这也是Google推荐的做法，利于{{glossary("SEO")}}/索引），那么你可以采用如下形式：</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> + +<p>以此类推。</p> + +<div class="note"> +<p><strong>注意：</strong>搜索引擎也读取图像的文件名并把它们计入SEO。因此你应该给你的图片取一个描述性的文件名：<code>dinosaur.jpg</code> 比 <code>img835.png </code>要好。</p> +</div> + +<p>你也可以像下面这样使用绝对路径：</p> + +<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> + +<p>但是这种方式是不被推荐的，这样做只会使浏览器做更多的工作，例如重新通过 DNS 再去寻找 IP 地址。通常我们都会把图片和 HTML 放在同一个服务器上。</p> + +<div class="warning"> +<p><strong>警告：</strong>大多数图片是有版权的。<strong>不要</strong>在你的网页上使用一张图片，除非：</p> + +<ol> + <li>你是图片版权所有者</li> + <li>你有图片版权所有者明确的、书面上的使用授权</li> + <li>你有充分的证据证明这张图片是公共领域内的</li> +</ol> + +<p>侵犯版权是违法并且不道德的。此外，在得到授权之前<strong>永远不要</strong>把你的<code>src</code>属性指向其他人网站上的图片。这被称为"盗链（hotlinking）"。同样，盗取其他人的带宽也是违法的。而且这会降低你的页面的加载速度，而且图片可能会在不受你控制的情况下被移走或用别的令人尴尬的东西替换掉。</p> +</div> + +<p>我们上面的代码会展示如下的结果页面：</p> + +<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>注意：</strong>像{{htmlelement("img")}}和{{htmlelement("video")}}这样的元素有时被称之为<strong>替换元素</strong>，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>你可以在<a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">GitHub上的这个网页</a>看到这个例子的运行结果（也可以看到<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">源码</a>）。</p> +</div> + +<h3 id="备选文本">备选文本</h3> + +<p>下一个我们讨论的属性是 <code>alt</code> ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。例如，上面的例子可以做如下改进：</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth"></pre> + +<p>测试<code>alt</code> 属性最简单的方式就是故意拼错图片文件名，这样浏览器就无法找到该图片从而显示备选的文本。如果我们将上例的图片文件名改为 <code>dinosooooor.jpg</code>，浏览器就不能显示图片，而显示：</p> + +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>那么，为什么我们需要备选文本呢？它可以派上用场的原因有很多：</p> + +<ul> + <li>用户有视力障碍，通过<a href="https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8">屏幕阅读器</a>来浏览网页 。事实上，给图片一个备选的描述文本对大多数用户都是很有用的。</li> + <li>就像上面所说的，你也许会把图片的路径或文件名拼错。</li> + <li>浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，例如 <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>，这些浏览器会把图片替换为描述文本。</li> + <li>你会想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。</li> + <li>用户关闭的图片显示以减少数据的传输，这在手机上是十分普遍的，并且在一些国家带宽有限且昂贵。</li> +</ul> + +<p>你到底应该在 <code>alt</code> 里写点什么呢？这首先取决于为什么这张图片会在这儿，换句话说，如果这张图片没显示出来，会少了什么：</p> + +<ul> + <li><strong>装饰：</strong>如果图片只是用于装饰，而不是内容的一部分，可以写一个空的<code>alt=""</code> 。例如，屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在HTML文件里， {{anch("CSS background images")}}才应该用于插入装饰图片，但如果这种情况无法避免， <code>alt=""</code>会是最佳处理方案。</li> + <li><strong>内容：</strong>如果你的图片提供了重要的信息，就要在<code>alt</code>文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本（如果在主要文本中将所有的段落都重复两遍，对于没有失明的用户来说多烦啊！），如果在主要文本中已经对图片进行了充分的描述，写<code>alt=""</code>就好。</li> + <li><strong>链接：</strong>如果你把图片嵌套在{{htmlelement("a")}}标签里，来把图片变成链接，那你还必须<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#用清晰的链接措辞。">提供无障碍的链接文本</a>。在这种情况下，你可以写在同一个<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><a></span></font>元素里，或者写在图片的<code>alt</code>属性里，随你喜欢。</li> + <li><strong>文本：</strong>你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以<a href="/zh-CN/docs/Web/CSS/text-shadow">用CSS</a>来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到<code>alt</code>里。</li> +</ul> + +<p>本质上，关键在于在图片无法被看见时也提供一个可用的体验，这确保了所有人都不会错失一部分内容。尝试在浏览器中使图片不可见然后看看网页变成什么样了，你会很快意识到在图片无法显示时备选文本能帮上多大忙。</p> + +<div class="note"> +<p><strong>注意：</strong>想知道更多，可以看我们的<a href="https://developer.mozilla.org/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80#%E6%96%87%E6%9C%AC%E6%9B%BF%E4%BB%A3%E5%93%81">备选文本</a>指南</p> +</div> + +<h3 id="宽度和高度">宽度和高度</h3> + +<p>你可以用宽度和高度属性来指定你的图片的高度和宽度（你可以用多种方式找到你的图片的宽度和高度，例如在Mac上，你可以用 <kbd>Cmd</kbd> + <kbd>I</kbd> 来得到显示的图片文件的信息）回到我们的例子，你可以这样做：</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" + width="400" + height="341"></pre> + +<p>在正常的情况下，这不会对显示产生很大的影响， 但是如果图片没有显示（例如用户刚刚开始浏览网页，但是图片还没有加载完成），你会注意到浏览器会为要显示的图片留下一定的空间：</p> + +<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>这是一件好事情——这使得页面加载的更快速更流畅。</p> + +<p>然而，你不应该使用HTML属性来改变图片的大小。如果你把尺寸设定的太大，最终图片看起来会模糊；如果太小，会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的<a href="https://zh.wikipedia.org/wiki/%E9%95%B7%E5%AF%AC%E6%AF%94_(%E5%BD%B1%E5%83%8F)">宽高比</a>，图片可能看起来会扭曲。在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。</p> + +<div class="note"> +<p><strong>注意：</strong>如果你需要改变图片的尺寸，你应该使用<a href="/zh-CN/docs/Learn/CSS">CSS</a>而不是HTML。</p> +</div> + +<h3 id="Image_titles_图片标题">Image titles 图片标题</h3> + +<p>类似于<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#使用<title>添加支持信息">超链接</a>，你可以给图片增加<code>title</code>属性来提供需要更进一步的支持信息。在我们的例子中，可以这样做：</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" + width="400" + height="341" + title="A T-Rex on display in the Manchester University Museum"></pre> + +<p>这会给我们一个鼠标悬停提示，看起来就像链接标题：</p> + +<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> + +<p>图片标题并不必须要包含有意义的信息，通常来说，将这样的支持信息放到主要文本中而不是附着于图片会更好。不过，在有些环境中这样做更有用，比如当没有空间显示提示时，也就是在图片栏中。</p> + +<p>然而，这并不是推荐的——title有很多易访问性问题，主要是基于这样一个事实，即屏幕阅读器的支持是不可预测的，大多数浏览器都不会显示它，除非您在鼠标悬停时（例如：title无法访问键盘用户），如果你对更多的信息感兴趣，阅读<a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/" rel="noopener">The Trials and Tribulations of the Title Attribute</a> by Scott O'Hara.</p> + +<h3 id="动手练习：嵌入一张图片">动手练习：嵌入一张图片</h3> + +<p>好，轮到你了！在这个动手练习中， 我们希望你可以做一个简单的嵌入图片练习。 你有一个基本的 {{htmlelement("img")}} 标签; 我们希望你可以把下面这个 URL 所指向的图片嵌入到 HTML 中:</p> + +<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> + +<p>之前我们说过永远不要从其他服务器热链接图片，但这次只是出于学习目的，所以我们会允许你这么做一次。</p> + +<p>我们还希望你可以:</p> + +<ul> + <li>添加 <code>alt</code>文字，添加完成后，可以故意把 URL 写错，来检查 {{htmlelement("alt")}} 的效果。</li> + <li>设置图片正确的 <code>width</code> 和 <code>height</code> 属性（提示：宽 200px，高 171px），然后再将宽和高的值进行改变，看看会有什么影响.</li> + <li>在图片上设置 <code>title</code> 属性。</li> +</ul> + +<p>如果你遇到了错误，你可以按 reset 按钮来重置。如果你遇到了困难无法完成, 按下 Show solution 按钮来看一下答案。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="utf-8"> + <style> + body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; } + h2 { font-size: 16px; } + code, textarea { font-family: Consolas, Menlo, monospace; } + .output { min-height: 200px; } + .input { min-height: 100px; width: 95%; } + .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } + .controls { width: 96%; text-align: right; } + </style> + + </head> + <body> + <h2>实时输出</h2> + <div class="output"></div> + + <h2>可编辑代码</h2> + <p class="a11y-label">按 ESC 退出编辑区域，按 Tab 可插入制表符 <code>'\t'</code> </p> + <textarea id="code" class="input"></textarea> + + <div class="controls"> + <button id="btn-reset">重置</button> + <button id="btn-solution">显示答案</button> + </div> + <script> + const btnReset = document.getElementById('btn-reset'); + const btnSolution = document.getElementById('btn-solution'); + const blockOutput = document.querySelector('.output'); + const blockInput = document.querySelector('.input'); + const original = 'https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg'; + const answer = +`<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" + alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" + width="200" + height="171" + title="曼彻斯特大学博物馆展出的一只霸王龙的化石">`; + let userEntry = ""; + + init(); + btnReset.addEventListener('click', init); + + btnSolution.addEventListener('click', () => { + if (btnSolution.textContent === '显示答案') { + blockInput.value = + blockOutput.innerHTML = answer; + btnSolution.textContent = '隐藏答案'; + } else { + blockInput.value = + blockOutput.innerHTML = userEntry; + btnSolution.textContent = '显示答案'; + } + }); + + blockInput.addEventListener('keydown', (e) => { + switch (e.key) { + case 'Tab': + e.preventDefault(); + insertAtCursor('\t'); + break; + case "Escape": + blockInput.blur(); + break; + } + }); + + blockInput.addEventListener('keyup', () => { + userEntry = blockInput.value; + blockOutput.innerHTML = blockInput.value; + if (btnSolution.textContent === '隐藏答案') { + btnSolution.textContent = '显示答案'; + } + }); + + function init() { + userEntry = + blockOutput.innerHTML = + blockInput.value = original; + btnSolution.textContent = '显示答案'; + } + + function insertAtCursor(text) { + const scrollPos = blockInput.scrollTop; + const cursorPos = blockInput.selectionStart; + + const front = blockInput.value.substring(0, cursorPos); + const back = blockInput.value.substring( + blockInput.selectionEnd, blockInput.value.length); + + blockInput.value = front + text + back; + blockInput.selectionStart = + blockInput.selectionEnd = cursorPos + text.length; + blockInput.focus(); + blockInput.scrollTop = scrollPos; + } + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h2 id="通过为图片搭配说明文字的方式来解说图片">通过为图片搭配说明文字的方式来解说图片</h2> + +<p>说到说明文字, 这里有很多种方法让你添加一段说明文字来搭配图片。比如，没有人会阻止你这么做：</p> + +<pre class="brush: html"><div class="figure"> + <img src="/images/dinosaur_small.jpg" + alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" + width="400" + height="341"> + <p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p> +</div> +</pre> + +<p>这是可以的 ， {{htmlelement("p")}} 中包含了你需要的内容，以及方便使用 CSS 的一种很好的风格。但是这里有一个问题 ，从语义的角度上来讲，{{htmlelement("img")}} 和 {{htmlelement("p")}} 并没有什么联系，这会给使用屏幕阅读的人造成问题，比如当你有 50 张图片和其搭配的 50 段说明文字，那么一段说明文字是和哪张图片有关联的呢？</p> + +<p>有一个更好的做法是使用 HTML5 的 {{htmlelement("figure")}} 和 {{htmlelement("figcaption")}} 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。我们之前的例子可以重写为:</p> + +<pre><figure> + <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" + alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" + width="400" + height="341"> + <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption> +</figure> +</pre> + +<p>这个 {{htmlelement("figcaption")}} 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 {{htmlelement("figure")}} 元素的内容.</p> + +<div class="note"> +<p><strong>注意：</strong>从无障碍的角度来说，说明文字和 {{htmlattrxref('alt','img')}} 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 {{htmlattrxref('alt','img')}} 文字只有在图片无法显示时才这样。 所以，说明文字和 <code>alt</code> 的内容不应该一样，因为当图片无法显示时，它们会同时出现。尝试让你的图片不显示，看看效果如何。</p> +</div> + +<p>注意 {{htmlelement("figure")}} 里不一定要是一张图片，只要是一个这样的独立内容单元：</p> + +<ul> + <li>用简洁、易懂的方式表达意图。</li> + <li>可以置于页面线性流的某处。</li> + <li>为主要内容提供重要的补充说明。</li> +</ul> + +<p>{{htmlelement("figure")}} 可以是几张图片、一段代码、音视频、方程、表格或别的。</p> + +<h3 id="动手练习_创建一个_figure">动手练习: 创建一个 figure</h3> + +<p>在这个动手练习的部分中, 我们希望你把本章节中的上一个动手练习完成的代码拿过来，把它转换为一个 figure:</p> + +<ul> + <li>把之前的代码放入 {{htmlelement("figure")}} 元素中.</li> + <li>将 <code>title</code> 属性的文本复制出来, 删除 <code>title</code> 元素, 然后把文字放入 {{htmlelement("figcaption")}} 元素中，当然这个元素在 {{htmlelement("img")}} 的下面.</li> +</ul> + +<p>如果你遇到了错误，你可以按 reset 按钮来重置. 如果你遇到了困难无法完成, 按下 Show solution 按钮来看一下答案.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="utf-8"> + <style> + body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; } + h2 { font-size: 16px; } + code, textarea { font-family: Consolas, Menlo, monospace; } + .output { min-height: 200px; } + .input { min-height: 100px; width: 95%; } + .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } + .controls { width: 96%; text-align: right; } + </style> + + </head> + <body> + <h2>实时输出</h2> + <div class="output"></div> + + <h2>可编辑代码</h2> + <p class="a11y-label">按 ESC 退出编辑区域，按 Tab 可插入制表符 <code>'\t'</code> </p> + <textarea id="code" class="input"></textarea> + + <div class="controls"> + <button id="btn-reset">重置</button> + <button id="btn-solution">显示答案</button> + </div> + <script> + const btnReset = document.getElementById('btn-reset'); + const btnSolution = document.getElementById('btn-solution'); + const blockOutput = document.querySelector('.output'); + const blockInput = document.querySelector('.input'); + const original = +`<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" + alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" + width="200" + height="171">`; + const answer = +`<figure> + <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" + alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" + width="200" + height="171"> + <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption> +</figure>`; + let userEntry = ""; + + init(); + btnReset.addEventListener('click', init); + + btnSolution.addEventListener('click', () => { + if (btnSolution.textContent === '显示答案') { + blockInput.value = + blockOutput.innerHTML = answer; + btnSolution.textContent = '隐藏答案'; + } else { + blockInput.value = + blockOutput.innerHTML = userEntry; + btnSolution.textContent = '显示答案'; + } + }); + + blockInput.addEventListener('keydown', (e) => { + switch (e.key) { + case 'Tab': + e.preventDefault(); + insertAtCursor('\t'); + break; + case "Escape": + blockInput.blur(); + break; + } + }); + + blockInput.addEventListener('keyup', () => { + userEntry = blockInput.value; + blockOutput.innerHTML = blockInput.value; + if (btnSolution.textContent === '隐藏答案') { + btnSolution.textContent = '显示答案'; + } + }); + + function init() { + userEntry = + blockOutput.innerHTML = + blockInput.value = original; + btnSolution.textContent = '显示答案'; + } + + function insertAtCursor(text) { + const scrollPos = blockInput.scrollTop; + const cursorPos = blockInput.selectionStart; + + const front = blockInput.value.substring(0, cursorPos); + const back = blockInput.value.substring( + blockInput.selectionEnd, blockInput.value.length); + + blockInput.value = front + text + back; + blockInput.selectionStart = + blockInput.selectionEnd = cursorPos + text.length; + blockInput.focus(); + blockInput.scrollTop = scrollPos; + } + </script> + </body> +</html> +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="CSS_背景图片">CSS 背景图片</h2> + +<p>你也可以使用 CSS 把图片嵌入网站中（JavaScript也行，不过那是另外一个故事了），这个 CSS 属性 {{cssxref("background-image")}} 和另其他 <code>background-*</code> 属性是用来放置背景图片的。比如，为页面中的所有段落设置一个背景图片，你可以这样做：</p> + +<pre class="brush: css">p { + background-image: url("images/dinosaur.jpg"); +}</pre> + +<p>按理说，这种做法相对于 HTML 中插入图片的做法，可以更好地控制图片和设置图片的位置，那么为什么我们还要使用 HTML 图片呢？如上所述，CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西，来提升视觉效果，那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义，它们不能有任何备选文本，也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。</p> + +<p>总而言之，如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片。</p> + +<div class="note"> +<p><strong>提示：</strong>你可以在 <a href="/zh-CN/docs/Learn/CSS">CSS</a> 模块里学到更多关于<a href="/zh-CN/docs/Learn/CSS/Styling_boxes/背景">CSS背景图片</a>的东西。</p> +</div> + +<h2 id="总结">总结</h2> + +<p>目前到此为止，我们详细介绍了图片和说明文字，在下篇文章中，我们将进一步看看如何使用 HTML 在网页上嵌入音频和视频。</p> + +<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="本章目录">本章目录</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">从 <object> 到 <iframe>：其它嵌入技术</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">为网页添加向量图形</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla 宣传页面</a></li> +</ul> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..03297c82fc --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,60 @@ +--- +title: 多媒体与嵌入 +slug: Learn/HTML/Multimedia_and_embedding +tags: + - 图像 + - 多媒体 +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">在这份教程中，到目前为止我们已经看到了许多的文字了。真的很多文字。但是网页除了文本之外什么都没有，真的非常无聊，所以，让我们开始看看怎样让网页动起来。用更多有趣的内容！本模块要探索怎样用HTML来让你的网页包含多媒体，包括可以包含图像的不同方式，以及怎样嵌入视频，甚至是整个其他的网页。</p> + +<h2 id="预备知识">预备知识</h2> + +<p>在你开始本模块之前，你应该已经拥有了关于HTML基础的合理知识，就是之前在<a href="https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML">HTML介绍</a>中所述。如果你还没有看过那个模块（或者类似的），先去看看，然后再回来吧！</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>提示</strong></span>: 如果你在电脑/平板电脑/其他设备上不能创建你自己的代码文件，你可以尝试在在线代码编辑网站例如<a href="https://jsbin.com/">JSBin</a>或者<a href="https://thimble.mozilla.org/">Thimble</a>来运行（大部分的）代码示例。</p> +</div> + +<h2 id="指南">指南</h2> + +<p>本模块包含以下的文章，它们将会让你了解所有在网页上关于嵌入多媒体的基础方面。</p> + +<dl> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML中的图片</a></dt> + <dd>还有其他类型的多媒体要考虑，但是从低调的 {{htmlelement("img")}} 元素开始是符合逻辑的，它常常被用来在网页中嵌入一个简单的图片。在这篇文章中，我们要看看怎样更深入的使用它，包括基础，用标题注解 {{htmlelement("figure")}}，以及怎样把它关联到CSS背景图片。</dd> + <dt><a href="https://developer.mozilla.org/zh_CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a></dt> + <dd>接下来，我们将看看怎样在我们的页面上用HTML5的 {{htmlelement("video")}} 和{{htmlelement("audio")}}元素来嵌入视频和音频；包括基础，提供向不同的浏览器提供不同文件格式的访问方式，增加标题和副标题，以及增加对过时的浏览器的兼容。</dd> + <dt><a href="/zh_CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">从 <object> 到 <iframe> — 其他嵌入技术</a></dt> + <dd>在这一节，我们将来了解一些另辟蹊径的内容，看一组元素，它们可以让你在页面中嵌入许多不同类型的内容： {{htmlelement("iframe")}}, {{htmlelement("embed")}} 和 {{htmlelement("object")}} 元素。 <code><iframe> 用来嵌入其他网页，而另外两者可以帮助你嵌入</code> PDF, SVG, 甚至是 Flash — 一种逐渐退出历史舞台的技术，不过也许你还是能时不时的看到它。</dd> + <dt><a href="/zh_CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">在页面中添加矢量图像</a></dt> + <dd>矢量图像在一些特定场景中非常有用。不同于常见的格式，比如PNG/JPG, 它们不会在放大的时候变得扭曲或者显示出像素格——它们可以在缩放时保持光滑。本文将为你介绍什么是矢量图像，以及如何在网页中添加流行的 {{glossary("SVG")}} 格式图像。</dd> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></dt> + <dd>现在有许多不同的设备类型能够浏览网络 - 从手机到台式电脑 - 在现代网络世界中掌握的一个基本概念就是响应式设计。这是指创建可以自动更改其功能以适应不同屏幕尺寸，分辨率等的网页。稍后将在CSS模块中详细介绍这一点，但是现在我们将看看HTML可用于创建响应式图像的工具，包括{{htmlelement("picture")}}元素。</dd> +</dl> + +<h2 id="评估">评估</h2> + +<p>以下评估将测试您对上述指南中涵盖的HTML基础知识的理解：</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla启动页面</a></dt> + <dd>在这个评估中，我们将测试您对本模块文章中讨论的一些技巧的了解，让您将一些图像和视频添加到一个关于Mozilla的时髦的页面！</dd> +</dl> + +<h2 id="参见">参见</h2> + +<dl> + <dt><a href="/zh-CN/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">在图像的顶部添加一个点阵图</a></dt> + <dd>图像映射提供了一种机制，使图像的不同部分链接到不同的地方（想想地图，链接到有关您点击的每个不同国家的更多信息。）这种技术有时可能是有用的。</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">网络素质基础2</a></dt> + <dd> + <p>一个优秀的Mozilla基础课程，探讨并测试了多媒体和嵌入模块中谈到的一些技巧。 深入了解撰写网页的基础知识，设计可访问性，共享资源，使用在线媒体和开放工作。</p> + </dd> +</dl> + +<div id="gtx-trans" style="position: absolute; left: 215px; top: 1116px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..67df99dae4 --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,114 @@ +--- +title: Mozilla醒目页面 +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +tags: + - 初学者 + - 响应式 + - 图像 + - 多媒体 + - 嵌入 + - 视频 + - 评估 +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">在这个测验中，我们将测试你对于本模块文章所讨论的技术的掌握程度，让你将一些有关于 Mozilla 的图片和视频添加到一个漂亮的页面上！</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习本章节的要求:</th> + <td>在开始这个测验之前，你应该了解了 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入</a> 模块的其他文章.</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>测试这些知识的掌握程度：在页面中嵌入图片和视频，框架，和 HTML 响应式图片技术。</td> + </tr> + </tbody> +</table> + +<h2 id="起点">起点</h2> + +<p>为了开始这次测验，你需要从 <a href="https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start">mdn-splash-page-start</a> 这个GitHub目录下下载HTML和图片。保存在你本地设备上。</p> + +<p>访问 <a href="https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> 文件夹中不同的图片文件，然后用同样的方法将它们下载到本地。现在，你需要将这些图片文件保存到不同的目录下，因为在这些图片准备好被使用之前，你需要使用图像编辑器来处理这些图片.</p> + +<div class="note"> +<p><strong>注意</strong>: 这个示例的 HTML 文件包含一些页面的 CSS 样式。你不需要去碰 CSS 的内容，而只是 {{htmlelement("body")}} 元素中的 HTML 部分，只要你插入了正确的标记，样式就会正确显示。</p> +</div> + +<h2 id="项目概要">项目概要</h2> + +<p>在这个测验中，我们为你呈现了一个接近完成了的 Mozilla醒目页面，旨在说明一些关于Mozilla的有趣的事情，以及提供一些更一步的资源链接。但目前还没有添加任何视频或图片，这份工作就交给你了！你需要添加一些图片、视频等多媒体元素，好让页面变得更漂亮和更有意义。下一小节详细描述了你需要做的工作：</p> + +<h3 id="准备图片">准备图片</h3> + +<p>使用你最爱的图片编辑器，创建下面几张图片的 400px 宽的版本和 120px 宽的版本：</p> + +<ul> + <li><code>firefox_logo-only_RGB.png</code></li> + <li><code>firefox-addons.jpg</code></li> + <li><code>mozilla-dinosaur-head.png</code></li> +</ul> + +<p>给它们取个有意义的名字，例如<code>firefoxlogo400.png</code> 和<code>firefoxlogo120.png</code>。</p> + +<p>这些图片将和 <code>mdn.svg</code> 一起作为<code>further-info</code>区内资源链接的图标和网站页眉的火狐图标。将这些图片副本保存在与 <code>index.html</code>文件的同一个目录下。 </p> + +<p>接着，创建一个 1200px 宽的 <code>red-panda.jpg</code>风景图片版本，和一个 600px 宽的肖像版本，用来显示更近镜头下的熊猫. 同样地，为它们取一个你可以轻松分辨出来的名字. 将它们的副本保存在与 <code>index.html</code>文件相同的目录下。</p> + +<div class="note"> +<p><strong>注意</strong>：你应该在看起来还行的前提下尽量优化 JPG 和 PNG 图片的大小，<a href="https://tinypng.com/">tinypng.com</a>为此提供了很好的服务。</p> +</div> + +<h3 id="为_header_添加一个图标">为 header 添加一个图标</h3> + +<p>在 {{htmlelement("header")}} 元素中添加一个 {{htmlelement("img")}} 元素，嵌入一个小尺寸版本的火狐图标。</p> + +<h3 id="为主_article_添加一个视频">为主 article 添加一个视频</h3> + +<p>就在 {{htmlelement("article")}} 元素中（开放标签下面），嵌入一个 Bilibili 视频（<a href="https://www.bilibili.com/video/BV1rs411d7hC?p=2">https://www.bilibili.com/video/BV1rs411d7hC?p=2</a>），使用 Bilibili 生成嵌入代码。视频的宽度应该是 400px。</p> + +<h3 id="为_further_info_的链接添加响应式图片">为 further info 的链接添加响应式图片</h3> + +<p>在<code>further-info</code>类的 {{htmlelement("div")}}里你会看到四个 {{htmlelement("a")}} 元素，每个都指向一个有趣的、关于 Mozilla 的页面。为了完成这一部分，你需要在每个{{htmlelement("a")}} 元素里插入一个 {{htmlelement("img")}} 元素，需要包含合适的 {{htmlattrxref("src", "img")}}，{{htmlattrxref("alt", "img")}}，{{htmlattrxref("srcset", "img")}} 和 {{htmlattrxref("sizes", "img")}} 属性。</p> + +<p>我们希望每张图片（除了某个本身就是响应式的）在浏览器的视口的宽度小于等于480px时使用的120px宽的图片，其他情况下选择400px 的版本.</p> + +<p>确保正确的链接匹配了正确的图片！</p> + +<div class="note"> +<p><strong>注意</strong>: 为了正确的测试 <code>srcset</code>/<code>sizes</code> 示例，你需要把你的网站上传到服务器（使用 <a href="/zh-CN/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> 是一个简单免费的方法），访问服务器上的网页，你就可以使用浏览器开发者工具来测试它们是否正常工作，如 <a href="/zh-CN/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">响应式图片：有用的开发工具</a>中所说</p> +</div> + +<h3 id="一张小熊猫的艺术照">一张小熊猫的艺术照</h3> + +<p>在<code>red-panda</code>类的{{htmlelement("div")}} 中，我们希望插入一个{{htmlelement("picture")}}元素，在视口宽度小于等于600px时使用那张比较小的纵向的熊猫图片，在其他情况下则使用大的横向的图片。</p> + +<h2 id="示例">示例</h2> + +<p>下面的截图展示了在正确标记后，醒目页面在宽屏和窄屏下的样子。（可 <a class="external external-icon" href="https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/mdn-splash-page-finished/">在线查看</a>）</p> + +<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p> + +<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p> + +<h2 id="评估">评估</h2> + +<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">discussion thread about this exercise</a>或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p> + +<h2 id="在这个模块中">在这个模块中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML中的图片</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">音视频内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies" rel="nofollow">从<object> 到<iframe> — 其他嵌入技术</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">给网页添加矢量图</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla醒目页面</a></li> +</ul> + +<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..4a5ab10f21 --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,259 @@ +--- +title: 响应式图片 +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<p class="summary">在这篇文章中我们将学习关于响应式图片——一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片，并且看看HTML提供了什么工具来帮助实现它们。响应式图片仅仅只是响应式web设计的一部分（奠定了响应式web设计的良好基础），我们会在未来的<a href="/en-US/docs/Learn/CSS">CSS topic</a>模块中学到更多关于这一主题的知识。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">学习本章节的前提:</th> + <td>你应该已经了解了 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML的基础</a> 以及如何 <a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">在网站上添加静态图片</a>.</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>学习如何使用 {{htmlattrxref("srcset", "img")}} 以及 {{htmlelement("picture")}} 元素，来实现网页中的响应式图片处理方法。</td> + </tr> + </tbody> +</table> + +<h2 id="为什么要用自适应的图片？">为什么要用自适应的图片？</h2> + +<p>让我们来看一个典型的场景。一个典型的网站可能会有一张页首图片，这让访问者看起来感到愉快。图片下面可能会添加一些内容图像。页首图像的跨度可能是整个页首的宽度。而内容图像会适应内容纵列的某处。此处有个简单的例子：</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>这个网页在宽屏设备上表现良好，例如笔记本电脑或台式机（你可以<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">查看在线演示</a>并且在GitHub上查看<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">源代码</a>）。我们不会在这一节课中讨论CSS，除了下面提到的那些：</p> + +<ul> + <li>正文内容被设置的最大宽度为1200像素——在高于该宽度的可视窗口中，正文保持在1200像素，并将其本身置于可用空间的中间。在该宽度以下的可视窗口中，正文将保持在可视窗口宽度的100%。</li> + <li>页眉图像被设置为使其中心始终位于页眉的中心，无论页眉的宽度是多少。所以如果网站被显示在窄屏上，图片中心的重要细节（里面的人）仍然可以看到，而两边超出的部分都消失了。它的高度是200px。</li> + <li>内容图片已经被设置为如果body元素比图像更小，图像就开始缩小，这样图像总是在正文里，而不是溢出正文。</li> +</ul> + +<p>然而，当你尝试在一个狭小的屏幕设备上查看本页面时，问题就会产生。网页的页眉看起来还可以，但是页眉这张图片占据了屏幕的一大部分的高度，在这个尺寸下，你很难看到在第一张图片内容里的人。</p> + +<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>一个改进的方法是，当网站在狭窄的屏幕上观看时，显示一幅图片的包含了重要细节的裁剪版本，第二个被裁剪的图片会在像平板电脑这样的中等宽度的屏幕设备上显示，这就是众所周知的<strong>美术设计问题（art direction problem）</strong>。</p> + +<p>另外，如果是在小屏手机屏幕上显示网页，那么没有必要在网页上嵌入这样大的图片。这被称之为<strong>分辨率切换问题（resolution switching problem）</strong>。位图有固定数量的像素宽，固定数量的像素高，与 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">矢量图</a> 外观相同，但本质不同。如果显示尺寸大于原始尺寸，一张自身较小的位图看起来会有颗粒感（矢量图则不会）。</p> + +<p>相反，没有必要在比图片实际尺寸小的屏幕上显示一张大图，这样做会浪费带宽——当可以在设备上使用小图像时，手机用户尤其不愿意因为下载用于桌面的大图像而浪费带宽。理想的情况是当访问网站时依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。</p> + +<p>让事情变得复杂的是，有些设备有很高的分辨率，为了显示的更出色，可能需要超出你预料的更大的图像。这从本质上是一样的问题，但在环境上有一些不同。</p> + +<p>你可能会认为矢量图形能解决这些问题，在某种程度上是这样的——它们无论是文件大小还是比例都合适，无论在哪里你都应该尽可能的使用它们。然而，它们并不适合所有的图片类型，虽然在简单图形、图案、界面元素等方面较好，但如果是有大量的细节的照片，创建矢量图像会变得非常复杂。像JPEG格式这样的位图会更适合上面例子中的图像。</p> + +<p>当web第一次出现时，这样的问题并不存在，在上世纪90年代中期，仅仅可以通过笔记本电脑和台式机来浏览web页面，所以浏览器开发者和规范制定者甚至没有想到要实现这种解决方式（响应式开发）。最近应用的响应式图像技术，通过让浏览器提供多个图像文件来解决上述问题，比如使用相同显示效果的图片但包含多个不同的分辨率（分辨率切换），或者使用不同的图片以适应不同的空间分配（美术设计）。</p> + +<div class="note"> +<p><strong>注意</strong>: 在这篇文章中讨论的新特性 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — 都已经被新版本的现代浏览器和移动浏览器所支持（包括Edge，而不是IE）。</p> +</div> + +<h2 id="怎样创建自适应的图片">怎样创建自适应的图片?</h2> + +<p>在这一部分中，我们将看看上面说明的两个问题，并且展示怎样用HTML的响应式图片来解决这些问题。需要注意的是，如以上示例所示，在本节中我们将专注于HTML的 {{htmlelement("img")}}，但网站页眉的图片仅是装饰性的，实际上应该要用CSS的背景图片来实现。<a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS是比HTML更好的响应式设计的工具</a>，我们会在未来的CSS模块中讨论。</p> + +<h3 id="分辨率切换：不同的尺寸">分辨率切换：不同的尺寸</h3> + +<p>那么，我们想要用分辨率切换解决什么问题呢？我们想要显示相同的图片内容，仅仅依据设备来显示更大或更小的图片——这是我们在示例中使用第二个内容图像的情况。标准的{{htmlelement("img")}}元素传统上仅仅让你给浏览器指定唯一的资源文件。</p> + +<pre class="brush: html notranslate"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> + +<p>我们可以使用两个新的属性——{{htmlattrxref("srcset", "img")}} 和 {{htmlattrxref("sizes", "img")}}——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。你可以看到 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> 的例子，也可以在GitHub上看到<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">source code</a>：</p> + +<pre class="brush: html notranslate"><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"></pre> + +<p><code>srcset</code>和<code>sizes</code>属性看起来很复杂，但是如果你按照上图所示进行格式化，那么他们并不是很难理解，每一行有不同的属性值。每个值都包含逗号分隔的列表。列表的每一部分由三个子部分组成。让我们来看看现在的每一个内容：</p> + +<p><strong>srcset</strong>定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：</p> + +<ol> + <li>一个<strong>文件名 </strong>(<code>elva-fairy-480w.jpg</code>.)</li> + <li>一个空格</li> + <li><strong>图像的固有宽度</strong>（以像素为单位）（480w）——注意到这里使用<code>w</code>单位，而不是你预计的<code>px</code>。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在Mac上，你可以在Finder上选择这个图像，然后按 <kbd>Cmd</kbd> + <kbd>I</kbd> 来显示信息）。</li> +</ol> + +<p><code><strong>sizes</strong></code>定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：</p> + +<ol> + <li>一个<strong>媒体条件</strong>（<code>(max-width:480px)</code>）——你会在 <a href="/en-US/docs/Learn/CSS">CSS topic</a>中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是480像素或更少”。</li> + <li>一个空格</li> + <li>当媒体条件为真时，图像将填充的<strong>槽的宽度</strong>（<code>440px</code>）</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 对于槽的宽度，你也许会提供一个固定值 (<code>px</code>, <code>em</code>) 或者是一个相对于视口的长度(<code>vw</code>)，但不是百分比。你也许已经注意到最后一个槽的宽度是没有媒体条件的，它是默认的，当没有任何一个媒体条件为真时，它就会生效。 当浏览器成功匹配第一个媒体条件的时候，剩下所有的东西都会被忽略，所以要注意媒体条件的顺序。</p> +</div> + +<p>所以，有了这些属性，浏览器会：</p> + +<ol> + <li>查看设备宽度</li> + <li>检查<code>sizes</code>列表中哪个媒体条件是第一个为真</li> + <li>查看给予该媒体查询的槽大小</li> + <li>加载<code>srcset</code>列表中引用的最接近所选的槽大小的图像</li> +</ol> + +<p>就是这样！所以在这里，如果支持浏览器以视窗宽度为480px来加载页面，那么<code>(max-width: 480px)</code>的媒体条件为真，因此<code>440px</code>的槽会被选择，所以<code>elva-fairy-480w.jpg</code>将加载，因为它的的固定宽度（<code>480w</code>）最接近于<code>440px</code>。800px的照片大小为128KB而480px版本仅有63KB大小—节省了65KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。</p> + +<p>老旧的浏览器不支持这些特性，它会忽略这些特征。并继续正常加载 {{htmlattrxref("src", "img")}}属性引用的图像文件。</p> + +<div class="note"> +<p><strong>注意</strong>: 在 HTML 文件中的 {{htmlelement("head")}} 标签里， 你将会找到这一行代码 <code><meta name="viewport" content="width=device-width"></code>: 这行代码会强制地让手机浏览器采用它们真实可视窗口的宽度来加载网页（有些手机浏览器会提供不真实的可视窗口宽度, 然后加载比浏览器真实可视窗口的宽度大的宽度的网页，然后再缩小加载的页面，这样的做法对响应式图片或其他设计，没有任何帮助。我们会在未来的模块教给你更多关于这方面的知识）。</p> +</div> + +<h3 id="一些有用的开发工具">一些有用的开发工具</h3> + +<p>这里有一些在浏览器中的非常实用的<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">开发者工具</a>用来帮助制定重要的槽宽度，以及其他你可能会用到的场景。当我在设置槽宽度的时候，我先加载了示例中的无响应的版本（<code>not-responsive.html</code>），然后进入 <a href="/en-US/docs/Tools/Responsive_Design_Mode">响应设计视图</a> （<em>Tools > Web Developer > Responsive Design View），</em>这个工具允许你在不同设备的屏幕宽度场景下查看网页的布局。</p> + +<p>我设置我的视图宽度为 320px，然后再改为 480px；每一次宽度的改变我就进入 <a href="/en-US/docs/Tools/Page_Inspector">DOM 检查 </a>，点击我们感兴趣的 {{htmlelement("img")}} 元素，然后在显示屏右侧的 Box Model 视图选项卡中查看它的大小。 你应该会看到，这种无响应式的做法会让你的图片在不同屏幕宽度下有着固定的宽度。</p> + +<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p> + +<p>接着, 你可以检查 <code>srcset</code> 是否正常工作，你需要将视图的宽度设置为你想要的，(比如，把宽度设置的比较小，让页面看起来比较狭窄），打开网络检查（<em>Tools > Web Developer > Network），</em>然后重新加载页面。网络检查工具会给你一个列表，里面的文件都是已经被下载来构造网页的。然后你可以在这里看到哪个图像文件被下载了。</p> + +<div class="note"> +<p><strong>注意</strong>: 在 Chrome 中测试时，通过如下方式禁用缓存：打开 DevTools ，并选中 Settings > Preferences > Network下Disable cache的选择框。否则，Chrome 会优先选择缓存图片而不是恰好适配的那个。</p> +</div> + +<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> + +<h3 id="分辨率切换_相同的尺寸_不同的分辨率">分辨率切换: 相同的尺寸, 不同的分辨率</h3> + +<p>如果你支持多种分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过<code>srcset</code>和x语法结合——一种更简单的语法——而不用<code>sizes</code>，来选择适当分辨率的图片。你可以看一个例子 <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a>（或 <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>）：</p> + +<pre class="brush: html notranslate"><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"> +</pre> + +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">在这个例子中，下面的CSS会应用在图片上，所以它的宽度在屏幕上是320像素（也称作CSS像素）：</p> + +<pre class="brush: css notranslate">img { + width: 320px; +}</pre> + +<p>在这种情况下，<code>sizes</code>并不需要——浏览器只是计算出正在显示的显示器的分辨率，然后提供<code>srcset</code>引用的最适合的图像。因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，<code>elva-fairy-320w.jpg</code>会被加载（1x 是默认值，所以你不需要写出来）。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，<code>elva-fairy-640w.jpg</code> 会被加载。640px的图像大小为93KB，320px的图像的大小仅仅有39KB。</p> + +<h3 id="美术设计">美术设计</h3> + +<p>回顾一下，<strong>美术设计问题</strong>涉及要更改显示的图像以适应不同的图像显示尺寸。例如，如果在桌面浏览器上的一个网站上显示一张大的、横向的照片，照片中央有个人，然后当在移动端浏览器上浏览这个网站时，照片会缩小，这时照片上的人会变得非常小，看起来会很糟糕。这种情况可能在移动端显示一个更小的肖像图会更好，这样人物的大小看起来更合适。{{htmlelement("picture")}}元素允许我们这样实现。</p> + +<p>回到我们最初的例子 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> ，我们有一张图片需要美术设计：</p> + +<pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> + +<p>让我们改用 {{htmlelement("picture")}}！就像<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code>和<code><audio></code></a>，{{htmlelement("picture")}}素包含了一些{{htmlelement("source")}}元素，它使浏览器在不同资源间做出选择，紧跟着的是最重要的{{htmlelement("img")}}元素。<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> 的代码如下：</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<ul> + <li> <code><source></code>元素包含一个<code>media</code>属性，这一属性包含一个媒体条件——就像第一个<code>srcset</code>例子，这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在这种情况下，如果视窗的宽度为799px或更少，第一个<code><source></code>元素的图片就会显示。如果视窗的宽度是800px或更大，就显示第二张图片。</li> + <li><code>srcset</code>属性包含要显示图片的路径。请注意，正如我们在<code><img></code>上面看到的那样，<code><source></code>可以使用引用多个图像的<code>srcset</code>属性，还有<code>sizes</code>属性。所以你可以通过一个 <code><picture></code>元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。实际上，你可能不想经常做这样的事情。</li> + <li>在任何情况下，你都必须在 <code></picture></code>之前正确提供一个<code><img></code>元素以及它的<code>src</code>和<code>alt</code>属性，否则不会有图片显示。当媒体条件都不返回真的时候（你可以在这个例子中删除第二个<code><source></code> 元素），它会提供图片；如果浏览器不支持 <code><picture></code>元素时，它可以作为后备方案。</li> +</ul> + +<p>这样的代码允许我们在宽屏和窄屏上都能显示合适的图片，像下面展示的一样：</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p><strong>注意</strong>: 你应该仅仅当在美术设计场景下使用media属性；当你使用media时，不要在sizes属性中也提供媒体条件。</p> +</div> + +<h3 id="为什么我们不能使用_CSS_或_JavaScript_来做到这一效果">为什么我们不能使用 CSS 或 JavaScript 来做到这一效果?</h3> + +<p>当浏览器开始加载一个页面, 它会在主解析器开始加载和解析页面的 CSS 和 JavaScript 之前先下载 (预加载) 任意的图片。这是一个非常有用的技巧，平均下来减少了页面加载时间的20%。但是, 这对响应式图片一点帮助都没有, 所以需要类似 <code>srcset</code>的实现方法。因为你不能先加载好 {{htmlelement("img")}} 元素后, 再用 JavaScript 检测可视窗口的宽度，如果觉得大小不合适，再动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你又加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。</p> + +<ul> +</ul> + +<h3 id="大胆的使用现代图像格式">大胆的使用现代图像格式</h3> + +<p>有很多令人激动的新图像格式（例如WebP和JPEG-2000）可以在有高质量的同时有较低的文件大小。然而，浏览器对其的支持参差不齐。</p> + +<p><code><picture></code>让我们能继续满足老式浏览器的需要。你可以在<code>type</code>属性中提供MIME类型，这样浏览器就能立即拒绝其不支持的文件类型：</p> + +<pre class="brush: html notranslate"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> +</picture> +</pre> + +<ul> + <li>不要使用<code>media</code>属性，除非你也需要美术设计。</li> + <li>在<code><source></code> 元素中，你只可以引用在<code>type</code>中声明的文件类型。</li> + <li>像之前一样，如果必要，你可以在<code>srcset</code>和<code>sizes</code>中使用逗号分割的列表。</li> +</ul> + +<h2 id="主动学习：实现属于你的响应式图像">主动学习：实现属于你的响应式图像</h2> + +<p>在这次主动学习中，我们希望你变得勇敢和自力更生……尽量的。我们希望你通过使用<picture>来实现自己美术设计上的宽/窄屏显示适配，以及使用 <code>srcset</code>切换不同的分辨率。</p> + +<ol> + <li>写一些简单 HTML 来包含你的代码（如果你喜欢，也可以使用 <code>not-responsive.html</code> 作为起点）。</li> + <li>找一张漂亮的宽屏风景图像，其中需要包含一些细节。使用图像编辑器创建一个网页大小的版本。然后裁剪一下，显示一个更小的部分，其中包含放大的细节, 然后创建第二张图片 (差不多 480px 宽度比较好。)</li> + <li>使用 <code><picture></code> 元素来实现艺术图片切换器！</li> + <li>创建不同大小的多张图片, 每个图片的图像都是一样的。</li> + <li>使用 <code>srcset</code>/<code>size</code> 来创建一个分辨率切换器示例, 可以在不同的分辨率的情况下，提供相同尺寸的图像, 或者在不同的视图大小的情况下，提供不同尺寸大小的图像。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 使用浏览器开发工具来帮助你工作时可以得到你需要的视图大小，就像上文提到的。</p> +</div> + +<h2 id="小结">小结</h2> + +<p>这章节中充满了响应式图像 — 我们希望你学习新技术的过程是享受的。概括来说，有两个不同的问题，文章中我们一直在讨论：</p> + +<ul> + <li><strong>美术设计</strong>：当你想为不同布局提供不同剪裁的图片——比如在桌面布局上显示完整的、横向图片，而在手机布局上显示一张剪裁过的、突出重点的纵向图片，可以用 {{htmlelement("picture")}} 元素来实现。</li> + <li><strong>分辨率切换</strong>：当你想要为窄屏提供更小的图片时，因为小屏幕不需要像桌面端显示那么大的图片；以及你想为高/低分辨率屏幕提供不同分辨率的图片时，都可以通过 <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images)、 {{htmlattrxref("srcset", "img")}} 以及 {{htmlattrxref("sizes", "img")}} 属性来实现。</li> +</ul> + +<p>此时整个<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入</a> 模块接近尾声！在继续下一个模块之前，你现在唯一要做的就是尝试我们的多媒体评估，看看你做得怎样。玩的开心。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby对响应式图片的出色介绍</a></li> + <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">R响应式图片：如果你只是在改变分辨率，就用srcset</a> — 包含了更多关于浏览器如何选择显示图片的解释</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="本章目录">本章目录</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">从 <code><object></code> 到 <code><iframe></code>：其它嵌入技术</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">为网页添加向量图形</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla 宣传页面</a></li> +</ul> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..8fa670c5a3 --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,341 @@ +--- +title: 视频和音频内容 +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - 多媒体 + - 字幕 + - 指南 + - 文章 + - 新手 + - 视频 + - 音频 +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">现在我们可以轻松的为一个网页添加简单的图像，下一步我们开始为 HTML 文档添加音频和视频播放器。在这篇文章中，我们会使用 {{htmlelement("video")}} 和 {{htmlelement("audio")}} 元素来做到这件事；然后我们还会看看如何为你的视频添加字幕。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>基础计算机能力，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基础的软件安装</a>，基础的<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>知识，基础的 HTML 知识 (阅读 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a> ) 以及 <a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a>。</td> + </tr> + <tr> + <th scope="row">学习目标：</th> + <td>学习如何在一个网页中嵌入音频和视频，以及如何为视频添加字幕。</td> + </tr> + </tbody> +</table> + +<h2 id="web_中的音频和视频">web 中的音频和视频</h2> + +<p>web 开发者们一直以来想在 Web 中使用音频和视频，自21世纪初以来，我们的带宽开始能够支持任意类型的视频（视频文件比文本和图片要大的多）。在早些时候，传统的 web 技术（如 HTML ）不能够在 Web 中嵌入音频和视频，所以一些像 <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (后来有 <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a> ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。</p> + +<p>传统的解决方案能够解决许多这样的问题，前提是它能够正确的工作。幸运的是，几年之后 {{glossary("HTML5")}} 标准提出，其中有许多的新特性，包括 {{htmlelement("video")}} 和 {{htmlelement("audio")}} 标签，以及一些 {{Glossary("JavaScript")}} 和 {{Glossary("API","APIs")}} 用于对其进行控制。在这里，我们不讨论有关 JavaScript 的问题，仅仅讲解有关 HTML 的基础。</p> + +<p>我们不会教你如何制作音频和视频，因为那需要完全不同的技术。我们已经为你的试验提供了一些视频和音频的文件（ <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files and example code</a> ），以防止你自己没有。</p> + +<div class="note"> +<p><strong>注意：</strong>在你开始之前，你应当了解一些 {{glossary("OVP","OVPs")}} (在线视频提供商) 例如 <a href="https://www.youtube.com/">YouTube</a> 、<a href="http://www.dailymotion.com">Dailymotion</a> 、<a href="https://vimeo.com/">Vimeo</a>、<a href="https://www.bilibili.com">Bilibili</a>等，以及在线音频提供商例如 <a href="https://soundcloud.com/">Soundcloud</a>。这些公司提供方便、简单的方式来支持视频，所以你不必担心庞大的带宽消耗。OVPS 甚至提供现成的代码用于为你的 web 网页嵌入视频/音频。如果你使用这样的服务，你便可以避免在这篇文章中我们将讨论的一些难题。在下一篇文章中，我们将会再讨论这样的服务。 </p> +</div> + +<h3 id="<video>_元素"><video> 元素</h3> + +<p>{{htmlelement("video")}} 允许你轻松地嵌入一段视频。一个简单的例子如下：</p> + +<pre class="brush: html notranslate"><video src="rabbit320.webm" controls> + <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> +</video></pre> + +<p>当中的一些属性如下:</p> + +<dl> + <dt>{{htmlattrxref("src","video")}}</dt> + <dd>同 {{htmlelement("img")}} 标签使用方式相同，<code>src</code> 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同。</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd>用户必须能够控制视频和音频的回放功能。你可以使用 <code>controls</code> 来包含浏览器提供的控件界面，同时你也可以使用合适的 <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a> 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。</dd> + <dt><code><video></code> 标签内的内容</dt> + <dd>这个叫做<strong>后备内容</strong> — 当浏览器不支持 <code><video></code> 标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。</dd> +</dl> + +<p>已嵌入视频文件的网页样式如下：</p> + +<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> + +<p>你可以点击<a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">这里</a>查看网页，或者点击<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">这里</a>查看源代码。</p> + +<h3 id="使用多个播放源以提高兼容性">使用多个播放源以提高兼容性</h3> + +<p>以上的例子中有一个问题，你可能已经注意到了，如果你尝试使用像 Safari 或者 Internet Explorer 这些浏览器来访问上面的链接。视频并不会播放，这是因为不同的浏览器对视频格式的支持不同。幸运的是，你有办法防止这个问题发生。</p> + +<h4 id="媒体文件的内容">媒体文件的内容</h4> + +<p>我们先来快速的了解一下术语。像 MP3、MP4、WebM这些术语叫做<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">容器格式</a>。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。</p> + +<p>一个格式为 WebM 的电影包含视频轨道，音频轨道和文本轨道，其中视频轨道包含一个主视频轨道和一个可选的 Angle 轨道；音频轨道包含英语和西班牙语的音频轨道，还有一个英语评论的音频轨道；文字轨道包含英语和西班牙语的字幕轨道，如下图所示：</p> + +<p><img alt="Diagram conceptualizing the contents of a media file at the track level." src="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg"></p> + +<p>为了编解码器（codec）编码媒体，容器中的音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。每个音频轨道都使用<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">音频编解码器</a>进行编码，而视频轨道则使用（您可能已经猜到了）<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">视频编解码器</a>进行编码。如前所述，不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（如MP3、MP4和WebM，这些格式又可以包含不同类型的视频和音频）。</p> + +<p>例如:</p> + +<ul> + <li>WebM 容器通常包括了 Opus 或 Vorbis 音频和 VP8/VP9 视频。这在所有的现代浏览器中都支持，除了他们的老版本。</li> + <li>MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。这在所有的现代浏览器中都支持，还有 Internet Explorer。</li> + <li>老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。</li> +</ul> + +<p>有一些特殊情况。例如，对于某些类型的音频，通常编解码器的数据存储没有容器或简化容器。其中一个例子就是FLAC编解码器，它通常存储在FLAC文件中，FLAC文件只是FLAC的原始轨迹。</p> + +<p>另一种情况是一直流行的MP3文件。“MP3文件”实际上是存储在MPEG或MPEG-2容器中的MPEG-1音频层III（MPEG-1 Audio Layer III ，MP3）音频轨道。这一点特别有趣，因为尽管大多数浏览器不支持在{{HTMLElement("video")}}和{{HTMLElement("audio")}}元素中使用MPEG媒体，但由于MP3的流行，它们可能仍然支持MP3。</p> + +<p>音频播放器将会直接播放音频文件，例如 MP3 和 Ogg 文件。这些不需要容器。</p> + +<h4 id="浏览器所支持的媒体文件">浏览器所支持的媒体文件</h4> + +<div class="callout-box"> +<p><strong>Note:</strong> 你也许会疑惑为什么会有这样的情况存在。<strong>MP3 </strong> (音频格式) 和 <strong>MP4/H.264</strong> (视频格式) 是被广泛支持的两种格式，并且质量良好。然而，他们却有专利的阻碍 — MP3 的专利会持续到2017年（就在我翻译这篇文章的当天，MP3专利解除了），而 H.264 会持续到2027年早期。意思也就是说浏览器若想要支持这些格式，就得支付高额的费用。此外，许多人反对软件技术垄断，支持开放的格式。这就是为什么我们需要准备不同的格式来兼容不同的浏览器。</p> +</div> + +<p>刚刚所说的格式主要用于将音频和视频压缩成可管理的文件（原始的音频和视频文件非常大）。浏览器包含了不同的 <strong>{{Glossary("Codec","Codecs")}}</strong>,，如 Vorbis 和 H.264，它们用来将已压缩的音频和视频转化成二进制数字。不同的编码器和不同的容器都有各自的优缺点，在你更了解它们后，你可以自己选择使用哪个编码器和容器。</p> + +<p>浏览器并不全支持相同的 codecs，所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。</p> + +<p>要使你的媒体文件在不同平台，不同设备的浏览器上都可观看，这需要多种编码器组合使用，但是这是一种非常麻烦的事，所以可以参考{{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}}来选择最适合的容器格式，同样的，参考{{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}}和{{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}}选择编码格式</p> + +<p>需要记住的另一件事：同一款浏览器，移动版可能比桌面版权多支持的格式可能会有不同。最重要的是，它们都可以减轻媒体播放的处理负担（对于所有媒体或仅针对其内部无法处理的特定类型）。这意味着设备的媒体支持还部分取决于用户安装了什么软件。</p> + +<p><!-- 注：这并没有那么简单，你可以从这里看到 <a href="/zh-CN/docs/Web/HTML/Supported_media_formats#浏览器兼容情况">音视频编码兼容表</a>。此外，许多移动平台的浏览器能够播放一些不支持的格式，但是它们用的却是底层系统的媒体播放器。但这也仅是现在支持。--></p> + +<p>我们该怎么做呢？请看如下例子（你可以点击这里<a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">查看</a>网页，或者点击这里<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">查看</a>源代码）：</p> + +<pre class="brush: html notranslate"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> +</video></pre> + +<p>现在我们将 <code>src</code> 属性从 <code><video></code> 标签中移除，转而将它放在几个单独的标签 {{htmlelement("source")}} 当中。在这个例子当中，浏览器将会检查 <code><source></code> 标签，并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。</p> + +<p>每个 <code><source></code> 标签页含有一个 <code>type</code> 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 {{glossary("MIME type","MIME types")}} ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 <code>type</code> 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。</p> + +<div class="note"> +<p><strong>Note</strong>: 你可以在这里（<a href="/zh-CN/docs/Web/HTML/Supported_media_formats">HTML 媒体格式支持</a>）查看有关 {{glossary("MIME type","MIME types")}} 的支持。</p> +</div> + +<h3 id="其他_<video>_特性">其他 <video> 特性</h3> + +<p>这里有许多你可以用在 HTML5 <code><video></code> 上的特性，请看我们的第三个例子：</p> + +<pre class="brush: html notranslate"><video controls width="400" height="400" + autoplay loop muted + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> +</video> +</pre> + +<p>这串代码将会给我们呈现出如下页面：</p> + +<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">新的特性：</p> + +<dl> + <dt>{{htmlattrxref("width","video")}} 和 {{htmlattrxref("height","video")}}</dt> + <dd>你可以用属性控制视频的尺寸，也可以用 {{Glossary("CSS")}} 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做<strong>纵横比</strong>。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。</dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>这个属性会导致媒体播放时，默认关闭声音。</dd> + <dt>{{htmlattrxref("poster","video")}}</dt> + <dd>这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。</dd> + <dt>{{htmlattrxref("preload","video")}}</dt> + <dd> + <p>这个属性被用来缓冲较大的文件，有3个值可选：</p> + + <ul> + <li><code>"none"</code> ：不缓冲</li> + <li><code>"auto"</code> ：页面加载后缓存媒体文件</li> + <li><code>"metadata"</code> ：仅缓冲文件的元数据</li> + </ul> + </dd> +</dl> + +<p>你可以点击<a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">这里</a>查看以上的例子，也可以点击<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">这里</a>查看源代码。注意我们并没有使用 autoplay 属性在这个版本的例子中 — 如果当页面一加载就开始播放视频的话，就不会看到 poster 属性的效果了。</p> + +<h3 id="<audio>_标签"><audio> 标签</h3> + +<p>{{htmlelement("audio")}} 标签与 {{htmlelement("video")}} 标签的使用方式几乎完全相同，有一些细微的差别比如下面的边框不同，一个典型的例子如下：</p> + +<pre class="brush: html notranslate"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p> +</audio></pre> + +<p>这串代码将会产生如下的效果：</p> + +<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> + +<div class="note"> +<p><strong>Note</strong>: 你可以点击这里<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">查看</a>以上例子，或者点击<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">这里</a>查看源代码。</p> +</div> + +<p>音频播放器所占用的空间比视频播放器要小，由于它没有视觉部件 — 你只需要显示出能控制音频播放的控件。一些与 HTML5 <code><video></code> 的差异如下：</p> + +<ul> + <li>{{htmlelement("audio")}} 标签不支持 <code>width</code>/<code>height</code> 属性 — 由于其并没有视觉部件，也就没有可以设置 <code>width</code>/<code>height</code> 的内容。</li> + <li>同时也不支持 <code>poster</code> 属性 — 同样，没有视觉部件。</li> +</ul> + +<p>除此之外，<code><audio></code> 标签支持所有 <code><video></code> 标签拥有的特性 — 你可以回顾上面的章节来了解更多的有关信息。</p> + +<h3 id="重新播放媒体">重新播放媒体</h3> + +<p>任何时候，你都可以在 Javascript 中调用 {{domxref("HTMLMediaElement.load", "load()")}} 方法来重置媒体。如果有多个由 {{HTMLElement("source")}} 标签指定的媒体来源，浏览器会从选择媒体来源开始重新加载媒体。</p> + +<pre class="brush: js notranslate">const mediaElem = document.getElementById("my-media-element"); +mediaElem.load();</pre> + +<h3 id="音轨增删事件">音轨增删事件</h3> + +<p>你可以监控媒体元素中的音频轨道，当音轨被添加或删除时，你可以通过监听相关事件来侦测到。具体来说，通过监听 {{domxref("AudioTrackList")}} 对象的 {{event("addtrack")}} 事件（即 {{domxref("HTMLMediaElement.audioTracks")}} 对象），你可以及时对音轨的增加做出响应。</p> + +<pre class="brush: js notranslate">const mediaElem = document.querySelector("video"); +mediaElem.audioTracks.onaddtrack = function(event) { + audioTrackAdded(event.track); +} +</pre> + +<p>你可以在我们的 {{domxref("TrackEvent")}} 文档中找到更多有用的信息。</p> + +<h2 id="显示音轨文本">显示音轨文本</h2> + +<p>现在，我们将讨论一个略微先进的概念，这个概念将会十分的有用。许多人不想（或者不能）听到 Web 上的音频/视频内容，至少在某些情况下是这样的，比如：</p> + +<ul> + <li>许多人患有听觉障碍（通常来说是很难听清声音的人，或者聋人），所以他们不能听见音频中的声音。</li> + <li>另外的情况可能是由于人们并不能听音频，可能是因为他们在一个非常嘈杂的环境当中（比如在一个拥挤的酒吧内恰好赶上了球赛 ），也可能是由于他们并不想打扰到其他人（比如在一个十分安静的地方，例如图书馆）。</li> + <li>有一些人他们不说音频当中的语言，所以他们听不懂，因此他们想要一个副本或者是翻译来帮助他们理解媒体内容。</li> +</ul> + +<p>给那些听不懂音频语言的人们提供一个音频内容的副本岂不是一件很棒的事情吗？所以，感谢 HTML5 <code><video></code> 使之成为可能，有了 <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 格式，你可以使用 {{htmlelement("track")}} 标签。</p> + +<div class="note"> +<p><strong>Note</strong>: “副本”的意思是指，用文本记录下音频的内容。</p> +</div> + +<p>WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 <strong>cues </strong>，你可以根据不同的需求来显示不同的样式，最常见的如下：</p> + +<dl> + <dt>subtitles</dt> + <dd>通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。</dd> + <dt>captions</dt> + <dd>同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。</dd> + <dt>timed descriptions</dt> + <dd>将文字转换为音频，用于服务那些有视觉障碍的人。</dd> +</dl> + +<p>一个典型的 WebVTT 文件如下：</p> + +<pre class="eval line-numbers language-html notranslate"><code class="language-html">WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +第一段字幕 + +2 +00:00:30.739 --> 00:00:34.074 +第二段 + + ...</code> +</pre> + +<p>让其与 HTML 媒体一起显示，你需要做如下工作：</p> + +<ol> + <li>以 .vtt 后缀名保存文件。</li> + <li>用 {{htmlelement("track")}} 标签链接 .vtt 文件， <code><track></code> 标签需放在 <code><audio></code> 或 <code><video> 标签当中</code>，同时需要放在所有 <source> 标签之后。使用 {{htmlattrxref("kind","track")}} 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 {{htmlattrxref("srclang","track")}} 来告诉浏览器你是用什么语言来编写的 subtitles。</li> +</ol> + +<p>如下:</p> + +<pre class="brush: html notranslate"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>上面这串代码会显示一段带有字幕的视频，如下：</p> + +<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>如果你想了解更多细节，你可以阅读 <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>。在 Github 上你可以找到与本文相关的样例，他们由 Ian Devlin 编写，点击<a href="https://iandevlin.github.io/mdn/video-player-with-captions/">这里</a>可以查看该样例，或者点击<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">这里</a>查看源代码。这个样例使用了 JavaScript 代码，它使得用户可以选择不同的字幕。注意，若想要显示字幕，你需要点击 "CC" 按钮，并且选择一种语言 — English, Deutsch, 或 Español。</p> + +<div class="note"> +<p><strong>Note</strong>: 文本轨道会使你的网站更容易被搜索引擎抓取到 （{{glossary("SEO")}}）， 由于搜索引擎的文本抓取能力非常强大，使用文本轨道甚至可以让搜索引擎通过视频的内容直接链接。</p> +</div> + +<h2 id="实践学习：在你的网站上嵌入你自己的视频或音频。">实践学习：在你的网站上嵌入你自己的视频或音频。</h2> + +<p>在这个实践学习当中，我们希望你能够走出去，并且记录一些你自己的视频或者音频 — 如今，大多数手机都能够非常方便的记录视频或者音频，并且你可以将他们上传到你的电脑上面，你可以使用这些功能来记录你的视频或音频。在这时候，你可能需要做一些格式转换，如果是视频的话，你需要将它们转化为 WebM 或者 MP4 ，如果是音频的话，你需要将它们转化为 MP3 或者 Ogg 。 不过你并不需要担心，有许多的程序都能够帮你解决这些问题，例如 <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> 和 <a href="https://sourceforge.net/projects/audacity/">Audacity</a>。我们非常希望你能够亲自动手实现它。</p> + +<p>如果你无法取得任意的音频或者视频，你可以使用我们已经为你提供的样本（<a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files</a>）。同时你也可以使用我们的代码来作为参考。</p> + +<p>我们希望你能够：</p> + +<ol> + <li>将你的音频或者视频文件保存在你电脑上的一个新目录中。</li> + <li>创建一个新的 HTML 文件在相同的路径下，命名为 index.html。</li> + <li>在页面上添加 <code><audio></code> 和 <code><video></code> 标签；并使用浏览器默认的控件来显示它们。</li> + <li>在当中添加 <code><source></code> 标签，并添加 <code>type</code> 属性，以便于浏览器能够找到其能够支持的格式并加载它。</li> + <li>在 <code><video></code> 标签中添加 <code>poster</code> 属性，这会显示在视频播放之前。</li> +</ol> + +<p>另外，你可以尝试研究一下文本音轨，试着为你的视频添加一些字幕。</p> + +<h2 id="测试你的技能！">测试你的技能！</h2> + +<p>恭喜你，你已经完成了这篇教程的学习，但你是否还记得教程里最重要的内容呢？在继续之前，你可以通过一些测试来验证你是否已经掌握了这些内容，请参见<a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">测试你的技能：内嵌多媒体</a>。需要注意倒是，这个测试中的第三个问题可能会需要一些之后讲到的技术，所以我们建议你尝试之前阅读一下<a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/其他嵌入技术">下一篇教程</a>。</p> + +<h2 id="总结">总结</h2> + +<p>我们祝愿你可以沉浸在 Web 网站的音频和视频当中，下一篇文章，我们将会学习到另外一种在 web 页面中嵌入内容的方法，比如使用 {{htmlelement("iframe")}} 或者 {{htmlelement("object")}}。</p> + +<h2 id="相关资料">相关资料</h2> + +<ul> + <li>{{htmlelement("audio")}}</li> + <li>{{htmlelement("video")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("track")}}</li> + <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>:：这里面包含了许多使用 HTML 和 JavaScript 在页面中添加音频或视频的资料。</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: 这里面包含了许多使用 JavaScript 来控制音频或视频的资料。</li> + <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="本章目录">本章目录</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">从 <code><object></code> 到 <code><iframe></code>：其它嵌入技术</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">为网页添加向量图形</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla 宣传页面</a></li> +</ul> + +<dl> +</dl> + +<ul> +</ul> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html new file mode 100644 index 0000000000..ace192f4d3 --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html @@ -0,0 +1,91 @@ +--- +title: 'Test your skills: Multimedia and embedding' +slug: >- + Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding +--- +<div>{{learnsidebar}}</div> + +<p>This aim of this skill test is to assess whether you've understood our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> and <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From object to iframe — other embedding technologies</a> articles.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> + <br> + If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> +</div> + +<h2 id="Multimedia_and_embedding_1">Multimedia and embedding 1</h2> + +<p>In this task we want you to embed a simple audio file onto the page. You need to:</p> + +<ul> + <li>Add the path to the audio file to an appropriate attribute to embed it on the page. The audio is called <code>audio.mp3</code>, and it is in a folder inside the current folder called <code>media</code>.</li> + <li>Add an attribute to make browsers display some default controls.</li> + <li>Add some appropriate fallback text for browsers that don't support <code><audio></code>.</li> +</ul> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/tasks/media-embed/mediaembed1-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Multimedia_and_embedding_2">Multimedia and embedding 2</h2> + +<p>In this task we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides. You need to:</p> + +<ul> + <li>Add an attribute to make browsers display some default controls.</li> + <li>Add some appropriate fallback text for browsers that don't support <code><video></code>.</li> + <li>Add multiple sources, containing the paths to the video files. The files are called <code>video.mp4</code> and <code>video.webm</code>, and are in a folder inside the current folder called <code>media</code>.</li> + <li>Let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time.</li> + <li>Give the <code><video></code> a width and height equal to its intrinsic size (320 by 240 pixels).</li> + <li>Make the video muted by default.</li> + <li>Display the text tracks contained in the <code>media</code> folder, in a file called <code>subtitles_en.vtt</code>, when the video is playing. You must explicitly set the type as subtitles, and the subtitle language to English.</li> +</ul> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed2.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/tasks/media-embed/mediaembed2-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Multimedia_and_embedding_3">Multimedia and embedding 3</h2> + +<p>For this final task you have two tasks to do:</p> + +<ul> + <li>Embed a PDF into the page. The PDF is called <code>mypdf.pdf</code>, and is contained in the <code>media</code> folder.</li> + <li>Go to a sharing site like YouTube or Google Maps, and embed a video or other media item into the page.</li> +</ul> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed3.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/tasks/media-embed/mediaembed3-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for HTML image basics 1 skill test".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/其他嵌入技术/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/其他嵌入技术/index.html new file mode 100644 index 0000000000..c66ca6499e --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/其他嵌入技术/index.html @@ -0,0 +1,254 @@ +--- +title: 从对象到iframe - 其他嵌入技术 +slug: Learn/HTML/Multimedia_and_embedding/其他嵌入技术 +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary"><font>到目前为止，您应该掌握了将图像、视频和音频嵌入到网页上的诀窍了。此刻，让我们继续深入学习，来看一些能让您在网页中嵌入各种内容类型的元素：</font> {{htmlelement("iframe")}}, {{htmlelement("embed")}} 和{{htmlelement("object")}} 元素。<code><iframe></code><font><font>用</font></font>于嵌入其他网页，另外两个元素则允许您嵌入PDF，SVG，甚至Flash — 一种正在被淘汰的技术，但您仍然会时不时的看到它。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td><font><font>基</font></font>本的计算机知识，<a href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>，<a href="/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a> 的基本知识，熟悉HTML基础知识（阅读 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a>）以及本模块中以前的文章<font><font>。</font></font></td> + </tr> + <tr> + <th scope="row">学习目标：</th> + <td><font><font>要了解如何使用<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="HTML <object>元素表示外部资源，可以将其视为图像，嵌套浏览上下文或要由插件处理的资源。"><object></a><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffe8d4;">、</span></font></code></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="HTML <embed>元素表示外部应用程序或交互式内容（换句话说，插件）的集成点。"><code><embed></code></a><font><font>以及</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="HTML <iframe>元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。 在HTML 4.01中，文档可能包含一个头部和一个主体或头部和框架集，但不包括主体和框架集。 但是，一个<iframe>可以在普通文档正文中使用。 每个浏览上下文都有自己的会话历史和活动文档。 包含嵌入内容的浏览上下文称为父浏览上下文。 顶级浏览上下文（没有父级）通常是浏览器窗口。"><code><iframe></code></a><font><font>在网页中嵌入部件，例如</font></font><font><font>Flash电影或其他网页。</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="嵌入的简史"><font><font>嵌入的简史</font></font></h2> + +<p><font><font>很久以前，很流行在网络上使用</font></font><strong><font><font>框架</font></font></strong><font><font>创建网站 — 网站的一小部分存储于单独的HTML页面中</font><font>。</font><font>这些被嵌入在一个称为</font></font><strong><font><font>框架集</font></font></strong><font><font>的主文档中</font><font>，它允许您指定每个框架能够填充在屏幕上的区域，非常像调整表格的列和行的大小。</font><font>这些做法在90年代中期至90年代后期被认为是比较酷的，有证据表明，将网页分解成较小的块，这样有利于下载速度 —</font></font>尤其是在那时网络连接速度太慢的情况下更为明显<font><font>。</font><font>然而，这些技术有很多问题，随着网络速度越来越快，这些技术带来的问题远超过它们带来的积极因素，所以你再也看不到它们被使用了。</font></font></p> + +<p><font><font>一小段时间之后（20世纪90年代末，21世纪初），插件技术变得非常受欢迎，例如</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Java"><font><font>Java Applet</font></font></a><font><font>和</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Adobe_Flash"><font><font>Flash</font></font></a><font><font> — 这些技术允许网络开发者将丰富的内容嵌入到网页中，例如视频和动画等，这些内容不能通过HTML单独实现。</font><font>嵌入这些技术是通过诸如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="HTML <object>元素表示外部资源，可以将其视为图像，嵌套浏览上下文或要由插件处理的资源。"><code><object></code></a><font><font>和较少使用</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="HTML <cke:embed></cke:embed>元素表示外部应用程序或交互式内容（换句话说，插件）的集成点。"><code><embed></code></a><font><font>的</font><font>元素来实现的</font><font>，当时</font></font><font><font>它们非常有用。</font><font>由于许多问题，包括可访问性、安全性、文件大小等，它们已经过时了; </font><font>如今，大多数移动设备不再支持这些插件，桌面端也逐渐不再支持。</font></font></p> + +<p><font><font>最后，</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="HTML <iframe>元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。 在HTML 4.01中，文档可能包含一个头部和一个主体或头部和框架集，但不包括主体和框架集。 但是，一个<iframe>可以在普通文档正文中使用。 每个浏览上下文都有自己的会话历史和活动文档。 包含嵌入内容的浏览上下文称为父浏览上下文。 顶级浏览上下文（没有父级）通常是浏览器窗口。"><code><iframe></code></a><font><font>元素出现了（连同其他嵌入内容的方式，如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="使用HTML <canvas>元素与canvas脚本API来绘制图形和动画。"><code><canvas></code></a><font><font>，</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="使用HTML <video>元素将视频内容嵌入到文档中。"><code><video></code></a><font><font>等），它提供了一种将整个web页嵌入到另一个网页的方法，看起来就像那个web页是另一个网页的一个</font></font>{{htmlelement("img")}}或其他元素一样。{{htmlelement("iframe")}}现在经常被使用<font><font>。</font></font></p> + +<p><font><font>了解完历史之后，让我们继续往下看以了解如何使用它们。</font></font></p> + +<h2 id="自主学习：嵌入类型的使用"><font><font>自主学习：嵌入类型的使用</font></font></h2> + +<p><font><font>在这篇文章中，我们将直接进入自主学习部分，让你立即体会到嵌入技术的实用性。大家都非常熟悉</font></font><a href="https://www.youtube.com/"><font><font>Youtube</font></font></a><font><font>，但很多人不了解它所提供的一些分享功能。让我们来看看Youtube如何让我们通过</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="HTML <iframe>元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。 在HTML 4.01中，文档可能包含一个头部和一个主体或头部和框架集，但不包括主体和框架集。 但是，一个<iframe>可以在普通文档正文中使用。 每个浏览上下文都有自己的会话历史和活动文档。 包含嵌入内容的浏览上下文称为父浏览上下文。 顶级浏览上下文（没有父级）通常是浏览器窗口。"><code><iframe></code></a><font><font>在页面中嵌入喜欢的视频</font></font><font><font>。</font></font></p> + +<ol> + <li><font><font>首先，去Youtube找一个喜欢的视频。</font></font></li> + <li><font><font>在视频下方，您会看到一个</font></font><em><font><font>共享</font></font></em><font><font>按钮 - 点击查看共享选项。</font></font></li> + <li><font><font>选择“ </font></font><em><font><font>嵌入”</font></font></em><font><font>选项卡，您将得到一些</font></font><code><iframe></code><font><font>代码 - 复制一下。</font></font></li> + <li><font><font>粘贴到</font><font>下面</font><font>的</font></font><em><font><font>输入</font></font></em><font><font>框里，看看</font></font><em><font><font>输出</font></font></em><font><font>结果是什么</font><font>。</font></font></li> +</ol> + +<p><font><font>此外，您还可以试试</font><font>在示例中</font><font>嵌入</font></font><a href="https://www.google.com/maps/"><font><font>Google地图</font></font></a><font><font>：</font></font></p> + +<ol> + <li><font><font>去Google地图找一个喜欢的地图。</font></font></li> + <li><font><font>点击UI左上角的“汉堡菜单”（三条水平线）。</font></font></li> + <li><font><font>选择</font></font><em><font><font>共享或嵌入地图</font></font></em><font><font>选项。</font></font></li> + <li><font><font>选择嵌入地图选项，这将给你一些</font></font><code><iframe></code><font><font>代码 - 复制一下。</font></font></li> + <li><font><font>粘贴到下面</font><font>的</font></font><em><font><font>输入</font></font></em><font><font>框，看看</font></font><em><font><font>输出</font></font></em><font><font>结果是什么</font><font>。</font></font></li> +</ol> + +<p>如果你犯了某些错误，你可以点击<em>Reset按钮以重置编辑器。</em>如果你确实被卡住了， 按下Show <em>solution按钮以借鉴答案。</em></p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <style> body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; } h2 { font-size: 16px; } code, textarea { font-family: Consolas, Menlo, monospace; } .output { min-height: 200px; } .input { min-height: 100px; width: 95%; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } .controls { width: 96%; text-align: right; } </style> </head> <body> <h2>实时输出</h2> <div class="output"></div> <h2>可编辑代码</h2> <p class="a11y-label">按 ESC 退出编辑区域，按 Tab 可插入制表符 <code>'\t'</code> </p> <textarea id="code" class="input"></textarea> <div class="controls"> <button id="btn-reset">重置</button> <button id="btn-solution">显示答案</button> </div> <script> const btnReset = document.getElementById('btn-reset'); const btnSolution = document.getElementById('btn-solution'); const blockOutput = document.querySelector('.output'); const blockInput = document.querySelector('.input'); const original = '<p>改革春风吹满地</p>'; const answer = `<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> <p>改革春风吹满地</p>`; let userEntry = ""; init(); btnReset.addEventListener('click', init); btnSolution.addEventListener('click', () => { if (btnSolution.textContent === '显示答案') { blockInput.value = blockOutput.innerHTML = answer; btnSolution.textContent = '隐藏答案'; } else { blockInput.value = blockOutput.innerHTML = userEntry; btnSolution.textContent = '显示答案'; } }); blockInput.addEventListener('keydown', (e) => { switch (e.key) { case 'Tab': e.preventDefault(); insertAtCursor('\t'); break; case "Escape": blockInput.blur(); break; } }); blockInput.addEventListener('keyup', () => { userEntry = blockInput.value; blockOutput.innerHTML = blockInput.value; if (btnSolution.textContent === '隐藏答案') { btnSolution.textContent = '显示答案'; } }); function init() { userEntry = blockOutput.innerHTML = blockInput.value = original; btnSolution.textContent = '显示答案'; } function insertAtCursor(text) { const scrollPos = blockInput.scrollTop; const cursorPos = blockInput.selectionStart; const front = blockInput.value.substring(0, cursorPos); const back = blockInput.value.substring( blockInput.selectionEnd, blockInput.value.length); blockInput.value = front + text + back; blockInput.selectionStart = blockInput.selectionEnd = cursorPos + text.length; blockInput.focus(); blockInput.scrollTop = scrollPos; } </script> </body> </html></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Iframe详解"><font><font>Iframe详解</font></font></h2> + +<p><font><font>是不是很简单又有趣呢？</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="HTML <iframe>元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。 在HTML 4.01中，文档可能包含一个头部和一个主体或头部和框架集，但不包括主体和框架集。 但是，一个<iframe>可以在普通文档正文中使用。 每个浏览上下文都有自己的会话历史和活动文档。 包含嵌入内容的浏览上下文称为父浏览上下文。 顶级浏览上下文（没有父级）通常是浏览器窗口。"><code><iframe></code></a><font><font>元素旨在允许您将其他Web文档嵌入到当前文档中。</font><font>这很适合将第三方内容嵌入您的网站，您可能无法直接控制，也不希望实现自己的版本 - 例如来自在线视频提供商的视频，</font></font><a href="https://disqus.com/"><font><font>Disqus</font></font></a><font><font>等评论系统</font><font>，在线地图提供商，广告横幅等。您通过本课程使用的实时可编辑示例就是使用</font></font><code><iframe></code><font><font> </font><font>实现的</font><font>。</font></font></p> + +<p><font><font>我</font></font><font><font>们会在后面提到，关于</font></font><code><iframe></code><font><font>有一些严重的</font></font>{{anch("安全隐患")}}<font><font>需要考虑</font></font><font><font>，但这并不意味着你不应该在你的网站上使用它们 — 它只需要一些知识和仔细地思考。让我们更详细地探索这些代码。假设您想在其中一个网页上加入MDN词汇表，您可以尝试以下方式：</font></font></p> + +<pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" + width="100%" height="500" frameborder="0" + allowfullscreen sandbox> + <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> + Fallback link for browsers that don't support iframes + </a> </p> +</iframe> +</pre> + +<p><font><font>此示例包括使用以下所需的</font></font><code><iframe></code><font><font>基本要素：</font></font></p> + +<dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen">allowfullscreen</a></code></dt> + <dd><font><font>如果设置，</font></font><code><iframe></code><font><font>则可以通过</font></font><a href="/zh-CN/docs/Web/API/Fullscreen_API"><font><font>全屏API</font></font></a><font><font>设置为全屏模式</font><font>（稍微超出本文的范围）。</font></font></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-frameborder">frameborder</a></code></dt> + <dd><font><font>如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。</font><font>0删除边框。不推荐这样设置</font><font>，因为</font><font>在</font><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS" title="CSS：CSS（Cascading Style Sheets）是一种声明式语言，用于控制浏览器中网页的外观。"><font>CSS中</font></a><font>可以更好地实现相同的效果</font><font>。</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" title="边框CSS属性是用于一次设置所有单个边框属性值的缩写属性：border-width，border-style和border-color。 与所有速记属性一样，未指定的任何单个值都将设置为其对应的初始值。 重要的是，边框不能用于指定border-image的自定义值，而是将其设置为其初始值，即none。"><code>border</code></a><code>: none;</code></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-src">src</a></code></dt> + <dd><font><font>该属性与</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="使用HTML <video>元素将视频内容嵌入到文档中。"><code><video></code></a><font><font>/</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="HTML <img>元素表示文档中的图像。"><img></a></code><font><font>一样包</font></font><font><font>含指向要嵌入文档的URL路径。</font></font></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-width">width</a></code><font><font> 和 </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-height">height</a></code></dt> + <dd><font><font>这些属性指定您想要的iframe的宽度和高度。</font></font></dd> +</dl> + +<dl> + <dt>备选内容</dt> + <dd><font><font>与</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="使用HTML <video>元素将视频内容嵌入到文档中。"><code><video></code></a><font><font>等其</font></font><font><font>他类似元素相同</font></font><font><font>，您可以在</font></font><code><iframe></iframe></code><font><font>标签</font><font>之间包含备选内容，</font><font>如果浏览器不支持</font></font><code><iframe></code><font><font>，将会显示备选内容，</font></font><font><font>这种情况下，我们已经添加了一个到该页面的链接。现在</font><font>您几乎不可能遇到任何不支持</font></font><code><iframe></code><font><font>的</font><font>浏览器</font><font>。</font></font></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code></dt> + <dd><font><font>该属性需要在已经支持其他</font></font><code><iframe></code><font><font>功能（例如IE 10及更高版本）但</font><font>稍微更现代的浏览器上才能工作，该属性可以</font><font>提高安全性设置; </font><font>我们将在下一节中更加详细地谈到。</font></font></dd> +</dl> + +<div class="note"> +<p><strong><font><font>注意</font></font></strong><font><font>：为了提高速度，</font></font><font><font>在主内容完成加载后</font><font>，使用JavaScript设置iframe的</font><font><code>src</code>属性</font><font>是个好主意</font><font>。</font><font>这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO" title="SEO：SEO（搜索引擎优化）是使网站在搜索结果中更加可见的过程，也称为提高搜索排名。"><font><font>SEO</font></font></a><font><font>指标）。</font></font></p> +</div> + +<h3 id="安全隐患"><font><font>安全隐患</font></font></h3> + +<p><font><font>以上我们提到了安全问题 - 现在我们来详细介绍一下这一点。</font><font>我们并不期望您第一次就能完全理解所有内容; 我们只想让您意识到这一问题，在您更有经验并开始考虑在您的实验和工作中</font><font>使用</font></font><code><iframe></code><font><font>时为你提供参考</font><font>。</font><font>此外，没有必要害怕和不使用</font></font><code><iframe></code><font><font>—你只需要谨慎一点。继续看下去吧</font><font>...</font></font></p> + +<p><font><font>浏览器制造商和Web开发人员了解到</font><font>网络上的坏人（通常被称为</font><strong><font>黑客</font></strong><font>，或更准确地说是</font><strong><font>破解者</font></strong><font>）</font><font>，如果他们试图恶意修改您的网页或欺骗人们进行不想做的事情时常把iframe作为共同的攻击目标（官方术语：</font></font><strong><font><font>攻击向量</font></font></strong><font><font>），例如显示用户名和密码等敏感信息。因此，规范工程师和浏览器开发人员已经开发了各种安全机制，使</font></font><code><iframe></code><font><font>更加安全，这有些最佳方案值得我们考虑 - 我们将在下面介绍其中的一些。</font></font></p> + +<div class="note"> +<p><a href="https://en.wikipedia.org/wiki/Clickjacking" title="点击劫持"><font><font>单击劫持</font></font></a><font><font>是一种常见的iframe攻击，黑客将隐藏的iframe嵌入到您的文档中（或将您的文档嵌入到他们自己的恶意网站），并使用它来捕获用户的交互。</font><font>这是误导用户或窃取敏感数据的常见方式。</font></font></p> +</div> + +<p><font><font>一个快速的例子 — 尝试在浏览器中加载上面的例子 - 你也可以</font></font><a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html"><font><font>在Github上找到它</font></font></a><font><font>（</font></font><a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html"><font><font>参见源代码</font></font></a><font><font>）。你将不会看到任何内容，但如果你点击</font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发者工具</a>中的<em>控制台</em></font></font><font><font>，你会看到一条消息，告诉你为什么没有显示内容。</font><font>在Firefox中，您会</font></font><em><font><font>被告知：“X-Frame-Options拒绝加载https://developer.mozilla.org/en-US/docs/Glossary”</font></font></em><font><font>。</font><font>这是因为构建MDN的开发人员已经在网站页面的服务器上设置了一个不允许被嵌入到</font></font><code><iframe></code><font><font>的设置（请参阅</font></font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#配置CSP指令"><font><font>配置CSP指令</font></font></a><font><font>）这是有必要的 — 整个MDN页面被嵌入在其他页面中没有多大意义，除非您想要将其嵌入到您的网站上并将其声称为自己的内容，或尝试通过单击劫持来窃取数据，这都是非常糟糕的事情。</font><font>此外，如果每个人都这样做，所有额外的带宽将花费Mozilla很多资金。</font></font></p> + +<h4 id="只有在必要时嵌入"><font><font>只有在必要时嵌入</font></font></h4> + +<p><font><font>有时嵌入第三方内容（例如YouTube视频和地图）是有意义的，但如果您只在完全需要时嵌入第三方内容，您可以省去很多麻烦。</font><font>网络安全的一个很好的经验法则是</font></font><em><font><font>“你怎么谨慎都不为过，如果你决定要做这件事，多检查一遍；如果是别人做的，在被证明是安全的之前，都假设这是危险的。”</font></font></em></p> + +<div> +<p>除了安全问题，你还应该意识到知识产权问题。无论在线内容还是离线内容，绝大部分内容都是有版权的，甚至是一些你没想到有版权的内容（例如，<a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>上的大多数图片）。不要在网页上展示一些不属于你的内容，除非你是所有者或所有者给了你明确的、书面的许可。对于侵犯版权的惩罚是严厉的。再说一次，你再小心也不为过。</p> + +<p>如果内容获得许可，你必须遵守许可条款。例如，MDN上的内容是<a href="/zh-CN/docs/MDN/About#%E7%89%88%E6%9D%83%E5%92%8C%E8%AE%B8%E5%8F%AF">在CC-BY-SA下许可的</a>，这意味着，如果你要引用我们的内容，就必须<a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">用适当的方式注明来源</a>，即使你对内容做了实质性的修改。</p> +</div> + +<h4 id="使用_HTTPS">使用 HTTPS</h4> + +<p><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS" title="HTTPS：HTTPS（HTTP Secure）是HTTP协议的加密版本。 它通常使用SSL或TLS来加密客户端和服务器之间的所有通信。 这种安全连接允许客户端安全地与服务器交换敏感数据，例如用于银行活动或在线购物。"><font><font>HTTPS</font></font></a><font><font>是</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTP" title="HTTP：HTTP（超文本传输协议）是启用Web上文件传输的基本协议。 HTTP是文本的（所有的通信都是以纯文本形式进行的）和无状态的（没有通信知道以前的通信）。"><font><font>HTTP</font></font></a><font><font>的加密版本</font><font>。</font><font>您应该尽可能使用HTTPS为您的网站提供服务：</font></font></p> + +<ol> + <li><font><font>HTTPS减少了远程内容在传输过程中被篡改的机会，</font></font></li> + <li><font><font>HTTPS防止嵌入式内容访问您的父文档中的内容，反之亦然。</font></font></li> +</ol> + +<p><font><font>使用HTTPS需要一个安全证书，这可能是昂贵的（尽管</font></font><a href="https://letsencrypt.org/">Let's Encrypt</a>让这件<font><font>事变得更容易），如果你没有，可以使用HTTP来为你的父文档提供服务。</font><font>但是，由于HTTPS的第二个好处，</font></font><em><font><font>无论成本如何，您绝对不能使用HTTP嵌入第三方内容</font></font></em><font><font>（在最好的情况下，您的用户的Web浏览器会给他们一个可怕的警告）。所有有声望的公司，例如Google Maps或Youtube，当您嵌入内容时，</font></font><code><iframe></code><font><font>将通过HTTPS提供 - 查看</font></font><code><iframe></code> <code>src</code><font><font>属性内的URL。</font></font></p> + +<div class="note"> +<p><strong><font><font>注意</font></font></strong><font><font>：</font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Using_Github_pages"><font><font>Github页面</font></font></a><font><font>允许默认情况下通过HTTPS提供内容，因此对托管内容很有用。</font><font>如果您正在使用不同的托管，并且不确定，请向您的托管服务商询问。</font></font></p> +</div> + +<h4 id="始终使用sandbox属性"><font><font>始终使用</font></font><code>sandbox</code><font><font>属性</font></font></h4> + +<p>想尽可能减少攻击者在你的网站上做坏事的机会，那么你应该给嵌入的内容仅能完成自己工作的权限<em><font><font>。</font></font></em><font><font>当然，这也适用于你自己的内容。一个允许包含在其里的代码以适当的方式执行或者用于测试</font><font>，但不能对其他代码库（意外或恶意）造成任何损害的容器称为</font></font><a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)"><font><font>沙盒</font></font></a><font><font>。</font></font></p> + +<p><font><font>未沙盒化(Unsandboxed)内容可以做得太多（执行JavaScript，提交表单，弹出窗口等）默认情况下，您应该使用没有参数的<code>sandbox</code></font><font>属性</font><font>来强制执行所有可用的限制</font><font>，如我们前面的示例所示。</font></font></p> + +<p><font><font>如果绝对需要，您可以逐个添加权限（</font></font><code>sandbox=""</code><font><font>属性值内） - 请参阅</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code><font><font>所有可用选项</font><font>的</font><font>参考条目。</font><font>其中重要的一点是，你</font></font><em><font><font>永远不</font></font></em><font><font>应该</font></font><font><font>同时添加</font></font><code>allow-scripts</code><font><font>和</font></font><code>allow-same-origin</code><font><font>到你的</font></font><code>sandbox</code><font><font>属性中-</font></font>在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用JavaScript完全关闭沙盒。</p> + +<div class="note"> +<p><strong><font><font>注意</font></font></strong><font><font>：</font></font>如果攻击者可以欺骗人们直接访问恶意内容（在iframe之外），则沙盒无法提供保护。如果某些内容可能是恶意的（例如，用户生成的内容），请保证其是从不同的<a href="https://developer.mozilla.org/en-US/docs/Glossary/domain">域</a>向您的主站点提供的。</p> +</div> + +<h4 id="配置CSP指令"><font><font>配置CSP指令</font></font></h4> + +<p><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSP" title="CSP：CSP（内容安全策略）用于检测和减轻某些类型的网站相关攻击，如XSS和数据注入。"><font><font>CSP</font></font></a><font><font>代表</font></font><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP"><font><font>内容安全策略</font></font></a></strong><font><font>，它提供</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives"><font><font>一组HTTP标头</font></font></a><font><font>（由web服务器发送时与元数据一起发送的元数据），旨在提高HTML文档的安全性。</font><font>在</font></font><code><iframe></code>s<font><font>安全性方面</font></font><font><font>，您可以</font></font><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options"><font><font>将服务器配置为发送适当的</font></font><code>X-Frame-Options</code><font><font> 标题。</font></font></a></em><font><font>这样做可以防止其他网站在其网页中嵌入您的内容（这将导致</font></font><a href="https://en.wikipedia.org/wiki/clickjacking" title="点击劫持"><font><font>点击</font></font></a><font><font>和一系列其他攻击），正如我们之前看到的那样，MDN开发人员已经做了这些工作。</font></font></p> + +<div class="note"> +<p><strong><font><font>注意</font></font></strong><font><font>：您可以阅读Frederik Braun的帖子</font></font><font><font><a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">在X-Frame-Options安全性头上</a>来</font></font><font><font>获取有关此主题的更多背景信息。</font><font>显然，在这篇文章中已经解释得很清楚了。</font></font></p> +</div> + +<h2 id="<embed>和<object>元素"><font><font><embed>和<object>元素</font></font></h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="HTML <embed>元素表示外部应用程序或交互式内容（换句话说，插件）的集成点。"><code><embed></code></a><font><font>和</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="HTML <object>元素表示外部资源，可以将其视为图像，嵌套浏览上下文或要由插件处理的资源。"><object></a></code><font><font>元素</font></font><font><font>的功能不同于</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="HTML <iframe>元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。 在HTML 4.01中，文档可能包含一个头部和一个主体或头部和框架集，但不包括主体和框架集。 但是，一个<iframe>可以在普通文档正文中使用。 每个浏览上下文都有自己的会话历史和活动文档。 包含嵌入内容的浏览上下文称为父浏览上下文。 顶级浏览上下文（没有父级）通常是浏览器窗口。"><iframe></a></code>—— 这<font><font>些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！</font></font></p> + +<div class="note"> +<p><strong><font><font>注意</font></font></strong><font><font>：</font></font><strong><font><font>插件</font></font></strong><font><font>是一种对浏览器原生无法读取的内容提供访问权限的软件。</font></font></p> +</div> + +<p><font><font>然而，您不太可能使用这些元素 - Applet几年来一直没有被使用；由于许多原因，Flash不再受欢迎（见</font><font>下面的</font></font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_case_against_plugins"><font><font>插件案例</font></font></a><font><font>）；PDF更倾向于被链接而不是被嵌入；其他内容，如图像和视频都有更优秀、更容易元素来处理。插件和这些嵌入方法真的是一种传统技术，我们提及它们主要是为了以防您在某些情况下遇到问题，比如内部网或企业项目等。</font></font></p> + +<p><font><font>如果您发现自己需要嵌入插件内容，那么您至少需要一些这样的信息：</font></font></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">{{htmlelement("embed")}}</th> + <th scope="col">{{htmlelement("object")}}</th> + </tr> + </thead> + <tbody> + <tr> + <td><font>嵌入内容的</font><a href="https://developer.mozilla.org/en-US/docs/Glossary/URL" title="URL: Uniform Resource Locator (URL) is a text string specifying where a resource can be found on the Internet."><font>网址</font></a></td> + <td>{{htmlattrxref('src','embed')}}</td> + <td>{{htmlattrxref('data','object')}}</td> + </tr> + <tr> + <td><font><font>嵌入内容的</font></font><em><font><font>准确</font></font></em><a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type" title="媒体类型：MIME类型（现在称为“媒体类型”，有时也称为“内容类型”）是与指示文件类型的文件一起发送的字符串（例如，声音文件可能标记为音频/ ogg，或一个图像文件图像/ png）。 它的作用与传统上在Windows上的文件扩展名相同。"><font><font>媒体类型</font></font></a></td> + <td>{{htmlattrxref('type','embed')}}</td> + <td>{{htmlattrxref('type','object')}}</td> + </tr> + <tr> + <td><font><font>由插件控制的框的高度和宽度（以CSS像素为单位）</font></font></td> + <td>{{htmlattrxref('height','embed')}}<br> + {{htmlattrxref('width','embed')}}</td> + <td>{{htmlattrxref('height','object')}}<br> + {{htmlattrxref('width','object')}}</td> + </tr> + <tr> + <td>名称和值，将插件作为参数提供</td> + <td>具有这些名称和值的ad hoc属性</td> + <td><font><font>单标签</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param" title="HTML <param>元素定义了一个<object>元素的参数。"><code><param></code></a><font><font>元素，包含在内</font></font><code><object></code></td> + </tr> + <tr> + <td>独立的HTML内容作为不可用资源的回退</td> + <td><font><font>不支持（</font></font><code><noembed></code><font><font>已过时）</font></font></td> + <td><font><font>包含在</font><font>元素</font></font><code><object></code><font><font>之后</font></font><code><param></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong><font><font>注意</font></font></strong><font><font>：</font></font><code><object></code><font><font>需要</font></font><code>data</code><font><font>属性，</font></font><code>type</code><font><font>属性或两者。</font><font>如果您同时使用这两个，您也可以使用该</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object#attr-typemustmatch">typemustmatch</a></code><font><font>属性（仅在Firefox中实现，在本文中）。</font></font><code>typemustmatch</code><font><font>保持嵌入文件不运行，除非</font></font><code>type</code><font><font>属性提供正确的媒体类型。</font></font><code>typemustmatch</code><font><font>因此，当您嵌入来自不同</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/origin" title="来源：Web内容的起源由方案（协议），主机（域）和用于访问它的URL的端口定义。 只有当方案，主机和端口都匹配时，两个对象具有相同的原点。"><font><font>来源的</font></font></a><font><font>内容</font><font>（可以防止攻击者通过插件运行任意脚本）</font><font>时，可以赋予重要的安全优势</font><font>。</font></font></p> +</div> + +<p><font><font>下面是一个使用该</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="HTML <embed>元素表示外部应用程序或交互式内容（换句话说，插件）的集成点。"><code><embed></code></a><font><font>元素嵌入Flash影片</font><font>的示例</font><font>（请参阅</font><font>此处的</font></font><a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html"><font><font>Github</font></font></a><font><font>，并</font></font><a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html"><font><font>检查源代码</font></font></a><font><font>）：</font></font></p> + +<pre class="brush: html notranslate"><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"></pre> + +<p><font><font>很可怕，不是吗 。</font><font>Adobe Flash工具生成的HTML往往更糟糕，使用</font><font>嵌入</font></font><code><object></code><font><font>元素的</font></font><code><embed></code><font><font>元素来覆盖所有的基础（查看一个例子）。甚至有一段时间，Flash被成功地用作HTML5视频的备用内容，但是这种情况越来越被认为是不必要的。</font></font></p> + +<p><font><font>现在来看一个</font></font><code><object></code><font><font>将PDF嵌入一个页面的例子</font></font><font><font>（参见</font><a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html"><font>实例</font></a><font>和</font></font><a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html"><font><font>源代码</font></font></a><font><font>）：</font></font></p> + +<pre class="brush: html notranslate"><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></pre> + +<p><font><font>PDF是纸与数据之间重要的阶梯，但它们</font></font><a href="http://webaim.org/techniques/acrobat/acrobat">在可访问性上有些问题</a><font><a href="http://webaim.org/techniques/acrobat/acrobat"><font>，</font></a><font>并且可能难以在小屏幕上阅读。它们在一些圈子中仍然受欢迎，我们最好是用链接指向它们，而不是将其嵌入到网页中，以便它们可以在单独的页面上被下载或被阅读。</font></font></p> + +<h3 id="针对插件的情况"><font><font>针对插件的情况</font></font></h3> + +<p><font><font>以前，插件在网络上是不可或缺的。还记得</font><font>你必须安装Adobe Flash Player才能在线观看电影的日子吗？并且你还会不断地收到关于更新Flash Player和Java运行环境的烦人警报。Web技术已经变得更加强大，那些日子已经结束了。对于大多数应用程序，现在是停止依赖插件传播内容，开始利用Web技术的时候了。</font></font></p> + +<ul> + <li><strong><font><font>扩大你对大家的影响力。</font></font></strong><font><font>每个人都有一个浏览器，但插件越来越少，特别是在移动用户中。</font><font>由于Web在很大程度上不需要依赖插件而运行，所以人们宁愿只是去竞争对手的网站而不是安装插件。</font></font></li> + <li><strong><font><font>从</font><font>Flash和其他插件附带</font><font>的</font></font><a href="http://webaim.org/techniques/flash/"><font><font>额外的可访问性问题</font></font></a><font><font>中</font>摆脱<font>。</font></font></strong></li> + <li><strong><font><font>避免额外的安全隐患。</font></font></strong><font><font>即使经过无数次补丁</font></font><a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53"><font><font>，</font></font></a><font><font> Adobe Flash也是</font><a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53"><font>非常不安全的</font></a><font>。</font><font>2015年，Facebook的首席安全官Alex Stamos甚至</font></font><a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso"><font><font>要求Adobe停止Flash。</font></font></a></li> +</ul> + +<p><font><font>那你该怎么办？</font><font>如果您需要交互性，HTML和</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/JavaScript" title="JavaScript：JavaScript（JS）是一种编程语言，主要用于客户端来动态地脚本化网页，但也常常是服务器端的。"><font><font>JavaScript</font></font></a><font><font>可以轻松地为您完成工作，而不需要Java小程序或过时的ActiveX / BHO技术。</font><font>您可以使用</font></font><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><font><font>HTML5视频</font></font></a><font><font>来满足媒体需求，</font><font>矢量图形</font></font><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web"><font><font>SVG</font></font></a><font><font>，以及</font><font>复杂图像和动画</font></font><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial"><font><font>画布</font></font></a><font><font>。</font></font><a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp"><font><font>彼得·埃尔斯特（Peter Elst）几年前已经提到</font></font></a><font><font>，对于工作Adobe Flash极少是正确的工具，除了专门的游戏和商业应用。对于ActiveX，即使微软的</font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Edge" title="Edge：Microsoft Edge是一种免费的图形Web浏览器，与Microsoft Windows捆绑在一起，由Microsoft自2014年开始。最初称为Spartan，Edge取代了长期以来的Microsoft浏览器Internet Explorer。"><font><font>Edge</font></font></a><font><font>浏览器也不再支持。</font></font></p> + +<h2 id="总结">总结</h2> + +<p><font><font>在Web文档中嵌入其他内容这一主题可以很快变得非常复杂，因此在本文中，我们尝试以一种简单而熟悉的方式来介绍它，这种介绍方式将立即显示出相关性，同时仍暗示了一些涉及更高级功能的技术。刚开始，除了嵌入第三方内容（如地图和视频），您不太可能在网页上使用到嵌入技术。当你变得更有经验时，你可能会开始为他们找到更多的用途。</font></font></p> + +<p><font><font>除了我们在这里讨论的那些外，还有许多涉及嵌入外部内容的技术。我们看到了一些在前面的文章中出现的，如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="使用HTML <video>元素将视频内容嵌入到文档中。"><code><video></code></a><font><font>，</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio" title="HTML <audio>元素用于在文档中嵌入声音内容。 它可能包含一个或多个音频源，使用src属性或<source>元素表示：浏览器将选择最合适的一个。 它也可以是流媒体的目的地，使用MediaStream。"><code><audio></code></a><font><font>和</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="HTML <img>元素表示文档中的图像。"><code><img></code></a><font><font>，但还有其它的有待关注，如 </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="使用HTML <canvas>元素与canvas脚本API来绘制图形和动画。"><code><canvas></code></a><font><font>用于JavaScript生成的2D和3D图形，</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg" title="关于此的文件尚未写入; 请考虑贡献！"><svg></a></code>用于<font><font>嵌入矢量图形</font></font><font><font>。</font><font>我们将在此学习模块的下一篇文章中学习</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/SVG"><font><font>SVG</font></font></a><font><font>。</font></font></p> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p> |