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