chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -17,11 +17,11 @@ dashedName: add-a-submit-button-to-a-form
|
||||
|
||||
# --instructions--
|
||||
|
||||
请在表单（`form` 元素）底部添加一个按钮，将按钮的 type 属性值设置为 `submit`，内容文本为“提交”。
|
||||
在 `form` 的底部创建一个按钮，按钮的类型为 `submit`，文本为 `Submit`。
|
||||
|
||||
# --hints--
|
||||
|
||||
表单内部应有一个按钮。
|
||||
你的 `form` 里面应该有一个 `button`。
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
|
||||
@ -29,7 +29,7 @@ dashedName: add-placeholder-text-to-a-text-field
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
设置占位符属性的值为 `cat photo URL`。
|
||||
设置 `placeholder` 属性的值为 `cat photo URL`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
用 `checked` 属性把第一个复选框和单选按钮都设置为默认选中。
|
||||
|
||||
要实现以上要求，只需给 input 元素添加 "checked" 属性。 例如:
|
||||
在一个 input 元素里面添加 `checked` 这个词，即可实现。 例如:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ HTML 有一个特定的元素用于创建<dfn>无序列表</dfn>。
|
||||
</ul>
|
||||
```
|
||||
|
||||
将会创建一个包含牛奶和奶酪的无序列表。
|
||||
会创建一个要点列表，包括 `milk` 和 `cheese`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -2,22 +2,25 @@
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: 创建一个表单
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cmQ3Kfa'
|
||||
forumTopicId: 16817
|
||||
dashedName: create-a-form-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我们可以只通过 HTML 来实现发送数据给服务器的表单，只需要给 `form` 元素添加 `action` 属性即可。
|
||||
我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 `form` 元素添加 `action` 属性即可。
|
||||
|
||||
例如:
|
||||
例如：
|
||||
|
||||
`<form action="/url-where-you-want-to-submit-form-data"></form>`
|
||||
```html
|
||||
<form action="/url-where-you-want-to-submit-form-data">
|
||||
<input>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
把现有的 `input` 输入框放到一个新建的 `form` 表单里，然后设置表单的 `action` 属性为 `"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
把现有的 `input` 输入框放到一个新建的表单 `form` 里，然后设置 `form` 元素的 `action` 属性值为 `"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -31,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
表单的 `action` 属性值应设置为 `https://freecatphotoapp.com/submit-cat-photo`。
|
||||
`form` 的 `action` 属性值应设置为 `https://freecatphotoapp.com/submit-cat-photo`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: create-a-set-of-checkboxes
|
||||
|
||||
# --description--
|
||||
|
||||
`checkboxes`（复选框）就好比多项选择题，正确答案有多个。
|
||||
<dfn>checkboxes</dfn>（复选框）就好比多项选择题，正确答案有多个。
|
||||
|
||||
复选框是 `input` 选择框的一种类型。
|
||||
|
||||
每一个复选框都应该嵌套在它自己的 `label`（标签）元素中。这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。
|
||||
每一个复选框都应该嵌套在它自己的 `label`（标签）元素中。 这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。
|
||||
|
||||
所有关联的复选框应该拥有相同的 `name` 属性。
|
||||
|
||||
使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与复选框的 `id` 属性值相同。
|
||||
使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与相关联的 `input` 复选框的 `id` 属性值相同。
|
||||
|
||||
下面是一个复选框的例子：
|
||||
|
||||
@ -25,7 +25,7 @@ dashedName: create-a-set-of-checkboxes
|
||||
|
||||
# --instructions--
|
||||
|
||||
请给表单添加三个复选框，每个复选框都被嵌套进 `label` 元素中，并且它的 `name` 属性均为 `personality`。你可以随意指定每个复选框的内容文本。
|
||||
请给表单添加三个复选框， 每个复选框都被嵌套进 `label` 元素中， 并且它们的 `name` 属性均为 `personality`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -103,9 +103,9 @@ assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
|
||||
@ -2,20 +2,19 @@
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: 创建一组单选按钮
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR'
|
||||
forumTopicId: 16822
|
||||
dashedName: create-a-set-of-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`radio buttons`（单选按钮）就好比单项选择题，正确答案只有一个。
|
||||
<dfn>radio buttons</dfn>（单选按钮）就好比单项选择题，正确答案只有一个。
|
||||
|
||||
单选按钮是 `input` 选择框的一种类型。
|
||||
|
||||
每一个单选按钮都应该嵌套在它自己的 `label`（标签）元素中。这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。
|
||||
每一个单选按钮都应该嵌套在它自己的 `label`（标签）元素中。 这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。
|
||||
|
||||
所有关联的单选按钮应该拥有相同的 `name` 属性。
|
||||
所有关联的单选按钮应该拥有相同的 `name` 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。
|
||||
|
||||
下面是一个单选按钮的例子：
|
||||
|
||||
@ -25,7 +24,7 @@ dashedName: create-a-set-of-radio-buttons
|
||||
</label>
|
||||
```
|
||||
|
||||
使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与单选按钮的 `id` 属性值相同。
|
||||
最佳实践是在 `label` 元素上设置 `for` 属性，让其值与相关联的 `input` 单选按钮的 `id` 属性值相同。 这使得辅助技术能够在标签和子项 `input` 元素之间建立关联关系。 例如：
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
@ -35,11 +34,11 @@ dashedName: create-a-set-of-radio-buttons
|
||||
|
||||
# --instructions--
|
||||
|
||||
给表单添加两个单选按钮，一个叫 `indoor` 另一个叫 `outdoor`。并将单选按钮的 `name` 属性值设置为 `indoor-outdoor`。
|
||||
在表格中添加一对单选按钮，每个按钮嵌套在自己的 `label` 元素中。 一个选项应该是 `indoor` ，另一个选项应该是 `outdoor`。 两个按钮的 `name` 属性都是 `indoor-outdoor`，以创建一组单选按钮。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面上应存在两个单选按钮元素。
|
||||
页面上应存在两个 `radio` 按钮元素。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
@ -67,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
其中一个 `label` 元素的文本为 `indoor`。
|
||||
其中一个单选按钮的文本为 `indoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -77,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
其中一个 `label` 元素的文本为 `outdoor`。
|
||||
其中一个单选按钮的文本为 `outdoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -129,9 +128,9 @@ assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: create-a-text-field
|
||||
|
||||
# --description--
|
||||
|
||||
现在让我们来创建一个 `form` 表单。
|
||||
现在让我们来创建一个 Web 表单。
|
||||
|
||||
`input` 输入框可以让你轻松获得用户的输入。
|
||||
|
||||
@ -17,15 +17,15 @@ dashedName: create-a-text-field
|
||||
|
||||
`<input type="text">`
|
||||
|
||||
**注意：**`input` 输入框是没有结束标签的。
|
||||
注意 `input` 输入框是没有结束标签的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在列表下面创建一个 `type` 为 `text` 的 `input` 输入框。
|
||||
在列表下面创建一个类型为 `text` 的 `input` 输入框。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页中应存在一个 `type` 为 `text` 的 `input` 输入框。
|
||||
网页中应存在一个类型为 `text` 的 `input` 输入框。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
|
||||
@ -11,22 +11,22 @@ dashedName: create-an-ordered-list
|
||||
|
||||
HTML 中有用于创建<dfn>有序列表</dfn>的特定元素。
|
||||
|
||||
有序列表以 `<ol>` 开始，中间包含一个或多个 `<li>` 元素，最后以 `</ol>` 结束。
|
||||
有序列表以 `<ol>` 开始，中间包含一个或多个 `<li>` 元素。 最后以 `</ol>` 结束。
|
||||
|
||||
例如:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>加菲猫</li>
|
||||
<li>哆啦A梦</li>
|
||||
<li>Garfield</li>
|
||||
<li>Sylvester</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
将会创建一个包含加菲猫和哆啦 A 梦的有序列表。
|
||||
将创建一个包含 `Garfield` 和 `Sylvester` 的编号列表。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请创建一个有序列表，内容是猫咪最讨厌的三样东西（`Top 3 things cats hate:`），内容可以任意指定。
|
||||
请创建一个有序列表，内容是猫咪最讨厌的三样东西。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: declare-the-doctype-of-an-html-document
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止，我们已经学习了一些 HTML 标签。还有一些标签是用来组成网页整体结构的，每个 HTML 文档中都有这些标签的身影。
|
||||
之前的挑战涵盖了一些 HTML 元素和它们的用法。 另外有些元素为页面提供了整体结构，每个 HTML 文档中都应该有这些元素。
|
||||
|
||||
在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是老版本的 HTML。
|
||||
在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。 大部分主流浏览器都支持最新的 HTML5 规范。 但是一些陈旧的网页可能使用的是老版本的 HTML。
|
||||
|
||||
你可以通过 `<!DOCTYPE ...>` 来告诉浏览器页面上使用的 HTML 版本，"`...`" 部分就是版本号。`<!DOCTYPE html>` 对应的就是 HTML5。
|
||||
你可以通过 `<!DOCTYPE ...>` 来告诉浏览器页面上使用的 HTML 版本，"`...`" 部分就是版本号。 `<!DOCTYPE html>` 对应的就是 HTML5。
|
||||
|
||||
`!` 和大写的 `DOCTYPE` 是很重要的，尤其是对那些老的浏览器。但 `html` 无论大写小写都可以。
|
||||
`!` 和大写的 `DOCTYPE` 是很重要的，尤其是对那些老的浏览器。 但 `html` 无论大写小写都可以。
|
||||
|
||||
所有的 HTML 代码都必须位于 `html` 标签中。其中 `<html>` 位于 `<!DOCTYPE html>` 之后，`</html>` 位于网页的结尾。
|
||||
所有的 HTML 代码都必须位于 `html` 标签中。 其中 `<html>` 位于 `<!DOCTYPE html>` 之后，`</html>` 位于网页的结尾。
|
||||
|
||||
以下是网页结构的一个例子：
|
||||
|
||||
@ -30,7 +30,7 @@ dashedName: declare-the-doctype-of-an-html-document
|
||||
|
||||
# --instructions--
|
||||
|
||||
请在代码编辑器的顶部添加一个 `DOCTYPE（文档类型）` 为 HTML5 的声明，然后添加一个 `html` 元素，再添加一个 `h1` 元素，你可以随意填写 `h1` 的内容文本。
|
||||
请在代码编辑器的顶部添加一个 `DOCTYPE` 为 HTML5 的声明。 在它下面添加 `html` 开始和结束标签，其中包裹一个 `h1` 元素。 标题可以包括任何文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -57,6 +57,7 @@ assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: define-the-head-and-body-of-an-html-document
|
||||
|
||||
# --description--
|
||||
|
||||
`html` 的结构主要分为两大部分：`head` 和 `body`。网页的描述应放入 `head` 标签，网页的内容则应放入 `body` 标签。
|
||||
`html` 的结构主要分为两大部分：`head` 和 `body`。 网页的描述应放入 `head` 标签， 网页的内容（向用户展示的）则应放入 `body` 标签。
|
||||
|
||||
比如 `link`、`meta`、`title` 和 `style` 都应放入 `head` 标签。
|
||||
|
||||
@ -29,48 +29,83 @@ dashedName: define-the-head-and-body-of-an-html-document
|
||||
|
||||
# --instructions--
|
||||
|
||||
请给网页添加 `head` 和 `body`，`head` 元素应包含 `title`；`body` 元素应该包含 `h1` 和 `p`。
|
||||
标记文本的结构主要分为两大部分：`head` 和 `body`。 `head` 元素应只包含 `title`，`body` 元素应该包含 `h1` 和 `p`。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页应只有一个 `head` 元素。
|
||||
|
||||
```js
|
||||
assert($('head').length == 1);
|
||||
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
```
|
||||
|
||||
网页应只有一个 `body` 元素。
|
||||
|
||||
```js
|
||||
assert($('body').length == 1);
|
||||
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
```
|
||||
|
||||
`head` 应为 `html` 的子元素。
|
||||
|
||||
```js
|
||||
assert($('html').children('head').length == 1);
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
||||
let foundHead;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
|
||||
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
||||
}
|
||||
assert(foundHead);
|
||||
```
|
||||
|
||||
`body` 应为 `html` 的子元素。
|
||||
|
||||
```js
|
||||
assert($('html').children('body').length == 1);
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
||||
let foundBody;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
||||
}
|
||||
assert(foundBody);
|
||||
```
|
||||
|
||||
`title` 应为 `head` 的子元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
|
||||
const headChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
||||
let foundTitle;
|
||||
if (headChildren) {
|
||||
const { children } = headChildren.groups;
|
||||
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
||||
}
|
||||
assert(foundTitle);
|
||||
```
|
||||
|
||||
`h1` 和 `p` 都应为 `body` 的子元素。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<body>\s*?(((<h1>\s*?.*?\s*?<\/h1>\s*?)(<p>(.*\s*)*?<\/p>\s*?))|((<p>\s*?.*?\s*?<\/p>\s*?)(<h1>(.*\s*)*?<\/h1>\s*?)))<\/body>/gi
|
||||
)
|
||||
);
|
||||
const bodyChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
||||
let foundElems;
|
||||
if (bodyChildren) {
|
||||
const { children } = bodyChildren.groups;
|
||||
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
||||
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
||||
const numH1s = h1s ? h1s.length : 0;
|
||||
const numPs = ps ? ps.length : 0;
|
||||
foundElems = numH1s === 1 && numPs === 1;
|
||||
}
|
||||
assert(foundElems);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -9,17 +9,19 @@ dashedName: fill-in-the-blank-with-placeholder-text
|
||||
|
||||
# --description--
|
||||
|
||||
Web 开发者通常用 [lorem ipsum text](https://baike.baidu.com/item/Lorem%20ipsum/3684081) 来做占位符，占位符就是一些用于占位的文字，没有实际意义。
|
||||
Web 开发者通常用 <dfn>lorem ipsum text</dfn> 来做占位符。 lorem ipsum text 是从古罗马西塞罗的一段著名经文中随机抽取的。
|
||||
|
||||
之所以叫 `lorem ipsum text`，是因为 `lorem ipsum` 是古罗马西塞罗谚语的前两个单词。
|
||||
Lorem ipsum text 自 16 世纪以来就在排版中被用作占位符，这一习惯也在 Web 开发中得以延续。
|
||||
|
||||
五个世纪已经很久远了。 因为我们正在构建一个 CatPhotoApp，所以我们使用 “kitty ipsum” 文本。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把 `p` 元素的内容文本替换为：`Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
|
||||
`p` 元素的内容文本应包含 `Kitty ipsum`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 元素的内容文本应包含 `Kitty ipsum`。
|
||||
你的 `p` 元素应包含 “kitty ipsum” 文本的前面几个词。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
|
||||
@ -13,11 +13,11 @@ dashedName: headline-with-the-h2-element
|
||||
|
||||
这节课中，我们将会为页面引入作为第二级标题的 `h2` 元素。
|
||||
|
||||
这些元素用来告诉浏览器网站的结构是什么样子。`h1` 元素通常被用作主标题，`h2` 元素通常被用作副标题，还有 `h3`、`h4`、`h5`、`h6` 元素，它们分别用作不同级别的标题。
|
||||
这些元素用来告诉浏览器网站的结构是什么样子。 `h1` 元素通常被用作主标题，`h2` 元素通常被用作副标题， 还有 `h3`、`h4`、`h5`、`h6` 元素，它们分别用作不同级别的标题。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在内容为 "Hello World" 的 `h1` 元素下面创建一个 `h2` 元素，`h2` 元素的内容为 `CatPhotoApp`。
|
||||
在内容为 "Hello World" 的 `h1` 元素下面创建一个 `h2` 元素，其内容为 “CatPhotoApp”。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
# --description--
|
||||
|
||||
`p` 是 `paragraph` 的缩写，通常用来创建一个段落，就和你写作文一样。
|
||||
`p` 元素是网站上段落文本使用的元素。 `p` 是“paragraph（段落）”的缩写。
|
||||
|
||||
你可以像这样创建一个段落：
|
||||
|
||||
@ -17,7 +17,9 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
# --instructions--
|
||||
|
||||
请在 `h2` 元素下方添加一个 `p` 元素，元素内容是 `Hello Paragraph`。
|
||||
在 `h2` 元素下方添加一个 `p` 元素，其内容是 `Hello Paragraph`。
|
||||
|
||||
**注意：**按照惯例，所有 HTML 标签都应该是小写字母，例如应使用 `<p></p>`，而不会使用`<P></P>`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,11 +9,9 @@ dashedName: introduction-to-html5-elements
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了很多更具描述性的 HTML 元素，例如：`header`、`footer`、`nav`、`video`、`article`、`section` 等等。
|
||||
HTML5 引入了很多更具描述性的 HTML 元素， 包括 `main`、`header`、`footer`、`nav`、`video`、`article`、`section` 等等。
|
||||
|
||||
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
|
||||
|
||||
`main` 元素让搜索引擎和开发者能很快地找到网页的主要内容。
|
||||
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。 `main` 元素让搜索引擎和开发者能很快地找到网页的主要内容。
|
||||
|
||||
举个例子，下面的 `main` 元素嵌套了两个子元素：
|
||||
|
||||
@ -28,7 +26,7 @@ HTML5 引入了很多更具描述性的 HTML 元素，例如：`header`、`foote
|
||||
|
||||
# --instructions--
|
||||
|
||||
请在现有的段落之后创建一个新的段落，段落内容为：`Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
请在现有的 `p` 之后创建一个新的 `p` 元素，内容为：`Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
然后，请添加一个 `main` 元素，作为现有的两个 `p` 元素的父级元素。
|
||||
|
||||
@ -49,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
新建的段落应包含关键词 `Purr jump eat`。
|
||||
新建的`p` 元素应包含 `kitty ipsum text` 的前面几个词。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
@ -61,7 +59,7 @@ assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
`main` 元素应有两个 `p` 元素作为它的子元素。
|
||||
`main` 元素应有两个段落元素作为它的子元素。
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
|
||||
@ -15,7 +15,7 @@ dashedName: link-to-external-pages-with-anchor-elements
|
||||
|
||||
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
|
||||
|
||||
在浏览器中，以上的标签会将文字 **"链接到 freeCodeCamp"** 展示成一个可点击的超链接。 点击该文本就会跳转到 **`https://freecodecamp.org`**。
|
||||
浏览器将显示文本 `this links to freecodecamp.org`，这是一个可点击的链接。 你可以通过这个链接访问 `https://www.freecodecamp.org`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -23,7 +23,7 @@ dashedName: link-to-external-pages-with-anchor-elements
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 元素的锚文本应为 “cat photos”。
|
||||
`a` 元素应有锚文本 `cat photos`。
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
|
||||
@ -9,9 +9,11 @@ dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
|
||||
|
||||
# --description--
|
||||
|
||||
`a` 元素还可以用来实现页面内不同区域的跳转，只需要把 `a` 元素的 `href` 值设置为井号 `#` 加欲跳转区域所对应的 `id` 属性值即可。`id` 是描述网页元素的一个属性，它的值在整个页面中唯一。
|
||||
`a`（*anchor*）元素也可以用于创建内部链接，跳转到网页内的各个不同部分。
|
||||
|
||||
下面是用来创建内部 `a` 的例子：
|
||||
要创建内部链接，你需要将链接的 `href` 属性值设置为一个哈希符号 `#` 加上你想内部链接到的元素的 `id`，通常是在网页下方的元素。 然后你需要将相同的 `id` 属性添加到你链接到的元素中。 `id` 是描述网页元素的一个属性，它的值在整个页面中唯一。
|
||||
|
||||
当用户点击了 `Contacts` 链接，页面就会跳转到网页的 **Contacts** 区域。
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
@ -19,37 +21,37 @@ dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
当用户点击了 `Contacts` 链接，页面就会跳转到网页的 **Contacts** 区域。
|
||||
当用户点击 `Contacts` 链接，可以访问网页中带有 **Contacts** 标题元素的部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请修改 `href` 属性值为 `#footer` 来将外部链接更改为内部链接，同时修改文本 `cat photos` 为 `Jump to Bottom`。
|
||||
|
||||
移除 `target="\_blank"` 属性，这个属性的存在会让链接在新标签页中打开。
|
||||
通过修改 `href` 属性值为 `"#footer"`，同时修改文本 `cat photos` 为 `Jump to Bottom`，来更改外部链接为内部链接。
|
||||
|
||||
然后添加一个 `<footer>` 元素，并将它的 `id` 属性值设置为 `footer`。
|
||||
|
||||
然后给页面底部的 `<footer>` 元素添加一个 `id` 属性，值为 `footer`。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面中应只存在一个 `a` 元素。
|
||||
页面中应只存在一个 `footer` 元素。
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
页面中应只存在一个 `footer` 元素。
|
||||
`a` 的 `href` 属性值应为 `#footer`。
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
`a` 的 `href` 属性值应为 `#footer`。
|
||||
`a` 不应有 `target` 属性。
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
`a` 不应有 `target` 属性。
|
||||
`a` 的内容文本应为 `Jump to Bottom`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 的内容文本应为 `Jump to Bottom`。
|
||||
`footer` 元素的 `id` 属性值应为 `footer`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -69,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`footer` 元素的 `id` 属性值应为 `footer`。
|
||||
`footer` 标签应该有一个 `id` 属性，值为 “footer”。
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: make-dead-links-using-the-hash-symbol
|
||||
|
||||
# --description--
|
||||
|
||||
有时你想为网站添加一个 `a` 元素，但还不确定要将它链接到哪里。这时，你可以使用链接占位符。
|
||||
有时你想为网站添加一个 `a` 元素，但还不确定要将它链接到哪里。
|
||||
|
||||
链接占位符还有一个应用场景，就是实现在点击 `a` 元素时执行 `JavaScript` 代码。我们会在后面的课程中学到。
|
||||
当你使用 `JavaScript` 更改链接的指向时，这也很方便，我们将在后面的课程中介绍。
|
||||
|
||||
# --instructions--
|
||||
|
||||
目前，`href` 的属性值是 "`https://freecatphotoapp.com`"。请将 `href` 属性的值替换为`#`，以此来创建链接占位符。
|
||||
目前，`href` 的属性值是 "`https://freecatphotoapp.com`"。 请将 `href` 属性的值替换为`#`，以此来创建链接占位符。
|
||||
|
||||
例如: `href="#"`
|
||||
|
||||
@ -49,9 +49,9 @@ assert($('a').attr('href') === '#');
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
@ -17,17 +17,17 @@ dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
</p>
|
||||
```
|
||||
|
||||
让我们来拆解一下这个例子： 通常，文本是被包裹在 `p` 元素内：
|
||||
`<p> Here's a ... for you to follow. </p>` 接下来是 `<a>` 元素（它需要结束标签 `</a>`）：
|
||||
`<a> ... </a>` `target` 是 `a` 元素的属性，它用来指定链接的打开方式。属性值 `"_blank"` 表示链接会在新标签页打开。`href` 是 `a` 的另一个属性，它用来指定链接的 URL：
|
||||
`<a href="https://freecodecamp.org"> ... </a>` `a` 元素内的内容文本 **"link to freecodecamp.org"**，会显示为一个可以点击的链接：
|
||||
`<a href=" ... ">link to freecodecamp.org</a>` 此示例的最终输出结果是这样：
|
||||
我们来分解一下这个示例：普通文本被包裹在 `p` 元素中，例如
|
||||
`<p> Here's a ... for you to follow. </p>` 然后是 *anchor* 元素 `<a>`（要求有一个结束标签 `</a>`）：
|
||||
`<a> ... </a>` `target` 是一个锚点标签属性，用来指定在哪里打开链接，`_blank` 值指定在一个新的窗口打开链接，`href` 是一个锚点标签属性，包含链接的 URL 地址
|
||||
`<a href="http://freecodecamp.org"> ... </a>`。`a` 元素中的文本，**“链接到 freecodecamp.org”**，叫作 `anchor text`，将显示一个可点击的链接：
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`。 这个示例最后输出的结果像这样：
|
||||
|
||||
Here's a [link to freecodecamp.org](http://freecodecamp.one) for you to follow.
|
||||
你可以点击这个 [freecodecamp.org 链接](http://freecodecamp.one)。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个新的段落（`p`）标签来包裹 `main` 元素里的 `a` 节点。新段落标签的内容为："View more cat photos"，其中 "cat photos" 是一个链接，其余是纯文本。
|
||||
创建一个新的段落（`p`）标签来包裹 `main` 元素里的 `a` 节点。 新段落应有文本 `View more cat photos`，其中 `cat photos` 是一个链接，其余是纯文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素的内容文本应为 "cat photos"。
|
||||
`a` 元素应有锚文本 `cat photos`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你应该在 `a` 标签的外部创建一个新的 `p` 标签。页面中应至少包含 3 个 `p` 标签。
|
||||
你应该在 `a` 标签的外部创建一个新的 `p` 标签。 页面中应至少包含 3 个 `p` 标签。
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
@ -65,7 +65,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`p` 元素应该包含文本 "View more "（请注意，more 之后有一个空格）。
|
||||
`p` 元素应有文本 `View more`（后面有一个空格）。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -80,7 +80,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素中不应包含文本 "View more"。
|
||||
`a` 元素 <em>不</em> 应有文本 `View more`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: nest-many-elements-within-a-single-div-element
|
||||
|
||||
# --description--
|
||||
|
||||
`div` 元素也叫 Content Division Element（内容划分元素）元素，是一个包裹其他元素的通用容器。
|
||||
`div` 元素也叫内容划分元素，是一个包裹其他元素的通用容器。
|
||||
|
||||
它也是 HTML 中出现频率最高的元素。
|
||||
|
||||
@ -17,9 +17,9 @@ dashedName: nest-many-elements-within-a-single-div-element
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把无序列表、有序列表和段落都嵌套进同一个 `div` 元素。
|
||||
将你的列表“猫喜欢的三件事”和“猫最讨厌的三件事”放入同一个 `div` 元素中。
|
||||
|
||||
提示：你可以在第一个 `<p>` 之前插入 `div` 开始标记，在 `</ol>` 之后插入 `div` 结束标签。这样，所有的列表都会位于 `div` 之内。
|
||||
提示：你可以在第一个 `<p>` 之前插入 `div` 开始标记，在 `</ol>` 之后插入 `div` 结束标签。 这样，所有的列表都会位于 `div` 之内。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -92,7 +92,7 @@ assert(
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
|
||||
@ -9,29 +9,33 @@ dashedName: say-hello-to-html-elements
|
||||
|
||||
# --description--
|
||||
|
||||
欢迎参加 freeCodeCamp 的编程挑战赛，这些挑战将会帮助你逐步掌握 Web 开发。
|
||||
欢迎访问 freeCodeCamp 的 HTML 编程挑战。 这些挑战将会帮助你逐步掌握 Web 开发。
|
||||
|
||||
HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，我们来用 HTML 制作一个简单的网页，你可以直接在网页内置的代码编辑器中编辑代码。
|
||||
首先，我们来用 HTML 制作一个简单的网页。 你可以直接在网页内置的代码编辑器中编辑代码。
|
||||
|
||||
看到代码编辑器中的 `<h1>Hello</h1>` 了吗? 那就是一个 HTML 元素。
|
||||
你看到编辑器中的 `<h1>Hello</h1>` 了吗？ 那是一个 HTML 元素。
|
||||
|
||||
大部分 HTML 元素都有一个`开始标签`和一个`结束标签`。
|
||||
大部分 HTML 元素都有一个开始标签和一个结束标签。
|
||||
|
||||
开始标签像这样：`<h1>`
|
||||
开始标签像这样：
|
||||
|
||||
结束标签像这样：`</h1>`
|
||||
`<h1>`
|
||||
|
||||
开始标签和结束标签的唯一区别就是结束标签多了一个 `/`。
|
||||
结束标签像这样：
|
||||
|
||||
每个挑战都有测试，任何时候点击**运行测试**按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以进入下一个挑战。反之，测试区会显示你没有通过测试的原因。
|
||||
`</h1>`
|
||||
|
||||
开始标签和结束标签的唯一区别就是结束标签多了一个斜杠。
|
||||
|
||||
每个挑战都有测试，任何时候你点击“运行测试”按钮，就可以运行测试。 如果代码通过测试，将会弹出一个窗口，你就可以进入下一个挑战。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把 `h1` 元素的内容改为 `Hello World`。
|
||||
要通过这个挑战的测试，需要修改 `h1` 元素的文本为 `Hello World`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素的内容文本应为 `Hello World`。
|
||||
`h1` 元素应有文本 `Hello World`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
|
||||
@ -11,21 +11,21 @@ dashedName: turn-an-image-into-a-link
|
||||
|
||||
你可以通过把元素嵌套进 `a` 里使其变成一个链接。
|
||||
|
||||
如果我们要把图片嵌套进 `a` 元素，可以这样写：
|
||||
如果我们要把图片嵌套进 `a` 元素， 可以这样写：
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="三只萌萌的小猫"></a>`
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
|
||||
|
||||
如果把 `a` 的 `href` 属性值设置为 `#`，就可以创建固定链接。
|
||||
如果把 `a` 的 `href` 属性值设置为 `#`，创建的是一个死链接（不跳转到其他画面）。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把现存的图片嵌套进 `a` 中。
|
||||
请把现存的图片嵌套进 `a`（ *锚点*）元素中。
|
||||
|
||||
如果鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。
|
||||
完成后，请你把鼠标光标悬停在你的图像上， 鼠标光标将变成点击光标。 于是图片就变成了链接。
|
||||
|
||||
# --hints--
|
||||
|
||||
应将图片嵌套进 `a` 元素中。
|
||||
应将 `img` 嵌套进 `a` 元素中。
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
@ -69,9 +69,9 @@ assert(
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
@ -17,6 +17,8 @@ dashedName: use-html5-to-require-a-field
|
||||
|
||||
请给 `input` 元素加上 `required` 属性，这样用户就必须先在输入框里填入内容，然后才可以提交表单。
|
||||
|
||||
然后尝试在不输入任何文本的情况下提交表单， 看看 HTML5 表单是如何通知你这个字段是必填的。
|
||||
|
||||
# --hints--
|
||||
|
||||
`input` 元素应有 `required` 属性。
|
||||
@ -61,9 +63,9 @@ assert($('input').prop('required'));
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
|
||||
@ -8,26 +8,26 @@ dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
|
||||
|
||||
# --description--
|
||||
|
||||
提交表单时，所选项的值会发送给服务端。`radio` 和 `checkbox` 的 `value` 属性值决定了发送到服务端的实际内容。
|
||||
提交表单时，所选项的值会发送给服务端。 `radio` 和 `checkbox` 的 `value` 属性值决定了发送到服务端的实际内容。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
这里有两个 `radio` 单选框。当用户提交表单时，如果 `indoor` 选项被选中，表单数据会包含：`indoor-outdoor=indoor`。也就是所选项的 `name` 和 `value` 属性值。
|
||||
这里有两个 `radio` 单选框。 当用户提交表单时，如果 `indoor` 选项被选中，表单数据会包含：`indoor-outdoor=indoor`。 也就是所选项的 `name` 和 `value` 属性值。
|
||||
|
||||
如果没有指明 `value` 属性值，则会使用默认值做为表单数据提交，也就是 `on`。在这种情况下，如果用户选中 "indoor" 选项然后提交表单，表单数据则会包含 `indoor-outdoor=on`。这样的表单数据看起来不够直观，因此最好将 `value` 属性值设置为一些有意义的内容。
|
||||
如果没有指明 `value` 属性值，则会使用默认值做为表单数据提交，也就是 `on`。 在这种情况下，如果用户选中 "indoor" 选项然后提交表单，表单数据则会包含 `indoor-outdoor=on`。 这样的表单数据看起来不够直观，因此最好将 `value` 属性值设置为一些有意义的内容。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给每一个 `radio` 和 `checkbox` 输入框添加 `value` 属性，属性值为 `input` 对应 `label` 中文本的小写形式。如 Outdoor 的 `value` 应设置为 `"outdoor"`，即 `value="outdoor"`。
|
||||
给每一个 `radio` 和 `checkbox` 输入框添加 `value` 属性。 使用输入标签的文本，小写形式，作为属性的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user