initial commit

3 files changed, 505 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/idbcursor/direction/index.html b/files/zh-cn/web/api/idbcursor/direction/index.html
new file mode 100644
index 0000000000..0c7f2b6204
--- /dev/null
+++ b/files/zh-cn/web/api/idbcursor/direction/index.html
@@ -0,0 +1,150 @@
+---
+title: IDBCursor.direction
+slug: Web/API/IDBCursor/direction
+translation_of: Web/API/IDBCursor/direction
+---
+<p>{{ APIRef("IDBCursor") }}</p>
+<div>
+ <p> {{domxref("IDBCursor")}} 的方向属性是一个 {{domxref("DOMString")}} ，表示游标遍历的方向， (比如可以通过 {{domxref("IDBObjectStore.openCursor")}} 设置). 查看下文中 {{anch("Values")}} 章节获取可取值.</p>
+</div>
+<h2 id="语法">语法</h2>
+<pre class="brush: js" style="font-size: 14px;">cursor.direction;</pre>
+<h3 id="取值">取值</h3>
+<p>用一个字符串(defined by the <a href="https://dvcs.w3.org/hg/IndexedDB/raw-file/default/Overview.html#idl-def-IDBCursorDirection"><code>IDBCursorDirection</code> enum</a>) 表示游标的遍历方向。相关取值如下表所示:</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>next</code></td>
+   <td>从数据源开始位置遍历</td>
+  </tr>
+  <tr>
+   <td><code>nextunique</code></td>
+   <td>
+    <p> </p>
+    <p>从数据源开始遍历；当取值有重复时，只获取一次。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>prev</code></td>
+   <td>
+    <p><span style="line-height: 1.5;">从数据源的最后位置位置开取值</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>prevunique</code></td>
+   <td>从数据源的最后位置开始取值，只获取一次。<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="例子">例子</h2>
+<p><span style="line-height: 1.5;">在这个简单的例子中，我们首先创建一个事物对象，返回一个对象仓库(store), 然后使用邮编遍历整个数据仓库。在每次迭代中我们记录了游标的方向，例如prev（倒序遍历）</span></p>
+<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr;">prev</code></pre>
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;">
+  </div>
+<div class="note">
+ <p><span style="line-height: 1.5;"><strong>注意</strong>：我们不能改变游标的取值，因为这是个只读属性；应该在</span><span style="line-height: 1.5;">{{domxref("IDBObjectStore.openCursor")}}方法调用的第二个参数指定游标遍历的方向；</span></p>
+</div>
+<p><span style="line-height: 1.5;">使用游标遍历数据时，可以不需要我们指定在特定字段选择数据；我们可以直接获取所有数据，同时在每次循环迭代过程当中，我们可以通过cursor.value.foo获取数据，如下是一个完整的游标遍历数据的例子；</span><span style="line-height: 1.5;"> <a class="external external-icon" href="https://github.com/mdn/IDBcursor-example/" style="white-space: pre-line;">IDBCursor example</a></span><span style="line-height: 1.5;"> (</span><a class="external external-icon" href="http://mdn.github.io/IDBcursor-example/" style="line-height: 1.5; white-space: pre-line;">view example live</a><span style="line-height: 1.5;">.)</span></p>
+<pre class="brush: js">function backwards() {
+  list.innerHTML = '';
+  var transaction = db.transaction(['rushAlbumList'], 'readonly');
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor(null,'prev').onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.albumTitle + '&lt;/strong&gt;, ' + cursor.value.year;
+        list.appendChild(listItem);
+
+        console.log(cursor.direction);
+        cursor.continue();
+      } else {
+        console.log('Entries displayed backwards.');
+      }
+  };
+};</pre>
+<h2 id="Specifications">Specifications</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBCursor-direction', 'direction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<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>23{{property_prefix("webkit")}}<br>
+     24</td>
+    <td>10 {{property_prefix("moz")}}<br>
+     {{CompatGeckoDesktop("16.0")}}</td>
+    <td>10, partial</td>
+    <td>15</td>
+    <td>7.1</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>Firefox OS</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>4.4</td>
+    <td>{{CompatGeckoMobile("22.0")}}</td>
+    <td>1.0.1</td>
+    <td>10</td>
+    <td>22</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="sect1"> </h2>
+<h2 id="参考资料">参考资料</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/zh-cn/web/api/idbcursor/index.html b/files/zh-cn/web/api/idbcursor/index.html
new file mode 100644
index 0000000000..bb8b1ef16f
--- /dev/null
+++ b/files/zh-cn/web/api/idbcursor/index.html
@@ -0,0 +1,161 @@
+---
+title: IDBCursor
+slug: Web/API/IDBCursor
+translation_of: Web/API/IDBCursor
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p><a href="/en-US/docs/IndexedDB">IndexedDB API</a> 中的 <code>IDBCursor</code> 接口表示一个游标，用于遍历或迭代数据库中的多条记录。</p>
+
+<p>游标有一个源，指示需要遍历哪一个索引或者对象存储区。它在所属区间范围内有一个位置，根据记录健（存储字段）的顺序递增或递减方向移动。游标使应用程序能够异步处理在游标范围内的所有记录。</p>
+
+<p>你可以在同一时间拥有无数个游标。你总会获得表示给定游标的同样的 <code>IDBCursor</code> 对象。在基础索引或对象存储上执行操作。</p>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.advance")}}</dt>
+ <dd>设置光标向前移动位置的次数。</dd>
+ <dt>{{domxref("IDBCursor.continue")}}</dt>
+ <dd>将游标按它的方向移动到下一个位置，到其健与可选健参数匹配的项。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("IDBCursor.delete")}}</dt>
+ <dd>返回一个 {{domxref("IDBRequest")}} 对象，并且在一个单独的线程中，删除游标位置记录，而不改变游标的位置。这个可以用作删除一些特定的记录。</dd>
+ <dt>{{domxref("IDBCursor.update")}}</dt>
+ <dd>返回一个 {{domxref("IDBRequest")}} 对象，并且在一个单独的线程中，更新对象存储中当前游标位置的值。这个可以用来更新特定的记录。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.source")}} {{readonlyInline}}</dt>
+ <dd>返回一个游标正在迭代的 {{domxref("IDBObjectStore")}}  或者 {{domxref("IDBIndex")}} 。这个方法永远不会返回一个空或者抛出异常，即使游标当前正在被迭代，已迭代超过其结束，再或者其事务没有处于活动状态。</dd>
+ <dt>{{domxref("IDBCursor.direction")}} {{readonlyInline}}</dt>
+ <dd>返回光标遍历方向。请查看<a href="#const_next"> 常数</a> 中可能的值。</dd>
+ <dt>{{domxref("IDBCursor.key")}} {{readonlyInline}}</dt>
+ <dd>返回记录中游标位置的有效主键。如果游标在区间之外，将会设置成 <code>undefined</code>。游标主键可以是任意的时间类型（data type）。</dd>
+ <dt>{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}</dt>
+ <dd>返回游标当前有效的主键。如果游标当前正在被迭代或者已经在迭代在区间范围外，将会被设置成 <code>undefined</code> 。 游标主键可以是任意的时间类型（data type）。</dd>
+</dl>
+
+<h2 id="Constants" name="Constants">常量</h2>
+
+<div>{{ obsolete_header(25) }}</div>
+
+<div class="warning">
+<p>这些常量不再被支持。你应该使用字符串常量。({{ bug(891944) }})</p>
+</div>
+
+<ul>
+ <li><code>NEXT </code>: <code>"next"</code> :游标展示所有记录，包括重复的记录。它从主键区间下届开始逐步上升（按键的顺序单调递增）。</li>
+ <li><code>NEXTUNIQUE</code> : <code>"nextunique"</code> : 游标展示所有记录，不包括重复的记录。如果同一个主键存在重复的记录，只有第一条迭代记录被取出。它从主键区间的下界开始逐步上升</li>
+ <li><code>PREV </code>: <code>"prev"</code> : 游标展示所有记录，包括重复的记录。它从主键区间上界开始逐步往下移动（按主键的顺序单调递减）</li>
+ <li><code>PREVUNIQUE </code>: <code>"prevunique"</code> :游标展示所有记录，不包括重复的记录。如果主键存在重复记录，只有第一个迭代记录被取出。它从主键区间上界开始逐步往下移动。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<p><span style="line-height: 1.5;">在这个简单的代码片段中，我们创建了一个事务和检索一个对象存储，之后使用一个游标遍历存储对象中所有的记录。游标不是必须使用主键来选则数据库，我们可以把它全部拿出来。同时需要注意在每次循环遍历中，你可以</span><span style="line-height: 1.5;">在当前记录下的游标对象中使用 </span> <span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">cursor.value.foo</code> 抓取数据。对于完整的工作示例，请查看我们的 <span style="line-height: 1.5;"><a href="https://github.com/mdn/IDBcursor-example/">IDBCursor example</a></span><span style="line-height: 1.5;"> (</span><a href="http://mdn.github.io/IDBcursor-example/" style="line-height: 1.5;">在线查看示例</a><span style="line-height: 1.5;">)。</span></p>
+
+<pre class="notranslate"><span style="line-height: 1.5;">function displayData() {</span>
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</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>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/zh-cn/web/api/idbcursor/key/index.html b/files/zh-cn/web/api/idbcursor/key/index.html
new file mode 100644
index 0000000000..573890a7fa
--- /dev/null
+++ b/files/zh-cn/web/api/idbcursor/key/index.html
@@ -0,0 +1,194 @@
+---
+title: IDBCursor.key
+slug: Web/API/IDBCursor/key
+translation_of: Web/API/IDBCursor/key
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p><strong>key</strong>是只读属性，返回在游标中的位置。如果游标在范围之外，这个值会被置为undefined。游标的key可以是任何数据类型。</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">var <em>key = cursor</em>.key;</pre>
+
+<h3 id="值">值</h3>
+
+<p>任意类型</p>
+
+<h2 id="示例">示例</h2>
+
+<p>在该示例中，我们创建一个事务，检索一个存储对象，然后使用游标遍历所有存储在object store 中的记录。遍历的过程中，我们把类似（相簿标题，这是我们的键key），游标的key打印出来。</p>
+
+<p>我们可以不根据游标的key来选取数据；我们可以抓取所有。还要注意，在循环的每个迭代中，您可以使用cursor.value.foo从当前记录下获取数据。完整示例，请看<span style="line-height: 1.5;"><a href="https://github.com/mdn/IDBcursor-example/">IDBCursor example</a></span><span style="line-height: 1.5;"> (</span><a href="http://mdn.github.io/IDBcursor-example/" style="line-height: 1.5;">view example live</a><span style="line-height: 1.5;">.)</span></p>
+
+<pre style="font-size: 14px;"><span style="line-height: 1.5;">function displayData() {</span>
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      console.log(cursor.key);
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">说明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBCursor-key', 'key')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbcursor-key", "key")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Binary keys</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Binary keys</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>