unslug zh-cn: move

2 files changed, 361 insertions, 0 deletions

diff --git a/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..fd51ef502f
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -0,0 +1,86 @@
+---
+title: Email links
+slug: Web/Guide/HTML/Email_links
+tags:
+  - HTML5
+  - SEO
+  - a
+  - email link
+  - mailto
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links
+translation_of_original: Web/Guide/HTML/Email_links
+---
+<p>这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成<span class="seoSummary">{{HTMLElement("a")}} </span>元素和mailto URL方案。<span class="seoSummary">.</span></p>
+
+<h2 id="Mailto_基础">Mailto 基础</h2>
+
+<p>以它最基础和最常用的形式，一个<code>mailto</code>链接仅简单的指明目标收件人的邮箱地址。例如：</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;
+
+Complete examples detail:
+
+&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com
+&amp;amp;subject=The%20subject%20of%20the%20email
+&amp;amp;body=The%20body%20of%20the%20email"&gt;
+Send mail with cc, bcc, subject and body&lt;/a&gt;</pre>
+
+
+
+<p>这导致链接看起来像这样: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>
+
+<p>事实上, 目标收件人邮件地址都是可选的。 如果你不添加它 (也就是，你的{{htmlattrxref("href", "a")}} 是简单的 "mailto:")，用户的邮件客户端将打开一个新的外发电子邮件窗口，该窗口尚未指定目标地址。这通常非常有用，因为用户可以单击“共享”链接以将电子邮件发送到他们选择的地址。</p>
+
+<h2 id="指定细节">指定细节</h2>
+
+<p>除了电子邮件地址，您还可以提供其他信息。事实上, 任何标准的邮件头字段都可以添加到您提供的<code>mailto</code> URL中。 最广泛使用的是： "subject", "cc", and "body" (这不是真正的标题字段，但允许您为新电子邮件指定简短内容消息). 每个字段及其值都被指定为一个查询字词（query term）。</p>
+
+<div class="blockIndicator note">
+<dl>
+ <dt>译者注：</dt>
+</dl>
+
+<ul>
+ <li>`subject`：主题</li>
+ <li>`cc`：抄送到次要收件人（与邮件有关但无需做出应答的个人或组织）</li>
+ <li> `bcc`：密送到其他收件人。主要、次要收件人不应该获得密送收件人的身份。</li>
+ <li>`body`：邮件内容</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> 每个字段的值都必须进行编码  (也就是, 带有非印刷字符和空格 <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>).</p>
+</div>
+
+<h3 id="样品mailto_网址">样品mailto 网址</h3>
+
+<p>这有一些有关<code> mailto</code> 的示例链接:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
+</ul>
+
+<p>请注意，使用＆符号来分隔mailto URL中的每个字段。这是标准的URL查询表示法。</p>
+
+<h3 id="例子">例子</h3>
+
+<p>如果您想创建一封要求订阅新闻通讯的外发电子邮件, 您可能会使用一个 <code>mailto链接，像这样</code>:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&amp;body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F"&gt;
+Subscribe to our newsletter
+&lt;/a&gt;</pre>
+
+<p>结果链接看起来像这样: <a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&amp;body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F">Subscribe to our newsletter</a>.</p>
+
+<section id="Quick_Links">
+<ol>
+ <li>{{HTMLElement("a")}}</li>
+ <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li>
+ <li>{{RFC(5322, "Internet Message Format")}}</li>
+ <li><a href="http://www.url-encode-decode.com/">URL encode/decode online</a></li>
+</ol>
+</section>
diff --git a/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..f1ebacd184
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,275 @@
+---
+title: 使用 HTML5 音频和视频
+slug: Web/Guide/HTML/Using_HTML5_audio_and_video
+tags:
+  - Flash
+  - HTML
+  - HTML5
+  - Media
+  - Ogg
+  - Web
+  - 媒体
+  - 指南
+  - 概述
+  - 特性
+  - 范例
+  - 视频
+  - 音频
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video
+---
+<p>HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。</p>
+
+<h2 id="嵌入媒体">嵌入媒体</h2>
+
+<p>在HTML中嵌入媒体：</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls&gt;
+  你的浏览器不支持 &lt;code&gt;video&lt;/code&gt; 标签.
+&lt;/video&gt;</pre>
+
+<p>这个例子展示了一个带有回放控制器的可播放视频，视频来源于Theora网站。</p>
+
+<p>下面是一个将音频<span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">嵌入</span>到HTML文档的例子。</p>
+
+<pre class="brush: html">&lt;audio src="/test/audio.ogg"&gt;
+你的浏览器不支持audio标签
+&lt;/audio&gt;</pre>
+</div>
+
+<p>src属性可以设置为一个音频文件的URL或者本地文件的路径。</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;audio src="audio.ogg" controls autoplay loop&gt;
+你的浏览器不支持audio标签
+&lt;/audio&gt;</pre>
+</div>
+
+<p>这个例子的代码中使用了HTML的“audio”元素的一些属性：</p>
+
+<ul>
+ <li><code>controls</code> : 为网页中的音频显示标准的HTML5控制器。</li>
+ <li><code>autoplay</code> : 使音频自动播放。</li>
+ <li><code>loop</code> : 使音频自动重复播放。</li>
+</ul>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;audio src="audio.mp3" preload="auto" controls&gt;&lt;/audio&gt;</pre>
+</div>
+
+<p>preload属性用来缓冲audio元素的大文件，有三个属性值可供设置：</p>
+
+<ul>
+ <li><code>"none"</code> 不缓冲文件</li>
+ <li><code>"auto"</code> 缓冲音频文件</li>
+ <li><code>"metadata"</code> 仅仅缓冲文件的元数据</li>
+</ul>
+
+<p>可以用 {{ HTMLElement("source") }} 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mp4" type="video/mp4"&gt;
+  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
+&lt;/video&gt;
+</pre>
+
+<p>当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">audio和video元素支持的媒体格式</a> 来查看不同浏览器对视频音频编码格式的支持情况。</p>
+
+<p>你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg; codecs=dirac, speex"&gt;
+  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
+&lt;/video&gt;</pre>
+
+<p>在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。</p>
+
+<p>如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。</p>
+
+<p>点击 <a href="https://developer.mozilla.org/en-US/docs/DOM/Media_events">媒体事件</a> 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements.</a></p>
+
+<h2 id="媒体回放控制">媒体回放控制</h2>
+
+<p>当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说，如果你想（重新）开始播放，可以写如下的代码：</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.play();
+</pre>
+
+<p>头一行是取得当前文档中第一个视频元素，下一行调用了该元素的 <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> 方法， 这一方法在实现媒体元素的接口中定义。</p>
+
+<p>控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：</p>
+
+<pre class="brush: html">&lt;audio id="demo" src="audio.mp3"&gt;&lt;/audio&gt;
+&lt;div&gt;
+  &lt;button onclick="document.getElementById('demo').play()"&gt;播放声音&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').pause()"&gt;暂停声音&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').volume+=0.1"&gt;提高音量&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').volume-=0.1"&gt;降低音量&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="终止媒体下载">终止媒体下载</h2>
+
+<p>停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。</p>
+
+<p>以下是即刻停止媒体下载的方法：</p>
+
+<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src='';
+//or
+mediaElement.<code>removeAttribute("src");</code>
+</pre>
+
+<p>通过移除媒体元素的 <code>src</code> 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。removeAttribute() 操作并不干净， 而将&lt;video&gt;元素的 'src' 属性设为空字符串可能会引起我们不想要的请求（Mozilla Firefox 22）。</p>
+
+<p> </p>
+
+<h2 id="在媒体中查找">在媒体中查找</h2>
+
+<p>媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性<code>currentTime的值来达成的；有关元素属性的详细信息请看</code>{{ domxref("HTMLMediaElement") }} 。 简单的设置那个你希望继续播放的以秒为单位时间值。</p>
+
+<p>你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的{{ domxref("TimeRanges") }} 时间对象。</p>
+
+<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // 返回开始时间 (in seconds)
+mediaElement.seekable.end();    // 返回结束时间 (in seconds)
+mediaElement.currentTime = 122; // 设定在 122 seconds
+mediaElement.played.end();      // 返回浏览器播放的秒数
+</pre>
+
+<h2 id="标记播放范围">标记播放范围</h2>
+
+<p><font face="Consolas"><font color="#4d4e53">在给一个&lt;audio&gt;或者&lt;video&gt;元素标签</font>指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。</font></p>
+
+<p><font face="Consolas">一条指定时间范围的语句：</font></p>
+
+<pre>#t=[starttime][,endtime]</pre>
+
+<p>时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。</p>
+
+<p>一些例子：</p>
+
+<dl>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt>
+ <dd>指定视频播放范围为从第10秒到第20秒.</dd>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt>
+ <dd>指定视频从开始播放到第10.5秒.</dd>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt>
+ <dd>指定视频从开始播放到两小时.</dd>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt>
+ <dd>指定视频从第60秒播放到结束.</dd>
+</dl>
+
+<div class="note">
+<p>媒体元素URI中播放范围部分的规范已被加入到 Gecko 9.0 {{ geckoRelease("9.0") }}. 当下, 这是Geoko <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> 唯一实现的部分，并且只有是在非地址栏给媒体元素指定来源时才可使用。</p>
+</div>
+
+<h2 id="备选项">备选项</h2>
+
+<p>在HTML之间，例如，不支持HTML5媒体的浏览器可以处理媒体元素的开始和结束标记.你可以利用这一点给这些浏览器添加一些备项。</p>
+
+<p>此节给视频提供了两个可能的备选项，在各种情况下，如果浏览器支持HTML5视频，它就会被使用，否则，会使用备选项。</p>
+
+<h3 id="使用Flash">使用Flash</h3>
+
+<p>{{ HTMLElement("video") }} <font color="#4d4e53">标签</font>不被支持时可以使用Flash播放Flash格式的影像。</p>
+
+<pre class="brush: html">&lt;video src="video.ogv" controls&gt;
+    &lt;object data="flvplayer.swf" type="application/x-shockwave-flash"&gt;
+      &lt;param value="flvplayer.swf" name="movie"/&gt;
+    &lt;/object&gt;
+&lt;/video&gt;</pre>
+
+<p>注意不要在object标签中加入class、id以兼容IE以外的浏览器。</p>
+
+<h3 id="使用Java_小程序播放Ogg视频">使用Java 小程序播放Ogg视频</h3>
+
+<p>这里有一个名为Cortado的Java小程序，在不支持HTML5视频的浏览器你可以用它作为备选项来播放Ogg视频:</p>
+
+<pre class="brush: html">&lt;video src="my_ogg_video.ogg" controls width="320" height="240"&gt;
+  &lt;object type="application/x-java-applet" width="320" height="240"&gt;
+     &lt;param name="archive" value="cortado.jar"&gt;
+     &lt;param name="code" value="com.fluendo.player.Cortado.class"&gt;
+     &lt;param name="url" value="my_ogg_video.ogg"&gt;
+     &lt;p&gt;You need to install Java to play this file.&lt;/p&gt;
+  &lt;/object&gt;
+&lt;/video&gt;</pre>
+
+<p>如果你没有给cortado object元素创建一个备用的子元素，像上面的 {{ HTMLElement("p") }} 元素，没有安装java的Firfox3.5设备就会错误的通知用户需要安装一个插件才能查看页面内容.</p>
+
+<p>{{ h1_gecko_minversion("错误处理", "2.0") }}</p>
+
+<p>Geocko2.0首发{{ geckoRelease("2.0") }}, 错误处理已经被修订符合HTML5的最新版规范。 取缔把错误事件发送给媒体元素自生的方式，现在把它交付给子代中的 {{ HTMLElement("source") }}元素对应导致错误的来源。</p>
+
+<p>这使你可以查到是哪个资源加载失败，哪个是可用的。</p>
+
+<pre class="brush: html">&lt;video&gt;
+&lt;source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
+&lt;/source&gt;
+&lt;source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
+&lt;/source&gt;
+&lt;source id="ogg_src"
+  src="video.ogv"
+  type='video/ogg; codecs="theora, vorbis"'&gt;
+&lt;/source&gt;
+&lt;/video&gt;</pre>
+
+<p>由于专利限制，Firefox不支持MP4和3GP，ID为“mp4_src"和"3gp_src"的 {{ HTMLElement("source") }} 元素在Ogg资源加载之前将会接收到错误事件。这些资源会根据出现的顺序尝试被加载，一旦有一个资源加载成功，剩下的资源就不会被加载。</p>
+
+<h3 id="没有资源加载成功时的检测">没有资源加载成功时的检测</h3>
+
+<p>检测是否所有的子{{ HTMLElement("source") }} 元素都加载失败，检查媒体元素的networkState属性值。如果值为HTMLMediaElement.NETWORK_NO_SOURCE，就可以知道所以的资源都加载失败了。</p>
+
+<p>如果这时你通过插入一个新的 {{ HTMLElement("source") }} 元素作为媒体元素的子元素的方法添加一个新资源，Gecko会尝试加载指定的资源。</p>
+
+<h3 id="没有资源可用时显示备用内容">没有资源可用时显示备用内容</h3>
+
+<p>另一个显示视频的备用内容的方法是在最后一个source元素上增加一个错误处理器。</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="dynamicsearch.mp4" type="video/mp4"&gt;&lt;/source&gt;
+  &lt;a href="dynamicsearch.mp4"&gt;
+    &lt;img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"&gt;
+  &lt;/a&gt;
+  &lt;p&gt;Click image to play a video demo of dynamic app search&lt;/p&gt;
+&lt;/video&gt;
+
+</pre>
+
+<pre class="brush: js">var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+</pre>
+
+<h2 id="相关文章">相关文章</h2>
+
+<ul>
+ <li>The media-related HTML elements: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li>
+ <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li>
+ <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introducing the Audio API Extension</a></li>
+ <li>{{ interface("nsIDOMHTMLMediaElement") }}</li>
+ <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
+ <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li>
+ <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li>
+ <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)</li>
+ <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a Flash library which implements a Vorbis decoder</li>
+ <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL</li>
+ <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, an audio/video playback solution in Java maintained by Xiph.org</li>
+ <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, an open source HTML5 video player and framework.</li>
+ <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.</li>
+ <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li>
+ <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - for HTML5 video</li>
+</ul>