initial commit

1 files changed, 217 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/source/index.html b/files/zh-cn/web/html/element/source/index.html
new file mode 100644
index 0000000000..8beedaffea
--- /dev/null
+++ b/files/zh-cn/web/html/element/source/index.html
@@ -0,0 +1,217 @@
+---
+title: Source
+slug: Web/HTML/Element/source
+translation_of: Web/HTML/Element/source
+---
+<h2 id="概述">概述</h2>
+
+<p><strong>HTML <code>&lt;source&gt;</code> </strong>元素为 {{HTMLElement("picture")}}, {{HTMLElement("audio")}} 或者 {{HTMLElement("video")}} 元素指定多个媒体资源。这是一个空元素。它通常用于以<a href="/zh-CN/docs/Web/HTML/Supported_media_formats">不同浏览器支持的多种格式</a>提供相同的媒体内容。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">
+    <p>Usage Context</p>
+   </th>
+   <td>A media element ({{HTMLElement("audio")}} or {{HTMLelement("video")}}, and it should be placed before any <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> or {{HTMLElement("track")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Permitted parent elements</dfn></th>
+   <td>A {{HTMLElement("picture")}} element, and it should be placed before the {{HTMLElement("img")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>It must have start tag, but must not have an end tag.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLSourceElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="属性">属性</h2>
+
+<p>该元素包含 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
+ <dd>Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in {{htmlattrxref("srcset", "source")}} to use.<br>
+ The <code>sizes</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Required for {{HTMLElement("audio")}} and {{HTMLElement("video")}}, address of the media resource. The value of this attribute is ignored when the <code>&lt;source&gt;</code> element is placed inside a {{HTMLElement("picture")}} element.</dd>
+ <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
+ <dd>A list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use. Each string is composed of:
+ <ol>
+  <li>one URL to an image,</li>
+  <li>a width descriptor, that is a positive integer directly followed by <code>'w'</code>. The default value, if missing, is the infinity.</li>
+  <li>a pixel density descriptor, that is a positive floating number directly followed by <code>'x'</code>. The default value, if missing, is <code>1x</code>.</li>
+ </ol>
+
+ <p>Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor.<br>
+  The browser chooses the most adequate image to display at a given point of time.<br>
+  The <code>srcset</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</p>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>The MIME-type of the resource, optionally with a <code>codecs</code> parameter. See <a class="external" href="http://tools.ietf.org/html/rfc4281">RFC 4281</a> for information about how to specify codecs.</dd>
+ <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
+ <dd><a class="internal" href="/en-US/docs/CSS/Media_queries">Media query</a> of the resource's intended media; this should be used only in a {{HTMLElement("picture")}} element.</dd>
+</dl>
+
+<p>If the <strong>type</strong> attribute isn't specified, the media's type is retrieved from the server and checked to see if Gecko can handle it; if it can't be rendered, the next <strong>source</strong> is checked. If the <strong>type</strong> attribute is specified, it's compared against the types Gecko can play, and if it's not recognized, the server doesn't even get queried; instead, the next <strong>source</strong> element is checked at once.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the<code> audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead.  If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. See also the list of <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">media formats supported by the audio and video elements</a> in various browsers.</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.webm" type="video/webm"&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mov" type="video/quicktime"&gt;
+  I'm sorry; your browser doesn't support HTML5 video.
+&lt;/video&gt;
+</pre>
+
+<p>For more examples, see <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using audio and video in Firefox</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'edits.html#the-source-element-when-used-with-the-picture-element', '&lt;source&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition of <code>&lt;source&gt;</code> used inside a {{HTMLElement("picture")}} element.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-source-element', '&lt;source&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition of <code>&lt;source&gt;</code> used inside a media element, {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>media</code> attribute</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>media</code> attribute</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>Currently, only a small subset of the functionality is implemented — Gecko picks the first source element that has a type matching <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">the MIME-type of a supported media format</a>; see {{bug(449363)}} for details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("picture")}} element</li>
+</ul>
+
+<p>{{HTMLRef}}</p>