chore(i18n,curriculum): update translations (#43267)
This commit is contained in:
camperbot
GitHub
@ -15,7 +15,7 @@ dashedName: >-
|
||||
|
||||
例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。 色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。 在表示重要信息的时候应避免使用这类相近颜色的组合。
|
||||
|
||||
**注意：**一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。 它们和在线对比度检查器一样，都是很好的工具。
|
||||
**注意：** 一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。 它们和在线对比度检查器一样，都是很好的工具。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -22,13 +22,13 @@ HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语
|
||||
</audio>
|
||||
```
|
||||
|
||||
**注意：**多媒体内容通常同时包含音频与视频部分， 它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。 一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。
|
||||
**注意：** 多媒体内容通常同时包含音频与视频部分， 它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。 一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面了。 Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。 为了体验屏幕阅读器的朗读效果，请在 `p` 标签之后添加一个 `audio` 标签， 具有 `controls` 属性。 然后在 `audio` 标签里面放一个带有 `src` 属性的 `source` 标签，属性值为 `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`。将 `type` 属性设置为 `"audio/mpeg"`.
|
||||
|
||||
**注意：**音频片段的播放速度可能会快到令我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
**注意：** 音频片段的播放速度可能会快到令我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ dashedName: know-when-alt-text-should-be-left-blank
|
||||
|
||||
比如，背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器毋需读取。
|
||||
|
||||
**注意：**对于有标题的图片，依然需要添加 `alt` 文本，因为这样有助于搜索引擎记录图片内容。
|
||||
**注意：** 对于有标题的图片，依然需要添加 `alt` 文本，因为这样有助于搜索引擎记录图片内容。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
}
|
||||
```
|
||||
|
||||
**注意：**以下的 CSS 解决方案与上面的结果不同：
|
||||
**注意：** 以下的 CSS 解决方案与上面的结果不同：
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code> 或 <code>visibility: hidden;</code> 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。</li>
|
||||
|
||||
@ -13,7 +13,7 @@ dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||
|
||||
与 `main` 类似，`header` 的语义化特性也可以让辅助工具快速定位到它的内容。
|
||||
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。 它与包含页面标题、元信息的 `head` 标签不同。
|
||||
**注意：** `header` 应当在 HTML 文档的 `body` 标签内使用。 它与包含页面标题、元信息的 `head` 标签不同。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ dashedName: wrap-content-in-the-article-element
|
||||
|
||||
请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。
|
||||
|
||||
**注意：**`section` 元素也是 HTML5 引入的新元素，其语义与 `article` 略有不同。 `article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section`。 当内容组之间没有联系时，我们可以使用 `div`。
|
||||
**注意：** `section` 元素也是 HTML5 引入的新元素，其语义与 `article` 略有不同。 `article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section`。 当内容组之间没有联系时，我们可以使用 `div`。
|
||||
|
||||
`<div>` - 一组内容 `<section>` - 几组相关的内容 `<article>` - 几组独立的内容
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ img {
|
||||
|
||||
给 `h4` 标签添加 `height` 属性并将属性值设置为 25px。
|
||||
|
||||
**注意：**可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
|
||||
**注意：** 可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,11 +11,11 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 `hsl()` 做为颜色的描述方式。
|
||||
|
||||
**色相**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
|
||||
**色相** 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
|
||||
|
||||
**饱和度**是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。
|
||||
**饱和度** 是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。
|
||||
|
||||
**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。
|
||||
**亮度** 决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。
|
||||
|
||||
下面是一些使用 `hsl()` 描述颜色的例子，颜色都为满饱和度，中等亮度:
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ p {
|
||||
|
||||
把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。
|
||||
|
||||
**注意：**定位可以使页面布局更灵活、高效。 不管元素的定位是怎样的，HTML 标记在从上到下阅读起来时应该是整洁的、有意义的。 这样可以让视障人士（重度依赖辅助设备比如屏幕阅读软件的人们）也能够无障碍地浏览你的网页。
|
||||
**注意：** 定位可以使页面布局更灵活、高效。 不管元素的定位是怎样的，HTML 标记在从上到下阅读起来时应该是整洁的、有意义的。 这样可以让视障人士（重度依赖辅助设备比如屏幕阅读软件的人们）也能够无障碍地浏览你的网页。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
|
||||
在卡片标题元素 `h4` 下方添加一个 `hr` 标签。
|
||||
|
||||
**注意：**HTML 中的 `hr` 是自闭合标签，所以我们不需要为它添加结束标签。
|
||||
**注意：** HTML 中的 `hr` 是自闭合标签，所以我们不需要为它添加结束标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ dashedName: learn-about-complementary-colors
|
||||
|
||||
现在，很多在线选色工具也为我们提供了寻找补色的功能。
|
||||
|
||||
**注意：**对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。 但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。 我们将会在应用无障碍章节进行详细介绍。
|
||||
**注意：** 对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。 但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。 我们将会在应用无障碍章节进行详细介绍。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ p:hover {
|
||||
}
|
||||
```
|
||||
|
||||
**注意：**给 `div` 元素添加 transform 也会影响这个 div 包裹的子元素。
|
||||
**注意：** 给 `div` 元素添加 transform 也会影响这个 div 包裹的子元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ dashedName: add-rounded-corners-with-border-radius
|
||||
|
||||
`border-radius` 的属性值单位可以是 px（像素）。 请将猫咪图片 `border-radius` 的属性值设置为 `10px`。
|
||||
|
||||
**注意：**这个挑战有多个解决方法。 例如，添加 `border-radius` 属性到 `.thick-green-border` 或 `.smaller-image` 都是可行的。
|
||||
**注意：** 这个挑战有多个解决方法。 例如，添加 `border-radius` 属性到 `.thick-green-border` 或 `.smaller-image` 都是可行的。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: attach-a-fallback-value-to-a-css-variable
|
||||
|
||||
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
|
||||
|
||||
**注意：**备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。
|
||||
**注意：** 备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。
|
||||
|
||||
下面是操作方式：
|
||||
|
||||
|
||||
@ -19,9 +19,9 @@ dashedName: add-images-to-your-website
|
||||
|
||||
注意：`img` 元素是没有结束标签的。
|
||||
|
||||
所有的 `img` 元素**必须**有 `alt` 属性。 `alt` 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
|
||||
所有的 `img` 元素 **必须** 有 `alt` 属性。 `alt` 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
|
||||
|
||||
**注意：**如果图片是纯装饰性的，把 `alt` 的属性值设置为空是最佳实践。
|
||||
**注意：** 如果图片是纯装饰性的，把 `alt` 的属性值设置为空是最佳实践。
|
||||
|
||||
理想情况下，`alt` 属性不应该包含特殊字符，除非有特殊需要。
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ dashedName: add-placeholder-text-to-a-text-field
|
||||
<input type="text" placeholder="this is placeholder text">
|
||||
```
|
||||
|
||||
**注意：**别忘了 `input` 元素是 "自闭和标签"，即不需要结束标签。
|
||||
**注意：** 别忘了 `input` 元素是 "自闭和标签"，即不需要结束标签。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
在 `h2` 元素下方添加一个 `p` 元素，其内容是 `Hello Paragraph`。
|
||||
|
||||
**注意：**按照惯例，所有 HTML 标签都应该是小写字母，例如应使用 `<p></p>`，而不会使用 `<P></P>`。
|
||||
**注意：** 按照惯例，所有 HTML 标签都应该是小写字母，例如应使用 `<p></p>`，而不会使用 `<P></P>`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ HTML5 引入了很多更具描述性的 HTML 元素， 包括 `main`、`header`
|
||||
</main>
|
||||
```
|
||||
|
||||
**提示：**在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。
|
||||
**提示：** 在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
|
||||
`flex-direction` 的其他可选值还有 `row-reverse` 和 `column-reverse`。
|
||||
|
||||
**注意：**`flex-direction` 的默认值为 `row`。
|
||||
**注意：** `flex-direction` 的默认值为 `row`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: align-all-items-horizontally-using-justify-items
|
||||
|
||||
# --description--
|
||||
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。 你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用 `justify-items` 使它们一次性沿水平轴对齐。 这个属性能接受我们在之前两个挑战中学到的所有值作为属性值，但与之前不同的是，它会将网格中**所有**的网格项按所设置的方式对齐。
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。 你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用 `justify-items` 使它们一次性沿水平轴对齐。 这个属性能接受我们在之前两个挑战中学到的所有值作为属性值，但与之前不同的是，它会将网格中 **所有** 的网格项按所设置的方式对齐。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ repeat 方法带有一个名为<dfn>自动填充（auto-fill）</dfn>的功能
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。请自己调整宽度，动手试一下就不难理解了。 **注意：**如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
|
||||
上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。请自己调整宽度，动手试一下就不难理解了。 **注意：** 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: create-flexible-layouts-using-auto-fit
|
||||
|
||||
`auto-fit` 效果几乎和 `auto-fill` 一样。 不同点仅在于，当容器的大小大于各网格项之和时，`auto-fill` 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 `auto-fit` 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
|
||||
|
||||
**注意：**如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
|
||||
**注意：** 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: create-your-first-css-grid
|
||||
|
||||
通过将属性 `display` 的值设为 `grid`，HTML 元素就可以变为网格容器。 通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。
|
||||
|
||||
**注意：**在 CSS 网格中，父元素称为<dfn>容器（container）</dfn>，它的子元素称为<dfn>项（items）</dfn>。
|
||||
**注意：** 在 CSS 网格中，父元素称为<dfn>容器（container）</dfn>，它的子元素称为<dfn>项（items）</dfn>。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```
|
||||
|
||||
**注意：**`1fr 50px` 重复了两次，后面跟着 20px。
|
||||
**注意：** `1fr 50px` 重复了两次，后面跟着 20px。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user