From 8a277066e7d4d4fa3db6c7fda8dc1ee46f9dff9e Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Sat, 14 Sep 2024 16:24:45 +0800 Subject: [PATCH 1/7] update --- files/zh-cn/learn/accessibility/index.md | 26 ++++++++--------- files/zh-cn/learn/common_questions/index.md | 2 +- files/zh-cn/learn/css/index.md | 28 +++++++++---------- files/zh-cn/learn/forms/index.md | 10 +++---- .../getting_started_with_the_web/index.md | 2 +- 5 files changed, 34 insertions(+), 34 deletions(-) diff --git a/files/zh-cn/learn/accessibility/index.md b/files/zh-cn/learn/accessibility/index.md index 302e5de4ff9d4d..09b5aec254e1e2 100644 --- a/files/zh-cn/learn/accessibility/index.md +++ b/files/zh-cn/learn/accessibility/index.md @@ -7,17 +7,17 @@ l10n: {{LearnSidebar}} -如果你想成为一名 Web 开发者，学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外，重要的是学习如何**负责任**地使用这些技术，让所有用户能在 Web 使用你的作品。为了帮你实现这个目标，本模块涉及常见的最佳实践（在 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 专题中有所体现），以及大量和严格执行无障碍有关的技巧。接下来会详细介绍无障碍。 +如果你想成为一名 Web 开发者，学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外，重要的是学习如何**负责任**地使用这些技术，让所有用户能在 Web 上使用你的作品。为了帮你实现这个目标，本模块涉及常见的最佳实践（在 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题中有所体现），以及一些严格执行无障碍的技巧。接下来会特别详细地介绍无障碍。 ## 概述 -当有人将一个网站描述为“无障碍”时，意味着不论用户访问 Web 的方式如何，任何一个用户（甚至是有身体或精神障碍的用户）都能使用网站全部的特性和内容。 +当有人将一个网站描述为“无障碍”时，意味着不论访问 Web 的方式如何，任何一个用户（甚至是有身体或精神障碍的用户）都能使用网站全部的特性和内容。 -- 使用键盘、鼠标和触摸屏的用户，以及使用任意其他方式（包括屏幕阅读器和诸如 Alexa 和 Google Home 等的语音助手）访问 Web 的用户都应该能访问网站。 +- 使用键盘、鼠标和触摸屏的用户，以及使用任何其他方式（包括屏幕阅读器和诸如 Alexa 和 Google Home 等的语音助手）访问 Web 的用户都应该能访问网站。 - 无论人们的听觉、视觉、身体或认知能力如何，都应该能理解和使用应用程序。 - 网站也不应该造成伤害：像动画（motion）这样的 Web 特性会导致偏头痛或癫痫发作。 -**默认情况下，HTML 在使用得当的情况下是无障碍的**。Web 无障碍关乎 Web 内容无论由谁以何种方式访问都能保证是无障碍的。 +**默认情况下，HTML 在使用得当的情况下是无障碍的**。Web 无障碍涉及确保内容无论由谁以何种方式访问都是无障碍的。 要检查 Web 页面上的无障碍问题时，火狐无障碍检查器是一个非常实用的工具。下面的视频对它进行了很好的介绍： @@ -25,7 +25,7 @@ l10n: ## 前提 -要充分理解本模块，你至少需要读过 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 专题的前两个模块，或者在读相关技术专题时，读过无障碍模块的相关部分（这样或许会更好）。 +为了充分理解本模块，最好先完成 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块，或者更好的做法是，在你学习相关技术主题的同时，完成无障碍模块的相关部分。 > [!NOTE] > 如果你工作的计算机/掌上电脑/其他设备无法创建文件，可以使用在线编码程序（例如，[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)）实验大多数代码示例。 @@ -33,29 +33,29 @@ l10n: ## 指南 - [什么是无障碍？](/zh-CN/docs/Learn/Accessibility/What_is_accessibility) - - : 本模块的第一篇文章深入介绍无障碍是什么——包括：我们需要考虑哪一群人，为什么要考虑这些人，不同的人使用什么工具与 Web 交互，以及我们如何构建 Web 开发工作流的无障碍部分。 + - : 这篇文章从什么是无障碍开始，详细介绍了我们需要考虑哪一群人，为什么要考虑这些人，不同的人使用什么工具与 Web 交互，以及如何将无障碍融入到我们的 Web 开发工作流程中。 - [HTML：无障碍的良好基础](/zh-CN/docs/Learn/Accessibility/HTML) - - : 只要确保正确的 HTML 元素被用于正确的目的，大量的 Web 内容就是无障碍的。这篇文章详细讲述 HTML 是如何确保最大程度的无障碍。 + - : 大量的 Web 内容只要确保正确的 HTML 元素来实现正确的目的，就是无障碍的。这篇文章详细讲述 HTML 是如何确保最大程度的无障碍。 - [CSS 和 JavaScript 无障碍最佳实践](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript) - - : 当正确使用 CSS 和 JavaScript 时，也能提供无障碍的 Web 体验，但错用的话，会极大地破坏无障碍。这篇文章概括了大量的 CSS 和 JavaScript 最佳实践，这些实践能确保甚至是复杂内容也尽可能是无障碍的。 + - : CSS 和 JavaScript 如果使用得当，也有潜力实现无障碍的 Web 体验，但如果使用不当，它们会严重损害无障碍。这篇文章概述了一些应该考虑的 CSS 和 JavaScript 最佳实践，以确保即使复杂的内容也能尽可能是无障碍的。 - [WAI-ARIA 基础](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics) - - : 接着上一篇文章，有时制作复杂的 UI 控件（涉及非语义化的 HTML 和使用 JavaScript 动态的更新内容）很难。WAI-ARIA 是通过添加额外的语义（浏览器和辅助技术能识别和使用这些语义让用户知道正在发生什么）来解决这类问题的技术。这篇文章以基础级别的视角讲解如何使用它来改善无障碍。 + - : 接着上一篇文章，有时制作复杂的 UI 控件（涉及非语义化的 HTML 和使用 JavaScript 动态的更新内容）可能很难。WAI-ARIA 是通过添加额外的语义（浏览器和辅助技术能识别和使用这些语义让用户知道正在发生什么）来解决这类问题的技术。在这里，我们将从基础级别的视角展示如何使用它来提高无障碍。 - [多媒体无障碍](/zh-CN/docs/Learn/Accessibility/Multimedia) - - : 会出现无障碍问题的另一类内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代，这样辅助技术和相应的用户就能理解这些内容。本文将介绍如何做到这一点。 + - : 另一类会出现无障碍问题的内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代，这样辅助技术和相应的用户就能理解这些内容。这篇文章将介绍如何做到这一点。 - [移动端无障碍](/zh-CN/docs/Learn/Accessibility/Mobile) - - : 随着用移动设备访问 Web 变得流行，以及主流平台（例如，iOS 和安卓）拥有完备的无障碍工具，为这些平台上的 Web 内容考虑无障碍是重要的。这篇文章讲解移动设备相关的无障碍注意事项。 + - : 随着用移动设备访问 Web 变得流行，以及主流平台（例如，iOS 和安卓）拥有完备的无障碍工具，考虑这些平台上的 Web 内容的无障碍非常重要。这篇文章讲解移动设备相关的无障碍注意事项。 ## 评估 - [无障碍诊断](/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting) - - : 在本模块的评估环节，会向你展示带有几个无障碍问题的简单站点，你需要诊断并修复这些问题。 + - : 在本模块的评估环节，会向你展示一个包含多个无障碍问题的简单站点，你需要诊断并修复这些问题。 ## 参见 - [学习无障碍 Web 设计](https://v2.scrimba.com/learn-accessible-web-design-c031?via=mdn) **MDN 课程合作伙伴** - : [Scrimba](https://scrimba.com?via=mdn) 的*学习无障碍 Web 设计*课程通过解决交互式编码挑战和修复真实网站的方式教授如何编写无障碍的 HTML。 - [现在开始构建无障碍的 Web 应用](https://egghead.io/courses/start-building-accessible-web-applications-today) - - : 来自 Marcy Sutton 的优秀视频教程系列。 + - : 来自 Marcy Sutton 的优秀的视频教程系列。 - [Deque University 资源](https://dequeuniversity.com/resources/) - : 包含代码示例、屏幕阅读器参考和其他实用的资源。 - [WebAIM 资源](https://webaim.org/resources/) diff --git a/files/zh-cn/learn/common_questions/index.md b/files/zh-cn/learn/common_questions/index.md index 264e4f1ecf06f0..cd11626e90378a 100644 --- a/files/zh-cn/learn/common_questions/index.md +++ b/files/zh-cn/learn/common_questions/index.md @@ -7,7 +7,7 @@ l10n: {{LearnSidebar}} -学习区的本部分是为可能会遇到的常见问题提供答案，而这些问题不必是结构化的核心学习路径的部分（例如，[HTML](/zh-CN/docs/Learn/HTML) 或 [CSS](/zh-CN/docs/Learn/CSS) 中的学习文章）。这些文章专注于它们自己的内容。 +这个学习区为可能会遇到的常见问题提供答案，而这些问题不必是结构化的核心学习路径的一部分（例如，[HTML](/zh-CN/docs/Learn/HTML) 或 [CSS](/zh-CN/docs/Learn/CSS) 中的学习文章）。这些文章专注于它们自己的内容。 - [HTML 问题](/zh-CN/docs/Learn/HTML/Howto) - [CSS 问题](/zh-CN/docs/Learn/CSS/Howto) diff --git a/files/zh-cn/learn/css/index.md b/files/zh-cn/learn/css/index.md index 19c8fc5d7f26d7..2a16910fdbea9b 100644 --- a/files/zh-cn/learn/css/index.md +++ b/files/zh-cn/learn/css/index.md @@ -7,48 +7,48 @@ l10n: {{LearnSidebar}} -层叠样式表——或 {{glossary("CSS")}}——是你在学完 {{glossary("HTML")}} 之后应该学习的第一门技术。HTML 用于为你的内容定义结构和语义，CSS 用于为内容提供样式和对内容进行布局。例如，你可以使用 CSS 更改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。 +层叠样式表——或 {{glossary("CSS")}}——是你应该在学完 {{glossary("HTML")}} 之后开始学习的第一门技术。HTML 用于为你的内容定义结构和语义，CSS 用于为内容提供样式和对内容进行布局。例如，你可以使用 CSS 更改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。 ## 前提 -在尝试 CSS 之前，你应该学习 HTML 的基础知识。我们建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。 +在尝试 CSS 之前，你应该先学习 HTML 的基础知识。我们建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。 -一旦你理解了 HTML 的基础知识，我们就建议你同时更深入地学习 HTML 和 CSS，在这两个专题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。并且不了解 HTML 的话，也无法学习 CSS。 +一旦你理解了 HTML 的基础知识，我们就建议你同时学习更多的 HTML 和 CSS，在这两个主题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。而且不了解 HTML 的话，也无法学习 CSS。 -在开始本专题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照[安装基础软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境，以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。 +在开始本主题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境，以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——这两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。 -在开始本专题之前，还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，尤其当你是 Web 开发的纯新手的话。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及，而且更详细。 +在开始本主题之前，还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，特别是如果你完全不熟悉 Web 开发的话。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及，而且更详细。 ## 模块 -本专题包含以下模块，建议按顺序学习这些模块。你应该从第一个模块开始。 +本主题包含以下模块，建议按顺序学习。你应该从第一个开始。 - [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) - - : CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。在前往掌握 CSS 基础知识（CSS 的运作方式，CSS 语法是什么样子，在 HTML 中如何使用 CSS 添加样式）的道路上，本模块是一个很好的开始。 + - : CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。这个模块为你提供了通向 CSS 精通之路的温和开始，介绍了它的工作原理、语法是什么样的，以及如何开始使用它为 HTML 添加样式。 - [CSS 构建块](/zh-CN/docs/Learn/CSS/Building_Blocks) - - : 本模块承接 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)——这时你已经熟悉 CSS 语言及其语法，有了基本的使用经验，是时候再深入一些。在本模块中，你会学习层叠和继承、可用的选择器类型、单位、大小、为背景和边框添加样式、调试，以及其它内容。 + - : 这个模块承接 [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/Styling_text) - - : 在学完 CSS 语言的基础知识后，下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。本文介绍了为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在本模块中，还会学习的内容有：在页面中应用自定义字体、为列表和链接添加样式。 + - : 在学完 CSS 语言的基础知识后，下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。在这里，我们会探讨为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。我们通过探讨在页面中应用自定义字体和为列表和链接添加样式结束这个模块。 - [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout) - - : 看到这儿，你已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。必要的前置知识已经具备，此时你可以深入 CSS 布局，学习不同的显示设置、现代的布局工具（如弹性盒、CSS 网格）、定位，以及一些你可能仍想了解的传统技术。 + - : 看到这儿，我们已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。我们已经涵盖了必要的前置知识，现在可以深入探讨 CSS 布局，学习不同的显示设置、现代的布局工具（如弹性盒、CSS 网格）、定位，以及你可能仍想了解的一些传统技术。 ## 解决常见的 CSS 问题 [使用 CSS 解决常见问题](/zh-CN/docs/Learn/CSS/Howto)提供了用于解释如何使用 CSS 解决创建网页时常遇到的问题的内容的链接。 -刚开始，你主要是为 HTML 元素及其背景应用颜色，改变元素的大小、形状和位置，为元素添加和定义边框。但这并不是你唯一能做的，只要你对 CSS 的基础知识有了坚实的理解的话。学习 CSS 最棒的事情之一就是，一旦你了解了基础，即使你还不知道如何做，通常会对能做的和不能做的有一个很好的感知。 +刚开始，你主要是为 HTML 元素及其背景应用颜色，改变元素的大小、形状和位置，为元素添加和定义边框。但是，一旦你对 CSS 的基础知识有了扎实的理解，几乎没有什么是你不能做的。学习 CSS 最棒的事情之一就是，一旦你了解了基础，即使你还不知道如何做，通常会对能做的和不能做的有一个很好的感知。 ## “CSS 真奇怪” -CSS 与你接触到的大多数编程语言和设计工具的运作方式有点不同。CSS 为什么以这种方式运作？在下面的视频中，对 CSS 为什么这样运作以及 CSS 为什么演变成这样做了很好的解释： +CSS 的工作方式与你接触到的大多数编程语言和设计工具有点不同。CSS 为什么以这种方式工作？在下面的视频中，Miriam Suzanne 对 CSS 为什么这样工作以及 CSS 为什么演变成这样做了很好的解释： {{EmbedYouTube("aHUtMbJw8iA")}} ## 参见 -- [MDN 上的 CSS 文档](/zh-CN/docs/Web/CSS) - - : MDN 上 CSS 文档的主入口，在这里可以找到 CSS 语言全部特性的详细参考文档。想要了解某个属性可以取的所有值吗？这是一个很好的去处。 +- [MDN 上的 CSS](/zh-CN/docs/Web/CSS) + - : 这是 MDN 上 CSS 文档的主要入口，在这里可以找到 CSS 语言全部特性的详细参考文档。想要了解某个属性可以取的所有值吗？这是一个很好的去处。 diff --git a/files/zh-cn/learn/forms/index.md b/files/zh-cn/learn/forms/index.md index 3513c63a95cc8c..12461bb700c488 100644 --- a/files/zh-cn/learn/forms/index.md +++ b/files/zh-cn/learn/forms/index.md @@ -7,15 +7,15 @@ l10n: {{LearnSidebar}} -本模块提供的系列文章意在帮助你掌握 Web 表单的基本知识。Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。然而，出于历史和技术原因，如何发挥 Web 表单的全部潜力并不总是显而易见的。在下面的文章中，你会学习 Web 表单的全部基本内容，包括：标记表单的 HTML 结构、为表单控件添加样式、验证表单数据，以及向服务器提交数据。 +本模块提供的系列文章意在帮助你掌握 Web 表单的基本知识。Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。然而，由于历史和技术原因，如何发挥 Web 表单的全部潜力并不总是显而易见的。在下面的文章中，我们将涵盖 Web 表单的全部基本内容，包括：标记表单的 HTML 结构、为表单控件添加样式、验证表单数据，以及向服务器提交数据。 ## 前提 -在开始本模块之前，你应该至少学习过 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。此时此刻，你应该会发现[入门指南](#入门指南)很容易理解，并且也能够使用[基本的原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls)指南。 +在开始本模块之前，你应该至少学习过 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。此时此刻，你应该能轻松理解[入门指南](#入门指南)，并且也能使用[基本的原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls)指南。 -然而，掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些为表单控件添加样式的特定技术，一些用于处理诸如验证和创建自定义表单控件等内容的脚本知识。因此，在学习下列其他文章之前，我们会建议你先离开去学习一些 [CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript)。 +然而，掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些为表单控件添加样式的特定技术，一些用于处理诸如验证和创建自定义表单控件等内容的脚本知识。因此，在学习下列其他文章之前，我们会建议你先去学习一些 [CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript)。 -以上内容很好地表明了我们为什么将 Web 表单放在单独模块中，而不是将其混入 HTML、CSS 和 JavaScript 专题中——表单元素比大多数其他的 HTML 元素要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密配合才能充分利用。 +以上内容很好地表明了为什么我们将 Web 表单放在单独模块中，而不是将其混入 HTML、CSS 和 JavaScript 主题中——表单元素比大多数其他 HTML 元素要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密配合才能充分利用。 > [!NOTE] > 如果你工作的计算机/掌上电脑/其他设备无法创建文件，可以使用在线编码程序（例如，[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)）实验（大多数）代码示例。 @@ -23,7 +23,7 @@ l10n: ## 入门指南 - [你的第一个表单](/zh-CN/docs/Learn/Forms/Your_first_form) - - : 本系列的第一篇文章让你拥有第一次创建 Web 表单的体验，包括，设计一个简单表单、使用正确的 HTML 元素实现表单、通过 CSS 添加一些非常简单的样式，以及向服务器发送数据。 + - : 本系列的第一篇文章为你提供了创建 Web 表单的第一次体验，包括，设计一个简单表单、使用正确的 HTML 元素实现表单、通过 CSS 添加一些非常简单的样式，以及向服务器发送数据。 - [如何构造 Web 表单](/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form) - : 已经有了基础知识，现在深入学习为表单的不同部分提供结构和含义的元素。 diff --git a/files/zh-cn/learn/getting_started_with_the_web/index.md b/files/zh-cn/learn/getting_started_with_the_web/index.md index d2cf76b4a11f13..9c4b0053d395ca 100644 --- a/files/zh-cn/learn/getting_started_with_the_web/index.md +++ b/files/zh-cn/learn/getting_started_with_the_web/index.md @@ -17,7 +17,7 @@ l10n: 通过学习下列的文章，你将从零开始获得第一个在线网页。让我们开始旅程吧！ -- [安装基础软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software) +- [安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software) - : 说到建设网站的工具，有很多可供选择的。如果你初入门径，你可能会被外面一系列的代码编辑器、框架和测试工具所迷惑。在这篇文章中，我们将一步一步地教你如何安装开始基础的 Web 开发所需的软件。 From 7011c10aede6b2d5d53cf515670fb0cd306c0f5a Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Sat, 14 Sep 2024 16:34:19 +0800 Subject: [PATCH 2/7] Update files/zh-cn/learn/accessibility/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/learn/accessibility/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/accessibility/index.md b/files/zh-cn/learn/accessibility/index.md index 09b5aec254e1e2..de1eefd21a360b 100644 --- a/files/zh-cn/learn/accessibility/index.md +++ b/files/zh-cn/learn/accessibility/index.md @@ -25,7 +25,7 @@ l10n: ## 前提 -为了充分理解本模块，最好先完成 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块，或者更好的做法是，在你学习相关技术主题的同时，完成无障碍模块的相关部分。 +为了充分理解本模块，最好先完成 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块，或者更好的做法是，在你学习相关技术主题的同时，完成无障碍模块的相关部分。 > [!NOTE] > 如果你工作的计算机/掌上电脑/其他设备无法创建文件，可以使用在线编码程序（例如，[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)）实验大多数代码示例。 From ac11475c47fa0a2a8b24318d73c540828c19aebb Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Sun, 15 Sep 2024 14:29:48 +0800 Subject: [PATCH 3/7] =?UTF-8?q?=E6=92=A4=E9=94=80=E4=B8=8D=E5=BF=85?= =?UTF-8?q?=E8=A6=81=E7=9A=84=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/zh-cn/learn/accessibility/index.md | 26 +++++++++---------- files/zh-cn/learn/common_questions/index.md | 2 +- files/zh-cn/learn/css/index.md | 28 ++++++++++----------- files/zh-cn/learn/forms/index.md | 10 ++++---- 4 files changed, 33 insertions(+), 33 deletions(-) diff --git a/files/zh-cn/learn/accessibility/index.md b/files/zh-cn/learn/accessibility/index.md index de1eefd21a360b..1215a8d43ec397 100644 --- a/files/zh-cn/learn/accessibility/index.md +++ b/files/zh-cn/learn/accessibility/index.md @@ -7,17 +7,17 @@ l10n: {{LearnSidebar}} -如果你想成为一名 Web 开发者，学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外，重要的是学习如何**负责任**地使用这些技术，让所有用户能在 Web 上使用你的作品。为了帮你实现这个目标，本模块涉及常见的最佳实践（在 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题中有所体现），以及一些严格执行无障碍的技巧。接下来会特别详细地介绍无障碍。 +如果你想成为一名 Web 开发者，学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外，重要的是学习如何**负责任**地使用这些技术，让所有用户能在 Web 使用你的作品。为了帮你实现这个目标，本模块涉及常见的最佳实践（在 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题中有所体现），以及大量和严格执行无障碍有关的技巧。接下来会详细介绍无障碍。 ## 概述 -当有人将一个网站描述为“无障碍”时，意味着不论访问 Web 的方式如何，任何一个用户（甚至是有身体或精神障碍的用户）都能使用网站全部的特性和内容。 +当有人将一个网站描述为“无障碍”时，意味着不论用户访问 Web 的方式如何，任何一个用户（甚至是有身体或精神障碍的用户）都能使用网站全部的特性和内容。 -- 使用键盘、鼠标和触摸屏的用户，以及使用任何其他方式（包括屏幕阅读器和诸如 Alexa 和 Google Home 等的语音助手）访问 Web 的用户都应该能访问网站。 +- 使用键盘、鼠标和触摸屏的用户，以及使用任意其他方式（包括屏幕阅读器和诸如 Alexa 和 Google Home 等的语音助手）访问 Web 的用户都应该能访问网站。 - 无论人们的听觉、视觉、身体或认知能力如何，都应该能理解和使用应用程序。 - 网站也不应该造成伤害：像动画（motion）这样的 Web 特性会导致偏头痛或癫痫发作。 -**默认情况下，HTML 在使用得当的情况下是无障碍的**。Web 无障碍涉及确保内容无论由谁以何种方式访问都是无障碍的。 +**默认情况下，HTML 在使用得当的情况下是无障碍的**。Web 无障碍关乎 Web 内容无论由谁以何种方式访问都能保证是无障碍的。 要检查 Web 页面上的无障碍问题时，火狐无障碍检查器是一个非常实用的工具。下面的视频对它进行了很好的介绍： @@ -25,7 +25,7 @@ l10n: ## 前提 -为了充分理解本模块，最好先完成 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块，或者更好的做法是，在你学习相关技术主题的同时，完成无障碍模块的相关部分。 +要充分理解本模块，你至少需要读过 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块，或者在读相关技术主题时，读过无障碍模块的相关部分（这样或许会更好）。 > [!NOTE] > 如果你工作的计算机/掌上电脑/其他设备无法创建文件，可以使用在线编码程序（例如，[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)）实验大多数代码示例。 @@ -33,29 +33,29 @@ l10n: ## 指南 - [什么是无障碍？](/zh-CN/docs/Learn/Accessibility/What_is_accessibility) - - : 这篇文章从什么是无障碍开始，详细介绍了我们需要考虑哪一群人，为什么要考虑这些人，不同的人使用什么工具与 Web 交互，以及如何将无障碍融入到我们的 Web 开发工作流程中。 + - : 这个模块的第一篇文章深入介绍无障碍是什么——包括：我们需要考虑哪一群人，为什么要考虑这些人，不同的人使用什么工具与 Web 交互，以及我们如何构建 Web 开发工作流的无障碍部分。 - [HTML：无障碍的良好基础](/zh-CN/docs/Learn/Accessibility/HTML) - - : 大量的 Web 内容只要确保正确的 HTML 元素来实现正确的目的，就是无障碍的。这篇文章详细讲述 HTML 是如何确保最大程度的无障碍。 + - : 只要确保正确的 HTML 元素被用于正确的目的，大量的 Web 内容就是无障碍的。这篇文章详细讲述 HTML 是如何确保最大程度的无障碍。 - [CSS 和 JavaScript 无障碍最佳实践](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript) - - : CSS 和 JavaScript 如果使用得当，也有潜力实现无障碍的 Web 体验，但如果使用不当，它们会严重损害无障碍。这篇文章概述了一些应该考虑的 CSS 和 JavaScript 最佳实践，以确保即使复杂的内容也能尽可能是无障碍的。 + - : 当正确使用 CSS 和 JavaScript 时，也能提供无障碍的 Web 体验，但错用的话，会极大地破坏无障碍。这篇文章概括了大量的 CSS 和 JavaScript 最佳实践，这些实践能确保甚至是复杂内容也尽可能是无障碍的。 - [WAI-ARIA 基础](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics) - - : 接着上一篇文章，有时制作复杂的 UI 控件（涉及非语义化的 HTML 和使用 JavaScript 动态的更新内容）可能很难。WAI-ARIA 是通过添加额外的语义（浏览器和辅助技术能识别和使用这些语义让用户知道正在发生什么）来解决这类问题的技术。在这里，我们将从基础级别的视角展示如何使用它来提高无障碍。 + - : 接着上一篇文章，有时制作复杂的 UI 控件（涉及非语义化的 HTML 和使用 JavaScript 动态的更新内容）很难。WAI-ARIA 是通过添加额外的语义（浏览器和辅助技术能识别和使用这些语义让用户知道正在发生什么）来解决这类问题的技术。这篇文章以基础级别的视角讲解如何使用它来改善无障碍。 - [多媒体无障碍](/zh-CN/docs/Learn/Accessibility/Multimedia) - - : 另一类会出现无障碍问题的内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代，这样辅助技术和相应的用户就能理解这些内容。这篇文章将介绍如何做到这一点。 + - : 会出现无障碍问题的另一类内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代，这样辅助技术和相应的用户就能理解这些内容。这篇文章将介绍如何做到这一点。 - [移动端无障碍](/zh-CN/docs/Learn/Accessibility/Mobile) - - : 随着用移动设备访问 Web 变得流行，以及主流平台（例如，iOS 和安卓）拥有完备的无障碍工具，考虑这些平台上的 Web 内容的无障碍非常重要。这篇文章讲解移动设备相关的无障碍注意事项。 + - : 随着用移动设备访问 Web 变得流行，以及主流平台（例如，iOS 和安卓）拥有完备的无障碍工具，为这些平台上的 Web 内容考虑无障碍是重要的。这篇文章讲解移动设备相关的无障碍注意事项。 ## 评估 - [无障碍诊断](/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting) - - : 在本模块的评估环节，会向你展示一个包含多个无障碍问题的简单站点，你需要诊断并修复这些问题。 + - : 在本模块的评估环节，会向你展示带有几个无障碍问题的简单站点，你需要诊断并修复这些问题。 ## 参见 - [学习无障碍 Web 设计](https://v2.scrimba.com/learn-accessible-web-design-c031?via=mdn) **MDN 课程合作伙伴** - : [Scrimba](https://scrimba.com?via=mdn) 的*学习无障碍 Web 设计*课程通过解决交互式编码挑战和修复真实网站的方式教授如何编写无障碍的 HTML。 - [现在开始构建无障碍的 Web 应用](https://egghead.io/courses/start-building-accessible-web-applications-today) - - : 来自 Marcy Sutton 的优秀的视频教程系列。 + - : 来自 Marcy Sutton 的优秀视频教程系列。 - [Deque University 资源](https://dequeuniversity.com/resources/) - : 包含代码示例、屏幕阅读器参考和其他实用的资源。 - [WebAIM 资源](https://webaim.org/resources/) diff --git a/files/zh-cn/learn/common_questions/index.md b/files/zh-cn/learn/common_questions/index.md index cd11626e90378a..264e4f1ecf06f0 100644 --- a/files/zh-cn/learn/common_questions/index.md +++ b/files/zh-cn/learn/common_questions/index.md @@ -7,7 +7,7 @@ l10n: {{LearnSidebar}} -这个学习区为可能会遇到的常见问题提供答案，而这些问题不必是结构化的核心学习路径的一部分（例如，[HTML](/zh-CN/docs/Learn/HTML) 或 [CSS](/zh-CN/docs/Learn/CSS) 中的学习文章）。这些文章专注于它们自己的内容。 +学习区的本部分是为可能会遇到的常见问题提供答案，而这些问题不必是结构化的核心学习路径的部分（例如，[HTML](/zh-CN/docs/Learn/HTML) 或 [CSS](/zh-CN/docs/Learn/CSS) 中的学习文章）。这些文章专注于它们自己的内容。 - [HTML 问题](/zh-CN/docs/Learn/HTML/Howto) - [CSS 问题](/zh-CN/docs/Learn/CSS/Howto) diff --git a/files/zh-cn/learn/css/index.md b/files/zh-cn/learn/css/index.md index 2a16910fdbea9b..262caeaef679a4 100644 --- a/files/zh-cn/learn/css/index.md +++ b/files/zh-cn/learn/css/index.md @@ -7,48 +7,48 @@ l10n: {{LearnSidebar}} -层叠样式表——或 {{glossary("CSS")}}——是你应该在学完 {{glossary("HTML")}} 之后开始学习的第一门技术。HTML 用于为你的内容定义结构和语义，CSS 用于为内容提供样式和对内容进行布局。例如，你可以使用 CSS 更改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。 +层叠样式表——或 {{glossary("CSS")}}——是你在学完 {{glossary("HTML")}} 之后应该学习的第一门技术。HTML 用于为你的内容定义结构和语义，CSS 用于为内容提供样式和对内容进行布局。例如，你可以使用 CSS 更改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。 ## 前提 -在尝试 CSS 之前，你应该先学习 HTML 的基础知识。我们建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。 +在尝试 CSS 之前，你应该学习 HTML 的基础知识。我们建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。 -一旦你理解了 HTML 的基础知识，我们就建议你同时学习更多的 HTML 和 CSS，在这两个主题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。而且不了解 HTML 的话，也无法学习 CSS。 +一旦你理解了 HTML 的基础知识，我们就建议你同时更深入地学习 HTML 和 CSS，在这两个主题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。并且不了解 HTML 的话，也无法学习 CSS。 在开始本主题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境，以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——这两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。 -在开始本主题之前，还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，特别是如果你完全不熟悉 Web 开发的话。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及，而且更详细。 +在开始本主题之前，还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，尤其当你是 Web 开发的纯新手的话。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及，而且更详细。 ## 模块 -本主题包含以下模块，建议按顺序学习。你应该从第一个开始。 +本主题包含以下模块，建议按顺序学习这些模块。你应该从第一个模块开始。 - [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) - - : CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。这个模块为你提供了通向 CSS 精通之路的温和开始，介绍了它的工作原理、语法是什么样的，以及如何开始使用它为 HTML 添加样式。 + - : CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。在前往掌握 CSS 基础知识（CSS 的运作方式，CSS 语法是什么样子，在 HTML 中如何使用 CSS 添加样式）的道路上，这个模块是一个很好的开始。 - [CSS 构建块](/zh-CN/docs/Learn/CSS/Building_Blocks) - - : 这个模块承接 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)——这时你已经熟悉了 CSS 语言及其语法，有了基本的使用经验，是时候再深入一些了。这个模块探讨层叠和继承、所有可用的选择器类型、单位、尺寸、为背景和边框添加样式、调试，以及其它内容。 + - : 这个模块承接 [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/Styling_text)和 [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)等特定领域的知识之前，提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。 - [为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text) - - : 在学完 CSS 语言的基础知识后，下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。在这里，我们会探讨为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。我们通过探讨在页面中应用自定义字体和为列表和链接添加样式结束这个模块。 + - : 在学完 CSS 语言的基础知识后，下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。这篇文章介绍了为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在这个模块中，还会学习的内容有：在页面中应用自定义字体、为列表和链接添加样式。 - [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout) - - : 看到这儿，我们已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。我们已经涵盖了必要的前置知识，现在可以深入探讨 CSS 布局，学习不同的显示设置、现代的布局工具（如弹性盒、CSS 网格）、定位，以及你可能仍想了解的一些传统技术。 + - : 看到这儿，你已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。必要的前置知识已经具备，此时你可以深入 CSS 布局，学习不同的显示设置、现代的布局工具（如弹性盒、CSS 网格）、定位，以及一些你可能仍想了解的传统技术。 ## 解决常见的 CSS 问题 [使用 CSS 解决常见问题](/zh-CN/docs/Learn/CSS/Howto)提供了用于解释如何使用 CSS 解决创建网页时常遇到的问题的内容的链接。 -刚开始，你主要是为 HTML 元素及其背景应用颜色，改变元素的大小、形状和位置，为元素添加和定义边框。但是，一旦你对 CSS 的基础知识有了扎实的理解，几乎没有什么是你不能做的。学习 CSS 最棒的事情之一就是，一旦你了解了基础，即使你还不知道如何做，通常会对能做的和不能做的有一个很好的感知。 +刚开始，你主要是为 HTML 元素及其背景应用颜色，改变元素的大小、形状和位置，为元素添加和定义边框。但这并不是你唯一能做的，只要你对 CSS 的基础知识有了坚实的理解的话。学习 CSS 最棒的事情之一就是，一旦你了解了基础，即使你还不知道如何做，通常会对能做的和不能做的有一个很好的感知。 ## “CSS 真奇怪” -CSS 的工作方式与你接触到的大多数编程语言和设计工具有点不同。CSS 为什么以这种方式工作？在下面的视频中，Miriam Suzanne 对 CSS 为什么这样工作以及 CSS 为什么演变成这样做了很好的解释： +CSS 与你接触到的大多数编程语言和设计工具的运作方式有点不同。CSS 为什么以这种方式运作？在下面的视频中，对 CSS 为什么这样运作以及 CSS 为什么演变成这样做了很好的解释： {{EmbedYouTube("aHUtMbJw8iA")}} ## 参见 -- [MDN 上的 CSS](/zh-CN/docs/Web/CSS) - - : 这是 MDN 上 CSS 文档的主要入口，在这里可以找到 CSS 语言全部特性的详细参考文档。想要了解某个属性可以取的所有值吗？这是一个很好的去处。 +- [MDN 上的 CSS 文档](/zh-CN/docs/Web/CSS) + - : MDN 上 CSS 文档的主入口，在这里可以找到 CSS 语言全部特性的详细参考文档。想要了解某个属性可以取的所有值吗？这是一个很好的去处。 diff --git a/files/zh-cn/learn/forms/index.md b/files/zh-cn/learn/forms/index.md index 12461bb700c488..e7e77e37412f2c 100644 --- a/files/zh-cn/learn/forms/index.md +++ b/files/zh-cn/learn/forms/index.md @@ -7,15 +7,15 @@ l10n: {{LearnSidebar}} -本模块提供的系列文章意在帮助你掌握 Web 表单的基本知识。Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。然而，由于历史和技术原因，如何发挥 Web 表单的全部潜力并不总是显而易见的。在下面的文章中，我们将涵盖 Web 表单的全部基本内容，包括：标记表单的 HTML 结构、为表单控件添加样式、验证表单数据，以及向服务器提交数据。 +本模块提供的系列文章意在帮助你掌握 Web 表单的基本知识。Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。然而，出于历史和技术原因，如何发挥 Web 表单的全部潜力并不总是显而易见的。在下面的文章中，你会学习 Web 表单的全部基本内容，包括：标记表单的 HTML 结构、为表单控件添加样式、验证表单数据，以及向服务器提交数据。 ## 前提 -在开始本模块之前，你应该至少学习过 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。此时此刻，你应该能轻松理解[入门指南](#入门指南)，并且也能使用[基本的原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls)指南。 +在开始本模块之前，你应该至少学习过 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。此时此刻，你应该会发现[入门指南](#入门指南)很容易理解，并且也能够使用[基本的原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls)指南。 -然而，掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些为表单控件添加样式的特定技术，一些用于处理诸如验证和创建自定义表单控件等内容的脚本知识。因此，在学习下列其他文章之前，我们会建议你先去学习一些 [CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript)。 +然而，掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些为表单控件添加样式的特定技术，一些用于处理诸如验证和创建自定义表单控件等内容的脚本知识。因此，在学习下列其他文章之前，我们会建议你先离开去学习一些 [CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript)。 -以上内容很好地表明了为什么我们将 Web 表单放在单独模块中，而不是将其混入 HTML、CSS 和 JavaScript 主题中——表单元素比大多数其他 HTML 元素要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密配合才能充分利用。 +以上内容很好地表明了我们为什么将 Web 表单放在单独模块中，而不是将其混入 HTML、CSS 和 JavaScript 主题中——表单元素比大多数其他的 HTML 元素要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密配合才能充分利用。 > [!NOTE] > 如果你工作的计算机/掌上电脑/其他设备无法创建文件，可以使用在线编码程序（例如，[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)）实验（大多数）代码示例。 @@ -23,7 +23,7 @@ l10n: ## 入门指南 - [你的第一个表单](/zh-CN/docs/Learn/Forms/Your_first_form) - - : 本系列的第一篇文章为你提供了创建 Web 表单的第一次体验，包括，设计一个简单表单、使用正确的 HTML 元素实现表单、通过 CSS 添加一些非常简单的样式，以及向服务器发送数据。 + - : 本系列的第一篇文章让你拥有第一次创建 Web 表单的体验，包括，设计一个简单表单、使用正确的 HTML 元素实现表单、通过 CSS 添加一些非常简单的样式，以及向服务器发送数据。 - [如何构造 Web 表单](/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form) - : 已经有了基础知识，现在深入学习为表单的不同部分提供结构和含义的元素。 From 2383471f0d0b59f1cad27773ecf3685751c30056 Mon Sep 17 00:00:00 2001 From: familyboat <2015301110129@whu.edu.cn> Date: Sun, 15 Sep 2024 14:44:20 +0800 Subject: [PATCH 4/7] =?UTF-8?q?=E5=A4=84=E7=90=86=E9=81=97=E6=BC=8F?= =?UTF-8?q?=E7=9A=84=20=E6=9C=AC=E6=96=87=20=E5=AD=97=E6=A0=B7=E5=92=8C?= =?UTF-8?q?=E7=94=A8=E8=AF=8D=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/zh-cn/learn/forms/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/learn/forms/index.md b/files/zh-cn/learn/forms/index.md index e7e77e37412f2c..859f8a4f55f64b 100644 --- a/files/zh-cn/learn/forms/index.md +++ b/files/zh-cn/learn/forms/index.md @@ -39,7 +39,7 @@ l10n: ## 表单样式指南 - [为 Web 表单添加样式](/zh-CN/docs/Learn/Forms/Styling_web_forms) - - : 本文介绍如何使用 CSS 为表单添加样式，包括完成基本样式任务所需了解的全部基础知识。 + - : 这篇文章介绍如何使用 CSS 为表单添加样式，包括完成基本样式任务所需了解的全部基础知识。 - [高级表单样式](/zh-CN/docs/Learn/Forms/Advanced_form_styling) - : 在这里学习一些更高级的表单样式技术，用于处理一些很难设置样式的表单元素。 - [UI 伪类](/zh-CN/docs/Learn/Forms/UI_pseudo-classes) @@ -48,18 +48,18 @@ l10n: ## 验证和提交表单数据 - [客户端表单验证](/zh-CN/docs/Learn/Forms/Form_validation) - - : 仅仅发送数据还不够——还需要确保用户填写的表单数据的格式是正确的，以便后续能正确处理，也要确保数据不会破坏应用程序。我们也想帮助用户正确填写表单，让用户在使用应用程序时不会感到困扰。表单验证帮助我们实现这些目标——本文讲解你需要了解的内容。 + - : 仅仅发送数据还不够——还需要确保用户填写的表单数据的格式是正确的，以便后续能正确处理，也要确保数据不会破坏应用程序。我们也想帮助用户正确填写表单，让用户在使用应用程序时不会感到困扰。表单验证帮助我们实现这些目标——这篇文章讲解你需要了解的内容。 - [发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data) - - : 本文讨论的是当用户提交表单时，会发生什么——表单数据的去向，以及当表单数据到达之后如何处理？还研究一些与发送表单数据有关联的安全问题。 + - : 这篇文章讨论的是当用户提交表单时，会发生什么——表单数据的去向，以及当表单数据到达之后如何处理？还研究一些与发送表单数据有关联的安全问题。 ## 高级文章 以下文章对于学习路径来说没那么重要，但是当你掌握了上述技术并想了解更多内容时，它们会变得有趣且实用。 - [如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls) - - : 在某些情况下，出于样式或功能的原因，原生表单微件无法提供你所需的东西。在这种情况下，你会需要使用原生 HTML 构建表单微件。本文通过一个案例研究说明你将如何做到这一点，以及在实际操作时需要注意的事项。 + - : 在某些情况下，出于样式或功能的原因，原生表单控件无法提供你所需的东西。在这种情况下，你会需要使用原生 HTML 构建表单控件。这篇文章通过一个案例研究说明你将如何做到这一点，以及在实际操作时需要注意的事项。 - [通过 JavaScript 发送表单](/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript) - - : 本文将讨论如何使用表单来构建 HTTP 请求，并通过自定义的 JavaScript 而不是标准的表单提交发送请求。本文还说明为什么要这么做，以及这样做的意图。（参见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)。） + - : 这篇文章将讨论如何使用表单来构建 HTTP 请求，并通过自定义的 JavaScript 而不是标准的表单提交发送请求。这篇文章还说明为什么要这么做，以及这样做的意图。（参见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)。） - [表单控件的 CSS 属性兼容性表](/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls) - : 最后一篇文章提供的参考意在方便查找 CSS 属性与表单元素的兼容性关系。 From 44e57bc4be47ca2116622e481f66cefa12e90c04 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:18:17 +0800 Subject: [PATCH 5/7] Update files/zh-cn/learn/css/index.md Co-authored-by: A1lo --- files/zh-cn/learn/css/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/css/index.md b/files/zh-cn/learn/css/index.md index 262caeaef679a4..ecefb2353d4a8b 100644 --- a/files/zh-cn/learn/css/index.md +++ b/files/zh-cn/learn/css/index.md @@ -15,7 +15,7 @@ l10n: 一旦你理解了 HTML 的基础知识，我们就建议你同时更深入地学习 HTML 和 CSS，在这两个主题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。并且不了解 HTML 的话，也无法学习 CSS。 -在开始本主题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境，以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——这两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。 +在开始本主题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照[安装基础软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境，以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——这两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。 在开始本主题之前，还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，尤其当你是 Web 开发的纯新手的话。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及，而且更详细。 From ff64e998ccbbfb3ff693fb362e053866efee5f0e Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:20:27 +0800 Subject: [PATCH 6/7] Update files/zh-cn/learn/forms/index.md Co-authored-by: A1lo --- files/zh-cn/learn/forms/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/forms/index.md b/files/zh-cn/learn/forms/index.md index 859f8a4f55f64b..b36d7aafd3f312 100644 --- a/files/zh-cn/learn/forms/index.md +++ b/files/zh-cn/learn/forms/index.md @@ -57,7 +57,7 @@ l10n: 以下文章对于学习路径来说没那么重要，但是当你掌握了上述技术并想了解更多内容时，它们会变得有趣且实用。 - [如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls) - - : 在某些情况下，出于样式或功能的原因，原生表单控件无法提供你所需的东西。在这种情况下，你会需要使用原生 HTML 构建表单控件。这篇文章通过一个案例研究说明你将如何做到这一点，以及在实际操作时需要注意的事项。 + - : 在某些情况下，出于样式或功能的原因，原生表单微件无法提供你所需的东西。在这种情况下，你会需要使用原生 HTML 构建表单微件。这篇文章通过一个案例研究说明你将如何做到这一点，以及在实际操作时需要注意的事项。 - [通过 JavaScript 发送表单](/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript) - : 这篇文章将讨论如何使用表单来构建 HTTP 请求，并通过自定义的 JavaScript 而不是标准的表单提交发送请求。这篇文章还说明为什么要这么做，以及这样做的意图。（参见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)。） - [表单控件的 CSS 属性兼容性表](/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls) From 951a6b3e5b26c124fe88f0da5f2240eddc7776fd Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:20:41 +0800 Subject: [PATCH 7/7] Update files/zh-cn/learn/getting_started_with_the_web/index.md Co-authored-by: A1lo --- files/zh-cn/learn/getting_started_with_the_web/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/getting_started_with_the_web/index.md b/files/zh-cn/learn/getting_started_with_the_web/index.md index 9c4b0053d395ca..d2cf76b4a11f13 100644 --- a/files/zh-cn/learn/getting_started_with_the_web/index.md +++ b/files/zh-cn/learn/getting_started_with_the_web/index.md @@ -17,7 +17,7 @@ l10n: 通过学习下列的文章，你将从零开始获得第一个在线网页。让我们开始旅程吧！ -- [安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software) +- [安装基础软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software) - : 说到建设网站的工具，有很多可供选择的。如果你初入门径，你可能会被外面一系列的代码编辑器、框架和测试工具所迷惑。在这篇文章中，我们将一步一步地教你如何安装开始基础的 Web 开发所需的软件。