diff --git a/files/zh-cn/web/tutorials/index.md b/files/zh-cn/web/tutorials/index.md index 6d76265f93899a..52aa78b5dc12ed 100644 --- a/files/zh-cn/web/tutorials/index.md +++ b/files/zh-cn/web/tutorials/index.md @@ -1,126 +1,145 @@ --- title: 教程 slug: Web/Tutorials +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 --- -本页面上的链接通向各式各样的入门指导和培训教材。不管你是仅仅开始入门、学过些基础或者是个网站开发老手，你都能在这里找到有用的资源加以绝佳的练习。 +本页面涵盖着各式各样的教程和练习资料的链接。不管你是才入门，还是了解基础，抑或是 Web 开发老手，在这都能找到实用的最佳练习资源。 -这些资源都来自卓有远见的公司和乐于接受开放标准网站开发人员。这是网站开发的绝佳练习而且使用一种开放内容授权，比如[知识共享许可协议](https://www.mozilla.org/foundation/licensing/website-content.html)来提供并允许进行翻译。 +这些资源由卓有远见的公司和 Web 开发者创建（他们采用开放标准和最佳实践来开发 Web），并且这些资源通过知识共享（Creative Commons）等开放内容许可来提供且允许进行翻译 -## 对于学习 Web 的新手 +## 面向学习 Web 的纯新手 -[开始学习 Web](/zh-CN/docs/Learn/Getting_started_with_the_web) +- [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) + - : *Web 入门*是一套简明的，介绍 Web 开发实践的系列文章。你会安装构建简单网页和发布简单代码所需的工具。 -一系列介绍帮助你开始学习 Web 开发。你需要准备工具去创建一个简单的网页并发布你自己简单的代码。 +## HTML 教程 -## HTML 入门 +### 初级 -### 初级课程 - -- [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) - - : HTML 是什么，干什么，以及其简要历史，还有一个 HTML 文档的结构是什么样子的。其后的文章会更深入 HTML 的每一个部分。 -- [网页的基本构架](http://reference.sitepoint.com/html/page-structure) _（由出版社提供）_ - - : 学习 HTML 元素是如何组装在一起从而构成一个更大的图块的。 +- [介绍 HTML](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) + - : 本模块分为几个阶段：熟悉重要的概念和语法、在文本中应用 HTML、创建超链接、使用 HTML 构建网页。 - [MDN 的 HTML 元素参考](/zh-CN/docs/Web/HTML/Element) - - : 一个 HTML 元素综合性性参考，还有不同浏览器对它们的支持。 -- [HTML 挑战](http://wikiversity.org/wiki/Web_Design/HTML_Challenges)_（来自维基大学）_ - - : 参与这些挑战来巩固你的 HTML 技能。（例如，“我到底是应该使用一个 \

元素还是用 \ 呢？”）专注于有意义的小点滴。 - -### 高级课程 - -- [编写出能够快速加载 HTML 页面的小贴士](/zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages) - - : 优化网页，以减少你的 Web 服务器上的负载和网络连接和为游客提供一个响应迅速的网站。 -- [HTML5 入门](http://www.html5rocks.com/tutorials/)_（HTML5 Rocks）_ - - : 通过指南来指导使用 HTML5 特征来写代码。 -- [HTML5 语法](http://www.alistapart.com/articles/semanticsinhtml5/) _(分开的列表)_ - - : 学习那些可扩展和向后和向前兼容的有意义的标签语法。 -- [Canvas 入门](/zh-CN/docs/Canvas_tutorial) - - : 学习如何使用脚本和 canvas 标签来画图。 -- [HTML5 博士](http://html5doctor.com/) - - : HTML5 应用前线上的文章。 -- [HTML5 声音标签的乐趣](http://www.elated.com/articles/html5-audio/)_（兴趣勃勃啊）_ - - : 学习如何使用 HTML audio 标签简简单单地来把声音文件放到你的网页里去。在这里包含了很多代码范例。 - -## Javascript 入门 - -### 初级课程 - -- [Codecademy](http://www.codecademy.com/) *（*来自 Codecademy 网站*）* - - : Codecademy 是学习如何编写 JavaScript 最容易的方式。它互动、有趣，你能够和你的朋友们一起来学习。 -- [开始使用 JavaScript](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics) - - : JavaScript 是什么以及它如何帮助你？ -- [JavaScript 最佳实践](http://dev.opera.com/articles/view/javascript-best-practices/) _（来自 WebPlatform.org 网站）_ - - : 学习一些明显或者不是很明显的编写 JavaScript 最佳实践。 -- [CodeAvengers](http://codeavengers.com/)_（来自 CodeAvengers.com 网站）_ - - : Code Avengers（代码复仇者联盟）是一个有趣且高效的学习使用 HTML, CSS, and JavaScript 编写网络 apps 和游戏代码的好地方。 - -### 中级课程 - -- [JavaScript 再深入](/zh-CN/docs/Web/JavaScript/Language_overview) - - : 针对于中等水平的开发者的关于 Javascript 编程语言的一个回顾。 -- [Eloquent JavaScript](http://eloquentjavascript.net/contents.html) - - : 一本中级和高级 JavaScript 使用方法的全面指南。（译者注：简体中文版《JavaScript 编程精解》已由机械工业出版社华章公司出版发行） -- [必要的 JavaScript 设计模式](http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/) _(Addy Osmani)_ - - : 介绍基本的 JavaScript 设计模式。 -- [JavaScript 编程语言](http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/) _(YUI Blog)_ - - : Douglas Crockford 探讨了如今这个语言的情况，还有如何来实现。 + - : 完整的 HTML 元素参考以及不同浏览器的兼容性信息。 +- [用 HTML 创建简单的网页](https://www.theblogstarter.com/html-for-beginners/) + - : 一篇面向初学者的 HTML 指南——解释常见的标签，其中包含 HTML 标签。同时包含一篇带代码示例的分步指南——创建基础的网页。 +- [HTML 挑战](https://wikiversity.org/wiki/Web_Design/HTML_Challenges) + - : 这些挑战会打磨你的 HTML 技巧（例如，应该使用 \

元素还是 \ 元素？）——专注有意义的标记。 -### 高级课程 +### 中级 -- [JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide) - - : 一个为所有的学习者从初级到高级的全面、定期更新的 JavaScript 指南。 -- [学习高级别的 JavaScript](http://ejohn.org/apps/learn/) _(John Resig)_ - - : John Resig 的高级 JavaScript 指南。 -- [介绍 JavaScript DOM](http://www.elated.com/articles/javascript-dom-intro/) (Elated) - - : DOM 是什么，以及为什么有用？这篇文章将向你介绍 Javascript 这一强大功能。 -- [一个麻烦的 API : DOM 理论](http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/) (YUI Blog) - - : Douglas Crockford 解释文件对象模型。 -- [Javascript 进阶](http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/) (YUI Blog) - - : Douglas Crockford 审视代码的模式，以便程序员在创建应用的时候可以选择。 -- [JavaScript 花园](http://bonsaiden.github.com/JavaScript-Garden/) - - : 关于 Javascript 最古怪部分的资料。 -- [非阻塞 JavaScript 加载](http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/) (YUI Blog) - - : 提高含 Javascript 页面加载性能的一些提示。 - -## CSS 入门 - -### 初级课程 - -- [CSS 入门](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics) - - : 这个教程向你介绍层叠样式表（CSS），通过具体的实例引导你熟悉基本的 CSS 功能，你可以试着在自己电脑上练习这些实例。 -- [CSS 类选择器](http://en.wikiversity.org/wiki/Web_Design/CSS_Classes) (来自维基大学) - - : 在 CSS 里类是什么？ -- [外部 CSS](http://en.wikiversity.org/wiki/Web_Design/External_CSS) (来自维基大学) - - : 从外部样式表使用 CSS。 -- [添加一点样式](https://www.w3.org/MarkUp/Guide/Style) (W3C) - - : 入门介绍使用 CSS 样式化网页。 -- [常见 CSS 问题](/zh-CN/docs/Learn/CSS/Howto/CSS_FAQ) - - : 初学者一些常见问题和解答。 -- [代码复仇者](http://codeavengers.com/) (CodeAvengers.com) - - : 代码复仇者用有趣、高效的方式学习使用 HTML，CSS，JavaScript 开发 Web 应用和游戏。 - -### 中级课程 +- [多媒体和嵌入](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding) + - : 本模块探索了在网页中如何使用 HTML 嵌入多媒体，包含：不同的嵌入图像的方法，以及嵌入视频、音频，甚至完整的其它网页的方式。 +- [HTML 表格](/zh-CN/docs/Learn/HTML/Tables) + - : 在网页中以一种{{glossary("Accessibility", "易懂的")}}的方式展示表格数据是个挑战。本模块涵盖的内容是：基本的表格标记，以及复杂一点的特性（诸如标题和摘要）。 + +### 高级 + +- [HTML 表单](/zh-CN/docs/Learn/Forms) + - : 表单是 Web 中非常重要的一部分——其提供了网站交互所需的很多功能，例如，注册、登录、发送反馈、购买产品，等等。在本模块中你会学习如何创建客户端表单。 +- [让 HTML 页面加载快的技巧](/zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages) + - : 网页优化能为用户提供一个响应更好的站点，能减少 Web 服务器和互联网连接的加载时间。 + +## CSS 教程 + +### 初级 + +- [CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics) + - : CSS（层叠样式表）用于为网页添加样式。*CSS 基础*将带你了解入门所需的内容。本文回答了如下问题：如何把文本变成黑色或者红色？怎么将内容显示到屏幕上的特定位置？怎么用背景图像或者颜色装饰网页？ +- [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) + - : CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。在前往掌握 CSS 基础知识（CSS 的运作方式，CSS 语法是什么样子，在 HTML 中如何使用 CSS 添加样式）的道路上，本模块是一个很好的开始。 +- [CSS 构建块](/zh-CN/docs/Learn/CSS/Building_blocks) + + - : 本模块承接 [CSS 入门](/zh-CN/docs/Learn/CSS/First_steps)——这时你已经熟悉 CSS 语言及其语法、有了基本的使用经验，是时候再深入一些。在本模块中，你会学习层叠和继承、可用的选择器类型、单位、大小、为背景和边框添加样式、调试，以及其它内容。 + + 本文的目的是，在了解诸如[为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text)和 [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)等特定领域的知识之前，提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。 + +- [选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors) + + - : 用 CSS 定位 HTML 元素，其中包含带状态的元素。 +- [优先级](/zh-CN/docs/Web/CSS/Specificity) + + - : 通过[优先级测验](https://estelle.github.io/CSS/selectors/exercises/specificity.html)了解浏览器算法在遇到存在冲突的 CSS 声明时会决定将哪个声明应用到元素上。 + +- [层叠与继承](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) + + - : 层叠、优先级和继承决定了 CSS 会如何应用于 HTML 中，以及如何解决样式声明冲突。 + +- [为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text) + - : 本文介绍了为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在本模块中，还会学习的内容有：在页面中应用自定义字体、为列表和链接添加样式。 +- [CSS 常见问题](/zh-CN/docs/Learn/CSS/Howto/CSS_FAQ) + - : 面向初学者的常见问题和回答。 + +### 中级 + +- [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout) + - : 看到这儿，你已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。必要的前置知识已经具备，此时你可以深入 CSS 布局，学习不同的显示设置、传统的布局方式（使用浮动和定位）、新发明的布局工具（如弹性盒）。 - [CSS 参考](/zh-CN/docs/Web/CSS/Reference) - - : CSS 完整参考，包含 Firefox 和另外浏览器支持的详细信息。 -- [CSS 挑战](http://en.wikiversity.org/wiki/Web_Design/CSS_challenges) (维基大学) - - : 让你的 CSS 技巧更灵活，看你是否需要更多的练习。 -- [中级 CSS 概念](http://www.html.net/tutorials/css/) (HTML.net) - - : 分组，伪类等等。 -- [CSS 定位 101](http://www.alistapart.com/articles/css-positioning-101/) (A List Apart) - - : 使用符合标准的定位，无表布局。 -- [CSS 渐进增强](http://www.alistapart.com/articles/progressiveenhancementwithcss/) (A List Apart) - - : 把 CSS 渐进增强结合到你的网页。 -- [流体网格](http://www.alistapart.com/articles/fluidgrids/) (A List Apart) - - : 设计根据浏览器窗口自适应布局，同时使用一个字体网格。 - -### 高级课程 - -- [应用 CSS 转换](/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) - - : 使用 CSS 旋转、倾斜、缩放和变换。 + - : 完整的 CSS 参考，以及火狐和其它浏览器的兼容性信息。 +- [流式网格](https://alistapart.com/article/fluidgrids/) + - : 设计一种能随着浏览器窗口大小变化而流畅地调整大小的布局，且仍使用排版网格。 +- [CSS 挑战](https://en.wikiversity.org/wiki/Web_Design/CSS_challenges) + - : 展示你的 CSS 技巧，看看哪些地方还需要加强练习。 + +### 高级 + +- [使用 CSS 变换](/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) + - : 用 CSS 实现旋转、倾斜、缩放和平移。 - [CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) - - : CSS 过渡是 CSS3 草案规范的一部分，提供了渐变动画来改变 CSS 属性，而不是突变生效。 -- [应用网页字体快速指南 - 使用 @font-face](http://www.html5rocks.com/tutorials/webfonts/quick/) (HTML5 Rocks) - - : 来自 CSS3 的 @font-face 功能，允许你以可访问的，可操作的，易扩展的方式使用 web 上的自定义字体。 -- [开始写 CSS](http://davidwalsh.name/starting-css) (David Walsh) - - : 介绍工具和方法来写更简洁，易维护和可扩展的 CSS。 + - : CSS 过渡提供一种以动画的形式来改变 CSS 属性的方式，而非让改变立即生效。 +- [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial) + - : 学习如何使用画布元素和脚本绘制图形。 + +## JavaScript 教程 + +### 初级 + +- [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps) + - : 在第一个 JavaScript 模块中，你会了解一些基础知识，例如，JavaScript 是什么、JavaScript 是什么样、JavaScript 能做什么。然后你会体验初次编写 JavaScript。紧接着，你会详细地学习一些关键的 JavaScript 特性，例如，变量、字符串、数字和数组。 +- [创建 JavaScript 代码块](/zh-CN/docs/Learn/JavaScript/Building_blocks) + - : 在本模块中，你会继续学习关键的 JavaScript 基础特性，注意力会转向常见的代码块类型，例如，条件语句、循环、函数和事件。这些概念在课程中早已见过，但只是一扫而过——这里会明确地讨论这些概念。 +- [开始学习 JavaScript](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics) + - : JavaScript 是什么、JavaScript 如何帮助你？ +- [Codecademy](https://www.codecademy.com/) + - : 在 Codecademy 学习如何编写 JavaScript 很容易。Codecademy 提供了交互界面，你可以和你的朋友一起学。 +- [freeCodeCamp](https://www.freecodecamp.org/learn) + - : freeCodeCamp 教授大量的语言和 Web 开发框架。还有对应的[论坛](https://forum.freecodecamp.org/)、[互联网电台](https://coderadio.freecodecamp.org)和[博客](https://www.freecodecamp.org/news)。 + +### 中级 + +- [介绍 JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects) + - : 在 JavaScript 中，对象普遍存在，从核心 JavaScript 特性（如字符串和数组）到构建于 JavaScript 之上的浏览器 API。你甚至可以自己创建对象，将相关的函数和变量高效地封装起来。如果你想深入了解 JavaScript 并编写更高效的代码，那么理解 JavaScript 的面向对象的特性非常重要。本模块会讲解这方面的知识。你会学习对象理论和语法的细节，学习如何创建对象，学习 JSON 数据是什么以及如何使用 JSON。 +- [客户端 Web API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs) + - : 为网站或应用编写客户端 JavaScript 代码时，如果不使用 API——操纵浏览器和站点的运行环境所处的操作系统的各个方面的接口或甚至是来自其它网站或服务的数据，你将寸步难行。在本模块中，你会学习 API 是什么、如何使用一些在开发工作中最常见的 API。 +- [JavaScript 编程精解](https://eloquentjavascript.net/) + - : 中高级 JavaScript 方法论的综合指南。 +- [大话 JavaScript](https://exploringjs.com/es5/) + - : 面向想又快又好地学习 JavaScript 的程序员，也面向想提升技能或寻找特定主题的 JavaScript 程序员。 +- [基本的 JavaScript 设计模式](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) + - : 介绍基本的 JavaScript 设计模式。 +- [JavaScript.info——现代 JavaScript 教程](https://zh.javascript.info/) + - : 卷一：语言。卷二：在浏览器中如何使用 JavaScript。 + +### 高级 + +- [JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide) + - : 一份全面且经常更新的 JavaScript 指南，面向从初级到高级的学习者。 +- [你不了解 JS](https://github.com/getify/You-Dont-Know-JS) + - : 深入 JavaScript 语言核心机制的系列书籍。 +- [JavaScript 花园](https://github.com/BonsaiDen/JavaScript-Garden) + - : JavaScript 中最古怪部分的文档。 +- [探索 ES6](https://exploringjs.com/es6/) + - : 和 ECMAScript 2015 相关的靠谱且有深度的信息。 +- [JavaScript 模式](https://github.com/chuanxshi/javascript-patterns) + - : JavaScript 模式和反模式合集：涵盖函数模式、jQuery 模式、jQuery 插件模式、设计模式、通用模式、字面量和构造函数模式、对象创建模式、代码复用模式、DOM。 +- [浏览器的工作方式](https://web.dev/articles/howbrowserswork) + - : 一篇详细的研究文章：内容涵盖不同的现代浏览器、引擎、页面渲染等等。 +- [JavaScript 视频](https://github.com/bolshchikov/js-must-watch) + - : 必看的 JavaScript 视频合集。 + +### 扩展开发 + +- [Web 扩展](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) + - : Web 扩展是一种用于开发浏览器附加组件的跨浏览器系统。很大程度上，该系统与谷歌 Chrome 和 Opera 支持的[扩展 API](https://developer.chrome.com/docs/extensions/reference/) 是兼容的。为这些浏览器编写的扩展在大多数情况下[仅需一点改动](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/)就能在火狐或[微软 Edge](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/) 上运行。这些 API 与[多进程版本的火狐](https://wiki.mozilla.org/Firefox/multiprocess)也完全兼容。