# HTML

**Repository Path**: logicwang/HTML

## Basic Information

- **Project Name**: HTML
- **Description**: HTML5/CSS3 学习仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-25
- **Last Updated**: 2022-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# learning-area

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

### 1. HTML

#### 1.1 HTML 初步

1. [示例](https://wangyf2020.gitee.io/html/html3/1.html)
[代码](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 表单示例：周的示例