initial commit

77 files changed, 14740 insertions, 0 deletions

diff --git a/files/zh-cn/web/guide/ajax/getting_started/index.html b/files/zh-cn/web/guide/ajax/getting_started/index.html
new file mode 100644
index 0000000000..4aed922902
--- /dev/null
+++ b/files/zh-cn/web/guide/ajax/getting_started/index.html
@@ -0,0 +1,273 @@
+---
+title: Getting Started
+slug: Web/Guide/AJAX/Getting_Started
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
+
+<p class="summary">这篇文章旨在帮助你了解AJAX基础，并提供两个可上手的简单案例供你学习。</p>
+
+<h2 id="什么是AJAX？">什么是AJAX？</h2>
+
+<p>AJAX是异步的JavaScript和XML（<strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML）。简单点说，就是使用 <code><a href="/en/DOM/XMLHttpRequest">XMLHttpRequest</a></code> 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。</p>
+
+<p>你可以使用AJAX最主要的两个特性做下列事：</p>
+
+<ul>
+ <li>在不重新加载页面的情况下发送请求给服务器。</li>
+ <li>接受并使用从服务器发来的数据。</li>
+</ul>
+
+<h2 id="Step_1_–_怎样发送http请求">Step 1 – 怎样发送http请求</h2>
+
+<p>为了使用JavaScript向服务器发送一个http请求，你需要一个包含必要函数功能的对象实例。这就是为什么会有 <code>XMLHttpRequest</code> 的原因。 这是IE浏览器的ActiveX对象 <code>XMLHTTP</code>的前身。 随后Mozilla，Safari和其他浏览器也都实现了类似的方法，被称为 <code>XMLHttpRequest</code> 。同时，微软也实现了XMLHttpRequest方法。</p>
+
+<pre class="brush: js">// Old compatibility code, no longer needed.
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 and older
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<div class="note"><strong>Note: 上面代码只是简单版的如何创建一个XMLHttp实例。更实际的例子，请看本篇文章的step 3。</strong></div>
+
+<p>发送一个请求后，你会收到响应。在这一阶段，你要告诉XMLHttp请求对象是由哪一个JavaScript函数处理响应，在设置了对象的 <code>onreadystatechange </code>属性后给他命名，当请求状态改变时调用函数。</p>
+
+<pre class="brush: js"><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre>
+
+<p>要注意的是，函数名后没有参数，因为你把一个引用赋值给了函数，而不是真正的调用了它。 此外，如果不使用函数名的方式，你还可以用JavaScript的匿名函数响应处理的动作，就像下面这样：</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = function(){
+    // Process the server response here.
+};
+</pre>
+
+<p>接下来，声明当你接到响应后要做什么，你要发送一个实际的请求，通过调用HTTP请求对象的 <code>open()</code> 和 <code>send()</code> 方法，像下面这样:</p>
+
+<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+</pre>
+
+<ul>
+ <li><code>open()</code> 的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。更多关于HTTP的请求方法，可以查看 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C specs</a>。</li>
+ <li>第二个参数是你要发送的URL。由于安全原因，默认不能调用第三方URL域名。 确保你在页面中使用的是正确的域名，否则在调用 <code>open()</code> 方法是会有 "permission denied" 错误提示。一个容易犯的错误是你企图通过 <code>domain.tld</code> 访问网站， 而不是使用 <code>www.domain.tld</code>。如果你真的需要向另一个域名发送请求, 可以查看 <a href="/En/HTTP_access_control">HTTP access control</a>。</li>
+ <li>第三个参数是可选的，用于设置请求是否是异步的。如果设为 <code>true</code> (默认值)，即开启异步，JavaScript就不会在此语句阻塞，使得用户能在服务器还没有响应的情况下与页面进行交互。</li>
+</ul>
+
+<p><code>send()</code> 方法的参数可以是任何你想发送给服务器的内容，如果是 <code>POST</code> 请求的话。发送表单数据时应该用服务器可以解析的格式，像查询语句：</p>
+
+<pre><code>"name=value&amp;anothername="+encodeURIComponent(myVar)+"&amp;so=on"</code></pre>
+
+<p>或者其他格式, 类似 <code>multipart/form-data</code>，JSON，XML等。</p>
+
+<p>如果你使用 POST 数据，那就需要设置请求的MIME类型。比如，在调用 <code>send()</code> 方法获取表单数据前要有下面这个：</p>
+
+<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<h2 id="Step_2_–_处理服务器响应">Step 2 – 处理服务器响应</h2>
+
+<p>在发送请求时，你提供的JavaScript函数名负责处理响应：</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction;
+</pre>
+
+<p>这个函数应该做什么？首先，函数要检查请求的状态。如果状态的值是 <code>XMLHttpRequest.DONE</code> （对应的值是4），意味着服务器响应收到了并且是没问题的，然后就可以继续执行。</p>
+
+<pre class="brush: js">if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // Everything is good, the response was received.
+} else {
+    // Not ready yet.
+}
+</pre>
+
+<p>全部readyState状态值都在 <a href="/en-US/docs/Web/API/XMLHttpRequest#Properties">XMLHTTPRequest.readyState</a>，如下也是：</p>
+
+<ul>
+ <li>0 (未初始化) or (<strong>请求还未初始化</strong>)</li>
+ <li>1 (正在加载) or (<strong>已建立</strong><strong>服务器链接</strong>)</li>
+ <li>2 (加载成功) or (<strong>请求已接受</strong>)</li>
+ <li>3 (交互) or (<strong>正在处理请求</strong>)</li>
+ <li>4 (完成) or (<strong>请求已完成并且响应已准备好</strong>)</li>
+</ul>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/en-us//library/ms534361%28en-us,VS.85%29.aspx">Source</a>)</p>
+
+<p>接下来，点击HTTP响应的 <a href="/en/HTTP#HTTP_Response_Codes">response code</a>。 可能的响应码都已经列在 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a>这个列表里。在下面的例子中，我们通过检查响应码 <code>200 OK</code> 判断AJAX有没有成功。</p>
+
+<pre class="brush: js">if (httpRequest.status === 200) {
+    // Perfect!
+} else {
+    // There was a problem with the request.
+    // For example, the response may have a 404 (Not Found)
+    // or 500 (Internal Server Error) response code.
+}</pre>
+
+<p>在检查完请求状态和HTTP响应码后， 你就可以用服务器返回的数据做任何你想做的了。你有两个方法去访问这些数据：</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – 服务器以文本字符的形式返回</li>
+ <li><code>httpRequest.responseXML</code> – 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理</li>
+</ul>
+
+<p>注意上面这一步只在你发起异步请求时有效（即 <code>open()</code> 的第三个参数未特别指定或设为 <code>true</code>）。如果你你发起的是<strong>同步</strong>请求则不必使用函数，但是非常不推荐这样子做，它的用户体验很糟糕。</p>
+
+<h2 id="Step_3_–_一个简单的例子">Step 3 – 一个简单的例子</h2>
+
+<p>让我们把所有的知识都集中起来做一个简单的HTTP请求。这个JavaScript会请求一个HTML文档 <code>test.html</code>，包含 "I'm a  test" 内容。然后我们 <code>alert()</code> 响应的内容。注意这个例子我们只是用了JavaScript，没有用jQuery。而且，HTML，XML和PHP文件都要放在用一个目录下。</p>
+
+<pre class="brush: html">&lt;button id="ajaxButton" type="button"&gt;Make a request&lt;/button&gt;
+
+&lt;script&gt;
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Giving up :( Cannot create an XMLHTTP instance');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+})();
+&lt;/script&gt;
+</pre>
+
+<p>在这个例子中：</p>
+
+<ul>
+ <li>用户点击 “Make a request” 按钮；</li>
+ <li>事件处理调用 <code>makeRequest()</code> 函数；</li>
+ <li>请求已通过然后（<code>onreadystatechange</code>）传给 <code>alertContents()</code> 执行。</li>
+ <li><code>alertContents()</code> 检查返回的响应是否OK，然后 <code>alert()</code> <code>test.html</code> 文件内容。</li>
+</ul>
+
+<div class="note"><strong>Note</strong>: 如果你向一个代码片段发送请求，将返回XML，而不是静态XML文件，在IE浏览器上则必须要设置响应头才能正常工作。如果不设置响应头为 <code>Content-Type:application/xml</code> ，IE浏览器会在你访问XML元素时抛出 “Object Expected” 错误。</div>
+
+<div class="note"><strong>Note 2</strong>: 如果不设置响应头 <code>Cache-Control: no-cache</code> 浏览器将会把响应缓存下来而且再也无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">bypassing the cache</a>)</div>
+
+<div class="note"><strong>Note 3</strong>: 如果变量 <code>httpRequest</code> 在全局范围内使用，它会在 <code>makeRequest()</code> 函数中被相互覆盖，从而导致资源竞争。为了避免这个情况，请在包含 AJAX 函数的<a href="/zh-CN/docs/Web/JavaScript/Closures">闭包</a>中声明 <code>httpRequest </code>变量。</div>
+
+<p>在通信错误的事件中（例如服务器宕机），在访问响应状态 onreadystatechange 方法中会抛出一个例外。为了缓和这种情况，则可以使用 <code>try...catch</code> 把 <code>if...then</code> 语句包裹起来。</p>
+
+<pre class="brush: js">function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+  catch( e ) {
+    alert('Caught Exception: ' + e.description);
+  }
+}
+</pre>
+
+<h2 id="Step_4_–_处理_XML_响应">Step 4 – 处理 XML 响应</h2>
+
+<p>在上一个例子中，在收到HTTP请求的响应后我们会请求对象的 <code>responseText</code> 属性，包含 <code>test.html</code> 文件的内容。现在我们试试 <code>responseXML </code>属性。 </p>
+
+<p>首先，我们创建一个稍后将要请求的有效的 XML 文档。文档（<code>test.html</code>）包含以下内容：</p>
+
+<pre class="brush: html">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>在脚本里我们只需要把请求行改为：</p>
+
+<pre class="brush: html">...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>然后在 <code>alertContents()</code> 里，我们把 <code>alert(httpRequest.responseText)</code> 改为：</p>
+
+<pre class="brush: js">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>这部分代码采用 <code>responseXML</code> 提供的 <code>XMLDocument</code> 对象，并使用 DOM 方法访问 XML 文档中包含的一些数据。你可以在<a href="http://www.w3clubs.com/mozdev/test.xml">这里</a>查看 <code>test.xml</code> 并且在<a href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">这里</a>更新测试代码。</p>
+
+<h2 id="Step_5_–_处理数据">Step 5 – 处理数据</h2>
+
+<p>最后，我们发送一个数据给服务器并收到响应。这次我们用 JavaScript 请求动态页面，<code>test.php</code>  并返回一个计算后的字符串 - “Hello, [user date]”，并用 <code>alert()</code> 出来。</p>
+
+<p>首先要添加一个文本到 HTML 中以方便用户输入名字：</p>
+
+<pre class="brush: html">&lt;label&gt;Your name:
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;
+</pre>
+
+<p>还要添加事件处理程序，从表单中获取用户数据连同服务器端的UTL一并发送给 makeRequest()  函数：</p>
+
+<pre class="brush: js">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+</pre>
+
+<p>我们还要修改 <code>makeRequest()</code> 让它接受用户数据并将其发给服务器。把请求方法从 <code>GET</code> 改为 <code>POST</code>，把数据作为参数让<code> httpRequest.send()</code> 调用。</p>
+
+<pre class="brush: js">  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+</pre>
+
+<p>如果这就是服务器返回的全部内容，<code>alertContents()</code> 函数可以使用 step 3 中的相同函数写。可是，服务器会返回计算后的内容和原内容。所以，如果用户输入 “Jane” 在输入框中，那服务器就会返回如下内容：</p>
+
+<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p>
+
+<p>为了在 <code>alertContents()</code> 中使用这个数据，我们可不能只是alert <code>responseText</code> ，我们要解析它并 alert <code>conputedString</code>，我们想要的属性：</p>
+
+<pre class="brush: js">function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}
+</pre>
+
+<p><code>test.php 文件应该包含以下内容：</code></p>
+
+<pre class="brush: php"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</code></pre>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">想获取更多 DOM 方法，可以查看</span></font><code> <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> 文档.</code></p>
diff --git a/files/zh-cn/web/guide/ajax/index.html b/files/zh-cn/web/guide/ajax/index.html
new file mode 100644
index 0000000000..875ee9c9d6
--- /dev/null
+++ b/files/zh-cn/web/guide/ajax/index.html
@@ -0,0 +1,93 @@
+---
+title: Ajax
+slug: Web/Guide/AJAX
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">新手入门</a></strong><br>
+ Ajax简介</div>
+
+<div>
+<p>Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> 或 <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>,  <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, 以及最重要的 {{domxref("XMLHttpRequest")}}。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。</p>
+
+<p>尽管X在Ajax中代表XML, 但由于{{glossary("JSON")}}的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="文档">文档</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started">新手入门</a></dt>
+ <dd>本文将为您引导完成ajax基础知识，并为您提供两个简单的实际操作示例。</dd>
+ <dt><a href="/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">使用XMLHttpRequest API</a></dt>
+ <dd>{{domxref("XMLHttpRequest")}}<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest"> API</a>是Ajax的核心。本文将解释如何使用一些Ajax技术，比如：
+ <ul>
+  <li><a href="/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">分析和操纵服务器响应</a></li>
+  <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">监控请求过程</a></li>
+  <li><a href="https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#提交表单和上传文件"> 提交表单或者上传二进制文件</a>– 使用纯Ajax或者{{domxref("FormData")}}对象</li>
+  <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">创建异步或同步请求</a></li>
+  <li>在<a href="/zh-CN/docs/Web/API/Web_Workers_API">Web workers</a>中使用Ajax</li>
+ </ul>
+ </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a></dt>
+ <dd>Fetch API 提供一个获取资源的接口。对于用过 {{domxref("XMLHTTPRequest")}} 的人来说会觉得很熟悉，但这个API提供了更加强大且灵活的特性。</dd>
+ <dt><a href="/zh-CN/docs/Server-sent_events">Server-sent 事件</a></dt>
+ <dd>在过去，一个网页必须发送请求到服务器来获取新的数据，也就是说，网页必须主动向服务器请求数据。有了server-sent events之后，服务器可以向网页推送消息，使得服务器可以随时向网页传送数据。这些发送过来的消息可以看作是带有数据的<a href="/en-US/docs/DOM/event">事件</a>。参见: <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd>
+ <dt><a href="/zh-CN/docs/Web/API/History_API/Example">纯 Ajax 导航示例 </a></dt>
+ <dd>本文提供了一个仅由三个页面组成的纯Ajax网站的（简易）工作示例。</dd>
+ <dt><a href="/zh-CN/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">发送和接收二进制数据</a></dt>
+ <dd>可以设置 <code>XMLHttpRequest</code> 对象的 <code>responseType</code> 属性以改变从服务器端获取数据的类型。可接受的值为空字符串（默认）、<code>arraybuffer</code>、<code>blob</code>、<code>document</code>、<code>json</code> 以 及 <code>text</code>。 <code>response</code> 属性性根据 <code>responseType</code> 的值成为对应的数据对象，如 <code>ArrayBuffer<font face="Arial, x-locale-body, sans-serif">，</font></code><code>Blob</code>、 <code>Document</code>、 <code>JSON</code> 或者 <code>string</code> 。本文会展示一些Ajax I/O技术。</dd>
+ <dt><a href="/zh-CN/docs/Glossary/XML">XML</a></dt>
+ <dd>The <strong>Extensible Markup Language (XML)</strong> 可扩展标记语言是W3C推荐的一种专用于创建专用标记语言的通用标记语言 。它是SGML的简化子集，能够描述许多不同类型的数据。其主要目的是促进在不同的系统，尤其是通过互联网连接的系统间的数据共享。</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/Parsing_and_serializing_XML">解析和序列化 XML</a></dt>
+ <dd>如何从字符串，文件或者Javascript中解析XML文档，以及如何将XML文档序列转化为字符串，Javascript对象树 (JSON)或者文件 。</dd>
+ <dt><a href="/zh-CN/docs/Web/XPath">XPath</a></dt>
+ <dd>XPath 代表<strong>X</strong>ML <strong>Path</strong> Language,它使用非XML 语法，提供了一种灵活的方式来寻址（指向）XML文档的不同部分。除此之外，它还可以用于测试文档中的寻址节点，以确定他们是否匹配模式。</dd>
+ <dt>{{domxref("FileReader")}}<a href="/zh-CN/docs/WEB/API/FileReader"> API</a></dt>
+ <dd> <code>FileReader</code> API允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓存）的内容，使用 {{domxref("File")}} 或 {{domxref("Blob")}} 对象指定要读取的文件或数据。文件对象可以从用户选择文件后的 {{HTMLElement("input")}} 元素的 {{domxref("FileList")}} 对象中获取，也可以从拖放操作的 {{domxref("DataTransfer")}} 对象获取，或者从{{domxref("HTMLCanvasElement")}} 的<code>mozGetAsFile()</code> API获取。</dd>
+ <dt><a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest对HTML的支持</a> </dt>
+ <dd>W3C <a href="https://xhr.spec.whatwg.org/">XMLHttpRequest</a>规范向XMLHttpRequest添加了HTML解析支持，XMLHttpRequest原本只支持XML解析。此功能允许Web应用程序使用XMLHttpRequest获取HTML资源作为解析的DOM。</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/zh-CN/docs/tag/AJAX" title="zh-CN/docs/tag/AJAX">View All...</a></span></p>
+
+<h2 class="Other" id="参见">参见</h2>
+
+<dl>
+ <dt><a href="https://pdfs.semanticscholar.org/c440/ae765ff19ddd3deda24a92ac39cef9570f1e.pdf">Ajax: A New Approach to Web Applications</a></dt>
+ <dd>Jesse James Garrett在2005年2月写了这篇文章 <a href="http://www.adaptivepath.com/">adaptive path</a>，介绍了Ajax及其相关概念。</dd>
+ <dt><a href="https://xhr.spec.whatwg.org/">XMLHttpRequest Specification</a></dt>
+ <dd>WHATWG 现行标准</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="工具">工具</h2>
+
+<ul>
+ <li class="Tools"><a href="http://www.ajaxprojects.com/">工具包和框架 </a></li>
+ <li class="Tools"><a href="http://getfirebug.com/">Firebug - Ajax / Web开发工具</a></li>
+ <li class="Tools"><a href="http://blog.monstuff.com/archives/000252.html">AJAX调试工具 </a></li>
+ <li class="Tools"><a href="Flash/AJAX Integration Kit">Flash / AJAX集成套件</a></li>
+ <li class="Tools"><a href="http://xkr.us/code/javascript/XHConn/">一个简单的XMLHTTP接口库</a></li>
+ <li class="Tools"><a href="https://github.com/axios/axios">axios</a> 基于 {{jsxref("Promise")}} 的 {{glossary("HTTP")}} 客户端，使用<code>XMLHttpRequest</code> 实现。</li>
+</ul>
+
+<p class="Tools"><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p>
+
+<h2 id="例子">例子</h2>
+
+<ul>
+ <li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">Ajax poller脚本</a></li>
+ <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax聊天教程</a></li>
+ <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS代码与Ajax</a></li>
+ <li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">创建自己的Ajax效果</a></li>
+ <li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax：创建巨大的书签</a></li>
+ <li><a href="http://www.hotajax.org/">Ajax：Hot！Ajax有很多很酷的例子</a></li>
+</ul>
+
+<h2 class="Related_Topics" id="相关主题">相关主题</h2>
+
+<p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p>
+</div>
+</div>
diff --git a/files/zh-cn/web/guide/api/camera/index.html b/files/zh-cn/web/guide/api/camera/index.html
new file mode 100644
index 0000000000..64fe08d634
--- /dev/null
+++ b/files/zh-cn/web/guide/api/camera/index.html
@@ -0,0 +1,219 @@
+---
+title: 使用Camera API
+slug: Web/Guide/API/Camera
+translation_of: Archive/B2G_OS/API/Camera_API/Introduction
+---
+<p>通过<a class="link-https" href="https://wiki.mozilla.org/Platform/Features/Camera_API">Camera API</a>,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.这些操作主要是通过一个<code>input元素</code>来实现的,其中该元素的<code>type属性必须为"file",</code><code>accept属性要允许图片格式,</code>这样才能知道这个文件选择框是用来选择图片的.,完整的HTML结构看起来是这样的:</p>
+<pre class="brush: html">&lt;input type="file" id="take-picture" accept="image/*"&gt;
+</pre>
+<p>当用户激活这个HTML元素的时候,系统会呈现给用户一个选择界面,其中一个选项是选择本地的图片文件,另一个选项是要通过摄像头直接 拍摄照片作为所选文件.如果用户选择了摄像头,则会进入手机的拍照模式.拍照结束后,,用户可以选择确定还是放弃.如果接受了,则该照片会作为所选文件发 送给那个<code>&lt;input type="file"&gt;</code>元素,同时触发该元素的<code>onchange事件</code>.</p>
+<h2 id="获取到所拍摄照片的引用">获取到所拍摄照片的引用</h2>
+<p>通过<a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">File API</a>,你可以获取到用户所拍摄的照片或者所选择的图片文件的引用:</p>
+<pre class="brush: js">var takePicture = document.querySelector("#take-picture");
+takePicture.onchange = function (event) {
+    // 获得图片文件的引用
+    var files = event.target.files,
+        file;
+    if (files &amp;&amp; files.length &gt; 0) {
+        file = files[0];
+    }
+};
+</pre>
+<h2 id="在网页中展示图片">在网页中展示图片</h2>
+<p>如果你获取到了那张照片的引用(也就是File对象),你就可以使用{{ domxref("window.URL.createObjectURL()") }}方法创建一个指向那个照片的URL,然后把得到的URL赋给<code>img</code>元素的<code>src属性</code>:</p>
+<pre class="brush: js">// 获取到img元素
+var showPicture = document.querySelector("#show-picture");
+
+// 获取到window.URL对象
+var URL = window.URL || window.webkitURL;
+
+// 创建一个对象URL字符串
+var imgURL = URL.createObjectURL(file);
+
+// 设置img元素的src属性为那个URL
+showPicture.src = imgURL;
+
+// 释放那个对象URL,提高性能
+URL.revokeObjectURL(imgURL);
+</pre>
+<p>如果浏览器不支持<code>createObjectURL()</code>方法,还可以使用{{ domxref("FileReader") }}来实现:</p>
+<pre class="brush: js">// 如果createObjectURL方法不可用
+var fileReader = new FileReader();
+fileReader.onload = function (event) {
+    showPicture.src = event.target.result;
+};
+fileReader.readAsDataURL(file);
+</pre>
+<h2 id="完整的示例代码">完整的示例代码</h2>
+<p>这里有一个<a class="external" href="http://robnyman.github.com/camera-api/">完整的使用Camera API的demo</a>,下面是这个demo的完整代码:</p>
+<h3 id="HTML页面">HTML页面:</h3>
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;meta charset="utf-8"&gt;
+        &lt;title&gt;Camera API&lt;/title&gt;
+        &lt;link rel="stylesheet" href="css/base.css" type="text/css" media="screen"&gt;
+    &lt;/head&gt;
+
+    &lt;body&gt;
+
+        &lt;div class="container"&gt;
+            &lt;h1&gt;Camera API&lt;/h1&gt;
+
+            &lt;section class="main-content"&gt;
+                &lt;p&gt;A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).&lt;/p&gt;
+
+                &lt;p&gt;
+                    &lt;input type="file" id="take-picture" accept="image/*"&gt;
+                &lt;/p&gt;
+
+                &lt;h2&gt;Preview:&lt;/h2&gt;
+                &lt;p&gt;
+                    &lt;img src="about:blank" alt="" id="show-picture"&gt;
+                &lt;/p&gt;
+
+                &lt;p id="error"&gt;&lt;/p&gt;
+
+            &lt;/section&gt;
+
+            &lt;p class="footer"&gt;All the code is available in the &lt;a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api"&gt;Camera API repository on GitHub&lt;/a&gt;.&lt;/p&gt;
+        &lt;/div&gt;
+
+
+        &lt;script src="js/base.js"&gt;&lt;/script&gt;
+
+
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="JavaScript文件">JavaScript文件:</h3>
+<pre class="brush: js">(function () {
+    var takePicture = document.querySelector("#take-picture"),
+        showPicture = document.querySelector("#show-picture");
+
+    if (takePicture &amp;&amp; showPicture) {
+        // Set events
+        takePicture.onchange = function (event) {
+            // Get a reference to the taken picture or chosen file
+            var files = event.target.files,
+                file;
+            if (files &amp;&amp; files.length &gt; 0) {
+                file = files[0];
+                try {
+                    // Get window.URL object
+                    var URL = window.URL || window.webkitURL;
+
+                    // Create ObjectURL
+                    var imgURL = URL.createObjectURL(file);
+
+                    // Set img src to ObjectURL
+                    showPicture.src = imgURL;
+
+                    // Revoke ObjectURL
+                    URL.revokeObjectURL(imgURL);
+                }
+                catch (e) {
+                    try {
+                        // Fallback if createObjectURL is not supported
+                        var fileReader = new FileReader();
+                        fileReader.onload = function (event) {
+                            showPicture.src = event.target.result;
+                        };
+                        fileReader.readAsDataURL(file);
+                    }
+                    catch (e) {
+                        //
+                        var error = document.querySelector("#error");
+                        if (error) {
+                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
+                        }
+                    }
+                }
+            }
+        };
+    }
+})();
+</pre>
+<h2 id="浏览器兼容性">浏览器兼容性</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>Camera API</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
+        <td>16</td>
+        <td>{{CompatGeckoDesktop("8.0")}}</td>
+        <td>10+</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+      <tr>
+        <td>{{domxref("FileReader")}}</td>
+        <td>16</td>
+        <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+        <td>10+</td>
+        <td>11.6+</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Camera API</td>
+        <td>3.0</td>
+        <td>{{ CompatVersionUnknown() }}</td>
+        <td>{{ CompatGeckoMobile("10.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
+        <td>4</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatGeckoMobile("10.0")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+      <tr>
+        <td>{{domxref("FileReader")}}</td>
+        <td>3</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatGeckoMobile("10.0")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>11.1</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p> </p>
diff --git a/files/zh-cn/web/guide/api/dom/index.html b/files/zh-cn/web/guide/api/dom/index.html
new file mode 100644
index 0000000000..934a091ddb
--- /dev/null
+++ b/files/zh-cn/web/guide/api/dom/index.html
@@ -0,0 +1,32 @@
+---
+title: DOM 开发者指南
+slug: Web/Guide/API/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+
+<p><a href="https://developer.mozilla.org/docs/DOM">文档对象模型</a>（ <a href="/docs/DOM">Document Object Model</a>） 是为 <a href="/en-US/docs/HTML">HTML</a> 和<a href="/en-US/docs/XML">XML</a> 文档编写的应用程序接口。它为文档提供了结构化的描述, 使得开发者能够修改它们的内容和展现方式. 更重要的是, 它可以将网页与脚本或编程语言连接起来。</p>
+
+<p>开发者能用来修改和创建网页的所有性质、方法和事件都被组织到<a href="/en-US/docs/Gecko_DOM_Reference">对象</a>( <a href="/en-US/docs/Gecko_DOM_Reference">objects</a>)中， (例如, document 对象代表着文档本身，table 对象代表 一个 HTML 表格元素等等)。在较新的网络浏览器中，这些对象都可以用脚本语言获取。</p>
+
+<p>DOM模型常被用来与 <a href="/en-US/docs/JavaScript">JavaScript</a>交互。然而，DOM是独立于任何编程语言之外而设计的，这使得文档的结构化描述可以从一个<a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference">单个、兼容的接口</a>获取，尽管我们青睐于Javascript,但我们可以为任何语言创建DOM的引用接口。</p>
+
+<p><a href="http://www.w3.org/">万维网联盟组织</a>（ <a href="http://www.w3.org/">World Wide Web Consortium</a> ）为DOM建立了一套标准， 叫做<a href="http://www.w3.org/DOM/"> W3C DOM</a>。它被如今大多数主流浏览器所支持，使得可以开发出强大的跨浏览器应用。</p>
+
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">为什么DOM很重要？</h2>
+
+<p>"动态超文本链接语言" (<a href="/en-US/docs/DHTML">DHTML</a>) 是一个被一些开发者们用来描述结合HTML、样式表、脚本而使文档富有动态效果技术的名词。 W3C DOM工作组致力于开发可操作的、不受语言限制并被大家所认同的解决方案 (可参见 <a href="http://www.w3.org/DOM/faq.html">W3C 问答</a>).</p>
+
+<p>正如 Mozilla 的标题"网络应用程序平台”所强调的, 对DOM的支持是核心的特点，也是Mozilla能取代其它浏览器所必需的特点。更为重要的事实是--Mozilla（包括Firefox和Thunderbird）的用户界面都是用<a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a>创建的，并且用DOM<a href="https://developer.mozilla.org/en-US/docs/Dynamically_modifying_XUL-based_user_interface">修改自己的用户界面</a>。</p>
+
+<h2 id="更多关于DOM的内容">更多关于DOM的内容</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p> </p>
diff --git a/files/zh-cn/web/guide/api/dom/storage/index.html b/files/zh-cn/web/guide/api/dom/storage/index.html
new file mode 100644
index 0000000000..b74a5ba6f0
--- /dev/null
+++ b/files/zh-cn/web/guide/api/dom/storage/index.html
@@ -0,0 +1,541 @@
+---
+title: Storage
+slug: Web/Guide/API/DOM/Storage
+translation_of: Web/API/Web_Storage_API
+---
+<h3 id="概述">
+	概述</h3>
+<p>
+	DOM存储是一套在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> 规范中首次引入的与<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关的特性</a>的总称, 现在已经分离出来,单独发展成为独立的<a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web存储</a>规范. DOM存储被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法.该特性在<a href="/zh-cn/Firefox_2_for_developers" title="zh-cn/Firefox_2_for_developers">Firefox 2</a> 和 <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>中首次引入.</p>
+<div class="note">
+	<strong>注意:</strong> DOM存储有别于<a href="/zh-cn/Storage" title="zh-cn/Storage">mozStorage</a> (Mozilla的XPCOM接口,用来访问SQLite) 也有别于<a href="/zh-cn/Session_store_API" title="zh-cn/Session_store_API">Session store API</a> (一个<a href="/zh-cn/XPCOM" title="zh-cn/XPCOM">XPCOM</a> 存储工具,主要为扩展程序使用).</div>
+<h3 id="描述">
+	描述</h3>
+<p>
+	DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).</p>
+<p>
+	基于Mozilla的浏览器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了自己的DOM存储规范的实现. (如果你想让自己的代码兼容多个浏览器,则你需要照顾一下老版本的IE浏览器,IE下有一个类似的特性,在IE8之前版本也可以使用,叫做"<a class="external" href="http://msdn.microsoft.com/zh-cn/library/ms531424%28VS.85%29.aspx">userData behavior</a>",它允许你在多重浏览器会话中永久地保存数据.)</p>
+<p>
+	DOM存储很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器<a href="http://en.wikipedia.org/wiki/HTTP_cookie">cookie</a>的能力有限，而且不支持组织持久数据，其他方法（如<a href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">flash本地存储</a>）需要外部插件支持。</p>
+<p>
+	由<a href="http://aaronboodman.com/">Aaron Boodman</a>编写的<a href="http://aaronboodman.com/halfnote/">halfnote</a>（笔记类应用程序）是第一批使用新的DOM存储功能（不包括internet explorer的userData behavior）开发的公开应用程序之一。在这个应用里，Aaron同时将笔记保存到服务器（当网络可用时）和本地，这允许使用者即使在不稳定的网络环境下也能安全的记录备注事项。</p>
+<p>
+	虽然halfnote的理念和实现比较简单，但是halfnote的创新展示了一种在线上和线下都可用的新型web应用的可能性。</p>
+<h3 id="参考">
+	参考</h3>
+<p>
+	以下所提到的对象都是全局对象，作为 <a href="/zh-cn/DOM/window" title="/zh-cn/DOM/window">window 对象</a> 的属性存在。这意味着可以以 <code>sessionStorage</code> 或者 <code>window.sessionStorage 的形式访问这些对象。</code>(这点很重要，因为可以使用iframe来存储、访问除了直接包含在页面的数据之外的附加数据。)</p>
+<h4 id="Storage">
+	<code>Storage</code></h4>
+<p>
+	它是所有Storage实例（<code>sessionStorage</code>和<code>globalStorage[location.hostname]</code>）的构造函数，设置<code>Storage.prototype.removeKey = function(key) { this.removeItem(this.key(key)) }</code>，可通过<code>localStorage.removeKey</code> 和 <code>sessionStorage.removeKey</code>访问到。</p>
+<p>
+	<code>globalStorage</code>对象不是<code>Storage</code>的实例，而是<code>StorageObsolete</code>的一个实例。</p>
+<p>
+	<code>Storage</code>被定义在WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> 中,如下:</p>
+<pre class="eval">interface <dfn>Storage</dfn> {
+  readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>;
+  [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index);
+  [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key);
+  [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data);
+  [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key);
+  void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>();
+};
+</pre>
+<div class="note">
+	<strong>注意：</strong>虽然可以直接通过标准的 JavaScript 属性访问方法来设置和读取值，但是推荐的做法是使用 getItem 和 setItem 方法。</div>
+<div class="note">
+	<strong>注意：</strong>需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 <code>.toString</code> 方法被转换成字符串。所以一个普通对象将会被存储为 <code>"[object Object]"</code>，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。</div>
+<h4 id="sessionStorage_2">
+	<code>sessionStorage</code></h4>
+<p>
+	<code>sessionStorage</code> 是个全局对象，它维护着<span style="line-height: inherit;">在页面会话(page session)期间有效的</span><span style="line-height: inherit;">存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。</span><span style="line-height: inherit;"> </span></p>
+<pre class="brush: js">// 保存数据到当前会话的存储空间
+sessionStorage.setItem("username", "John");
+
+// 访问数据
+alert( "username = " + sessionStorage.getItem("username"));
+</pre>
+<p>
+	当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。<code>sessionStorage</code> 对象在处理这种情况的时候是最有用的。</p>
+<p>
+	{{ fx_minversion_note("3.5", "在Firefox 3.5之前的版本中,如果浏览器意外崩溃,则在重启后,sessionStorage中保存的数据不会被恢复.之后的版本中,会恢复上次崩溃前的sessionStorage数据.") }}</p>
+<p>
+	<strong>例子:</strong></p>
+<p>
+	自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。</p>
+<pre class="brush: js"> // 获取到我们要循环保存的文本域
+ var field = document.getElementById("field");
+
+ // 查看是否有一个自动保存的值
+ // (只在浏览器被意外刷新时)
+ if ( sessionStorage.getItem("autosave")) {
+    // 恢复文本域中的内容
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // 每隔一秒检查文本域中的内容
+ setInterval(function(){
+    // 并将文本域的值保存到session storage对象中
+    sessionStorage.setItem("autosave", field.value);
+ }, 1000);
+</pre>
+<p>
+	<strong>更多信息:</strong></p>
+<ul>
+	<li>
+		<a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li>
+</ul>
+<h4 id="localStorage">
+	<code>localStorage</code></h4>
+<p>
+	<code>localStorage</code> is the same as sessionStorage with same same-origin rules applied but it is persistent. <code>localStorage</code> was introduced in Firefox 3.5.</p>
+<div class="note">
+	<strong>注意：</strong>当浏览器进入私人模式(private browsing mode，Google Chrome 上对应的应该是叫隐身模式)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。</div>
+<h4 id="兼容性">
+	兼容性</h4>
+<p>
+	这些<code> Storage</code> 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。如果你想在没有原生支持 <code>localStorage</code> 对象的浏览器中使用它，可以在你编写的 JavaScript 代码的首部插入下面两段代码中的任意一段。</p>
+<p>
+	This algorithm is an exact imitation of the <code>localStorage</code> object, but making use of cookies.</p>
+<pre class="brush: js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        var sExpDate = new Date();
+        sExpDate.setDate(sExpDate.getDate() - 1);
+        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId &lt; aCouples.length; iCouplId++) {
+        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
+        if (iCouple.length &gt; 1) {
+          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+<div class="note">
+	<strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+<p>
+	Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer &lt; 8. It also makes use of cookies.</p>
+<pre class="brush: js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      var sExpDate = new Date();
+      sExpDate.setDate(sExpDate.getDate() - 1);
+      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie); }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+<div class="note">
+	<strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to get, add, change or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+<h5 id="与_globalStorage_的关系的兼容性">
+	与 globalStorage 的关系的兼容性</h5>
+<p class="note">
+	<code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. 例如，在 <a class="external" href="http://example.com" rel="freelink">http://example.com</a> 中不能访问 <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> 中的 <code>localStorage</code> 对象，但是它们都可以访问同一个 <code>globalStorage。</code> <code>localStorage</code> 是个标准接口，但 <code>globalStorage</code> 是非标准的。所以你的代码最好不要依赖这些关系。</p>
+<p>
+	Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items, only extending <code>StorageObsolete.prototype</code> does.</p>
+<h4 id="globalStorage_2">
+	<code>globalStorage</code></h4>
+<p>
+	{{ Non-standard_header() }}{{ obsolete_header("13.0") }}<code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML 5 has been removed from the HTML 5 specification in favor of &lt;code&gt;localStorage&lt;/code&gt;, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).</p>
+<div class="warning">
+	Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div>
+<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access
+globalStorage['mozilla.org'].setItem("snippet", "&lt;b&gt;Hello&lt;/b&gt;, how are you?");
+</pre>
+<p>
+	Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p>
+<ul>
+	<li>
+		<code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li>
+</ul>
+<p>
+	<strong>例子:</strong></p>
+<p>
+	All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p>
+<p>
+	Remember a user's username for the particular sub-domain that is being visited:</p>
+<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John");
+</pre>
+<p>
+	Keep track of the number of times that a user visits all pages of your domain:</p>
+<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+</pre>
+<h3 id="存储位置以及清除数据">
+	存储位置以及清除数据</h3>
+<p>
+	In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p>
+<ul>
+	<li>
+		DOM Storage can be cleared via "Tools -&gt; Clear Recent History -&gt; Cookies" when Time range is "Everything" (via nsICookieManager::removeAll)
+		<ul>
+			<li>
+				But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li>
+			<li>
+				Does not show up in Tools -&gt; Options -&gt; Privacy -&gt; Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li>
+		</ul>
+	</li>
+	<li>
+		DOM Storage is <strong>not</strong> cleared via Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now.</li>
+	<li>
+		Doesn't show up in the "Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/zh-cn/HTML/Using_the_application_cache" title="zh-cn/Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li>
+</ul>
+<p>
+	See also <a href="/zh-cn/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="zh-cn/Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p>
+<h3 id="更多信息">
+	更多信息</h3>
+<ul>
+	<li>
+		<a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li>
+	<li>
+		<a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li>
+</ul>
+<h3 id="例子">
+	例子</h3>
+<ul>
+	<li>
+		<a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial describing how to use the Web Storage API by creating a simple address book application</li>
+	<li>
+		<a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+	<li>
+		<a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li>
+	<li>
+		<a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li>
+	<li>
+		<a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML 5 localStorage example</a>. Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li>
+	<li>
+		<a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li>
+	<li>
+		<a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li>
+	<li>
+		<a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li>
+</ul>
+<h3 id="浏览器兼容性">
+	浏览器兼容性</h3>
+<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 (WebKit)</th>
+			</tr>
+			<tr>
+				<td>
+					localStorage</td>
+				<td>
+					4</td>
+				<td>
+					3.5</td>
+				<td>
+					8</td>
+				<td>
+					10.50</td>
+				<td>
+					4</td>
+			</tr>
+			<tr>
+				<td>
+					sessionStorage</td>
+				<td>
+					5</td>
+				<td>
+					2</td>
+				<td>
+					8</td>
+				<td>
+					10.50</td>
+				<td>
+					4</td>
+			</tr>
+			<tr>
+				<td>
+					globalStorage</td>
+				<td>
+					{{ CompatNo() }}</td>
+				<td>
+					2-13</td>
+				<td>
+					{{ CompatNo() }}</td>
+				<td>
+					{{ CompatNo() }}</td>
+				<td>
+					{{ CompatNo() }}</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 Phone</th>
+				<th>
+					Opera Mobile</th>
+				<th>
+					Safari Mobile</th>
+			</tr>
+			<tr>
+				<td>
+					Basic support</td>
+				<td>
+					{{ CompatUnknown() }}</td>
+				<td>
+					{{ CompatUnknown() }}</td>
+				<td>
+					{{ CompatUnknown() }}</td>
+				<td>
+					{{ CompatUnknown() }}</td>
+				<td>
+					{{ CompatUnknown() }}</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+<p>
+	All browsers have varying capacity levels for both local- and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+<p>
+	 </p>
+<h3 id="相关链接">
+	相关链接</h3>
+<ul>
+	<li>
+		<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/zh-cn/DOM/document.cookie" title="zh-cn/DOM/document.cookie">document.cookie</a></code>)</li>
+	<li>
+		<a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li>
+	<li>
+		<a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li>
+	<li>
+		<a href="/zh-cn/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="zh-cn/XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li>
+	<li>
+		<a href="/zh-cn/DOM/event/StorageEvent" title="zh-cn/DOM/Event/StorageEvent">StorageEvent</a></li>
+</ul>
+<p>
+	{{ HTML5ArticleTOC() }}</p>
+<p>
+	{{ languages( { "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "en": "en/DOM/Storage" } ) }}</p>
+<p>
+	---------------------------------</p>
+<p>
+	 </p>
+<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81">
+	摘要</h3>
+<p>
+	DOM Storage，就是在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> specification中介绍的那些<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关特性</a>集合的名称。相比较在cookies中存储信息来说，DOM Stroage更大、更安全、更易于使用的。目前支持的浏览器包括Mozilla Firefox 2+, Google Chrome, Apple Safari, Opera和Microsoft IE9+,在移动设备上也包括iPhone &amp; iPad Safari。</p>
+<div class="note">
+	<strong>Note:</strong> DOM Storage 与 <a href="/cn/Storage" title="cn/Storage">mozStorage</a> （Mozilla对于SQLite的XPCOM接口）和<a href="/cn/Session_store_API" title="cn/Session_store_API">Session store API</a>(扩展使用的一个<a href="/cn/XPCOM" title="cn/XPCOM">XPCOM</a>存储).不同</div>
+<h3 id=".E6.8F.8F.E8.BF.B0" name=".E6.8F.8F.E8.BF.B0">
+	描述</h3>
+<p>
+	DOM Storage机制是一种通过字符串形式的名／值对来安全地存储和使用的方法。这个附加功能的目标是提供一个更全面的、可以创建交互式应用程序的方法（包括那些高级功能，例如可以离线工作一段时间）。</p>
+<p>
+	目前，只有基于Mozilla的浏览器提供了DOM Storage的实现。不过，Internet Explorer也有一个类似的特性，叫做"<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>"，他允许你在多重浏览器会话中永久地保存数据。</p>
+<p>
+	DOM Storage 是很有用的，因为在任何一段时期都没有一个很好的、只通过浏览器来永久存储合理大小的数据的方法。<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">浏览器cookies</a> 限制了存储容量，而且并没有为组织永久性的数据提供支持，并且其他的方法还需要外部插件来实现（例如<a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a>）。</p>
+<p>
+	第一个使用了新的DOM Storage功能(除了Internet Explorer 的 userData Behavior之外)的公共应用程序是由 <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a> 写的 <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a>(一个便签应用程序) 。在他的程序中，Aaron同时把便签内容保存到服务器上（当Internet连接可用时）和一个本地数据存储中。这就允许用户即便是在不定式发生internet连接中断时，也可以安全的写一些有备份的便签。</p>
+<p>
+	不过，在halfnote中表现出来的概念和实现，都还是相对简单的。它的诞生揭示了一种新的、可以在线或离线使用的网络应用程序。</p>
+<h3 id=".E5.8F.82.E8.80.83" name=".E5.8F.82.E8.80.83">
+	参考</h3>
+<p>
+	下面的内容都是作为每个<a href="/cn/DOM/window" title="cn/DOM/window"><code>window</code> 对象</a>的属性存在的全局对象。这也就是说，可以通过<code>sessionStorage</code> 或者 <code>window.sessionStorage</code> 来访问它们。（这很重要，因为随后你可以使用iframe来存储、访问、添加那些并不是立刻就包含在你页面中的数据。）</p>
+<h4 id="sessionStorage" name="sessionStorage">
+	<code>sessionStorage</code></h4>
+<p>
+	这是一个全局对象（<code>sessionStorage</code>），它含有一个在页面会话有效期内可用的存储区域。只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。打开一个新的标签页或新窗口都会初始化新的会话。</p>
+<pre class="eval">// 将数据存入当前会话的一个存储中
+sessionStorage.username = "John";
+
+// 访问某些已存储的数据
+alert( "username = " + sessionStorage.username );
+</pre>
+<p>
+	<code>sessionStorage</code> 对象是最有用的，它持有那些应该保存的临时数据，而且一旦浏览器突然被刷新时，要恢复的那些数据，</p>
+<div class="bug">
+	<strong>Note:</strong> <code>sessionStorage</code> 还应该有在浏览器崩溃后存储和恢复数据的功能，不过由于{{ Bug(339445) }}的原因，这个功能到现在还没有在Firefox中实现。这个功能实现之后，<code>sessionStorage</code>的防御功能就十分有用了。</div>
+<p>
+	<strong>举例:</strong></p>
+<p>
+	自动保存文本字段的内容，如果浏览器突然被刷新，就恢复字段内容，这样就不会丢失任何输入了。</p>
+<pre class="eval"> // 获得我们要跟踪的那个文本字段
+ var field = document.getElementById("field");
+
+ // 看看我们是否有一个autosave的值
+ // (这将只会在页面被突然刷新时发生)
+ if ( sessionStorage.autosave ) {
+     // 恢复文本字段中的内容
+     field.value = sessionStorage.autosave;
+ }
+
+ // 每秒钟检查一次文本字段的内容
+ setInterval(function(){
+     // 并把结果保存到会话存储对象中
+     sessionStorage.autosave = field.value;
+ }, 1000);
+</pre>
+<p>
+	<strong>更多信息:</strong></p>
+<ul>
+	<li>
+		<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">sessionStorage specification</a></li>
+</ul>
+<h4 id="globalStorage" name="globalStorage">
+	<code>globalStorage</code></h4>
+<p>
+	这是一个全局对象(<code>globalStorage</code>)，它维护着各种公共的或者私有的，可以用来长时期保存数据的存储空间（例如，在多重的页面和浏览器会话之间）。</p>
+<pre class="eval">// 可以这样访问那些仅对mozilla.org域上的脚本保存的数据
+globalStorage['mozilla.org'].snippet = "&lt;b&gt;Hello&lt;/b&gt;, how are you?";
+
+// 可以这样访问为任何网页任何域存储的数据
+globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox";
+</pre>
+<p>
+	特别地，<code>globalStorage</code>对象，提供了访问一些不同的可以保存数据的存储对象的方法。例如，如果我们要建立一个可以在域(developer.mozilla.org)下面可以使用<code>globalStorage</code>的网页，我们有下面这些存储对象可以使用：</p>
+<ul>
+	<li>
+		<code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。</li>
+	<li>
+		<code>globalStorage{{ mediawiki.external('\'mozilla.org\'') }}</code> - 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li>
+	<li>
+		<code>globalStorage{{ mediawiki.external('\'org\'') }}</code> - 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li>
+	<li>
+		<code>globalStorage{{ mediawiki.external('') }}</code> - 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。</li>
+</ul>
+<div class="bug">
+	<strong>注意:</strong> firefox目前还没有实现<code>globalStorage{{ mediawiki.external('tld') }}</code> 和 <code>globalStorage{{ mediawiki.external('') }}</code> （会抛出一个安全错误），这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的 <a class="external" href="http://ejohn.org/blog/dom-storage-answers/">更多信息</a></div>
+<p>
+	<strong>示例:</strong></p>
+<p>
+	下面这些示例，需要你在所有想看到效果的页面中都插入脚本（包括如下所有的代码）。</p>
+<p>
+	记录某个指定子域名下面正在访问的用户的username：</p>
+<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John";
+</pre>
+<p>
+	跟踪一个用户在你的域名下所访问的所有页面的次数：</p>
+<pre class="eval"> // 由于所有数据都是被当作一个字符串来保存的，所以这里必须使用parseInt
+ globalStorage['mozilla.org'].visits =
+     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
+</pre>
+<p>
+	记录所有你访问的网站：</p>
+<pre class="eval"> globalStorage[<span class="nowiki">''</span>].sites += "," + location.hostname;
+</pre>
+<p>
+	<strong>更多信息:</strong></p>
+<ul>
+	<li>
+		<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">globalStorage specification</a></li>
+</ul>
+<h3 id="More_information" name="More_information">
+	More information</h3>
+<ul>
+	<li>
+		<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0 Specification</a></li>
+	<li>
+		<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Web Applications 1.0 Storage Specification</a></li>
+	<li>
+		<a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li>
+</ul>
+<h3 id="Examples" name="Examples">
+	Examples</h3>
+<ul>
+	<li>
+		<a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples</a></li>
+	<li>
+		<a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> - Note writing application that uses DOM Storage.</li>
+</ul>
+<h3 id="Related" name="Related">
+	Related</h3>
+<ul>
+	<li>
+		<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/cn/DOM/document.cookie" title="cn/DOM/document.cookie">document.cookie</a></code>)</li>
+	<li>
+		<a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li>
+	<li>
+		<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Internet Explorer userData behavior</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/api/dom/the_structured_clone_algorithm/index.html b/files/zh-cn/web/guide/api/dom/the_structured_clone_algorithm/index.html
new file mode 100644
index 0000000000..60444f8dc4
--- /dev/null
+++ b/files/zh-cn/web/guide/api/dom/the_structured_clone_algorithm/index.html
@@ -0,0 +1,108 @@
+---
+title: 结构化克隆算法
+slug: Web/Guide/API/DOM/The_structured_clone_algorithm
+tags:
+  - DOM
+  - HTML5
+  - 结构化克隆算法
+translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
+---
+<p>结构化克隆算法是<a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data">由HTML5规范定义</a>的用于复制复杂JavaScript对象的算法。通过来自 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Workers</a>的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage" title="en/JavaScript/Reference/Global Objects/Error">postMessage()</a> </code>或使用 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB">IndexedDB</a> 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。</p>
+
+<h2 id="结构化克隆所不能做到的">结构化克隆所不能做到的</h2>
+
+<ul>
+ <li><code><a href="/cn/JavaScript/Reference/Global_Objects/Error">Error</a></code> 以及 <code><a href="/cn/JavaScript/Reference/Global_Objects/Function">Function</a></code> 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 <code>DATA_CLONE_ERR</code> 的异常。</li>
+ <li>企图去克隆 DOM 节点同样会抛出 <code>DATA_CLONE_ERROR</code> 异常。</li>
+ <li>对象的某些特定参数也不会被保留
+  <ul>
+   <li><code><a href="/cn/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> </code>对象的 <code>lastIndex</code> 字段不会被保留</li>
+   <li>属性描述符，setters 以及 getters（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 read-only，它将会被复制为 read-write，因为这是默认的情况下。</li>
+   <li>原形链上的属性也不会被追踪以及复制。</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="支持的类型">支持的类型</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">对象类型</th>
+   <th scope="col">注意</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Data_structures#原始值">所有的原始类型</a></td>
+   <td>symbols 除外</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> 对象</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>String 对象</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td>
+   <td><code>lastIndex</code> 字段不会被保留。</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("Blob") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("File") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("FileList") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td>
+   <td>这基本上意味着所有的 <a href="/zh-CN/docs/Web/JavaScript/Typed_arrays">类型化数组</a> ，如 Int32Array 等。</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("ImageData") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td>
+   <td>仅包括普通对象（如对象字面量）</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 Specification: Safe passing of structured data</a></li>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.postMessage()") }}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/api/index.html b/files/zh-cn/web/guide/api/index.html
new file mode 100644
index 0000000000..72f6cbc936
--- /dev/null
+++ b/files/zh-cn/web/guide/api/index.html
@@ -0,0 +1,23 @@
+---
+title: Web API 指南
+slug: Web/Guide/API
+tags:
+  - API
+  - Web
+  - 指南
+translation_of: Web/Guide/API
+---
+<p>Web 包含大量各种类型的 API，你可以在 JavaScript 中使用这些 API 来构建功能越来越强大且功能强大的应用程序。而且，它们不但能在 Web 或本地运行，也可以通过 <a href="https://nodejs.org/">Node.js</a> 等技术在服务器上运行。在此页面上，您可以找到整个 Web 技术栈提供的所有 API 的完整列表。.</p>
+
+<h2 id="Web_API（按字母顺序排列）">Web API（按字母顺序排列）</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API">Web API 接口参考</a>（所有 API 的所有接口的索引）</li>
+ <li><a href="/zh-CN/docs/Web/API/Document_Object_Model">文档对象模型</a>（DOM）</li>
+ <li><a href="/zh-CN/docs/Web/Events">Web API 事件参考</a></li>
+ <li><a href="/zh-CN/docs/Learn">学习 Web 开发</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/zh-cn/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
new file mode 100644
index 0000000000..93f9904467
--- /dev/null
+++ b/files/zh-cn/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
@@ -0,0 +1,324 @@
+---
+title: Adding captions and subtitles to HTML5 video
+slug: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+tags:
+  - 字幕
+  - 字幕翻译
+translation_of: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+---
+<div class="summary">
+<p><span class="seoSummary">在其他文章中我们学会了如何使用{{domxref("HTMLMediaElement") }} 和 {{ domxref("Window.fullScreen") }} API <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">创建视频播放器</a>以及如何给视频播放器 <a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">添加样式</a>. 本文将介绍如何用 {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} 和 {{ htmlelement("track") }} 元素为视频添加字幕和翻译</span></p>
+</div>
+
+<h2 id="案例">案例</h2>
+
+<p>下面所展示的视频来自<a href="http://www.blender.org/foundation/">Blender Foundation</a>的 <a href="http://www.sintel.org/">Sintel open movie</a></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>
+
+<div class="note">
+<p><strong>Note</strong>: 观众老爷可以点击这里 <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">查看Github源码</a>, 或者<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">浏览在线视频</a>.</p>
+</div>
+
+<h2 id="HTML5视频字幕">HTML5视频字幕</h2>
+
+<p>在学习如何向视频添加字幕之前，我们应该了解下面这些事情</p>
+
+<h3 id="标题和副标题">标题和副标题</h3>
+
+<p><a href="http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">标题和副标题不是一回事</a>：它们有明显不同的受众，传达的信息也不同，如果你不确定它们是什么，建议你仔细阅读这些差异。然而，它们在技术上是以相同的方式实现的，因此本文中的内容将同时适用于这两者。</p>
+
+<p>在这篇文章中，我们将提到文本轨道作为字幕显示，因为它们的内容是针对影片使用的语言有困难的人，而不是聋哑人或有听力障碍的人。</p>
+
+<h3 id="&lt;track>_元素">&lt;track&gt; 元素</h3>
+
+<p>HTML5 allows us to specify subtitles for a video using the {{ htmlelement("track") }} element. The various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information.</p>
+
+<h3 id="WebVTT">WebVTT</h3>
+
+<p>The files that contain the actual subtitle data are simple text files that follow a specified format, in this case the <a href="/en-US/docs/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT) format. The <a href="http://dev.w3.org/html5/webvtt/">WebVTT specification</a> is still being worked on, but major parts of it are stable so we can use it today.</p>
+
+<p>Video providers (such as the <a href="http://www.blender.org/foundation/">Blender Foundation</a>) provide captions and subtitles in a text format with their videos, but they're usually in the SubRip Text (SRT) format. These can be easily converted to WebVTT using an online converter such as <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>.</p>
+
+<h2 id="修改_HTML和CSS">修改 HTML和CSS</h2>
+
+<p>This section summarises the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video. If you are not interested in this, and just want to get straight into the JavaScript and more relevant CSS, skip to the {{ anch("Subtitle implementation") }} section.<br>
+ <br>
+ In this example we are using a different video, <a href="http://www.sintel.org/">Sintel</a>, as it actually has some speech in it and therefore is better for illustrating how subtitles work!</p>
+
+<h3 id="HTML_标签">HTML 标签</h3>
+
+<p>As mentioned above, we need to make use of the new HTML5 <code>&lt;track&gt;</code> element to add our subtitle files to the HTML5 video. We actually have our subtitles in three different languages — English, German, and Spanish — so we will reference all three of the relevant VTT files by adding <code>&lt;track&gt;</code> elements inside our HTML5 <code>&lt;video&gt;</code> element:</p>
+
+<pre class="brush: html notranslate">&lt;video id="video" controls preload="metadata"&gt;
+   &lt;source src="video/sintel-short.mp4" type="video/mp4"&gt;
+   &lt;source src="video/sintel-short.webm" type="video/webm"&gt;
+   &lt;track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default&gt;
+   &lt;track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"&gt;
+   &lt;track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"&gt;
+&lt;/video&gt;</pre>
+
+<p>As you can see, each <code>&lt;track&gt;</code> element has the following attributes set:</p>
+
+<ul>
+ <li><code>kind</code> is given a value of <code>subtitles</code>, indicating the type of content the files contain</li>
+ <li><code>label</code> is given a value indicating which language that subtitle set is for — for example <code>English</code> or <code>Deutsch</code> — these labels will appear in the user interface to allow the user to easily select which subtitle language they want to see.</li>
+ <li><code>src</code> is assigned a valid URL pointing to the relevant WebVTT subtitle file in each case.</li>
+ <li><code>srclang</code> indicates what language each subtitle files' contents are in.</li>
+ <li>The <code>default</code> attribute is set on the English <code>&lt;track&gt;</code> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection.</li>
+</ul>
+
+<p>In addition to adding the <code>&lt;track&gt;</code> elements, we have also added a new button to control the subtitles menu that we will build. As a consequence, the video controls now look as follows:</p>
+
+<pre class="brush: html;highlight[13] notranslate">&lt;div id="video-controls" class="controls" data-state="hidden"&gt;
+   &lt;button id="playpause" type="button" data-state="play"&gt;Play/Pause&lt;/button&gt;
+   &lt;button id="stop" type="button" data-state="stop"&gt;Stop&lt;/button&gt;
+   &lt;div class="progress"&gt;
+      &lt;progress id="progress" value="0" min="0"&gt;
+         &lt;span id="progress-bar"&gt;&lt;/span&gt;
+      &lt;/progress&gt;
+   &lt;/div&gt;
+   &lt;button id="mute" type="button" data-state="mute"&gt;Mute/Unmute&lt;/button&gt;
+   &lt;button id="volinc" type="button" data-state="volup"&gt;Vol+&lt;/button&gt;
+   &lt;button id="voldec" type="button" data-state="voldown"&gt;Vol-&lt;/button&gt;
+   &lt;button id="fs" type="button" data-state="go-fullscreen"&gt;Fullscreen&lt;/button&gt;
+   &lt;button id="subtitles" type="button" data-state="subtitles"&gt;CC&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="修改CSS">修改CSS </h3>
+
+<p>The video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.<br>
+ <br>
+ No image is used for the captions button, so it is simply styled as:</p>
+
+<pre class="brush: css notranslate">.controls button[data-state="subtitles"] {
+    height:85%;
+    text-indent:0;
+    font-size:16px;
+    font-size:1rem;
+    font-weight:bold;
+    color:#666;
+    background:#000;
+    border-radius:2px;
+}</pre>
+
+<p>There are also other CSS changes that are specific to some extra JavaScript implementation, but these will be mentioned at the appropriate place below.</p>
+
+<h2 id="使用字幕">使用字幕</h2>
+
+<p>A lot of what we do to access the video subtitles revolves around JavaScript. Similar to the video controls, if a browser supports HTML5 video subtitles, there will be a button provided within the native control set to access them. However, since we have defined our own video controls, this button is hidden, and we need to define our own.</p>
+
+<p>Browsers do vary as to what they support, so we will be attempting to bring a more unified UI to each browser where possible. There's more on browser compatibility issues later on.</p>
+
+<h3 id="初始化">初始化</h3>
+
+<p>As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button:</p>
+
+<pre class="brush: js notranslate">var subtitles = document.getElementById('subtitles');</pre>
+
+<p>We also initially turn off all subtitles, in case the browser turns any of them on by default:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; video.textTracks.length; i++) {
+   video.textTracks[i].mode = 'hidden';
+}</pre>
+
+<p>The <code>video.textTracks</code> property contains an array of all the text tracks attached to the video. We loop through each one and set its <code>mode</code> to <code>hidden</code>.</p>
+
+<p>Note: The <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> gives us access to all the text tracks that are defined for an HTML5 video using the <code>&lt;track&gt;</code> element.</p>
+
+<h3 id="创建标题菜单">创建标题菜单</h3>
+
+<p>Our aim is to use the <code>subtitles</code> button we added earlier to display a menu that allows users to choose which language they want the subtitles displayed in, or to turn them off entirely.<br>
+ <br>
+ We have added the button, but before we make it do anything, we need to build the menu that goes with it. This menu is built dynamically, so that languages can be added or removed later by simply editing the <code>&lt;track&gt;</code> elements within the video's markup.</p>
+
+<p>All we need to do is to go through the video's <code>textTracks</code>, reading their properties and building the menu up from there:</p>
+
+<pre class="brush: js notranslate">var subtitlesMenu;
+if (video.textTracks) {
+   var df = document.createDocumentFragment();
+   var subtitlesMenu = df.appendChild(document.createElement('ul'));
+   subtitlesMenu.className = 'subtitles-menu';
+   subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
+   for (var i = 0; i &lt; video.textTracks.length; i++) {
+      subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
+   }
+   videoContainer.appendChild(subtitlesMenu);
+}</pre>
+
+<p>This code creates a {{ domxref("documentFragment") }}, which is used to hold an unordered list containing our subtitles menu. First of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.</p>
+
+<p>The creation of each list item and button is done by the <code>createMenuItem()</code> function, which is defined as follows:</p>
+
+<pre class="brush: js notranslate">var subtitleMenuButtons = [];
+var createMenuItem = function(id, lang, label) {
+   var listItem = document.createElement('li');
+   var button = listItem.appendChild(document.createElement('button'));
+   button.setAttribute('id', id);
+   button.className = 'subtitles-button';
+   if (lang.length &gt; 0) button.setAttribute('lang', lang);
+   button.value = label;
+   button.setAttribute('data-state', 'inactive');
+   button.appendChild(document.createTextNode(label));
+   button.addEventListener('click', function(e) {
+      // Set all buttons to inactive
+      subtitleMenuButtons.map(function(v, i, a) {
+         subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
+      });
+      // Find the language to activate
+      var lang = this.getAttribute('lang');
+      for (var i = 0; i &lt; video.textTracks.length; i++) {
+         // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+         if (video.textTracks[i].language == lang) {
+            video.textTracks[i].mode = 'showing';
+            this.setAttribute('data-state', 'active');
+         }
+         else {
+            video.textTracks[i].mode = 'hidden';
+         }
+      }
+      subtitlesMenu.style.display = 'none';
+   });
+   subtitleMenuButtons.push(button);
+   return listItem;
+}</pre>
+
+<p>This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's <code>mode</code> attribute to <code>showing</code>, and setting the others to <code>hidden</code>.</p>
+
+<p>Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer.<br>
+ <br>
+ Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:</p>
+
+<pre class="brush: js notranslate">subtitles.addEventListener('click', function(e) {
+   if (subtitlesMenu) {
+      subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
+   }
+});</pre>
+
+<h3 id="CSS代码">CSS代码</h3>
+
+<p>We also added some rudimentary styling for the newly created subtitles menu:</p>
+
+<pre class="brush: css notranslate">.subtitles-menu {
+    display:none;
+    position:absolute;
+    bottom:14.8%;
+    right:20px;
+    background:#666;
+    list-style-type:none;
+    margin:0;
+    padding:0;
+    width:100px;
+    padding:10px;
+}
+
+.subtitles-menu li {
+    padding:0;
+    text-align:center;
+}
+
+.subtitles-menu li button {
+    border:none;
+    background:#000;
+    color:#fff;
+    cursor:pointer;
+    width:90%;
+    padding:2px 5px;
+    border-radius:2px;
+}</pre>
+
+<h2 id="为字幕添加样式">为字幕添加样式</h2>
+
+<p>One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via <a href="http://dev.w3.org/html5/webvtt/#css-extensions">CSS Extensions</a>.</p>
+
+<p>The <code>::cue</code> pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:</p>
+
+<ul>
+ <li>{{ cssxref("color") }}</li>
+ <li>{{ cssxref("opacity") }}</li>
+ <li>{{ cssxref("visibility") }}</li>
+ <li>{{ cssxref("text-decoration") }}</li>
+ <li>{{ cssxref("text-shadow") }}</li>
+ <li>{{ cssxref("background") }} shorthand properties</li>
+ <li>{{ cssxref("outline") }} shorthand properties</li>
+ <li>{{ cssxref("font") }} shorthand properties, including {{ cssxref("line-height") }}</li>
+ <li>{{ cssxref("white-space") }}</li>
+</ul>
+
+<p>For example, to change the text colour of the text track cues you can write:</p>
+
+<pre class="brush: css notranslate">::cue {
+   color:#ccc;
+}</pre>
+
+<p>If the WebVTT file uses <a href="http://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-voice-span">voice spans</a>, which allow cues to be defined as having a particular "voice":</p>
+
+<pre class="notranslate">0
+00:00:00.000 --&gt; 00:00:12.000
+&lt;v Test&gt;[Test]&lt;/v&gt;</pre>
+
+<p>Then this specific 'voice' will be stylable like so:</p>
+
+<pre class="brush: css notranslate">::cue(v[voice='Test']) {
+   color:#fff;
+   background:#0095dd;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.</p>
+</div>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p><a href="http://caniuse.com/webvtt">Browser support for WebVTT and the <code>&lt;track&gt;</code> element</a> is fairly good, although some browsers differ slightly in their implementation.</p>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The <code>default</code> attribute is also supported.</p>
+
+<div class="note">
+<p><strong>Note</strong>: IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an <code>.htaccess</code> file to an appropriate directory that contains <code>AddType text/vtt .vtt</code>.</p>
+</div>
+
+<h3 id="Safari">Safari</h3>
+
+<p>Safari 6.1+ has similar support to Internet Explorer 10+, displaying a menu with the different available options, with the addition of an "Auto" option, which allows the browser to choose.</p>
+
+<h3 id="Chrome_and_Opera">Chrome and Opera</h3>
+
+<p>These browsers have similar implementations again: subtitles are enabled by default and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the <code>default</code> attribute on the <code>&lt;track&gt;</code> element and will instead try to match the browser's language to the subtitle's language.</p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Firefox's implementation was completely broken due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=981280">bug</a>, leading to Mozilla turning off WebVTT support by default (you can turn it on via the <code>media.webvtt.enabled</code> flag.) However, <s>this bug looks to have been fixed and WebVTT support re-enabled as of Gecko 31, so this will not be a problem for Firefox final release users for much longer (on Gecko 29 as of the time of this writing)</s> this has been fixed as of Firefox 31, and everything works as it should.</p>
+
+<h2 id="Plugins">Plugins</h2>
+
+<p>If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.</p>
+
+<dl>
+ <dt><a href="http://plyr.io">plyr.io </a></dt>
+ <dd>This modern video player implements subtitles in both SRT and WebVTT file formats.</dd>
+ <dt><a href="http://www.delphiki.com/html5/playr/">playr</a></dt>
+ <dd>This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.</dd>
+ <dt><a href="https://flowplayer.org/player/">Flowplayer</a></dt>
+ <dd>HTML5 player supporting WebVTT.</dd>
+ <dt><a href="http://www.jwplayer.com/">jwplayer</a></dt>
+ <dd>This video player is very extensive and does a lot more than simply support video captions. It supports the WebVTT, SRT and DFXP formats.</dd>
+ <dt><a href="http://mediaelementjs.com/">MediaElement.js</a></dt>
+ <dd>Another complete video player that also support video captions, albeit only in SRT format.</dd>
+ <dt><a href="http://www.leanbackplayer.com/">LeanBack Player</a></dt>
+ <dd>Yet another video player that supports WebVTT captions as well as providing other standard player functionality.</dd>
+ <dt><a href="http://sublimevideo.net">SublimeVideo</a></dt>
+ <dd>This player also supports captions through WebVTT and SRT files.</dd>
+ <dt><a href="http://www.videojs.com/">Video.js</a></dt>
+ <dd>Supports WebVTT video subtitles.</dd>
+ <dt><a href="https://www.radiantmediaplayer.com">Radiant Media Player</a></dt>
+ <dd>Supports multi-languages WebVTT closed captions</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can find an excellent list of HTML5 Video Players and their current "state" at <a href="http://praegnanz.de/html5video/">HTML5 Video Player Comparison</a>.</p>
+</div>
diff --git a/files/zh-cn/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/zh-cn/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
new file mode 100644
index 0000000000..d897d6d41b
--- /dev/null
+++ b/files/zh-cn/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
@@ -0,0 +1,204 @@
+---
+title: 'Media buffering, seeking, and time ranges'
+slug: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+translation_of: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+---
+<div class="summary">
+<p><span class="seoSummary">有时候知道 {{htmlelement("audio") }} 或 {{htmlelement("video") }} 已经下载了多少或有多少可以不延迟的播放是有用的 — 音频和视频的缓冲条就是这个的一个好例子。 这篇文章讨论 用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges">TimeRanges</a>如何创建一个 buffer/seek bar, 和 media API 的其他特性。</span></p>
+</div>
+
+<h2 id="Buffered">Buffered</h2>
+
+<p><code>Buffered</code> 属性会告诉我们媒体的哪一部分已经下载好了。它返回一个 {{ domxref("TimeRanges") }} 对象, 表名哪些块已经下载。 这通常是连续的但是如果用户在缓冲时跳过，就可能会有缺口。</p>
+
+<p>它与 {{htmlelement("audio") }} 或 {{htmlelement("video") }}一起工作; 现在我们来考虑一个简单的aodio例子：</p>
+
+<pre class="brush: html">&lt;audio id="my-audio" controls src="music.mp3"&gt;
+&lt;/audio&gt;</pre>
+
+<p>我们可以这样访问这些属性：</p>
+
+<pre class="brush: js">var myAudio = document.getElementById('my-audio');
+
+var bufferedTimeRanges = myAudio.buffered;</pre>
+
+<h2 id="TimeRanges_对象">TimeRanges 对象</h2>
+
+<p>TimeRanges 是一系列有开始和结束时间的非重叠的时间范围。 (<a href="https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges">learn more about TimeRanges</a>).</p>
+
+<p>一个 {{ domxref("TimeRanges") }} 对象包括以下内容。</p>
+
+<ul>
+ <li><code>length</code>: The number of time ranges in the object.</li>
+ <li><code>start(index)</code>: The start time, in seconds, of a time range.</li>
+ <li><code>end(index)</code>: The end time, in seconds, of a time range.</li>
+</ul>
+
+<p>没有用户操作的话通常只有一个时间范围，但是如果你在媒体中跳来跳去那么就会出现多个时间范围, 下面形象化的表名了这一点。 This represents two buffered time ranges — one spanning 0 to 5 seconds and the second spanning 15 to 19 seconds.</p>
+
+<pre>------------------------------------------------------
+|=============|                    |===========|     |
+------------------------------------------------------
+0             5                    15          19    21</pre>
+
+<p>对于这个audio实例，相关联的 {{ domxref("TimeRange") }} 对象会有以下的可用属性：</p>
+
+<pre class="brush: js">myAudio.buffered.length;   // returns 2
+myAudio.buffered.start(0); // returns 0
+myAudio.buffered.end(0);   // returns 5
+myAudio.buffered.start(1); // returns 15
+myAudio.buffered.end(1);   // returns 19</pre>
+
+<p>为了试用并形象化 buffered time ranges 我们可以写一点 HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;audio id="my-audio" controls&gt;
+    &lt;source src="music.mp3" type="audio/mpeg"&gt;
+  &lt;/audio&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;canvas id="my-canvas" width="300" height="20"&gt;
+  &lt;/canvas&gt;
+&lt;/p&gt;</pre>
+
+<p>and a little bit of JavaScript:</p>
+
+<pre class="brush: js">  window.onload = function(){
+
+    var myAudio = document.getElementById('my-audio');
+    var myCanvas = document.getElementById('my-canvas');
+    var context = myCanvas.getContext('2d');
+
+    context.fillStyle = 'lightgray';
+    context.fillRect(0, 0, myCanvas.width, myCanvas.height);
+    context.fillStyle = 'red';
+    context.strokeStyle = 'white';
+
+    var inc = myCanvas.width / myAudio.duration;
+
+    // display TimeRanges
+
+    myAudio.addEventListener('seeked', function() {
+      for (i = 0; i &lt; myAudio.buffered.length; i++) {
+
+        var startX = myAudio.buffered.start(i) * inc;
+        var endX = myAudio.buffered.end(i) * inc;
+        var width = endX - startX;
+
+        context.fillRect(startX, 0, width, myCanvas.height);
+        context.rect(startX, 0, width, myCanvas.height);
+        context.stroke();
+      }
+    });
+  }</pre>
+
+<p>这在长一些的audio或video上工作的更好， 但是按开始键并在进度条上点击，你会得到这个。 每个红色填充的长方形代表一个时间范围。</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges." src="https://mdn.mozillademos.org/files/7347/bufferedtimeranges.png" style="display: block; height: 89px; margin: 0px auto; width: 318px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="http://jsbin.com/memazaro/1/edit">timerange code running live on JS Bin</a>.</p>
+</div>
+
+<h2 id="Seekable">Seekable</h2>
+
+<p><code>Seekable</code> 属性返回一个 {{ domxref("TimeRanges") }} 对象告诉我们哪一部分媒体可以不等待的播放; this is irrespective of whether that part has been downloaded or not. Some parts of the media may be seekable but not buffered if byte-range requests are enabled on the server. Byte range requests allow parts of the media file to be delivered from the server and so can be ready to play almost immediately — thus they are seekable.</p>
+
+<pre class="brush: js">var seekableTimeRanges = myAudio.seekable;</pre>
+
+<h2 id="Creating_our_own_Buffering_Feedback">Creating our own Buffering Feedback</h2>
+
+<p>If we wish to create our own custom player, we may want to provide feedback on how much of the media is ready to be played. In practice a good way to do this is use the <code>seekable</code> attribute, although as we have seen above seekable parts of the media are not neccessarily contiguous — they often are however and we can safely approximate this information to give the user an indication of which parts of the media can be played directly. We can find this point in the media using the following line of code:</p>
+
+<pre class="brush: js">var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>myAudio.seekable.end(myAudio.seekable.length - 1)</code> actually tells us the end point of the last time range that is seekable (not all seekable media). In practice this is good enough as the browser either enables range requests or it doesn't. If it doesn't then <code>audio.seekable</code> will be equivalent to <code>audio.buffered</code>, which will give a valid indication of the end of seekable media. If range requests are enabled this value usually becomes the duration of the media almost instantly.</p>
+</div>
+
+<p>It is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display.</p>
+
+<p>So let's build this. The HTML for our player looks like this:</p>
+
+<pre class="brush: css">&lt;audio id="my-audio" preload controls&gt;
+  &lt;source src="music.mp3" type="audio/mpeg"&gt;
+&lt;/audio&gt;
+&lt;div class="buffered"&gt;
+  &lt;span id="buffered-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;span id="progress-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>We'll use the following CSS to style the buffering display:</p>
+
+<pre class="brush: css">.buffered {
+  height: 20px;
+  position: relative;
+  background: #555;
+  width: 300px;
+}
+
+#buffered-amount {
+  display: block;
+  height: 100%;
+  background-color: #777;
+  width: 0;
+}
+
+.progress {
+  margin-top: -20px;
+  height: 20px;
+  position: relative;
+  width: 300px;
+}
+
+#progress-amount {
+  display: block;
+  height: 100%;
+  background-color: #595;
+  width: 0;
+}</pre>
+
+<p>And the following JavaScript provides our functionality:</p>
+
+<pre class="brush: js">window.onload = function(){
+
+  var myAudio = document.getElementById('my-audio');
+
+  myAudio.addEventListener('progress', function() {
+    var bufferedEnd = myAudio.buffered.end(myAudio.buffered.length - 1);
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration)*100) + "%";
+    }
+  });
+
+  myAudio.addEventListener('timeupdate', function() {
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      document.getElementById('progress-amount').style.width = ((myAudio.currentTime / duration)*100) + "%";
+    }
+  });
+}</pre>
+
+<p>The progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.</p>
+
+<p>The timeupdate event is fired 4 times a second as the media plays and that's where we increment our playing progress bar.</p>
+
+<p>This should give you results similar to the following, where the light grey bar represents the buffered progress and green bar shows the played progress:</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered." src="https://mdn.mozillademos.org/files/7349/bufferedprogress.png" style="display: block; height: 67px; margin: 0px auto; width: 311px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="http://jsbin.com/badimipi/1/edit">buffering code running live on JS Bin</a>.</p>
+</div>
+
+<h2 id="A_quick_word_about_Played">A quick word about Played</h2>
+
+<p>It’s worth mentioning the <code>played</code> property — this tells us which time ranges have been played within the media. For example:</p>
+
+<pre class="brush: js">var played = audio.played; // returns a TimeRanges object</pre>
+
+<p>This could be useful for establishing the parts of your media that are most listened to or watched.</p>
diff --git a/files/zh-cn/web/guide/audio_and_video_delivery/index.html b/files/zh-cn/web/guide/audio_and_video_delivery/index.html
new file mode 100644
index 0000000000..9bd903c722
--- /dev/null
+++ b/files/zh-cn/web/guide/audio_and_video_delivery/index.html
@@ -0,0 +1,444 @@
+---
+title: Audio and Video Delivery
+slug: Web/Guide/Audio_and_video_delivery
+tags:
+  - Audio
+  - HTML5
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Video
+translation_of: Web/Guide/Audio_and_video_delivery
+---
+<div class="summary">
+<p>我们可以通过多种方式在网络上交付音频和视频，从“静态”媒体文件到自适应实时流。 本文旨在作为探讨基于Web的媒体的各种传递机制以及与流行浏览器的兼容性的起点。</p>
+</div>
+
+<h2 id="音频和视频元素">音频和视频元素</h2>
+
+<p>Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's {{ htmlelement("audio")}} and {{ htmlelement("video")}} elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Audio Codec Compatibility Table</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Audio/Video Codec Compatibility Table</a></li>
+</ul>
+
+<p>To deliver video and audio, the general workflow is usually something like this:</p>
+
+<ol>
+ <li>Check what format the browser supports via feature detection (usually a choice of two, as stated above.)</li>
+ <li>If the browser doesn't support playback of any of the provided formats natively, provide a fallback (such as a Flash movie.)</li>
+ <li>Identify how you want to play/instantiate the media (e.g. a {{ htmlelement("video") }} element, or <code>document.createElement('video')</code> perhaps?)</li>
+ <li>Deliver the media file to the player.</li>
+</ol>
+
+<h3 id="HTML音频">HTML音频</h3>
+
+<pre class="brush: html notranslate">&lt;audio controls preload="auto"&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp3 --&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+
+  &lt;!-- fallback for browsers that don't support audio tag --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+&lt;/audio&gt;</pre>
+
+<p>上面的代码将创建一个音频播放器，该播放器尝试预加载尽可能多的音频以流畅播放。</p>
+
+<div class="note">
+<p><strong>注意：</strong>preload属性可能会被某些移动浏览器忽略。</p>
+</div>
+
+<p>有关更多信息，请参见 <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Cross Browser Audio Basics (HTML5 Audio In Detail)</a></p>
+
+<h3 id="HTML_视频">HTML 视频</h3>
+
+<pre class="brush: html notranslate">&lt;video controls width="640" height="480" poster="initialimage.png" autoplay muted&gt;
+  &lt;source src="videofile.mp4" type="video/mp4"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp4 --&gt;
+  &lt;source src="videofile.webm" type="video/webm"&gt;
+
+  &lt;!-- specifying subtitle files --&gt;
+  &lt;track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"&gt;
+  &lt;track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"&gt;
+
+  &lt;!-- fallback for browsers that don't support video tag --&gt;
+  &lt;a href="videofile.mp4"&gt;download video&lt;/a&gt;
+&lt;/video&gt;</pre>
+
+<p>上面的代码创建了一个尺寸为640x480像素的视频播放器，显示海报图像，直到播放视频为止。 我们指示视频自动播放，但默认情况下将其静音。</p>
+
+<div class="note">
+<p><strong>注意：</strong>某些移动浏览器可能会忽略自动播放属性。 同样，自动播放功能在滥用时也会引起争议。 强烈建议您阅读<a href="/zh-CN/docs/Web/Media/Autoplay_guide">媒体和Web音频API的自动播放指南</a>，以了解如何明智地使用自动播放。</p>
+</div>
+
+<p>For further info see <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/video">&lt;video&gt; element</a> and <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a>.</p>
+
+<h3 id="Audio_and_Video_Fallback">Audio and Video Fallback</h3>
+
+<p>You can create a more comprehensive Fallback using Flash. <a href="https://github.com/johndyer/mediaelement/blob/master/build/flashmediaelement.swf">Using flashmediaelement.swf</a> is one way.</p>
+
+<pre class="brush: html notranslate">&lt;audio controls&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+  &lt;!-- fallback for non supporting browsers goes here --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+  &lt;object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"&gt;
+    &lt;param name="movie" value="flashmediaelement.swf" /&gt;
+    &lt;param name="flashvars" value="controls=true&amp;isvideo=false&amp;file=audiofile.mp3" /&gt;
+  &lt;/object&gt;
+&lt;/audio&gt;</pre>
+
+<p>该过程与视频非常相似，只需记住在<code>flashvars value</code>参数中设置<code>isvideo = true</code>。<br>
+ <br>
+ <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">More options for Fallbacks</a>.</p>
+
+<h3 id="JavaScript_音频">JavaScript 音频</h3>
+
+<pre class="brush: js notranslate">var myAudio = document.createElement('audio');
+
+if (myAudio.canPlayType('audio/mpeg')) {
+  myAudio.setAttribute('src','audiofile.mp3');
+} else if (myAudio.canPlayType('audio/ogg')) {
+  myAudio.setAttribute('src','audiofile.ogg');
+}
+
+myAudio.currentTime = 5;
+myAudio.play();</pre>
+
+<p>我们根据浏览器支持的音频文件的类型来设置音频的来源，然后将播放头设置为5秒钟以尝试播放它。</p>
+
+<div class="note">
+<p><strong>注意</strong>: 除非由用户启动的事件发布，否则某些移动浏览器将忽略播放。</p>
+</div>
+
+<p>It's also possible to feed an {{ htmlelement("audio") }} element a base64 encoded WAV file, allowing to generate audio on the fly:</p>
+
+<pre class="brush: html notranslate">&lt;audio id="player" src="data:audio/x-wav;base64,UklGRvC..."&gt;&lt;/audio&gt;</pre>
+
+<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> employs this technique. <a href="http://speak-demo.herokuapp.com">Try the demo</a>.</p>
+
+<h3 id="JavaScript_Video">JavaScript Video</h3>
+
+<pre class="brush: js notranslate">var myVideo = document.createElement('video');
+
+if (myVideo.canPlayType('video/mp4')) {
+  myVideo.setAttribute('src','videofile.mp4');
+} else if (myVideo.canPlayType('video/webm')) {
+  myVideo.setAttribute('src','videofile.webm');
+}
+
+myVideo.width = 480;
+myVideo.height = 320;</pre>
+
+<p>We set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.</p>
+
+<h2 id="Web_Audio_API">Web Audio API</h2>
+
+<pre class="brush: js notranslate">  var context;
+  var request;
+  var source;
+
+  try {
+    context = new (window.AudioContext || window.webkitAudioContext)();
+    request = new XMLHttpRequest();
+    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
+    request.responseType = "arraybuffer";
+
+    request.onload = function() {
+      context.decodeAudioData(request.response, function(buffer) {
+        source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        // auto play
+        source.start(0); // start was previously noteOn
+      });
+    };
+
+    request.send();
+
+  } catch(e) {
+    alert('web audio api not supported');
+  }</pre>
+
+<p>In this example we retrieve an MP3 file via XHR, load it into a source and play it (<a href="http://jsbin.com/facutone/1/edit?js">Try it for yourself</a>). Find more about Web Audio API basics in <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a>.</p>
+
+<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2>
+
+<p>It's also possible to retrieve a live stream from a webcam and/or microphone using <code>getUserMedia</code> and the Stream API. This makes up part of a wider technology known as WebRTC (Web Real-Time Communications) and is compatible with the latest versions of Chrome, Firefox and Opera.</p>
+
+<p>To grab the stream from your webcam, first set up a {{htmlelement("video")}} element:</p>
+
+<pre class="brush: html notranslate">&lt;video id="webcam" width="480" height="360"&gt;&lt;/video&gt;</pre>
+
+<p>Next, if supported connect the webcam source to the video element:</p>
+
+<pre class="brush: js notranslate">navigator.getUserMedia ||
+  (navigator.getUserMedia = navigator.mozGetUserMedia ||
+  navigator.webkitGetUserMedia || navigator.msGetUserMedia);
+
+window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+
+if (navigator.getUserMedia) {
+    navigator.getUserMedia({
+        video: true,
+        audio: false
+    }, onSuccess, onError);
+} else {
+    alert('getUserMedia is not supported in this browser.');
+}
+
+function onSuccess(stream) {
+    var video = document.getElementById('webcam');
+    video.autoplay = true;
+    video.src = window.URL.createObjectURL(stream);
+}
+
+function onError() {
+    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
+}</pre>
+
+<p>To find out more, read our <a href="/en-US/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a> page.</p>
+
+<h2 id="Mediastream_Recording">Mediastream Recording</h2>
+
+<p>New standards are being rolled out to allow your browser to grab media from your mic or camera using <code>getUserMedia</code> and record it instantly using the new MediaRecorder API. You take the stream you receive from <code>getUserMedia</code>, pass it to a <code>MediaRecorder</code> object, take the resulting output and feed it to your audio or video source*.<br>
+ <br>
+ The main mechanism is outlined below:</p>
+
+<pre class="brush: js notranslate">var onSuccess = function(stream) {
+
+  var mediaRecorder = new MediaRecorder(stream);
+
+  mediaRecorder.ondataavailable = function(e) {
+    var audio = document.createElement('audio');
+    audio.src = window.URL.createObjectURL(e.data);
+  }
+}
+
+navigator.getUserMedia({audio:true}, onSuccess);</pre>
+
+<p>See <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> for more details.</p>
+
+<div class="note">
+<p><strong>Note</strong>: MediaRecorder is currently only supported in Firefox and only for audio, however there are some interesting workarounds including a library called <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecordRTC</a>.</p>
+</div>
+
+<h2 id="Media_Source_Extensions_MSE">Media Source Extensions (MSE)</h2>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{domxref("HTMLMediaElement")}} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.</p>
+
+<h3 id="Encrypted_Media_Extensions_EME">Encrypted Media Extensions (EME)</h3>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> is a W3C proposal to extend <code>HTMLMediaElement</code>, providing APIs to control playback of protected content.<br>
+ <br>
+ The API supports use cases ranging from simple clear key decryption to high value video (given an appropriate user agent implementation). License/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies.<br>
+ <br>
+ One of the principle uses of EME is to allow browsers to implement DRM (<a href="http://en.wikipedia.org/wiki/Digital_rights_management">Digital Rights Management</a>), which helps to prevent web-based content (especially video) from being copied.</p>
+
+<h3 id="Adaptive_Streaming">Adaptive Streaming</h3>
+
+<p>New formats and protocols are being rolled out to facilitate adaptive streaming. Adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. Adaptive streaming is often used in conjunction with live streaming where smooth delivery of audio or video is paramount.</p>
+
+<p>The main formats used for adaptive streaming are <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#HLS">HLS</a> and <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE has been designed with DASH in mind. MSE defines byte streams according to <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> and <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (both supported in DASH, the latter supported in HLS). Generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with DASH.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Currently Safari does not support DASH although dash.js will work on newer versions of Safari scheduled for release with OSX Yosemite.</p>
+</div>
+
+<p>DASH also provides a number of profiles including simple onDemand profiles that no preprocessing and splitting up of media files. There are also a number of cloud based services that will convert your media to both HLS and DASH.<br>
+ <br>
+ For further information see <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a>.</p>
+
+<h2 id="Debugging_Audio_Video_Issues">Debugging Audio / Video Issues</h2>
+
+<p>Having issues playing back audio or video? Try the following check-list.</p>
+
+<h3 id="Does_the_browser_support_the_supplied_formats">Does the browser support the supplied formats?</h3>
+
+<p>Use the following verified sources within your audio and video elements to check support.</p>
+
+<ul>
+ <li>Audio MP3 (<code>type="audio/mpeg"</code>): <a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">play the MP3 audio live</a>.)</li>
+ <li>Audio MP4 (<code>type="audio/mp4"</code>): <a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a">http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">play the MP4 audio live</a>.)</li>
+ <li>Audio Ogg (<code>type="audio/ogg"</code>): <a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg">http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">play the OGG audio live</a>.)</li>
+ <li>Video MP4 (<code>type="video/mp4"</code>): <a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">play the MP4 video live</a>.)</li>
+ <li>Video WebM (<code>type="video/webm"</code>): <a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">play the WebM video live</a>.)</li>
+ <li>Video Ogg (<code>type="video/ogg"</code>): <a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv">http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">play the OGG video live</a>.)</li>
+</ul>
+
+<p>If these don't play then the browser you are testing doesn't support the given format. Consider using a different format or using a fallback.<br>
+ <br>
+ If these work but the files you are supplying don't, there are two possible issues:</p>
+
+<h4 id="1._The_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. The media server is not delivering the correct mime types with the file</h4>
+
+<p>Although this is usually supported, you may need to add the following to your media server's <code>.htaccess</code> file.</p>
+
+<pre class="notranslate"># AddType TYPE/SUBTYPE EXTENSION
+
+AddType audio/mpeg mp3
+AddType audio/mp4 m4a
+AddType audio/ogg ogg
+AddType audio/ogg oga
+
+AddType video/mp4 mp4
+AddType video/mp4 m4v
+AddType video/ogg ogv
+AddType video/webm webm
+AddType video/webm webmv</pre>
+
+<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Your files have been encoded incorrectly</h4>
+
+<p>Your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable:</p>
+
+<ul>
+ <li><a href="http://audacity.sourceforge.net/">Audacity</a> - Free Audio Editor and Recorder</li>
+ <li><a href="http://www.getmiro.com/">Miro</a> - Free, open-source music and video player</li>
+ <li><a href="http://handbrake.fr/">Handbrake</a> - Open Source Video Transcoder</li>
+ <li><a href="http://firefogg.org/">Firefogg</a> - Video and Audio encoding for Firefox</li>
+ <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Comprehensive command line encoder</li>
+ <li><a href="https://libav.org/">Libav</a> - Comprehensive command line encoder</li>
+ <li><a href="http://m.vid.ly/">Vid.ly</a> - Video player,transcoding and delivery</li>
+ <li><a href="https://archive.org/">Internet Archive</a> - Free transcoding and storage</li>
+</ul>
+
+<h2 id="Customising_Your_Media_Player">Customising Your Media Player</h2>
+
+<p>You may decide that you want your audio or video player to have a consistent look across browsers, or just wish to tweak it to match your site. The general technique for achieving this is to omit the <code>controls</code> attribute so that the default browser controls are not displayed, create custom controls using HTML and CSS, then use JavaScript to link your controls to the audio/video API.</p>
+
+<p>If you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. You can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions.</p>
+
+<p>You may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing. It's often important to remember keyboard controls for user convenience and accessibility.</p>
+
+<p>A quick example — first set up your audio and custom controls in HTML:</p>
+
+<pre class="brush: html notranslate">  &lt;audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt;&lt;/audio&gt;
+  &lt;button id="my-control"&gt;play&lt;/button&gt;</pre>
+
+<p>add a bit of JavaScript to detect events to play and pause the audio:</p>
+
+<pre class="brush: js notranslate">window.onload = function() {
+
+  var myAudio = document.getElementById('my-audio');
+  var myControl = document.getElementById('my-control');
+
+  function switchState() {
+    if (myAudio.paused == true) {
+      myAudio.play();
+      myControl.innerHTML = "pause";
+    } else {
+      myAudio.pause();
+      myControl.innerHTML = "play";
+    }
+  }
+
+  function checkKey(e) {
+    if (e.keycode == 32 ) { //spacebar
+      switchState();
+    }
+  }
+
+  myControl.addEventListener('click', function() {
+    switchState();
+  }, false);
+
+  window.addEventListener( "keypress", checkKey, false );
+}</pre>
+
+<p>You can <a href="http://jsbin.com/jujeladu/2/edit">try this example out here</a>. For more information, see <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Creating your own custom audio player</a>.</p>
+
+<h2 id="AudioVideo_JavaScript_Libraries">Audio/Video JavaScript Libraries</h2>
+
+<p>A number of audio and video JavaScript libaries exist. The most popular libraries allow you to choose a consistent player design over all browsers and provide a fallback for browsers that don't support audio and video natively. Fallbacks often use Adobe Flash or Microsoft Silverlight plugins. Other functionality such as the track element for subtitles can also be provided through media libraries.</p>
+
+<h3 id="Audio_only">Audio only</h3>
+
+<ul>
+ <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li>
+</ul>
+
+<h3 id="Video_only">Video only</h3>
+
+<ul>
+ <li><a href="https://flowplayer.org/">flowplayer</a>: Gratis with a flowplayer logo watermark. Open source (GPL licensed.)</li>
+ <li><a href="http://www.jwplayer.com">JWPlayer</a>: Requires registration to download. Open Source Edition (Creative Commons License.)</li>
+ <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Requires registration. Form based set up with domain specific link to CDN hosted library.</li>
+ <li><a href="http://www.videojs.com/">Video.js</a>: Gratis and Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h3 id="Audio_and_Video">Audio and Video</h3>
+
+<ul>
+ <li><a href="http://jPlayer.org">jPlayer</a>: Gratis and Open Source (MIT Licensed.)</li>
+ <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratis and Open Source (MIT Licensed.)</li>
+</ul>
+
+<h3 id="Web_Audio_API_2">Web Audio API</h3>
+
+<ul>
+ <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: A polyfill for older versions of the Web Audio API; Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h2 id="Basic_tutorials">Basic tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt>
+ <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt>
+ <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt>
+ <dd>
+ <div>
+ <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p>
+ </div>
+ </dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt>
+ <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt>
+ <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt>
+ <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd>
+</dl>
+
+<h2 id="Streaming_media_tutorials">Streaming media tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt>
+ <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt>
+ <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd>
+ <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt>
+ <dd>Details how to set up adaptive streaming using DASH and WebM.</dd>
+</dl>
+
+<h2 id="Advanced_tutorials">Advanced tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt>
+ <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the &lt;track> element. The primary purpose of WebVTT files is to add subtitles to a &lt;video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt>
+ <dd>A guide to writing cross browser Web Audio API code.</dd>
+ <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt>
+ <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd>
+ <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt>
+ <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox OS versions 1.3 and above support the <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol" title="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> protocol for streaming video delivery. A fallback solution for older versions would be to use <code>&lt;video&gt;</code> along with a suitable format for Gecko (such as WebM) to serve fallback content. More information will be published on this in good time.</p>
+</div>
+
+<h2 id="References">References</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator.getUserMedia">getUserMedia</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/audio_and_video_delivery/webaudio_playbackrate_explained/index.html b/files/zh-cn/web/guide/audio_and_video_delivery/webaudio_playbackrate_explained/index.html
new file mode 100644
index 0000000000..991d14b733
--- /dev/null
+++ b/files/zh-cn/web/guide/audio_and_video_delivery/webaudio_playbackrate_explained/index.html
@@ -0,0 +1,95 @@
+---
+title: Web Audio playbackRate explained
+slug: Web/Guide/Audio_and_video_delivery/WebAudio_playbackRate_explained
+translation_of: Web/Guide/Audio_and_video_delivery/WebAudio_playbackRate_explained
+---
+<div class="summary">
+<p><span class="seoSummary">html元素“audio”和“video”的<code>playbackRate</code> 属性允许我们改变一段正在播放的网页音频或者视频的速度，或速率。本文详细解释了</span> <code>playbackRate</code> 。</p>
+</div>
+
+<h2 id="playbackRate_基础">playbackRate 基础</h2>
+
+<p>让我们以一个简单的<code>playbackRate</code>用法示例开始：</p>
+
+<pre class="brush: java">var myAudio = document.createElement('audio');
+myAudio.setAttribute('src','audiofile.mp3');
+myAudio.playbackRate = 0.5;</pre>
+
+<p>在此我们创建了一个html元素“audio”，以我们选择的一个文件设置它的 <code>src</code> 。然后我们把 <code>playbackRate</code> 设为 0.5，这代表一半的正常播放速度（ <code>playbackRate</code> 是对原始速率的一个乘数）。</p>
+
+<h2 id="一个完整示例">一个完整示例</h2>
+
+<p>让我们首先创建一个html元素“video”，在HTML中设置视频和播放速率控制：</p>
+
+<pre class="brush: html">&lt;video id="myVideo" controls&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type='video/mp4' /&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type='video/webm' /&gt;
+&lt;/video&gt;
+
+&lt;form&gt;
+  &lt;input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" &gt;
+  &lt;p&gt;Playback Rate &lt;span id="currentPbr"&gt;1&lt;/span&gt;&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>对它运用一些JavaScript代码：</p>
+
+<pre class="brush: js">window.onload = function () {
+
+  var v = document.getElementById("myVideo");
+  var p = document.getElementById("pbr");
+  var c = document.getElementById("currentPbr");
+
+  p.addEventListener('input',function(){
+    c.innerHTML = p.value;
+    v.playbackRate = p.value;
+  },false);
+
+};</pre>
+
+<p>最后，我们监听指向html元素“input”的 <code>input</code> 事件，这允许我们对被改变的播放速率控制产生影响 。</p>
+
+<div class="note">
+<p><strong>注意</strong>: <a href="http://jsbin.com/UGIxoJis/1/edit">在线试用示例</a>, 尝试调整播放速率控制看看效果.</p>
+</div>
+
+<h2 id="defaultPlaybackRate_和_ratechange">defaultPlaybackRate 和 ratechange</h2>
+
+<p>除了 <code>playbackRate,</code> 我们也有一个可用的 <code>defaultPlaybackRate</code> 属性, 这让我们能设置默认的播放速率：对媒体文件重设置的播放速率；例如，如果我们改变视频的来源，或（在一些浏览器中）当产生一个<code>ended</code>事件。<br>
+ <br>
+ 所以 <code>defaultPlaybackRate</code> 允许我们在播放媒体文件之前设置播放速率，而<code>playbackRate</code> 只允许我们在媒体播放阶段改变它。<br>
+ <br>
+ 有一个可用事件 <code>ratechange</code>，每次 <code>playbackRate</code> 改变的时候均会触发。</p>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<ul>
+ <li>Chrome 20+ ✔</li>
+ <li>Firefox 20+ ✔</li>
+ <li>IE 9+ ✔</li>
+ <li>Safari 6+ ✔</li>
+ <li>Opera 15+ ✔</li>
+ <li>Mobile Chrome (Android) ✖</li>
+ <li>Mobile Firefox 24+ ✔</li>
+ <li>IE Mobile ✖</li>
+ <li>Mobile Safari 6+ (iOS) ✔</li>
+ <li>Opera Mobile ✖</li>
+</ul>
+
+<h3 id="注意">注意</h3>
+
+<ul>
+ <li>大多数浏览器对0.5至4之外的<code>playbackRate</code>值会停止播放音频，而视频会静音播放。对大多数应用，推荐限制值的范围在0.5至4之间。</li>
+ <li>当  <code>playBackRate</code> 改变的时候音频的进度条不会变化。  </li>
+ <li>负数不会引起媒体文件反向播放。</li>
+ <li>当<code>ended</code>事件触发时IE9+会转换到默认播放速率。</li>
+ <li>当媒体源文件被替换时，Firefox会触发  <code>ratechange</code> 事件。</li>
+ <li>在 iOS 7 中你只能在媒体暂停的时候影响<code>playbackRate</code>值（不是它播放的时候）。</li>
+</ul>
+
+<h2 id="请参阅">请参阅</h2>
+
+<ul>
+ <li><a href="http://hyperaud.io/lab/pbr-test/">Hyperaudio's Playback Rate Test</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLMediaElement">HTMLMediaElement reference</a><br>
+   </li>
+</ul>
diff --git a/files/zh-cn/web/guide/css/block_formatting_context/index.html b/files/zh-cn/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..04ccc3bedb
--- /dev/null
+++ b/files/zh-cn/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,198 @@
+---
+title: 块格式化上下文
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - BFC
+  - Block Formatting Context
+  - CSS
+  - 块格式化上下文
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<p>{{ CSSRef() }}</p>
+
+<p><strong title="BFC">块格式化上下文（Block Formatting Context，BFC）</strong> 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。</p>
+
+<p>下列方式会创建<strong>块格式化上下文</strong>：</p>
+
+<ul>
+ <li>根元素（<code>&lt;html&gt;）</code></li>
+ <li>浮动元素（元素的 {{ cssxref("float") }} 不是 <code>none</code>）</li>
+ <li>绝对定位元素（元素的 {{ cssxref("position") }} 为 <code>absolute</code> 或 <code>fixed</code>）</li>
+ <li>行内块元素（元素的 {{ cssxref("display") }} 为 <code>inline-block</code>）</li>
+ <li>表格单元格（元素的 {{ cssxref("display") }} 为 <code>table-cell</code>，HTML表格单元格默认为该值）</li>
+ <li>表格标题（元素的 {{ cssxref("display") }} 为 <code>table-caption</code>，HTML表格标题默认为该值）</li>
+ <li>匿名表格单元格元素（元素的 {{ cssxref("display") }} 为 <code>table<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-row</code>、 <code>table-row-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-header-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-footer-group</code>（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 <code>inline-table</code>）</li>
+ <li>{{ cssxref("overflow") }} 值不为 <code>visible</code> 的块元素</li>
+ <li>{{ cssxref("display") }} 值为 <code><a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root">flow-root</a></code> 的元素</li>
+ <li>{{ cssxref("contain") }} 值为 <code>layout</code>、<code>content </code>或 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">paint</span></font> 的元素</li>
+ <li>弹性元素（{{ cssxref("display") }} 为 <code>flex</code> 或 <code>inline-flex </code>元素的直接子元素）</li>
+ <li>网格元素（{{ cssxref("display") }} 为 <code>grid</code> 或 <code>inline-grid</code> 元素的直接子元素）</li>
+ <li>多列容器（元素的 {{ cssxref("column-count") }} 或 {{ cssxref("column-width") }} 不为 <code>auto<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，包括 </span></font></code><code>column-count</code> 为 <code>1</code>）</li>
+ <li><code>column-span</code> 为 <code>all</code> 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">标准变更</a>，<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">Chrome bug</a>）。</li>
+</ul>
+
+<p>块格式化上下文包含创建它的元素内部的所有内容.</p>
+
+<p>块格式化上下文对浮动定位（参见 {{ cssxref("float") }}）与清除浮动（参见 {{ cssxref("clear") }}）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a>）也只会发生在属于同一BFC的块级元素之间。</p>
+
+<h2 id="Specifications" name="Specifications">范例</h2>
+
+<h3 id="让浮动内容和周围的内容等高">让浮动内容和周围的内容等高</h3>
+
+<p>为了更好的理解BFC，我们先看看下面这些。</p>
+
+<p>在下面的例子中，我们让 <code>&lt;div&gt;</code> 元素浮动，并给它一个边框效果。<code>&lt;div&gt; </code>里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 <code>&lt;div&gt; </code>的边框穿出了浮动。正如我们在这篇文章中 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a> 解释的，浮动脱离了文档流，所以 <code>&lt;div&gt;</code> 的 <code>background</code> 和 <code>border</code> 仅仅包含了内容，不包含浮动。</p>
+
+<h4 id="使用overflow_auto">使用<code>overflow: auto</code></h4>
+
+<p>创建一个会包含这个浮动的 BFC，通常的做法是设置父元素 <code>overflow: auto</code> 或者设置其他的非默认的 <code>overflow: visible</code> 的值。</p>
+
+<p>设置 <code>overflow: auto</code> 创建一个新的BFC来包含这个浮动。我们的 <code>&lt;div&gt;</code> 元素现在变成布局中的迷你布局。任何子元素都会被包含进去。</p>
+
+<p>使用 <code>overflow</code> 来创建一个新的 BFC，是因为 <code>overflow</code> 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建 BFC 的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影，需要注意。另外，对于后续的开发，可能不是很清楚当时为什么使用 <code>overflow</code>。所以你最好添加一些注释来解释为什么这样做。</p>
+
+<h4 id="使用display_flow-root">使用<code>display: flow-root</code></h4>
+
+<p>一个新的 <code>display</code> 属性的值，它可以创建无副作用的 BFC。在父级块中使用 <code>display: flow-root</code> 可以创建新的 BFC。</p>
+
+<p>给 <code>&lt;div&gt;</code> <code>display: flow-root</code> 属性后，<code>&lt;div&gt;</code> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。</p>
+
+<p>关于值 <code>flow-root</code>的这个名字，当你明白你实际上是在创建一个行为类似于根元素 （浏览器中的<code>&lt;html&gt;</code>元素） 的东西时，就能发现这个名字的意义了——即创建一个上下文，里面将进行 flow layout。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate"><code>&lt;div class="blue"&gt;&lt;/div&gt;
+&lt;div class="red-outer"&gt;
+  &lt;div class="red-inner"&gt;red inner&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate"><code>.blue, .red-inner {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red-outer {
+  overflow: hidden;
+  background: red;
+}</code></pre>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 620)}}</p>
+
+<h3 id="Exclude_external_floats">Exclude external floats</h3>
+
+<p>In the following example, we are using <code>display:flow-root</code> and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new <abbr title="Block Formatting Context">BFC</abbr> must not overlap the margin box of any floats in the same block formatting context as the element itself.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="notranslate">&lt;section&gt;
+  &lt;div class="float"&gt;Try to resize this outer float&lt;/div&gt;
+  &lt;div class="box"&gt;&lt;p&gt;Normal&lt;/p&gt;&lt;/div&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;div class="float"&gt;Try to resize this outer float&lt;/div&gt;
+  &lt;div class="box" style="display:flow-root"&gt;&lt;p&gt;&lt;code&gt;display:flow-root&lt;/code&gt;&lt;p&gt;&lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="notranslate">section {
+    height:150px;
+}
+.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.box[style] {
+    background-color: aliceblue;
+    border: 5px solid steelblue;
+}
+.float {
+    float: left;
+    overflow: hidden; /* required by resize:both */
+    resize: both;
+    margin-right:25px;
+    width: 200px;
+    height: 100px;
+    background-color: rgba(255, 255, 255, .75);
+    border: 1px solid black;
+    padding: 10px;
+}
+</pre>
+
+<p>{{EmbedLiveSample("example2", 200, 300)}}</p>
+
+<p>Rather than inline-blocks with width:&lt;percentage&gt;, in this case we don't have to specify the width of the right div.</p>
+
+<p>Note that flexbox is a more efficient way to implement muti columns layout in morden CSS.</p>
+
+<h3 id="外边距塌陷">外边距塌陷</h3>
+
+<p>创建新的 BFC 避免两个相邻 <code>&lt;div&gt;</code> 之间的 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">外边距合并</a> 问题</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="notranslate">&lt;div class="blue"&gt;&lt;/div&gt;
+&lt;div class="red-outer"&gt;
+  &lt;div class="red-inner"&gt;red inner&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="notranslate">.blue, .red-inner {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red-outer {
+  overflow: hidden;
+  background: red;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Margin_collapsing", 120, 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">规范</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#block-formatting-context', 'Block Formatting Context')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>define BFC(abbr) etc.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#block-formatting', 'Block Formatting Context')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">另见</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}、{{ cssxref("clear") }}</li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/zh-cn/web/guide/css/consistent_list_indentation/index.html b/files/zh-cn/web/guide/css/consistent_list_indentation/index.html
new file mode 100644
index 0000000000..1426940c48
--- /dev/null
+++ b/files/zh-cn/web/guide/css/consistent_list_indentation/index.html
@@ -0,0 +1,106 @@
+---
+title: 调整列表缩进
+slug: Web/Guide/CSS/Consistent_list_indentation
+tags:
+  - CSS
+  - Guide
+  - NeedsUpdate
+  - Web
+  - 列表
+  - 缩进
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<p><span class="seoSummary">对列表最常见的样式修改之一是改变缩进距离，即列表项向右侧移动的距离。令人沮丧的是，缩进在一个浏览器中的表现常常与其他浏览器中的效果不尽相同。例如，如果声明列表的左边距为0，在IE浏览器中生效，但是在基于</span>Gecko引擎的浏览器中却不起作用。本文将帮助你理解这些可能发生的问题，以及如何避免这些问题的产生。</p>
+
+<p>为了弄明白这是为什么，以及如何避免这些问题发生，有必要研究一下列表结构的具体细节。</p>
+
+<h3 id="Making_a_List" name="Making_a_List">创建一个列表</h3>
+
+<p>首先，来看一个简单，单独的列表项目。该列表项目没有标记符号（或称之为“着重号”），并且没有被列表包裹起来。如下图图1所示，单独的列表项是无效的，简单且没有任何装饰。</p>
+
+<p><img alt="Figure 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+
+<p>红色的虚线边框代表列表项目内容区域的外边界。记住，从这一点上看，这个列表项目没有内边距和边框。如果我们再添加两个列表项目，我们得到下面的结果，如图2所示。</p>
+
+<p><img alt="Figure 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p>
+
+<p>现在我们在外面加上父元素；这个例子中，我们使用一个无序列表(i.e., <code>&lt;ul&gt;</code>)。根据 CSS 盒子模型，列表项目的盒子必须显示在其父元素的内容区域里。因为这里的父元素既没有 padding 也没有 margin，所以我们得到下面的结果，如图3所示。</p>
+
+<p><img alt="Figure 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+
+<p>这里，蓝色的虚线边框表示 &lt;ul&gt; 元素内容区域的边缘。因为我们没有给 &lt;ul&gt; 元素添加内边距,  所以它的内容的包裹层紧贴在三个列表项外。</p>
+
+<p>现在我们来添加列表项目标记，由于这是一个无序列表，我们添加传统的实心圆“着重标记”，如下图图4所示。</p>
+
+<p><img alt="Figure 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+
+<p>可以看到，这些标记符号在&lt;ul&gt;内容区域的外面，但这无关紧要。重要的是，这些标记被放到主要的&lt;li&gt;元素盒子外面了。它们有点像列表项目的附件，在&lt;li&gt;的内容区域外游荡，但依然依附于&lt;li&gt;。</p>
+
+<p>这就是为什么在除了IE浏览器以外的所有浏览器上，标记符号都被放在&lt;li&gt;元素的边框外，假设列表项位置的值为外部"outside"。如果该值被改为内部"inside"，则标记符号会被放到&lt;li&gt;的内容区域里面，像是放在&lt;li&gt;最开头的内联盒子一样。</p>
+
+<h3 id="Indenting_It_Twice" name="Indenting_It_Twice">二次缩进</h3>
+
+<p>So how will all this appear in a document? At the moment, we have a situation analogous to these styles:</p>
+
+<pre>ul, li {margin-left: 0; padding-left: 0;}</pre>
+
+<p>If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.</p>
+
+<p>In order to avoid this and get some indentation, there are really only three options available to browser implementors.</p>
+
+<ol>
+ <li>Give each <code>&lt;li&gt;</code> element a left margin.</li>
+ <li>Give the <code>&lt;ul&gt;</code> element a left margin.</li>
+ <li>Give the <code>&lt;ul&gt;</code> element some left padding.</li>
+</ol>
+
+<p>As it turns out, nobody seems to have used the first option. The second option was taken by Internet Explorer for Windows and Macintosh, and Opera. The third was adopted by Gecko, and by extension all the browsers that embed it.</p>
+
+<p>Let's look at the two approaches for a moment. In Internet Explorer and Opera, the lists are indented by setting a left margin of 40 pixels on the <code>&lt;ul&gt;</code> element. If we apply a background color to the <code>&lt;ul&gt;</code> element and leave the list item and <code>&lt;ul&gt;</code> borders in place, we get the result shown in Figure 5.</p>
+
+<p><img alt="Figure 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p>
+
+<p>Gecko, on the other hand, sets a left <em>padding</em> of 40 pixels for the <code>&lt;ul&gt;</code> element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.</p>
+
+<p><img alt="Figure 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p>
+
+<p>As we can see, the markers remain attached to the <code>&lt;li&gt;</code> elements, no matter where they are. The difference is entirely in how the <code>&lt;ul&gt;</code> is styled. We can only see the difference if we try to set a background or border on the <code>&lt;ul&gt;</code> element.</p>
+
+<h3 id="Finding_Consistency" name="Finding_Consistency">Finding Consistency</h3>
+
+<p>Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko, Internet Explorer, and Opera, you need to set <strong>both</strong> the left margin and left padding of the <code>&lt;ul&gt;</code> element. We can ignore <code>&lt;li&gt;</code> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:</p>
+
+<pre>ul {margin-left: 0; padding-left: 40px;}</pre>
+
+<p>If you're more interested in following the Internet Explorer/Opera model, then:</p>
+
+<pre>ul {margin-left: 40px; padding-left: 0;}</pre>
+
+<p>Of course, you can fill in your own preferred values. Set both to <code>1.25em</code>, if you like -- there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:</p>
+
+<pre>ul {margin-left: 0; padding-left: 0;}</pre>
+
+<p>Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the <code>body</code>, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.</p>
+
+<h3 id="Conclusion" name="Conclusion">结论</h3>
+
+<p>In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.</p>
+
+<h3 id="Recommendations" name="Recommendations">建议</h3>
+
+<ul>
+ <li><span style="line-height: 1.5em;">在你调整列表的缩进的时候，务必确认同时设置了 padding 和 margin.</span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h3>
+
+<ul>
+ <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+ <li>Last Updated Date: Published 30 Aug 2002</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
+
+<p>{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}</p>
diff --git a/files/zh-cn/web/guide/css/counters/index.html b/files/zh-cn/web/guide/css/counters/index.html
new file mode 100644
index 0000000000..4a8fa17797
--- /dev/null
+++ b/files/zh-cn/web/guide/css/counters/index.html
@@ -0,0 +1,120 @@
+---
+title: 使用CSS计数器
+slug: Web/Guide/CSS/Counters
+tags:
+  - CSS
+  - CSS List
+  - Web
+  - counter
+  - 教程
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p>本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中<a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">自动计数编号</a>部分的实现。</p>
+
+<p>计数器的值通过使用{{cssxref("counter-reset")}} 和 {{cssxref("counter-increment")}} 操作，在 <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> 上应用 <code>counter()</code> 或 <code>counters()</code>函数来显示在页面上。</p>
+
+<h2 id="使用计数器">使用计数器</h2>
+
+<p>使用CSS计数器之前，必须<a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">重置</a>一个值，默认是0。使用{{cssxref("counter()")}}函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <em>&lt;计算器值&gt;</em>:"。</p>
+
+<pre class="brush: css">body {
+  counter-reset: section;           /* 重置计数器成0 */
+}
+h3:before {
+  counter-increment: section;      /* 增加计数器值 */
+  content: "Section " counter(section) ": "; /* 显示计数器 */
+}
+</pre>
+
+<p>例如：</p>
+
+<pre class="brush: html">&lt;h3&gt;Introduction&lt;/h3&gt;
+&lt;h3&gt;Body&lt;/h3&gt;
+&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+
+<p>{{ EmbedLiveSample('使用计数器', 300,200) }}</p>
+
+<h2 id="计数器嵌套">计数器嵌套</h2>
+
+<p>CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 <code>counters()</code> 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：</p>
+
+<pre class="brush: css">ol {
+  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
+  list-style-type: none;
+}
+li:before {
+  counter-increment: section;            /* 只增加计数器的当前实例 */
+  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
+}
+</pre>
+
+<p>结合下面的HTML：</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<p>结果为：</p>
+
+<p>{{ EmbedLiveSample('计数器嵌套') }}</p>
+
+<h2 id="Specifications" name="Specifications">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>无变化</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">其它</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li>
+ <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li>
+</ul>
+
+<p><em>另一个可用的示例在 <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>。这篇博客 发布于2006年11月1日，但是看上去写得还是准确的。</em></p>
+
+<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div>
diff --git a/files/zh-cn/web/guide/css/css_image_sprites/index.html b/files/zh-cn/web/guide/css/css_image_sprites/index.html
new file mode 100644
index 0000000000..4a3e2bb7c9
--- /dev/null
+++ b/files/zh-cn/web/guide/css/css_image_sprites/index.html
@@ -0,0 +1,49 @@
+---
+title: 在 CSS 中实现图像合并
+slug: Web/Guide/CSS/CSS_Image_Sprites
+tags:
+  - CSS
+  - CSS Image
+  - Graphics
+  - Guide
+  - Web
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<div>{{cssRef}}</div>
+
+<p>CSS <strong>图像合并</strong>（<strong>Image sprites</strong>） 技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。</p>
+
+<div class="note">
+<p>备注: 当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。</p>
+</div>
+
+<h2 id="实现">实现</h2>
+
+<p>若要为所有类名为 <code>toolbtn</code> 的元素附加上一张图片：</p>
+
+<pre class="brush:css">.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+</pre>
+
+<p>为设置 <code>background-position</code> 以使每个按钮得到合并后图片中的正确部分，可以在 <code>background</code> 属性中的 {{cssxref("url()")}} 后添加 x, y 两个坐标值，或直接使用 {{cssxref("background-position")}} 属性。例如：</p>
+
+<pre class="brush:css">#btn1 {background-position: -20px 0px}
+#btn2 {background-position: -40px 0px}
+</pre>
+
+<p>这会将 ID 为 btn1 的元素的背景向左移 20px，ID 为 btn2 的元素的背景向左移40px（假设这两个元素都带有 <code>toolbtn</code> 这个类且应用了上面 <code>background</code> 属性中定义的图片背景）</p>
+
+<p>类似的，你也可以使用下面的代码添加悬停效果：</p>
+
+<pre class="brush:css">#btn:hover {
+  background-position: <var>&lt;pixels shifted right&gt;</var>px <var>&lt;pixels shifted down&gt;</var>px;
+}
+</pre>
+
+<h3 id="深入阅读">深入阅读</h3>
+
+<p>CSS Tricks 上的完整 Demo：<a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/</a></p>
diff --git a/files/zh-cn/web/guide/css/css基础/index.html b/files/zh-cn/web/guide/css/css基础/index.html
new file mode 100644
index 0000000000..922f62c536
--- /dev/null
+++ b/files/zh-cn/web/guide/css/css基础/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS基础
+slug: Web/Guide/CSS/CSS基础
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+  - CSS入门
+  - CSS教程
+  - Web
+  - 初学者
+  - 教程
+---
+<p> </p>
+
+<p>该  <strong>CSS 指南</strong>  将会带你进入  <a href="/zh-CN/docs/CSS">层叠样式表</a>  (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p>
+
+<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页  <a href="/zh-CN/docs/CSS">列出了</a>  更多的高级资源。</p>
+
+<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav>
+
+<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3>
+
+<ul>
+ <li>一个文本编辑器</li>
+ <li>一个现代浏览器</li>
+ <li>编辑器与浏览器的基本使用方法</li>
+</ul>
+
+<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p>
+
+<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p>
+
+<h2 id="如何使用本指南">如何使用本指南</h2>
+
+<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p>
+
+<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3>
+
+<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p>
+
+<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p>
+
+<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p>
+
+<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3>
+
+<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p>
+
+<ol>
+ <li><strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/JavaScript">JavaScript</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li>
+</ol>
+
+<p> </p>
diff --git a/files/zh-cn/web/guide/css/getting_started/boxes/index.html b/files/zh-cn/web/guide/css/getting_started/boxes/index.html
new file mode 100644
index 0000000000..05d0dffafc
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/boxes/index.html
@@ -0,0 +1,330 @@
+---
+title: 盒模型
+slug: Web/Guide/CSS/Getting_started/Boxes
+translation_of: Learn/CSS/Building_blocks
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}这是 <a href="/zh-CN/docs/CSS/开始">CSS入门教程</a> 的<span style="line-height: 1.5;">第11节，本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中，你可以修改元素占据的空间并增加装饰规则。</span></p>
+
+<h2 class="clearLeft" id="信息：盒模型">信息：盒模型</h2>
+
+<p>当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。</p>
+
+<p>中间是<em>元素</em>呈现内容的区域。这个区域的外面是<em>内边距</em>。再外面是<em>边框</em>。最外面的是<em>外边距</em>，外边距将该元素与其它元素分开。</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">外边距</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">内边距</p>
+
+    <div style="background-color: #eee;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>浅灰色标出了布局的几个部分。</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #fff;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>你在浏览器看到的样子。</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。</p>
+
+<h3 id="颜色">颜色</h3>
+
+<p>内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">外边距</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">内边距</p>
+
+    <div style="background-color: #ded;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>元素有绿色的背景。</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #efe;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>你在浏览器看到的样子。</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="边框">边框</h3>
+
+<p>你可以用边线或者边框来装饰元素。</p>
+
+<p>用 {{ cssxref("border") }} 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。</p>
+
+<p>样式包括：</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>你也可以通过设置样式为 <code>none</code> 或 <code>hidden</code> 来明确地移除边框，或者设置边框颜色为 <code>transparent</code> 来让边框不可见，后者不会改变布局。</p>
+
+<p>如果一次只指定某一个方向的边框，就用属性： {{ cssxref("border-top") }}， {{ cssxref("border-right") }}， {{cssxref("border-bottom")}}， {{cssxref("border-left")}}。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例子</div>
+
+<p>下面的代码设置了一个h3元素的背景色和顶部边框：</p>
+
+<pre class="brush:css">h3 {
+  border-top: 4px solid #7c7; /* 中绿 */
+  background-color: #efe;     /* 浅绿 */
+  color: #050;                /* 深绿 */
+  }
+</pre>
+
+<p>结果如下：</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">样式化后的标题</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>下面的规则通过给图片四周设置中灰色边框，使得图片元素更好辨认：</p>
+
+<pre class="brush:css">img {border: 2px solid #ccc;}
+</pre>
+
+<p>结果如下：</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>图片:</td>
+   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="外边距和内边距">外边距和内边距</h3>
+
+<p>使用外边距和内边距调整元素的位置，并在其周围创建空间。</p>
+
+<p>用 {{ cssxref("margin") }} 属性或者 {{ cssxref("padding") }} 属性分别设置外边距和内边距的宽度。</p>
+
+<p>如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。</p>
+
+<p>如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。</p>
+
+<p>你也可以按照顺序指定四个宽度： 上、右、下、左。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例子</div>
+
+<p>下面的规则通过给元素四周设置红色边框，标记出了类名为  <code>remark</code> 的段落元素。</p>
+
+<p>文本周围的内边距将边框与文字拉开一点距离。</p>
+
+<p>左外边距使得段落相对于其余文本产生缩进：</p>
+
+<pre class="brush:css">p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+</pre>
+
+<p>结果如下：</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p>这是一个普通的段落。</p>
+
+    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">这是一个标记段落。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。</p>
+
+<p>不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。</p>
+
+<p>为了达到理想的效果，你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。</p>
+
+<p>欲知更多关于内边距，外边距和边框的细节， 请看 <a href="/zh-CN/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">盒模型</span></a> 参考页。</p>
+</div>
+
+<h2 id="实践：添加边框">实践：添加边框</h2>
+
+<p>编辑你的CSS文件，<code>style2.css</code>。添加下面的规则，给页面中每个标题元素上面画一条线：</p>
+
+<pre class="brush:css">h3 {border-top: 1px solid gray;}
+</pre>
+
+<p>如果你做了前一页的挑战题，现在修改你已经创建的规则，或者添加这条新规则，给每个列表项的下面增加一定的空间：</p>
+
+<pre class="brush:css">li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+</pre>
+
+<p>刷新你的浏览器看看效果：</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; padding-left: 1em;">
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>（不必完全保证宽度和颜色和这里的一模一样。）</p>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">看答案。</a></p>
+
+<h2 id="下一节">下一节?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局") }}通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a> 。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html
new file mode 100644
index 0000000000..8bc02fb698
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html
@@ -0,0 +1,124 @@
+---
+title: 层叠和继承
+slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} <span class="seoSummary">这是 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">开始学CSS</a> 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。</span></p>
+
+<h2 class="clearLeft" id="资料_层叠和继承">资料: 层叠和继承</h2>
+
+<p>一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。</p>
+
+<p>对于<em>层叠</em>来说，共有三种主要的样式来源：</p>
+
+<ul>
+ <li>浏览器对HTML定义的默认样式。</li>
+ <li><span style="line-height: 1.5;">用户定义的样式。</span></li>
+ <li><span style="line-height: 1.5;">开发者定义的样式，可以有三种形式：</span>
+  <ul>
+   <li><span style="line-height: 1.5;">定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。</span></li>
+   <li>在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。</li>
+   <li>定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。</p>
+
+<p>有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的<code>userContent.css</code> 样式文件并放到“用户配置”的文件夹中。</p>
+
+<p>另外，还有一部分样式来自外链的wiki服务器上的样式表。</p>
+</div>
+
+<p>在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。</p>
+
+<p>而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。</p>
+
+<p>同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。</p>
+
+<p>再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。</p>
+
+<p>对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。</p>
+
+<p>当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。</p>
+
+<p>这就意味着，作为开发者，你很难准确的预知页面<span style="line-height: 1.5;">最终</span><span style="line-height: 1.5;">在用户电脑上的显示效果。</span></p>
+
+<p>如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：<a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a>。</p>
+</div>
+
+<h2 id="动手_使用继承">动手: 使用继承</h2>
+
+<ol>
+ <li>编辑你之前创建的style.css文件。</li>
+ <li>把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素:
+  <pre class="brush:css">p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。<br>
+
+  <p>但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.</p>
+ </li>
+</ol>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;">
+</table>
+
+<table style="border: 2px outset #36b; margin-right: 2em; padding: 1em;">
+ <caption>修改前</caption>
+ <tbody>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <caption>修改后</caption>
+ <tbody>
+  <tr>
+   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+改动一下样式表，完整如下效果：只在红色的字母上加下划线：
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">参考答案</div>
+
+<p>把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: red; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">隐藏答案</a></div>
+<a href="#tutochallenge" title="点击显示参考答案">查看参考答案</a></div>
+
+<h2 id="下一节">下一节?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<code>&lt;p&gt;</code> 和 <code>&lt;strong&gt;，你可以尝试着改变一下页面中它们的样式。</code>下一节会介绍怎样通过<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors" style="line-height: 1.5;" title="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">更有效的方式</a><span style="line-height: 1.5;">定义样式。</span></p>
diff --git a/files/zh-cn/web/guide/css/getting_started/color/index.html b/files/zh-cn/web/guide/css/getting_started/color/index.html
new file mode 100644
index 0000000000..bab181afd1
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/color/index.html
@@ -0,0 +1,332 @@
+---
+title: Color
+slug: Web/Guide/CSS/Getting_started/Color
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 系列的第8部分; 介绍了如何在你的CSS文件中运用颜色值. 在示例样式表中，介绍了背景颜色.</span></p>
+
+<h2 class="clearLeft" id="关于_颜色">关于: 颜色</h2>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">到目前为止，在这个系列中，都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样，如下图：</span></p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td></td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"></td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"></td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"></td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"></td>
+  </tr>
+  <tr>
+   <td>主要的</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"></td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"></td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"></td>
+  </tr>
+  <tr>
+   <td>次要  </td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"></td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"></td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"></td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"></td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"></td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"></td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"></td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"></td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"></td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<div class="tuto_details">
+<div class="tuto_type">细节</div>
+
+<div style="line-height: 1.428571em; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; color: rgb(0, 0, 0);">你的浏览器可能支持更多名字命名的颜色，比如：</div>
+
+<div></div>
+
+<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td>dodgerblue</td>
+   <td style="width: 2em; height: 2em; background-color: dodgerblue;"></td>
+   <td>peachpuff</td>
+   <td style="width: 2em; height: 2em; background-color: peachpuff;"></td>
+   <td>tan</td>
+   <td style="width: 2em; height: 2em; background-color: tan;"></td>
+   <td>firebrick</td>
+   <td style="width: 2em; height: 2em; background-color: firebrick;"></td>
+   <td>aquamarine</td>
+   <td style="width: 2em; height: 2em; background-color: aquamarine;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多存在的名字的颜色命名</span>, <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你可以参看CSS 3颜色模块中的</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="line-height: 1.5;">SVG color keywords</a><span style="line-height: 1.5;"> 部分. </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">一定要注意的是，使用名字命名颜色的时候，有可能用户的浏览器是不支持的。</span></p>
+</div>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多地颜色，你可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15：</span></p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>黑</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"></td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>纯 红</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"></td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>纯 绿</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"></td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>纯 蓝</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"></td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>白</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）</span>:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>黑</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"></td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>纯红</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"></td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>纯绿</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"></td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>纯蓝</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"></td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>白</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你能够从你的画图程序或者其他的工具上得到6位的颜色数值</span>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例如</div>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">可以通过调整3位数字来得到不同的颜色</span>:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>从纯红开始:</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"></td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它淡一点，加一些绿色和蓝色</span>:</td>
+   <td style="width: 2em; height: 2em; background-color: #f77;"></td>
+   <td><code>#f77</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更偏橙色一些，多加一些绿色</span>:</td>
+   <td style="width: 2em; height: 2em; background-color: #fa7;"></td>
+   <td><code>#fa7</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更深一些，所有的颜色部分，红，绿，蓝都要减少</span>:</td>
+   <td style="width: 2em; height: 2em; background-color: #c74;"></td>
+   <td><code>#c74</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它的饱和度更低一些，所有的颜色值都调整到差不多大小</span>:</td>
+   <td style="width: 2em; height: 2em; background-color: #c98;"></td>
+   <td><code>#c98</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">如果所有的颜色值都相等，那么就变成了灰色</span>:</td>
+   <td style="width: 2em; height: 2em; background-color: #ccc;"></td>
+   <td><code>#ccc</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于浅色，比如说淡蓝色</span>:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">从纯白色开始</span>:</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td>
+   <td><code>#fff</code></td>
+  </tr>
+  <tr>
+   <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">稍微降低一下各个颜色值</span>:</td>
+   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"></td>
+   <td><code>#eef</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">还能够通过RGB值（0-255或者是百分比值），来得到颜色</span></p>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">比如，下面是深红色的RGB表示法</span>:</p>
+
+<pre class="brush:css">rgb(128, 0, 0) </pre>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于如何指定颜色的所有信息，可以参看 CSS规范中的</span>: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> 部分.</p>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">更多关于系统颜色的说明，比如菜单、</span>树<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">等，可以参看CSS规范中得</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="line-height: 1.5;">CSS2 System Colors</a><span style="line-height: 1.5;"> 部分.</span></p>
+</div>
+
+<h3 id="颜色属性">颜色属性</h3>
+
+<p>你已经在文本中使用了 {{ cssxref("color") }} 属性.</p>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">同样可以使用</span><span style="line-height: 1.5;">{{ cssxref("background-color") }} </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来改变元素的背景色.</span></p>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">背景色可以设置</span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">transparent</code><span style="line-height: 1.5;"> </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来移除掉所有的颜色，呈现出父元素的背景色</span></p>
+
+<div class="tuto_example">
+<div class="tuto_type">例如</div>
+
+<p>在本指南中，<strong>例如</strong> 文本框使用了淡黄色来表示背景色：</p>
+
+<pre class="brush:css">background-color: #fffff4;
+</pre>
+
+<p><strong>更多细节</strong> 文本框使用了下面的淡灰色 :</p>
+
+<pre class="brush:css">background-color: #f4f4f4;
+</pre>
+</div>
+
+
+
+<h2 id="实践_使用颜色代码">实践: 使用颜色代码</h2>
+
+<ol>
+ <li>编辑你的CSS文件.</li>
+ <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">下面用粗体显示的部分，表示首字母用淡蓝色显示</span>. (你的文件中的布局和注释可能与下面所示的不同。按照你喜欢的方式来组织它们吧！)
+  <pre class="brush:css;highlight:[13]">/*** CSS 手册: 颜色页面 ***/
+
+/* 页面 字体 */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* 段落 */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* 首字母 */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;} </pre>
+ </li>
+ <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">保存文件，刷新浏览器看结果</span>.</li>
+</ol>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">在你的CSS文件中，把所有的代码颜色的名字用3位16进制数字的方式表示出来</span>.</p>
+
+<p>(<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">不能完全做出来，不过能够最的很接近。如果要准备的表示颜色名字的话，需要6位16进制</span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">你需要查一下CSS规范或者是工具来得到一致的颜色</span><span style="line-height: 1.5;">.)</span></p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>The following values are reasonable approximations of the named colors:</p>
+
+<pre class="brush: css">strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+</pre>
+
+
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决的方法.</a></div>
+
+<h2 id="下一步">下一步?</h2>
+
+<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容")}}. 示例文本和示例样式表是严格分开的。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">下一节 </a>将介绍在什么情况下可以允许他们不分开.</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/content/index.html b/files/zh-cn/web/guide/css/getting_started/content/index.html
new file mode 100644
index 0000000000..f3f9a0797b
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/content/index.html
@@ -0,0 +1,160 @@
+---
+title: Content
+slug: Web/Guide/CSS/Getting_started/Content
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS 入门教程</a>的第9部分，介绍了一些通过CSS改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。</span></p>
+
+<h2 class="clearLeft" id="信息_内容">信息: 内容</h2>
+
+<p>CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。</p>
+
+<p>在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候，你可以在样式表中指定内容。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。</p>
+
+<p>如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。</p>
+
+<p>样式表中指定的内容不会成为DOM的一部分。</p>
+</div>
+
+<h3 id="文本内容">文本内容</h3>
+
+<p>CSS可以在元素的前后插入文本：在选择器的后面加上{{ cssxref("::before") }} 或者 {{ cssxref("::after") }} 。在声明中，指定 {{ cssxref("content") }} 属性，并设置文本内容。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>下面这条规则在所有类名包含 <span style="font-family: courier new,andale mono,monospace; line-height: normal;">ref的元素前面加上</span><span style="line-height: 1.5;"> </span><strong style="color: navy; font-weight: bold; line-height: 1.5;">Reference:</strong></p>
+
+<pre class="brush:css">.ref::before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference: ";
+}
+</pre>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a></p>
+
+<p>还可以通过转义机制（通过反斜杠转义）指定单个字符。<span style="line-height: 1.5;">比如， \265B 是国际象棋黑皇后的符号 ♛。更多参见 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24" style="line-height: 1.5;">Referring to characters not represented in a character encoding</a><span style="line-height: 1.5;"> 和CSS规范中的 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6" style="line-height: 1.5;">Characters and case</a><span style="line-height: 1.5;">。</span></p>
+</div>
+
+<h3 id="图片内容">图片内容</h3>
+
+<p>可以通过将{{ cssxref("content") }} 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>下面这条规则在所有类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">glossary的a标签后面插入一个空格和一个图标：</span></p>
+
+<pre class="brush:css">a.glossary::after {content: " " url("../images/glossary-icon.gif");}
+</pre>
+</div>
+
+<p>将图片设置成元素的背景图：将 {{ cssxref("background") }} 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>这条规则通过指定图片URL设置特定元素的背景。</p>
+
+<p>这是一个ID选择器；no-repeat表示背景图只出现一次，不重复:</p>
+
+<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+</pre>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>了解更多影响背景图的属性，以及其他背景图选项，参见 {{ cssxref("background") }} 。</p>
+</div>
+
+<h2 id="实践_添加背景图片">实践: 添加背景图片</h2>
+
+<p>这幅图是一个白方块，底部有一条蓝色实线:</p>
+
+<table style="border: 2px solid #cccccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<ol>
+ <li>下载上图放到CSS同目录下</li>
+ <li>编辑CSS文件，为body设置背景图.
+  <pre class="brush:css">background: url("Blue-rule.png");
+</pre>
+
+  <p>背景图默认是 <code>repeat（重复）的，无需明确指出。图片在水平和垂直方向重复，最终呈现出横格纸的效果：</code></p>
+
+  <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+  <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
+
+  <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+  <div style="font-style: italic; width: 24em;">
+  <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p>
+  </div>
+
+  <div style="font-style: normal; padding-top: 2px; height: 8em;">
+  <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p>
+  </div>
+  </div>
+  </div>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>下载图片:</p>
+
+<table style="border: 2px solid #cccccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>在样式表中增加一条规则，使得每行前面显示上面的图标</p>
+
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
+
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div>
+
+<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div>
+</div>
+</div>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add this rule to your stylesheet:</p>
+
+<pre class="brush: css">p:before{
+  content: url("yellow-pin.png");
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">答案.</a></div>
+
+<h2 id="接下来">接下来?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">为列表元素指定样式</a>。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html b/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html
new file mode 100644
index 0000000000..b43fc34302
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html
@@ -0,0 +1,120 @@
+---
+title: CSS如何工作
+slug: Web/Guide/CSS/Getting_started/How_CSS_works
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为何使用CSS？") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。 你可以通过分析示例代码来看看样式表中的详细信息。</span></p>
+
+<h2 class="clearLeft" id="信息：CSS_如何工作">信息：CSS 如何工作</h2>
+
+<p>浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：</p>
+
+<ol>
+ <li>浏览器先将标记语言和CSS转换成<a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。</li>
+ <li>最后浏览器把 DOM的内容展示出来。</li>
+</ol>
+
+<p>标记语言通过使用“元素”来定义文档结构。你需要使用一些以'&lt;'开头和以'&gt;'结尾的字符串，俗称<em>tags，</em>来构成元素。这些元素一般是在'<code>&lt; &gt;</code>'里加上元素名来作为起始tag，在<span style="line-height: inherit;">'</span><code style="font-size: 14px; line-height: inherit;">&lt; &gt;</code><span style="line-height: inherit;">'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。</span></p>
+
+<p>元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。</p>
+
+<p>DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+在示例代码中， 我们使用 <code>&lt;p&gt;</code> 标签和它的结束标签 <code>&lt;/p&gt;</code> 构造了一个容器：
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h2 id="实例">实例</h2>
+
+<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
+
+<p>在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。</p>
+
+<pre><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">C</span>"
+├─"<span style="color: black;">ascading</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+├─"<span style="color: black;">tyle</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+└─"<span style="color: black;">heets</span>"</pre>
+</div>
+
+<p>理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。</p>
+
+<h2 id="行动：分析DOM结构">行动：分析DOM结构</h2>
+
+<h3 id="使用_DOM_Inspector">使用 DOM Inspector</h3>
+
+<p>你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。</p>
+
+<ol>
+ <li>使用 Mozilla 浏览器来打开示例文档。</li>
+ <li>在浏览器菜单栏中，选择 <strong>工具 &gt; 查看器</strong>，也可能是选择 <strong>工具&gt; Web 开发者 &gt; 查看器。</strong>
+  <div class="tuto_details">
+  <div class="tuto_type">更多细节</div>
+
+  <p>如果你的 Mozilla 浏览器没有安装 DOMi，你可以到 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">安装地址</a> 来安装并重启浏览器，然后再回到这里继续学习。</p>
+
+  <p>如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。</p>
+  </div>
+ </li>
+ <li>你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。
+  <p><strong>注意: </strong> HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。</p>
+
+  <p>通过展开元素结点，你可能会看到下面这样的一部分内容：</p>
+
+  <pre>│ ▼╴<span style="color: black;">P</span>
+│ │ │ ▼╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ ►╴<span style="color: black;">STRONG</span>
+│ │</pre>
+
+  <p>选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。</p>
+
+  <p>如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。 </p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>在 DOMi 中，点击一个 <small>STRONG</small> 结点。</p>
+
+<p>在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。 </p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">查看挑战的解决方案</a></div>
+
+<h3 id="使用_Web_X-Ray_Goggles">使用 Web X-Ray Goggles</h3>
+
+<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>显示的信息内容相比较 DOM Inspector要少， 但是它安装和使用的步骤更简单。</p>
+
+<p><span style="line-height: 1.5;">到 </span><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" style="line-height: 1.5;" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>的主页。</p>
+
+<ol>
+ <li>将页面中的书签链接拖拽到浏览器工具栏。</li>
+ <li>打开你的示例 HTML 文档。</li>
+ <li>通过点击工具栏中的相应书签来激活Web X-Ray Goggles。 </li>
+ <li>通过在文档中移动鼠标箭头来查看相应的文档元素。</li>
+</ol>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承") }}如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">下一章</a> 中将会深入解释这种相互联系和相互影响。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/index.html b/files/zh-cn/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..9e9aefd3d9
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/index.html
@@ -0,0 +1,58 @@
+---
+title: CSS入门教程
+slug: Web/Guide/CSS/Getting_started
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+  - CSS入门
+  - CSS教程
+  - Web
+  - 初学者
+  - 教程
+translation_of: Learn/CSS/First_steps
+---
+<p> </p>
+
+<p>该  <strong>CSS 指南</strong>  将会带你进入  <a href="/zh-CN/docs/CSS">层叠样式表</a>  (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p>
+
+<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页  <a href="/zh-CN/docs/CSS">列出了</a>  更多的高级资源。</p>
+
+<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav>
+
+<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3>
+
+<ul>
+ <li>一个文本编辑器</li>
+ <li>一个现代浏览器</li>
+ <li>编辑器与浏览器的基本使用方法</li>
+</ul>
+
+<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p>
+
+<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p>
+
+<h2 id="如何使用本指南">如何使用本指南</h2>
+
+<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p>
+
+<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3>
+
+<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p>
+
+<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p>
+
+<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p>
+
+<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3>
+
+<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p>
+
+<ol>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/JavaScript">JavaScript</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li>
+</ol>
+
+<p> </p>
diff --git a/files/zh-cn/web/guide/css/getting_started/javascript/index.html b/files/zh-cn/web/guide/css/getting_started/javascript/index.html
new file mode 100644
index 0000000000..c5ccd6e901
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/javascript/index.html
@@ -0,0 +1,171 @@
+---
+title: JavaScript 与 CSS
+slug: Web/Guide/CSS/Getting_started/JavaScript
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>本文是 <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">CSS tutorial</a> 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 </p>
+
+<p>第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。</p>
+
+<p>换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。</p>
+
+<p>上一章 (Part I)： <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br>
+ 下一章： <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
+
+<h3 id="Information:_JavaScript" name="Information:_JavaScript">相关知识： JavaScript</h3>
+
+<p>JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。</p>
+
+<p>JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 </p>
+
+<p>有三种方法可以实现这样的效果：</p>
+
+<ul>
+ <li>控制样式表—可以添加、删除、修改样式表。</li>
+ <li>控制样式规则—可以添加、删除、修改样式规则。</li>
+ <li>控制DOM中的单个元素—可以不依赖样式表来修改元素样式。</li>
+</ul>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
+ <caption>更多细节</caption>
+ <tbody>
+  <tr>
+   <td>要了解 JavaScript的更多细节，可以到这个wiki <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">范例： 一个JavaScript的实例</h3>
+
+<p>新建一个<code>doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：</code></p>
+
+<div style="width: 48em;">
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
+&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
+&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;JavaScript sample&lt;/h1&gt;
+&lt;div id="square"&gt;&lt;/div&gt;
+&lt;button&gt;Click Me&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>新建一个CSS文件<code>style5.css</code>，复制粘贴下面的样式代码到文件中：</p>
+
+<div style="width: 48em;">
+<pre class="brush:css;">  #square {
+
+      width: 20em;
+
+      height: 20em;
+
+      border: 2px inset gray;
+
+      margin-bottom: 1em;
+
+  }
+
+  button {
+
+      padding: .5em 2em;
+
+  }</pre>
+</div>
+
+<p>新建一个JavaScript文件<code>script5.js</code>，复制粘贴下面的代码到文件中：</p>
+
+<div style="width: 48em;">
+<pre class="brush: js">// JavaScript demonstration
+var changeBg = function (event) {
+    console.log("method called");
+    var me = event.target
+    ,   square = document.getElementById("square");
+    square.style.backgroundColor = "#ffaa44";
+    me.setAttribute("disabled", "disabled");
+    setTimeout(function () { clearDemo(me) }, 2000);
+}
+
+function clearDemo(button) {
+    var square = document.getElementById("square");
+    square.style.backgroundColor = "transparent";
+    button.removeAttribute("disabled");
+}
+
+window.onload = function() {
+    var button = document.querySelector("button");
+    button.addEventListener("click", changeBg);
+    console.log(button);
+}</pre>
+</div>
+
+<p>用浏览器打开HTML文件并点击按钮。</p>
+
+<p>这里有在线的示例：<a href="http://jsfiddle.net/diwanshi/Y4VPK/4/embedded/result/">Here is the Live Example</a></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><strong>JavaScript demonstration</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><strong>JavaScript demonstration</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>重要提示</strong> ：
+
+<ul>
+ <li>HTML文档中外链了CSS文件和JavaScript文件。</li>
+ <li>脚本直接修改了DOM元素的样式，通过修改属性值来改变按钮的样式。</li>
+ <li>在JavaScript中<code>document.getElementById("square")</code> 在功能上同 CSS 选择器 <code>#square的功能是类似的。</code></li>
+ <li>在 JavaScript代码中, <code>backgroundColor</code> 对应于CSS 属性<code>background-color</code>。因为JavaScript中不允许在命名中出现中划线，所以采用了驼峰式,的写法来做替代。</li>
+ <li>浏览器针对button有内置的CSS规则  <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> ，这会导致按钮在不可点击状态下的显示样式跟预期有出入。</li>
+</ul>
+</div>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;">
+ <caption>挑战</caption>
+ <tbody>
+  <tr>
+   <td>修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>这里有一个解决方案示例：<a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">See a solution to this challenge.</a></p>
+
+<h3 id="下一步做什么呢？">下一步做什么呢？</h3>
+
+<p>如果你对本页内容有疑问，或者有其他想法，欢迎到 <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Discussion</a> 页面进行讨论。</p>
+
+<p>在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： <strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p>
diff --git a/files/zh-cn/web/guide/css/getting_started/layout/index.html b/files/zh-cn/web/guide/css/getting_started/layout/index.html
new file mode 100644
index 0000000000..cd58ff4d63
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/layout/index.html
@@ -0,0 +1,367 @@
+---
+title: 布局
+slug: Web/Guide/CSS/Getting_started/Layout
+translation_of: Learn/CSS/CSS_layout
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/Boxes", "盒模型")}}本文是 <a href="/zh-CN/docs/CSS/开始" title="en/CSS/Getting Started">CSS入门教程</a> 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。</p>
+
+<h2 class="clearLeft" id="说明_布局">说明: 布局</h2>
+
+<p>你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。</p>
+
+<p>当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。</p>
+
+<p>本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 <a href="http://learnlayout.com/">学习高级布局</a>）</p>
+
+<h3 id="文档结构">文档结构</h3>
+
+<p>当你想控制文档布局时，就不得不改变它的结构。</p>
+
+<p>页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 {{ HTMLElement("div") }} 元素来创建结构。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>在你的示例中, 编号段落并没有自己的容器。</p>
+
+<p>你的样式表无法为这些段落画出边框，因为没有选择器指向它们。</p>
+
+<p>为了解决这个问题, 你可以在段落之外添加一个{{ HTMLElement("div") }} 。这个标签是唯一的，可以指定一个id属性来标识:</p>
+
+<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
+&lt;div id="numbered"&gt;
+  &lt;p&gt;Lorem ipsum&lt;/p&gt;
+  &lt;p&gt;Dolor sit&lt;/p&gt;
+  &lt;p&gt;Amet consectetuer&lt;/p&gt;
+  &lt;p&gt;Magna aliquam&lt;/p&gt;
+  &lt;p&gt;Autem veleum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>现在可以通过样式表在每个列表周围画出边框了:</p>
+
+<pre class="brush:css">ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+</pre>
+
+<p>运行结果如下:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="大小单位">大小单位</h3>
+
+<p>到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。</p>
+
+<p>因此，最好通过百分比或 ems (<code>em</code>) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>文本左边的border通过像素来指定大小。</p>
+
+<p>文本右边的border通过 ems来指定大小。</p>
+
+<p>在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="">RESIZE ME PLEASE</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多详情</div>
+
+<p>对于其它设备，其它的长度单位可能更合适。</p>
+
+<p>在本指南中会有其它篇幅详细介绍这一点。</p>
+
+<p>更多详情参见CSS说明中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> .</p>
+</div>
+
+<h3 id="文本布局">文本布局</h3>
+
+<p>有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:</p>
+
+<dl>
+ <dt>{{ cssxref("text-align") }}</dt>
+ <dd>内容对齐。 可以使用下面几个值： <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>。</dd>
+ <dt>{{ cssxref("text-indent") }}</dt>
+ <dd>指定内容缩进。</dd>
+</dl>
+
+<p>这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>标题居中:</p>
+
+<pre class="brush:css">h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+</pre>
+
+<p>输出结果:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。</p>
+</div>
+
+<h3 id="浮动">浮动</h3>
+
+<p> {{ cssxref("float") }} 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。</p>
+
+<p>本文剩下部分都是围绕浮动元素展开。你可以使用 {{ cssxref("clear") }} 属性来避免其它元素受到浮动效果的影响。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。</p>
+
+<p>为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:</p>
+
+<pre class="brush:css">ul, #numbered {float: left;}
+h3 {clear: left;}
+</pre>
+</div>
+
+<p>运行结果如下:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(box右侧需要增加一些padding ,防止文本与边框太近)</p>
+
+<h3 id="位置">位置</h3>
+
+<p>你可以为一个元素指定  {{ cssxref("position") }} 属性为以下值之一，来设置其位置。</p>
+
+<p>这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。</p>
+
+<dl>
+ <dt><code>relative</code></dt>
+ <dd>通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。</dd>
+ <dt><code>fixed</code></dt>
+ <dd>为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。</dd>
+ <dt><code>absolute</code></dt>
+ <dd>为元素指定相对于其父元素的确切位置。只有在父元素使用 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 时才有效。你可以为任何父元素指定 <code>position: relative;因为它不会产生移动。</code></dd>
+ <dt><code>static</code></dt>
+ <dd>默认值。当明确要关闭位置属性时使用。</dd>
+</dl>
+
+<p>和 <code>position</code> 属性(除了 <code>static</code>)一起使用的, 有下列属性: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> 通过设置它们来指定元素的位置或大小。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:</p>
+
+<pre class="brush:html">&lt;div id="parent-div"&gt;
+  &lt;p id="forward"&gt;/&lt;/p&gt;
+  &lt;p id="back"&gt;\&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>在你的样式表里，将父容器的position设置为 <code>relative。无需为它设置任何具体变动。</code> 将子元素的position属性设置为 <code>absolute</code>:</p>
+
+<pre class="brush:css">#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no margin around the elements */
+  top: 0px; /* distance from top */
+  left: 0px; /* distance from left */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+</pre>
+
+<p>输出结果如下,反斜杠显示在斜杠上方</p>
+
+<div style="position: relative; left: .33em; font: bold 300% sans-serif;">
+<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>
+
+<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
+</div>
+
+<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多详情</div>
+
+<p>更多详情的postion说明在 CSS Specification 中占用了两个章节: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> 和 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p>
+
+<p>如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。</p>
+</div>
+
+<h2 id="实践_设置布局">实践: 设置布局</h2>
+
+<ol>
+ <li>修改示例文档, <code>doc2.html</code>, 和样式表, <code>style2.css</code>, 使用之前的示例 <a href="#Document_structure" title="#Document structure"><strong>文档结构</strong></a> and <a href="#Floats" title="#Floats"><strong>浮动</strong></a>.</li>
+ <li>在 <a href="#Floats" title="#Floats"><strong>浮动</strong></a> 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>修改示例文档, <code>doc2.html</code>, 在文档末尾添加一个标签, <code>注意在&lt;/body&gt;之前。</code></p>
+
+<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
+</pre>
+
+<p>如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:</p>
+
+<table style="border: 2px solid #ccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。</p>
+
+<p>在样式表中添加一条规则，将图片显示在文档右上角。</p>
+
+<p>刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。</p>
+
+<div style="position: relative; width: 29.5em; height: 18em;">
+<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
+<ul style="">
+ <li>Arctic</li>
+ <li>Atlantic</li>
+ <li>Pacific</li>
+ <li>Indian</li>
+ <li>Southern</li>
+</ul>
+</div>
+
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
+<p><strong>1: </strong>Lorem ipsum</p>
+
+<p><strong>2: </strong>Dolor sit</p>
+
+<p><strong>3: </strong>Amet consectetuer</p>
+
+<p><strong>4: </strong>Magna aliquam</p>
+
+<p><strong>5: </strong>Autem veleum</p>
+</div>
+
+<p style=""> </p>
+
+<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
+</div>
+</div>
+</div>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout"> 查看该挑战的解决方案</a>。</p>
+
+<h2 id="接下来是什么？">接下来是什么？</h2>
+
+<p>{{ nextPage("/zh-CN/docs/CSS/开始/Tables", "表格") }}你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器，以及你可以用来展示<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Tables">表格</a>的一些特定方法。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/lists/index.html b/files/zh-cn/web/guide/css/getting_started/lists/index.html
new file mode 100644
index 0000000000..94cb7f3c1a
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/lists/index.html
@@ -0,0 +1,323 @@
+---
+title: Lists
+slug: Web/Guide/CSS/Getting_started/Lists
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容") }} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件，和一个新的定义列表的样式表。</p>
+
+<h2 class="clearLeft" id="信息_列表">信息: 列表</h2>
+
+<p>如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。</p>
+
+<p>CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。</p>
+
+<p>使用{{ cssxref("list-style") }} 属性来指定列表项标记的样式。</p>
+
+<p>你的CSS中的选择器可以选中列表项 (比如, {{ HTMLElement("li") }})。也可以选中列表项的父节点 (比如, {{ HTMLElement ("ul") }})。此时列表项会继承父节点的样式。</p>
+
+<h3 id="无序列表">无序列表</h3>
+
+<p>无序列表的每个列表项都用同样的方式标记。</p>
+
+<p>CSS 有三种标记样式：</p>
+
+<ul style="padding-left: 2em;">
+ <li style="list-style-type: disc;"><code>disc</code></li>
+ <li style="list-style-type: circle;"><code>circle</code></li>
+ <li style="list-style-type: square;"><code>square</code></li>
+</ul>
+
+<p>你可以指定一个图片的URL来自定义标记样式。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>下面的规则为不同类的列表项指定了不同的标记：</p>
+
+<pre class="brush:css">li.open {list-style: circle;}
+li.closed {list-style: disc;}
+</pre>
+
+<p>这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：</p>
+
+<pre class="brush:css">&lt;ul&gt;
+  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
+  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
+  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
+  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
+  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>结果：</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <ul style="padding-right: 6em;">
+     <li style="list-style-type: circle;">Lorem ipsum</li>
+     <li style="list-style-type: disc;">Dolor sit</li>
+     <li style="list-style-type: disc;">Amet consectetuer</li>
+     <li style="list-style-type: circle;">Magna aliquam</li>
+     <li style="list-style-type: disc;">Autem veleum</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="有序列表">有序列表</h3>
+
+<p>在有序列表中，每个列表项都被标记了不同的序号。</p>
+
+<p>用{{ cssxref("list-style") }} 属性指定标记样式：</p>
+
+<ul style="padding-left: 2em;">
+ <li style=""><code>decimal</code></li>
+ <li style=""><code>lower-roman</code></li>
+ <li style=""><code>upper-roman</code></li>
+ <li style=""><code>lower-latin</code></li>
+ <li style=""><code>upper-latin</code></li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>这条规则指定类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">info的</span><span style="line-height: 1.5;">{{ HTMLElement("ol") }} 元素的列表项用大写字母标序</span></p>
+
+<pre class="brush:css">ol.info {list-style: upper-latin;}
+</pre>
+
+<p>{{ HTMLElement("li") }} 元素继承了ol的样式：</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <ul>
+     <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li>
+     <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li>
+     <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li>
+     <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li>
+     <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>{{ cssxref("list-style") }} 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见 {{ cssxref("list-style") }}参考页。</p>
+
+<p>如果你使用如HTML这类提供了方便的无序列表<span style="line-height: 1.5;"> ({{ HTMLElement("ul") }}) 和有序列表</span><span style="line-height: 1.5;">({{ HTMLElement("ol") }})</span><span style="line-height: 1.5;">的标记语言，就尽量使用这些标签。当然，你完全可以将 {{ HTMLElement("ul") }} 显示成有序列表，将 {{ HTMLElement("ol") }} 显示成无序列表。</span></p>
+
+<p>浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。</p>
+</div>
+
+<h3 id="计数器">计数器</h3>
+
+<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
+<p><strong>注意: </strong> 一些浏览器不支持计数器。<a class="external" href="http://www.quirksmode.org/" style="line-height: 1.5;" title="http://www.quirksmode.org/">Quirks Mode site</a><span style="line-height: 1.5;"> 的</span><a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: 1.5;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: 1.5;"> 页有更多这方面的兼容表格可以参考。</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/Guide/CSS_Reference" style="line-height: 1.5;" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference">CSS Reference</a><span style="line-height: 1.5;"> 也有浏览器兼容性表格。</span></p>
+</div>
+
+<p>你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。</p>
+
+<p>要想计数，你必须定义一个计数器。</p>
+
+<p>在计数开始前的某个元素上，设置 {{ cssxref("counter-reset") }}属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。</p>
+
+<p>设置每个需要计数的元素的{{ cssxref("counter-increment") }} 属性为你的计数器名。</p>
+
+<p>通过为选择器增加 {{ cssxref(":before") }} 或 {{ cssxref(":after") }} 并设置 <code>content</code> 属性来显示计数器。 (如上一节所示, <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="en-US/docs/Web/Guide/CSS/Getting_Started/Content">内容</a></strong>).</p>
+
+<p>在<code>content属性</code>的值中设置 <code>counter()，</code>在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 <strong>有序列表 </strong>中相同。</p>
+
+<p>正常情况下，显示计数器的元素也会递增计数器。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>这条规则会为每个类名中包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLElement("h3") }} 元素初始化计数器 mynum：</span></p>
+
+<pre class="brush:css">h3.numbered {counter-reset: mynum;}
+</pre>
+
+<p> </p>
+
+<p>这条规则为每个类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLELement("p") }}元素</span><span style="line-height: 1.5;">显示并递增</span><span style="line-height: 1.5;">计数器：</span></p>
+
+<pre class="brush:css">p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+</pre>
+
+<p>结果：</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: .5em 6em .5em 1em;">
+ <tbody>
+  <tr>
+   <td><strong>Heading</strong>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。</p>
+
+<p>如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。</p>
+
+<p>你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 。</p>
+</div>
+
+<h2 id="实例_设计列表样式">实例: 设计列表样式</h2>
+
+<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">新建</span></font>doc2.html：</code></p>
+
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Sample document 2&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style2.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Arctic&lt;/li&gt;
+      &lt;li&gt;Atlantic&lt;/li&gt;
+      &lt;li&gt;Pacific&lt;/li&gt;
+      &lt;li&gt;Indian&lt;/li&gt;
+      &lt;li&gt;Southern&lt;/li&gt;
+    &lt;/ul&gt;
+
+    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
+    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
+    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
+    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
+    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
+    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>新建<code>style2.css</code>：</p>
+
+<pre class="brush:css;">/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+</pre>
+
+<p>如果布局和注释不符合你的口味，随便改。</p>
+
+<p>在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>增加一条规则，用罗马数字i到v计数大洋的名字</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>修改样式，将标题用大写字母加括号的方式标序：</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
+
+    <p><strong>. . .</strong></p>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">答案</a></p>
+
+<h2 id="接下来">接下来?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes", "盒模型") }}浏览器显示你的样例文档，在将元素放置在页面上时，会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作，元素下的形状我们称为<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes">盒子</a>（<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>）。</p>
+
+<p> </p>
diff --git a/files/zh-cn/web/guide/css/getting_started/media/index.html b/files/zh-cn/web/guide/css/getting_started/media/index.html
new file mode 100644
index 0000000000..ef181eedcc
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/media/index.html
@@ -0,0 +1,391 @@
+---
+title: 媒体
+slug: Web/Guide/CSS/Getting_started/Media
+translation_of: Web/Progressive_web_apps/Responsive/Media_types
+---
+<p>{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}</p>
+
+<p>本章节是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> <span style="line-height: 1.5;">指南的第14章也是最后一部分。 这本指南主要描述了用来展示文档的CSS的属性及其值，本章节依旧着眼于这个目标，同时也会介绍CSS样式表的结构。</span></p>
+
+<h2 class="clearLeft" id="信息_Media">信息: Media</h2>
+
+<p>CSS的作用是将网页文档以更友好的展现方式呈现给用户。</p>
+
+<p><span style="line-height: 1.5;">例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。</span></p>
+
+<p>CSS通过使用{{CSSXref("@media")}} 的格式来对特定的媒介指定适配规则。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>我们的站点上有一个导航区域允许用户浏览。</p>
+
+<p>在标签语言中，导航区域父元素的id是 <code>nav-area.</code>(在 {{HTMLVersionInline(5)}}中, 可以使用 {{HTMLElement("nav")}} 元素代替带有id属性的 {{HTMLElement("div")}}。)</p>
+
+<p>为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:</p>
+
+<pre class="brush:css">@media print {
+  #nav-area {display: none;}
+  }
+</pre>
+</div>
+
+<p><span style="line-height: 1.5;">一些常见的媒介类型</span><span style="line-height: 1.5;">:</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>screen</code></td>
+   <td>彩色计算机显示</td>
+  </tr>
+  <tr>
+   <td><code>print</code></td>
+   <td>打印（分页式媒体）</td>
+  </tr>
+  <tr>
+   <td style="padding-right: 1em;"><code>projection</code></td>
+   <td>投影</td>
+  </tr>
+  <tr>
+   <td><code>all</code></td>
+   <td>所有媒体 (默认)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details">
+<div class="tuto_type">更多</div>
+
+<p>一些其他指定媒介类型的规则。</p>
+
+<p><span style="line-height: 1.5;">类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在HTML中，你可以通过在</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">LINK</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">标签上添加media属性来指定媒介类型。</span></p>
+
+<p>在CSS中，你可以在样式表开头使用 {{CSSXref("@import")}} 一个url来引入另外的样式表，同时指定其媒介类型。</p>
+
+<p><span style="line-height: 1.5;">根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。</span></p>
+
+<p><span style="line-height: 1.5;">想获取媒介类型更多细节，请参考CSS规范中的</span> <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> <span style="line-height: 1.5;">部分。</span></p>
+
+<p>接下来将介绍更多 {{cssxref("display")}} <span style="line-height: 1.5;">属性的例子</span><span style="line-height: 1.5;">: </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a><span style="line-height: 1.5;">.</span></p>
+</div>
+
+<h3 id="打印">打印</h3>
+
+<p>CSS有一些特性能够支持打印和分页媒体。</p>
+
+<p> {{cssxref("@page")}} 规则能够设置页间距，对于双面打印，还可以分开设置 <code>@page:left</code> 和 <code>@page:right。</code></p>
+
+<p>对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。</p>
+
+<p>可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>这个规则把四个方向的页边距都设置为1 inch:</p>
+
+<pre class="brush:css">@page {margin: 1in;} </pre>
+
+<p><span style="line-height: 1.5;">这个规则确保每个H1元素都从新的一页开始</span>:</p>
+
+<pre class="brush:css">h1 {page-break-before: always;}
+</pre>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>想获取更多细节，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> 部分。</p>
+
+<p><span style="line-height: 1.5;">像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。</span></p>
+</div>
+
+<h3 id="用户界面">用户界面</h3>
+
+<p><span style="line-height: 1.5;">CSS有一些特殊的属性能够支持设备的用户界面，像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。</span></p>
+
+<p>并没有针对用户界面设备的特殊媒介类型。</p>
+
+<p>下面有五种特殊的选择器:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Selector</strong></td>
+   <td><strong>Selects</strong></td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":hover")}}</code></td>
+   <td>当鼠标悬浮任何E元素上</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":focus")}}</code></td>
+   <td>当元素获得键盘焦点</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":active")}}</code></td>
+   <td>当元素是当前的活动元素</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":link")}}</code></td>
+   <td>当元素超链接到一个url但是用户还没有访问过</td>
+  </tr>
+  <tr>
+   <td><code>E{{cssxref(":visited")}}</code></td>
+   <td>当元素超链接到一个url但是用户已经访问过</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注意: </strong>在 {{gecko("2.0")}} <em>中可获得的 :visited 选择器信息是有限的。更过细节请参照</em><span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" style="line-height: 1.5;" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a><span style="line-height: 1.5;"> 。</span></p>
+</div>
+
+<p> {{cssxref("cursor")}} 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Selector</strong></td>
+   <td><strong>Selects</strong></td>
+  </tr>
+  <tr style="cursor: pointer;">
+   <td><code>pointer</code></td>
+   <td>指示超链接</td>
+  </tr>
+  <tr style="cursor: wait;">
+   <td><code>wait</code></td>
+   <td>表明程序无法接受输入</td>
+  </tr>
+  <tr style="cursor: progress;">
+   <td><code>progress</code></td>
+   <td>表明程序正在运行，但是仍可以接受输入</td>
+  </tr>
+  <tr style="cursor: default;">
+   <td><code>default</code></td>
+   <td>默认（通常是箭头）</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> {{cssxref("outline")}} 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。<br>
+ 它的作用相当于 {{cssxref("border")}} 属性，但与其不同的是它不能指明个别方向。</p>
+
+<p>一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 <strong>disabled</strong> 属性和 <strong>readonly</strong> 属性。选择器可以通过方括: <code>{{mediawiki.external('disabled')}}</code> 或者 <code>{{mediawiki.external('readonly')}}来指定这些属性。</code></p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p><span style="line-height: 1.5;">这些规则规定了按钮在用户使用时动态变化的样式</span>:</p>
+
+<pre class="brush:css">.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  } </pre>
+
+<p><span style="line-height: 1.5;">这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明</span>:</p>
+
+<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+       <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+       <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
+      </tr>
+      <tr style="line-height: 25%;">
+       <td> </td>
+      </tr>
+      <tr style="font-style: italic;">
+       <td>disabled</td>
+       <td>normal</td>
+       <td>active</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多</div>
+
+<p>获取更多关于CSS用户界面的信息，请参考CSS规范中的 <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> 部分。</p>
+
+<p><span style="line-height: 1.5;">本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。</span></p>
+</div>
+
+<h2 id="实践_打印文档">实践: 打印文档</h2>
+
+<ol>
+ <li>创建一个新的HTML文档, <code>doc4.html</code>. 把下面的HTML代码粘贴过去:
+
+  <pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Print sample&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style4.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Section A&lt;/h1&gt;
+    &lt;p&gt;This is the first section...&lt;/p&gt;
+    &lt;h1&gt;Section B&lt;/h1&gt;
+    &lt;p&gt;This is the second section...&lt;/p&gt;
+    &lt;div id="print-head"&gt;
+      Heading for paged media
+    &lt;/div&gt;
+    &lt;div id="print-foot"&gt;
+      Page:
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>创建一个新的样式表, <code>style4.css</code>. 把下面的HTML代码粘贴过去:
+  <pre class="brush:css">/*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+</pre>
+ </li>
+ <li>在浏览器中查看文档，你会看到它使用的是默认样式。</li>
+ <li>打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。
+  <table>
+   <tbody>
+    <tr>
+     <td>
+      <table style="border: 2px outset #36b; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section A</div>
+
+              <div style="font-size: 75%;">This is the first section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+     <td>
+      <table style="border: 2px outset #36b; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section B</div>
+
+              <div style="font-size: 75%;">This is the second section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;">
+ <caption>挑战</caption>
+ <tbody>
+  <tr>
+   <td><span style="line-height: 1.5;">把指定打印样式的规则转移到单独的CSS文件。</span>
+    <p>学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 <code style="font-style: normal;">style4.css</code> 样式表里去。</p>
+
+    <p>当鼠标放在标题时，改变颜色为蓝色。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">查看这些挑战的解决方案。</a></p>
+
+<h2 id="接下来">接下来?</h2>
+
+<p>如果你还是很难理解这个章节，或者你对它有一些意见或者建议，请在 <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">讨论区</a> 中不吝赐教。</p>
+
+<p>目前，本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 <strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a> 来动态地改变规则。</strong></p>
diff --git a/files/zh-cn/web/guide/css/getting_started/readable_css/index.html b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html
new file mode 100644
index 0000000000..a3ef5d29ec
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html
@@ -0,0 +1,166 @@
+---
+title: 创建可读性良好的CSS
+slug: Web/Guide/CSS/Getting_started/Readable_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}}这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第6部分；<span class="seoSummary"> 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。</span></p>
+
+<h2 class="clearLeft" id="资料：创建可读性良好的_CSS">资料：创建可读性良好的 CSS</h2>
+
+<p>你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。</p>
+
+<h3 id="空白字符">空白字符</h3>
+
+<p>空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。</p>
+
+<p>对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。</p>
+
+<p>如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。</p>
+
+<p>样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>也有人喜欢下面这种每行只写一个属性-值的风格：</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>有些人混合使用空白字符来提高可读性：</p>
+
+<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+</pre>
+</div>
+
+<p>而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。</p>
+
+<h3 id="注释">注释</h3>
+
+<p>CSS注释以<code>/*</code> 开始，以 <code>*/</code>结束。</p>
+
+<p>你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。</p>
+
+<p>对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<pre class="brush: css">/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="选取器组">选取器组</h3>
+
+<p>当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。</p>
+
+<p>在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>这条规则将 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, 和 {{ HTMLElement("h3") }} 匹配到的元素设置为相同颜色。</p>
+
+<p>将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。</p>
+
+<pre class="brush: css">/* color for headings */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="实践：添加注释来提高展现力">实践：添加注释来提高展现力</h2>
+
+<ol>
+ <li>编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）：
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。</li>
+ <li>保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果：
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">挑战</div>
+
+<p>将你的样式表中的部分内容改为注释，以使文档的第一个字母颜色变为红色，但是注意不要改变其他任何内容：</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>（这个不止一种解决方案。）</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">一种解决方法：</div>
+其中一种解决办法就是给<code>.carrot</code>添加注释：
+
+<pre class="brush: css">.carrot {
+  color: orange;
+}
+</pre>
+A more specific selector, <code>p#second</code> also works. <a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决方案</a></div>
+
+<h2 id="接下来是什么">接下来是什么?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式") }} 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles">详细指定文本的外观</a> 。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/selectors/index.html b/files/zh-cn/web/guide/css/getting_started/selectors/index.html
new file mode 100644
index 0000000000..51f8693438
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/selectors/index.html
@@ -0,0 +1,413 @@
+---
+title: 选择器
+slug: Web/Guide/CSS/Getting_started/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 的第五节; 本节将讲述如何应用样式；不同的选择器有不同的优先级；你在样例文档中为标签增加一些属性，在样式中使用这些属性。</span></p>
+
+<h2 class="clearLeft" id="资料_选择器（Selectors）">资料: 选择器（Selectors）</h2>
+
+<p>CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：</p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p><span style="line-height: 1.5;">在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。</span></p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>花括号中的部分称为<strong>声明（declaration）</strong></p>
+
+<p><code>关键字color是一个属性</code>, <code>red</code> 是其对应的值.</p>
+
+<p>同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.</p>
+
+<p><code>这个教程中将类似strong的选择器称为标签选择器（tag selector）</code>.CSS规范中称之为类型选择器（<em>type</em> selector）.</p>
+</div>
+
+<p>本节将介绍更多的选择器。</p>
+
+<p>除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.</p>
+
+<p>其中 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 和 <code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> 两个属性具有比较重要的地位。</code></p>
+
+<h3 id="类选择器（Class_selectors）">类选择器（Class selectors）</h3>
+
+<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。</p>
+
+<p>在写样式表时，类选择器是以英文句号（.）开头的。</p>
+
+<h3 id="ID选择器（ID_selectors）">ID选择器（ID selectors）</h3>
+
+<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。</p>
+
+<p>在写样式表时，ID选择器是以#开头的。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例：</div>
+下面的p标签同时具有 <code>class</code> 属性和<code>id</code> 属性:
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p><strong>id</strong> 属性值 <code>principal</code>必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 <strong>class </strong>属性值 <code>key</code>.</p>
+
+<p>在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 {{ HTMLElement("p") }} 元素。）</p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p>下面的规则将使 <strong>id</strong> 等于 <code>principal 的那个元素的文字变为粗体</code>:</p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<p>如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>你也可以将多个选择器组合起来构成更确定的选择器。</p>
+
+<p>比如，选择器<code>.key</code> 选中所有class属性为 <code>key的元素</code>. 选择器 <code>p.key</code> 选中所有class属性为<span style="font-family: courier new,andale mono,monospace; line-height: normal;">key的</span>{{ HTMLElement("p") }} 元素。</p>
+
+<p>除了<code>class</code> 和 <code>id，你还可以用方括号的形式指定其他属性。比如</code>，选择器 <code>[type='button']</code> 选中所有 <code>type</code> 属性为 <code>button 的元素。</code></p>
+</div>
+
+<p>如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。</p>
+
+<p>如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。</p>
+
+<h3 id="伪类选择器（Pseudo-classes_selectors）">伪类选择器（Pseudo-classes selectors）</h3>
+
+<p>CSS伪类（<a href="/en-US/docs/Web/Guide/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a>）是加在选择器后面的用来指定元素状态的关键字。比如，{{ Cssxref(":hover") }} 会在鼠标悬停在选中元素上时应用相应的样式。</p>
+
+<p>伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 ({{ cssxref(":visited") }})， 内容状态(如 {{ cssxref(":checked") }} ), 鼠标位置 (如{{ cssxref(":hover") }}). 完整列表参见 <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">语法</div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="伪类列表">伪类列表</h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="资料_基于关系的选择器">资料: 基于关系的选择器</h2>
+
+<p>CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。</p>
+
+<table id="relselectors">
+ <caption>常见的基于关系的选择器</caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>选择器</strong></td>
+   <td><strong>选择的元素</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>元素A的任一子元素E(也就是直系后代)</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>任一是其父母结点的第一个子节点的元素E</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>元素B的任一下一个兄弟元素E</td>
+  </tr>
+  <tr>
+   <td><code>B ~ E</code></td>
+   <td>B元素后面的拥有共同父元素的兄弟元素E</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>你可以任意组合以表达更复杂的关系。</p>
+
+<p>你还可以使用星号（*）来表示”任意元素“。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>一个HTML表格有<code style="font-size: 14px;">id</code> 属性，但是它的行和单元格没有单独的id:</p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p>下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:</p>
+
+<pre class="brush:css">    #data-table-1 td:first-child {font-weight: bolder;}
+    #data-table-1 td:first-child + td {font-family: monospace;}
+</pre>
+
+<p>最终效果:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="margin-right: 2em; width: 18em;">
+     <tbody>
+      <tr>
+       <td><strong>Prefix</strong></td>
+       <td><code>0001</code></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>一般情况下，如果你提高了某个选择器的的确定度，你便<span style="line-height: 1.5;">提高它的优先级。</span></p>
+
+<p>使用这个技巧，可以避免为大量标签指定 <code>class</code> 或 <code>id</code> 属性。CSS（引擎）会帮你做的。</p>
+
+<p>在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。</p>
+
+<p>更多关于表格的例子，见 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a>。</p>
+</div>
+
+<h2 id="实例_使用类选择器和ID选择器">实例: 使用类选择器和ID选择器</h2>
+
+<ol>
+ <li>创建一个HTML文件</li>
+ <li>将下面内容拷贝到HTML文件中
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>创建style1.css:
+  <pre class="brush:css">strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+</pre>
+ </li>
+ <li>保存文件，在浏览器中查看效果:
+  <table style="border: 2px outset #3366bb; height: 53px; padding: 1em; width: 494px;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><em><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets //此处应为斜体</em></td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>重新组织样式中规则的顺序，你会发现改变这几条规则的顺序不会影响最终效果。</p>
+
+  <p>类选择器 <code>.carrot</code> 和<code>.spinach</code> 比标签选择器 <code>strong 拥有更高优先级。</code></p>
+
+  <p>ID 选择器 <code>#first</code> 比类选择器和标签选择器更优先。</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<ol>
+ <li>不改变HTML内容, 增加一条规则，不改变首字母颜色，将第二个p标签中的其他文字变成蓝色:
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>现在改变上面增加的那条规则（不改变其他任何内容）让第一个p标签中的其他文字也变成蓝色:
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<ol>
+ <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
+
+  <pre class="brush: css">#second { color: blue; }
+</pre>
+  A more specific selector, <code>p#second</code> also works.</li>
+ <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
+  <pre class="brush: css">p { color: blue; }
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="实例_使用伪类选择器">实例: 使用伪类选择器</h2>
+
+<ol>
+ <li>创建如下 HTML:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>编辑CSS:
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li>保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果):
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="实例_使用基于关系的选择器和伪类选择器">实例: 使用基于关系的选择器和伪类选择器</h2>
+
+<p>通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（<strong style="font-size: 14px; line-height: 1.5;">pure-CSS dropdown menus</strong><span style="font-size: 14px; line-height: 1.5;">）。关键点就是创建下面这类规则：</span></p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p>然后将这些规则应用到下面的HTML结构中：</p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>学习实例 <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a>.</p>
+
+<h2 id="接下来是什么">接下来是什么?</h2>
+
+<p>你的样式表变得多而复杂。下面章节将讲述如何让样式表更 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS" title="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS">易读</a>.{{nextPage("/zh-CN/docs/CSS/开始/Readable_CSS", "易读的 CSS")}}</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html b/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html
new file mode 100644
index 0000000000..f2e753baca
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html
@@ -0,0 +1,191 @@
+---
+title: SVG and CSS
+slug: Web/Guide/CSS/Getting_started/SVG_and_CSS
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+---
+<div>
+ {{CSSTutorialTOC}}</div>
+<p>本节将演示如何将CSS应用到 <a href="/en-US/docs/SVG">SVG</a> 中。</p>
+<p>你将创建一个简单的演示代码并在支持SVG的浏览器中运行。</p>
+<p>这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started">CSS 教程</a> 第二部分的第二节<br>
+ 前一节: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
+ 下一节: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p>
+<h3 id="Information:_SVG" name="Information:_SVG">信息: SVG</h3>
+<p><em>SVG</em> (Scalable Vector Graphics)是一个基于XML的图形描述语言。</p>
+<p>它可以用于描述静态图、动画，以及用户界面。</p>
+<p>和其他基于XML的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。</p>
+<p>在样式表中你可以在任何可以可以指定图片的地方指定一个SVG的URL。比如，在HTML的样式表中，你可以为 <code>background</code> 属性指定一个SVG的URL。</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>
+  更多细节</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>在这个教程编写的时间点(2011中旬)，绝大多数现代浏览器都对SVG有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些SVG特性只被某些浏览器支持。参见 <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a> 了解支持情况。 参见 <a href="/en-US/docs/SVG/Element">SVG element reference</a> 了解兼容情况。</p>
+    <p>通过安装 <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a> 提供的插件，你可以让某些浏览器支持SVG。</p>
+    <p>欲在Mozilla了解更多关于SVG的信息，参考 <a href="/en-US/docs/SVG">这里SVG</a>。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Action:_An_SVG_demonstration" name="Action:_An_SVG_demonstration">实例: 一个SVG演示</h3>
+<p>建立一个SVG文件<code>doc8.svg。</code>复制下面所有内容：</p>
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+  &lt;g id="segment" class="segment"&gt;
+    &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+    &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+    &lt;/g&gt;
+  &lt;g id="quadrant"&gt;
+    &lt;use xlink:href="#segment"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+    &lt;/g&gt;
+  &lt;g id="petals"&gt;
+    &lt;use xlink:href="#quadrant"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+    &lt;/g&gt;
+  &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse"&gt;
+    &lt;stop id="fade-stop-1" offset="33%"/&gt;
+    &lt;stop id="fade-stop-2" offset="95%"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+  SVG demonstration&lt;/text&gt;
+&lt;text  id="caption" x="-280" y="-250"&gt;
+  Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+  &lt;circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/&gt;
+  &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+  &lt;use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/&gt;
+  &lt;/g&gt;
+
+&lt;/svg&gt;
+</pre>
+<p>创建一个CSS文件, <code>style8.css。</code> 复制下面所有内容：</p>
+<pre class="brush: css">/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover &gt; .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover &gt; .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover &gt; .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover &gt; .segment-edge {
+  stroke: green;
+  }
+</pre>
+<p>在支持SVG的浏览器中打开上面的文档。将鼠标移到图上。</p>
+<p>由于这个wiki不支持嵌入SVG，所以下面是一个截图供参考:</p>
+<table style="border: 2px outset #36b;">
+ <tbody>
+  <tr>
+   <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
+  </tr>
+ </tbody>
+</table>
+<p>解释:</p>
+<ul>
+ <li>这个SVG文档使用常见连接方法引入样式表。</li>
+ <li>SVG有自己一套CSS属性和对应的值。其中一些和HTML使用的CSS属性相似。</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>
+  挑战</caption>
+ <tbody>
+  <tr>
+   <td>修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="What_next.3F" name="What_next.3F">接下来?</h4>
+<p>如果你有任何疑问或评论请移步到<a href="/en-US/docs/Talk:CSS/Getting_Started/SVG_and_CSS">讨论区</a>。</p>
+<p>在这个演示中，支持SVG的浏览器知道如何显示SVG元素。样式表只是修改其呈现的方式。同样，这对HTML和XUL文档也是适用的。你也可以将CSS用于XML文档。（与HTML相比，）XML没有预先为元素定义样式。下一个节将对此进行演示: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p>
diff --git a/files/zh-cn/web/guide/css/getting_started/tables/index.html b/files/zh-cn/web/guide/css/getting_started/tables/index.html
new file mode 100644
index 0000000000..7a7e442207
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/tables/index.html
@@ -0,0 +1,508 @@
+---
+title: 表格
+slug: Web/Guide/CSS/Getting_started/Tables
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<p>{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}</p>
+
+<p>这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>的第13部分，将介绍更多高级的选择器，以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档，然后对它进行样式排版。</p>
+
+<h2 class="clearLeft" id="信息_表格">信息: 表格</h2>
+
+<p>表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。</p>
+
+<p>当你设计你的文档时，使用一个表格来表示一系列信息的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">关系</a>。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。</p>
+
+<p>创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a>）使用的技术可以更好的达成目的。</p>
+
+<h3 id="表格结构">表格结构</h3>
+
+<p>在表格中，信息显示在一个个的<em>单元格</em>（<em>cell</em>）中.</p>
+
+<p>在页面横向上一条直线的单元格构成了<em>行</em>（<em>row</em>）。</p>
+
+<p>在一些表格中，行可能被分组。表格开始的特定的行组是<em>表头</em> （<em>header</em>）。表格最后的特定行组是<em>表尾</em>（<em>footer</em>）。表格中主要的行就是<em>表体</em>（<em>body</em>），这些表体也可能被分组。</p>
+
+<p>在页面纵向上一条直线的单元格构成了<em>列</em>（<em>column</em>），但是在CSS表格中，列的使用是受限的。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>在<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">选择器</a>那章的<a href="/zh-CN/Web/Guide/CSS/Getting_Started/Selectors#relselectors">基于关系的选择器</a>就是一个五行十个单元格的表格。</p>
+
+<p>第一行是表头，其余四行是表体，没有表尾。</p>
+
+<p>表中有两列。</p>
+</div>
+
+<p>本教程仅仅涵盖简单表格，其呈现结果完全可以预测。在一个简单表格里，每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格，但是这样的表格已超出了这个基本教程所讲述的范围。</p>
+
+<h3 id="边框">边框</h3>
+
+<p>单元格没有外边距。</p>
+
+<p>但是单元格有边框和内边距。默认情况下，边框被表格的{{cssxref("border-spacing")}}属性值间隔。你也可以通过设置表格的{{cssxref("border-collapse")}}属性值为collapse来完全移除间隔。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>这有三个表格。</p>
+
+<p>左边的表格有0.5 em的边框间隔，中间的表格是0边框间隔，右边的表格是拥有collapse的边框。</p>
+
+<div style="background-color: white; border: 2px outset #36b; padding: 1em; display: inline-block;">
+<table style="background-color: lime; border-collapse: separate; display: inline-block;">
+ <tbody>
+  <tr>
+   <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+   <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+  </tr>
+  <tr>
+   <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+   <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="background-color: lime; border-collapse: separate; display: inline-block; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+   <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+  </tr>
+  <tr>
+   <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+   <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="background-color: lime; border-collapse: collapse; display: inline-block; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+   <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+  </tr>
+  <tr>
+   <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+   <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="标题">标题</h3>
+
+<p>{{HTMLElement("caption")}}元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。</p>
+
+<p>可以设置{{HTMLElement("caption")}}的{{cssxref("caption-side")}}属性值为bottom来将标签移到表格的底部。</p>
+
+<p>想要样式化caption的文本，可以使用任何常规的文本属性。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>这个表格有一个在底部的标题。</p>
+
+<pre class="brush: css">#demo-table &gt; caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+</pre>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table>
+     <caption>Suits</caption>
+     <tbody>
+      <tr>
+       <td>
+        <table style="border-collapse: collapse;">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Clubs</td>
+           <td style="border: 1px solid gray; text-align: center;">Hearts</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Diamonds</td>
+           <td style="border: 1px solid gray; text-align: center;">Spades</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="空单元格">空单元格</h3>
+
+<p>你可以通过为表格元素指定{{cssxref("empty-cells")}}属性值show来显示空单元格（就是其边框和背景）。</p>
+
+<p>你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">实例</div>
+
+<p>这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。</p>
+
+<p>左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="background-color: #ddffdd;">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee;"> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 6em;">
+    <table style="background-color: #ddffdd;">
+     <tbody>
+      <tr>
+       <td> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">细节</div>
+
+<p>请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/tables.html">表格</a>来获得更多关于表格的细节信息。</p>
+
+<p>规范中有比该教程更进一步的信息，但它不包括浏览器可能会影响复杂表格之间的差异。</p>
+</div>
+
+<h2 id="实例_设计表格样式">实例: 设计表格样式</h2>
+
+<ol>
+ <li>创建一个新的HTML文档, <code>doc3.html。</code> 复制粘贴以下内容，请确保通过滚动获取全部内容：
+
+  <div style="height: 36em; overflow: auto;">
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Sample document 3&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style3.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;table id="demo-table"&gt;
+      &lt;caption&gt;Oceans&lt;/caption&gt;
+      &lt;thead&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;Area&lt;/th&gt;
+          &lt;th&gt;Mean depth&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
+          &lt;th&gt;m&lt;/th&gt;
+        &lt;/tr&gt;
+      &lt;/thead&gt;
+      &lt;tbody&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Arctic&lt;/th&gt;
+          &lt;td&gt;13,000&lt;/td&gt;
+          &lt;td&gt;1,200&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Atlantic&lt;/th&gt;
+          &lt;td&gt;87,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Pacific&lt;/th&gt;
+          &lt;td&gt;180,000&lt;/td&gt;
+          &lt;td&gt;4,000&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Indian&lt;/th&gt;
+          &lt;td&gt;75,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Southern&lt;/th&gt;
+          &lt;td&gt;20,000&lt;/td&gt;
+          &lt;td&gt;4,500&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tbody&gt;
+      &lt;tfoot&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Total&lt;/th&gt;
+          &lt;td&gt;361,000&lt;/td&gt;
+          &lt;td&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Mean&lt;/th&gt;
+          &lt;td&gt;72,000&lt;/td&gt;
+          &lt;td&gt;3,800&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tfoot&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </div>
+ </li>
+ <li>创建一个新的样式表 <code>style3.css。复制粘贴一些内容，通过滚动获取全部内容：</code>
+  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table &gt; caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table &gt; thead &gt; tr + tr &gt; th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table &gt; tfoot td {
+  background-color: #cee;
+}
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+</pre>
+ </li>
+ <li>在浏览器打开文档，它将看起来像下面一样：
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
+   <tbody>
+    <tr>
+     <td>
+      <div>
+      <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>
+
+      <div style="border: 1px solid #7a7; background-color: #efe;">
+      <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+       <tbody>
+        <tr style="text-align: center; color: blue;">
+         <th> </th>
+         <th>Area</th>
+         <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+        </tr>
+        <tr style="font-style: italic; color: gray;">
+         <th> </th>
+         <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+         <th style="padding-left: .5em; padding-right: .5em;">m</th>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Arctic:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Atlantic:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Pacific:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Indian:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Total:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Mean:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+        </tr>
+       </tbody>
+      </table>
+      </div>
+      </div>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项：
+  <ul>
+   <li>标题是放在表格边框的外面的;</li>
+   <li>如果你在可选项中设置了最小点尺寸，它可能会影响km<sup>2</sup>这样的上标;</li>
+   <li>有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;</li>
+   <li>冒号是通过样式表来添加的。</li>
+  </ul>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>更改样式表来使表格像下面一样显示：</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div>
+    <div style="border: 1px solid #7a7; background-color: #efe;">
+    <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+     <tbody>
+      <tr style="text-align: center; color: blue;">
+       <th> </th>
+       <th>Area</th>
+       <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+      </tr>
+      <tr style="font-style: italic; color: gray;">
+       <th> </th>
+       <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+       <th style="padding-left: .5em; padding-right: .5em;">m</th>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Arctic:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Atlantic:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Pacific:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Indian:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+      </tr>
+      <tr>
+       <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em; color: blue;">Total:</th>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em; color: blue;">Mean:</th>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+      </tr>
+     </tbody>
+    </table>
+    </div>
+
+    <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">查看</a>挑战的答案。</p>
+
+<h2 id="接下来">接下来?</h2>
+
+<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media", "媒体")}}这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/propidx.html">完全属性表</a>来获得完整的属性和值的信息。</p>
+
+<p><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media">下一页</a>将再次着眼于CSS样式表的目的和结构。</p>
+</div>
diff --git a/files/zh-cn/web/guide/css/getting_started/text_styles/index.html b/files/zh-cn/web/guide/css/getting_started/text_styles/index.html
new file mode 100644
index 0000000000..2f8f9f7629
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/text_styles/index.html
@@ -0,0 +1,157 @@
+---
+title: 文本样式
+slug: Web/Guide/CSS/Getting_started/Text_styles
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。</p>
+
+<h2 class="clearLeft" id="资料：文本样式">资料：文本样式</h2>
+
+<p>CSS提供了几个属性用来操作字体。</p>
+
+<p>我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：</p>
+
+<ul>
+ <li>字体加粗，字体的风格：斜体和字体变形：小型大写字母</li>
+ <li>字体的大小</li>
+ <li>行高</li>
+ <li>字体</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;}
+</pre>
+
+<p>这条规则定义了字体的几个属性，使整个段落文本都变成斜体。</p>
+
+<p>字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。</p>
+
+<p>文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。</p>
+
+<p><span style="line-height: 1.5;">这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。</span></p>
+</div>
+
+<h3 id="sect1"> </h3>
+
+<h3 id="字体">字体</h3>
+
+<p>你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。</p>
+
+<p>在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。</p>
+
+<p>如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。</p>
+
+<p>使用 {{ cssxref("font-family") }} 属性指定文本的字体。</p>
+
+<p>简体中文的字体示例：</p>
+
+<p>Windows：font-family:微软雅黑;</p>
+
+<p>Mac OS：font-family:"Songti SC";</p>
+
+<h3 id="字号">字号</h3>
+
+<p>浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。</p>
+
+<p>你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。</p>
+
+<p>如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。</p>
+
+<p>使用{{ cssxref("font-size") }} 属性指定字体的大小。</p>
+
+<h3 id="行高">行高</h3>
+
+<p>行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。</p>
+
+<p>使用 {{ cssxref("line-height") }} 属性指定文本的行间距。</p>
+
+<h3 id="装饰">装饰</h3>
+
+<p>单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。</p>
+
+<h3 id="其他属性">其他属性</h3>
+
+<p>使用<span style="line-height: 1.5;">{{ cssxref("font-style") }}</span><code style="font-size: 14px;">: italic;指定文本为斜体</code><code style="font-size: 14px;">;</code></p>
+
+<p><code style="font-size: 14px;">使用</code><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-weight") }}: bold;指定文本加粗;</code></p>
+
+<p>使用<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;</code></p>
+
+<p>如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">详细资料</div>
+
+<p>我们也可以采用其他方式指定文本样式。</p>
+
+<p><span style="line-height: 1.5;">比如，这里提到的几个属性的其他值。</span></p>
+
+<p>在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。</p>
+
+<p>字体相关的全部细节，可以在CSS规范里查看<a class="external" href="http://www.w3.org/TR/CSS21/fonts.html" style="line-height: 1.5;">Fonts</a><span style="line-height: 1.5;"> 。文本修饰相关可以查看</span><span style="line-height: 1.5;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html" style="line-height: 1.5;">Text</a><span style="line-height: 1.5;"> 。</span></p>
+
+<p>如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。</p>
+</div>
+
+<h2 id="实践：指定字体">实践：指定字体</h2>
+
+<p>对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。</p>
+
+<ol>
+ <li>编辑我们的样式表。</li>
+ <li>添加以下规则到你的样式表中。推荐这个规则放在css文件的开头:
+  <pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
+</pre>
+ </li>
+ <li>添加一个该规则的注释，可以添加空格匹配你的整体样式布局。</li>
+ <li>保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>从浏览器的菜单栏中选择 视图 &gt; 字体大小 &gt; 放大（或视图 &gt; 缩放 &gt; 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add the following style declaration to the <code>strong</code> rule:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">查看答案.</a></div>
+
+<h2 id="下一节">下一节?</h2>
+
+<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html b/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html
new file mode 100644
index 0000000000..0f015ab172
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html
@@ -0,0 +1,114 @@
+---
+title: What is CSS
+slug: Web/Guide/CSS/Getting_started/What_is_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>{{previousPage("/zh-CN/docs/CSS/开始", "开始")}} 作为<span class="seoSummary"> <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 入门指南</a> 教程的第一部分，本文解释了什么是 CSS。你需要创建一个文档以便用于接下来的学习。</span></p>
+
+<h2 class="clearLeft" id="资料_什么是_CSS">资料: 什么是 CSS</h2>
+
+<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) 是一门指定文档该如何呈现给用户的语言。</p>
+
+<p><em>文档</em><span style="line-height: inherit;"> 是信息的集合，它使用一门 </span><em>标记语言</em><span style="line-height: inherit;"> 作为结构。</span></p>
+
+<p>将一篇文档 <em>呈现 </em>给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<ul>
+ <li>你现在阅读的这个网页就是文档。<br>
+  网页中的信息通常使用标记语言 HTML (HyperText Markup Language) 来组织它的结构。</li>
+ <li>一个应用中的对话框，也称为模态窗口，也是文档。<br>
+  这样的对话框可能也会使用类似于 XUL 这样的标记语言。Mozilla 的有些应用使用了该语言。</li>
+</ul>
+</div>
+
+<p>在该教程中，如果使用像下方这样标题为 <strong>更多细节</strong> 的框，里面会包含额外信息。如果你迫切的想完成整个教程，那么可以跳过这些方框，等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容，或者更进一步的，按照里面提供的链接去了解更多细节。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。</p>
+
+<p>举例来说，你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时，服务器会查询数据库生成文档，将散落在众多文件中的文档的碎片搜集起来。然而在本教程中，你使用的都是保存在文件中的文档。</p>
+
+<p>关于文档与标记语言的更多信息，可以查看本网站的其他部分—例如：</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/en/HTML" title="en/HTML">HTML</a></td>
+   <td>用于 web 页面</td>
+  </tr>
+  <tr>
+   <td><a href="/en/XML" title="en/XML">XML</a></td>
+   <td>用于结构化文档</td>
+  </tr>
+  <tr>
+   <td><a href="/en/SVG" title="en/SVG">SVG</a></td>
+   <td>用于图形</td>
+  </tr>
+  <tr>
+   <td><a href="/en/XUL" title="en/XUL">XUL</a></td>
+   <td>用于 Mozilla 中的用户界面</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>在教程的第二部分，你会看到使用这些标记语言的例子。</p>
+</div>
+
+<p><em> </em>为用户<em>展现 </em><span style="line-height: inherit;">文档意味着将其转换成一个可读性良好的格式。像 Firefox， Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如，在计算机屏幕，投影仪或是打印机上。</span></p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>CSS 并非仅仅用于浏览器，也不仅限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为<em>用户代理</em>(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中，你将只在浏览器中使用 CSS。</p>
+
+<p>要了解更多 CSS 术语定义的相关内容，请查看 CSS 规范的 <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">定义</a>。</p>
+</div>
+
+<h2 id="动手：创建一个文档">动手：创建一个文档</h2>
+
+<ol>
+ <li>在你的电脑中创建一个新的文件夹，用于保存和管理本指南中的练习。</li>
+ <li>打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。</li>
+ <li>将下面的内容复制粘贴进文本文件中。保存文件，将其命名为 <code>doc1.html</code>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>在你的浏览器中开启一个新的标签页或窗口，打开文件。
+  <p>你会看到一串开头字母大写的文本，像这样：</p>
+
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>由于你的浏览器与该 wiki 的设置可能不同，所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别，请不要担心，因为这些内容暂时无关紧要。</p>
+ </li>
+</ol>
+
+<h2 id="接下来是什么？">接下来是什么？</h2>
+
+<p>{{nextPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为什么使用 CSS?")}}现在你的文档中还没有使用 CSS。在<a href="/zh-CN/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">下一节</a>中，你将会使用 CSS 来指定样式。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html b/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html
new file mode 100644
index 0000000000..f312b080a3
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html
@@ -0,0 +1,104 @@
+---
+title: 为何使用CSS？
+slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+tags:
+  - CSS
+  - 'CSS:入门'
+  - NeedsLiveSample
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/What_is_CSS", "什么是CSS?") }}<span class="seoSummary">这是<a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS入门教程</a> 的第二章节，解释了CSS与文档的关系。在下面的练习中，你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。</span></p>
+
+<h2 class="clearLeft" id="信息_为何使用CSS？">信息: 为何使用CSS？</h2>
+
+<p>CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为<em>样式</em>(<em>style</em>)。您可以将样式从它的内容分离出来，以便您能够：</p>
+
+<ul>
+ <li>避免重复</li>
+ <li>更容易维护</li>
+ <li>为不同的目的，使用不同的样式而内容相同</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">例如</div>
+
+<p>您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。</p>
+
+<p>当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。</p>
+
+<p>当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。</p>
+</div>
+
+<p>总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中，您会看到此种的例外情况。)</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多的细节</div>
+
+<p>像HTML之类的标记语言也会提供指定样式的方法。</p>
+
+<p>例如，在HTML中，您可以使用<code>&lt;b&gt;</code>标签来加粗文字，同时，您也可以在页面的<code>&lt;body&gt;标记中指定背景颜色。</code></p>
+
+<p>当您使用CSS时，您通常要避免使用标记语言的这些特性，以便您所有的文档样式信息保存在同一地方。</p>
+</div>
+
+<h2 id="行动：创建样式表">行动：创建样式表</h2>
+
+<ol>
+ <li>在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：<code>style1.css</code></li>
+ <li>在您的CSS文件中，复制、粘贴下面的行，并保存该文件:
+  <pre class="brush: css">strong {color: red;}
+</pre>
+ </li>
+</ol>
+
+<h3 id="连接您的文档和样式表">连接您的文档和样式表</h3>
+
+<ol>
+ <li>为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行：
+  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示：
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_example" id="challenge">
+<div class="tuto_type">挑战</div>
+
+<p>除了红色外，CSS允许使用其它的颜色名称。</p>
+
+<p>不查询参考手册，请在您使用的样式表找出五个以上的颜色名称。</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">请参考解答。</a></div>
+
+<h2 id="下一节？">下一节？</h2>
+
+<p>{{nextPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作。")}}现在您将示例文档与独立的样式表连在了一起，您已准备好学习<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">更多的</a>关于您的浏览器在显示文档时如何将它们组合在一起。</p>
diff --git a/files/zh-cn/web/guide/css/getting_started/xml_data/index.html b/files/zh-cn/web/guide/css/getting_started/xml_data/index.html
new file mode 100644
index 0000000000..bbdbd784f5
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/xml_data/index.html
@@ -0,0 +1,241 @@
+---
+title: XML 数据
+slug: Web/Guide/CSS/Getting_started/XML_data
+tags:
+  - CSS
+  - Web
+  - 中级
+  - 实例
+  - 开始学CSS
+  - 指南
+  - 需要更新
+translation_of: Archive/Beginner_tutorials/XML_data
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>此页面包含一个如何使用CSS和XML数据的示例。</p>
+
+<p>你将创建一个XML文档范例，和使之在浏览器中展现的样式表。</p>
+
+<p>这是 <a href="../../../../en/CSS/Getting_Started" rel="internal">CSS tutorial</a> 第二部分的第三节。<br>
+ 前一章节: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS">SVG</a><br>
+ 后一章节:  <a href="/en/CSS/Getting_Started/XBL_bindings" title="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">XBL binding</a></p>
+
+<h3 id="Information:_XML_data" name="Information:_XML_data">信息: XML 数据</h3>
+
+<p><em><a href="/en/XML" title="en/XML">XML</a></em> (eXtensible Markup Language 可扩展标记语言) 是一种可用于任何类型的结构化数据的通用型语言。</p>
+
+<p>默认情况下，Mozilla 浏览器会将 XML 按照非常类似XML文件的原始数据的方式展现。你可以看到定义数据结构的具体的标签。</p>
+
+<p>通过将你的XML文档与CSS样式表链接，你可以定义展现XML的其他方式。为了实现这一点，样式表建立了映射规则，将XML文档中的标签映射为HTML中使用的展现类型。</p>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>示例</caption>
+ <tbody>
+  <tr>
+   <td>XML文档中的数据采用&lt;<code>INFO&gt;</code> 标签。你希望文档中的 <small>INFO</small> 元素像 HTML 的段落一样展现。.
+    <p>在该文档的样式表中，你指定了 <small>INFO</small> 元素的展现方式：</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+INFO {
+  display: block;
+  margin: 1em 0;
+  }
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>在display属性中最常用的值是：</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;"><code>block</code></td>
+   <td>Displayed like HTML's <small>DIV</small> (for headings, paragraphs)</td>
+  </tr>
+  <tr>
+   <td><code>inline</code></td>
+   <td>Displayed like HTML's <small>SPAN</small> (for emphasis within text)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>如同对待HTML一样，通过设置字体、间距和其他细节来添加你自己的样式规则。</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>更多细节</caption>
+ <tbody>
+  <tr>
+   <td>其他display的值可以展现类似于列表项目的元素，或者类似表格组件的元素。
+    <p>请查看CSS规范中的<a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> ，来获取全部display类型。</p>
+
+    <p>单独使用CSS，display的结构必须与文档结构一致。其它方式是修改display的结构—例如：使用XBL添加内容，使用JavaScript修改DOM。</p>
+
+    <p>请查看 <a href="/en/XML" title="en/XML">XML</a> 页面，来获取更多关于XML in Mozilla的信息。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action:_An_XML_demonstration" name="Action:_An_XML_demonstration">实例: XML 演示</h3>
+
+<p>新建一个 XML 文件： <code>doc9.xml </code>。复制粘帖以下内容，注意滚动以获得全部：</p>
+
+<div style="width: 48em; height: 12em; overflow: auto;">
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;!-- XML demonstration --&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style9.css"?&gt;
+
+&lt;!DOCTYPE planet&gt;
+&lt;planet&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Arctic&lt;/name&gt;
+&lt;area&gt;13,000&lt;/area&gt;
+&lt;depth&gt;1,200&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Atlantic&lt;/name&gt;
+&lt;area&gt;87,000&lt;/area&gt;
+&lt;depth&gt;3,900&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Pacific&lt;/name&gt;
+&lt;area&gt;180,000&lt;/area&gt;
+&lt;depth&gt;4,000&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Indian&lt;/name&gt;
+&lt;area&gt;75,000&lt;/area&gt;
+&lt;depth&gt;3,900&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Southern&lt;/name&gt;
+&lt;area&gt;20,000&lt;/area&gt;
+&lt;depth&gt;4,500&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;/planet&gt;
+</pre>
+</div>
+
+<p>新建一个 CSS 文件： <code>style9.css 。</code>复制粘帖以下内容，注意滚动以获得全部：</p>
+
+<div style="width: 48em; height: 12em; overflow: auto;">
+<pre>/*** XML demonstration ***/
+
+planet:before {
+  display: block;
+  width: 8em;
+  font-weight: bold;
+  font-size: 200%;
+  content: "Oceans";
+  margin: -.75em 0px .25em -.25em;
+  padding: .1em .25em;
+  background-color: #cdf;
+  }
+
+planet {
+  display: block;
+  margin: 2em 1em;
+  border: 4px solid #cdf;
+  padding: 0px 1em;
+  background-color: white;
+  }
+
+ocean {
+  display: block;
+  margin-bottom: 1em;
+  }
+
+name {
+  display: block;
+  font-weight: bold;
+  font-size: 150%;
+  }
+
+area {
+  display: block;
+  }
+
+area:before {
+  content: "Area: ";
+  }
+
+area:after {
+  content: " million km\B2";
+  }
+
+depth {
+  display: block;
+  }
+
+depth:before {
+  content: "Mean depth: ";
+  }
+
+depth:after {
+  content: " m";
+  }
+</pre>
+</div>
+
+<p>在你的浏览器中打开该文档：</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;">
+    <p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p>
+
+    <p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><strong>Arctic</strong><br>
+     Area: 13,000 million km²<br>
+     Mean depth: 1,200 m</p>
+
+    <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>Atlantic</strong><br>
+     Area: 87,000 million km²<br>
+     Mean depth: 3,900 m</p>
+
+    <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>. . .</strong></p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ 此演示的注解：</p>
+
+<ul>
+ <li>Unicode 字符 上标 2（在 "million km²" 中），在CSS文件中被编码为 <code>\B2</code> 。</li>
+ <li>标题 "Oceans" 有一个负的上边距，所以它可以上移至边框顶部显示。</li>
+</ul>
+
+<p> </p>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>挑战</caption>
+ <tbody>
+  <tr>
+   <td>修改样式表使文档可以作为表格展现。
+    <p>（请参见 CSS 规范的 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> 章节作为参考。）</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="What_next.3F" name="What_next.3F">接下来？</h4>
+
+<p>如果你难以理解此页面，或者你有其他意见，请提交到讨论页： <a href="/Talk:en/CSS/Getting_Started/XML_data" title="Talk:en/CSS/Getting_Started/XML_data">Discussion</a> 。</p>
+
+<p>这是本教程的最后一页。请查看此 wiki 的 <a href="/en/CSS" title="en/CSS">CSS</a> 主页，获取更多Mozilla CSS 信息。</p>
diff --git a/files/zh-cn/web/guide/css/media_queries/index.html b/files/zh-cn/web/guide/css/media_queries/index.html
new file mode 100644
index 0000000000..bfb15efa67
--- /dev/null
+++ b/files/zh-cn/web/guide/css/media_queries/index.html
@@ -0,0 +1,412 @@
+---
+title: 使用媒体查询
+slug: Web/Guide/CSS/Media_queries
+tags:
+  - CSS
+  - CSS媒体查询
+  - Media
+  - Web
+  - 媒体
+  - 媒体查询
+  - 指南
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p><strong>媒体查询</strong>（<strong>Media queries</strong>）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器{{glossary("viewport", "视窗")}}宽度）来修改网站或应用程序时。</p>
+
+<p>媒体查询常被用于以下目的：</p>
+
+<ul>
+ <li>有条件的通过 {{cssxref("@media")}} 和 {{cssxref("@import")}} <a href="/zh-CN/docs/Web/CSS/At-rule">at-rules</a> 用<a href="/en-US/docs/Web/CSS">CSS</a> 装饰样式。</li>
+ <li>用<code>media=</code> 属性为{{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}和其他<a href="/zh-CN/docs/Web/HTML">HTML</a>元素指定特定的媒体类型。如:</li>
+</ul>
+
+<pre><code>&lt;link rel="stylesheet" src="styles.css" media="screen" /&gt;
+&lt;link rel="stylesheet" src="styles.css" media="print" /&gt;</code>
+</pre>
+
+<ul>
+ <li>使用{{domxref("Window.matchMedia()")}} 和{{domxref("MediaQueryList.addListener()")}} 方法来<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">测试和监控媒体状态</a>。</li>
+</ul>
+
+<div class="note">
+<p><strong>注意：</strong>本页的例子使用CSS <code>@media</code> 的方式来说明目的，但是对于所有类型的媒体查询，基本语法均相同。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<p>每条媒体查询语句都由一个可选的<em>媒体类型</em>和任意数量的<em>媒体特性</em>表达式构成。可以使用多种<em>逻辑操作符</em>合并多条媒体查询语句。媒体查询语句不区分大小写。</p>
+
+<p>当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为true时，媒体查询将计算为true。 涉及未知媒体类型的查询始终为false。</p>
+
+<div class="note">
+<p><strong>注意：</strong> 即使媒体查询返回false，带有媒体查询附加到其{{HTMLElement("link")}}标记的样式表<a href="http://scottjehl.github.com/CSS-Download-Tests/">仍将下载</a>。 但是，除非查询结果变为true，否则其内容将不适用。</p>
+</div>
+
+<h3 id="媒体类型">媒体类型</h3>
+
+<p><em>媒体类型</em>（<em>Media types</em>）描述设备的一般类别。除非使用 <code>not</code> 或 <code>only</code> 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 <code>all</code> 类型。</p>
+
+<dl>
+ <dt><code id="all">all</code></dt>
+ <dd>适用于所有设备。</dd>
+ <dt><code id="print">print</code></dt>
+ <dd>适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅<a href="/zh-CN/docs/Web/CSS/Paged_Media">分页媒体</a>。）</dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>主要用于屏幕。</dd>
+ <dt><code id="speech">speech</code></dt>
+ <dd>主要用于语音合成器。</dd>
+</dl>
+
+<div class="note"><strong>被废弃的媒体类型：</strong> CSS2.1 和  <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 定义了一些额外的媒体类型(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, 以及 <code>aural</code>)，但是他们在<a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> 中已经被废弃，并且不应该被使用。<code>aural</code>类型被替换为具有相似效果的<code>speech</code>。</div>
+
+<h3 id="媒体特性">媒体特性</h3>
+
+<p><em>媒体特性</em>（<em>Media features</em>）描述了 {{glossary("user agent")}}、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>名称</th>
+   <th>简介</th>
+   <th>备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("@media/any-hover", "any-hover")}}</td>
+   <td>是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？</td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td>
+   <td>可用的输入机制中是否有任何指针设备，如果有，它的精度如何？</td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td>
+   <td>视窗（viewport）的宽高比</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color", "color")}}</td>
+   <td>输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td>
+   <td>用户代理和输出设备大致程度上支持的色域</td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-index", "color-index")}}</td>
+   <td>输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td>
+   <td>输出设备的宽高比</td>
+   <td>已在 Media Queries Level 4 中被弃用。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td>
+   <td>输出设备渲染表面（如屏幕）的高度</td>
+   <td>已在 Media Queries Level 4 中被弃用。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td>
+   <td>输出设备渲染表面（如屏幕）的宽度</td>
+   <td>已在 Media Queries Level 4 中被弃用。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/display-mode", "display-mode")}}</td>
+   <td>
+    <p>应用程序的显示模式，如web app的manifest中的<a href="/zh-CN/docs/Web/Manifest#display"><code>display</code></a> 成员所指定</p>
+   </td>
+   <td>在 <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>被定义.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
+   <td>检测是user agent否限制调色板</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/grid", "grid")}}</td>
+   <td>输出设备使用网格屏幕还是点阵屏幕？</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/height", "height")}}</td>
+   <td>视窗（viewport）的高度</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/hover", "hover")}}</td>
+   <td>
+    <p>主要输入模式是否允许用户在元素上悬停</p>
+   </td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td>
+   <td>user agent或者底层操作系统是否反转了颜色</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/light-level", "light-level")}}</td>
+   <td>环境光亮度</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/monochrome", "monochrome")}}</td>
+   <td>
+    <p>输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0</p>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/orientation", "orientation")}}</td>
+   <td>视窗（viewport）的旋转方向</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td>
+   <td>
+    <p>输出设备如何处理沿块轴溢出视窗(viewport)的内容</p>
+   </td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td>
+   <td>
+    <p>沿内联轴溢出视窗(viewport)的内容是否可以滚动？</p>
+   </td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/pointer", "pointer")}}</td>
+   <td>
+    <p>主要输入机制是一个指针设备吗？如果是，它的精度如何？</p>
+   </td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
+   <td>探测用户倾向于选择亮色还是暗色的配色方案</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
+   <td>探测用户是否有向系统要求提高或降低相近颜色之间的对比度</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
+   <td>用户是否希望页面上出现更少的动态效果</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
+   <td>用户是否倾向于选择更低的透明度</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/resolution", "resolution")}}</td>
+   <td>输出设备的像素密度（分辨率）</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scan", "scan")}}</td>
+   <td>输出设备的扫描过程（适用于电视等）</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scripting", "scripting")}}</td>
+   <td>探测脚本（例如 JavaScript）是否可用</td>
+   <td>在 Media Queries Level 5 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/update-frequency", "update")}}</td>
+   <td>输出设备更新内容的渲染结果的频率</td>
+   <td>在 Media Queries Level 4 中被添加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/width", "width")}}</td>
+   <td>视窗（viewport）的宽度，包括纵向滚动条的宽度</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="逻辑操作符">逻辑操作符</h3>
+
+<p><em>逻辑操作符</em>（<em>logical operators</em>） <code>not</code>, <code>and</code>, 和 <code>only</code> 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。</p>
+
+<h4 id="and"><code>and</code></h4>
+
+<p> <code>and</code> 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。</p>
+
+<h4 id="not"><code>not</code></h4>
+
+<p><code>not</code>运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用not运算符，则还必须指定媒体类型。</p>
+
+<div class="note">
+<p><strong>注意：</strong>在Level 3中，<code>not</code>关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。</p>
+</div>
+
+<h4 id="only"><code>only</code></h4>
+
+<p><code>only</code>运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用<code>only</code>时，旧版本的浏览器会将<code>screen and (max-width: 500px)</code>简单地解释为<code>screen</code>，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用<code>only</code>运算符，则<em>还必须指定</em>媒体类型。</p>
+
+<h4 id="逗号"><code>,</code> (逗号)</h4>
+
+<p>逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为true，则整个media语句均返回true。 换句话说，列表的行为类似于逻辑或<code>or</code>运算符。</p>
+
+<h2 id="定位媒体类型">定位媒体类型</h2>
+
+<p>媒体类型描述了给定设备的一般类别。 尽管通常在设计网站时会考虑屏幕，但您可能希望创建针对特殊设备（例如打印机或基于音频的屏幕阅读器）的样式。 例如，此CSS针对打印机：</p>
+
+<pre class="brush: css">@media print { ... }
+</pre>
+
+<p>您还可以定位多个设备。 例如，此<code>@media</code>规则使用两个媒体查询来同时定位屏幕和打印设备</p>
+
+<pre class="brush: css">@media screen, print { ... }
+</pre>
+
+<p>有关所有媒体类型的列表，请参见<a class="internal" href="#Media_types">Media types</a>。 由于它们仅以非常广泛的术语描述设备，因此只有少数几种可用。 要定位更具体的属性，请改用<em>媒体功能</em>。</p>
+
+<h2 id="定位媒体特性">定位媒体特性</h2>
+
+<p>媒体功能描述了给定的{{glossary("user agent")}}的输出设备或环境的特定特征。 例如，您可以将特定样式应用于宽屏显示器，使用鼠标的计算机，或应用于在弱光条件下使用的设备。 当用户的主要输入机制（例如鼠标）可以悬停在元素上时，如下为一个示例：</p>
+
+<pre class="brush: css">@media (hover: hover) { ... }
+</pre>
+
+<p>许多媒体功能都是<em>范围功能</em>，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。 例如，仅当您的浏览器的{{glossary("viewport")}}宽度等于或小于12450px时，此CSS才会应用样式：</p>
+
+<pre class="brush: css">@media (max-width: 12450px) { ... }
+</pre>
+
+<p>如果您在未指定值的情况下创建媒体功能查询，则该样式将全部被应用，只要该查询的值不为零（或在Level 4中为<code>none</code>）即可。 例如，此CSS将适用于任何带有彩色屏幕的设备：</p>
+
+<pre class="brush: css">@media (color) { ... }
+</pre>
+
+<p>如果某个功能不适用于运行浏览器的设备，则涉及该媒体功能的表达式始终为false。 例如，将不会使用嵌套在以下查询中的样式，因为没有语音专用设备具有屏幕长宽比：</p>
+
+<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }
+</pre>
+
+<p>有关更多媒体功能<a href="#Media_features">media feature</a>示例，请参阅每个特定功能的参考页。</p>
+
+<h2 id="创建复杂查询">创建复杂查询</h2>
+
+<p>有时您可能想创建一个取决于多个条件的媒体查询。 这就是<em>逻辑运算符</em>使用的场景：<code>not</code>，<code>and</code>，和 <code>only</code>。 此外，您可以将多个媒体查询合并到一个<em>逗号分隔的列表</em>中。 这使您可以在不同情况下应用相同的样式。</p>
+
+<p>在前面的示例中，我们已经看到<code>and</code>运算符用于将媒体类型与媒体功能分组。 and运算符还可以将多个媒体功能组合到单个媒体查询中。 同时，<code>not</code>运算符会否定媒体查询，从而基本上颠倒了它的正常含义。 唯一的运算符可防止较早的浏览器应用样式。</p>
+
+<div class="note">
+<p><strong>注意：</strong> 在大多数情况下，默认情况下，如果未指定其他类型，则使用<code>all</code>媒体类型。 但是，如果使用<code>not</code>或<code>only</code>运算符，则必须显式指定媒体类型。</p>
+</div>
+
+<h3 id="结合多种类型和特性">结合多种类型和特性</h3>
+
+<p><code>and</code>关键字将媒体功能与媒体类型或其他媒体功能组合在一起。 此示例结合了两种媒体功能，以将样式限制为宽度至少为30 em的横向的设备：</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }
+</pre>
+
+<p>要将样式限制为带有屏幕的设备，可以将媒体功能链接到<code>screen</code>媒体类型：</p>
+
+<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<h3 id="测试多重查询">测试多重查询</h3>
+
+<p>当用户的设备与各种媒体类型，功能或状态中的任何一种匹配时，可以使用逗号分隔的列表来应用样式。 例如，如果用户设备的最小高度为680px或为纵向模式的屏幕设备，则以下规则将应用其样式：</p>
+
+<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }
+</pre>
+
+<p>以上面的示例为例，如果用户使用的打印机的页面高度为800像素，则media语句将返回true，因为将应用第一个查询。 同样，如果用户使用的是纵向模式的智能手机，并且视口高度为480px，则将应用第二个查询，并且media语句仍将返回true。</p>
+
+<h3 id="反转查询的含义">反转查询的含义</h3>
+
+<p><code>not</code>关键字会反转整个媒体查询的含义。 它只会否定要应用的特定媒体查询。 （因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询。）<code>not</code>关键字不能用于否定单个功能查询，只能用于否定整个媒体查询。 看看以下<code>not</code>关键字的例子：</p>
+
+<pre class="brush: css">@media not all and (monochrome) { ... }
+</pre>
+
+<p>所以上述查询等价于：</p>
+
+<pre class="brush: css">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>而不是：</p>
+
+<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre>
+
+<p>再看另一个例子，如下媒体查询：</p>
+
+<pre class="brush: css">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>等价于：</p>
+
+<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="提升老版本浏览器兼容性">提升老版本浏览器兼容性</h3>
+
+<p><code>only</code>关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。 <em>它对现代浏览器没有影响。</em></p>
+
+<pre class="brush: css">@media only screen and (color) { ... }
+</pre>
+
+<h2 id="版本_4_中的语法改进">版本 4 中的语法改进</h2>
+
+<p>媒体查询4级规范对语法进行了一些改进，以使用具有“范围”类型（例如宽度或高度，减少冗余）的功能进行媒体查询。 级别4添加了用于编写此类的查询范围上下文。 例如，使用最大宽度<code>max-</code> 功能，我们可以编写以下代码：</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 媒体查询4级规范在现代浏览器中具有合理的支持，但某些媒体功能并未得到很好的支持。 有关更多详细信息，请参见 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a>。</p>
+</div>
+
+<pre class="brush: css">@media (max-width: 30em) { ... }</pre>
+
+<p>在媒体查询4级规范可以这样写：</p>
+
+<pre class="brush: css">@media (width &lt;= 30em) { ... }
+</pre>
+
+<p>使用<code>min-</code>和<code>max-</code>可以测试一个在两个值之间的宽度</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+
+<p>用4级语法书写如下</p>
+
+<pre class="brush: css">@media (30em &lt;= width &lt;= 50em ) { ... }
+
+</pre>
+
+<p>媒体查询4级规范还添加了用<strong>and</strong>, <strong>not</strong>, 和 <strong>or</strong>实现的完整的布尔运算来合并媒体查询的方法。</p>
+
+<h3 id="使用_not否定一个特性">使用 <code>not</code>否定一个特性</h3>
+
+<p>在媒体功能周围使用<code>not()</code>会否定查询中的该特性。 例如，如果设备没有悬停功能，则<code>not(hover)</code>将被匹配：</p>
+
+<pre class="brush: css">@media (not(hover)) { ... }</pre>
+
+<h3 id="用_or测试多个特性">用 <code>or</code>测试多个特性</h3>
+
+<p>您可以使用<code>or</code>测试多个功能之间的匹配，如果任何功能为true，则解析为true。 例如，以下查询测试具有单色显示或悬停功能的设备：</p>
+
+<pre class="brush: css">@media (not (color)) or (hover) { ... }</pre>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries">使用编程方法测试媒体查询</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li>
+ <li><a href="/zh-CN/docs/Web/CSS/Mozilla_Extensions#Media_features">Extended Mozilla media features</a></li>
+ <li><a href="/zh-CN/docs/Web/CSS/Webkit_Extensions#Media_features">Extended WebKit media features</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/css/scaling_background_images/index.html b/files/zh-cn/web/guide/css/scaling_background_images/index.html
new file mode 100644
index 0000000000..8fa031d0b8
--- /dev/null
+++ b/files/zh-cn/web/guide/css/scaling_background_images/index.html
@@ -0,0 +1,113 @@
+---
+title: 缩放背景图像
+slug: Web/Guide/CSS/Scaling_background_images
+tags:
+  - Advanced
+  - CSS
+  - CSS Background
+  - Graphics
+  - Guide
+  - Web
+  - 背景图片
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<div>{{cssref}}</div>
+
+<p><span style="line-height: 1.5;">CSS 的 </span> {{ cssxref("background-size") }}<span style="line-height: 1.5;"> 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。</span></p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">拼一张大图</h2>
+
+<p><span style="line-height: 1.5;">来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里</span>（出于某种原因，很可能是某个非常糟糕的网站设计）<span style="line-height: 1.5;">，最终的效果如下：</span></p>
+
+<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p>
+
+<p>用下面的 CSS 可以实现这种效果：</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(fxlogo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+} </pre>
+
+<div>没必要再用带前缀的 background-size 了，<span style="line-height: 1.5;">尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。</span></div>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">拉伸图片</h2>
+
+<p>你可以同时指定图片纵向和横向的大小，如下：</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>结果会是这样的：<br>
+ <img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">放大图片</h2>
+
+<p>另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：</p>
+
+<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>正如你所看到的，CSS 的写法实际上是基本相同的。</p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特殊值:  "contain" 和 "cover"</h2>
+
+<p>除了{{cssxref("&lt;length&gt;")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。</p>
+
+<h3 id="contain" name="contain"><code>contain</code></h3>
+
+<p><span style="line-height: 1.5;">contain 值指定可以不用考虑容器的大小，</span><span style="line-height: 1.5;">把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域</span><span style="line-height: 1.5;">。</span><span style="line-height: 1.5;">在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，</span><span style="line-height: 1.5;">来看看下方这个例子。</span></p>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Try resizing this window.<code>Right-click-&gt;This Frame-&gt;Open Frame in New Tab</code>&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>
+
+<h3 id="cover" name="cover"><code>cover</code></h3>
+
+<p><span style="line-height: 1.5;">cover 属性指定背景图可以被调整到任意大小，</span><span style="line-height: 1.5;">以使背景图完全覆盖背景区域</span><span style="line-height: 1.5;">。</span></p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Try resizing this window.Right-click-&gt;This Frame-&gt;Open Frame in New Tab&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url('/files/2917/fxlogo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000;
+  text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<p>{{ EmbedLiveSample("cover", "100%", "220") }}</p>
+
+<h2 id="See_also" name="See_also">另请参阅</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+</ul>
diff --git a/files/zh-cn/web/guide/css/testing_media_queries/index.html b/files/zh-cn/web/guide/css/testing_media_queries/index.html
new file mode 100644
index 0000000000..0d33436410
--- /dev/null
+++ b/files/zh-cn/web/guide/css/testing_media_queries/index.html
@@ -0,0 +1,90 @@
+---
+title: 使用编程方法测试媒体查询
+slug: Web/Guide/CSS/Testing_media_queries
+tags:
+  - CSS
+  - DOM
+  - Event
+  - Media Queries
+  - Web
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{cssref}}</div>
+
+<p>{{Glossary("DOM")}} 提供了通过编程方法来获得<a href="/zh-CN/docs/Web/CSS/Media_Queries">媒体查询</a>结果的特性。这是通过 {{domxref("MediaQueryList")}} 接口和它的方法来实现的。创建了 <code>MediaQueryList</code> 对象之后，就可以通过它来检查查询结果，或者设置事件监听器，在查询结果发生变化时自动接收到通知。</p>
+
+<h2 id="创建媒体查询列表">创建媒体查询列表</h2>
+
+<p>在获取查询结果前，首先要创建查询列表，也就是 <code>MediaQueryList</code> 对象来存放媒体查询。为了实现这个目的，可以使用 {{domxref("window.matchMedia")}} 方法。</p>
+
+<p>举个例子，设置一个用来判断设备的旋转方向（横屏还是竖屏）的查询列表：</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="检查查询结果">检查查询结果</h2>
+
+<p>一旦创建了媒体查询列表，你就可以通过检查它的 <code>matches</code> 属性来获取相应的查询结果，上述属性会直接返回查询结果：</p>
+
+<pre class="brush: js">if (mediaQueryList.matches) {
+  /* 设备的旋转方向为纵向 portrait */
+} else {
+  /* 设备的旋转方向不是纵向，也就是横向 landscape */
+}
+</pre>
+
+<h2 id="接收查询提醒">接收查询提醒</h2>
+
+<p>如果你需要持续观察查询结果值的变化情况，那么，注册一个<a href="/zh-CN/docs/Web/API/EventTarget/addEventListener">监听器</a>比手动检查查询结果要高效很多。要注册监听器，只要在 {{domxref("MediaQueryList")}} 对象上使用 <code>addListener()</code> 方法，并使用一个回调函数作为其参数。这样，就通过实现 {{domxref("MediaQueryListListener")}} 接口指定了一个监听器。每当查询结果发生变化，比如从 <code>true</code> 变为 <code>false</code> 时，就会调用一遍传入的回调函数。</p>
+
+<pre class="brush: js">// 创建查询列表
+const mediaQueryList = window.matchMedia("(orientation: portrait)");
+
+// 定义回调函数
+function handleOrientationChange(mql) {
+  // ...
+}
+
+// 先运行一次回调函数
+handleOrientationChange(mediaQueryList);
+
+// 为查询列表注册监听器，同时将回调函数传给监听器
+mediaQueryList.addListener(handleOrientationChange);
+</pre>
+
+<p>上述代码创建了一个屏幕方向的测试查询列表 <code>mediaQueryList</code>，并且添加了事件监听器。需要注意的是，当我们添加监听后，我们其实直接调用了一次监听。这会让我们的监听器以目前设备的屏幕方向来初始化判定代码。换句话说，如果我们代码中设定设备处于竖屏模式，而实际上它在启动时处于横屏模式，那么我们在后面的判定就会出现矛盾。</p>
+
+<p>然后，我们就能在 <code>handleOrientationChange()</code> 方法中检查查询结果，比如，可以设置屏幕方向变化后的逻辑处理代码：</p>
+
+<pre class="brush: js">function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* The viewport is currently in portrait orientation */
+  } else {
+    /* The viewport is currently in landscape orientation */
+  }
+}
+</pre>
+
+<h2 id="终止查询通知">终止查询通知</h2>
+
+<p>如果不再需要再接收媒体查询值变化的相关通知，那么，只要调用 <code>MediaQueryList</code> 的 <code>removeListener()</code> 方法，就可以方便地移除监听：</p>
+
+<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<h3 id="MediaQueryList_接口"><code>MediaQueryList</code> 接口</h3>
+
+
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/CSS/Media_queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListListener") }}</li>
+</ul>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html b/files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..acd3b034ce
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,158 @@
+---
+title: Adding z-index
+slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" style="font-size: 14px; line-height: 1.5;" title="Understanding CSS z-index"><span class="title" style="display: inline !important;">理解z-index</span></a></p>
+<h3 id="使用_cssxref(z-index)">使用 {{ cssxref("z-index") }}</h3>
+<p>在第一个例子 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a>中， 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时， 只要给元素指定一个z-index的数值就可以了。 </p>
+<p> </p>
+<p><span style="font-size: 14px; line-height: 1.5;">该属性必须是整数(正负均可)， 它体现了元素在z轴的位置。 如果你对z轴体系不了解， 你也可以把它理解成“层叠”， 每个层都有一个顺序数， 顺序数大的层在上面， 小的在下面。 </span></p>
+<p><strong>注意！z-index只对指定了</strong> <a href="/en/CSS/position" title="position">positioned</a><strong>属性的元素有效。</strong></p>
+<ul>
+ <li><em>底层: 距离观察者最远</em></li>
+ <li>...</li>
+ <li> -3 层</li>
+ <li> -2 层</li>
+ <li> -1 层</li>
+ <li> 0 层 <em>默认层</em></li>
+ <li> 1 层</li>
+ <li> 2 层</li>
+ <li> 3 层</li>
+ <li>...</li>
+ <li><em>顶部: 最接近观察者</em></li>
+</ul>
+<div class="note">
+ <p><strong>注释:</strong></p>
+ <ul>
+  <li>当没有指定z-index的时候， 所有元素都在会被渲染在默认层(0层)</li>
+  <li>当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> 中描述的规则进行布局。 </li>
+ </ul>
+</div>
+<p>在下一个例子中， 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效， 因为他没有被指定position属性。 </p>
+<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p>
+<h3 id="Example_source_code"><strong>Example source code</strong></h3>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div {
+   opacity: 0.7;
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#normdiv {
+   z-index: 8;
+   height: 70px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv1 {
+   z-index: 3;
+   height: 100px;
+   position: relative;
+   top: 30px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv2 {
+   z-index: 2;
+   height: 100px;
+   position: relative;
+   top: 15px;
+   left: 20px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#absdiv1 {
+   z-index: 5;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   left: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#absdiv2 {
+   z-index: 1;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   right: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;&lt;br /&gt;
+
+&lt;div id="absdiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="reldiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+   &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="reldiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+   &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="absdiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="normdiv"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+   &lt;br /&gt;no positioning
+   &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+<h3 id="See_also">See also</h3>
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Author(s): Paolo Lombardi</li>
+  <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+  <li>Last Updated Date: July 9th, 2005</li>
+ </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/index.html b/files/zh-cn/web/guide/css/understanding_z_index/index.html
new file mode 100644
index 0000000000..19f49650d1
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/index.html
@@ -0,0 +1,47 @@
+---
+title: 理解CSS的 z-index属性
+slug: Web/Guide/CSS/Understanding_z_index
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>{{cssref}}</p>
+
+<p><span style="line-height: inherit;">通常情况下，<a href="/zh-CN/docs/Glossary/HTML">HTML</a>页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 </span>{{cssxref("z-index")}}<span style="line-height: inherit;">属性可让你在渲染内容时调整对象分层的顺序。</span></p>
+
+<blockquote>
+<p><em>在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z 轴”层叠摆放， 当他们相互覆盖时， z 轴顺序就变得十分重要。</em></p>
+</blockquote>
+
+<p>(参见 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>这意味着其实 CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。 数字越大， 元素越接近观察者。Z 轴顺序用 CSS 的 <span style="line-height: inherit;">{{ cssxref("z-index") }} 属性来指定。</span></p>
+
+<p>使用 <code>z-index</code> 很简单： 给它指定一个整数值即可。 然而，在层叠比较复杂的 HTML 元素上使用 <code>z-index</code> 时，结果可能让人觉得困惑，甚至不可思议。 这是由复杂的元素排布规则导致的。  更多细节请参见 <span style="line-height: inherit;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/zindex.html" style="line-height: inherit;">CSS-2.1 Appendix E</a> 。</p>
+
+<p>本文将通过一些简单的例子来解释这些规则。</p>
+
+<ol>
+ <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : 默认的摆放规则，即不含有 z-index 属性时</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="zh-CN/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : 浮动元素的处理方式</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : 使用 z-index 来改变堆放顺序</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : 内容堆放注意事项</li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 在两层元素的第二层上使用 z-index</li>
+ <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 在两层元素的所有层上使用 z-index</li>
+ <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 在三层元素的第二层上使用 z-index</li>
+</ol>
+
+<div class="originaldocinfo">
+<p> </p>
+
+<h2 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h2>
+
+<p> </p>
+
+<ul>
+ <li>作者: Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>上次更新时间: 2005年7月9日</li>
+</ul>
+</div>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html
new file mode 100644
index 0000000000..9312c1759d
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_and_float/index.html
@@ -0,0 +1,158 @@
+---
+title: 层叠与浮动
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_and_float
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+---
+<p>« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS 中的 z-index</span></a></p>
+
+<h3 id="层叠与浮动">层叠与浮动</h3>
+
+<p>对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：</p>
+
+<ol>
+ <li>根元素的背景与边框</li>
+ <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li>
+ <li>浮动块元素</li>
+ <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li>
+</ol>
+
+<p>实际上，在接下来的例子中你会看到，非定位块元素(DIV #4)的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。</p>
+
+<p>这种行为可以通过前一章列表的改进版本来解释：</p>
+
+<ol>
+ <li>根元素的背景与边框</li>
+ <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li>
+ <li>浮动块元素</li>
+ <li>常规流中的后代行内元素</li>
+ <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li>
+</ol>
+
+<div class="note"><strong>注意：</strong> 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素(DIV #4)的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)</div>
+
+<p>{{ EmbedLiveSample('该示例的源码', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}</p>
+
+<h3 id="该示例的源码"><strong>该示例的源码</strong></h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Stacking and float&lt;/title&gt;
+    &lt;style type="text/css"&gt;
+
+    div {
+        font: 12px Arial;
+    }
+
+    span.bold { font-weight: bold; }
+
+    #absdiv1 {
+        position: absolute;
+        width: 150px;
+        height: 200px;
+        top: 10px;
+        right: 140px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    #normdiv {
+        /* opacity: 0.7; */
+        height: 100px;
+        border: 1px dashed #999966;
+        background-color: #ffffcc;
+        margin: 0px 10px 0px 10px;
+        text-align: left;
+    }
+
+    #flodiv1 {
+        margin: 0px 10px 0px 20px;
+        float: left;
+        width: 150px;
+        height: 200px;
+        border: 1px dashed #009900;
+        background-color: #ccffcc;
+        text-align: center;
+    }
+
+    #flodiv2 {
+        margin: 0px 20px 0px 10px;
+        float: right;
+        width: 150px;
+        height: 200px;
+        border: 1px dashed #009900;
+        background-color: #ccffcc;
+        text-align: center;
+    }
+
+    #absdiv2 {
+        position: absolute;
+        width: 150px;
+        height: 100px;
+        top: 130px;
+        left: 100px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;br /&gt;&lt;br /&gt;
+
+    &lt;div id="absdiv1"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+        &lt;br /&gt;position: absolute;
+    &lt;/div&gt;
+
+    &lt;div id="flodiv1"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+        &lt;br /&gt;float: left;
+    &lt;/div&gt;
+
+    &lt;div id="flodiv2"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+        &lt;br /&gt;float: right;
+    &lt;/div&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="normdiv"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+        &lt;br /&gt;no positioning
+    &lt;/div&gt;
+
+    &lt;div id="absdiv2"&gt;
+        &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+        &lt;br /&gt;position: absolute;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="相关链接">相关链接</h3>
+
+<ul>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">未使用 z-index 的层叠</a>：默认层叠规则</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">使用 z-index 的层叠</a>： 使用 z-index 来改变默认层叠顺序</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">层叠上下文</a>：关于层叠上下文的注意事项</li>
+ <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">层叠上下文示例 1</a>：两层嵌套标签的 HTML 中，z-index 作用在内层标签上</li>
+ <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">层叠上下文示例 2</a>：两层嵌套标签的 HTML 中，z-index 作用在内外层标签上</li>
+ <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">层叠上下文示例 3</a>：三层嵌套标签的 HTML 中，z-index 作用在中间层标签上</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h3>
+
+<ul>
+ <li>作者: Paolo Lombardi</li>
+ <li>该文档的英文原始版本是从我为 <a class="external" href="http://www.yappy.it">YappY</a> 写的意大利文章翻译而来的，该文章版权为 <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>上次更新于：2014 年 11 月 3 日</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html
new file mode 100644
index 0000000000..59f298d269
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_1/index.html
@@ -0,0 +1,133 @@
+---
+title: Stacking context example 1
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1
+tags:
+  - 理解_CSS_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h3 id="Stacking_context_层叠上下文_例子_1">Stacking context 层叠上下文 例子 1</h3>
+
+<p>先看一个基础的例子。在根元素的层叠上下文中，有两个都是相对定位且没有设置 <code>z-index</code> 属性的 DIV（DIV #1 和 DIV #3）。在 DIV #1 中有一个绝对定位的 DIV #2，而在 DIV #3 中有一个绝对定位的 DIV #4，DIV #2 和 DIV #4 也都没有设置 <code>z-index</code> 属性。</p>
+
+<p>现在唯一的层叠上下文就是根元素的上下文。因为没有 <code>z-index</code> 值，所有的元素按照出现（在 HTML 中）的顺序层叠。</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+
+<p>如果给 DIV #2 设置一个正的 <code>z-index</code>  值 (不能是 <code>0</code> 或 <code>auto</code>) ，那么 DIV #2 会渲染在其他所有 DIV 之上。</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+
+<p>然后如果给 DIV #4 也设置一个正的 <code>z-index</code>  值，且这个值比给的 DIV #2 设置的值要大，则 DIV #4  会渲染在其他所有 DIV（包括 DIV #2）之上。</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+
+<p>在这个列子中，DIV #2 和 DIV #4 不是兄弟关系（因为它们的父元素不同）。即便如此，我们也可以通过 <code>z-index</code> 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为，DIV #1 和 DIV #3 没有设置 <code>z-index</code> 的值，所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容（包括 DIV #2 和 DIV #4）都属于同一个层叠上下文（即根元素的层叠上下文）。</p>
+
+<p>就层叠上下文而言，DIV #1 和 DIV #3 隶属于根元素，因此层次结构如下所示：</p>
+
+<ul>
+ <li>根层叠上下文（root stacking context）
+  <ul>
+   <li>DIV #2 (z-index 1)</li>
+   <li>DIV #4 (z-index 2)</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>注意：</strong> DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。</div>
+
+<h2 id="Example"><strong>Example</strong></h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="div1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 1;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div3"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div4"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 2;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html
new file mode 100644
index 0000000000..3c21bef062
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_2/index.html
@@ -0,0 +1,142 @@
+---
+title: Stacking context example 2
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2
+tags:
+  - CSS
+  - 理解css的index属性
+  - 高级
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"> 理解CSS z-index</a></p>
+
+<h3 id="层叠上下文示例_2">层叠上下文示例 2</h3>
+
+<p>这是一个非常简单的例子, 但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个DIV，不过现在z-index属性被分配在两个水平的层次结构中。</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p>
+
+<p>可以看到现在DIV #2 (z-index: 2)在DIV #3 (z-index: 1)的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以z-index的值决定了元素如何叠放。</p>
+
+<p>奇怪的是DIV #2 (z-index: 2)在DIV #4 (z-index: 10)的上面，尽管DIV #2的z-index值小于DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4处于DIV #3所创建的层叠上下文中，而整个DIV #3（包含其后代元素）是在DIV #2下面的。</p>
+
+<p>为了更好的理解这种情况, 这里列出了层叠上下文的层次结构:</p>
+
+<ul>
+ <li>根上下文（root stacking context）
+  <ul>
+   <li>DIV #2 (z-index 2)</li>
+   <li>DIV #3 (z-index 1)
+    <ul>
+     <li>DIV #4 (z-index 10)</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Note:</strong> 值得记住的是，通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。</div>
+
+<h3 id="示例源码"><strong>示例源码</strong></h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div1"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #1&lt;/span&gt;&lt;br /&gt;
+        position: relative;
+        &lt;div id="div2"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #2&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 2;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div3"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #3&lt;/span&gt;&lt;br /&gt;
+        position: relative;&lt;br /&gt;
+        z-index: 1;
+        &lt;div id="div4"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #4&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 10;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="相关文章">相关文章</h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html
new file mode 100644
index 0000000000..f7d2972c7c
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_context_example_3/index.html
@@ -0,0 +1,190 @@
+---
+title: Stacking context example 3
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3
+tags:
+  - CSS
+  - 层叠上下文
+  - 理解css的z-index属性
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h3 id="层叠上下文示例_3">层叠上下文示例 3</h3>
+
+<p>最后一个例子展示了，在多层级的HTML结构中混合了多个定位元素且使用类选择器设置z-index属性时出现的问题。</p>
+
+<p>我们来看一个用多个定位的div实现的三级菜单的例子，二级菜单和三级菜单在鼠标悬停或点击其父元素时才出现，通常这样的菜单在客户端和服务端都是由脚本生成的，所以样式规则不是通过ID选择器设置而是通过类选择器设置。</p>
+
+<p>如果这个三级菜单有部分区域重叠，管理层叠顺序就会成为一个问题。</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}</p>
+
+
+
+<p>一级菜单仅仅是相对定位，所以没有创建层叠上下文。</p>
+
+<p>二级菜单相对其父元素（一级菜单）绝对定位，要使二级菜单在所有一级菜单的上方，则需要使用z-index。此时每个二级菜单都创建了一个层叠上下文，而三级菜单也处于其父元素（二级菜单）创建的上下文中。</p>
+
+<p>这样一来，在HTML结构中处于三级菜单后面的二级菜单，则会显示在三级菜单的上方，因为所有的二级菜单都使用了同样的z-index值，所以处于同一个层叠上下文中。</p>
+
+<p>为了能更好地理解这种情况，这里列出了层叠上下文的层次结构:</p>
+
+<ul>
+ <li>root stacking context
+  <ul>
+   <li>LEVEL #1
+    <ul>
+     <li>LEVEL #2 (z-index: 1)
+      <ul>
+       <li>LEVEL #3</li>
+       <li>...</li>
+       <li>LEVEL #3</li>
+      </ul>
+     </li>
+     <li>LEVEL #2 (z-index: 1)</li>
+     <li>...</li>
+     <li>LEVEL #2 (z-index: 1)</li>
+    </ul>
+   </li>
+   <li>LEVEL #1</li>
+   <li>...</li>
+   <li>LEVEL #1</li>
+  </ul>
+ </li>
+</ul>
+
+<p>可以通过移除不同级别的菜单之间的重叠，或者使用ID选择器指定独立的（不同的）z-index值，或者减少HTML的层级来解决这个问题。</p>
+
+<div class="note"><strong>Note:</strong> 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多div来实现的，这种方式在需要同时定位一组元素时很有用。</div>
+
+<h3 id="示例源码"><strong>示例源码</strong></h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+
+   &lt;div id="container1"&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+
+         &lt;div id="container2"&gt;
+
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+
+         &lt;/div&gt;
+
+      &lt;/div&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+      &lt;/div&gt;
+
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h3 id="相关文章">相关文章</h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
+
+<p><strong>Note</strong>: the reason the sample image looks wrong - with the second level 2 overlapping the level 3 menus - is because level 2 has opacity, which creates a new stacking context. Basically, this whole sample page is incorrect and misleading.</p>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html b/files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..a5aaebdc95
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,161 @@
+---
+title: Stacking without z-index
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<p style="height: 15px;">« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS z-index</span></a></p>
+
+<h3 id="不含z-index的堆叠">不含z-index的堆叠</h3>
+
+<p>当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：</p>
+
+<ol>
+ <li>根元素的背景和边界</li>
+ <li>普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠</li>
+ <li>定位元素按HTML中的出现顺序堆叠</li>
+</ol>
+
+<p>在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。</p>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>在一组由不含有任何z-index属性的同类元素，如例子中的定位块元素（DIV #1 至 #4），这些元素按照它们在HTML结构中出现的顺序堆叠，而不管它们的定位属性如何。</li>
+ <li>
+  <p>普通流中不含有定位属性的标准块元素（DIV #5）始终先于定位元素渲染并出现在定位元素的下层，即便它们在HTML结构中出现的位置晚于定位元素也是如此。</p>
+ </li>
+</ul>
+</div>
+
+<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p>
+
+<p> </p>
+
+<h3 id="Example" name="Example">示例</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div {
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#normdiv {
+   height: 70px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv1 {
+   opacity: 0.7;
+   height: 100px;
+   position: relative;
+   top: 30px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv2 {
+   opacity: 0.7;
+   height: 100px;
+   position: relative;
+   top: 15px;
+   left: 20px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#absdiv1 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   left: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#absdiv2 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   right: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;&lt;br /&gt;
+
+&lt;div id="absdiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+&lt;/div&gt;
+
+&lt;div id="reldiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+&lt;/div&gt;
+
+&lt;div id="reldiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+&lt;/div&gt;
+
+&lt;div id="absdiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+&lt;/div&gt;
+
+&lt;div id="normdiv"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+   &lt;br /&gt;no positioning
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+
+</pre>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">堆叠与浮动</a> : 浮动元素的处理方式</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">增加 z-index</a> : 使用z-index来改变堆放顺序</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">堆叠上下文</a> : 堆叠上下文的注意事项</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">堆叠上下文示例 1</a> : 在两层元素的第二层上使用 z-index</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">堆叠上下文示例 2</a> : 在两层元素的所有层上使用 z-index</li>
+ <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">堆叠上下文示例 3</a> : 在三层元素的第二层上使用 z-index<span id="cke_bm_94E" style="display: none;"> </span></li>
+</ul>
+
+<p> </p>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
+
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p>
diff --git a/files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html b/files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..6d96e3e198
--- /dev/null
+++ b/files/zh-cn/web/guide/css/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,240 @@
+---
+title: 层叠上下文
+slug: Web/Guide/CSS/Understanding_z_index/The_stacking_context
+tags:
+  - Advanced
+  - CSS
+  - CSS层叠上下文
+  - z-index
+  - 教程
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<div>{{cssref}}</div>
+
+<p>我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，<strong>层叠上下文</strong>就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。</p>
+
+<h2 id="层叠上下文">层叠上下文</h2>
+
+<p>在本篇之前的部分——<a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" style="line-height: 1.5;" title="Adding z-index">运用 z-index</a><span style="line-height: 1.5;">，（我们认识到）某些元素</span><span style="line-height: 1.5;">的渲染顺序是由其 <code>z-index</code> 的值影响的。</span>这是因为这些元素具有能够使他们形成一个<em>层叠上下文</em>的特殊属性<em>。</em></p>
+
+<p>文档中的层叠上下文由满足以下任意一个条件的元素形成：</p>
+
+<ul>
+ <li>文档根元素（<code>&lt;html&gt;</code>）；</li>
+ <li>{{cssxref("position")}} 值为 <code>absolute</code>（绝对定位）或  <code>relative</code>（相对定位）且 {{cssxref("z-index")}} 值不为 <code>auto</code> 的元素；</li>
+ <li>{{cssxref("position")}} 值为 <code>fixed</code>（固定定位）或 <code>sticky</code>（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；</li>
+ <li>flex ({{cssxref("flexbox")}}) 容器的子元素，且 {{cssxref("z-index")}} 值不为 <code>auto</code>；</li>
+ <li>grid ({{cssxref("grid")}}) 容器的子元素，且 {{cssxref("z-index")}} 值不为 <code>auto</code>；</li>
+ <li>{{cssxref("opacity")}} 属性值小于 <code>1</code> 的元素（参见 <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">the specification for opacity</a>）；</li>
+ <li>{{cssxref("mix-blend-mode")}} 属性值不为 <code>normal</code> 的元素；</li>
+ <li>以下任意属性值不为 <code>none</code> 的元素：
+  <ul>
+   <li>{{cssxref("transform")}}</li>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("perspective")}}</li>
+   <li>{{cssxref("clip-path")}}</li>
+   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("isolation")}} 属性值为 <code>isolate</code> 的元素；</li>
+ <li>{{cssxref("-webkit-overflow-scrolling")}} 属性值为 <code>touch</code> 的元素；</li>
+ <li>{{cssxref("will-change")}} 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考<a href="http://dev.opera.com/articles/css-will-change-property/">这篇文章</a>）；</li>
+ <li>{{cssxref("contain")}} 属性值为 <code>layout</code>、<code>paint</code> 或包含它们其中之一的合成值（比如 <code>contain: strict</code>、<code>contain: content</code>）的元素。</li>
+</ul>
+
+<p>在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 <code>z-index</code> 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。</p>
+
+<p>总结:</p>
+
+<ul>
+ <li>层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。</li>
+ <li>每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。</li>
+ <li>每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文<em>同化</em>。</div>
+
+<h2 id="示例">示例</h2>
+
+<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
+
+<p>在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 <code>z-index</code> 值。我们把层叠上下文的层级列在下面：</p>
+
+<ul>
+ <li>Root
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。</p>
+
+<div class="note">
+<p><strong>注意：</strong></p>
+
+<ul>
+ <li>DIV #4 被渲染在 DIV #1 之下，因为 DIV #1 的 z-index (5) 在 root 元素的层叠上下文中生效，而 DIV #4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #1 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。</li>
+ <li>由此可得 DIV #2 (z-index 2) 被渲染在 DIV #5 (z-index 1) 之下，因为 DIV #5 归属于 z-index 较高的 DIV #3 元素。</li>
+ <li>DIV #3 的 z-index 值是 4，但是这个值独立于 DIV #4，DIV #5 和 DIV #6 的 z-index 值，因为他们从属于不同的层叠上下文。</li>
+ <li>分辨出层叠的元素在 Z 轴上的<em>渲染顺序</em>的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。通过这个方法我们可以轻松地看出为什么一个 z-index 为 1 的元素（DIV #5）层叠于一个 z-index 为 2 的元素（DIV #2）之上，而一个 z-index 为 6 的元素（DIV #4）层叠于 z-index 为 5 的元素（DIV #1）之下。在我们的例子中（依照最终渲染次序排列）：
+  <ul>
+   <li>Root
+    <ul>
+     <li>DIV #2 - z-index 为 2</li>
+     <li>DIV #3 - z-index 为 4
+      <ul>
+       <li>DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1</li>
+       <li>DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3</li>
+       <li>DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6</li>
+      </ul>
+     </li>
+     <li>DIV #1 - z-index 为 5</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="示例源码">示例源码</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;div id="div1"&gt;
+  &lt;h1&gt;Division Element #1&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 5;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div2"&gt;
+  &lt;h1&gt;Division Element #2&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 2;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div3"&gt;
+  &lt;div id="div4"&gt;
+    &lt;h1&gt;Division Element #4&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 6;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;h1&gt;Division Element #3&lt;/h1&gt;
+  &lt;code&gt;position: absolute;&lt;br/&gt;
+  z-index: 4;&lt;/code&gt;
+
+  &lt;div id="div5"&gt;
+    &lt;h1&gt;Division Element #5&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 1;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;div id="div6"&gt;
+    &lt;h1&gt;Division Element #6&lt;/h1&gt;
+    &lt;code&gt;position: absolute;&lt;br/&gt;
+    z-index: 3;&lt;/code&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+    margin: 0;
+}
+html {
+    padding: 20px;
+    font: 12px/20px Arial, sans-serif;
+}
+div {
+    opacity: 0.7;
+    position: relative;
+}
+h1 {
+    font: inherit;
+    font-weight: bold;
+}
+#div1,
+#div2 {
+    border: 1px dashed #696;
+    padding: 10px;
+    background-color: #cfc;
+}
+#div1 {
+    z-index: 5;
+    margin-bottom: 190px;
+}
+#div2 {
+    z-index: 2;
+}
+#div3 {
+    z-index: 4;
+    opacity: 1;
+    position: absolute;
+    top: 40px;
+    left: 180px;
+    width: 330px;
+    border: 1px dashed #900;
+    background-color: #fdd;
+    padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+    border: 1px dashed #996;
+    background-color: #ffc;
+}
+#div4 {
+    z-index: 6;
+    margin-bottom: 15px;
+    padding: 25px 10px 5px;
+}
+#div5 {
+    z-index: 1;
+    margin-top: 15px;
+    padding: 5px 10px;
+}
+#div6 {
+    z-index: 3;
+    position: absolute;
+    top: 20px;
+    left: 180px;
+    width: 150px;
+    height: 125px;
+    border: 1px dashed #009;
+    padding-top: 125px;
+    background-color: #ddf;
+    text-align: center;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('示例源码', '100%', '396') }}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1" title="CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2" title="CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_3" title="CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h2>
+
+<ul>
+ <li>作者: Paolo Lombardi</li>
+ <li>此文是我用意大利语写给 <a href="http://www.yappy.it">YappY</a> 的英文版本。我授权以 <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license </a>将所有内容分享。</li>
+ <li>上次更新时间: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/zh-cn/web/guide/css/using_css_gradients/index.html b/files/zh-cn/web/guide/css/using_css_gradients/index.html
new file mode 100644
index 0000000000..21460cd820
--- /dev/null
+++ b/files/zh-cn/web/guide/css/using_css_gradients/index.html
@@ -0,0 +1,717 @@
+---
+title: 使用 CSS 渐变
+slug: Web/Guide/CSS/Using_CSS_gradients
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 渐变</strong> {{cssxref("&lt;image&gt;")}} 类型的一种特殊类型 {{cssxref("&lt;gradient&gt;")}} 表示，由两种或多种颜色之间的渐进过渡组成。您可以选择三种类型的渐变：线性 (由 {{cssxref("linear-gradient")}} 函数创建)，径向(由 {{cssxref("radial-gradient")}} 函数创建) 和圆锥 (由 {{cssxref("conic-gradient")}} 函数创建)。您还可以使用 {{cssxref("repeating-linear-gradient")}} 和 {{cssxref("repeating-radial-gradient")}} 函数创建重复渐变。</p>
+
+<p>渐变可以在任何使用 <code>&lt;image&gt;</code> 的地方使用，例如在背景中。 由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。 此外，由于渐变是由浏览器生成的，因此在放大时它们看起来比栅格图像更好，并且可以动态调整大小。</p>
+
+<p>我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变，圆锥渐变和重复渐变。</p>
+
+<h2 id="使用线性渐变">使用线性渐变</h2>
+
+<p>线性渐变创建了一条沿直线前进的颜色带。</p>
+
+<div>
+<h3 id="基础线性渐变">基础线性渐变</h3>
+
+<p>要创建最基本的渐变类型，您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标，也可以指定任意数量。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate" dir="rtl">&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="改变渐变方向">改变渐变方向</h3>
+
+<p>默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="horizontal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="对角线渐变">对角线渐变</h3>
+
+<p>你甚至可以设置渐变方向为从一个对角到另一个对角。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="diagonal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}</p>
+</div>
+
+<div>
+<h3 id="设置渐变角度">设置渐变角度</h3>
+
+<p>如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="angled-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Using_angles', 120, 120) }}</p>
+
+<p>在使用角度的时候, <code>0deg</code> 代表渐变方向为从下到上, <code>90deg</code> 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+</div>
+
+<h2 id="声明颜色和创建效果">声明颜色和创建效果</h2>
+
+<p>所有的CSS渐变类型都是一个位置依赖的颜色范围。CSS渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：</p>
+
+<div>
+<h3 id="使用多种颜色">使用多种颜色</h3>
+
+<p>无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="auto-spaced-linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="颜色终止位置">颜色终止位置</h3>
+
+<p>你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， <code>0%</code> 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。 </p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multicolor-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="创建实线">创建实线</h3>
+
+<p>要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在50%标记处共享一个颜色停止点，即渐变的一半：</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="striped"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="渐变提示">渐变提示</h3>
+
+<p>默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中, 我们将渐变的中心点由50%设为10%。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate" dir="rtl">&lt;div class="color-hint"&gt;&lt;/div&gt;
+&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px; float: left; margin-right: 10px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="创建色带和条纹">创建色带和条纹</h3>
+
+<p>要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
+&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p>
+
+<p>In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.</p>
+
+<p>In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.</p>
+
+<p>In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.</p>
+</div>
+
+<div>
+<h3 id="Controlling_the_progression_of_a_gradient">Controlling the progression of a gradient</h3>
+
+<p>By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p>
+</div>
+
+<h3 id="Overlaying_gradients">Overlaying gradients</h3>
+
+<p>Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="layered-image"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 300px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p>
+
+<h3 id="Stacked_gradients">Stacked gradients</h3>
+
+<p>You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="stacked-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p>
+
+<h2 id="Using_radial_gradients">Using radial gradients</h2>
+
+<p>Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.</p>
+
+<h3 id="A_basic_radial_gradient">A basic radial gradient</h3>
+
+<p>As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="simple-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-radial {
+  background: radial-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p>
+
+<h3 id="Positioning_radial_color_stops">Positioning radial color stops</h3>
+
+<p>Again like linear gradients, you can position each radial color stop with a percentage or absolute length.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p>
+
+<h3 id="Positioning_the_center_of_the_gradient">Positioning the center of the gradient</h3>
+
+<p>You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 240px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p>
+
+<h3 id="Sizing_radial_gradients">Sizing radial gradients</h3>
+
+<p>Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default.</p>
+
+<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4>
+
+<p>This example uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p>
+
+<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4>
+
+<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p>
+
+<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4>
+
+<p>This example uses <code>closest-side</code>, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p>
+
+<h3 id="Stacked_radial_gradients">Stacked radial gradients</h3>
+
+<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p>
+
+<h2 id="Using_repeating_gradients">Using repeating gradients</h2>
+
+<p>The {{cssxref("linear-gradient")}} and {{cssxref("radial-gradient")}} properties don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}} and {{cssxref("repeating-radial-gradient")}} properties are available to offer this functionality.</p>
+
+<p>The size of the gradient line that repeats is the length between the first color stop value and the last color stop length value. If the last color stop has just a color and no color stop length, the value defaults to 0, meaning the linear gradient will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner.</p>
+
+<div>
+<h3 id="Repeating_linear_gradients">Repeating linear gradients</h3>
+
+<p>This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Multiple_repeating_linear_gradients">Multiple repeating linear gradients</h3>
+
+<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p>
+
+<p>In this case the gradient lines are 300px, 230px, and 300px long.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 600px;
+  height: 400px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p>
+</div>
+
+<h3 id="Plaid_gradient">Plaid gradient</h3>
+
+<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p>
+
+<h3 id="Repeating_radial_gradients">Repeating radial gradients</h3>
+
+<p>This example uses {{cssxref("repeating-radial-gradient")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p>
+
+<h3 id="Multiple_repeating_radial_gradients">Multiple repeating radial gradients</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multi-target"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 250px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p>
+
+<h3 id="Plaid_gradient_2">Plaid gradient</h3>
+
+<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p>
+
+<pre class="notranslate">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+
+<pre class="notranslate">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Gradient functions: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li>
+ <li>Gradient-related CSS data types: {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
+ <li>Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}}</li>
+ <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li>
+ <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/css/using_multi-column_layouts/index.html b/files/zh-cn/web/guide/css/using_multi-column_layouts/index.html
new file mode 100644
index 0000000000..593e14fd47
--- /dev/null
+++ b/files/zh-cn/web/guide/css/using_multi-column_layouts/index.html
@@ -0,0 +1,130 @@
+---
+title: 使用CSS的多列布局
+slug: Web/Guide/CSS/Using_multi-column_layouts
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>{{CSSRef("CSS Multi-columns")}}</p>
+
+<p><strong>CSS多列布局 </strong>扩展<em>块布局模式</em>，以便更容易地定义多列文本。如果一行太长，人们阅读文本很麻烦; 如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。因此，为了最大限度地利用大屏幕，作者应该将宽度不等的文本列并排放置，就像报纸一样。</p>
+
+<p>糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。</p>
+
+<h2 id="使用多列布局">使用多列布局</h2>
+
+<h3 id="列计数器和宽度">列计数器和宽度</h3>
+
+<p>有两个CSS属性控制是否实现多列布局和显示多少列： {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}。</p>
+
+<p>属性 <code>column-count</code> 设置特定数量的列数。例如，</p>
+
+<pre class="brush: html">&lt;div style="column-count:2;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>会以两列的方式显示内容：(如果你正使用支持多列布局的浏览器的话):</p>
+
+<p style="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>属性 <code>column-width</code> 设置期望的最小列宽。如果 <code>column-count</code> 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>变成：</p>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>详细细节在 <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3规范</a> 中。</p>
+
+<p>在多列块中，内容会自动从一列换到另一列中。所有 HTML， CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。</p>
+
+<h3 id="columns_属性简写"><code>columns</code> 属性简写</h3>
+
+<p>多数时候，网页设计者都会使用 {{ cssxref("column-count") }} 和 {{ cssxref("column-width") }} 的一个. 由于它们的值没有重叠，一般使用简写属性 {{ cssxref("columns") }}。例如，</p>
+
+<p>CSS声明 <code>column-width:12em</code> 可替换成：</p>
+
+<pre class="brush: html">&lt;div style="columns:12em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 12em; -moz-columns: 12em; -webkit-columns: 12em; columns: 12em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>CSS声明 <code>column-count:4</code> 可替换成：</p>
+
+<pre class="brush: html">&lt;div style="columns:4"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 4; -webkit-columns: 4; columns: 4;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>CSS声明 <code>column-width:8em</code> 和 <code>column-count:12</code> 可替换成：</p>
+
+<pre class="brush: html">&lt;div style="columns:12 8em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 12 8em; -webkit-columns: 12 8em; columns: 12 8em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h3 id="高度平衡">高度平衡</h3>
+
+<p>CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。Firefox浏览器是这样的。</p>
+
+<p>然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。因此，如果通过设置{{ cssxref("height") }} 或 {{ cssxref("max-height") }} 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。</p>
+
+<h3 id="列间隙">列间隙</h3>
+
+<p>列之间有缝隙。建议值为1em。该值可通过设置多列模块的 {{ Cssxref("column-gap") }} 属性来修改：</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em; column-gap:2em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h2 id="优雅降级">优雅降级</h2>
+
+<p>多列属性会被不支持多列模型的浏览器忽略。因此，为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。</p>
+
+<p>注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性，每个属性必须写三次： 一次用 {{ property_prefix("-moz") }} 前缀，一次用 {{ property_prefix("-webkit") }} 前缀，一次不使用前缀</p>
+
+<h2 id="讨论">讨论</h2>
+
+<p>CSS3 多列特性能帮助网页设计者最优化使用屏幕资源。如果你是一位具有丰富想象力的开发者，你会发现多列特性更多的好处，特别是在高度平衡特性方面。</p>
+
+<h2 id="其它">其它</h2>
+
+<ul>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>
+
+<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div>
+
+<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div>
+
+<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div>
diff --git a/files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html b/files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html
new file mode 100644
index 0000000000..65883df437
--- /dev/null
+++ b/files/zh-cn/web/guide/css/using_the__colon_target_selector/index.html
@@ -0,0 +1,68 @@
+---
+title: '在选择器中使用 :target 伪类'
+slug: 'Web/Guide/CSS/Using_the_:target_selector'
+tags:
+  - CSS
+  - CSS_3
+  - Selectors
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<p>{{CSSRef}}</p>
+
+<p>为了辅助标识那些指向文档特定部分链接的目标, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 选择器</a> 引入了<code> {{ Cssxref(":target") }} </code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持, 这一新的举措让页面作者能够辅助用户在较大的页面中定位。 </p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">选择一个目标</h3>
+
+<p><code>{{ Cssxref(":target") }} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。</code> 例如, <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> 这个 URI 包含了 <code>#Example 片段标识符。</code> 在HTML中, 标识符是元素的id或者name属性,。由于这两者位于相同的命名空间， 因此， 这个示例 URI 指向的是文档顶层的 "Example" 。</p>
+
+<p>假设你想修改 URI 指向的任何 h2 元素，但是又不想把样式应用到任何其它同类型的元素，那么以下示例足够简单有用：</p>
+
+<pre>h2:target {font-weight: bold;}</pre>
+
+<p>同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #Example 文档片段中加入边框，我们可以通过如下代码实现： </p>
+
+<pre>#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">定位所有元素</h3>
+
+<p>如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：</p>
+
+<pre>:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">示例</h3>
+
+<p>在以下示例中， 5个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致<code> &lt;h1 id="one"&gt; </code>成为目标元素。 注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。</p>
+
+<div id="example">
+<pre>&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">结论</h3>
+
+<p>在片段标识符指向部分文档的情况下，读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰, 读者的相关疑惑会减少或者消除。</p>
+
+<h3 id="Related_Links" name="Related_Links">相关链接</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li>
+ <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Last Updated Date: Published 30 Jun 2003</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
diff --git a/files/zh-cn/web/guide/css/visual_formatting_model/index.html b/files/zh-cn/web/guide/css/visual_formatting_model/index.html
new file mode 100644
index 0000000000..640f3abbc9
--- /dev/null
+++ b/files/zh-cn/web/guide/css/visual_formatting_model/index.html
@@ -0,0 +1,282 @@
+---
+title: 视觉格式化模型
+slug: Web/Guide/CSS/Visual_formatting_model
+tags:
+  - CSS
+  - CSS盒模型
+  - 参考
+translation_of: Web/CSS/Visual_formatting_model
+---
+<p><span style="color: #4d4e53;">{{CSSRef}}</span></p>
+
+<p>CSS 视觉格式化模型（<em>visual formatting model）</em>是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。</p>
+
+<div class="hidden">
+<p> </p>
+</div>
+
+<p><span style="line-height: inherit;">视觉格式化模型会根据<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS盒子模型</a>将文档中的元素转换为一个个盒子，</span><span style="line-height: inherit;">每个盒子的布局由以下因素决定：</span></p>
+
+<ul>
+ <li>盒子的尺寸：精确指定、由约束条件指定或没有指定</li>
+ <li>盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）</li>
+ <li><a href="/zh-CN/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">定位方案（positioning scheme）</a>：普通流定位、浮动定位或绝对定位</li>
+ <li>文档树中的其它元素：即当前盒子的子元素或兄弟元素</li>
+ <li>{{glossary("viewport", "视口")}}尺寸与位置</li>
+ <li>所包含的图片的尺寸</li>
+ <li>其他的某些外部因素</li>
+</ul>
+
+<p>该模型会根据盒子的包含块（<em>containing block）的</em>边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，<span style="line-height: inherit;">当盒子的布局跑到包含块的外面时称为</span><span style="line-height: inherit;">溢出（</span><em>overflow）</em><span style="line-height: inherit;">。</span></p>
+
+<div class="note">
+<p><span style="line-height: inherit;">译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。</span></p>
+
+<p> </p>
+
+<ul>
+ <li><strong>块</strong>：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。</li>
+ <li><strong>包含块</strong>：containing block，包含其他盒子的块称为包含块。</li>
+ <li><strong>盒子</strong>：box，一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。</li>
+ <li><strong>块级元素</strong>：block-level element，元素的 <code>display</code> 为 <code>block</code>、<code>list-item</code>、<code>table</code> 时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li>
+ <li><strong>块级盒子</strong>：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。</li>
+ <li><strong>块盒子</strong>：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。</li>
+ <li><strong>块容器盒子</strong>：block container box或block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。</li>
+</ul>
+
+<p>注意：盒子分为“块盒子”和“块级盒子”两种，但元素只有“块级元素”，而没有“块元素”。下面的“行内级元素”也是一样。</p>
+
+<ul>
+ <li><strong>行内级元素</strong>：inline-level element，<code>display</code> 为 <code>inline</code>、<code>inline-block</code>、<code>inline-table</code> 的元素称为行内级元素。与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li>
+ <li><strong>行内级盒子</strong>：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。</li>
+ <li><strong>行内盒子</strong>：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。</li>
+ <li><strong>原子行内级盒子</strong>：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。</li>
+</ul>
+
+<p>另外，本文的英文原文仍未最后定稿，因此部分内容并不完整。待英文原文更新后应及时更新译文。</p>
+</div>
+
+<h2 id="盒子的生成">盒子的生成</h2>
+
+<p><span style="line-height: inherit;">盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS </span>{{ cssxref("display") }} 属性。</p>
+
+<h3 id="块级元素与块盒子">块级元素与块盒子</h3>
+
+<p><span style="line-height: inherit;">当元素的</span> {{ cssxref("display") }} 为 <code>block</code>、<code>list-item</code> 或 <code>table</code><span style="line-height: inherit;"> 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。</span></p>
+
+<p>每个块级盒子都会参与<a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">块格式化上下文（block formatting context）</a>的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（<em>principal block-level</em><em> box）。有</em>一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。 </p>
+
+<p>主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与<a href="/zh-CN/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">定位方案</a>。</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">一个块级盒子可能也是一个块容器盒子。块容器盒子（<em>block container box）要么</em>只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内<a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">格式化上下文（inline formatting context）</a>。</p>
+
+<p>能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。</p>
+
+<p>一个同时是块容器盒子的块级盒子称为块盒子（<em>block box）。</em></p>
+
+<h4 id="匿名块盒子" style="">匿名块盒子</h4>
+
+<p>在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（<em>anonymous boxes）</em>。</p>
+
+<p><span style="line-height: inherit;">CSS选择器不能作用于匿名盒子(</span><em>anonymous boxes</em><span style="line-height: inherit;">)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为</span> <code>inherit</code> ，而所有不可继承的 CSS 属性值都为 <code>initial</code>。</p>
+
+<p>块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建<span style="line-height: inherit;">匿名块盒子。</span></p>
+
+<h3 id="示例">示例</h3>
+
+<p>考虑下面的HTML代码，假设 {{ HTMLElement("div") }} 和 {{ HTMLElement("p") }} 都保持默认的样式（即它们的 <code>display</code> 为 <code>block</code>）：</p>
+
+<pre class="brush: html">&lt;div&gt;Some inline text &lt;p&gt;followed by a paragraph&lt;/p&gt; followed by more inline text.&lt;/div&gt;
+</pre>
+
+<p>此时会产生两个匿名块盒子：一个是 <code>&lt;p&gt;</code> 元素前面的那些文本（<code>Some inline text</code>），另一个是 &lt;p&gt; 元素后面的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p>
+
+<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png" style="height: 137px; width: 597px;"></p>
+
+<p>显示为：</p>
+
+<pre>Some inline text
+followed by a paragraph
+followed by more inline text.
+</pre>
+
+<p>对这两个匿名盒子来说，程序员无法像 {{ HTMLElement("p") }} 元素那样控制它们的样式，因此它们会从 {{ HTMLElement("div") }} 那里继承那些可继承的属性，如 {{ cssxref("color") }}。其他不可继承的属性则会设置为 <code>initial</code>，比如，因为没有为它们指定 {{ cssxref("background-color") }}，因此其具有默认的透明背景，而 <code>&lt;p&gt;</code> 元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。</p>
+
+<p>另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。</p>
+
+<p>如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。</p>
+
+<h3 id="示例_2">示例</h3>
+
+<p>考虑下面的HTML代码，假设 {{ HTMLElement("p") }} 的 <code>display</code> 为 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">inline</span></font>，{{ HTMLElement("span") }} 的 <code>display</code> 为 <code>block</code>：</p>
+
+<pre class="brush: html"><code>&lt;p&gt;Some &lt;em&gt;inline&lt;/em&gt; text &lt;span&gt;followed by a paragraph&lt;/span&gt; followed by more inline text.&lt;/p&gt;</code>
+</pre>
+
+<p>此时会产生两个匿名块盒子：一个是 <code>&lt;span&gt;</code> 元素前面的文本（<code>Some <em>inline</em> text</code>），另一个是其之后的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<p>显示为：</p>
+
+<pre>Some inline text
+followed by a paragraph
+followed by more inline text.
+</pre>
+
+<h3 id="行内级元素和行内盒子">行内级元素和行内盒子</h3>
+
+<p>如果一个元素的 {{ cssxref("display") }} 属性为 <code>inline</code>、<code>inline-block</code> 或 <code>inline-table</code>，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。</p>
+
+<p><img alt="" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left; height: 287px; width: 384px;"></p>
+
+<div class="warning">
+<p>该图使用了过时的术语，见下面的“注意”（译注：指图中的 “Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2标准的9.2.2节”。</p>
+</div>
+
+<p>行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Inline_formatting_context">inline formatting context</a>）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有 <code>display:inline</code> 样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或 <code>display</code> 值为 <code>inline-block</code> 或 <code>inline-table</code> 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。</p>
+
+<div class="note">
+<p>注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。</p>
+</div>
+
+<div class="note">
+<p>在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：</p>
+
+<pre class="brush: html">&lt;style&gt;
+  span {
+    display:inline; /* default value*/
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   The text in the span &lt;span&gt;can be split in several
+   lines as it&lt;/span&gt; is an inline box.
+&lt;/div&gt;
+</pre>
+
+<p>可能会显示为：</p>
+
+<p>The text in the span can be split into several<br>
+ lines as it is an inline box.</p>
+
+<p>而：</p>
+
+<pre class="brush: html">&lt;style&gt;
+  span {
+    display:inline-block;
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   The text in the span &lt;span&gt;cannot be split in several
+   lines as it&lt;/span&gt; is an inline-block box.
+&lt;/div&gt;
+</pre>
+
+<p>则可能显示为：</p>
+
+<p>The text in the span <br>
+ cannot be split into several lines as it is an<br>
+ inline-block box.</p>
+
+<p>其中的“cannot be split into several lines as it”永远不会换行。</p>
+</div>
+
+<h4 id="匿名行内盒子">匿名行内盒子</h4>
+
+<div>类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 <code>initial</code>。</div>
+
+<div> </div>
+
+<div>一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 {{ cssxref("white-space") }} 的设置而被移除，从而导致最终的实际内容为空。</div>
+
+<div> </div>
+
+<div class="note">示例 TBD</div>
+
+<h3 id="其他类型的盒子">其他类型的盒子</h3>
+
+<h4 id="行盒子">行盒子</h4>
+
+<p>行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。</p>
+
+<div>行盒子更多是以技术性目的而存在的，Web开发者通常不需要关心。</div>
+
+<h4 id="Run-in_盒子">Run-in 盒子</h4>
+
+<div>Run-in 盒子通过 <code>display:run-in</code> 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。</div>
+
+<div> </div>
+
+<div class="note">
+<p>注意：Run-in 盒子已经在CSS 2.1的标准中移除了，但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。</p>
+</div>
+
+<h4 id="由其他模型引入的盒子">由其他模型引入的盒子</h4>
+
+<div>除了行内格式化上下文和块格式化上下文之外，CSS还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：</div>
+
+<div> </div>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/table-layout">表格内容模型</a>可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等</li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/Using_CSS_multi-column_layouts">多列内容模型</a>可能会在容器盒子和内容之间创建多个列盒子</li>
+ <li>实验性的网格内容模型或flex-box内容模型同样会创建一些其他种类的盒子</li>
+</ul>
+
+<h4 id="定位规则">定位规则</h4>
+
+<p>一旦生成了盒子以后，CSS引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则：</p>
+
+<ul>
+ <li>普通流：按照次序依次定位每个盒子</li>
+ <li>浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边</li>
+ <li>绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素</li>
+</ul>
+
+<h3 id="普通流">普通流</h3>
+
+<div>在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行内格式化上下文中，盒子则水平排列。当CSS的 {{ cssxref("position") }} 属性为 <code>static</code> 或 <code>relative</code>，并且 {{ cssxref("float") }} 为 <code>none</code> 时，其布局方式为普通流。</div>
+
+<h3 id="示例_3">示例</h3>
+
+<div class="note">
+<p>在普通流的块格式化上下文中，盒子会垂直依次排列：</p>
+
+<p>[TODO 图片]</p>
+
+<p>在普通流的行内格式化上下文中，盒子会水平依次排列：</p>
+
+<p>[TODO 图片]</p>
+</div>
+
+<div class="note">
+<p>普通流又有两种情况：静态定位和相对定位：</p>
+
+<p>{{ cssxref("position") }} 为 <code>static</code> 时为静态定位，此时每个盒子根据普通流所计算出的确切位置来定位。</p>
+
+<p>[TODO 图片]</p>
+
+<p>当 {{ cssxref("position") }} 为 <code>relative</code> 时为相对定位，此时每个盒子还会根据 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 属性的值在其原本所在的位置上产生指定大小的偏移。</p>
+</div>
+
+<h3 id="浮动">浮动</h3>
+
+<p>在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素通过 {{ cssxref("clear") }} 清除了前面的浮动。</p>
+
+<p>一个盒子的 {{ cssxref("float") }} 值不为 <code>none</code>，并且其 {{ cssxref("position") }} 为 <code>static</code> 或 <code>relative</code> 时，该盒子为浮动定位。如果将 {{ cssxref("float") }} 设置为 <code>left</code>，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 <code>right</code>，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。</p>
+
+<p>[TODO 图片]</p>
+
+<h3 id="绝对定位">绝对定位</h3>
+
+<p>在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系（译注：此处仅指定位和位置计算，而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系），其位置会使用 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 相对其<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>进行计算。</p>
+
+<p>如果元素的 {{ cssxref("position") }} 为 <code>absolute</code> 或 <code>fixed</code>，该元素为绝对定位。</p>
+
+<p>对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html b/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..65249da219
--- /dev/null
+++ b/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html
@@ -0,0 +1,136 @@
+---
+title: 创建和触发 events
+slug: Web/Guide/Events/Creating_and_triggering_events
+tags:
+  - Advanced
+  - DOM
+  - Guide
+  - events
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>本文演示了如何创建和分派DOM事件。这些事件通常称为<strong>合成事件</strong>，而不是浏览器本身触发的事件。</p>
+
+<h2 id="创建自定义事件">创建自定义事件</h2>
+
+<p>Events 可以使用 <a href="/zh/docs/Web/API/Event"><code>Event</code></a> 构造函数创建如下：</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);</pre>
+
+<p>上述代码使用了 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 方法。</p>
+
+<p><span style="line-height: 1.5;">绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 </span><a href="#The_old-fashioned_way" style="line-height: 1.5;" title="#过时的方式">过时的方式</a><span style="line-height: 1.5;">  一节。</span></p>
+
+<h3 id="添加自定义数据_–_CustomEvent">添加自定义数据 – CustomEvent()</h3>
+
+<p>要向事件对象添加更多数据，可以使用 <a href="/zh-CN/docs/Web/API/CustomEvent">CustomEvent</a> 接口，detail 属性可用于传递自定义数据。<br>
+ 例如，event 可以创建如下：</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p><span style="line-height: 1.5;">下面的代码允许你在事件监听器中访问更多的数据：</span></p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="过时的方式">过时的方式</h3>
+
+<p>早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：</p>
+
+<pre class="brush: js">// Create the event.
+var event = document.createEvent('Event');
+
+// Define that the event name is 'build'.
+event.initEvent('build', true, true);
+
+// Listen for the event.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+</pre>
+
+<h3 id="事件冒泡">事件冒泡</h3>
+
+<p>通常需要从子元素触发事件，并让祖先捕获它：</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () =&gt; textarea.value }
+});
+
+// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
+textarea.addEventListener('input', e =&gt; e.target.dispatchEvent(eventAwesome));</pre>
+
+<h3 id="动态创建和派发事件">动态创建和派发事件</h3>
+
+<p>元素可以侦听尚未创建的事件：</p>
+
+<pre class="brush: html"><code>&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;</code></pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () =&gt; textarea.value } }))
+});</pre>
+
+
+
+<h2 id="触发内置事件">触发内置事件</h2>
+
+<p>下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。<a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">参见这个动态示例</a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">参见</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/guide/events/event_handlers/index.html b/files/zh-cn/web/guide/events/event_handlers/index.html
new file mode 100644
index 0000000000..279d77159c
--- /dev/null
+++ b/files/zh-cn/web/guide/events/event_handlers/index.html
@@ -0,0 +1,180 @@
+---
+title: DOM 事件回调
+slug: Web/Guide/Events/Event_handlers
+translation_of: Web/Guide/Events/Event_handlers
+---
+<h2 id="概要">概要</h2>
+
+<p>Web平台提供了多种方式来获取 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events">DOM events</a> 的通知。两种常见的风格是：广义 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 和一组特定的<em><strong>on-event</strong></em>处理器。本页重点介绍后者如何工作的细节。</p>
+
+<h3 id="注册on-event_处理器">注册<em>on-event</em> 处理器</h3>
+
+<p><em><strong>on-event </strong></em>处理器是由DOM元素提供的一组属性，以帮助管理元素如何对事件反应。元素可以使可交互性的（例如链接，按钮，图像，表单）或者非可交互的（比如基本文档本身等）。事件是异性行为，像点击，检测到按下按键，获得焦点等。<em><strong>on-event </strong></em>事件通常被相应地命名，诸如onclick，onkeypress，onfocus等。</p>
+
+<p>你可以为一个给定的对象的某个特定事件（比如{{event("click")}}）指定一个 <code>on&lt;...&gt;</code> 事件处理器，使用以下几种不同的方式：</p>
+
+<ul>
+ <li>在元素上使用 HTML {{Glossary("attribute")}} <code>on<em>{eventtype}</em></code> ，例如：<br>
+  <code>&lt;button <u>onclick="return handleClick(event);"</u>&gt;</code>,</li>
+ <li>或者通过 JavaScript 设置相应的属性（ {{Glossary("property/JavaScript", "property")}}），例如：<br>
+  <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li>
+</ul>
+
+<p>注意，每个对象对于给定的事件<strong>只能有一个</strong>事件处理器（尽管该处理程序可以调用多个子处理器）。这就是为什么{{domxref("EventTarget.addEventListener", "addEventListener()")}} 通常是获得事件通知的更好方法，特别是当你希望彼此独立地应用各种事件处理程序时，即使对于相同的事件和/或相同的元素也是如此。</p>
+
+<p>还要注意，事件处理器是自动调用的，而不是程序员的意志(尽管你可以使用像 <code>mybutton.onclick(myevent); )。</code>因为它们更多地用作可以<strong>分配</strong>真实处理器函数的占位符。</p>
+
+<h3 id="非元素对象">非元素对象</h3>
+
+<p>事件处理器也可以使用属性设置在生成事件的许多非元素对象上， 包括{{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, 和其他等等，例如：</p>
+
+<pre><code>xhr.onprogress = function() { ... }</code></pre>
+
+<h2 id="细节">细节</h2>
+
+<h3 id="HTML的_on&lt;...>_属性值_和相应JavaScript">HTML的 on&lt;...&gt; 属性值 和相应JavaScript</h3>
+
+<p>通过 on&lt;...&gt; 元素属性注册的处理程序将通过相应的 on&lt;...&gt; 对象属性可用，相反，则不可用：</p>
+
+<pre><code>&lt;div id="a" onclick="alert('old')"&gt;Open the Developer Tools Console to see the output.&lt;/div&gt;
+
+&lt;script&gt;
+window.onload = function () {
+  var div = document.getElementById("a");
+  console.log("Attribute reflected as a property: ", div.onclick.toString());
+  // Prints: function onclick(event) { alert('old') }
+  div.onclick = function() { alert('new') };
+  console.log("Changed property to: ", div.onclick.toString());
+  // Prints: function () { alert('new') }
+  console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
+  // Prints: alert('old')
+}
+&lt;/script&gt;</code></pre>
+
+<p>由于历史原因，{{HTMLElement("body")}} 和 {{HTMLElement("frameset")}} 元素中的某些元素属性/对象属性实际上是在其父 {{domxref("Window")}} 对象上设置了事件处理器(这些 HTML 命名: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)。</p>
+
+<h3 id="事件处理器的参数，this_绑定和返回值">事件处理器的参数，<code>this</code> 绑定和返回值</h3>
+
+<p>当事件处理程序被指定为 <strong>HTML 属性</strong>，指定的代码被包装在有 <strong>以下参数 </strong>的函数中：</p>
+
+<ul>
+ <li><code>event</code> - 对于所有的事件处理器，除了 {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> 对于 {{domxref("GlobalEventHandlers.onerror", "onerror")}} 事件处理器。注意，<code>event</code> 参数实际上包含字符串的错误消息。</li>
+</ul>
+
+<p>当事件处理器被调用，事件处理器内部的 <code>this</code> 关键字被设置为注册该事件处理器的 DOM 元素。更多信息查看 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">this 关键字文档</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler"> </a>.</p>
+
+<p>事件处理器的返回值决定了事件是否被取消。返回值的具体处理方式取决于事件的类型，更多信息查看 <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p>
+
+<h3 id="什么时候调用事件处理程序">什么时候调用事件处理程序</h3>
+
+<p>TBD (non-capturing listener)</p>
+
+<h3 id="术语">术语 </h3>
+
+<p>术语 <strong>事件处理器（event handler）</strong> 可用于指：</p>
+
+<ul>
+ <li>注册的事件通知的任何函数或对象，</li>
+ <li>或更具体地说，是通过HTML中的 <code>on... </code>属性或web API中的属性来注册事件监听器的机制，例如 <code>&lt;button onclick="alert(this)"&gt; </code>或 <code>window.onload = function() { /* ... */ }</code>。</li>
+</ul>
+
+<p>在讨论各种监听事件的方法时：</p>
+
+<ul>
+ <li> <strong>事件侦听器（event listener）</strong>是指通过 {{domxref("EventTarget.addEventListener()")}} 注册的函数或对象,</li>
+ <li>而<strong>事件处理器（event handler）</strong>是指通过 <code>on...</code>  属性注册的函数。</li>
+</ul>
+
+<h2 id="Specifications" name="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', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Firefox_9中的事件处理器的变动">Firefox 9中的事件处理器的变动</h3>
+
+<p>为了更好地匹配规范，并提高跨浏览器兼容性，在Gecko 9.0 {{ geckoRelease("9.0") }} 中更改了基本级别事件处理器的实现方式。</p>
+
+<p>具体来说，在过去，事件处理器没有被正确地实现为标准的IDL属性。在 Gecko 9.0，这一点被改变。因此，Gecko的事件处理程序的某些行为已经改变。特别地，它们现在含有为标准IDL属性行为的所有特性。在大多数情况下，这不应该影响网页或附加内容。然而，还有一些具体的事情需要注意。</p>
+
+<h4 id="检测事件处理程序属性的存在">检测事件处理程序属性的存在</h4>
+
+<p>你可以使用 JavaScript 的 <code><a href="https://developer.mozilla.org/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in">in</a> </code>运算符来检测事件处理器属性（例如，onload）的存在。例如：</p>
+
+<pre class="brush: js">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="事件处理程序和原型">事件处理程序和原型</h4>
+
+<p>您不能设置或访问DOM原型对象上任何IDL定义的属性的值，这意味着您不能更改 <code>Window.prototype.onload</code>。在过去，事件处理程序（onload等）没有被实现为Gecko中的IDL属性，所以可以这样做，而现在你不能这样做，这提高了兼容性。</p>
diff --git a/files/zh-cn/web/guide/events/index.html b/files/zh-cn/web/guide/events/index.html
new file mode 100644
index 0000000000..e885cdd8b7
--- /dev/null
+++ b/files/zh-cn/web/guide/events/index.html
@@ -0,0 +1,54 @@
+---
+title: Event developer guide
+slug: Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+
+<p>事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式，也指一些不同种类事件的命名、描述和使用。</p>
+
+<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">概述</a> 中提供了对设计模式的介绍和现代Web浏览器中事件和处理程序的概述。</p>
+
+<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">自定义事件</a> 中介绍了如何创建自定义事件、注册监听自定义事件和如何在代码中触发自定义事件</p>
+
+<p>接下来的内容描述了如何在Web浏览器中使用不同类型的事件。不幸的是，这些事件是随着Web浏览器的发展逐一定义的，所以，目前还没有一个令人满意的系统描述。</p>
+
+<p><strong>设备</strong>可以在Web浏览器运行时触发事件，例如，由于其在现实世界中的位置和方向的变化，在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> 和 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a> 被讨论，这与设备垂直方向的变化是不同的，但是类似的。</p>
+
+<p>浏览器显示的 <strong>窗口</strong> 也可以触发事件, 例如，如果用户最大化窗口或以其他方式更改窗口大小。</p>
+
+<p>网页的<strong>进程加载</strong>可以触发事件，响应下载，解析和呈现网页给用户的不同步骤的完成状态。</p>
+
+<p>用户与网页内容的<strong>交互</strong>可能触发事件。用户交互触发的事件在浏览器设计的早期阶段发生，包括一个复杂的系统，定义了事件将被调用的顺序以及该序列可以被控制的方式。不同类型的用户交互驱动的事件包括：</p>
+
+<ul>
+ <li>原始的 'click' 事件,</li>
+ <li>鼠标事件,</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events"><font><font>鼠标手势事件</font></font></a><font><font>，和</font></font></li>
+ <li><font><font>这两个</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"><font><font>触摸事件</font></font></a><font><font>和早些时候</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)"><font><font>Mozilla的实验性触摸事件</font></font></a><font><font>，现在已废弃。</font></font></li>
+</ul>
+
+<p> </p>
+
+<p><font><font>该</font></font><strong><font><font>网页的修改</font></font></strong><font><font>结构或内容可能会引发一些事件，如解释的</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events"><font><font>突变事件页</font></font></a><font><font>，但使用这些事件也有利于较轻的被弃用</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><font><font>突变观察员</font></font></a><font><font>的做法。</font></font></p>
+
+<p><font><font>嵌入在HTML文档中</font><font>的</font></font><strong><font><font>媒体流</font></font></strong><font><font>可能会触发某些事件，如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Media_events"><font><font>媒体事件</font></font></a><font><font>页面中所述。</font></font></p>
+
+<p>网页发出的<strong>网络请求</strong>可能会触发一些事件。</p>
+
+<p>还有许多网页浏览器定义的其他事件还不包括在本指南中。</p>
+
+<div class="note">
+<p>注意: 本是件开发指南还需要大量的工作，结构需要重新组织，页面重写。我们希望你所需要知道的一切事情都会在这里。</p>
+</div>
+
+<h2 id="Docs">Docs</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/zh-cn/web/guide/events/media_events/index.html b/files/zh-cn/web/guide/events/media_events/index.html
new file mode 100644
index 0000000000..a436959d90
--- /dev/null
+++ b/files/zh-cn/web/guide/events/media_events/index.html
@@ -0,0 +1,226 @@
+---
+title: 媒体相关事件
+slug: Web/Guide/Events/Media_events
+tags:
+  - Audio
+  - Media
+  - Video
+translation_of: Web/Guide/Events/Media_events
+---
+<p>在处理用{{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }}标签嵌入到HTML文档中的媒体时，会触发多种事件。本章列出这些事件，并给出一些使用方法。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>事件名称</th>
+   <th>描述</th>
+  </tr>
+  <tr>
+   <td><code>abort</code></td>
+   <td> 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。</td>
+  </tr>
+  <tr>
+   <td><code>canplay</code></td>
+   <td>在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。</td>
+  </tr>
+  <tr>
+   <td><code>canplaythrough</code></td>
+   <td>在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。</td>
+  </tr>
+  <tr>
+   <td><code>durationchange</code></td>
+   <td>元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。</td>
+  </tr>
+  <tr>
+   <td><code>emptied</code></td>
+   <td>媒体被清空（初始化）时触发。</td>
+  </tr>
+  <tr>
+   <td><code>ended</code></td>
+   <td>播放结束时触发。</td>
+  </tr>
+  <tr>
+   <td><code>error</code></td>
+   <td>在发生错误时触发。元素的error属性会包含更多信息。参阅 <a href="/en-US/docs/Web/API/HTMLMediaElement/error">HTMLMediaElement.error</a> 获得详细信息。</td>
+  </tr>
+  <tr>
+   <td><code>interruptbegin</code></td>
+   <td>声音在Firefox OS设备中断时触发,可能是应用程序被切换至后台或者更高优先级的应用占用了音频通道。 相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td>
+  </tr>
+  <tr>
+   <td><code>interruptend</code></td>
+   <td>声音在Firefox OS设备中断后恢复播放时触发,应用程序被切换至前台或占用更高级音频通道的应用程序播放完毕后触发。相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td>
+  </tr>
+  <tr>
+   <td><code>loadedmetadata</code></td>
+   <td>媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。</td>
+  </tr>
+  <tr>
+   <td><code>loadstart</code></td>
+   <td>在媒体开始加载时触发。</td>
+  </tr>
+  <tr>
+   <td><code>mozaudioavailable</code></td>
+   <td>当音频数据缓存并交给音频层处理时</td>
+  </tr>
+  <tr>
+   <td><code>pause</code></td>
+   <td>播放暂停时触发。</td>
+  </tr>
+  <tr>
+   <td><code>play</code></td>
+   <td>在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。</td>
+  </tr>
+  <tr>
+   <td><code>playing</code></td>
+   <td>在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。</td>
+  </tr>
+  <tr>
+   <td><code>progress</code></td>
+   <td>告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。</td>
+  </tr>
+  <tr>
+   <td><code>ratechange</code></td>
+   <td>在回放速率变化时触发。</td>
+  </tr>
+  <tr>
+   <td><code>seeked</code></td>
+   <td>在跳跃操作完成时触发。</td>
+  </tr>
+  <tr>
+   <td><code>seeking</code></td>
+   <td>在跳跃操作开始时触发。</td>
+  </tr>
+  <tr>
+   <td><code>stalled</code></td>
+   <td>在尝试获取媒体数据，但数据不可用时触发。</td>
+  </tr>
+  <tr>
+   <td><code>suspend</code></td>
+   <td>在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。</td>
+  </tr>
+  <tr>
+   <td><code>timeupdate</code></td>
+   <td>元素的currentTime属性表示的时间已经改变。</td>
+  </tr>
+  <tr>
+   <td><code>volumechange</code></td>
+   <td>在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。</td>
+  </tr>
+  <tr>
+   <td><code>waiting</code></td>
+   <td>在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>使用下面的代码，你可以很容易的观察到这些事件:</p>
+
+<pre class="brush: js notranslate">var v = document.getElementsByTagName("video")[0];
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+</pre>
+
+<p>这个例子获取了文档中第一个video元素，并在video元素上监听了一个seeked事件，该事件会在跳跃操作完成后触发。监听器的处理函数就是简单的调用元素的play()方法，该方法会开始视频的播放。</p>
+
+<p>接下来来看例子的第三行，这里设置了元素的crruentTime特性值为10.0，这会初始化一个在媒体中跳跃(快进)到10s位置的操作。操作开始时会引起一个seeking事件，随后当跳跃操作完成时会触发seeked事件。</p>
+
+<p>换句话，本例中只要在媒体中跳跃到10s位置的操作完成，视频就会马上播放。</p>
+
+<h2 id="兼容性">兼容性</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/guide/events/mutation_events/index.html b/files/zh-cn/web/guide/events/mutation_events/index.html
new file mode 100644
index 0000000000..ea2be04985
--- /dev/null
+++ b/files/zh-cn/web/guide/events/mutation_events/index.html
@@ -0,0 +1,62 @@
+---
+title: Mutation events
+slug: Web/Guide/Events/Mutation_events
+translation_of: Web/Guide/Events/Mutation_events
+---
+<p>{{deprecated_header()}}</p>
+
+<p><strong>Mutation 事件 </strong>为web页面提供一种机制或扩展，以便在DOM被改变时获得通知。<span style="background-color: #ffff00;">如果可能请用<a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>代替。</span></p>
+
+<h2 id="前言">前言</h2>
+
+<p id="Replacement.3A_mutation_observers">这个 mutation 事件在<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events 标准</a> 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a> 的</span>"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" <span id="to">)</span>. </p>
+
+<p><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>中。</p>
+
+<p>避免用mutation事件的实际原因是<strong>性能问题</strong>和<strong>跨浏览器支持</strong>。</p>
+
+<h3 id="性能">性能</h3>
+
+<p>为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能（慢1.5 - 7倍），此外, 移除监听器不会逆转的损害。</p>
+
+<p>性能好坏 <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">限制了文档拥有mutation事件监听</a>.</p>
+
+<h3 id="跨浏览器支持">跨浏览器支持</h3>
+
+<p>这些事件在不同的浏览器实现并不一致, 例如:</p>
+
+<ul>
+ <li>IE9之前的版本不支持mutation 事件而且在IE9版本中没有正确实现其中某些事件(<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">例如, DOMNodeInserted</a>)</li>
+ <li>WebKit 不支持 DOMAttrModified (见 <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> 和 <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li>
+ <li>"mutation name events", i.e. DOMElementNameChanged 和 DOMAttributeNameChanged 在Firefox中不被支持 (到 version 11), 可能其他浏览器也是这样.</li>
+ <li>...</li>
+</ul>
+
+<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">documents browser support for mutation events</a>.</p>
+
+<h2 id="Mutation_事件列表">Mutation 事件列表</h2>
+
+<p>下面是所有 mutation 事件列表, <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a> 中定义的:</p>
+
+<ul>
+ <li><code>DOMAttrModified</code></li>
+ <li><code>DOMAttributeNameChanged</code></li>
+ <li><code>DOMCharacterDataModified</code></li>
+ <li><code>DOMElementNameChanged</code></li>
+ <li><code>DOMNodeInserted</code></li>
+ <li><code>DOMNodeInsertedIntoDocument</code></li>
+ <li><code>DOMNodeRemoved</code></li>
+ <li><code>DOMNodeRemovedFromDocument</code></li>
+ <li><code>DOMSubtreeModified</code></li>
+</ul>
+
+<h2 id="使用">使用</h2>
+
+<p>你可以如下所示使用<a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a> 注册一个mutation 事件监听器:</p>
+
+<pre><code>element.addEventListener("DOMNodeInserted", function (ev) {</code>
+  // ...
+<code>}, false);</code>
+</pre>
+
+<p>事件对象在 {{ domxref("MutationEvent") }}传递给监听器 (见 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">its definition in the specification</a>) 对于大多数的事件, 和 {{ domxref("MutationNameEvent") }} 用于 <code>DOMAttributeNameChanged</code> and <code>DOMElementNameChanged</code>.</p>
diff --git a/files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html
new file mode 100644
index 0000000000..f817c71bab
--- /dev/null
+++ b/files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html
@@ -0,0 +1,44 @@
+---
+title: Orientation 和 motion 数据解释
+slug: Web/Guide/Events/Orientation_and_motion_data_explained
+translation_of: Web/Guide/Events/Orientation_and_motion_data_explained
+---
+<p>{{ Draft() }}</p>
+<h2 id="总言" style="line-height: 30px; font-size: 2.14285714285714rem;">总言</h2>
+<p>当我们要使用orientation和motion事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。</p>
+<div class="warning" style="font-size: 14px;">
+ <p><strong>警告:</strong> 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.</p>
+</div>
+<h2 id="坐标系" style="line-height: 30px; font-size: 2.14285714285714rem;">坐标系</h2>
+<p>坐标系是一种描述物体位置的系统，它包含三个轴(X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。</p>
+<h3 id="地球坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">地球坐标系</h3>
+<p>地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。</p>
+<ul>
+ <li>X轴沿着地平面，垂直于Y轴，向东为正，向西为负。</li>
+ <li>Y轴沿着地平面，向北(北极，不是磁场北)为正，向南为负。</li>
+ <li>Z轴垂直于地平面，想象成一条线连接着设备跟地心。背对地心的方向为正，指向地心的方向为负。</li>
+</ul>
+<h3 id="设备坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">设备坐标系</h3>
+<p>设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。</p>
+<p>,<img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png"></p>
+<ul>
+ <li>x轴沿着屏幕表面，向右为正，向左为负。</li>
+ <li>y轴沿着屏幕表面，向上为正，向下为负。</li>
+ <li>z轴垂直屏幕表面或键盘，远离屏幕的方向为正。</li>
+</ul>
+<div class="note">
+ <span style="line-height: 1.5;">注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用</span><span style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">orientationchange事件。</span></div>
+<h2 id="旋转(Rotation)" style="line-height: 30px; font-size: 2.14285714285714rem;">旋转(Rotation)</h2>
+<p>旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。</p>
+<h3 id="Alpha" style="line-height: 24px; font-size: 1.71428571428571rem;">Alpha</h3>
+<p>围绕z轴旋转设备将使alpha角度值发生变化:</p>
+<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png"></p>
+<p><span style="line-height: 1.5;">alpha为</span><span style="line-height: 1.5;">0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。</span></p>
+<h3 id="Beta" style="line-height: 24px; font-size: 1.71428571428571rem;">Beta</h3>
+<p>围绕x轴旋转，也就是前后旋转，将使beta值发生改变:</p>
+<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p>
+<p><span style="line-height: 1.5;">当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到</span><span style="line-height: 1.5;">180°，向后翻转递减到-180°。</span></p>
+<h3 id="Gamma" style="line-height: 24px; font-size: 1.71428571428571rem;">Gamma</h3>
+<p><span style="line-height: 1.5;">当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:</span></p>
+<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p>
+<p><span style="line-height: 1.5;">gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到</span><span style="line-height: 1.5;">90° ，向左翻转时，递减到-90°。</span></p>
diff --git a/files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html b/files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html
new file mode 100644
index 0000000000..87ddd75dde
--- /dev/null
+++ b/files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html
@@ -0,0 +1,135 @@
+---
+title: Overview of Events and Handlers
+slug: Web/Guide/Events/Overview_of_Events_and_Handlers
+translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
+---
+<div class="summary">
+<p>事件和事件处理的概述解释了用于响应在Web页面时间发生的事件的代码设计模式，并总结了由现代Web浏览器处理的此类事件的类型。</p>
+</div>
+
+<p> </p>
+
+<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p>
+
+<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p>
+
+<p> </p>
+
+<p>事件和事件处理成为Web编程的核心，添加了浏览器的语言，伴随着浏览器从呈现和加载页面呈现到事件驱动、基于回流的页面渲染的转换结构的切换。最初，浏览器等待，直到它们接收到与页面相关的所有资源，解析、处理、绘制并向用户呈现页面。显示的页面保持不变，直到浏览器请求一个新页面为止。随着动态页面呈现的改变，浏览器在处理、绘制、呈现内容和等待一些新的事件触发之间不断循环。事件触发器包括完成网络上资源的加载，例如，下载一个现在可以在屏幕上绘制的图像，完成由浏览器解析资源的过程，例如处理页面的HTML内容、用户与页面内容的交互，例如单击按钮。道格拉斯克罗克福德的几个讲座有效地解释了这种变化，特别是他说的，一个不方便的API：DOM的理论，解释了原来的浏览器流流量的变化</p>
+
+<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div>
+
+<p>到事件驱动的浏览器。后一种方法将最后一个步骤从单个流变为一个永久循环，在接下来的步骤中，等待和处理新事件的发生。后一种方法的创新允许在资源尚未获得的情况下部分地呈现页面；该方法还允许使用JavaScript驱动的事件驱动操作。（可以从多个渠道获得，包括这一个）。目前，JavaScript代码的所有执行环境都使用事件和事件处理。</p>
+
+<h2 id="事件设计模式">事件设计模式</h2>
+
+<p>事件系统的核心是简单的编程设计模式。模式从一个事件和一个事件的协议开始：</p>
+
+<ul>
+ <li>事件使用的名称字符串，</li>
+ <li>用于表示该事件的关键属性的数据结构的类型，以及</li>
+ <li>将“发出”该事件的JavaScript对象。</li>
+</ul>
+
+<p>该模式的实现</p>
+
+<ul>
+ <li>定义一个JavaScript函数，它作为一个参数，被商定的数据结构，以及</li>
+ <li>使用将发出事件的对象使用名称字符串注册该函数。</li>
+</ul>
+
+<p>该功能称为“听众”或“与名称interchangibly处理”。这一模式可以很容易地使用完全自定义代码，如文章中关于自定义事件的说明所述。这种模式也被现代Web浏览器所使用，它定义了响应用户输入或浏览器活动而发出的许多事件。</p>
+
+<p>现代Web浏览器使用标准化方法跟踪事件模式。浏览器使用的数据结构对于事件的性质，从eventprototype对象派生对象。浏览器使用为功能，将处理这些数据结构的方法称为addEventListener期望作为参数的字符串类型的名称和事件处理函数的注册方法。最后，浏览器定义了大量的对象作为事件发射器，并定义了由对象生成的各种各样的事件类型。</p>
+
+<h2 id="Button_Event_Handler" name="Button_Event_Handler">按钮的事件处理程序演示</h2>
+
+<p>例如，浏览器按钮元素意在发出事件命名为'click'响应鼠标单击或当显示在触摸敏感表面，一个手指单击。我们可以在HTML页面中定义一个按钮：</p>
+
+<pre class="brush: html">&lt;button id="buttonOne"&gt;Click here to emit a 'click' event&lt;/button&gt;</pre>
+
+<p>而且，在JavaScript代码中，我们可以首先定义一个函数来监听“click”事件：</p>
+
+<pre class="brush: js">var example_click_handler = function (ev){
+    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
+    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
+};</pre>
+
+<p>第二，我们使用按钮对象注册我们的函数，无论是在脚本方面，还是使用HTML页面的DOM（文档对象模型）表示：</p>
+
+<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne');
+buttonDOMElement.addEventListener('click', example_click_handler);</pre>
+
+<p>或在HTML页面中添加功能的“onclick”属性的值，虽然这第二种方法通常只用于非常简单的网页。</p>
+
+<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p>
+
+<p>这段代码依赖，有一种叫做“点击”事件，称任何监听协议（或处理）与一个事件对象参数的函数（实际上，在这种情况下，衍生的MouseEvent对象），将使用HTML按钮元素在用户交互。代码没有明显影响到用户的按钮，可以通过将鼠标指针放在HTML按钮，点击鼠标左键，或用手指或手写笔点上面的HTML按钮屏幕互动；当这种情况发生时，该<code>buttonDOMElement</code>  JavaScript对象会调用example_click_handler功能与事件对象作为参数。函数将依次执行程序员选择的任何操作，在这种情况下，打开一个HTML警报对话框。注意，处理程序对‘ev’对象有访问权，因为它作为参数传递；对象有关于事件的信息，特别是事件发生的时间。</p>
+
+<p>作为第二个例子，集成到Web页面中的许多现代JavaScript被封装到事件函数调用中，以确保代码只在HTML被处理并可用于更改或装饰时执行。例如，代码可以附加为：</p>
+
+<pre class="brush: js">var funcInit = function(){
+    // user code goes here and can safetly address all the HTML elements from the page
+    // since the document has successfully been 'loaded'
+}
+document.addEventListener('DOMContentLoaded', funcInit);
+
+</pre>
+
+<p>所以，此代码只会在文档对象发出“DOMContentLoaded“事件因为HTML解析完毕和javascript对象创建代表每个HTML文档的节点执行。注意，在这个例子中，代码甚至没有为函数命名事件参数，因为代码永远不需要使用描述事件的数据结构；相反，代码只需要等待运行，直到事件发生之后。</p>
+
+<p>因此，该模式易于学习和实现。事件的困难来自于学习在现代Web浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处，因为这些代码异步工作，可能会重复运行，但情况略有不同。</p>
+
+<h2 id="值得注意的事件">值得注意的事件</h2>
+
+<p>Web浏览器定义了大量事件，所以列出所有事件是不现实的。事件引用试图维护现代Web浏览器中使用的标准事件列表。</p>
+
+<p>一般来说，我们可以根据事件的对象来区分不同类型的事件，包括：</p>
+
+<ul>
+ <li>窗口window对象，如由于调整浏览器大小，</li>
+ <li>window.screen对象，如由于设备的方向变化，</li>
+ <li>文档document对象，包括页面的加载、修改、用户交互和卸载，</li>
+ <li>DOM（文档对象模型）树中的对象，包括用户交互或修改，</li>
+ <li>XMLHttpRequest对象用于网络的要求，和</li>
+ <li>当媒体流播放器改变状态时，诸如音频audio和视频video等媒体对象。</li>
+</ul>
+
+<p>虽然这个列表目前不完整。</p>
+
+<p>一些值得注意的事件是：</p>
+
+<div class="note">
+<p><strong>Note: </strong>这份清单将需要相关的工作；这项工作正在等待一些关于文件的全球重组工作。这还需要找到在页面加载期间所涉及到的事件的良好解释，如部分讨论在  <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> 或 <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p>
+</div>
+
+<ul>
+ <li>当页面完成渲染时，全局对象窗口window发出一个名为“load”的事件，这意味着所有资源都已下载并执行，以便运行脚本并显示图像，</li>
+ <li>当浏览器窗口window的高度或宽度被用户更改时，全局对象窗口发出一个称为“resize”的事件，</li>
+ <li>DOM文档对象代表了HTML文件发出一个事件被称为”DOMContentLoaded“当文档加载完毕，</li>
+ <li>当鼠标指针位于HTML页面的DOM节点顶部时，当用户按下鼠标按钮时，如div或button的DOM节点对象发出一个名为“click”的事件。</li>
+</ul>
+
+<h2 id="事件对象层次结构">事件对象层次结构</h2>
+
+<p>Web浏览器定义了许多不同类型的事件。每个定义包括，作为数据结构传递给处理函数，一个对象继承自EventPrototype对象。</p>
+
+<p>事件对象类层次结构的部分图是：</p>
+
+<div class="note">
+<p><strong>Note:</strong> 下面的图标是不完整的.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p>
+
+<p>Web API文档包含定义事件对象的页面，该事件对象还包括事件对象已知的DOM事件子类。</p>
+
+<h2 id="文档">文档</h2>
+
+<p>下面是三个链接对MDN（Mozilla开发者网络）网站程序员从事于事件相关的开发是特别有用的：</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> 是 <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>的一部分,</li>
+ <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li>
+ <li>Web API 文档中的 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 对象.</li>
+</ul>
diff --git a/files/zh-cn/web/guide/graphics/index.html b/files/zh-cn/web/guide/graphics/index.html
new file mode 100644
index 0000000000..686f6ff1eb
--- /dev/null
+++ b/files/zh-cn/web/guide/graphics/index.html
@@ -0,0 +1,54 @@
+---
+title: Web 图形开发
+slug: Web/Guide/Graphics
+tags:
+  - 3D
+  - Canvas
+  - HTML5
+  - SVG
+  - WebGL
+  - WebRTC
+  - 图像
+  - 图形
+translation_of: Web/Guide/Graphics
+---
+<p>现代网站和应用需要呈现大量图片。 展示静态签 {{HTMLElement("img")}}，也可以采用 CSS 样式中的 {{cssxref("background-image")}} 属性。与此同时，你也能绘制出动态图像，或者是对图像进行巧妙处理。 这些文章可以帮助你了解如何做到这些事情。</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="2D_图像">2D 图像</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/HTML/Canvas">Canvas</a></dt>
+ <dd>{{HTMLElement("canvas")}}提供了一些使用 JavaScript 来绘制 2D 图像的接口</dd>
+ <dt><a href="/zh-CN/docs/SVG">SVG</a></dt>
+ <dd>可缩放矢量图形 (SVG) 帮助你使用直线，曲线，和其他的几何图形来生成（渲染）图像。通过使用矢量图形，你能够画出任意拉伸也不失真的图像。</dd>
+</dl>
+
+<p><a href="/zh-CN/docs/tag/Graphics">查看全部...</a></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D 图像</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/WebGL">WebGL</a></dt>
+ <dd>开启 WebGL（即 Web 3D 图像 API）历程的指南。这项技术可帮助你在 Web 内容中使用标准的 OpenGL ES。</dd>
+</dl>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="视频" style="line-height: 30px; font-size: 2.14285714285714rem;">视频</h2>
+
+<div></div>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">使用 HTML5 音频（audio）和 视频（video）</a></dt>
+ <dd>在网页中嵌入视频/音频并控制其播放。</dd>
+ <dt><a href="/zh-CN/docs/WebRTC">WebRTC</a></dt>
+ <dd>WebRTC 中的 RTC 代表实时通讯技术，这一技术允许音频/视频数据流在对等的浏览器客户端之间共享。</dd>
+</dl>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/zh-cn/web/guide/html/content_categories/index.html b/files/zh-cn/web/guide/html/content_categories/index.html
new file mode 100644
index 0000000000..c32303add4
--- /dev/null
+++ b/files/zh-cn/web/guide/html/content_categories/index.html
@@ -0,0 +1,162 @@
+---
+title: 内容分类
+slug: Web/Guide/HTML/Content_categories
+tags:
+  - HTML5
+  - 草稿
+  - 高级
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">每一个HTML元素都必须遵循定义了它可以包含哪一类内容的规则。 这些规则被归类为几个常见的元素内容模型（content model）。每个HTML元素都属于0个、1 个或多个内容模型，每个模型都有一些规则使得元素中的内容必须遵循一个HTML规范文档( HTML-conformant document)。</span></p>
+
+<p>以下是三种类型的内容分类：</p>
+
+<ul>
+ <li>主内容类，描述了很多元素共享的内容规范；</li>
+ <li>表单相关的内容类，描述了表单相关元素共有的内容规范；</li>
+ <li>特殊内容类，描述了仅仅在某些特殊元素上才需要遵守的内容规范，通常这些元素都有特殊的上下文关系。</li>
+</ul>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="主内容类（Main_content_categories）">主内容类（Main content categories）</h2>
+
+<h3 id="元数据内容（Metadata_content）">元数据内容（Metadata content）</h3>
+
+<p>此类元素 修改文档其余部分的陈述或者行为，建立与其他文档的链接，或者传达其他外带信息。</p>
+
+<p>属于这一类的元素有：{{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} and {{HTMLElement("title")}}.</p>
+
+<h3 id="流式元素（Flow_content）"><a name="flow_content">流式元素（Flow content）</a></h3>
+
+<p>此类元素通常包含 文本或植入的内容。此类元素有： {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.</p>
+
+<p>属于此类的少数其他元素（仅限于某种特殊情形，这些元素才会属于此类）：</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, 仅限于它作为{{HTMLElement("map")}}的子节点的情形</li>
+ <li>{{HTMLElement("link")}}, 仅限于<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li>
+ <li>{{HTMLElement("meta")}}, 仅限于<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li>
+ <li>{{HTMLElement("style")}}, 仅限于 {{htmlattrxref("scoped","style")}}属性存在的情形</li>
+</ul>
+
+<h3 id="章节元素（Sectioning_content）">章节元素（Sectioning content）</h3>
+
+<p>隶属于分节内容模型的元素 在当前的大纲中创建一个<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">分节</a>，此分节将定义{{HTMLElement("header")}}元素、{{HTMLElement("footer")}} 元素和标题元素（<a href="#Heading_content" title="#heading content">heading content</a>）的范围。</p>
+
+<p>属于此类的元素有： {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} and {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p>注意：不要将本内容模型与<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> category 混淆，<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> category 的作用是把它的内容与常规的大纲隔离。</p>
+</div>
+
+<h3 id="标题元素（Heading_content）">标题元素（Heading content）</h3>
+
+<p>标题内容 定义了分节的标题，而这个分节可能由一个明确的分节内容元素直接标记，也可能由标题本身隐式地定义。</p>
+
+<p>属于此分类的元素有： {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} and {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p>注意：尽管{{HTMLElement("header")}}可能包含一些标题内容，但{{HTMLElement("header")}}并不是标题内容本身。</p>
+</div>
+
+<h3 id="短语元素（Phrasing_content）">短语元素（Phrasing content）</h3>
+
+<p>短语元素（Phrasing content） 规定文本和它包含的标记。 一些Phrasing content就构成了段落.</p>
+
+<p>属于此类的元素有： {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} 和 plain text (仅当所包含的内容不完全为空字符的时候).</p>
+
+<p>一些其他的元素也属于这个分类，但是只有当如下特殊情况时才会实现:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, 当它仅包含 phrasing content 时</li>
+ <li>{{HTMLElement("area")}}, 当它为{{HTMLElement("map")}} 元素的子元素时</li>
+ <li>{{HTMLElement("del")}}, 当它仅包含 phrasing content 时</li>
+ <li>{{HTMLElement("ins")}}, 当它仅包含 phrasing content 时</li>
+ <li>{{HTMLElement("link")}}, 如果<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li>
+ <li>{{HTMLElement("map")}}, 当它仅包含 phrasing content 时</li>
+ <li>{{HTMLElement("meta")}},如果<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li>
+</ul>
+
+<h3 id="嵌入元素（Embedded_content）">嵌入元素（Embedded content）</h3>
+
+<p>Embedded content输入另一个资源或者将来自另一种标记语言或命名空间的内容插入到文档中。</p>
+
+<p>属于此类的元素有：{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="交互元素（Interactive_content）"><a name="interactive_content">交互元素（Interactive content）</a></h3>
+
+<p>交互式内容包含为用户交互而特别设计的元素。 </p>
+
+<p><span style="line-height: 1.5;">属于此类的元素有：{{HTMLElement("a")}}，{{HTMLElement("button")}}，{{HTMLElement("details")}}，{{HTMLElement("embed")}}，{{HTMLElement("iframe")}}，</span> {{deprecated_inline()}}<span style="line-height: 1.5;">{{HTMLElement("keygen")}}，{{HTMLElement("label")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}。</span></p>
+
+<p>仅在特殊情形下才会属于此类的元素有:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, 若{{htmlattrxref("controls", "audio")}}属性存在</li>
+ <li>{{HTMLElement("img")}}, 若{{htmlattrxref("usemap", "img")}}属性存在</li>
+ <li>{{HTMLElement("input")}}, 若{{htmlattrxref("type", "input")}}属性不处于隐藏（hidden）状态</li>
+ <li>{{HTMLElement("menu")}}, 若{{htmlattrxref("type", "menu")}}属性处于工具栏（toolbar）状态</li>
+ <li>{{HTMLElement("object")}}, 若{{htmlattrxref("usemap", "object")}}属性存在</li>
+ <li>{{HTMLElement("video")}}, 若{{htmlattrxref("controls", "video")}}属性存在</li>
+</ul>
+
+<h3 id="表单相关内容（Form-associated_content）">表单相关内容（Form-associated content）</h3>
+
+<p>表单相关的内容 包含 拥有表单父节点（exposed by a <strong>form</strong> attribute）的元素，一个表单父节点可以是{{HTMLElement("form")}}元素，也可以是其id在表单属性中被指定了的元素。（Form-associated content comprises elements that have a form owner, exposed by a <strong>form</strong> attribute. A form owner is either the containing {{HTMLElement("form")}} element or the element whose id is specified in the <strong>form</strong> attribute.）</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p> 此类包含了几个子类：</p>
+
+<dl>
+ <dt><a name="Form_listed">可列举的元素（listed）</a></dt>
+ <dd>在 <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> 和 fieldset.elements IDL collections中列举出的元素. 包括 {{HTMLElement("button")}}，{{HTMLElement("fieldset")}}，{{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("object")}}，{{HTMLElement("output")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}。</dd>
+ <dt><a name="Form_labelable">可标签的元素（labelable）</a></dt>
+ <dd>和 {{HTMLElement("label")}} 相关联的元素。包括 {{HTMLElement("button")}}，{{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("meter")}}，{{HTMLElement("output")}}，{{HTMLElement("progress")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}。</dd>
+ <dt><a name="Form_submittable">可提交的元素（submittable）</a></dt>
+ <dd>包括当表单提交时可以用来组成表单数据的元素。 包括 {{HTMLElement("button")}}，{{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("object")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">可重置的元素（resettable）</a></dt>
+ <dd>当表单重置时会被重置的元素。包括 {{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("output")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}.</dd>
+ <dt>
+ <h2 id="二级分类">二级分类</h2>
+
+ <p>这里还有一些你需要注意的二级分类元素。</p>
+
+ <h3 id="支持脚本元素">支持脚本元素</h3>
+
+ <p>支持脚本的元素不会直接渲染输出在页面文档中。当然，他们被用来存放脚本代码，脚本代码所要用到的数据。</p>
+
+ <p>这些支持脚本的元素有:</p>
+ {{HTMLElement("script")}} {{HTMLElement("template")}}</dt>
+</dl>
+
+<h2 id="透明内容模型（Transparent_content_model）">透明内容模型（Transparent content model）</h2>
+
+<p>如果一个元素拥有 transparent content mode， 即使将透明内容更换为子元素，其内容必须由合法的HTML5元素组成。</p>
+
+<p>例如，{{HTMLElement("del")}} 和 {{HTMLELement("ins")}} 是透明的：</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-evident&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>如果这两个元素被移除，这个程序段依然是合法的。</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
+</pre>
+
+<h2 id="Other_content_models">Other content models</h2>
+
+<p>Sectioning root.</p>
diff --git a/files/zh-cn/web/guide/html/content_editable/index.html b/files/zh-cn/web/guide/html/content_editable/index.html
new file mode 100644
index 0000000000..00f44d6fd7
--- /dev/null
+++ b/files/zh-cn/web/guide/html/content_editable/index.html
@@ -0,0 +1,219 @@
+---
+title: Content Editable
+slug: Web/Guide/HTML/Content_Editable
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。本文提供了有关此功能的一些信息。 </span></p>
+
+<h2 id="它是如何工作的？">它是如何工作的？</h2>
+
+<p>为了使元素可编辑，你所要做的就是在html标签上设置<em>"contenteditable"</em>属性，它几乎支持所有的HTML元素。</p>
+
+<p>下面是一个简单的示例，创建一个<em>"contenteditable"</em>属性为<em>"true"</em>的div元素，用户就可以编辑其内容了。</p>
+
+<pre class="brush: html notranslate">&lt;div contenteditable="true"&gt;
+  This text can be edited by the user.
+&lt;/div&gt;</pre>
+
+<p>这是上面代码运行的结果：</p>
+
+<p>{{ EmbedLiveSample('How_does_it_work') }}</p>
+
+<h2 id="执行命令设置可编辑区域">执行命令设置可编辑区域</h2>
+
+<p>当一个HTML元素的<code>contenteditable</code>属性被设置为<code>true</code>时，{{ domxref("document.execCommand()") }} 方法便可使用。通过该方法，你可以运行相关<a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> 来操作可编辑区域的内容。其中大多数命令都会影响文档的选择，例如，给文本提供一个样式(加粗，倾斜等)、插入新元素(如增加一个链接)、影响一整行文本(如缩进排版)。当使用<code>contentEditable</code>后，调用<code>execCommand()</code>方法将影响当前处于活动状态的可编辑元素</p>
+
+<h2 id="在标记生成上的不同点">在标记生成上的不同点</h2>
+
+<p>因为各个浏览器在标记生成上的不同，因此跨浏览器使用 <code>contenteditable</code> 一直以来都是痛点，例如一些看起来十分简单的事情，如： 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时，不同主流浏览器对此有不同处理(Firefox 插入{{htmlelement("br")}}、IE/Opera将使用{{htmlelement("p")}}、 Chrome/Safari 将使用 {{htmlelement("div")}}）</p>
+
+<p>幸运的是在现代浏览器中，这些不同都趋于一致了。截止到<a href="/en-US/docs/Mozilla/Firefox/Releases/60">Firefox 60</a>，火狐开始使用{{htmlelement("div")}}元素来包裹新生成的文本行，以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致</p>
+
+<div class="note">
+<p><strong>注意</strong>: Internet Explorer使用 {{htmlelement("p")}} 元素而不是 <code>&lt;div&gt;</code>.</p>
+</div>
+
+<p>如果你想使用不同的方式创建新的段落,上面所有浏览器都支持{{domxref("document.execCommand")}}方法，该方法提供的 <code>defaultParagraphSeparator</code> 命令能够让你以不同的方式创建新的段落例如, 使用 {{htmlelement("p")}} 元素:</p>
+
+<pre class="notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>另外，从FireFox 55开始，火狐还为<code>defaultParagraphSeparator</code>支持非标准化参数<code>br</code>。如果你的Web应用程序通过检查浏览器是否为火狐来支持旧的FireFox行为，这将非常有用。但不幸的是，你并没有多少时间来为新的Firefox修复你的Web应用，你可以在初始化<code>designMode</code>和<code>contenteditable</code>时插入下面的代码来恢复较早的Firefox行为：</p>
+
+<pre class="notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"br"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="安全性">安全性</h2>
+
+<p>出于安全原因，火狐浏览器默认不允许JavaScript代码使用剪贴板相关特性（如复制、粘贴等）。你可以在<code>about:config</code>中设置如下选项来启用它们:</p>
+
+<pre class="code notranslate">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<h2 id="例子：一个简单但完整的富文本编辑器">例子：一个简单但完整的富文本编辑器</h2>
+
+<div style="height: 500px; width: auto; overflow: auto;">
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Rich Text Editor&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+    document.execCommand("defaultParagraphSeparator", false, "div");
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Print&lt;\/title&gt;&lt;\/head&gt;&lt;body onload=\"print();\"&gt;" + oDoc.innerHTML + "&lt;\/body&gt;&lt;\/html&gt;");
+  oPrntWin.document.close();
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initDoc();"&gt;
+&lt;form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"&gt;
+&lt;input type="hidden" name="myDoc"&gt;
+&lt;div id="toolBar1"&gt;
+&lt;select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option selected&gt;- formatting -&lt;/option&gt;
+&lt;option value="h1"&gt;Title 1 &amp;lt;h1&amp;gt;&lt;/option&gt;
+&lt;option value="h2"&gt;Title 2 &amp;lt;h2&amp;gt;&lt;/option&gt;
+&lt;option value="h3"&gt;Title 3 &amp;lt;h3&amp;gt;&lt;/option&gt;
+&lt;option value="h4"&gt;Title 4 &amp;lt;h4&amp;gt;&lt;/option&gt;
+&lt;option value="h5"&gt;Title 5 &amp;lt;h5&amp;gt;&lt;/option&gt;
+&lt;option value="h6"&gt;Subtitle &amp;lt;h6&amp;gt;&lt;/option&gt;
+&lt;option value="p"&gt;Paragraph &amp;lt;p&amp;gt;&lt;/option&gt;
+&lt;option value="pre"&gt;Preformatted &amp;lt;pre&amp;gt;&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- font -&lt;/option&gt;
+&lt;option&gt;Arial&lt;/option&gt;
+&lt;option&gt;Arial Black&lt;/option&gt;
+&lt;option&gt;Courier New&lt;/option&gt;
+&lt;option&gt;Times New Roman&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- size -&lt;/option&gt;
+&lt;option value="1"&gt;Very small&lt;/option&gt;
+&lt;option value="2"&gt;A bit small&lt;/option&gt;
+&lt;option value="3"&gt;Normal&lt;/option&gt;
+&lt;option value="4"&gt;Medium-large&lt;/option&gt;
+&lt;option value="5"&gt;Big&lt;/option&gt;
+&lt;option value="6"&gt;Very big&lt;/option&gt;
+&lt;option value="7"&gt;Maximum&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- color -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="blue"&gt;Blue&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- background -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+&lt;div id="toolBar2"&gt;
+&lt;img class="intLink" title="Clean" onclick="if(validateMode()&amp;&amp;confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /&gt;
+&lt;img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"&gt;
+&lt;img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /&gt;
+&lt;img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /&gt;
+&lt;img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="&gt;
+&lt;img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /&gt;
+&lt;img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /&gt;
+&lt;img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /&gt;
+&lt;img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /&gt;
+&lt;img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /&gt;
+&lt;img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /&gt;
+&lt;img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /&gt;
+&lt;img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /&gt;
+&lt;img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /&gt;
+&lt;img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /&gt;
+&lt;img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /&gt;
+&lt;img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&amp;&amp;sLnk!=''&amp;&amp;sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /&gt;
+&lt;img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /&gt;
+&lt;img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /&gt;
+&lt;img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /&gt;
+&lt;/div&gt;
+&lt;div id="textBox" contenteditable="true"&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;/div&gt;
+&lt;p id="editMode"&gt;&lt;input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /&gt; &lt;label for="switchBox"&gt;Show HTML&lt;/label&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<div class="note"><strong>注意:</strong> 如果你想知道如何标准的在你的页面中创建和插入编辑器，请查阅 <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">更多完整的富文本编辑器例子</a>.</div>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>全局属性 {{htmlattrxref("contenteditable")}} </li>
+ <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (支持脚本的文本编辑器组件)</li>
+ <li>{{cssxref("caret-color")}}, 用来设置文本插入光标的颜色</li>
+</ul>
diff --git a/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html b/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html
new file mode 100644
index 0000000000..f237e94b61
--- /dev/null
+++ b/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html
@@ -0,0 +1,272 @@
+---
+title: Mozilla中的富文本编辑器
+slug: Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla
+tags:
+  - 富文本
+  - 指南
+translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
+---
+<p>Mozilla 1.3 实现了微软 IE 浏览器的 designMode 特性。Mozilla 1.3 的富文本编辑器支持的 designMode 特性能将 HTML 文档转换为富文本编辑器。从 Firefox 3 开始，Mozilla 也支持 IE 的 contentEditable 属性，该属性允许将任意元素设置为可编辑或不可编辑的（后者可阻止在可编辑环境中，对固定元素的改变）。</p>
+
+<h3 id="配置富文本编辑">配置富文本编辑</h3>
+
+<p>富文本编辑通过设置文档的 "designMode" 属性为 "On" 来初始化。一旦 <code>designMode </code>设置为 "On" ，该文档即成为用户能够按使用 textarea 方式操作的富文本编辑区域。复制和粘贴等最基础的键盘操作可用，而其它命令则需通过站点实现。</p>
+
+<p>类似地，将 "contentEditable" 属性设置为 "true" 后，用户能够将文档中的独立元素设置为可编辑的。</p>
+
+<h3 id="执行命令">执行命令</h3>
+
+<p>当 HTML 文档切换至 designMode 时，文档对象将暴露出 "document.execCommand" 方法，允许用户运行命令以操作可编辑区域的内容。多数命令影响文档的选中区域（加粗、斜体等），而其余命令则可插入新元素（添加新行）或影响整行（缩进）。当使用 contentEditable 时，调用 execCommand 将影响当前活跃的可编辑元素。</p>
+
+<h3 id="与_IE_区别">与 IE 区别</h3>
+
+<p>Mozilla 与 IE 在 designMode 下的一个显著区别在于可编辑区域中所生成的代码。在 IE 中使用 em 与 i 等 HTML 标签，而 Mozilla 则默认生成带有内联样式规则的 span 标签。可通过 <code>styleWithCSS </code>命令以在 CSS 与 HTML 标记中切换。</p>
+
+<p><strong>Figure 1 : 生成 HTML 的区别</strong></p>
+
+<p>Mozilla:</p>
+
+<pre><code>&lt;span style="font-weight: bold;"&gt;I love geckos.&lt;/span&gt;
+&lt;span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;"&gt;Dinosaurs are big.&lt;/span&gt;</code></pre>
+
+<p>Internet Explorer:</p>
+
+<pre><code>&lt;STRONG&gt;I love geckos.&lt;/STRONG&gt;
+&lt;STRONG&gt;&lt;EM&gt;&lt;U&gt;Dinosaurs are big.&lt;/U&gt;&lt;/EM&gt;&lt;/STRONG&gt;</code>
+</pre>
+
+<p>Mozilla 与 IE 的另一个区别是在与 designMode 结合使用的场景中，其访问 iframe 中文档对象的方式。Mozilla 使用了 W3C 的标准方式，即 <code>IFrameElement.<a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-38538621">contentDocument</a>，而</code> IE 则使用了 <code>IFrameElement.document</code>.</p>
+
+<p><em><strong>DevEdge</strong></em> 提供了一个 JavaScript 辅助工具类，<code><a href="https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode</a>，</code>它封装了 IE 与 Mozilla 之间的 designMode 差异特性。</p>
+
+<p><br>
+ <strong>禁用事件处理</strong></p>
+
+<p>另一额外的区别在于，Mozilla 中一旦切换至 designMode，那么该文档上绑定的全部事件将被禁用。在 designMode 关闭后（如在 Mozilla 1.5 中可用），事件重新可用。</p>
+
+<p>在 <a href="https://developer.mozilla.org/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a> 中的 <a href="https://developer.mozilla.org/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> 章节可查看更多信息。</p>
+
+<h3 id="示例">示例</h3>
+
+<h4 id="示例_1">示例 1</h4>
+
+<p>第一个示例中，将 HTML 文档中的 <code>designMode </code>设置为 "On"。在 Mozilla 1.3 中这将使整篇文档均可编辑。但在 IE 中并不支持通过 JavaScript 改变文档的 <code>designMode</code> 特性。需要兼容 IE 时，body 标签中的 <code>contentEditable</code> 属性需要设置为 "true"。</p>
+
+<p><strong>Figure 2 : 第一个示例</strong></p>
+
+<pre><code>HTML:
+&lt;body contentEditable="true" onload="load()"&gt;
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}</code></pre>
+
+<h4 id="示例_2">示例 2</h4>
+
+<p>第二个示例是一个支持文本加粗、斜体、下划线，以及添加链接、改变文本颜色等特性的富文本编辑页面。示例页面带有一个作为富文本编辑区域的 iframe 区域，以及用于实现基础编辑命令的加粗、斜体、文本颜色等编辑元素。</p>
+
+<p><strong>Figure 3 : 配置富文本编辑</strong></p>
+
+<pre><code>HTML:
+&lt;body onload="load()"&gt;
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+//获取对象
+function getIFrameDocument(aID){
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}</code>
+</pre>
+
+<p>该示例包含了 <code>doRichEditCommand</code> 函数以简化对 iframe 的命令操作，并保持 HTML 代码的整洁。执行所需命令的函数使用了 <code>execCommand()</code> 并将焦点设回可编辑文档，以避免点击按钮等操作时的焦点设置打断编辑流程。</p>
+
+<p><strong>Figure 4 : 执行富文本编辑命令</strong></p>
+
+<pre><code>HTML:
+&lt;button onclick="doRichEditCommand('bold')" style="font-weight:bold;"&gt;B&lt;/button&gt;
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}</code></pre>
+
+<h3 id="示例：一个简易但完整的富文本编辑器">示例：一个简易但完整的富文本编辑器</h3>
+
+<pre><code>&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Rich Text Editor&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Print&lt;\/title&gt;&lt;\/head&gt;&lt;body onload=\"print();\"&gt;" + oDoc.innerHTML + "&lt;\/body&gt;&lt;\/html&gt;");
+  oPrntWin.document.close();
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initDoc();"&gt;
+&lt;form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"&gt;
+&lt;input type="hidden" name="myDoc"&gt;
+&lt;div id="toolBar1"&gt;
+&lt;select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option selected&gt;- formatting -&lt;/option&gt;
+&lt;option value="h1"&gt;Title 1 &amp;lt;h1&amp;gt;&lt;/option&gt;
+&lt;option value="h2"&gt;Title 2 &amp;lt;h2&amp;gt;&lt;/option&gt;
+&lt;option value="h3"&gt;Title 3 &amp;lt;h3&amp;gt;&lt;/option&gt;
+&lt;option value="h4"&gt;Title 4 &amp;lt;h4&amp;gt;&lt;/option&gt;
+&lt;option value="h5"&gt;Title 5 &amp;lt;h5&amp;gt;&lt;/option&gt;
+&lt;option value="h6"&gt;Subtitle &amp;lt;h6&amp;gt;&lt;/option&gt;
+&lt;option value="p"&gt;Paragraph &amp;lt;p&amp;gt;&lt;/option&gt;
+&lt;option value="pre"&gt;Preformatted &amp;lt;pre&amp;gt;&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- font -&lt;/option&gt;
+&lt;option&gt;Arial&lt;/option&gt;
+&lt;option&gt;Arial Black&lt;/option&gt;
+&lt;option&gt;Courier New&lt;/option&gt;
+&lt;option&gt;Times New Roman&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- size -&lt;/option&gt;
+&lt;option value="1"&gt;Very small&lt;/option&gt;
+&lt;option value="2"&gt;A bit small&lt;/option&gt;
+&lt;option value="3"&gt;Normal&lt;/option&gt;
+&lt;option value="4"&gt;Medium-large&lt;/option&gt;
+&lt;option value="5"&gt;Big&lt;/option&gt;
+&lt;option value="6"&gt;Very big&lt;/option&gt;
+&lt;option value="7"&gt;Maximum&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- color -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="blue"&gt;Blue&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- background -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+&lt;div id="toolBar2"&gt;
+&lt;img class="intLink" title="Clean" onclick="if(validateMode()&amp;&amp;confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /&gt;
+&lt;img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"&gt;
+&lt;img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /&gt;
+&lt;img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /&gt;
+&lt;img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="&gt;
+&lt;img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /&gt;
+&lt;img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /&gt;
+&lt;img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /&gt;
+&lt;img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /&gt;
+&lt;img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /&gt;
+&lt;img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /&gt;
+&lt;img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /&gt;
+&lt;img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /&gt;
+&lt;img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /&gt;
+&lt;img class="intLink" title="Add indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /&gt;
+&lt;img class="intLink" title="Delete indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /&gt;
+&lt;img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&amp;&amp;sLnk!=''&amp;&amp;sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /&gt;
+&lt;img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /&gt;
+&lt;img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /&gt;
+&lt;img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /&gt;
+&lt;/div&gt;
+&lt;div id="textBox" contenteditable="true"&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;/div&gt;
+&lt;p id="editMode"&gt;&lt;input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /&gt; &lt;label for="switchBox"&gt;Show HTML&lt;/label&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+
+
+<p><strong>注意：</strong> 如果你想查看如何将创建与插入编辑器至页面的流程标准化的内容，请查看 <a href="https://developer.mozilla.org/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</p>
+
+<h3 id="相关资源">相关资源</h3>
+
+<ul>
+ <li><a href="http://mozilla.org/editor/midas-spec.html">mozilla.org's rich-text editing Specification</a></li>
+ <li><a href="http://mozilla.org/editor/midasdemo/">mozilla.org's rich-text editing Demo</a></li>
+ <li><a href="http://www.mozilla.org/editor/ie2midas.html">Converting an app using document.designMode from IE to Mozilla at mozilla.org</a></li>
+ <li><code><a href="/en-US/docs/Web/API/Document/designMode">designMode</a></code></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li>
+ <li><a href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li>
+ <li><a href="https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li>
+ <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/html/email_links/index.html b/files/zh-cn/web/guide/html/email_links/index.html
new file mode 100644
index 0000000000..3a020fcbee
--- /dev/null
+++ b/files/zh-cn/web/guide/html/email_links/index.html
@@ -0,0 +1,85 @@
+---
+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
+---
+<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/web/guide/html/forms_in_html/index.html b/files/zh-cn/web/guide/html/forms_in_html/index.html
new file mode 100644
index 0000000000..24a27db5b5
--- /dev/null
+++ b/files/zh-cn/web/guide/html/forms_in_html/index.html
@@ -0,0 +1,144 @@
+---
+title: HTML 中的表单
+slug: Web/Guide/HTML/Forms_in_HTML
+tags:
+  - HTML5
+  - HTML5 form updates
+  - form
+translation_of: Learn/HTML/Forms/HTML5_updates
+---
+<div>HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。</div>
+
+<div> </div>
+
+<div>本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML表单指南</a>。</div>
+
+<div> </div>
+
+<h2 id="The_input_element" name="The_input_element"><code>&lt;input&gt;</code> 元素</h2>
+
+<p><code>{{HTMLElement("input")}}</code> 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）</p>
+
+<ul>
+ <li><code>search</code>: 这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。</li>
+ <li><code>tel</code>: 这个元素可现为一个编辑电话号码的输入控件。因为电话号码国际化差异非常明显，所以除了换行符会自动从输入中移除，无其他强制性语法。你可以使用如 {{htmlattrxref("pattern", "input")}} 与 {{htmlattrxref("maxlength", "input")}} 等属性来限制输入到控件中的值。</li>
+ <li><code>url</code>: 这个元素呈现为一个编辑<a class="external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/wiki/URL">URL</a> 的输入控件。换行符与首尾的空格将会被自动去除。</li>
+ <li>
+  <p><code>email</code>: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在<span style="font-family: Arial; font-size: medium; line-height: 26px;">扩展的巴科斯范式(ABNF)中的规范：</span><code style="font-size: 14px;">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code><span style="line-height: 1.5em;"> 其中</span><code style="font-size: 14px;">atext</code><span style="line-height: 1.5em;"> 在规范</span><a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3" style="line-height: 1.5em;">RFC 5322 section 3.2.3</a> 中被定义<span style="line-height: 1.5em;">,而</span><code style="font-size: 14px;">ldh-str在规范</code><a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5" style="line-height: 1.5em;">RFC 1034 section 3.5</a> 中被定义。<span style="line-height: 1.5em;">.</span></p>
+
+  <div class="note"><strong>注意:</strong> 若设置{{htmlattrxref("multiple", "input")}}属性，{{HTMLElement("input")}} 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持.</div>
+ </li>
+</ul>
+
+<p> {{HTMLElement("input")}} 元素也拥有一些新的特性。</p>
+
+<ul>
+ <li>{{htmlattrxref("list", "input")}}： {{HTMLElement("datalist")}} 元素的 ID，该元素的内容，{{HTMLElement("option")}} 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。</li>
+ <li>{{htmlattrxref("pattern", "input")}}： 一个正则表达式，用于检查控件的值，能够作用于 {{htmlattrxref("type", "input")}} 值是 <code>text，</code> <code>tel，</code> <code>search，</code> <code>url，</code> 和 <code>email 的 input 元素。</code></li>
+ <li>{{htmlattrxref("form", "input")}}： 一个字符串，用于表明该 input 属于哪个 {{HTMLElement("form")}} 元素。一个 input 只能存在于一个表单中。</li>
+ <li>{{htmlattrxref("formmethod", "input")}}：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖  {{HTMLElement("form")}} 元素上的 {{htmlattrxref("method", "form")}} 特性。只有当 {{htmlattrxref("type", "input")}} 值为 <code>image</code> 或 <code>submit，并且 </code>{{htmlattrxref("form", "input")}} 特性被设置的情况下， {{htmlattrxref("formmethod", "input")}} 才能生效。</li>
+ <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。</li>
+</ul>
+
+<h2 id="text_input">text input</h2>
+
+<dl>
+ <dt> </dt>
+</dl>
+
+<p>这个程序段段定义了一个用户可以输入的一行input。</p>
+
+<pre><code>&lt;form&gt;
+  Enter your Name &lt;input type="text" name="name"&gt;
+&lt;/form&gt;</code></pre>
+
+<h2 id="checkboxes"><strong>checkboxes</strong></h2>
+
+<p>这个程序段允许用户选择多个选项。</p>
+
+<pre><code>&lt;input type="checkbox" name="chk" value="" checked&gt; Do you want the newsletter</code></pre>
+
+<h2 id="The_form_element" name="The_form_element">Radio &lt; input&gt; element</h2>
+
+<pre><code>&lt;form&gt;
+  &lt;input type="radio" name="frequency" value="daily"&gt;Daily&lt;br&gt;
+  &lt;input type="radio" name="frequency" value="weekly"&gt;Weekly&lt;br&gt;
+  &lt;input type="radio" name="frequency" value="monthly"&gt;Monthly&lt;br&gt;
+  &lt;input type="radio" name="frequency" value="yearly"&gt;Yearly
+&lt;/form&gt;</code></pre>
+
+<h2 id="The_form_element" name="The_form_element"><code>&lt;form&gt;</code> 元素</h2>
+
+<p>{{HTMLElement("form")}} 元素有了一个新特性：</p>
+
+<ul>
+ <li>{{htmlattrxref("novalidate", "form")}}：设置了该特性不会在表单提交之前对其进行验证。</li>
+</ul>
+
+<h2 id="The_datalist_element" name="The_datalist_element"><code>&lt;datalist&gt; 元素</code></h2>
+
+<p>{{HTMLElement("datalist")}} 元素会在填写 <span style="line-height: inherit;">{{HTMLElement("input")}} 字段时，显示一列</span><span style="line-height: inherit;"> {{HTMLElement("option")}} 作为提示。</span></p>
+
+<p>你可以使用 {{HTMLElement("input")}} 元素上的<span style="line-height: inherit;"> {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的</span><span style="line-height: inherit;"> {{HTMLElement("datalist")}} 元素做关联。</span></p>
+
+<h2 id="The_output_element" name="The_output_element"><code>&lt;output&gt;</code> 元素</h2>
+
+<p><code>{{HTMLElement("output")}}</code> 元素表示计算的结果。</p>
+
+<p>你可以使用 {{htmlattrxref("for", "output")}} 特性来在 <code>{{HTMLElement("output")}}</code> 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。</p>
+
+<p>{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 <span style="line-height: inherit;">{{HTMLElement("output")}} 元素自定义有效性约束(</span><span style="line-height: 21px;">validity constraints</span><span style="line-height: inherit;">)与错误信息，可以对其使用如下 CSS 伪类：</span><span style="line-height: inherit;">{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，</span><span style="line-height: inherit;">「百分比总数不能超过100</span><span style="line-height: inherit;">」</span><span style="line-height: inherit;">)。</span></p>
+
+<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder 特性</h2>
+
+<p>{{htmlattrxref("placeholder", "input")}} 特性作用于 <code>{{HTMLElement("input")}}</code> 与 <code>{{HTMLElement("textarea")}}</code> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。</p>
+
+<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus 特性</h2>
+
+<p>{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 <code>autofocus</code> 特性，它是一个 Boolean 值。这个特性适用于 <code>{{HTMLElement("input")}}，</code> <code>{{HTMLElement("button")}}，</code> <code>{{HTMLElement("select")}}，与<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"> </font></code><code>{{HTMLElement("textarea")}}</code> 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 <code>hidden，则</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">autofocus</code><span style="line-height: inherit;"> 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。</span></p>
+
+<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM 属性</h2>
+
+<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM 接口除了为 <code>{{HTMLElement("label")}}</code> 元素提供了对应的特性外，还提供了一个额外的属性。 <strong>control</strong> 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。</p>
+
+<h2 id="Constraint_Validation" name="Constraint_Validation">约束验证</h2>
+
+<p>HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，<span style="line-height: inherit;">出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。</span></p>
+
+<p>如果 {{HTMLElement("input")}} 元素设置了<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title 特性，当验证失败时，特性值会显示在提示信息中。如果</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 设置为空字符串，则不会显示提示信息。如果没有设置 </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 </span><code style="font-size: 14px; line-height: inherit;">setCustomValidity()</code><span style="line-height: inherit;"> 方法) 代为显示。</span></p>
+
+<div class="note"><strong>注意：</strong> 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。</div>
+
+<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">约束验证的 HTML 语法</h3>
+
+<p>下列 HTML5 语法中的条目用于为表单数据指定约束。</p>
+
+<ul>
+ <li>{{HTMLElement("input")}}, {{HTMLElement("select")}}， 和 {{HTMLElement("textarea")}} 元素上的 {{htmlattrxref("required", "input")}} 特性，指定必须提供该元素的值。(在 {{HTMLElement("input")}} 元素上， {{htmlattrxref("required", "input")}} 只能与特定的 {{htmlattrxref("type", "input")}} 特性值结合起来生效。)</li>
+ <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("pattern", "input")}} 特性用于限定元素值必须匹配一个特定的正则表达式。</li>
+ <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性限定了能够输入元素的最大与最小值。</li>
+ <li>{{HTMLElement("input")}} 元素的 {{htmlattrxref("step", "input")}} 特性(与 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。</li>
+ <li>{{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素的 {{htmlattrxref("maxlength", "input")}} 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。</li>
+ <li>{{htmlattrxref("type", "input")}} 的 <code>url</code> 与 <code>email</code> 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。</li>
+</ul>
+
+<p>此外，若要阻止对表单进行约束验证，你可以在 <span style="line-height: inherit;">{{HTMLElement("form")}} 上设置</span><span style="line-height: inherit;"> </span><span style="line-height: inherit;">{{htmlattrxref("novalidate", "form")}} 特性，或在 </span><span style="line-height: inherit;">{{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 </span><span style="line-height: inherit;">{{htmlattrxref("type", "input")}} 是 </span><code style="font-size: 14px; line-height: inherit;">submit</code><span style="line-height: inherit;"> 或 </span><code style="font-size: 14px; line-height: inherit;">image</code><span style="line-height: inherit;">)上设置 </span><span style="line-height: inherit;">{{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。</span></p>
+
+<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">约束验证 API</h3>
+
+<p>下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> 对象上的 <code>checkValidity()</code> 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。</li>
+ <li>在 <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">表单相关元素</a>上：
+  <ul>
+   <li><code>willValidate</code> 属性，如果元素的约束没有被符合则值为 false。</li>
+   <li><code>validity</code> 属性，是一个 <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。</li>
+   <li><code>validationMessage</code> 属性，用于描述与元素相关约束的失败信息。</li>
+   <li><code>checkValidity()</code> 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。</li>
+   <li><code>setCustomValidity()</code> 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。</li>
+  </ul>
+ </li>
+</ul>
+
+<div>{{HTML5ArticleTOC}}</div>
diff --git a/files/zh-cn/web/guide/html/html/index.html b/files/zh-cn/web/guide/html/html/index.html
new file mode 100644
index 0000000000..ee911ca9a1
--- /dev/null
+++ b/files/zh-cn/web/guide/html/html/index.html
@@ -0,0 +1,181 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML
+tags:
+  - HTML
+  - HTML5
+  - Web
+  - Web 开发
+  - 帮助
+  - 指南
+  - 综述
+---
+<div class="callout-box">
+<div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">HTML5 演示</div>
+
+<p>展示了实战中的最新 HTML 技术的 <a href="/zh-CN/demos/tag/tech:html5" title="demos/tag/tech:css3/">演示汇总</a>。</p>
+
+<p><a href="/zh-CN/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="default internal" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p>
+</div>
+
+<p><span class="seoSummary"><strong>HTML5</strong> 是 <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新演进版本。 </span>这个术语代表了两个不同的概念：</p>
+
+<p><span class="seoSummary">它是</span><span style="line-height: 1.5;">一个新的 HTML </span><em>语言</em><span style="line-height: 1.5;">版本</span><span style="line-height: 1.5;">包含了新的元素，属性和行为，</span><span class="seoSummary" style="line-height: 1.5;">同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。</span><span style="line-height: 1.5;"> 这套技术往往被称作 </span><em>HTML5 和它的朋友们，</em><span style="line-height: 1.5;">通常简称为 </span><em>HTML5</em><span style="line-height: 1.5;">。</span></p>
+
+<p>从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。</p>
+
+<ul>
+ <li><em>语义</em>：能够让你更恰当地描述你的内容是什么。</li>
+ <li><em>连通性</em>：能够让你和服务器之间通过创新的新技术方法进行通信。</li>
+ <li><em>离线 &amp; 存储</em>：能够让网页在客户端本地存储数据以及更高效地离线运行。</li>
+ <li><em>多媒体</em>：使 video 和 audio 成为了在所有 Web 中的一等公民。</li>
+ <li><em>2D/3D 绘图 &amp; 效果</em>：提供了一个更加分化范围的呈现选择。</li>
+ <li><em>性能 &amp; 集成</em>：提供了非常显著的性能优化和更有效的计算机硬件使用。</li>
+ <li><em>设备访问 Device Access</em>：能够处理各种输入和输出设备。</li>
+ <li><em>样式设计</em>: 让作者们来创作更加复杂的主题吧！</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的节段和外观概要</a></dt>
+ <dd>HTML5 中新的外观概要和节段元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt>
+ <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并能够操作新的多媒体内容。</dd>
+ <dt><a href="/zh-CN/docs/HTML/Forms_in_HTML" title="HTML5 的表单">HTML5 的表单</a></dt>
+ <dd>看一下 HTML5 中对 web 表单的改进：约束确认 API，一些新的属性，{{HTMLElement("input")}} 属性的一些新值 {{htmlattrxref("type", "input")}} 和新的 {{HTMLElement("output")}} 元素。</dd>
+ <dt>新的语义元素</dt>
+ <dd>除了区段，媒体和表单元素之外，众多的新元素，像 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}，也增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd>
+ <dt>{{HTMLElement("iframe")}} 的改进</dt>
+ <dd>使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd>
+ <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt>
+ <dd>允许直接嵌入数学公式。</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt>
+ <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd>
+ <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt>
+ <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd>
+</dl>
+
+<h2 id="连通性" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">连通性</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd>
+ <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt>
+ <dd>允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd>
+ <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd>
+</dl>
+
+<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 &amp; 存储</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源：应用程序缓存</a></dt>
+ <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd>
+ <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt>
+ <dd>Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt>
+ <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd>
+ <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd>
+ <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt>
+ <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd>
+</dl>
+
+<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt>
+ <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd>
+ <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd>
+ <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt>
+ <dd>允许使用，操作计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.</dd>
+ <dt>Track 和 WebVTT</dt>
+ <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd>
+</dl>
+
+<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 &amp; 效果</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt>
+ <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd>
+ <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code>&lt;canvas&gt;</code> 元素的文本 API</a></dt>
+ <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd>
+ <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd>
+ <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd>
+ <dt> </dt>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 &amp; 集成</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd>能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。</dd>
+ <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
+ <dd>允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd>
+ <dt>即时编译的 JavaScript 引擎</dt>
+ <dd>新一代的 JavaScript 引擎功能更强大，性能更杰出。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd>
+ <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">conentEditable 属性：把你的网站改变成 wiki !</a></dt>
+ <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd>
+ <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt>
+ <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd>
+ <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt>
+ <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd>
+ <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt>
+ <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd>
+ <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
+ <dd>允许控制动画渲染以获得更优性能。</dd>
+ <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt>
+ <dd>为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。</dd>
+ <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt>
+ <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd>
+ <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt>
+ <dd>为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。</dd>
+</dl>
+
+<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt>
+ <dd>允许使用和操作计算机的摄像头，并从中存取照片。</dd>
+ <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt>
+ <dd>对用户按下触控屏的事件做出反应的处理程序。</dd>
+ <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt>
+ <dd>让浏览器使用地理位置服务定位用户的位置。</dd>
+ <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt>
+ <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。</dd>
+ <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt>
+ <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd>
+</dl>
+
+<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2>
+
+<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。</p>
+
+<dl>
+ <dt>新的背景样式特性</dt>
+ <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd>
+ <dt>更精美的边框</dt>
+ <dd>现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd>
+ <dt>为你的样式设置动画</dt>
+ <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画，或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。</dd>
+ <dt>排版方面的改进</dt>
+ <dd>作者拥有更高的控制已达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>， 而且也可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。.</dd>
+ <dt>新的展示性布局</dt>
+ <dd>为了提高设计的灵活性，已经有两种新的布局被添加了进来：<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd>
+</dl>
+</div>
+</div>
+
+<p>译注：</p>
+
+<p>被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p>
diff --git a/files/zh-cn/web/guide/html/html5/constraint_validation/index.html b/files/zh-cn/web/guide/html/html5/constraint_validation/index.html
new file mode 100644
index 0000000000..befe2acc41
--- /dev/null
+++ b/files/zh-cn/web/guide/html/html5/constraint_validation/index.html
@@ -0,0 +1,339 @@
+---
+title: 约束验证
+slug: Web/Guide/HTML/HTML5/Constraint_validation
+translation_of: Web/Guide/HTML/HTML5/Constraint_validation
+---
+<p>创建web表单始终是一个复杂的任务. 仅仅组装表单是容易的，但是检查每一个字段的值是否有效并且一致是一件更加困难的事情，而向用户指明错误可能会令人头痛。<a href="/en-US/docs/Web/Guide/HTML/HTML5" title="en/HTML/HTML5">HTML5</a> 引入了表单相关的一些新的机制：为{{ HTMLElement("input") }}元素和强制校验增加了一些新的语义类型，使得在客户端检查表单内容的工作变得容易。基本上，在填写字段时，通常这些约束都会被检查，而不需要额外的JavaScript代码进行校验； 对于更复杂的约束条件的校验可以尝试使用 HTML5 <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">Constraint Validation API</a>.</p>
+
+<div class="note"><strong>Note:</strong> HTML5 Constraint validation doesn't remove the need for validation on the <em>server side</em>. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.</div>
+
+<h2 id="固有和基本的约束">固有和基本的约束</h2>
+
+<p>在 HTML5中，声明基本的约束有两种方式：</p>
+
+<ul>
+ <li>给 {{ HTMLElement("input") }} 元素的  {{ htmlattrxref("type", "input") }} 特性选择最合适的语义化的值，比如，选择 email 类型将会自动创建一个约束用于检查输入的值是否是一个有效的 e-mail 地址。</li>
+ <li>设置验证相关的特性值，允许用一种简单的方式来描述基本的约束，而不必要使用 JavaScript。</li>
+</ul>
+
+<h3 id="语义的_input_类型">语义的 input 类型</h3>
+
+<p> {{ htmlattrxref("type", "input") }} 特性中固有约束：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Input 类型</th>
+   <th scope="col">约束描述</th>
+   <th scope="col">Associated violation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><span style="font-family: courier new;">&lt;input type="URL"&gt;</span></td>
+   <td>值必须是绝对的URL, 即，是下面的某一种:
+    <ul>
+     <li>a valid URI (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li>
+     <li>a valid IRI, without a query component (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li>
+     <li>a valid IRI, with a query component without any unescaped non-ASCII character (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li>
+     <li>a valid IRI, and the character set for the document is UTF-8 or UTF-16 (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li>
+    </ul>
+   </td>
+   <td><strong>Type mismatch </strong>constraint violation</td>
+  </tr>
+  <tr>
+   <td> <span style="font-family: courier new;">&lt;input type="email"&gt;</span></td>
+   <td>The value must follow the <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a> production: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> where:
+    <ul>
+     <li><code>atext</code> is defined in <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, i.e., a US-ASCII letter (<span style="font-family: courier new;">A</span> to <span style="font-family: courier new;">Z</span> and <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), a digit (<span style="font-family: courier new;">0</span> to <span style="font-family: courier new;">9</span>) or one of the following<span style="font-family: courier new;">! # $ % &amp; ' * + - / = ? ` { } | ~ </span>special character,</li>
+     <li><code>ldh-str</code> is defined in <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, i.e., US-ASCII letters, mixed with digits and <span style="font-family: courier new;">-</span> grouped in words separated by a dot (<span style="font-family: courier new;">.</span>).</li>
+    </ul>
+
+    <div class="note"><strong>Note:</strong> if the {{ htmlattrxref("multiple", "input") }} attribute is set, several e-mail addresses can be set, as a comma-separated list, for this input. If any of these do not satisfy the condition described here, the <strong>Type mismatch </strong>constraint violation is triggered.</div>
+   </td>
+   <td><strong>Type mismatch </strong>constraint violation</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. </p>
+
+<h3 id="验证相关的特性（Attribute）">验证相关的特性（Attribute）</h3>
+
+<p>下列特性用于描述基本的约束：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">特性</th>
+   <th scope="col">支持该特性的 Input 类型</th>
+   <th scope="col">可接受的值</th>
+   <th scope="col">约束描述</th>
+   <th scope="col">Associated violation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ htmlattrxref("pattern", "input") }}</td>
+   <td>text, search, url, tel, email, password</td>
+   <td>A <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions">JavaScript regular expression</a> (compiled with the <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> <code title="">global</code>, <code title="">ignoreCase</code>, and <code title="">multiline</code> flags <em>disabled)</em></td>
+   <td>输入的值必须匹配设置的模式。</td>
+   <td><strong>Pattern mismatch</strong> constraint violation</td>
+  </tr>
+  <tr>
+   <td rowspan="3">{{ htmlattrxref("min", "input") }}</td>
+   <td>range, number</td>
+   <td>A valid number</td>
+   <td rowspan="3">输入的值必须大于等于设置的最小值。</td>
+   <td rowspan="3"><strong>Underflow</strong> constraint violation</td>
+  </tr>
+  <tr>
+   <td>date, month, week</td>
+   <td>A valid date</td>
+  </tr>
+  <tr>
+   <td>datetime, datetime-local, time</td>
+   <td>A valid date and time</td>
+  </tr>
+  <tr>
+   <td rowspan="3">{{ htmlattrxref("max", "input") }}</td>
+   <td>range, number</td>
+   <td>A valid number</td>
+   <td rowspan="3">输入的值必须小于等于设置的最大值。</td>
+   <td rowspan="3"><strong>Overflow</strong> constraint violation</td>
+  </tr>
+  <tr>
+   <td>date, month, week</td>
+   <td>A valid date</td>
+  </tr>
+  <tr>
+   <td>datetime, datetime-local, time</td>
+   <td>A valid date and time</td>
+  </tr>
+  <tr>
+   <td>{{ htmlattrxref("required", "input") }}</td>
+   <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elements</td>
+   <td><em>none</em> as it is a Boolean attribute: its presence means <em>true</em>, its absence means <em>false</em></td>
+   <td>There must be a value (if set).</td>
+   <td><strong>Missing</strong> constraint violation</td>
+  </tr>
+  <tr>
+   <td rowspan="5">{{ htmlattrxref("step", "input") }}</td>
+   <td>date</td>
+   <td>An integer number of days</td>
+   <td rowspan="5">Unless the step is set to the <span style="font-family: courier new;">any</span> literal, the value must be <strong>min</strong> + an integral multiple of the step.</td>
+   <td rowspan="5"><strong>Step mismatch </strong>constraint violation</td>
+  </tr>
+  <tr>
+   <td>month</td>
+   <td>An integer number of months</td>
+  </tr>
+  <tr>
+   <td>week</td>
+   <td>An integer number of weeks</td>
+  </tr>
+  <tr>
+   <td>datetime, datetime-local, time</td>
+   <td>An integer number of seconds</td>
+  </tr>
+  <tr>
+   <td>range, number</td>
+   <td>An integer</td>
+  </tr>
+  <tr>
+   <td>{{ htmlattrxref("maxlength", "input") }}</td>
+   <td>text, search, url, tel, email, password; also on the {{ HTMLElement("textarea") }} element</td>
+   <td>An integer length</td>
+   <td>The number of characters (code points) must not exceed the value of the attribute.</td>
+   <td><strong>Too long</strong> constraint violation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constraint_validation_process"><span class="author-g-by4vjwmiwjiydpj7">Constraint validation process</span></h2>
+
+<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p>
+
+<ul>
+ <li>By a call to the checkValidity() method of a form-related <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> interface (<code><a href="/en-US/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> or <code><a href="/en-US/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. (This is typically done by the user-agent when determining which of the <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.)</li>
+ <li>By a call to the checkValidity() function on the <code><a href="/en-US/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface, which is called <em>statically validating the constraints</em>.</li>
+ <li>By submitting the form itself, which is called <em>interactively validating the constraints</em>.</li>
+</ul>
+
+<div class="note"><strong>Note: </strong>
+
+<ul>
+ <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li>
+ <li>Calling the send() method on the <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints.</li>
+</ul>
+</div>
+
+<h2 id="Complex_constraints_using_HTML5_Constraint_API"><span class="author-g-by4vjwmiwjiydpj7">Complex constraints using HTML5 Constraint API</span></h2>
+
+<p><span class="author-g-by4vjwmiwjiydpj7">Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.</span></p>
+
+<p><span class="author-g-by4vjwmiwjiydpj7">Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</span></p>
+
+<h3 id="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3>
+
+<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p>
+
+<div class="note">
+<p><strong>Note: </strong>This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. </p>
+</div>
+
+<p><span style="line-height: 1.5;">As an example, we will add a script checking the constraint validation for this simple form:</span></p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;label for="ZIP"&gt;ZIP : &lt;/label&gt;
+    &lt;input type="text" id="ZIP"&gt;
+    &lt;label for="Country"&gt;Country : &lt;/label&gt;
+    &lt;select id="Country"&gt;
+      &lt;option value="ch"&gt;Switzerland&lt;/option&gt;
+      &lt;option value="fr"&gt;France&lt;/option&gt;
+      &lt;option value="de"&gt;Germany&lt;/option&gt;
+      &lt;option value="nl"&gt;The Netherlands&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;input type="submit" value="Validate"&gt;
+&lt;/form&gt;</pre>
+
+<p>This displays the following form: </p>
+
+<p><label>Postal Code: </label><input> <label>Country: </label><select><option value="ch">Switzerland</option><option value="fr">France</option><option value="de">Germany</option><option value="nl">The Netherlands</option></select></p>
+
+<p>First, we write a function checking the constraint itself:</p>
+
+<pre class="brush: js notranslate">function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Read the country id
+  var country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  var ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+</pre>
+
+<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p>
+
+<pre class="brush: js notranslate">window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}</pre>
+
+<p>You can see a <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation.  </p>
+
+<h3 id="Limiting_the_size_of_a_file_before_its_upload">Limiting the size of a file before its upload</h3>
+
+<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.</p>
+
+<p>Here is the HTML part:</p>
+
+<pre class="brush: html notranslate">&lt;label for="FS"&gt;Select a file smaller than 75 kB : &lt;/label&gt;
+&lt;input type="file" id="FS"&gt;</pre>
+
+<p>This displays:</p>
+
+<p><label>Select a file smaller than 75 kB : </label> <input></p>
+
+
+
+<p>The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p>
+
+<pre class="brush: js notranslate">function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length &gt; 0) {
+     if (files[0].size &gt; 75 * 1024) { // Check the constraint
+       FS.setCustomValidity("The selected file must not be larger than 75 kB");
+       return;
+     }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}</pre>
+
+
+
+<p>Finally we hook the method with the correct event:</p>
+
+<pre class="brush: js notranslate">window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}</pre>
+
+<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p>
+
+<h2 id="Visual_styling_of_constraint_validation"><span class="author-g-by4vjwmiwjiydpj7">Visual styling of constraint validation</span></h2>
+
+<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p>
+
+<h3 id="Controlling_the_look_of_elements">Controlling the look of elements</h3>
+
+<p>The look of elements can be controlled via CSS pseudo-classes.</p>
+
+<h4 id="required_and_optional_CSS_pseudo-classes">:required and :optional CSS pseudo-classes</h4>
+
+<p>The <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> and <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p>
+
+<h4 id="-moz-placeholder_CSS_pseudo-class">:-moz-placeholder CSS pseudo-class</h4>
+
+<p>See <a href="/en-US/docs/Web/CSS/:-moz-placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">:-moz-placeholder</a>.</p>
+
+<h4 id="valid_invalid_CSS_pseudo-classes">:valid :invalid CSS pseudo-classes</h4>
+
+<p>The <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> and <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&amp;redirectslug=CSS%2F%3Ainvalid">:invalid</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&amp;redirectslug=CSS%2FPseudo-classes">pseudo-classes</a> are used to represent &lt;input&gt; elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p>
+
+<h4 id="Default_styles">Default styles</h4>
+
+<h3 id="Controlling_the_text_of_constraints_violation">Controlling the text of constraints violation</h3>
+
+<h4 id="The_x-moz-errormessage_attribute">The x-moz-errormessage attribute</h4>
+
+<p>The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.</p>
+
+<div class="note">
+<p style="margin-left: 40px;">Note: This extension is non-standard.</p>
+</div>
+
+<h4 id="Constraint_APIs_element.setCustomValidity">Constraint API's element.setCustomValidity()</h4>
+
+<p>The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.</p>
+
+<h4 id="Constraint_APIs_ValidityState_object"><span class="author-g-by4vjwmiwjiydpj7">Constraint API's ValidityState object</span></h4>
+
+<p>The DOM <a href="/en-US/docs/Web/API/ValidityState" title="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface represents the <em>validity states</em> that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.</p>
+
+<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3>
+
+<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3>
+
+<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4>
+
+<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4>
+
+<h2 id="Conclusion"><span class="author-g-by4vjwmiwjiydpj7">Conclusion</span></h2>
diff --git a/files/zh-cn/web/guide/html/html5/html5_element_list/index.html b/files/zh-cn/web/guide/html/html5/html5_element_list/index.html
new file mode 100644
index 0000000000..b1b28a4fea
--- /dev/null
+++ b/files/zh-cn/web/guide/html/html5/html5_element_list/index.html
@@ -0,0 +1,590 @@
+---
+title: HTML5 标签列表
+slug: Web/Guide/HTML/HTML5/HTML5_element_list
+tags:
+  - HTML
+  - HTML5
+  - Web
+  - 初学者
+  - 指南
+translation_of: Web/HTML/Element
+---
+<p>这里列出了所有<strong>标准化的 HTML5 元素</strong>，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 <a href="/zh-CN/docs/HTML/Element" title="HTML/Element">HTML 元素索引</a> 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。</p>
+
+<p>符号 <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a> 代表该元素是在 HTML5 中新增的。另外注意，这里列出的其他元素可能在 HTML5 标准中得到了扩充或经过修改。</p>
+
+<h2 id="根元素">根元素</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("html")}}</td>
+   <td>代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="文档元数据">文档元数据</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("head")}}</td>
+   <td>代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("title")}}</td>
+   <td>定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("base")}}</td>
+   <td>定义页面上相对 URL 的基准 URL。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("link")}}</td>
+   <td>用于链接外部资源到该文档。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("meta")}}</td>
+   <td>定义其他 HTML 元素无法描述的元数据。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("style")}}</td>
+   <td>用于内联 CSS。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="脚本">脚本</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("script")}}</td>
+   <td>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("noscript")}}</td>
+   <td>定义当浏览器不支持脚本时显示的替代文字。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("template")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>通过 JavaScript 在运行时实例化内容的容器。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="章节">章节</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("body")}}</td>
+   <td>
+    <div>代表 HTML 文档的内容。在文档中只能有一个 <code>&lt;body&gt;</code> 元素。</div>
+   </td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("section")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义文档中的一个章节。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("nav")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义只包含导航链接的章节。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("article")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义可以独立于内容其余部分的完整独立内容块。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("aside")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-CN/docs/HTML/Element/Heading_Elements"><code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;</code></a></td>
+   <td>标题元素实现了六层文档标题，<code>&lt;h1&gt;</code> 是最大的标题，<code>&lt;h6&gt;</code> 是最小的标题。标题元素简要地描述章节的主题。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("header")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("footer")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("address")}}</td>
+   <td>定义包含联系信息的一个章节。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("main")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义文档中主要或重要的内容。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="组织内容">组织内容</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("p")}}</td>
+   <td>定义一个段落。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("hr")}}</td>
+   <td>代表章节、文章或其他长内容中段落之间的分隔符。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("pre")}}</td>
+   <td>代表其内容已经预先排版过，格式应当保留 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("blockquote")}}</td>
+   <td>代表引用自其他来源的内容。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("ol")}}</td>
+   <td>定义一个有序列表。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("ul")}}</td>
+   <td>定义一个无序列表。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("li")}}</td>
+   <td>定义列表中的一个列表项。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dl")}}</td>
+   <td>定义一个定义列表（一系列术语和其定义）。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dt")}}</td>
+   <td>代表一个由下一个 <code>&lt;dd&gt;</code> 定义的术语。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dd")}}</td>
+   <td>代表出现在它之前术语的定义。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("figure")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一个和文档有关的图例。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("figcaption")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一个图例的说明。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("div")}}</td>
+   <td>代表一个通用的容器，没有特殊含义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="文字形式">文字形式</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("a")}}</td>
+   <td>代表一个链接到其他资源的<em>超链接</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("em")}}</td>
+   <td>代表<em>强调</em> 文字。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("strong")}}</td>
+   <td>代表<em>特别重要</em> 文字。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("small")}}</td>
+   <td>代表<em>注释</em> ，如免责声明、版权声明等，对理解文档不重要。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("s")}}</td>
+   <td>代表<em>不准确或不相关</em> 的内容。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("cite")}}</td>
+   <td>代表<em>作品标题</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("q")}}</td>
+   <td>代表内联的<em>引用</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("dfn")}}</td>
+   <td>代表一个术语包含在其最近祖先内容中的<em>定义</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("abbr")}}</td>
+   <td>代表<em>省略</em> 或<em>缩写</em> ，其完整内容在 <code>title</code> 属性中。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("data")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>关联一个内容的<em>机器可读的等价形式</em> （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("time")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表<em>日期</em> 和<em>时间</em> 值；机器可读的等价形式通过 <code>datetime</code> 属性指定。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("code")}}</td>
+   <td>代表<em>计算机代码</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("var")}}</td>
+   <td>代表<em>代码中的变量</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("samp")}}</td>
+   <td>代表程序或电脑的<em>输出</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("kbd")}}</td>
+   <td>代表<em>用户输入</em> ，一般从键盘输出，但也可以代表其他输入，如语音输入。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td>
+   <td>分别代表<em>下标</em> 和<em>上标</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("i")}}</td>
+   <td>代表一段<em>不同性质</em> 的文字，如技术术语、外文短语等。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("b")}}</td>
+   <td>代表一段<em>需要被关注</em> 的文字。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("u")}}</td>
+   <td>代表一段需要<em>下划线</em>呈现的文本注释，如标记出拼写错误的文字等。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("mark")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一段需要被高亮的<em>引用</em> 文字。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("ruby")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表被<em>ruby 注释</em> 标记的文本，如中文汉字和它的拼音。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("rt")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表<em>ruby 注释</em> ，如中文拼音。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("rp")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表 ruby 注释两边的<em>额外插入文本</em> ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("bdi")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表需要<em>脱离</em> 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("bdo")}}</td>
+   <td>指定子元素的<em>文本方向</em> ，显式地覆盖默认的文本方向。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("span")}}</td>
+   <td>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("br")}}</td>
+   <td>代表<em>换行</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("wbr")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表<em>建议换行 (Word Break Opportunity)</em> ，当文本太长需要换行时将会在此处添加换行符。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="编辑">编辑</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("ins")}}</td>
+   <td>定义<em>增加</em> 到文档的内容。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("del")}}</td>
+   <td>定义从文档<em>移除</em> 的内容。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="嵌入内容">嵌入内容</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("img")}}</td>
+   <td>代表一张<em>图片</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("iframe")}}</td>
+   <td>代表一个<em>内联的框架</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("embed")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一个<em>嵌入</em> 的外部资源，如应用程序或交互内容。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("object")}}</td>
+   <td>代表一个<em>外部资源</em> ，如图片、HTML 子文档、插件等。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("param")}}</td>
+   <td>代表 <code>&lt;object&gt;</code> 元素所指定的插件的<em>参数</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("video")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一段<em>视频</em> 及其视频文件和字幕，并提供了播放视频的用户界面。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("audio")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一段<em>声音</em> ，或<em>音频流</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("source")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>为 <code>&lt;video&gt;</code> 或 <code>&lt;audio&gt;</code> 这类媒体元素指定<em>媒体源</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("track")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>为 <code>&lt;video&gt;</code> 或 <code>&lt;audio&gt;</code> 这类媒体元素指定<em>文本轨道（字幕）</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("canvas")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表<em>位图区域</em> ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("map")}}</td>
+   <td>与 <code>&lt;area&gt;</code> 元素共同定义<em>图像映射</em> 区域。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("area")}}</td>
+   <td>与 <code>&lt;map&gt;</code> 元素共同定义<em>图像映射</em> 区域。</td>
+  </tr>
+  <tr>
+   <td>{{SVGElement("svg")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义一个嵌入式<em>矢量图</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{MathMLElement("math")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>定义一段<em>数学公式</em> 。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="表格">表格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("table")}}</td>
+   <td>定义<em>多维数据</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("caption")}}</td>
+   <td>代表<em>表格的标题</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("colgroup")}}</td>
+   <td>代表表格中一组<em>单列或多列</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("col")}}</td>
+   <td>代表表格中的<em>列</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("tbody")}}</td>
+   <td>代表表格中一块<em>具体数据</em> （表格主体）。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("thead")}}</td>
+   <td>代表表格中一块<em>列标签</em> （表头）。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("tfoot")}}</td>
+   <td>代表表格中一块<em>列摘要</em> （表尾）。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("tr")}}</td>
+   <td>代表表格中的<em>行</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("td")}}</td>
+   <td>代表表格中的<em>单元格</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("th")}}</td>
+   <td>代表表格中的<em>头部单元格</em> 。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="表单">表单</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("form")}}</td>
+   <td>代表一个<em>表单</em> ，由控件组成。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("fieldset")}}</td>
+   <td>代表<em>控件组</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("legend")}}</td>
+   <td>代表 <code>&lt;fieldset&gt;</code> 控件组的<em>标题</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("label")}}</td>
+   <td>代表表单控件的<em>标题</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input")}}</td>
+   <td>代表允许用户编辑数据的<em>数据区</em> （文本框、单选框、复选框等）。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("button")}}</td>
+   <td>代表<em>按钮</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("select")}}</td>
+   <td>代表<em>下拉框</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("datalist")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表提供给其他控件的<em>一组预定义选项</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("optgroup")}}</td>
+   <td>代表一个<em>选项分组</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("option")}}</td>
+   <td>代表一个 <code>&lt;select&gt;</code> 元素或 <code>&lt;datalist&gt;</code> 元素中的一个<em>选项</em></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("textarea")}}</td>
+   <td>代表<em>多行文本框</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("keygen")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一个<em>密钥对生成器</em> 控件。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("output")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表<em>计算值</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("progress")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表<em>进度条</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("meter")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表<em>滑动条</em> 。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="交互元素">交互元素</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Element</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("details")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一个用户可以(点击)获取额外信息或控件的<em>小部件</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("summary")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表 <code>&lt;details&gt;</code> 元素的<em>综述</em> 或<em>标题</em> 。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("menuitem")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表一个用户可以点击的菜单项。</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("menu")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td>
+   <td>代表菜单。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/HTML/HTML5" title="HTML/HTML5">一系列 HTML5 文档</a>。</li>
+ <li><a href="/zh-CN/docs/HTML/Element" title="HTML/Element">所有 HTML 标签的参考</a>，包括 HTML5 中不再有效的元素。</li>
+</ul>
diff --git a/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html b/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html
new file mode 100644
index 0000000000..738663ba9d
--- /dev/null
+++ b/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html
@@ -0,0 +1,168 @@
+---
+title: HTML5 & friends thematic classification
+slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification
+translation_of: Web/Guide/HTML/HTML5
+---
+<p>这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。</p>
+<h2 id="HTML"><span class="author-g-lqfq0qqpckp8p3co">HTML</span></h2>
+<h3 id="Audio_和_video"><span class="author-g-lqfq0qqpckp8p3co">Audio</span><span class="author-g-101xw018h73xu61x"> 和 video</span></h3>
+<div class="ace-line">
+  Firefox 3.5引入对HTML5&lt;audio&gt;和&lt;video&gt;元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：<span class="author-g-101xw018h73xu61x url"><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">在 Firefox 中使用audio和video</a></span></div>
+<div class="ace-line">
+   </div>
+<h3 id="Canvas"><span class="author-g-101xw018h73xu61x">Canvas</span></h3>
+<p>&lt;Canvas&gt;是HTML新元素，可以用于通过脚本（常用 <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。</p>
+<p>参考：</p>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></span> 元素</li>
+  <li><a href="/en/Canvas_tutorial" title="en/Canvas tutorial">Canvas 教程</a></li>
+</ul>
+<h3 id="WebGL_(独立规范)"><span class="author-g-101xw018h73xu61x">WebGL </span>(独立规范)</h3>
+<div class="ace-line">
+  webGL WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 {{ HTMLElement("canvas") }} elements.</div>
+<div class="ace-line" id="magicdomid483">
+  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/WebGL" title="en/WebGL">WebGL</a></span></div>
+<h3 id="Inline_SVG_and_MathML"><span class="author-g-101xw018h73xu61x">Inline SVG and MathML</span></h3>
+<div class="ace-line">
+  HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web.</div>
+<div class="ace-line" id="magicdomid543">
+  <span class="author-g-101xw018h73xu61x">Reference: </span></div>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/SVG" title="en/SVG">SVG</a></span></li>
+  <li><a href="/en/MathML" title="en/MathML">MathML</a></li>
+</ul>
+<h3 id="New_link_relations"><span class="author-g-101xw018h73xu61x">New link relations</span></h3>
+<div class="ace-line" id="magicdomid407">
+  Link relations complement the &lt;a&gt; tag and specify why you're pointing to another page.</div>
+<div class="ace-line">
+  Reference:</div>
+<h3 id="Web_forms"><span class="author-g-101xw018h73xu61x">Web forms</span></h3>
+<div class="ace-line">
+  Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.</div>
+<div class="ace-line" id="magicdomid169">
+  <span class="author-g-101xw018h73xu61x">Reference:</span></div>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms_in_HTML5">Forms in HTML5</a></span></li>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using files from web applications</a></span></li>
+</ul>
+<h3 id="Microformats_(separate_specification)"><span class="author-g-101xw018h73xu61x">Microformats (separate specification)</span></h3>
+<div class="ace-line" id="magicdomid448">
+  Microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself.</div>
+<div class="ace-line">
+  Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Using_microformats" title="en/Using_microformats">Using microformats</a></span></div>
+<div class="ace-line">
+  See also: <a class="external" href="http://www.microformats.org" title="http://www.microformats.org">http://www.microformats.org</a></div>
+<h3 id="Semantic_tags"><span class="author-g-101xw018h73xu61x">Semantic tags</span></h3>
+<div class="ace-line">
+  The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics.</div>
+<div class="ace-line">
+  Reference:</div>
+<ul>
+  <li><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and Outlines of an HTML5 document</a></li>
+  <li>{{ HTMLElement("article") }}</li>
+  <li>{{ HTMLElement("aside") }}</li>
+  <li>{{ HTMLElement("figcaption") }}</li>
+  <li>{{ HTMLElement("figure") }}</li>
+  <li>{{ HTMLElement("footer") }}</li>
+  <li>{{ HTMLElement("header") }}</li>
+  <li>{{ HTMLElement("mark") }}</li>
+  <li>{{ HTMLElement("nav") }}</li>
+  <li>{{ HTMLElement("section") }}</li>
+  <li>{{ HTMLElement("time") }}</li>
+</ul>
+<h2 id="JavaScript_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">JavaScript </span>(separate specifications)</h2>
+<h3 id="Client-Side_Storage"><span class="author-g-101xw018h73xu61x">Client-Side Storage</span></h3>
+<div class="ace-line">
+  Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data.</div>
+<div class="ace-line">
+  Reference:</div>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_the_Application_Cache" title="en/Using_the_Application_Cache">Offline resources in Firefox</a></span></li>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/DOM/Storage" title="en/DOM/Storage">DOM Storage</a></span></li>
+</ul>
+<h3 id="IndexedDB"><span class="author-g-101xw018h73xu61x">IndexedDB</span></h3>
+<div class="ace-line" id="magicdomid361">
+  <a class="external" href="http://dev.w3.org/2006/webapi/IndexedDB/">IndexedDB</a> is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</div>
+<div class="ace-line">
+  Reference: <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB</a></div>
+<h3 id="Web_workers_(separate_specification)"><span class="author-g-101xw018h73xu61x">Web workers </span><span class="author-g-101xw018h73xu61x">(separate specification)</span></h3>
+<div class="ace-line">
+  Workers provide a simple means for web content to run scripts in background threads.  Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.</div>
+<div class="ace-line" id="magicdomid143">
+  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/DOM/Using_web_workers" title="En/Using_web_workers">Using web workers</a></span></div>
+<h3 id="New_events"><span class="author-g-101xw018h73xu61x">New events</span></h3>
+<div class="ace-line">
+  In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</div>
+<div class="ace-line" id="magicdomid161">
+  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></span></div>
+<h3 id="Drag_and_drop"><span class="author-g-101xw018h73xu61x">Drag and drop</span></h3>
+<div class="ace-line">
+  Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</div>
+<div class="ace-line">
+  Reference: <span class="author-g-101xw018h73xu61x url"><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and Drop</a></span></div>
+<h3 id="Protocol_handler"><span class="author-g-101xw018h73xu61x">Protocol handler</span></h3>
+<div class="ace-line">
+  <p>It's fairly common to find web pages link to resources using non-<code>http</code> protocols. You can think of this as a <em>desktop-based</em> protocol handler.</p>
+  <p>Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handler</a></span></p>
+  <h3 id="Geolocation">Geolocation</h3>
+</div>
+<div class="ace-line">
+  The Geolocation API allows the user to provide their location to web applications if they so desire.  For privacy reasons, the user is asked to confirm permission to report location information.</div>
+<div class="ace-line" id="magicdomid294">
+  <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/Using_geolocation" title="En/Using_geolocation">Using geolocation</a></span></div>
+<div class="ace-line">
+  <span class="author-g-101xw018h73xu61x url">See also: <a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="Geolocation Spec">Geolocation Specification</a></span></div>
+<div class="ace-line">
+  <h3 id="Focus_attributes"><span class="author-g-101xw018h73xu61x">Focus attributes</span></h3>
+  <div class="ace-line">
+    The focus atributes let a script understand if an element has the focus of the user and then act accordingly.</div>
+  <div class="ace-line" id="magicdomid231">
+    <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a></span></div>
+  <span class="author-g-101xw018h73xu61x">        </span></div>
+<h2 id="CSS_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">CSS</span> (separate specifications)</h2>
+<h3 id="New_CSS_selectors"><span class="author-g-101xw018h73xu61x">New CSS selectors</span></h3>
+<div class="ace-line">
+  The following page shows the CSS3 support in Firefox and the new elements for HTML5.</div>
+<div class="ace-line" id="magicdomid759">
+  <span class="author-g-101xw018h73xu61x">Ref</span><span class="author-g-101xw018h73xu61x">erence: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Mozilla_CSS_support_chart" title="en/Mozilla_CSS_support_chart">Mozilla CSS support chart</a></span></div>
+<h3 id="Typography">Typography</h3>
+<p>The following pages show some of the typography attributes introduced by CSS3.</p>
+<div class="ace-line">
+  Text wrap:</div>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Word-wrap" title="en/CSS/word-wrap">Word-wrap</a></span></li>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-overflow" title="en/CSS/text-overflow">Text-overflow</a></span></li>
+  <li><a href="/en/CSS/@font-face" title="En/CSS/@font-face"><span class="author-g-101xw018h73xu61x url">@font-face</span></a></li>
+</ul>
+<h3 id="Layout"><span class="author-g-101xw018h73xu61x url">Layout</span></h3>
+<div class="ace-line" id="magicdomid656">
+  <span class="author-g-101xw018h73xu61x">Columns:</span></div>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/CSS3_Columns">CSS3 Multi-columns</a></span></li>
+  <li><a href="/en/Using_flexbox" title="en/Using_flexbox">Flexbox</a></li>
+</ul>
+<h3 id="Visual">Visual</h3>
+<div class="ace-line">
+  The following pages show some of the visual attributes introduced by CSS3.</div>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x">Opacity:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/opacity" title="en/CSS/opacity">opacity</a></span></li>
+  <li><span class="author-g-101xw018h73xu61x">Hue Saturation Color:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/color" title="en/CSS/color">color</a></span></li>
+  <li><span class="author-g-101xw018h73xu61x">Rounded Corners:</span> <a href="/en/CSS/border-radius" title="En/CSS/Border-radius">border-radius</a></li>
+  <li><span class="author-g-101xw018h73xu61x">Gradients:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_gradients" title="en/Using_gradients">Using gradients</a></span></li>
+  <li><span class="author-g-101xw018h73xu61x">Shadows:</span>
+    <ul>
+      <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-shadow" title="en/CSS/text-shadow">text-shadow</a></span></li>
+      <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">box-shadow</a></span></li>
+    </ul>
+  </li>
+  <li><span class="author-g-101xw018h73xu61x">Background:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/background" title="en/CSS/background">background</a></span></li>
+</ul>
+<h3 id="Dynamic_effects">Dynamic effects</h3>
+<div class="ace-line">
+  CSS also introduces dynamic effects:</div>
+<ul>
+  <li><span class="author-g-101xw018h73xu61x">Transitions:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">CSS transitions</a></span></li>
+  <li><span class="author-g-101xw018h73xu61x">Animations:</span> <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li>
+  <li><span class="author-g-101xw018h73xu61x">Transforms:</span> <span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a></span></li>
+</ul>
+<p>{{ languages( { "ja": "ja/HTML/HTML5/HTML5_Thematic_Classification"} ) }}</p>
diff --git a/files/zh-cn/web/guide/html/html5/index.html b/files/zh-cn/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..cf907d36d7
--- /dev/null
+++ b/files/zh-cn/web/guide/html/html5/index.html
@@ -0,0 +1,186 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML5
+tags:
+  - HTML
+  - HTML5
+  - JavaScript
+  - PHP
+  - Web
+  - Web 开发
+  - angularjs
+  - nodejs
+  - vuejs
+  - 帮助
+  - 指南
+  - 综述
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><span><strong>HTML5</strong> 是</span>定义<span> <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新的版本。 </span>该术语通过两个不同的概念来表现：</p>
+
+<ul>
+ <li>它是一个新版本的<strong>HTML</strong>语言，具有新的元素，属性和行为，</li>
+ <li>它有更大的<strong>技术</strong>集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 <strong><em>HTML5</em></strong>。</li>
+</ul>
+
+<p>设计为所有Open Web开发人员都可以使用，此引用页面链接到许多关于HTML5技术的资源，根据其功能分为几个组。</p>
+
+<ul>
+ <li><strong>语义</strong>：能够让你更恰当地描述你的内容是什么。</li>
+ <li><strong>连通性</strong>：能够让你和服务器之间通过创新的新技术方法进行通信。</li>
+ <li><strong>离线 &amp; 存储</strong>：能够让网页在客户端本地存储数据以及更高效地离线运行。</li>
+ <li><strong>多媒体</strong>：使 video 和 audio 成为了在所有 Web 中的一等公民。</li>
+ <li><strong>2D/3D 绘图 &amp; 效果</strong>：提供了一个更加分化范围的呈现选择。</li>
+ <li><strong>性能 &amp; 集成</strong>：提供了非常显著的性能优化和更有效的计算机硬件使用。</li>
+ <li><strong>设备访问 Device Access</strong>：能够处理各种输入和输出设备。</li>
+ <li><strong>样式设计</strong>: 让作者们来创作更加复杂的主题吧！</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的区块和段落元素</a></dt>
+ <dd>HTML5 中新的区块和段落元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt>
+ <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入和允许操作新的多媒体内容。</dd>
+ <dt><a href="/zh-CN/docs/Learn/HTML/Forms">表单的改进</a></dt>
+ <dd>看一下 HTML5 中对 web 表单的改进：<a href="/zh-CN/docs/Learn/HTML/Forms/Form_validation">强制校验API</a>，一些新的属性，一些新的{{HTMLElement("input")}} 元素{{htmlattrxref("type", "input")}} 属性值 ，新的 {{HTMLElement("output")}} 元素。</dd>
+ <dt>新的语义元素</dt>
+ <dd>除了节段，媒体和表单元素之外，还有众多的新元素，例如 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}和{{HTMLElement("main")}}，这增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd>
+ <dt>{{HTMLElement("iframe")}} 的改进</dt>
+ <dd>使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd>
+ <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt>
+ <dd>允许直接嵌入数学公式。</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt>
+ <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd>
+ <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt>
+ <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd>
+</dl>
+
+<h2 id="通信" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">通信</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd>
+ <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt>
+ <dd>允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd>
+ <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd>
+</dl>
+
+<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 &amp; 存储</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源：应用程序缓存</a></dt>
+ <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd>
+ <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt>
+ <dd>Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt>
+ <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd>
+ <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd>
+ <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt>
+ <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd>
+</dl>
+
+<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt>
+ <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd>
+ <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，在浏览器中直接控制视频会议，而不需要一个插件或是外部的应用程序。</dd>
+ <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt>
+ <dd>允许使用，操作计算机摄像头，并从中存储图像。</dd>
+ <dt>Track 和 WebVTT</dt>
+ <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd>
+</dl>
+
+<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 &amp; 效果</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt>
+ <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd>
+ <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code>&lt;canvas&gt;</code> 元素的文本 API</a></dt>
+ <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd>
+ <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd>
+ <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd>
+ <dt> </dt>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 &amp; 集成</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd>能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。</dd>
+ <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
+ <dd>允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd>
+ <dt>即时编译的 JavaScript 引擎</dt>
+ <dd>新一代的 JavaScript 引擎功能更强大，性能更杰出。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd>
+ <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable 属性：把你的网站改变成 wiki !</a></dt>
+ <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd>
+ <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt>
+ <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd>
+ <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt>
+ <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd>
+ <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt>
+ <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd>
+ <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
+ <dd>允许控制动画渲染以获得更优性能。</dd>
+ <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt>
+ <dd>为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。</dd>
+ <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt>
+ <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd>
+ <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt>
+ <dd>为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。</dd>
+</dl>
+
+<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt>
+ <dd>允许使用和操作计算机的摄像头，并从中存取照片。</dd>
+ <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt>
+ <dd>对用户按下触控屏的事件做出反应的处理程序。</dd>
+ <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt>
+ <dd>让浏览器使用地理位置服务定位用户的位置。</dd>
+ <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt>
+ <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。</dd>
+ <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt>
+ <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd>
+</dl>
+
+<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2>
+
+<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。</p>
+
+<dl>
+ <dt>新的背景样式特性</dt>
+ <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd>
+ <dt>更精美的边框</dt>
+ <dd>现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd>
+ <dt>为你的样式设置动画</dt>
+ <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画，或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。</dd>
+ <dt>排版方面的改进</dt>
+ <dd>作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>， 还可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。</dd>
+ <dt>新的展示性布局</dt>
+ <dd>为了提高设计的灵活性，已经有两种新的布局被添加了进来：<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd>
+</dl>
+</div>
+</div>
+
+<p>译注：</p>
+
+<p>被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p>
+
+<p>
+ <audio style="display: none;"> </audio>
+</p>
diff --git a/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html
new file mode 100644
index 0000000000..55c2e8df5e
--- /dev/null
+++ b/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html
@@ -0,0 +1,43 @@
+---
+title: HTML5 入门
+slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+tags:
+  - Basic
+  - Guide
+  - HTML
+  - HTML5
+  - NeedsContent
+  - Web
+translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+---
+<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>是最新的第五代HTML标准。它不仅提供丰富的媒体支持，而且还增强了对创建一个能够与用户进行交互的Web应用的支持，使他/她的本地数据和服务器交互比以前更有效，更容易。</p>
+
+<p>一些HTML5特性仍然不被某些浏览器支持。但是，Gecko已经开始推广，火狐浏览器也对HTML5的支持非常好，并且会持续的支持更多的功能。Gecko开始支持HTML5版本1.8.1。你可以在这个<a href="/zh/HTML/HTML5" title="zh/HTML/HTML5">HTML5主页</a>中找到目前Gecko支持的所有的HTML5的功能列表。关于HTML5多浏览器支持的详细信息，请参阅 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 网站</p>
+
+<h2 id="用HTML5的doctype声明文件包含HTML5标记">用HTML5的doctype声明文件包含HTML5标记</h2>
+
+<p>HTML5的doctype非常简单。表明你的HTML内容使用HTML5，只需要简单的使用：</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;</pre>
+
+<p>这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。</p>
+
+<p>这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。</p>
+
+<h2 id="用&lt;meta_charset>声明字符集">用<code>&lt;meta charset&gt;</code>声明字符集</h2>
+
+<p>在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的{{HTMLElement("meta")}}元素，现在它变得非常简单：</p>
+
+<pre class="brush: html">&lt;meta charset="UTF-8"&gt;</pre>
+
+<p>把这个放到你的{{HTMLElement("head") }}，因为在一些浏览器中如果声明的字符集和他们的预期的不同，他们会重新解析一遍HTML文档。另外，如果你目前没有使用UTF-8，建议您把您的网页改为这个编码，因为它简化了不同脚本对文件中字符的处理。</p>
+
+<p>值得注意的是HTML5限制了可用的字符集，他们需要兼容8位的ASCII。这样做是为了加强安全，防止某些类型的攻击。</p>
+
+<h2 id="使用新的HTML5解析器">使用新的HTML5解析器</h2>
+
+<p>html5的解析器分析主要是从标签的语义进行，并且语义化标签在html5中得到更加严格的定义。在H5之前，只有明确定义的标签被才能使用，意味着一旦只要有一个小错误在标签上（大部分网站只要有一个），表现出来的形式就是未定义的标签。从本质上讲，这导致所有的浏览器使用相同的标签时，产生的作用和表现的形式都不一样。如今面对标签问题，所有的浏览器商必须定义一个相同标准。</p>
+
+<p>这个统一的开发标准帮助了网站开发者进行开发。目前大多数浏览器使用着HTML5的分析标准，同时非H5标准的浏览器商也还有部分人使用。请记住我们推荐使用语义化标签，html5的新标准让这些代码变得更加简单得去理解和维护。并且将会大量减少目前市场存在旧浏览器的兼容问题</p>
+
+<p>别担心，你不需要改变您的网站上的任何东西,Web浏览器的开发商已经在为你做这些了！</p>
diff --git a/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
new file mode 100644
index 0000000000..2eeb6fe100
--- /dev/null
+++ b/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
@@ -0,0 +1,377 @@
+---
+title: 使用 HTML 章节与大纲
+slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
+tags:
+  - HTML
+  - HTML5
+  - 指南
+  - 文档结构
+  - 高阶
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div class="warning">
+<p>（下方英文原文警告的过时已翻译版本）<strong>注意：</strong>下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。</p>
+</div>
+
+<div class="warning">
+<p><strong>Important</strong>: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the <a href="http://www.w3.org/TR/html5/sections.html#outline">outline</a> algorithm <em>should not be used</em> to convey document structure to users. Authors are advised to use heading <a href="http://www.w3.org/TR/html5/sections.html#rank">rank</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) to convey document structure.</p>
+</div>
+
+<p>HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。</p>
+
+<h2 id="HTML_4_的文档结构">HTML 4 的文档结构</h2>
+
+<p>文档结构，即，<code>&lt;body&gt;</code> 与 <code>&lt;/body&gt;</code> 标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。</p>
+
+<p>所以下面的片段：</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:xml">&lt;div class="section" id="forest-elephants" &gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;div class="subsection" id="forest-habitat" &gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>形成了如下的大纲：</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+</pre>
+
+<p>HTML div 元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,</p>
+
+<pre class="brush:xml">&lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h2&gt;Habitat&lt;/h2&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  &lt;h2&gt;Diet&lt;/h2&gt;
+&lt;h1&gt;Mongolian gerbils&lt;/h1&gt;
+</pre>
+
+<p>会形成如下的大纲:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+</pre>
+
+<h2 id="HTML5_解决的问题" style="line-height: 30px;">HTML5 解决的问题</h2>
+
+<p>HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：</p>
+
+<ol>
+ <li> 定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">assistive technology</a>）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。</li>
+ <li>合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素（{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}）总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.</li>
+ <li>HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 </li>
+ <li>另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。</li>
+</ol>
+
+<p>更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。</p>
+
+<h2 id="HTML5_的大纲算法">HTML5 的大纲算法</h2>
+
+<h3 id="定义节段">定义节段</h3>
+
+<p> {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 </p>
+
+<div class="note">注意：每个section可以有自己的标题结构。因此，即使是一个嵌套的section也能有<span style="line-height: 1.5;">{{HTMLElement("h1")}}. 具体查看 </span><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" style="line-height: 1.5;" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Defining Headings in HTML5</a><span style="line-height: 1.5;">.</span></div>
+
+<p>Example:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;advertising block&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>这个HTML片段定义了两个顶级节段：</p>
+
+<pre><span style="color: red;">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;advertising block&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;</span>
+
+<span style="color: green;">&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</span></pre>
+
+<p>第一个节段有三个子节段：</p>
+
+<pre>&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+
+  <span style="color: red;">&lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: green;">&lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: blue;">&lt;aside&gt;
+    &lt;p&gt;advertising block&lt;/p&gt;
+  &lt;/aside&gt;</span>
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>上面的片段形成了如下的大纲:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+   1.3 Section (aside)
+</pre>
+
+<h3 id="在HTML5中定义标题">在HTML5中定义标题</h3>
+
+<p>当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题</p>
+
+<p>标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+  &lt;p&gt;In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>形成了下面的大纲:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils</pre>
+
+<p>注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）</p>
+
+<h3 id="隐式分节">隐式分节</h3>
+
+<p>因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。</p>
+
+<p>HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+&lt;/section&gt;</pre>
+
+<p>形成如下的大纲:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat <em>(implicitly defined by the h3 element)</em></pre>
+
+<p>如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h1 class="implicit section"&gt;Mongolian gerbils&lt;/h1&gt;
+  &lt;p&gt;Mongolian gerbils are cute little mammals.
+    ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>形成如下的大纲：</p>
+
+<pre>1. Forest elephants
+2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em></pre>
+
+<p>如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;Mammals&lt;/h1&gt;
+  &lt;h2&gt;Whales&lt;/h2&gt;
+  &lt;p&gt;In this section, we discuss the swimming whales.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h3&gt;Forest elephants&lt;/h3&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+      &lt;p&gt;Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    &lt;h2&gt;Reptiles&lt;/h2&gt;
+      &lt;p&gt;Reptiles are animals with cold blood.
+          ...this subsection continues...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>形成如下的大纲：</p>
+
+<pre>1. Mammals
+   1.1 Whales <em>(implicitly defined by the h2 element)</em>
+   1.2 Forest elephants <em>(explicitly defined by the section element)</em>
+   1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em>
+2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em></pre>
+
+<p>这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。</p>
+
+<p>作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。</p>
+
+<h3 id="分节根"><a name="sectioning_root">分节根</a></h3>
+
+<p>分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。</p>
+
+<p>Example:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introduction&lt;/h2&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "&lt;cite&gt;The Forest Elephant in Borneo&lt;/cite&gt;":&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;Borneo&lt;/h1&gt;
+       &lt;p&gt;The forest element lives in Borneo...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>例子形成如下的大纲:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat</pre>
+
+<p>这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用，是一个分节根并隔离了他内部的大纲</p>
+
+<h3 id="大纲之外的节段">大纲之外的节段</h3>
+
+<p>HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。</p>
+
+<ol>
+ <li>HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中</li>
+ <li>HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。</li>
+</ol>
+
+<h3 id="页眉和页脚">页眉和页脚</h3>
+
+<p>HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。</p>
+
+<ol>
+ <li>HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header，但是不一定是在页面的开始。</li>
+ <li>HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样，其不一定是在页面的底部出现。</li>
+</ol>
+
+<h2 id="分节元素中的地址和发表时间">分节元素中的地址和发表时间</h2>
+
+<p>文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示，HTML5则拓展了这个元素。</p>
+
+<p>一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此， {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。</p>
+
+<p>同样的，新的HTML5标记 {{HTMLElement("time")}}元素，使用{{htmlattrxref("pubdate", "time")}}布尔值，表示整个文档的发布时间，分别给文章，与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。</p>
+
+<h2 id="在不支持HTML5的浏览器器中使用HTML5">在不支持HTML5的浏览器器中使用HTML5</h2>
+
+<p>分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：</p>
+
+<pre class="brush: css">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+</pre>
+
+<p>当然web开发者可以改变上面的样式结构，但是要记住的是在不支持HTML5浏览器中，这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中，因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。</p>
+
+<p>然而这种方法有自己的局限性，因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>这段脚本表示，当在ie8（及ie8以前）的情况下，应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本，则不会显示，可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况，我们需要加上{{HTMLElement("noscript")}}标签。</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+   &lt;strong&gt;Warning !&lt;/strong&gt;
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+&lt;/noscript&gt;</pre>
+
+<p>于是形成了如下的代码，允许HTML5节段和标题元素在不支持HTML5的浏览器中展示，即使是ie8（ie8以下版本）也在禁用脚本的情况下有了合适的反馈。</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;Warning !&lt;/strong&gt;
+     Because your browser does not support HTML5, some elements are simulated using JScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  &lt;/noscript&gt;
+&lt;![endif]--&gt;</pre>
+
+<h2 id="总结">总结</h2>
+
+<p>HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如，人们需要一些辅助技术的帮助。这些新的语义元素使用简单，几乎没有负担，也可以在不支持HTML5的浏览器中工作。因此，他们应该被广泛使用。</p>
+
+<div>{{HTML5ArticleTOC()}}</div>
diff --git a/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..5a07e862a0
--- /dev/null
+++ b/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
@@ -0,0 +1,213 @@
+---
+title: 小贴士：如何制作快速加载的HTML页面
+slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
+tags:
+  - HTML
+  - 全部分类
+  - 教程
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>以下技巧都是基于通用的知识和经验。</p>
+
+<p>一个好的页面不仅要给访客提供一个更有交互性的站点，同时也需要降低你的服务器压力和网络请求。后者对于那些高访问量的站点，或在有爆炸性新闻出现等特殊情况下会出现流量突增的站点来说尤为关键。</p>
+
+<p>页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网或移动设备用户需要看的内容，对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升，哪怕对于那些拥有最快网速的访客。</p>
+
+<h2 id="Tips" name="Tips">Tips</h2>
+
+<h3 id=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F" name=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F">减小页面的大小</h3>
+
+<p>直至今日，页面的大小仍是页面加载性能的最重要因素。</p>
+
+<p>通过压缩——排除不必要空格，注释，和将脚本、CSS放入外部文件等减小页面的大小，可以在页面结构改变很小的情况下提高下载性能。</p>
+
+<p>诸如 <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> 这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长<font color="#000000" face="Microsoft YaHei"><span style="font-size: 13px; line-height: normal; white-space: nowrap;">标识符</span></font>替换为短标识符来减小文件大小。</p>
+
+<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">最小化文件数量</h3>
+
+<p>减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的<a href="https://developer.mozilla.org/en-US/docs/HTTP">HTTP</a>请求数量，从而减少这些请求的收发时间。</p>
+
+<p>根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。</p>
+
+<p>If you use background images a lot in your CSS, you can reduce the number of HTTP lookups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However, the fewer HTTP requests and single image caching can help reduce page-load time.</p>
+
+<h3 id="使用_CDN">使用 CDN</h3>
+
+<p>For the purposes of this article, a CDN is a means to reduce the physical distance between your server and your visitor. As the distance between your server origin and visitor increases, the load times will increase. Suppose your website server is located in the United States and it has a visitor from India; the page load time will be much higher for the Indian visitor compared to a visitor from the US.</p>
+
+<p>A CDN is a geographically distributed network of servers that work together to shorten the distance between the user and your website. CDNs store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing <a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">latency</a>.</p>
+
+<p>Further reading:</p>
+
+<ul>
+ <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li>
+</ul>
+
+<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">减少域名查找</h3>
+
+<p>每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。</p>
+
+<p>这条可能算不上实用，然而，在你的页面中尽量少的使用来自不同域名的资源链接。</p>
+
+<ul>
+</ul>
+
+<h3 id="Cache_reused_content" name="Cache_reused_content">缓存重用的内容</h3>
+
+<p>确保任何内容可以被缓存，并且拥有一个合理的有效期。</p>
+
+<p>特别要注意 <code>Last-Modified</code> 头，它会让页面高效的缓存。 自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 <code>Last-Modified</code> header 部分到静态页面（如 <code>.html</code>，<code>.css</code>），基于上次修改的日期储存在文件系统中。至于动态页面（如 <code>.php</code>，<code>.aspx</code>），便无法做到，这部分请求的头也就不会被发送出去。</p>
+
+<p>所以，特别是动态产生的页面，花点时间研究一下这个课题会是有益的。或许有些什么关联，无论怎样，这么做在那些不能被缓存的网页中都会节省很多的页面请求。</p>
+
+<p>更多信息：</p>
+
+<ol>
+ <li><a href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li>
+ <li><a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li>
+</ol>
+
+<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">高效地排列页面组件</h3>
+
+<p>在页面最初显示时，会首先下载页面内容以及所需的CSS和JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。</p>
+
+<p>页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features ），等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载，有助于提升页面加载的整体表现。</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">减少内联脚本的数量</h3>
+
+<p>内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。通常，尽量少的使用内联脚本和减少用<code>document.write()</code>来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用<code>document.write()</code>的传统方法。</p>
+
+<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">使用现代CSS和合法标记</h3>
+
+<p>使用现代CSS减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。</p>
+
+<p>使用合法标记还有其它优点。首先，浏览器在解释HTML时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？ 还是加强约束规则，限制用户输入的格式？）。</p>
+
+<p>再者，合法标记可以让那些给你的网站做预处理的工具功能最大化。例如，<a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> 可以移除空白（whitespace）和可选的末尾标记（ending tags）；然而，在有严重的错误标记的网页中这些工具便无法工作。</p>
+
+<h3 id="Chunk_your_content" name="Chunk_your_content">给内容分块</h3>
+
+<p>使用 table 布局是一种不应该再采用的传统方法，而应运用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a> 来布局。</p>
+
+<p>当然，table 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 table。</p>
+
+<p>相较于这种深度的嵌套：</p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+          ...
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>用下图这样的非嵌套结构更好一些：</p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>可参见 <a href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> 和 <a href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> 规范。</p>
+
+<h3 id="Minify_and_compress_SVG_assets">Minify and compress SVG assets</h3>
+
+<p>SVG produced by most drawing applications often contains unnecessary metadata which can be removed. Configure your servers, apply gzip compression for SVG assets.</p>
+
+<h3 id="Minify_and_compress_your_images">Minify and compress your images</h3>
+
+<p>Large images cause your page to take more time to load. Consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as Photoshop, or using a specialized tool such as <a href="https://compressjpeg.com/">Compress Jpeg</a> or <a href="https://tinypng.com/">Tiny PNG</a>,.</p>
+
+<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">指定图像和表格的大小</h3>
+
+<p>如果浏览器可以即时决定你的照片（images）和表格（tables）宽高，它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示，还能在网页完成加载的过程中防止恼人的布局改变。因此，图片的 <code>height</code> 和 <code>width</code> 应尽可能确定下来。</p>
+
+<p>表格可以使用 CSS 选择器：综合性能：</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">table-layout: fixed;</code></pre>
+
+<p>用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code> 和 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code> 元素来指定列宽。</p>
+
+<h3 id="Choose_your_user_agent_requirements_wisely" name="Choose_your_user_agent_requirements_wisely">合理的选择 user-agent</h3>
+
+<p>为使页面设计得到极大提升，应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。</p>
+
+<p>理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌Chrome，Opera还有Safari。</p>
+
+<p>需要注意一下，这篇文章当中的许多tips都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。</p>
+
+<h3 id="尽可能使用_async_和_defer">尽可能使用 async 和 defer</h3>
+
+<p>确保 JavaScript 脚本兼容 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> 和 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a>，任何时候都要尽可能使用  <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> ，特别是当你有较多的 script 标签时。</p>
+
+<p>这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。</p>
+
+<p>注意：这些特性在页面第一次加载时会有所帮助，你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南（guidelines）写出了非常优秀的 JavaScript 代码，也不必要再去修改它了。</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">页面结构示例</h2>
+
+<p>· <code>{{htmlelement('html')}}</code></p>
+
+<dl>
+ <dd>· <code>{{htmlelement('head')}}</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>{{htmlelement('link')}} </code>...<br>
+  CSS 文件用来修饰页面外观。在调试维护中把不相关的 CSS 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>{{htmlelement('script')}} </code>...<br>
+  JavaScript 文件用来实现<strong>页面加载时需要的函数</strong>，而避免在页面加载后才能运行的 JavaScript。</dd>
+  <dd>在调试维护中把不相关的 JavaScript 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>{{htmlelement('body')}}</code></dd>
+ <dd>· 用户能在完整页面下载完之前就可以看到的页面小分块 ( <code>{{htmlelement('header')}}</code>/ <code>{{htmlelement('main')}}/</code> <code>{{htmlelement('table')}}</code>) 。</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>{{htmlelement('script')}} </code>...</dd>
+  <dd>DHTML 脚本通常在页面完全加载或者所有必要的对象（objects）已初始化完毕之后才能运行。没有必要在页面内容之前加载这些脚本，这只会拖慢页面加载和初始化的体验。</dd>
+  <dd>在调试维护中把不相关的 script 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd>
+  <dd>如有图像用到了反转效果，你应该在页面内容下载完后预加载这些图像。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Related_Links" name="Related_Links">相关链接</h2>
+
+<ul>
+ <li>书籍： <a href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li>非常棒、讲的很全 <a class="external external-icon" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li>用来分析和优化的工具: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3>
+
+<ul>
+ <li>作者：Bob Clary, Technology Evangelist, Netscape Communications</li>
+ <li>最后更新：Published 2003年4月4日</li>
+ <li>版权信息：Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>注意：This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
+
+<div class="noinclude"></div>
+
+<p>{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "ja": "ja/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML" } ) }}</p>
diff --git a/files/zh-cn/web/guide/html/using_data_attributes/index.html b/files/zh-cn/web/guide/html/using_data_attributes/index.html
new file mode 100644
index 0000000000..009517f416
--- /dev/null
+++ b/files/zh-cn/web/guide/html/using_data_attributes/index.html
@@ -0,0 +1,80 @@
+---
+title: 使用数据属性
+slug: Web/Guide/HTML/Using_data_attributes
+tags:
+  - Custom Data Attributes
+  - HTML5
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<p>{{LearnSidebar}}</p>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。<a href="/en-US/docs/Web/HTML/Global_attributes#data-*">data-* 属性</a>允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 <a href="/en-US/docs/Web/API/Element.classList">classList</a>，标准外属性，DOM额外属性或是 <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a> 之类的技巧。</p>
+
+<h2 id="HTML_语法">HTML 语法</h2>
+
+<p>语法非常简单。所有在元素上以<code>data-</code>开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="JavaScript_访问">JavaScript 访问</h2>
+
+<p>在外部使用<a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。</p>
+
+<p>为了使用<code>dataset</code>对象去获取到数据属性，需要获取属性名中<code>data-</code>之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。</p>
+
+<pre class="brush: js">var article = document.querySelector('#electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>每一个属性都是一个可读写的字符串。在上面的例子中，<code>article.dataset.columns = 5</code>.将会调整属性的值为5。</p>
+
+<h2 id="CSS_访问">CSS 访问</h2>
+
+<p>注意，data设定为HTML属性，他们同样能被<a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>访问。比如你可以通过<a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">generated content</a>使用函数{{cssxref("attr")}}来显示data-parent的内容：</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>你也同样可以在CSS中使用<a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">属性选择器</a>根据data来改变样式：</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>你可以在这个<a href="http://jsbin.com/ujiday/2/edit">JSBin </a>里看到全部演示。</p>
+
+<p>Data属性同样可以存储不断变化的信息，比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和CSS转换（<a href="https://jsbin.com/atawaz/3/edit">JSBin示例</a>）的示例，请参阅此<a href="https://www.youtube.com/watch?v=On_WyUB1gOk">视频</a>。</p>
+
+<p>数据值是字符串。必须在选择器中引用数值才能使样式生效。</p>
+
+<h2 id="Issues">Issues</h2>
+
+<p>不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。</p>
+
+<p>IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持<a href="http://caniuse.com/#feat=dataset">dataset</a>。为了支持IE10及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，<a href="http://jsperf.com/data-dataset">读取 data-attributes的行为</a>相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。</p>
+
+<p>尽管如此,对于那些与元素相关的数据,这依然是一个很好的解决方案.</p>
+
+<p>在FireFox 49.0.2(其他版本也有可能)中,javascript将无法读出包含1022个及以上字符的data属性(EcmaScript 4).</p>
+
+<h2 id="参阅" style="line-height: 30px; font-size: 2.14285714285714rem;">参阅</h2>
+
+<div> </div>
+
+<ul>
+ <li>该文章源自 <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li>在 SVG 2中也同样支持自定义data属性; 请参看{{domxref("SVGElement.dataset")}} 和{{SVGAttr("data-*")}}.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>
diff --git a/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html b/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html
new file mode 100644
index 0000000000..bd573234bd
--- /dev/null
+++ b/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html
@@ -0,0 +1,274 @@
+---
+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
+---
+<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>
diff --git a/files/zh-cn/web/guide/index.html b/files/zh-cn/web/guide/index.html
new file mode 100644
index 0000000000..5afd5245a4
--- /dev/null
+++ b/files/zh-cn/web/guide/index.html
@@ -0,0 +1,69 @@
+---
+title: Web 开发者指南
+slug: Web/Guide
+tags:
+  - Web
+  - 指南
+translation_of: Web/Guide
+---
+<p><strong>这些文章提供了如何使用特定Web技术和API的指南信息。</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/HTML">HTML 开发者指南</a></dt>
+ <dd class="landingPageList"><strong>超文本标记语言（HyperText Markup Language，简称HTML）</strong>是几乎所有网络内容的核心语言。你在浏览器里见到的内容几乎都是用 HTML 描述的。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Learn/CSS">CSS 开发者指南</a></dt>
+ <dd class="landingPageList">级联样式表（CSS）是一种用于描述 HTML 文档的呈现方式的样式表语言。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/Events">Event 开发者指南</a></dt>
+ <dd class="landingPageList">事件（Event）指一种用于网页生命周期中发生的各种事件的异步处理的设计模式，也指大量不同种类事件的命名、特性与使用。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd class="landingPageList"><span class="tlid-translation translation"><span title="">AJAX是一组技术的统称术语，它们允许 Web 应用程序对用户界面进行快速，增量式的更新，而无需重新加载整个页面。</span> <span title="">这使得 Web 应用程序运行更快，更能响应用户的操作。</span></span></dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/Graphics">Web 图形开发</a></dt>
+ <dd class="landingPageList">现代网络站点和应用通常需要展示图片。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/API">Web APIs</a></dt>
+ <dd class="landingPageList">列出所有的网络接口及作用。</dd>
+ <dt><a href="/zh-CN/docs/JavaScript" title="/zh-CN/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript是用于创建网络应用的功能强大的脚本语言。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Localizations_and_character_encodings">本地化和字符编码</a></dt>
+ <dd class="landingPageList">浏览器内部将文本作为Unicode字符来处理。然而，文本会按照一定的字节规则（文本编码）从网络传输到浏览器中。<a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML规范推荐使用 UTF-8 编码</a>（可以呈现所有的Unicode字符）。并且所用编码必须由网络内容声明。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/Mobile">移动网络开发</a></dt>
+ <dd class="landingPageList">本页提供对于设计移动端网站所需要的主要技术的概览。可以参考<a href="/zh-CN/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>以获得Mozilla's Firefox OS project的信息。你可能也会对<a href="/zh-CN/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox for Android</a>感兴趣。</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<ul>
+ <li class="landingPageList"><a href="/zh-CN/XMLSerializer" title="en/XMLSerializer">XMLSerializer</a>可以将DOM树序列化为字符串；</li>
+ <li class="landingPageList"><a href="/zh-CN/XPath" title="en/XPath">XPath</a>使用非XML语法在XML文档中通过元素和属性进行定位；</li>
+ <li class="landingPageList"><a href="/zh-CN/DOM/DOMParser" title="en/DOMParser">DOMParser</a>可以将字符串解析为DOM树；</li>
+ <li class="landingPageList"><a href="/zh-CN/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>用来将网络可访问资源解析为DOM树。</li>
+</ul>
+
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps"> 渐进式Web应用</a></dt>
+ <dd class="landingPageList">渐进式Web应用 (PWAs) 通过使用现代 Web APIs和传统的渐进式策略来开发跨平台的Web应用程序。这些应用程序可以在任何设备上运行并提供接近原生应用程序的体验。这是一些教程来告诉你一些你需要知道的关于PWAs的知识。 </dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/Performance">优化和性能</a></dt>
+ <dd class="landingPageList">在开发现代网络站点及应用时，使内容加载迅速高效很重要。这篇文章将会帮助你在桌面系统和手持设备上都可以提高效率。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/Parsing_and_serializing_XML">XML 解析及序列化</a></dt>
+ <dd class="landingPageList">网络平台提供这些对象来解析和序列化XML。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/WOFF">网络开放字体格式（The Web Open Font Format，简称WOFF）</a></dt>
+ <dd class="landingPageList"><strong>WOFF</strong>是在网络上开放给任何人免费使用的字体文件格式。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/User_experience">用户体验</a></dt>
+ <dd class="landingPageList">如果希望用户多次使用你的站点或者应用，就应当优化其用户体验。这篇文章可以提供一些帮助。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Web/Guide/Using_FormData_Objects">表单数据对象</a></dt>
+ <dd class="landingPageList"><a href="/zh-CN/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> 对象允许你配置一组键值对并通过 <code>XMLHttpRequest</code> 发送它们。虽然它主要用来发送表单数据，但它也可以独立地用于传输其他带键值的数据。若将表单的编码类型设置为“multipart/form-data”，则传输的格式与表单的 <code>submit()</code> 方法用于发送数据的格式相同。</dd>
+ <dt class="landingPageList"><a href="/zh-CN/docs/Glossary">术语</a></dt>
+ <dd class="landingPageList">定义了许多与 Web 和互联网相关的技术术语。</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/Reference">Web 技术参考</a></li>
+</ul>
diff --git a/files/zh-cn/web/guide/localizations_and_character_encodings/index.html b/files/zh-cn/web/guide/localizations_and_character_encodings/index.html
new file mode 100644
index 0000000000..5a5c2169e2
--- /dev/null
+++ b/files/zh-cn/web/guide/localizations_and_character_encodings/index.html
@@ -0,0 +1,61 @@
+---
+title: 本地化和字符编码
+slug: Web/Guide/Localizations_and_character_encodings
+tags:
+  - HTML
+  - 字符编码
+translation_of: Web/Guide/Localizations_and_character_encodings
+---
+<p>浏览器内部是以 Unicode 来处理文本的。然而，在将文本通过网络传递到浏览器时，是使用字节（字符编码）来表示字符的。<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML规范 </a>推荐使用UTF-8编码（可以代表所有的Unicode），并且无论网站要使用哪种编码，都需要其声明所使用的编码类型。</p>
+
+<p>在 {{HTMLElement("meta")}} 元素中的 {{htmlattrxref("charset", "meta")}} 属性被用来指明页面采用的编码。它<strong>必须</strong>在 {{HTMLElement("head")}} 定义块中使用。</p>
+
+<p>例如，要指定页面正在使用UTF-8字符编码（按照建议），只需将以下行放在{{HTMLElement("head")}}标签中</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;
+</pre>
+
+<h2 id="浏览器内部细节">浏览器内部细节</h2>
+
+<p>当 Web 内容依据 HTML 规范要求声明了编码时，Firefox将转换该编码内容到内部编码格式（声明编码-&gt;Unicode）。不幸的是，以往的Web内容并不总是使用UTF-8编码且声明为UTF-8编码。在20世纪90年代，不声明编码类型，或者使用不能代表所有Unicode的特定区域的编码来处理内容的情况都是很常见的。</p>
+
+<p>对于不声明其编码，且不符合HTML规范的内容的处理，Firefox需要一个备用编码。大多数时候，备用编码是windows-1252（通常称为ISO-8859-1），这一编码在上世纪90年代大量用于部署在美国和西欧的Windows应用程序，而且它是当时大量部署的UNIX应用程序（也主要在美国和西欧）编码的超集。不过即使这一时期同样在一些地区（非美国和西欧），其网络内容中也不是采用windows-1252编码的，在这些地区，对于不声明编码的内容备用编码需要一个非windows-1252（non-windows-1252）。</p>
+
+<p>不幸的是，有太多区域对应不同的备用编码（non-windows-1252），这意味着Firefox不能很好的确定那么多遗留内容不同的备用编码。为了处理这些内容，Firefox把windows-1252作为备用编码，用于旧的跨区域内容部分，并促其采用正确的地区对应备用编码。在新创建内容时，需要声明编码，而备用编码不再参与内容的处理。</p>
+
+<p>此外，在上世纪90年代有少数地区，没有明显的单一的特定区域编码，从而引入了多个遗留编码到Web内容中，这使得内容展示效果依赖于启发检测到的编码设定。为此Firefox仍然在这些区域中进行启发式检测（甚至可以指定编码）。</p>
+
+<h2 id="查找编码规范名称">查找编码规范名称</h2>
+
+<p><br>
+ 下面的文字是指编码规范名称。规范名称是注册在<a href="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties" title="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties">unixcharset.properties</a>（unixcharset表达式）中等号右边的值。</p>
+
+<h2 id="指定备用编码">指定备用编码</h2>
+
+<p><strong>对于 Firefox 28, 这部分内容是过时的，因为 <code>intl.charset.default</code>不再存在。从地区映射备用编码现在已经集成到Gecko内部。</strong></p>
+
+<p>备用编码指定在 <code>intl.properties</code> 下的<code>intl.charset.default</code> 中。它用于指定本地化传统内容将采用的编码。它应该设定为当地遇到未定义编码传统内容最可能采用的编码。<strong>注意</strong> 这里指定的备用编码不一定能够准确表示内容所需的当地语言所有本地化字符！</p>
+
+<p>在西欧、北美洲、中美洲、南美洲、非洲、中亚和大洋洲等等地区，备用编码通常设置为windows-1252，但在其他地区，如中欧、东欧、中东、东亚等等地区通常需要设置为其他编码。</p>
+
+<p>为了避免Web作者创造新的UTF-8的内容时没有声明内容使用UTF-8，且为了最大限度地提高用户跨区域阅读内容的能力，不设置备用编码就采用UTF-8。注意，Firefox不再发送接受字符的HTTP头( <code>Accept-Charset</code> )，所以设定备用编码时不需要考虑不需要考虑 Accept-Charset的内容。</p>
+
+<p>对于地区后备编码目前指定为ISO-8859-1的，应该改为windows-1252。虽然ISO-8859-1编码和windows-1252编码相同。但火狐正在推动windows-1252作为这些内容在 <a href="http://encoding.spec.whatwg.org/" title="http://encoding.spec.whatwg.org/">Encoding Standard</a> （编码规范）中的首选标准。</p>
+
+<p>对于Internet Explorer拥有比Firefox更大的市场份额的区域，备用编码通常应设置为与Internet Explorer相同的值。通过加载测试页面，您可以看到特定浏览器的备用编码。（在测试时一定要使用默认设置！）</p>
+
+<p>对于Firefox比Internet Explorer拥有更多市场份额的地区，最好不要更改回退编码，即使它不遵循上面给出的指导。（例如，波兰、匈牙利和捷克的地区的备用编码应该继续采用ISO-8859-2，尽管这与IE是不同的备用编码。）</p>
+
+<p>有疑问时，使用windows-1252作为备用的编码。</p>
+
+<h2 id="指定启发式检测模式">指定启发式检测模式</h2>
+
+<p class="ordinary-output target-output clearfix"><span>启发式检测模式是由</span><code>intl.properties</code><span>中偏好</span><code>intl.charset.detector</code><span>指定。</span><span>除了俄语、乌克兰语和日语以外，所有区域的设置必须留空。</span><span>在任何情况下都不要指定</span> "universal" (<span>“万能”)探测器。</span><span>尽管它的名字并不普遍！</span></p>
+
+<h2 id="少数民族语言例外">少数民族语言例外</h2>
+
+<p>如果用户本身可采用少数民族语言和文字，但他通常使用区域通用语言，这时适当的指定备用编码和启发式检测模式需要与所处广大的区域的语言定位相同。例如，对于俄罗斯的少数民族语言本地化，复制来自俄罗斯本地化的设置是合适的。</p>
+
+<h2 id="设置一些更容易从菜单选择的字符编码">设置一些更容易从菜单选择的字符编码</h2>
+
+<p><code>intl.properties</code>中的 <code>intl.charsetmenu.browser.static</code> 可以标记一些编码，它们出现在浏览器编码选择菜单中。该值是一个逗号分隔的规范编码名称列表。清单应至少包括备用编码，windows-1252和UTF-8编码。对于可能有多个遗留编码的地区，这些编码都应被包括。例如，在日本设置 Shift_JIS为备用编码，但也有其他的传统编码： ISO-2022-JP和EUC-JP。因此， <code>intl.charsetmenu.browser.static</code>应该设置为" Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8"。</p>
diff --git a/files/zh-cn/web/guide/mobile/index.html b/files/zh-cn/web/guide/mobile/index.html
new file mode 100644
index 0000000000..7544455073
--- /dev/null
+++ b/files/zh-cn/web/guide/mobile/index.html
@@ -0,0 +1,72 @@
+---
+title: 手机网页开发
+slug: Web/Guide/Mobile
+translation_of: Web/Guide/Mobile
+---
+<p><span style="line-height: 1.5;">本文主要是给出了网站开发所需的主要技术，这同样适用于手机设备。如果你正在寻找Mozilla 火狐系统相关的项目，请参考</span><a href="/en/Mozilla/Firefox_OS" style="line-height: 1.5;" title="Boot to Gecko">Firefox OS</a><span style="line-height: 1.5;"> 。或者你可能会对</span><a href="/en/Mozilla/Firefox_for_Android" style="line-height: 1.5;" title="Firefox for Android">Firefox for Android</a><span style="line-height: 1.5;">感兴趣。</span></p>
+
+<p>我们准备用两个章节来组织本文的内容，<a href="#Designing_for_mobile_devices" style="line-height: 1.5;">designing for mobile devices</a><span style="line-height: 1.5;"> 和</span><a href="#Cross-browser_development" style="line-height: 1.5;">cross-browser compatibility</a>。另外，这还有一篇Jason Grlick为web开发者写的指南<span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" style="line-height: 1.5;" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">mobile-friendliness</a>。</p>
+
+<h2 id="手机设备设计">手机设备设计</h2>
+
+<p>与台式机和笔记本相比，在硬件特性上手持设备有非常大的不同。当然通常他们的屏幕尺寸更小，另外一个特性是当用户旋转设备时，他们会在portrait和landscape模式下自动切换。旋转用户输入一般通过触屏。类似地理定位和排列方向这样在台式机上没有多大作用的API，在手机用户使用你网站的时候有了全新的体验！</p>
+
+<h3 id="在更小的屏幕下工作">在更小的屏幕下工作</h3>
+
+<p><a href="/en/Web_Development/Responsive_Web_design">响应式网页设计</a>是一项让你的网站在手持设备上通过不同的使用环境进行自动适应的技术，通常来说体现在尺寸和屏幕的排列方向上。他包含下面的技术：</p>
+
+<ul>
+ <li>弹性化CSS布局设计，保证当浏览器窗口的尺寸变化时网页也能流畅地适应</li>
+ <li>根据设备屏幕的宽高，合理使用css媒体查询规则</li>
+</ul>
+
+<p><a href="/zh-CN/docs/">viewport meta 标签</a>指定在用户设备的浏览器中的网页的缩放比例。</p>
+
+<h3 id="处理触摸屏">处理触摸屏</h3>
+
+<p>在触摸设备中你需要使用dom的touch事件。不再需要使用css:hover伪类；同时因为手指比鼠标要大的缘故，要将可点击元素做的更大一点。参见此文 <a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a>.</p>
+
+<p>你可以使用<a href="/zh-CN/docs/Web/Guide/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled </a>media query属性在可触摸设备上加载不同的css。</p>
+
+<h3 id="优化图片">优化图片</h3>
+
+<p>为了解决那些带宽小或者流量费用昂贵的用户，你可以通过根据用户的屏幕尺寸和分辨率加载合适的图片来优化图片的加载。你可以通过媒体查询来获取屏幕的 <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>，<a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a> 以及 <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>。</p>
+
+<p>你也可以不使用图片，使用css属性像<a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> 和 <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> 来实现更好的视觉效果。</p>
+
+<h3 id="移动_APIs">移动 APIs</h3>
+
+<p>最后, 你可以利用移动设备提供的新可能性， 例如 <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> 和 <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>。</p>
+
+<h2 id="跨浏览器开发">跨浏览器开发</h2>
+
+<h3 id="书写跨浏览器代码">书写跨浏览器代码</h3>
+
+<p>创建能够完美工作在不同移动浏览器的web sites:</p>
+
+<ul>
+ <li>请尽力避免使用特定浏览器的features, 例如CSS属性前的vendor-prefixed(浏览器厂商前缀，也称浏览器引擎前缀)。例如-moz-为Firefox|Firefox OS浏览器引擎使用到的前缀。</li>
+ <li>如果你需要使用这些features, 请检查是否其它浏览器也有实现这些特性的版本。</li>
+ <li>对于不支持这些特性的浏览器，请提供一个可接受的fallback。</li>
+</ul>
+
+<p>例如，如果使用诸如 <code>-webkit-linear-gradient</code> 之类带有渲染器前缀的属性为一些文字设置了渐变背景，你最好能够将其他带有渲染器前缀的 <code>linear-gradient</code> 的相应属性一并添上。如果你没有这么做，请至少确保文字和默认的背景能形成对比。这样，即便在你没有指定 <code>linear-gradient</code> 的浏览器里，这个页面仍然是可用的。</p>
+
+<p>请查看 <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">list of Gecko-specific properties</a> 以及 <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-specific properties</a> 这两个针对 Gecko 和 Webkit 浏览器的特殊前缀列表，以及这个由 Peter Beverloo 整理的 <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a>.</p>
+
+<p>使用诸如 <a class="external" href="http://csslint.net/">CSS Lint</a> 这样的工具可以帮助你查找这些问题， 诸如 <a class="external" href="http://sass-lang.com/">SASS</a> 和 <a class="external" href="http://lesscss.org/">LESS</a> 之类的预处理器可以帮助你处理这样的跨浏览器样式。</p>
+
+<h3 id="注意用户代理嗅探">注意用户代理嗅探</h3>
+
+<p>我们推荐网站使用上面说到的方法来检测诸如屏幕尺寸和触摸屏之类的特定设备的特性，并且自动根据这些特性做出适配。但有时这样的办法并不那么管用，于是这是网站就会通过解析浏览器的 User Agent 来试图将桌面端，平板电脑端和手机端区分出来，并为不同的设备提供不同的内容。</p>
+
+<p>如果你就是这样做的，请确保你的算法是可靠的，并且确保你的服务器没有因为没有正确解析某个浏览器的 User Agent 而给它提供了不合适的页面。请点击这里 <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">guide to using the user agent string to determine device type</a> 查看关于 User Agent 解析的更多信息。</p>
+
+<h3 id="多浏览器中测试">多浏览器中测试</h3>
+
+<p>在多个浏览器中测试你的网站。这意味着在多个平台测试—至少iOS和Android。</p>
+
+<ul>
+ <li>使用 <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS simulator</a> 在IPhone上测试移动版Safari。</li>
+ <li>使用<a class="link-https" href="https://developer.android.com/sdk/index.html"> Android SDK </a>测试Opera和Firefox。详细方法请点击 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">running Firefox for Android using the Android emulator</a> 查看。</li>
+</ul>
diff --git a/files/zh-cn/web/guide/parsing_and_serializing_xml/index.html b/files/zh-cn/web/guide/parsing_and_serializing_xml/index.html
new file mode 100644
index 0000000000..d93d0a77c2
--- /dev/null
+++ b/files/zh-cn/web/guide/parsing_and_serializing_xml/index.html
@@ -0,0 +1,102 @@
+---
+title: Parsing and serializing XML
+slug: Web/Guide/Parsing_and_serializing_XML
+tags:
+  - DOM
+  - Document
+  - XML
+  - XMLHttpRequest
+  - 指南
+translation_of: Web/Guide/Parsing_and_serializing_XML
+---
+<p>有时, 你可能需要解析 {{Glossary("XML")}} 内容，并把它转换为 {{Glossary("DOM")}} 树，或者，反过来将现有的DOM树序列化成XML。在本文中，我们将查看Web平台提供的对象，以便轻松地序列化和解析XML的常见任务。</p>
+
+<dl>
+ <dt>{{domxref("XMLSerializer")}}</dt>
+ <dd>序列化 DOM 树，把它们转换成包含 XML 的字符串。</dd>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd>通过解析一个包含 XML 的字符串来构建 DOM 树，返回一个基于输入数据的适当的 {{domxref("XMLDocument")}} 或者是 {{domxref("Document")}}。</dd>
+ <dt>{{domxref("XMLHttpRequest")}}</dt>
+ <dd>从一个URL中加载内容；XML 的内容被作为一个带有内建 XML 的 DOM 树的XML {{domxref("Document")}} 对象返回。</dd>
+ <dt><a href="/zh-CN/docs/Web/XPath">XPath</a></dt>
+ <dd>一种创建包含 XML 文档特定部分的地址，并基于这些地址进行 XML 节点定位的字符串的技术。</dd>
+</dl>
+
+<h2 id="创建一个_XML_文档">创建一个 XML 文档</h2>
+
+<p>使用以下方法来创建一个 XML 文档（该文档是 {{domxref("Document")}} 的一个例子）。</p>
+
+<h3 id="把字符串解析成_DOM_树">把字符串解析成 DOM 树</h3>
+
+<p>下面这个例子使用 {{domxref("DOMParser")}} 把字符串中的 XML 片段转换为 DOM 树：</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var sMyString = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;';
+var oParser = new DOMParser();
+var oDOM = oParser.parseFromString(sMyString, "application/xml");
+// print the name of the root element or error message
+console.log(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+</pre>
+</div>
+
+<h3 id="把可寻址的_URL_资源解析成_DOM_树">把可寻址的 URL 资源解析成 DOM 树</h3>
+
+<h4 id="使用_XMLHttpRequest">使用 XMLHttpRequest</h4>
+
+<p>下列示例代码读取一个可寻址的 URL 资源文件并将其解析成 DOM 树：</p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.onload = function() {
+  dump(xhr.responseXML.documentElement.nodeName);
+}
+xhr.onerror = function() {
+  dump("Error while getting XML.");
+}
+xhr.open("GET", "example.xml");
+xhr.responseType = "document";
+xhr.send();
+</pre>
+
+<p>在 <code>xhr</code> 对象 {{domxref("XMLHttpRequest.responseXML", "responseXML")}} 域中返回的值 是一个通过解析XML构造的 {{domxref("Document")}}。</p>
+
+<p>如果这个文档是 {{Glossary("HTML")}}，上面实例代码将会返回一个 {{domxref("Document")}}。如果它是 XML，那获取的结果对象实际上是一个 {{domxref("XMLDocument")}}。这两种类型实质上是一样的; 不同点大部分是历史遗留的，尽管区分它们也会有一些实际好处。</p>
+
+<div class="note">
+<p><strong>注意：</strong>事实上，{{domxref("HTMLDocument")}} 也是一个接口，但是它不必是一个独立的类型。在一些浏览器上是，但在另外一些浏览器上它仅仅是 <code>Document</code> 接口的别名。</p>
+</div>
+
+<h2 id="序列化一个_XML_文档">序列化一个 XML 文档</h2>
+
+<p>被给一个 {{domxref("Document")}}，你可以使用 {{domxref("XMLSerializer.serializeToString()")}} 方法把文档的 DOM 树序列化为XML。</p>
+
+<p>使用下面的方法来序列化在先前章节中创建的 XML 文档内容。</p>
+
+<h3 id="把DOM树_序列化成字符串">把DOM树 序列化成字符串</h3>
+
+<p>首先，使用<a href="/zh-CN/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree">如何创建一个DOM树</a>中的方法构建一个 DOM 树。也可以使用从 {{ domxref("XMLHttpRequest") }} 中获得的 DOM 树。</p>
+
+<p>为了序列化 DOM 树的 <code>doc</code> 为 XML 文档，调用 {{domxref("XMLSerializer.serializeToString()")}}：</p>
+
+<pre class="brush: js">var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);</pre>
+
+<h3 id="序列化_HTML_文档">序列化 HTML 文档</h3>
+
+<p>如果你手上的 DOM 是一个 HTML 文档，你可以使用 <code>serializeToString()</code>，但是也有一个更简单的选择: 直接用 {{domxref("Element.innerHTML")}} 属性（如果你仅仅想得到指定节点的后代的话）或者是如果你想得到节点本身及它所有的后代的话，你可以使用 {{domxref("Element.outerHTML")}} 属性。</p>
+
+<pre class="brush: js">var docHTML = document.documentElement.innerHTML;
+</pre>
+
+<p>因此，<code>docHTML</code> is 一个包含 HTML内容的文档的 {{domxref("DOMString")}}; 也就是说，{{HTMLElement("body")}} 元素的内容。</p>
+
+<p>你可以使用以下代码得到 <code>&lt;body&gt;</code> 和它的后代对应的HTML：</p>
+
+<pre class="brush: js">var docHTML = document.documentElement.outerHTML;</pre>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/XPath">XPath</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("Document")}}、{{domxref("XMLDocument")}}，和 {{domxref("HTMLDocument")}}</li>
+</ul>
diff --git a/files/zh-cn/web/guide/performance/index.html b/files/zh-cn/web/guide/performance/index.html
new file mode 100644
index 0000000000..135441c1f0
--- /dev/null
+++ b/files/zh-cn/web/guide/performance/index.html
@@ -0,0 +1,15 @@
+---
+title: 优化和性能
+slug: Web/Guide/Performance
+translation_of: Web/Guide/Performance
+---
+<p>对于开发现代化的Web应用和网站来说，让内容良好地展现尤为重要。换句话说就是让你的Web应用和网站能快速高效地展现给用户，这包括能高效地运行在强运算能力的桌面电脑上以及运算能力较弱的移动设备上。目前一些工具可以用来检测网站或者博客的性能，主要是下列这些：</p>
+
+<ul>
+ <li><a href="https://developers.google.com/speed/pagespeed/insights/" rel="noopener resources">Google PageSpeed Insights</a></li>
+ <li><a href="https://developers.google.com/web/tools/lighthouse/" rel="noopener">Lighthouse</a></li>
+ <li><a href="https://www.webpagetest.org/" rel="noopener">WebPageTest</a></li>
+ <li>浏览器的开发者工具</li>
+</ul>
+
+<p>上述资源也包括Web性能的优化建议等信息。把网页性能作为整个开发过程的重中之重来考虑，才能保证用户可以得到最好的用户体验。</p>