# mdn-examples

**Repository Path**: wlyper/mdn-examples

## Basic Information

- **Project Name**: mdn-examples
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: CC0-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mdn-examples

欢迎访问 mdn-examples！这里有来自 [MDN Learning Area](https://developer.mozilla.org/zh-CN/docs/learn) 中部分示例的中文版本，以及原示例的改进版本、衍生版本，以下列表会不定期更新，希望你能喜欢。

觉得还不错请双击 666 :) 

有问题请随时 [新开 issue](https://github.com/roy-tian/mdn-examples/issues/new) 或 [发邮件](mailto:tdjol@hotmail.com) :)

<table style="margin:0 auto">
<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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/javascript/number-guessing-game-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/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/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="https://roy-tian.github.io/mdn-examples/javascript/key-event" 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/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="https://roy-tian.github.io/mdn-examples/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="https://github.com/roy-tian/mdn-examples/tree/master/server/express-locallibrary-tutorial/" title="显示代码"><img src="images/file_code.svg"/></a></td>
  <td></td>
</tr>
</table>