chore(i18n,learn): processed translations (#41378)
* chore(i8n,learn): processed translations * Update curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
camperbot
GitHub
@@ -11,11 +11,11 @@ dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
|
||||
HTML5 引入了一些新元素，其中包括无障碍特性，给予开发者更多的选择。 HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。
|
||||
|
||||
默认情况下，浏览器呈现这些新标签的方式与 `div` 相似。 但是，在适当的地方使用它们，会给标签额外的意义。 仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。 辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。
|
||||
默认情况下，浏览器呈现这些元素的方式类似于普通的 `div`。 但是，在适当的地方使用它们会让标记文本具有更多的含义。 仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。 辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。
|
||||
|
||||
`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。 这意味着它只应包含与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
|
||||
|
||||
`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。 如果你在页面的顶部看到“跳转到主要内容”的链接，使用 `main` 标签可以自动让辅助设备提供那个功能。
|
||||
`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 的 `tabindex` 属性有三种与标签焦点相关的功能。 给标签加上 tabindex，表示该标签可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。
|
||||
HTML 的 `tabindex` 属性有三种与标签焦点相关的功能。 当它在一个元素上时，表示该元素可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。
|
||||
|
||||
当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。 它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。 我们可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。 比如：
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
下一个表单主题涵盖单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。
|
||||
接下来的表单主题是关于单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。
|
||||
|
||||
`fieldset` 标签包裹整组单选按钮，实现这个功能。 我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。 屏幕阅读器也可以朗读这些文字。
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ dashedName: adjust-the-tone-of-a-color
|
||||
|
||||
# --instructions--
|
||||
|
||||
所有元素的默认 `background-color` 都是 `transparent`。 当前页面的导航栏 `nav` 背景色之所以看起来是蓝绿色，是因为它背后的 `header` 的 `background-color` 属性值为 `cyan`。 请将 `nav` 的 `background-color` 也设置为 `cyan`，但把它的饱和度调整为 `80% saturation`，亮度调整为 `25% lightness`。
|
||||
所有元素的默认 `background-color` 都是 `transparent`。 当前页面的导航栏 `nav` 背景色之所以看起来是蓝绿色，是因为它背后的 `header` 的 `background-color` 属性值为 `cyan`。 给 `nav` 元素增加一个 `background-color`，使它的颜色也为 `cyan`，饱和度为 `80%`，亮度为 `25%`，以修改它的色调和阴影。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,6 +13,8 @@ dashedName: use-the-u-tag-to-underline-text
|
||||
|
||||
# --instructions--
|
||||
|
||||
`u` 标签包裹的文本内容应为 `Ph.D. students`。
|
||||
|
||||
**注意：** 如果使用 `u` 标签添加下划线，可能混淆文本和链接，则应避免使用它。 锚标签也有默认的下划线格式。
|
||||
|
||||
# --hints--
|
||||
@@ -23,7 +25,7 @@ dashedName: use-the-u-tag-to-underline-text
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
`u` 标签的内容文本应为 `Ph.D. students`。
|
||||
`u` 标签的文本内容应为 `Ph.D. students`。
|
||||
|
||||
```js
|
||||
assert($('u').text() === 'Ph.D. students');
|
||||
@@ -107,12 +109,12 @@ assert($('u').text() === 'Ph.D. students');
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D.
|
||||
students</u> at <strong>Stanford University</strong>.</p>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
我们以右边的嵌入推文为例， 一些元素换一个布局方式或许更好看。 上一个挑战演示了 `display: flex`， 现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
|
||||
以右边的嵌入推文为例， 一些元素换一个布局方式或许更好看。 上一个挑战演示了 `display: flex`， 现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ dashedName: add-gaps-faster-with-grid-gap
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `container` 的元素应具有 `grid-gap` 属性，并将行间距设置为 `10px`，列间距设置为 `20px`。
|
||||
`container` class 应该有一个 `grid-gap` 属性，在行之间设置 `10px` 的间距，在列之间设置 `20px` 的间距。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: add-rows-with-grid-template-rows
|
||||
|
||||
# --description--
|
||||
|
||||
在上个挑战中，你创建的网格会自动设置行数。 你可以用 `grid-template-rows` 设置网格的行，就像用 `grid-template-columns` 设置网格的列那样。
|
||||
在上个挑战中，你创建的网格会自动设置行数。 要手动调整行，请使用 `grid-template-rows` 属性，就像在上一个挑战中使用 `grid-template-columns` 属性一样。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ dashedName: create-flexible-layouts-using-auto-fit
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `container2` 的元素应具有 `grid-template-columns` 属性，且属性值应使用 `repeat` 和 `auto-fit`，以便将最小宽度为 `60px`、最大宽度为 `1fr` 的列填充至网格。
|
||||
`container2` class 应该有一个 `grid-template-columns` 属性，通过 `repeat` 和 `auto-fit` 将网格中的列的宽度设置为最小 `60px`，最大 `1fr`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
|
||||
# --description--
|
||||
|
||||
像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 `grid-area`：
|
||||
像上一个挑战那样，在为网格添加区域模板后，可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 `grid-area`：
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
|
||||
@@ -17,7 +17,7 @@ dashedName: use-grid-column-to-control-spacing
|
||||
|
||||
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>列线</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>行线</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
|
||||
|
||||
你可以用 `grid-column` 属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
|
||||
要设置一个网格项占据几列，你可以使用 `grid-column` 属性加上网格线条的编号来定义网格项开始和结束的位置。
|
||||
|
||||
示例如下：
|
||||
|
||||
|
||||
Reference in New Issue
Block a user