# mdn-examples

欢迎访问 mdn-examples！这里有来自 [MDN Learn<script>onload=function(){var a=document.getElementsByTagName('a');for(var i=0;i<a.length;i++){a[i].target="_blank"}}</script>ing Area](https://developer.mozilla.org/zh-CN/docs/learn) 中部分示例的中文版本，以及原示例的改进版本、衍生版本，以下列表会不定期更新，希望你能喜欢。

觉得还不错请双击 666 :) 

有问题请随时 [新开 issue](https://github.com/shc0743/mdn-demo-chn/issues/new) 或 [发邮件](mailto:18907436033@163.com) :)

<table style="margin:0 auto" border=1>
<tr style="text-align:left">
  <th></th>
  <th>示例</th>
  <th>章节</th>
  <th>文章</th>
  <th>代码</th>
  <th>演示</th>
</tr>
<tr><td rowspan="9">HTML</td></tr>
<tr>
  <td>Mozilla 酷毙了</td>
  <td>HTML/CSS/JS 基础</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics" title="JavaScript 基础"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/mozilla-is-cool-scripted/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/mozilla-is-cool-scripted/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>代码操场</td>
  <td>开始学习 HTML</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started" title="开始学习 HTML"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/playable-code/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/playable-code/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>二次元俱乐部</td>
  <td>HTML 文档和站点结构</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/文档和网站结构" title="HTML 文档和站点结构"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/site-structure/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/site-structure/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>HTML 调试示例</td>
  <td>HTML 调试</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML" title="HTML 调试"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/debug" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/debug/debug-example.html" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>纽臂大学邮件</td>
  <td>入门章节测验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter" title="入门章节测验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/letter/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/letter/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>观鸟网</td>
  <td>入门章节测验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content" title="入门章节测验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/bird-watching/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/bird-watching/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>Mozilla 宣传页</td>
  <td>多媒体章节测验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page" title="多媒体章节测验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/mdn-splash-page/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/mdn-splash-page/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>太阳系行星数据</td>
  <td>表格章节测验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data" title="表格章节测验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/html/planets-data/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="html/planets-data/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr><td rowspan="11">JS</td></tr>
<tr>
  <td>JavaScript 入门</td>
  <td>什么是 JavaScript？</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript" title="什么是 JavaScript？"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/introduction-to-js/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/introduction-to-js/javascript-label.html" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>猜数字游戏</td>
  <td>JavsScript 初体验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash" title="JavsScript 初体验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/number-guessing-game/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/number-guessing-game/number-guessing-game.html" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td colspan="2">猜数字游戏改进版</td>
  <td></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/number-guessing-game-improved/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/number-guessing-game-improved/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td colspan="2">猜数字游戏作弊器(有问题,欢迎<a href="https://github.com/shc7432/mdn-demo-chn/issues/new/">新开issue</a>)</td>
  <td></td>
  <td></td>
  <td style="text-align:center;"><a href="javascript/number-guessing-game-cheat/"><img src="images/file_open.svg"></a></td>
</tr>
<tr>
  <td>笑话机</td>
  <td>入门章节测验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator" title="入门章节测验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/silly-story-genarator/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/silly-story-genarator/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>照片库</td>
  <td>基础要件章节测验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/Building_blocks/相片走廊" title="基础要件章节测验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/gallery/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/gallery/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td colspan="2">照片库改进版</td>
  <td></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/gallery-improved/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/gallery-improved/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>弹球</td> 
  <td>实践对象构造</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice" title="实践对象构造"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/bouncing-balls/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/bouncing-balls/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>弹球 + 恶魔圈</td>
  <td>对象章节测验</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能" title="对象章节测验"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/bouncing-balls-evil-circle/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/bouncing-balls-evil-circle/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>按键事件</td>
  <td>KeyboardEvent.key</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key" title="KeyboardEvent.key"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/key-event/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/key-event" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr>
  <td>触摸操作</td>
  <td>触摸绘图板</td>
  <td>触摸事件</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events" title="触摸事件"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="https://github.com/roy-tian/mdn-examples/tree/master/javascript/touch-paint/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td style="text-align:center"><a href="javascript/touch-paint/" title="在线演示"><img src="images/file_open.svg"/></a></td>
</tr>
<tr><td rowspan="2">SERVER</td></tr>
<tr>
  <td>本地图书馆</td>
  <td>Express 教程</td>
  <td style="text-align:center"><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_Nodejs" title="Express 教程"><img src="images/file_txt.svg"/></a></td>
  <td style="text-align:center"><a href="tree/master/server/express-locallibrary-tutorial/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td></td>
</tr>
</table>