diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md index e59501adea..be3ed26bd8 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md @@ -11,7 +11,9 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility 在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。 `alt` 属性中的文本来描述图片内容，作为备用文字。 `alt` 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容， 搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。 例如： -`Company logo` +```html +Company logo +``` 视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。 他们无法通过直观的呈现理解信息。 屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知用户图片包含的关键信息。 @@ -19,7 +21,7 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility # --instructions-- -碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。 他想要使用的个人资料图片显示了他的技能，应该得到所有网站访问者的赞赏。 请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 在学习空手道 （图片的 `src` 属性指向的是一个不存在的文件，因此你可以看到 `alt` 属性中的文本出现在页面上）。 +碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。 他打算使用的个人资料图片可以展示他的技能，且应得到所有网站访问者的赞赏。 请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 正在学习空手道 （图片的 `src` 属性指向的是一个不存在的文件，因此你会看到 `alt` 属性中的文本出现在页面上） # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md index e86f106363..668b9e7a82 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md @@ -13,15 +13,17 @@ dashedName: know-when-alt-text-should-be-left-blank 在图片已经有了文字说明，或者仅仅为了美化页面的情况下，`img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。 例如： -`` +```html + +``` -比如，背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。 +比如，背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器毋需读取。 **注意：**对于有标题的图片，依然需要添加 `alt` 文本，因为这样有助于搜索引擎记录图片内容。 # --instructions-- -Camper Cat 已经大体写好了博客页面。 他打算在他的两篇文章之间添加一个武士剑装饰图片，作为两篇文章之间的分割线。 为 `img` 标签添加 `alt` 属性，把它的属性值设为空。 （注意：这里图片的 `src` 属性提供的链接是无效的，因此页面上不会显示任何武士刀的图片，不用担心）。 +Camper Cat 已经大体写好了博客页面。 他打算在他的两篇文章之间添加一个武士剑装饰图片，作为两篇文章之间的分割线。 为 `img` 标签添加 `alt` 属性，把它的属性值设为空 （注意：这里图片的 `src` 属性提供的链接是无效的，因此页面上不会显示任何武士刀的图片，不用担心）。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md index 85d3ba03e4..d648031bd6 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md @@ -15,7 +15,9 @@ HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链 举个例子： -`` +```html + +``` # --instructions-- @@ -35,7 +37,7 @@ assert($('#first').attr('accesskey')); assert($('#second').attr('accesskey')); ``` -`id` 为 `first` 的 `a` 标签的 `accesskey` 属性值应为 `g`。 注意使用小写。 +`id` 为 `first` 的 `a` 标签的 `accesskey` 属性值应为 `g`。 注意要使用小写。 ```js assert($('#first').attr('accesskey') == 'g'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md index 92481794b5..198c1846a6 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md @@ -13,7 +13,9 @@ dashedName: standardize-times-with-the-html5-datetime-attribute 举个例子： -`

Master Camper Cat officiated the cage match between Goro and Scorpion , which ended in a draw.

` +```html +

Master Camper Cat officiated the cage match between Goro and Scorpion , which ended in a draw.

+``` # --instructions-- @@ -21,7 +23,7 @@ Camper Cat 的比武大会的时间确定了！ 用 `time` 标签包裹文本 `T # --hints-- -应存在一个内容文本为 `Thank you to everyone for responding to Master Camper Cat's survey.` 的 `p` 元素和一个 `time` 元素。 +应存在一个 `time` 元素和一个内容文本为 `Thank you to everyone for responding to Master Camper Cat's survey.` 的 `p` 元素。 ```js assert(timeElement.length); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md index 101d0befd5..4446616144 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md @@ -13,13 +13,15 @@ HTML 的 `tabindex` 属性有三种与标签焦点相关的功能。 当它在 当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。 它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。 我们可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。 比如： -`
I need keyboard focus!
` +```html +
I need keyboard focus!
+``` **注意：** `tabindex` 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。 这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 `div` 实现的弹出框上）的场景。 只是这部分内容已经超出了当前挑战的范围。 # --instructions-- -Camper Cat 新建了一个用来收集他的用户信息的调查。 他知道输入框可以自动获得键盘焦点，但他希望用户使用键盘切换标签时，焦点可以停留在指示文字（Instructions）上。 给 `p` 标签添加一个 `tabindex` 属性，将属性值设置为 `0`。 注意：使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。 +Camper Cat 新建了一个用来收集他的用户信息的调查。 他知道输入框可以自动获得键盘焦点，但他希望用户使用键盘切换标签时，焦点可以停留在指示文字（Instructions）上。 请给 `p` 标签添加一个 `tabindex` 属性，将属性值设置为 `0`。 注意：使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md index d37f7d42b3..c29da2cd8a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md @@ -17,13 +17,17 @@ dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elem 举个例子： -`
I get keyboard focus, and I get it first!
` +```html +
I get keyboard focus, and I get it first!
+``` -`
I get keyboard focus, and I get it second!
` +```html +
I get keyboard focus, and I get it second!
+``` # --instructions-- -Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。 Camper Cat 希望他的搜索（search）`input` 与提交（submit）`input` 表单控件是 tab 键焦点顺序的前两项。 给 `search` `input` 添加一个 `tabindex` 属性，属性值为 `1`。给 `submit` `input` 添加一个 `tabindex` 属性，属性值为 `2`。 +Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。 Camper Cat 希望他的搜索（search）`input` 与提交（submit）`input` 表单控件是 tab 键焦点顺序的前两项。 请给 `search` `input` 添加 `tabindex` 属性，将属性值设置为 `1`；给 `submit` `input` 添加一个 `tabindex` 属性，将属性值设置为 `2`。 # --hints-- diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md index 2f00ae9d50..d4f4e206dc 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md @@ -12,33 +12,37 @@ dashedName: add-font-awesome-icons-to-our-buttons # --description-- -Font Awesome 是一个非常便利的图标库。 这些图标可以是网络字体，也可以是一张矢量图。 这些图标就和字体一样， 不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字体大小。 +Font Awesome 是一个非常便利的图标库。 我们可以通过 webfont 或矢量图的方式来使用这些图标。 这些图标就和字体一样， 不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字体大小。 -可以将 Font Awesome 图标库添加至任何一个 web app 中，方法很简单，只需要在 HTML 头部增加下列代码即可： +可以将 Font Awesome 图标库添加至任何一个 web app 中，方法很简单，只需要在 HTML head 标签中添加以下代码即可： -`` +```html + +``` -不过在这里，已经预先为此页面添加了上述代码。 +在这个挑战中，我们已经为你在页面上添加好了 Font Awesome 图标库。 -`i` 元素起初用于让其它元素具有斜体（italic）的效果，不过现在一般用于显示图标。 可以把 Font Awesome 中的 class 属性添加到 `i` 元素中，让它变成一个图标，比如： +`i` 元素原本是用来表示斜体文字内容的；不过现在，用它来表示图标也很常见。 只需要为 `i` 元素添加相应的 class 就可以让它展示图标，比如： -`` +```html + +``` -注意用 `span` 元素展示图标也是可以的。 +同时，我们也可以使用 `span` 元素来展示图标。 # --instructions-- -给 like 按钮添加一个 Font Awesome `thumbs-up` 图标，具体方法是给 `i` 元素添加 `fas` 和 `fa-thumbs-up` class 属性。 确保将 `Like` 文本放在图标旁边。 +请使用 Font Awesome 来为我们的点赞按钮添加一个 `thumbs-up` 图标，只需添加一个 class 包含 `fas` 和 `fa-thumbs-up` 的 `i` 元素即可。 同时，请记得保留图标之后的文字内容 `Like`。 # --hints-- -增加一个 class 为 `fas` 和 `fa-thumbs-up` 的 `i` 元素。 +应添加一个 class 包含 `fas` 和 `fa-thumbs-up` 的 `i` 元素。 ```js assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up')); ``` -`fa-thumbs-up` 图标应该在 Like 按钮中。 +Like 按钮中应包含 `fa-thumbs-up` 图标。 ```js assert( @@ -49,7 +53,7 @@ assert( ); ``` -`i` 元素应该在 `button` 元素中。 +`i` 元素应出现在 `button` 元素内。 ```js assert( @@ -58,7 +62,7 @@ assert( ); ``` -确保图标元素有一个闭合标签。 +表示图标的元素应有闭合标签。 ```js assert(code.match(/<\/i>|<\/span>/g));