Chinese translation of responsive-web-design (#40607)
This commit is contained in:
Xing Liu
GitHub
@ -8,7 +8,7 @@ forumTopicId: 16627
|
||||
|
||||
# --description--
|
||||
|
||||
让我们来给表单添加一个`submit`提交按钮，当点击提交按钮时，表单中的数据将会被发送到`action`属性指定的 URL 上。
|
||||
让我们来给表单添加一个 `submit`（提交）按钮。点击提交按钮时，表单中的数据将会被发送到 `action` 属性指定的 URL 上。
|
||||
|
||||
例如：
|
||||
|
||||
@ -16,23 +16,23 @@ forumTopicId: 16627
|
||||
|
||||
# --instructions--
|
||||
|
||||
在表单的底部创建一个`button`按钮，按钮的`type`属性值为`submit`，文本为`提交`。
|
||||
请在表单（`form` 元素）底部创建一个 `button` 元素，将按钮的 `type` 属性值设置为 `submit`，内容文本为 `提交`。
|
||||
|
||||
# --hints--
|
||||
|
||||
表单内部应该有一个按钮。
|
||||
表单内部应有一个 `button` 元素。
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
按钮的`type`属性值应该为`submit`。
|
||||
按钮的 `type` 属性值应为 `submit`。
|
||||
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
提交按钮的文本应该为`提交`。
|
||||
提交按钮的文本应为 `Submit` 。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保按钮有结束标记。
|
||||
`button` 元素应有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,51 +8,51 @@ forumTopicId: 16640
|
||||
|
||||
# --description--
|
||||
|
||||
用`img`元素来为你的网站添加图片，其中`src`属性指向一个图片的地址。
|
||||
你可以使用 `img` 元素来为你的网站添加图片，其中 `src` 属性指向图片的地址。
|
||||
|
||||
例如：
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
|
||||
注意：`img`元素是没有结束标记的。
|
||||
注意：`img` 元素是没有结束标签的。
|
||||
|
||||
所有的`img`元素必须有`alt`属性，`alt`属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
|
||||
所有的 `img` 元素**必须**有 `alt` 属性。`alt` 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
|
||||
|
||||
注意：如果图片是纯装饰性的，用一个空的`alt`是最佳实践。
|
||||
注意：如果图片是纯装饰性的，把 `alt` 的属性值设置为空是最佳实践。
|
||||
|
||||
理想情况下，`alt`属性不应该包含特殊字符，除非必要。
|
||||
理想情况下，`alt` 属性不应该包含特殊字符，除非有特殊需要。
|
||||
|
||||
让我们给上面例子的`img`添加`alt`属性。
|
||||
让我们给上面例子的 `img` 添加 `alt` 属性。
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">`
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="一只打着领带的商务猫">`
|
||||
|
||||
# --instructions--
|
||||
|
||||
让我们给网站添加图片：
|
||||
|
||||
在`main`元素里面，给`p`前面插入一个`img`元素
|
||||
在 `main` 元素里，给 `p` 元素前面插入一个 `img` 元素。
|
||||
|
||||
现在设置`src`属性指向这个地址：
|
||||
然后将 `src` 的属性值设置为这个 URL：
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
最后不要忘记给图片添加一个`alt`文本。
|
||||
最后，不要忘记给图片加上 `alt` 属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页应该有一张图片。
|
||||
你的网页上应该有一张图片。
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
`img` 应该有一个`src`属性，指向猫咪图片。
|
||||
`img` 应该有一个 `src` 属性，其值为猫咪图片的 URL。
|
||||
|
||||
```js
|
||||
assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
`img` 元素的`alt`属性值不应为空。
|
||||
`img` 元素的 `alt` 属性值不应为空。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,25 +8,27 @@ forumTopicId: 16647
|
||||
|
||||
# --description--
|
||||
|
||||
`Placeholder`占位符是用户在`input`输入框中输入任何东西前的预定义文本。
|
||||
`Placeholder` 占位符是用户在 `input` 输入框中输入任何东西前的预定义文本。
|
||||
|
||||
你可以像这样创建一个占位符：
|
||||
|
||||
`<input type="text" placeholder="this is placeholder text">`
|
||||
|
||||
**注意：**别忘了 `input` 元素是 "自闭和标签"，即不需要结束标签。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把`input`输入框的`placeholder`占位符文本设置为 “猫咪图片地址”。
|
||||
把 `input` 输入框的 `placeholder` 占位符文本设置为 "cat photo URL"。
|
||||
|
||||
# --hints--
|
||||
|
||||
给现有的`input`输入框添加一个`placeholder`属性。
|
||||
给现有的 `input` 输入框添加一个 `placeholder` 属性。
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
设置`placeholder`属性的值为 ”猫咪图片地址“。
|
||||
设置 `placeholder` 属性的值为 `cat photo URL`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,17 +36,17 @@ assert(
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/猫咪图片地址/gi)
|
||||
.match(/cat\s+photo\s+URL/gi)
|
||||
);
|
||||
```
|
||||
|
||||
完整的`input`元素应有一个结束标签
|
||||
`input` 元素不该有结束标签。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
`input`输入框的语法必须正确。
|
||||
`input` 输入框的语法必须正确。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 301094
|
||||
|
||||
# --description--
|
||||
|
||||
如果想设置某个单选按钮或多选按钮默认被选中，只需给`input`元素添加 "checked" 属性。 例如:
|
||||
如果想设置某个单选按钮或多选按钮默认被选中，只需给 `input` 元素添加 "checked" 属性。 例如:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
把第一个`radio button`和第一个`checkbox`都设置为默认选中。
|
||||
把第一个 `radio button` 和第一个 `checkbox` 都设置为默认选中。
|
||||
|
||||
# --hints--
|
||||
|
||||
表单的第一个单选按钮应该被默认选中。
|
||||
表单的第一个单选按钮应被默认选中。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
表单的第一个多选按钮应该被默认选中。
|
||||
表单的第一个多选按钮应被默认选中。
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
|
||||
@ -8,41 +8,41 @@ forumTopicId: 16782
|
||||
|
||||
# --description--
|
||||
|
||||
记住：注释的开始标记是`<!--`，结束标记是`-->`。
|
||||
记住：注释的开始标记是 `<!--`，结束标记是 `-->`。
|
||||
|
||||
现在你需要在`h2`元素前终止注释。
|
||||
现在你需要在 `h2` 元素开始前终止注释。
|
||||
|
||||
# --instructions--
|
||||
|
||||
任务：注释掉`h1`元素和`p`元素，保留`h2`元素。
|
||||
任务：注释掉 `h1` 元素和 `p` 元素，保留 `h2` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
注释掉`h1`元素，这样它就从网页上消失了。
|
||||
应注释掉 `h1` 元素，这样它就从网页上消失了。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
`h2`元素保持原样，这样网页上还能看到它。
|
||||
`h2` 元素应保持原样，这样网页上还能看到它。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
注释掉`p`元素，这样它就从网页上消失了。
|
||||
应注释掉 `p` 元素，这样它就从网页上消失了。
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
确保每一个注释都以`-->`结尾。
|
||||
每一个注释都应以 `-->` 结尾。
|
||||
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
不要更改`h1`元素、`h2` 元素、`p`元素的顺序。
|
||||
不要更改 `h1` 元素、`h2` 元素、`p` 元素的顺序。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 16814
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 有一个特定的元素用于创建无序列表`unordered lists（缩写 ul）`。
|
||||
HTML 有一个特定的元素用于创建<dfn>无序列表</dfn>。
|
||||
|
||||
无序列表以`<ul>`开始，中间包含一个或多个`<li>`元素，最后以`</ul>`结尾。
|
||||
无序列表以 `<ul>` 开始，中间包含一个或多个 `<li>` 元素，最后以 `</ul>` 结束。
|
||||
|
||||
例如:
|
||||
|
||||
@ -25,23 +25,23 @@ HTML 有一个特定的元素用于创建无序列表`unordered lists（缩写 u
|
||||
|
||||
# --instructions--
|
||||
|
||||
删除页面底部的两个`p`元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
|
||||
请删除页面底部的两个 `p` 元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`ul`无序列表。
|
||||
应存在一个 `ul` 无序列表。
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
你应该在`ul`无序列表中添加三个`li`条目。
|
||||
应在 `ul` 无序列表中添加三个 `li` 条目。
|
||||
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
确保`ul`无序列表有结束标记。
|
||||
确保 `ul` 无序列表有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保每个`li`条目都有结束标记。
|
||||
确保每个 `li` 条目都有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -61,7 +61,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
每个`li`元素都应该有一个空字符串或者空格。
|
||||
每个 `li` 元素不应只包含空字符串或只包含空格。
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16817
|
||||
|
||||
# --description--
|
||||
|
||||
如果想使用 HTML 向服务器提交数据，可以给`form`添加`action`属性。
|
||||
我们可以只通过 HTML 来实现发送数据给服务器的表单，只需要给 `form` 元素添加 `action` 属性即可。
|
||||
|
||||
例如:
|
||||
|
||||
@ -16,21 +16,21 @@ forumTopicId: 16817
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`input`输入框外层创建一个`form`表单，然后设置表单的`action`属性为`"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
把现有的 `input` 输入框放到一个新建的 `form` 表单里，然后设置表单的 `action` 属性为 `"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
|
||||
# --hints--
|
||||
|
||||
在`input`输入框外层创建一个`form`表单。
|
||||
现有的 `input` 输入框应位于新创建的 `form` 表单里面。
|
||||
|
||||
```js
|
||||
const inputElem = document.querySelector('form input');
|
||||
assert(
|
||||
$('form') &&
|
||||
$('form').children('input') &&
|
||||
$('form').children('input').length > 0
|
||||
inputElem.getAttribute('type') === 'text' &&
|
||||
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
||||
);
|
||||
```
|
||||
|
||||
确保表单的`action`属性为`"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
表单的 `action` 属性值应设置为 `https://freecatphotoapp.com/submit-cat-photo`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保表单有开始标记和结束标记。
|
||||
`form` 元素应有开始标签和结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,13 +10,13 @@ forumTopicId: 16821
|
||||
|
||||
`checkboxes`（复选框）就好比多项选择题，正确答案有多个。
|
||||
|
||||
复选框是`input`选择框的另一种类型。
|
||||
复选框是 `input` 选择框的一种类型。
|
||||
|
||||
每一个复选框都应该嵌套在它自己的`label`（标签）元素中。
|
||||
每一个复选框都应该嵌套在它自己的 `label`（标签）元素中。这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。
|
||||
|
||||
所有关联的复选框应该拥有相同的`name`属性。
|
||||
所有关联的复选框应该拥有相同的 `name` 属性。
|
||||
|
||||
最佳实践是在`label`元素上设置`for`属性，让其值与复选框的`id`属性值相等，这样就在`label`元素和它的子元素复选框之间创建了一种链接关系。例如：
|
||||
使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与复选框的 `id` 属性值相同。
|
||||
|
||||
下面是一个复选框的例子：
|
||||
|
||||
@ -24,23 +24,23 @@ forumTopicId: 16821
|
||||
|
||||
# --instructions--
|
||||
|
||||
给表单添加三个复选框，每个复选框都被嵌套进`label`元素中，并且它的`name`属性均为`personality`，它们的内容可以随意指定。
|
||||
请给表单添加三个复选框，每个复选框都被嵌套进 `label` 元素中，并且它的 `name` 属性均为 `personality`。你可以随意指定每个复选框的内容文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
表单应该有三个复选框。
|
||||
表单中应存在三个复选框。
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
每个复选框都应该被嵌套进`label`元素中。
|
||||
每个复选框都应该被嵌套进 `label` 元素中。
|
||||
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
确保`label`元素有结束标记。
|
||||
确保 `label` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
设置复选框的`name`属性均为`personality`。
|
||||
复选框的 `name` 属性值均应为 `personality`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,11 +10,11 @@ forumTopicId: 16822
|
||||
|
||||
`radio buttons`（单选按钮）就好比单项选择题，正确答案只有一个。
|
||||
|
||||
单选按钮是`input`选择框的一种类型。
|
||||
单选按钮是 `input` 选择框的一种类型。
|
||||
|
||||
每一个单选按钮都应该嵌套在它自己的`label`（标签）元素中。
|
||||
每一个单选按钮都应该嵌套在它自己的 `label`（标签）元素中。这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。
|
||||
|
||||
所有关联的单选按钮应该拥有相同的`name`属性。
|
||||
所有关联的单选按钮应该拥有相同的 `name` 属性。
|
||||
|
||||
下面是一个单选按钮的例子：
|
||||
|
||||
@ -24,7 +24,7 @@ forumTopicId: 16822
|
||||
</label>
|
||||
```
|
||||
|
||||
最佳实践是在`label`元素上设置for属性，让其值与单选按钮的`id`属性值相等，这样就在`label`元素和它的子元素单选按钮之间创建了一种链接关系。例如：
|
||||
使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与单选按钮的 `id` 属性值相同。
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
@ -34,29 +34,29 @@ forumTopicId: 16822
|
||||
|
||||
# --instructions--
|
||||
|
||||
给表单添加两个单选按钮，一个叫`indoor`，另一个叫`outdoor`，单选按钮的 `name` 为 `indoor-outdoor`。
|
||||
给表单添加两个单选按钮，一个叫 `indoor` 另一个叫 `outdoor`。并将单选按钮的 `name` 属性值设置为 `indoor-outdoor`。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面上应该有两个单选按钮元素。
|
||||
页面上应存在两个单选按钮元素。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
设置单选按钮的`name`属性为`indoor-outdoor`。
|
||||
应设置单选按钮的 `name` 属性值为 `indoor-outdoor`。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
每一个单选按钮都应该嵌套进它自己的`label`元素中。
|
||||
每个单选按钮都应嵌套进它自己的 `label` 元素中。
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
每一个`label`元素都有结束标记。
|
||||
每一个 `label` 元素都有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
其中一个`label`元素的文本为`indoor`。
|
||||
其中一个 `label` 元素的文本为 `indoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
其中一个`label`元素的文本为`outdoor`。
|
||||
其中一个 `label` 元素的文本为 `outdoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -86,7 +86,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
所有的单选按钮都应该包含在`form`表单中。
|
||||
所有的单选按钮都应该包含在 `form` 表单中。
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 16823
|
||||
|
||||
# --description--
|
||||
|
||||
现在让我们来创建一个`form`表单。
|
||||
现在让我们来创建一个 `form` 表单。
|
||||
|
||||
`input`输入框可以让你轻松获得用户的输入。
|
||||
`input` 输入框可以让你轻松获得用户的输入。
|
||||
|
||||
你可以像这样创建一个文本输入框：
|
||||
|
||||
`<input type="text">`
|
||||
|
||||
注意：`input`输入框是没有结束标记的。
|
||||
**注意：**`input` 输入框是没有结束标签的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在列表下面创建一个`type`属性为`text`的`input`输入框。
|
||||
在列表下面创建一个 `type` 为 `text` 的 `input` 输入框。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页中有一个`type`属性为`text`的`input`输入框。
|
||||
网页中应存在一个 `type` 为 `text` 的 `input` 输入框。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 16824
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 有一个特定的元素用于创建有序列表`ordered lists（缩写 ol）`。
|
||||
HTML 中有用于创建<dfn>有序列表</dfn>的特定元素。
|
||||
|
||||
有序列表以`<ol>`开始，中间包含一个或多个`<li>`元素，最后以`</ol>`结尾。
|
||||
有序列表以 `<ol>` 开始，中间包含一个或多个 `<li>` 元素，最后以 `</ol>` 结束。
|
||||
|
||||
例如:
|
||||
|
||||
@ -21,51 +21,51 @@ HTML 有一个特定的元素用于创建有序列表`ordered lists（缩写 ol
|
||||
</ol>
|
||||
```
|
||||
|
||||
将会创建一个包含加菲猫和哆啦A梦的有序列表。
|
||||
将会创建一个包含加菲猫和哆啦 A 梦的有序列表。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个有序列表，内容是猫咪最讨厌的三件东西，内容可以任意指定。
|
||||
请创建一个有序列表，内容是猫咪最讨厌的三样东西（`Top 3 things cats hate:`），内容可以任意指定。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面应该有一个无序列表，内容是猫咪最喜欢的三件东西。
|
||||
应包含一个有序列表，内容是猫咪最讨厌的三样东西（`Top 3 things cats hate:`）。
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。
|
||||
应包含有一个无序列表，内容是猫咪最喜欢的东西（`Things cats love:`）。
|
||||
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
页面应该只有一个`ul`元素。
|
||||
页面应只包含一个 `ul` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
页面应该只有一个`ol`元素。
|
||||
页面应只包含一个 `ol` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
`ul`无序列表应该包含3个`li`条目。
|
||||
`ul` 无序列表中应包含 3 个 `li` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
`ol`有序列表应该包含3个`li`元素。
|
||||
`ol` 有序列表应该包含 3 个 `li` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
确保`ul`无序列表有结束标记。
|
||||
`ul` 无序列表应有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -74,7 +74,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保`ol`有序列表有结束标记。
|
||||
`ol` 有序列表应有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -83,7 +83,8 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保每个`li`条目都有结束标记。
|
||||
`li` 元素应有结束标签。
|
||||
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -93,16 +94,20 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
无序列表里的 `li` 元素不应该为空。
|
||||
无序列表里的 `li` 元素内容不应为空。
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));
|
||||
$('ul li').each((i, val) =>
|
||||
assert(__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
有序列表里的 `li` 元素不应该为空。
|
||||
有序列表里的 `li` 元素内容不应该为空。
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) => assert(!!val.textContent.replace(/\s/g, '')));
|
||||
$('ol li').each((i, val) =>
|
||||
assert(!!__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301095
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止，我们学习了一些特定的 HTML 标签，还有一些标签是用来组成网页的总体结构，并且它们在每个 HTML 文档中都能看到。
|
||||
到目前为止，我们已经学习了一些 HTML 标签。还有一些标签是用来组成网页整体结构的，每个 HTML 文档中都有这些标签的身影。
|
||||
|
||||
在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
|
||||
在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 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>` 位于网页的结尾。
|
||||
|
||||
这是网页结构一个例子：
|
||||
以下是网页结构的一个例子：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -29,23 +29,23 @@ forumTopicId: 301095
|
||||
|
||||
# --instructions--
|
||||
|
||||
在代码编辑器的顶部添加一个`DOCTYPE（文档类型）`为 HTML5 的声明，然后添加一个`html`元素，再添加一个`h1`元素，标题的文本可以随意填。
|
||||
请在代码编辑器的顶部添加一个 `DOCTYPE（文档类型）` 为 HTML5 的声明，然后添加一个 `html` 元素，再添加一个 `h1` 元素，你可以随意填写 `h1` 的内容文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页中应该包含`<!DOCTYPE html>`标签。
|
||||
网页中应包含 `<!DOCTYPE html>` 标签。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
网页中只有一个`html`元素。
|
||||
网页中应只存在一个 `html` 元素。
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
`h1`元素应该位于`html`元素内部。
|
||||
`h1` 元素应该位于 `html` 元素内部。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301096
|
||||
|
||||
# --description--
|
||||
|
||||
`html`的结构主要分为两大部分：`head`、`body`。关于网页的描述都应该放入`head`标签，网页的内容都应该放入`body`标签。
|
||||
`html` 的结构主要分为两大部分：`head` 和 `body`。网页的描述应放入 `head` 标签，网页的内容则应放入 `body` 标签。
|
||||
|
||||
比如`link`、`meta`、`title`和`style`都应该放入`head`标签。
|
||||
比如 `link`、`meta`、`title` 和 `style` 都应放入 `head` 标签。
|
||||
|
||||
这是网页布局的一个例子：
|
||||
|
||||
@ -28,41 +28,41 @@ forumTopicId: 301096
|
||||
|
||||
# --instructions--
|
||||
|
||||
给网页添加`head`和`body`，`head`元素应该包含`title`，`body`元素应该包含`h1`和`p`。
|
||||
请给网页添加 `head` 和 `body`，`head` 元素应包含 `title`；`body` 元素应该包含 `h1` 和 `p`。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页应该只有一个`head`元素。
|
||||
网页应只有一个 `head` 元素。
|
||||
|
||||
```js
|
||||
assert($('head').length == 1);
|
||||
```
|
||||
|
||||
网页应该只有一个`body`元素。
|
||||
网页应只有一个 `body` 元素。
|
||||
|
||||
```js
|
||||
assert($('body').length == 1);
|
||||
```
|
||||
|
||||
`head`应该是`html`的子元素。
|
||||
`head` 应为 `html` 的子元素。
|
||||
|
||||
```js
|
||||
assert($('html').children('head').length == 1);
|
||||
```
|
||||
|
||||
`body`应该是`html`的子元素。
|
||||
`body` 应为 `html` 的子元素。
|
||||
|
||||
```js
|
||||
assert($('html').children('body').length == 1);
|
||||
```
|
||||
|
||||
`title`应该是`head`的子元素。
|
||||
`title` 应为 `head` 的子元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
|
||||
```
|
||||
|
||||
`h1`和`p`都应该是`body`的子元素。
|
||||
`h1` 和 `p` 都应为 `body` 的子元素。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,29 +8,29 @@ forumTopicId: 17559
|
||||
|
||||
# --description--
|
||||
|
||||
手机的屏幕空间是有限的。
|
||||
手机屏幕的空间是有限的。
|
||||
|
||||
让我们删除不必要的元素，开始设计我们的CatPhotoApp。
|
||||
让我们删除不必要的元素，开始设计我们的 CatPhotoApp。
|
||||
|
||||
# --instructions--
|
||||
|
||||
任务：删除`h1`元素以简化视图。
|
||||
任务：删除 `h1` 元素以简化视图。
|
||||
|
||||
# --hints--
|
||||
|
||||
删除`h1`元素。
|
||||
应删除 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
保留`h2`元素。
|
||||
应保留 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
保留`p`元素。
|
||||
应保留 `p` 元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 18178
|
||||
|
||||
# --description--
|
||||
|
||||
Web 开发者通常用[lorem ipsum text](https://baike.baidu.com/item/Lorem%20ipsum/3684081)来做占位符，占位符就是占着位置的一些文字，没有实际意义。
|
||||
Web 开发者通常用 [lorem ipsum text](https://baike.baidu.com/item/Lorem%20ipsum/3684081) 来做占位符，占位符就是一些用于占位的文字，没有实际意义。
|
||||
|
||||
为什么叫`lorem ipsum text`呢?是因为`lorem ipsum`是古罗马西塞罗谚语的前两个单词。
|
||||
之所以叫 `lorem ipsum text`，是因为 `lorem 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 dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
|
||||
|
||||
# --hints--
|
||||
|
||||
`p`元素的内容必须包含`Monkey code`。
|
||||
`p` 元素的内容文本应包含 `Kitty ipsum`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
|
||||
@ -8,25 +8,25 @@ forumTopicId: 18196
|
||||
|
||||
# --description--
|
||||
|
||||
在接下来的几节课里，我们将会由浅入深地制作一个 CatPhotoApp。
|
||||
在接下来的几节课里，我们将会一步一步地制作一个展示猫咪图片的 HTML5 app。
|
||||
|
||||
这节课将会引入`h2`元素。
|
||||
这节课中，我们将会为页面引入作为第二级标题的 `h2` 元素。
|
||||
|
||||
这些元素用来告诉浏览器，网站的结构是什么样子。`h1`元素通常被用作主标题，`h2`元素通常被用作副标题，还有`h3`、`h4`、`h5`、`h6`元素，它们分别用作不同级别的标题。
|
||||
这些元素用来告诉浏览器网站的结构是什么样子。`h1` 元素通常被用作主标题，`h2` 元素通常被用作副标题，还有 `h3`、`h4`、`h5`、`h6` 元素，它们分别用作不同级别的标题。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`h1`元素下面创建一个`h2`元素，元素内容为：`CatPhotoApp`。
|
||||
在内容为 "Hello World" 的 `h1` 元素下面创建一个 `h2` 元素，`h2` 元素的内容为 `CatPhotoApp`。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`h2`元素。
|
||||
应创建一个 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
`h2`元素应该有结束标记。
|
||||
`h2` 元素应该有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,17 +35,23 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h2`元素的内容应为：`CatPhotoApp`。
|
||||
`h2` 元素的内容应为：`CatPhotoApp`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
`h1`元素的内容应为：`Hello World`。
|
||||
`h1` 元素的内容应为：`Hello World`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
`h1` 元素应出现在 `h2` 元素之前。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 18202
|
||||
|
||||
# --description--
|
||||
|
||||
`p`是`paragraph`的缩写，通常用来创建一个段落，就和你写作文一样。
|
||||
`p` 是 `paragraph` 的缩写，通常用来创建一个段落，就和你写作文一样。
|
||||
|
||||
你可以像这样创建一个段落：
|
||||
|
||||
@ -16,23 +16,23 @@ forumTopicId: 18202
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`h2`元素下面新增一个`p`元素，元素内容是：`Hello Paragraph`。
|
||||
请在 `h2` 元素下方添加一个 `p` 元素，元素内容是 `Hello Paragraph`。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`p`元素。
|
||||
应包含一个 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
`p`元素的内容应为：`Hello Paragraph`。
|
||||
`p` 元素的内容文本应为 `Hello Paragraph`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
`p`元素应该有结束标记。
|
||||
`p` 元素应有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,13 +8,13 @@ forumTopicId: 301097
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了很多更具描述性的 HTML 元素，例如：`header`、`footer`、`nav`、`video`、`article`、`section`等等。
|
||||
HTML5 引入了很多更具描述性的 HTML 元素，例如：`header`、`footer`、`nav`、`video`、`article`、`section` 等等。
|
||||
|
||||
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
|
||||
|
||||
`main`元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
|
||||
`main` 元素让搜索引擎和开发者能很快地找到网页的主要内容。
|
||||
|
||||
举个栗子, 下面的 `main` 元素嵌套了两个子元素：
|
||||
举个例子，下面的 `main` 元素嵌套了两个子元素：
|
||||
|
||||
```html
|
||||
<main>
|
||||
@ -23,23 +23,23 @@ HTML5 引入了很多更具描述性的 HTML 元素，例如：`header`、`foote
|
||||
</main>
|
||||
```
|
||||
|
||||
**提示：** 在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。
|
||||
**提示：**在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在现有的段落下创建一个新的段落，段落内容为：`养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。`
|
||||
请在现有的段落之后创建一个新的段落，段落内容为：`Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
在第一个段落前添加`<main>`，在第二个段落后添加`</main>`。
|
||||
然后，请添加一个 `main` 元素，作为现有的两个 `p` 元素的父级元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面中应该有两个段落。
|
||||
页面中应该有两个 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
确保每个段落都有结束标记。
|
||||
每个 `p` 元素都应有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,31 +48,31 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
新建的段落应该包含关键词：猫咪。
|
||||
新建的段落应包含关键词 `Purr jump eat`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
代码中应该包含`main`元素。
|
||||
应该存在 `main` 元素。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
`main`元素应有两个 `p`元素作为它的子元素。
|
||||
`main` 元素应有两个 `p` 元素作为它的子元素。
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
开始标记\`\`应位于第一个段落之前。
|
||||
`main` 的开始标签应位于第一个段落之前。
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
结束标记\`\`应位于第二段落之后。
|
||||
`main` 的结束标签应位于第二个段落之后。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
|
||||
@ -8,33 +8,33 @@ forumTopicId: 18226
|
||||
|
||||
# --description--
|
||||
|
||||
你可以用 `a`（Anchor，简写 a）来实现网页间的跳转。
|
||||
你可以用 `a`（Anchor，简写为 a）来实现网页间的跳转。
|
||||
|
||||
`a` 需要一个`href`属性指向目的地，它还需要有 `a` 文本，例如：
|
||||
`a` 需要一个 `href` 属性指向跳转的目的地，同时，它还应有内容，例如：
|
||||
|
||||
`<a href="https://freecodecamp.org">传送至</a>`
|
||||
`<a href="https://freecodecamp.org">链接到 freeCodeCamp</a>`
|
||||
|
||||
然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到`https://freecodecamp.org`。
|
||||
在浏览器中，以上的标签会将文字 **"链接到 freeCodeCamp"** 展示成一个可点击的超链接。点击该文本就会跳转到 `https://freecodecamp.org`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个 `a`，它的`href`属性为`https://freecatphotoapp.com` ，它的文本为`cat photos`。
|
||||
创建一个内容文本为 `cat photos` 的 `a` 元素，并将其 `href` 属性值设置为 `https://freecatphotoapp.com`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a`元素的 `a` 文本应为：`cat photos`。
|
||||
`a` 元素的内容文本应为：`cat photos`。
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
`a`元素的`href`属性应为："`http://freecatphotoapp<wbr>.com`"。
|
||||
你的 `a` 元素应链接到 `https://freecatphotoapp.com`。
|
||||
|
||||
```js
|
||||
assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
确保`a`元素有结束标记。
|
||||
确保 `a` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301098
|
||||
|
||||
# --description--
|
||||
|
||||
`a` 元素还可以用来实现页面内不同区域的跳转，只需要把`a`元素的`href`值设置为井号`#`加欲跳转区域对应的`id`值即可。`id`是描述网页元素的一个属性，它的值在整个页面中唯一。
|
||||
`a` 元素还可以用来实现页面内不同区域的跳转，只需要把 `a` 元素的 `href` 值设置为井号 `#` 加欲跳转区域所对应的 `id` 属性值即可。`id` 是描述网页元素的一个属性，它的值在整个页面中唯一。
|
||||
|
||||
下面是用来创建内部 `a` 的例子：
|
||||
|
||||
@ -18,37 +18,37 @@ forumTopicId: 301098
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
当用户点击了`Contacts`链接，页面就会跳转到网页的**Contacts**区域。
|
||||
当用户点击了 `Contacts` 链接，页面就会跳转到网页的 **Contacts** 区域。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过修改`href`属性为`#footer`来更改外部链接为内部链接，同时修改文本`cat photos`为`Jump to Bottom`。
|
||||
请修改 `href` 属性值为 `#footer` 来将外部链接更改为内部链接，同时修改文本 `cat photos` 为 `Jump to Bottom`。
|
||||
|
||||
移除 target="\_blank" 属性，它会使得链接在新标签页中打开。
|
||||
移除 `target="\_blank"` 属性，这个属性的存在会让链接在新标签页中打开。
|
||||
|
||||
然后添加一个`<footer>`元素，它的`id`值为`footer`。
|
||||
然后添加一个 `<footer>` 元素，并将它的 `id` 属性值设置为 `footer`。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面中应该只有一个 `a` 。
|
||||
页面中应只存在一个 `a` 元素。
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
页面中应该只有一个`footer`元素。
|
||||
页面中应只存在一个 `footer` 元素。
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
`a` 的`href`属性应为 "#footer"。
|
||||
`a` 的 `href` 属性值应为 `#footer`。
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
`a` 不应该有`target`属性。
|
||||
`a` 不应有 `target` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 的文本应为`Jump to Bottom`。
|
||||
`a` 的内容文本应为 `Jump to Bottom`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`footer`元素的`id`属性应为 "footer"。
|
||||
`footer` 元素的 `id` 属性值应为 `footer`。
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
|
||||
@ -8,19 +8,19 @@ forumTopicId: 18230
|
||||
|
||||
# --description--
|
||||
|
||||
有时你想为网站添加一个 `a`，但如果你还不确定要将它链接到哪儿，这时可以使用链接占位符。
|
||||
有时你想为网站添加一个 `a` 元素，但还不确定要将它链接到哪里。这时，你可以使用链接占位符。
|
||||
|
||||
在后面的课程中我们会学到：如何轻松通过`JavaScript`更改链接指向的地址。
|
||||
链接占位符还有一个应用场景，就是实现在点击 `a` 元素时执行 `JavaScript` 代码。我们会在后面的课程中学到。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`href`属性的当前值是指向 "`https://freecatphotoapp.com`"，将`href`属性的值替换为`#`，就可以创建固定链接。
|
||||
目前，`href` 的属性值是 "`https://freecatphotoapp.com`"。请将 `href` 属性的值替换为`#`，以此来创建链接占位符。
|
||||
|
||||
例如: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 的`href`属性应为 "#"。
|
||||
`a` 的 `href` 属性值应为 "#"。
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
|
||||
@ -16,21 +16,21 @@ forumTopicId: 18244
|
||||
</p>
|
||||
```
|
||||
|
||||
让我们来分解这个例子： 通常，文本是被包裹在`p`段落内：
|
||||
`<p> Here's a ... for you to follow. </p>` 接下来是`anchor` `a` `<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>` 接下来是 `<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>` 此示例的最终输出结果是这样：
|
||||
|
||||
Here's a [link to freecodecamp.org](http://freecodecamp.one) for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
用一个段落（`p`）标签来包裹`main`元素里的`a`节点。新段落的文本为：“View more cat photos”，其中 "cat photos" 是一个链接，其余是纯文本。
|
||||
创建一个新的段落（`p`）标签来包裹 `main` 元素里的 `a` 节点。新段落标签的内容为："View more cat photos"，其中 "cat photos" 是一个链接，其余是纯文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
你需要一个指向 "`https://freecatphotoapp.com`" 的 `a` 。
|
||||
应包含一个链接到 "`https://freecatphotoapp.com`" 的 `a` 元素。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 的文本应为：cat photos。
|
||||
`a` 元素的内容文本应为 "cat photos"。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -49,13 +49,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在 `a` 的外部创建一个新段落，这样页面就有 3 个段落了。
|
||||
你应该在 `a` 标签的外部创建一个新的 `p` 标签。页面中应至少包含 3 个 `p` 标签。
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
`a` 应嵌套在新段落内。
|
||||
`a` 应嵌套在新创建的 `p` 元素内。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -64,7 +64,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
段落应该包含文本 View more（记得 more 后面有一个空格）。
|
||||
`p` 元素应该包含文本 "View more "（请注意，more 之后有一个空格）。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -79,7 +79,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 不应该包含文本 View more。
|
||||
`a` 元素中不应包含文本 "View more"。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -89,7 +89,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保每个段落有结束标记。
|
||||
确保每个 `p` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -99,7 +99,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保每个段落有结束标记。
|
||||
确保每个 `a` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,39 +8,39 @@ forumTopicId: 18246
|
||||
|
||||
# --description--
|
||||
|
||||
`div`元素，也叫 Content Division Element（内容划分元素）元素，是一个包裹其他元素的通用容器。
|
||||
`div` 元素也叫 Content Division Element（内容划分元素）元素，是一个包裹其他元素的通用容器。
|
||||
|
||||
它也是 HTML 中出现频率最高的元素。
|
||||
|
||||
和其他普通元素一样，你可以用`<div>`来标记一个`div`元素的开始，用`</div>`来标记一个`div`元素的结束。
|
||||
和其他普通元素一样，你可以用 `<div>` 来标记一个 `div` 元素的开始，用 `</div>` 来标记一个 `div` 元素的结束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把无序列表、有序列表和段落都嵌套进同一个`div`元素。
|
||||
请把无序列表、有序列表和段落都嵌套进同一个 `div` 元素。
|
||||
|
||||
提示：你可以在第一个`<p>`之前插入`div`开始标记，在`</ol>`之后插入`div`结束标记，这样，所有的列表都位于`div`之内。
|
||||
提示：你可以在第一个 `<p>` 之前插入 `div` 开始标记，在 `</ol>` 之后插入 `div` 结束标签。这样，所有的列表都会位于 `div` 之内。
|
||||
|
||||
# --hints--
|
||||
|
||||
把所有的`p`元素嵌入`div`元素中。
|
||||
所有的 `p` 元素都应嵌套在 `div` 元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
把`ul`元素嵌入`div`元素中。
|
||||
所有的 `ul` 元素都应嵌套在 `div` 元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
把`ol`元素嵌入`div`元素中。
|
||||
所有的 `ol` 元素都应嵌套在 `div` 元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
确保`div`元素有结束标记。
|
||||
`div` 元素应有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -12,25 +12,25 @@ forumTopicId: 18276
|
||||
|
||||
HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，我们来用 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()));
|
||||
|
||||
@ -10,33 +10,33 @@ forumTopicId: 18327
|
||||
|
||||
你可以通过把元素嵌套进 `a` 里使其变成一个链接。
|
||||
|
||||
把你的图片嵌套进 `a`。举例如下：
|
||||
如果我们要把图片嵌套进 `a` 元素，可以这样写：
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="三只萌萌的小猫"></a>`
|
||||
|
||||
把 `a` 的`href`属性设置为`#`，就可以创建固定链接。
|
||||
如果把 `a` 的 `href` 属性值设置为 `#`，就可以创建固定链接。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把现存的图片嵌套进 `a` 中。
|
||||
请把现存的图片嵌套进 `a` 中。
|
||||
|
||||
当鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。
|
||||
如果鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。
|
||||
|
||||
# --hints--
|
||||
|
||||
把现存的图片嵌套进 `a` 中。
|
||||
应将图片嵌套进 `a` 元素中。
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
`a` 的`href`属性应为`#`。
|
||||
`a` 的 `href` 属性值应为 `#`。
|
||||
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
确保每个 `a` 都有结束标记。
|
||||
每个 `a` 元素都应有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -12,33 +12,33 @@ forumTopicId: 18329
|
||||
|
||||
注释的另一个用途就是在不删除代码的前提下，让代码不起作用。
|
||||
|
||||
在 HTML 中，注释的开始标记是`<!--`，结束标记是`-->`。
|
||||
在 HTML 中，注释的开始标签是 `<!--`，结束标签是 `-->`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
现在我们反其道而行之，去掉`h1`元素、`h2`元素、`p`元素的注释。
|
||||
现在我们反其道而行之，去掉 `h1` 元素、`h2` 元素、`p` 元素的注释。
|
||||
|
||||
# --hints--
|
||||
|
||||
确保网页中能看到`h1`元素。
|
||||
页面上应存在 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
确保网页中能看到`h2`元素。
|
||||
页面上应存在 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
确保网页中能看到`p`元素。
|
||||
页面上应存在 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
确保删除了注释的结束标记`-->`。
|
||||
应删除注释的结束标签 `-->`。
|
||||
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 18360
|
||||
|
||||
# --description--
|
||||
|
||||
当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。
|
||||
当你设计表单时，你可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。
|
||||
|
||||
如果你想把文本输入框设置为必填项，在`input`元素中加上 required 属性就可以了，例如：`<input type="text" required>`
|
||||
如果你想把文本输入框设置为必填项，在 `input` 元素中加上 `required` 属性就可以了，例如：`<input type="text" required>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`input`元素加上`required`属性，这样用户就必须先在输入框里填入内容，然后才可以提交表单。
|
||||
请给 `input` 元素加上 `required` 属性，这样用户就必须先在输入框里填入内容，然后才可以提交表单。
|
||||
|
||||
# --hints--
|
||||
|
||||
`input`元素必须有`required`属性。
|
||||
`input` 元素应有 `required` 属性。
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301099
|
||||
|
||||
# --description--
|
||||
|
||||
当表单提交时，包括 options 已选值在内的数据会发送给服务端。`radio`和`checkbox`的`value`值决定了发送到服务端的实际内容。
|
||||
提交表单时，所选项的值会发送给服务端。`radio` 和 `checkbox` 的 `value` 属性值决定了发送到服务端的实际内容。
|
||||
|
||||
例如：
|
||||
|
||||
@ -20,17 +20,17 @@ forumTopicId: 301099
|
||||
</label>
|
||||
```
|
||||
|
||||
在这里，有两个 `radio` 单选框。如果当用户提交表单时 `indoor` 选项被选中，表单数据会包含：`indoor-outdoor=indoor`。也就是 "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 应转换为 outdoor），设置其为 value 的值（即 `value="outdoor"`）。
|
||||
给每一个 `radio` 和 `checkbox` 输入框添加 `value` 属性，属性值为 `input` 对应 `label` 中文本的小写形式。如 Outdoor 的 `value` 应设置为 `"outdoor"`，即 `value="outdoor"`。
|
||||
|
||||
# --hints--
|
||||
|
||||
一个单选按钮应该包含 `indoor` 的 `value` 属性。
|
||||
应有一个单选按钮的 `value` 属性值为 `indoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
一个单选按钮应该包含 `outdoor` 的 `value` 属性。
|
||||
应有一个单选按钮的 `value` 属性值为 `outdoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -49,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
一个复选框应该包含 `loving` 的 `value` 属性。
|
||||
应有一个复选框的 `value` 属性值为 `loving`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -59,7 +59,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
一个复选框应该包含 `lazy` 的 `value` 属性。
|
||||
应有一个复选框的 `value` 属性值为 `lazy`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
一个复选框应该包含 `lazy` 的 `energetic` 属性。
|
||||
应有一个复选框的 `value` 属性值为 `energetic`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user