# learning-area

**Repository Path**: mirrors_winneryong/learning-area

## Basic Information

- **Project Name**: learning-area
- **Description**: MDN 学习区示例中文版
- **Primary Language**: Unknown
- **License**: CC0-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-04-01
- **Last Updated**: 2025-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# learning-area

欢迎访问 [MDN 学习区](https://developer.mozilla.org/zh-CN/Learn) Github 仓库中文版。

这里有学习区中展示、讨论的大部分示例代码，本 repo 文件夹结构与网站结构保持一致。

英文版中 [Web 入门](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web) 等示例是单独的 repos，本 repo 一并收录。

以下内容不定期更新，希望你能喜欢。

----

## 汉化目录

### 0. Web 入门

1. [示例](https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/getting-started-web/beginner-html-site)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics) |
HTML 基础：Mozilla 酷毙了
2. [示例](https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site-styled)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/getting-started-web/beginner-html-site-styled) 
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics) |
CSS 基础：Mozilla 酷毙了（样式版）
3. [示例](https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site-scripted)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/getting-started-web/beginner-html-site-scripted)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics) |
JavaScript 基础：Mozilla 酷毙了（脚本版）

### 1. HTML

#### 1.1 HTML 初步

1. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/getting-started)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/getting-started)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started) |
开始学习 HTML
2. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/the-html-head/css-and-js.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/the-html-head/css-and-js.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) |
HTML 元数据
3. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/html-text-formatting/text-complete.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/html-text-formatting/text-complete.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) |
HTML 文字处理：菜谱
4. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/advanced-text-formatting/other-semantics.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/advanced-text-formatting/)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) |
HTML 高阶文字处理
5. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/creating-hyperlinks)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) |
HTML 超链接：创建超链接
6. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/navigation-menu-marked-up)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) |
HTML 超链接：示例站点
7. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/document-and-website-structure)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/document-and-website-structure)
[章节](https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/文件和网站结构) |
文档和站点结构：二次元俱乐部
8. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/debugging-html/debug-example.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/debugging-html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) |
HTML 调试
9. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/marking-up-a-letter-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/marking-up-a-letter-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML) |
章节测验：纽臂大学邮件
10. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/structuring-a-page-of-content-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/structuring-a-page-of-content-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) |
章节测验：观鸟网

#### 1.2 HTML 多媒体和嵌入元素

1. [示例](https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/images-in-html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/images-in-html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) |
HTML 中的图片
2. [示例](https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) |
视频和音频
3. [示例](https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/adding-vector-graphics-to-the-web)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) |
向量图形
4. [示例](https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/mdn-splash-page-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) |
章节测验：Mozilla 宣传页

#### 1.3 HTML 表格

1. [示例](https://roy-tian.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/basic/dogs-table-fixed.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Basics) |
HTML表格基础：狗的表格
2. [示例](https://roy-tian.github.io/learning-area/html/tables/basic/animals-table-fixed.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/basic/animals-table-fixed.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Basics) |
HTML表格基础：动物表格
3. [示例](https://roy-tian.github.io/learning-area/html/tables/basic/timetable-fixed.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/basic/timetable-fixed.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Basics) |
HTML表格基础：课程表
4. [示例](https://roy-tian.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/basic/personal-pronouns-styled.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Basics) |
HTML表格基础：人称代词表
5. [示例](https://roy-tian.github.io/learning-area/html/tables/advanced/nested-tables.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/advanced/nested-tables.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Advanced) |
HTML表格高阶：嵌套表格
6. [示例](https://roy-tian.github.io/learning-area/html/tables/advanced/items-sold-headers.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/advanced/personal-pronouns-styled.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Advanced) |
HTML表格高阶：销售统计
7. [示例](https://roy-tian.github.io/learning-area/html/tables/advanced/spending-record-finished.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/advanced/spending-record-finished.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Advanced) |
HTML表格高阶：消费记录
8. [示例](https://roy-tian.github.io/learning-area/html/tables/assessment-finished/planets-data.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/assessment-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data) |
章节测验：太阳系行星数据

#### 1.4 表单

1. [示例](https://roy-tian.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/your-first-HTML-form/first-form-styled.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form) |
创建我的第一个表单
2. [示例](https://roy-tian.github.io/learning-area/html/forms/html-form-structure/payment-form.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/html-form-structure/payment-form.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form) |
付费表单示例
3. [示例](https://roy-tian.github.io/learning-area/html/forms/form-validation/full-example.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/form-validation/full-example.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Data_form_validation) |
表单数据校验
4. [示例](https://roy-tian.github.io/learning-area/html/forms/native-form-widgets/advanced-examples.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/native-form-widgets/advanced-examples.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
本地表单控件
5. [示例](https://roy-tian.github.io/learning-area/html/forms/pseudo-classes/enabled-disabled-shipping.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/pseudo-classes/enabled-disabled-shipping.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
伪类：启用/禁用
6. [示例](https://roy-tian.github.io/learning-area/html/forms/pseudo-classes/valid-invalid.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/pseudo-classes/valid-invalid.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
伪类：表单校验
7. [示例](https://roy-tian.github.io/learning-area/html/forms/basic-input-examples/index.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/basic-input-examples/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：基础输入
8. [示例](https://roy-tian.github.io/learning-area/html/forms/color-example/index.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/color-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：色彩
9. [示例](https://roy-tian.github.io/learning-area/html/forms/datetime-local-picker-fallback/index.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/datetime-local-picker-fallback/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：日期选择（兼容版）
10. [示例](https://roy-tian.github.io/learning-area/html/forms/file-examples/file-example.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/file-examples/file-example.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：文件选择
11. [示例](https://roy-tian.github.io/learning-area/html/forms/indeterminate-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/indeterminate-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：回调
12. [示例](https://roy-tian.github.io/learning-area/html/forms/month-examples/month-validation.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/month-examples/month-validation.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：月份测试
13. [示例](https://roy-tian.github.io/learning-area/html/forms/number-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/number-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：数字
14. [示例](https://roy-tian.github.io/learning-area/html/forms/range-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/range-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：选择范围
15. [示例](https://roy-tian.github.io/learning-area/html/forms/number-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/number-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：数字
16. [示例](https://roy-tian.github.io/learning-area/html/forms/styling-examples/appearence-tester.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/styling-examples/appearence-tester.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：表单样式
17. [示例](https://roy-tian.github.io/learning-area/html/forms/styling-examples/ugly-controls.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/styling-examples/ugly-controls.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：控件样式
18. [示例](https://roy-tian.github.io/learning-area/html/forms/tel-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/tel-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：电话号码
19. [示例](https://roy-tian.github.io/learning-area/html/forms/text-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/text-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：文本
20. [示例](https://roy-tian.github.io/learning-area/html/forms/toggle-switch-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/toggle-switch-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：开关
21. [示例](https://roy-tian.github.io/learning-area/html/forms/url-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/url-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：URL
22. [示例](https://roy-tian.github.io/learning-area/html/forms/week-example/)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/forms/week-example/index.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) |
HTML 表单示例：周的示例


### 3. JavaScript

#### 3.1 JavaScript 初步

1. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html) 
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/what-is-js)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript) |
什么是 JavaScript
2. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/first-splash)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash) |
JavaScript 初体验：猜数字游戏
3. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/maths/conditional.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Math#比较运算符) |
JavaScript 比较运算符：状态机
4. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional2.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/maths/conditional2.html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Math#比较运算符) |
JavaScript 比较运算符：今天心情如何
5. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/assessment-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator) |
章节测验：笑话机

#### 3.2 JavaScript 基础要件

1. [示例](https://roy-tian.github.io/learning-area/javascript/building-blocks/gallery)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/building-blocks/gallery)
[章节](https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/Building_blocks/相片走廊) |
章节测验：照片库

#### 3.3 JavaScript 对象

1. [示例](https://roy-tian.github.io/learning-area/javascript/oojs/bouncing-balls)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/bouncing-balls)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice) |
实践对象构造：弹球
2. [示例](https://roy-tian.github.io/learning-area/javascript/oojs/assessment)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/assessment)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能) |
章节测验：弹球 + 恶魔圈
3. [示例](https://roy-tian.github.io/learning-area/javascript/oojs/assessment-es-class)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/assessment-es-class)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能) |
章节测验：弹球 + 恶魔圈（ES6 版）

### A. 其他工具

1. [示例](https://roy-tian.github.io/learning-area/extras/tools/playable-code)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/playable-code)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics) |
Web 入门：代码操场
2. [示例](https://roy-tian.github.io/learning-area/extras/tools/color-picker)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/color-picker)
[章节](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Colors/Color_picker_tool) |
CSS 颜色选择工具
3. [示例](https://roy-tian.github.io/learning-area/extras/tools/key-event)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/key-event)
[章节](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key) |
按键事件
4. [示例](https://roy-tian.github.io/learning-area/extras/tools/touch-paint)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/touch-paint)
[章节](https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events) |
触摸绘图板