chore(learn): Applied MDX format to Chinese curriculum files (#40462)
This commit is contained in:
Randell Dawson
GitHub
@ -1,75 +1,56 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: 给表单添加提交按钮
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
title: 给表单添加提交按钮
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
让我们来给表单添加一个<code>submit</code>提交按钮，当点击提交按钮时，表单中的数据将会被发送到<code>action</code>属性指定的 URL 上。
|
||||
# --description--
|
||||
|
||||
让我们来给表单添加一个`submit`提交按钮，当点击提交按钮时，表单中的数据将会被发送到`action`属性指定的 URL 上。
|
||||
|
||||
例如：
|
||||
<code><button type="submit">this button submits the form</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在表单的底部创建一个<code>button</code>按钮，按钮的<code>type</code>属性值为<code>submit</code>，文本为<code>提交</code>。
|
||||
</section>
|
||||
`<button type="submit">this button submits the form</button>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '表单内部应该有一个按钮。'
|
||||
testString: assert($("form").children("button").length > 0);
|
||||
- text: '按钮的<code>type</code>属性值应该为<code>submit</code>。'
|
||||
testString: assert($("button").attr("type") === "submit");
|
||||
- text: '提交按钮的文本应该为<code>提交</code>。'
|
||||
testString: assert($("button").text().match(/^\s*submit\s*$/gi));
|
||||
- text: '确保按钮有结束标记。'
|
||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||
在表单的底部创建一个`button`按钮，按钮的`type`属性值为`submit`，文本为`提交`。
|
||||
|
||||
# --hints--
|
||||
|
||||
表单内部应该有一个按钮。
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
按钮的`type`属性值应该为`submit`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的橘猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层面</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>祛跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="猫咪图片地址">
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
提交按钮的文本应该为`提交`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button')
|
||||
.text()
|
||||
.match(/^\s*submit\s*$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
确保按钮有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,71 +1,66 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: 给网站添加图片
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
|
||||
forumTopicId: 16640
|
||||
title: 给网站添加图片
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
用<code>img</code>元素来为你的网站添加图片，其中<code>src</code>属性指向一个图片的地址。
|
||||
# --description--
|
||||
|
||||
用`img`元素来为你的网站添加图片，其中`src`属性指向一个图片的地址。
|
||||
|
||||
例如：
|
||||
<code><img src="https://www.your-image-source.com/your-image.jpg"></code>
|
||||
注意：<code>img</code>元素是没有结束标记的。
|
||||
所有的<code>img</code>元素必须有<code>alt</code>属性，<code>alt</code>属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
|
||||
注意：如果图片是纯装饰性的，用一个空的<code>alt</code>是最佳实践。
|
||||
理想情况下，<code>alt</code>属性不应该包含特殊字符，除非必要。
|
||||
让我们给上面例子的<code>img</code>添加<code>alt</code>属性。
|
||||
<code><img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指"></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
|
||||
注意：`img`元素是没有结束标记的。
|
||||
|
||||
所有的`img`元素必须有`alt`属性，`alt`属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
|
||||
|
||||
注意：如果图片是纯装饰性的，用一个空的`alt`是最佳实践。
|
||||
|
||||
理想情况下，`alt`属性不应该包含特殊字符，除非必要。
|
||||
|
||||
让我们给上面例子的`img`添加`alt`属性。
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">`
|
||||
|
||||
# --instructions--
|
||||
|
||||
让我们给网站添加图片：
|
||||
在<code>main</code>元素里面，给<code>p</code>前面插入一个<code>img</code>元素
|
||||
现在设置<code>src</code>属性指向这个地址：
|
||||
<code>https://bit.ly/fcc-relaxing-cat</code>
|
||||
最后不要忘记给图片添加一个<code>alt</code>文本。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`main`元素里面，给`p`前面插入一个`img`元素
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 网页应该有一张图片。
|
||||
testString: assert($("img").length);
|
||||
- text: <code>img</code> 应该有一个<code>src</code>属性，指向猫咪图片。
|
||||
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
|
||||
- text: <code>img</code> 元素的<code>alt</code>属性值不应为空。
|
||||
testString: assert($("img").attr("alt") && $("img").attr("alt").length && /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
|
||||
现在设置`src`属性指向这个地址：
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
最后不要忘记给图片添加一个`alt`文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页应该有一张图片。
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
</section>
|
||||
`img` 应该有一个`src`属性，指向猫咪图片。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会囤老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
```js
|
||||
assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
</div>
|
||||
`img` 元素的`alt`属性值不应为空。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').attr('alt') &&
|
||||
$('img').attr('alt').length &&
|
||||
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g, ''))
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,75 +1,54 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: 给输入框添加占位符文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
title: 给输入框添加占位符文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Placeholder</code>占位符是用户在<code>input</code>输入框中输入任何东西前的预定义文本。
|
||||
# --description--
|
||||
|
||||
`Placeholder`占位符是用户在`input`输入框中输入任何东西前的预定义文本。
|
||||
|
||||
你可以像这样创建一个占位符：
|
||||
<code><input type="text" placeholder="this is placeholder text"></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把<code>input</code>输入框的<code>placeholder</code>占位符文本设置为 “猫咪图片地址”。
|
||||
</section>
|
||||
`<input type="text" placeholder="this is placeholder text">`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给现有的<code>input</code>输入框添加一个<code>placeholder</code>属性。
|
||||
testString: assert($("input[placeholder]").length > 0);
|
||||
- text: 设置<code>placeholder</code>属性的值为 ”猫咪图片地址“。
|
||||
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/猫咪图片地址/gi));
|
||||
- text: 完整的<code>input</code>元素应有一个结束标签
|
||||
testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
- text: <code>input</code>输入框的语法必须正确。
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
把`input`输入框的`placeholder`占位符文本设置为 “猫咪图片地址”。
|
||||
|
||||
# --hints--
|
||||
|
||||
给现有的`input`输入框添加一个`placeholder`属性。
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
设置`placeholder`属性的值为 ”猫咪图片地址“。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
$('input') &&
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/猫咪图片地址/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
完整的`input`元素应有一个结束标签
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
`input`输入框的语法必须正确。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,79 +1,34 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: 给单选按钮和复选框添加默认选中项
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
title: 给单选按钮和复选框添加默认选中项
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
如果想设置某个单选按钮或多选按钮默认被选中，只需给<code>input</code>元素添加 "checked" 属性。 例如:
|
||||
<code><input type="radio" name="test-name" checked></code>
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把第一个<code>radio button</code>和第一个<code>checkbox</code>都设置为默认选中。
|
||||
</section>
|
||||
如果想设置某个单选按钮或多选按钮默认被选中，只需给`input`元素添加 "checked" 属性。 例如:
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '表单的第一个单选按钮应该被默认选中。'
|
||||
testString: assert($('input[type="radio"]').prop("checked"));
|
||||
- text: '表单的第一个多选按钮应该被默认选中。'
|
||||
testString: assert($('input[type="checkbox"]').prop("checked"));
|
||||
# --instructions--
|
||||
|
||||
把第一个`radio button`和第一个`checkbox`都设置为默认选中。
|
||||
|
||||
# --hints--
|
||||
|
||||
表单的第一个单选按钮应该被默认选中。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
</section>
|
||||
表单的第一个多选按钮应该被默认选中。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,64 +1,56 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: 给 HTML 添加注释
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
title: 给 HTML 添加注释
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
记住：注释的开始标记是<code><!--</code>，结束标记是<code>--></code>。
|
||||
现在你需要在<code>h2</code>元素前终止注释。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
任务：注释掉<code>h1</code>元素和<code>p</code>元素，保留<code>h2</code>元素。
|
||||
</section>
|
||||
记住：注释的开始标记是`<!--`，结束标记是`-->`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
现在你需要在`h2`元素前终止注释。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '注释掉<code>h1</code>元素，这样它就从网页上消失了。'
|
||||
testString: assert(($("h1").length === 0));
|
||||
- text: '<code>h2</code>元素保持原样，这样网页上还能看到它。'
|
||||
testString: assert(($("h2").length > 0));
|
||||
- text: '注释掉<code>p</code>元素，这样它就从网页上消失了。'
|
||||
testString: assert(($("p").length === 0));
|
||||
- text: '确保每一个注释都以<code>--></code>结尾。'
|
||||
testString: assert(code.match(/[^fc]-->/g).length > 1);
|
||||
- text: '不要更改<code>h1</code>元素、<code>h2</code> 元素、<code>p</code>元素的顺序。'
|
||||
testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") );
|
||||
# --instructions--
|
||||
|
||||
任务：注释掉`h1`元素和`p`元素，保留`h2`元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
注释掉`h1`元素，这样它就从网页上消失了。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素保持原样，这样网页上还能看到它。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
-->
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
</div>
|
||||
注释掉`p`元素，这样它就从网页上消失了。
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
确保每一个注释都以`-->`结尾。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
不要更改`h1`元素、`h2` 元素、`p`元素的顺序。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: 创建一个无序列表
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
title: 创建一个无序列表
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML 有一个特定的元素用于创建无序列表<code>unordered lists（缩写 ul）</code>。
|
||||
无序列表以<code><ul></code>开始，中间包含一个或多个<code><li></code>元素，最后以<code></ul></code>结尾。
|
||||
例如:
|
||||
# --description--
|
||||
|
||||
HTML 有一个特定的元素用于创建无序列表`unordered lists（缩写 ul）`。
|
||||
|
||||
无序列表以`<ul>`开始，中间包含一个或多个`<li>`元素，最后以`</ul>`结尾。
|
||||
|
||||
例如:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
@ -20,56 +22,50 @@ HTML 有一个特定的元素用于创建无序列表<code>unordered lists（缩
|
||||
```
|
||||
|
||||
将会创建一个包含牛奶和奶酪的无序列表。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
删除页面底部的两个<code>p</code>元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
删除页面底部的两个`p`元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 创建一个<code>ul</code>无序列表。
|
||||
testString: assert($("ul").length > 0);
|
||||
- text: 你应该在<code>ul</code>无序列表中添加三个<code>li</code>条目。
|
||||
testString: assert($("ul li").length > 2);
|
||||
- text: 确保<code>ul</code>无序列表有结束标记。
|
||||
testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length);
|
||||
- text: 确保每个<code>li</code>条目都有结束标记。
|
||||
testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length);
|
||||
- text: 每个<code>li</code>元素都应该有一个空字符串或者空格。
|
||||
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
# --hints--
|
||||
|
||||
创建一个`ul`无序列表。
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该在`ul`无序列表中添加三个`li`条目。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
</div>
|
||||
确保`ul`无序列表有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/gi) &&
|
||||
code.match(/<ul/gi) &&
|
||||
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
确保每个`li`条目都有结束标记。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/gi) &&
|
||||
code.match(/<li[\s>]/gi) &&
|
||||
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
每个`li`元素都应该有一个空字符串或者空格。
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,74 +1,52 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: 创建一个表单
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cmQ3Kfa'
|
||||
forumTopicId: 16817
|
||||
title: 创建一个表单
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
如果想使用 HTML 向服务器提交数据，可以给<code>form</code>添加<code>action</code>属性。
|
||||
# --description--
|
||||
|
||||
如果想使用 HTML 向服务器提交数据，可以给`form`添加`action`属性。
|
||||
|
||||
例如:
|
||||
<code><form action="/url-where-you-want-to-submit-form-data"></form></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>input</code>输入框外层创建一个<code>form</code>表单，然后设置表单的<code>action</code>属性为<code>"https://freecatphotoapp.com/submit-cat-photo"</code>。
|
||||
</section>
|
||||
`<form action="/url-where-you-want-to-submit-form-data"></form>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '在<code>input</code>输入框外层创建一个<code>form</code>表单。'
|
||||
testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0);
|
||||
- text: '确保表单的<code>action</code>属性为<code>"https://freecatphotoapp.com/submit-cat-photo"</code>。'
|
||||
testString: assert($("form").attr("action") === "https://freecatphotoapp.com/submit-cat-photo");
|
||||
- text: '确保表单有开始标记和结束标记。'
|
||||
testString: assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length);
|
||||
在`input`输入框外层创建一个`form`表单，然后设置表单的`action`属性为`"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
|
||||
# --hints--
|
||||
|
||||
在`input`输入框外层创建一个`form`表单。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form') &&
|
||||
$('form').children('input') &&
|
||||
$('form').children('input').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
确保表单的`action`属性为`"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="猫咪图片地址">
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
$('form').attr('action') === 'https://freecatphotoapp.com/submit-cat-photo'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
确保表单有开始标记和结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/form>/g) &&
|
||||
code.match(/<form [^<]*>/g) &&
|
||||
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,89 +1,68 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: 创建一组复选框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
title: 创建一组复选框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>checkboxes</code>（复选框）就好比多项选择题，正确答案有多个。
|
||||
复选框是<code>input</code>选择框的另一种类型。
|
||||
每一个复选框都应该嵌套在它自己的<code>label</code>（标签）元素中。
|
||||
所有关联的复选框应该拥有相同的<code>name</code>属性。
|
||||
最佳实践是在<code>label</code>元素上设置<code>for</code>属性，让其值与复选框的<code>id</code>属性值相等，这样就在<code>label</code>元素和它的子元素复选框之间创建了一种链接关系。例如：
|
||||
# --description--
|
||||
|
||||
`checkboxes`（复选框）就好比多项选择题，正确答案有多个。
|
||||
|
||||
复选框是`input`选择框的另一种类型。
|
||||
|
||||
每一个复选框都应该嵌套在它自己的`label`（标签）元素中。
|
||||
|
||||
所有关联的复选框应该拥有相同的`name`属性。
|
||||
|
||||
最佳实践是在`label`元素上设置`for`属性，让其值与复选框的`id`属性值相等，这样就在`label`元素和它的子元素复选框之间创建了一种链接关系。例如：
|
||||
|
||||
下面是一个复选框的例子：
|
||||
<code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给表单添加三个复选框，每个复选框都被嵌套进<code>label</code>元素中，并且它的<code>name</code>属性均为<code>personality</code>，它们的内容可以随意指定。
|
||||
</section>
|
||||
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '表单应该有三个复选框。'
|
||||
testString: assert($('input[type="checkbox"]').length > 2);
|
||||
- text: '每个复选框都应该被嵌套进<code>label</code>元素中。'
|
||||
testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
- text: '确保<code>label</code>元素有结束标记。'
|
||||
testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length);
|
||||
- text: '设置复选框的<code>name</code>属性均为<code>personality</code>。'
|
||||
testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2);
|
||||
- text: '每个复选框都应该在 <code>form</code> 标签内。'
|
||||
testString: assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
给表单添加三个复选框，每个复选框都被嵌套进`label`元素中，并且它的`name`属性均为`personality`，它们的内容可以随意指定。
|
||||
|
||||
# --hints--
|
||||
|
||||
表单应该有三个复选框。
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
</section>
|
||||
每个复选框都应该被嵌套进`label`元素中。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">室内</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
确保`label`元素有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
设置复选框的`name`属性均为`personality`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
|
||||
);
|
||||
```
|
||||
|
||||
每个复选框都应该在 `form` 标签内。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: 创建一组单选按钮
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR'
|
||||
forumTopicId: 16822
|
||||
title: 创建一组单选按钮
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>radio buttons</code>（单选按钮）就好比单项选择题，正确答案只有一个。
|
||||
单选按钮是<code>input</code>选择框的一种类型。
|
||||
每一个单选按钮都应该嵌套在它自己的<code>label</code>（标签）元素中。
|
||||
所有关联的单选按钮应该拥有相同的<code>name</code>属性。
|
||||
# --description--
|
||||
|
||||
`radio buttons`（单选按钮）就好比单项选择题，正确答案只有一个。
|
||||
|
||||
单选按钮是`input`选择框的一种类型。
|
||||
|
||||
每一个单选按钮都应该嵌套在它自己的`label`（标签）元素中。
|
||||
|
||||
所有关联的单选按钮应该拥有相同的`name`属性。
|
||||
|
||||
下面是一个单选按钮的例子：
|
||||
|
||||
```html
|
||||
@ -20,7 +24,7 @@ title: 创建一组单选按钮
|
||||
</label>
|
||||
```
|
||||
|
||||
最佳实践是在<code>label</code>元素上设置for属性，让其值与单选按钮的<code>id</code>属性值相等，这样就在<code>label</code>元素和它的子元素单选按钮之间创建了一种链接关系。例如：
|
||||
最佳实践是在`label`元素上设置for属性，让其值与单选按钮的`id`属性值相等，这样就在`label`元素和它的子元素单选按钮之间创建了一种链接关系。例如：
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
@ -28,75 +32,65 @@ title: 创建一组单选按钮
|
||||
</label>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给表单添加两个单选按钮，一个叫<code>indoor</code>，另一个叫<code>outdoor</code>，单选按钮的 <code>name</code> 为 <code>indoor-outdoor</code>。
|
||||
</section>
|
||||
给表单添加两个单选按钮，一个叫`indoor`，另一个叫`outdoor`，单选按钮的 `name` 为 `indoor-outdoor`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '页面上应该有两个单选按钮元素。'
|
||||
testString: assert($('input[type="radio"]').length > 1);
|
||||
- text: '设置单选按钮的<code>name</code>属性为<code>indoor-outdoor</code>。'
|
||||
testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
- text: '每一个单选按钮都应该嵌套进它自己的<code>label</code>元素中。'
|
||||
testString: assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
- text: '每一个<code>label</code>元素都有结束标记。'
|
||||
testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length));
|
||||
- text: '其中一个<code>label</code>元素的文本为<code>indoor</code>。'
|
||||
testString: assert($("label").text().match(/indoor/gi));
|
||||
- text: '其中一个<code>label</code>元素的文本为<code>outdoor</code>。'
|
||||
testString: assert($("label").text().match(/outdoor/gi));
|
||||
- text: '所有的单选按钮都应该包含在<code>form</code>表单中。'
|
||||
testString: assert($("label").parent().get(0).tagName.match('FORM'));
|
||||
页面上应该有两个单选按钮元素。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
设置单选按钮的`name`属性为`indoor-outdoor`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
每一个单选按钮都应该嵌套进它自己的`label`元素中。
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
每一个`label`元素都有结束标记。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
其中一个`label`元素的文本为`indoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/indoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
其中一个`label`元素的文本为`outdoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/outdoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
所有的单选按钮都应该包含在`form`表单中。
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,73 +1,34 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: 创建一个输入框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
title: 创建一个输入框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
现在让我们来创建一个<code>form</code>表单。
|
||||
<code>input</code>输入框可以让你轻松获得用户的输入。
|
||||
# --description--
|
||||
|
||||
现在让我们来创建一个`form`表单。
|
||||
|
||||
`input`输入框可以让你轻松获得用户的输入。
|
||||
|
||||
你可以像这样创建一个文本输入框：
|
||||
<code><input type="text"></code>
|
||||
注意：<code>input</code>输入框是没有结束标记的。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在列表下面创建一个<code>type</code>属性为<code>text</code>的<code>input</code>输入框。
|
||||
</section>
|
||||
`<input type="text">`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
注意：`input`输入框是没有结束标记的。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '网页中有一个<code>type</code>属性为<code>text</code>的<code>input</code>输入框。'
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
# --instructions--
|
||||
|
||||
在列表下面创建一个`type`属性为`text`的`input`输入框。
|
||||
|
||||
# --hints--
|
||||
|
||||
网页中有一个`type`属性为`text`的`input`输入框。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: 创建一个有序列表
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
title: 创建一个有序列表
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML 有一个特定的元素用于创建有序列表<code>ordered lists（缩写 ol）</code>。
|
||||
有序列表以<code><ol></code>开始，中间包含一个或多个<code><li></code>元素，最后以<code></ol></code>结尾。
|
||||
# --description--
|
||||
|
||||
HTML 有一个特定的元素用于创建有序列表`ordered lists（缩写 ol）`。
|
||||
|
||||
有序列表以`<ol>`开始，中间包含一个或多个`<li>`元素，最后以`</ol>`结尾。
|
||||
|
||||
例如:
|
||||
|
||||
@ -21,75 +22,88 @@ HTML 有一个特定的元素用于创建有序列表<code>ordered lists（缩
|
||||
```
|
||||
|
||||
将会创建一个包含加菲猫和哆啦A梦的有序列表。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
# --instructions--
|
||||
|
||||
创建一个有序列表，内容是猫咪最讨厌的三件东西，内容可以任意指定。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '页面应该有一个无序列表，内容是猫咪最喜欢的三件东西。'
|
||||
testString: assert((/Top 3 things cats hate:/i).test($("ol").prev().text()));
|
||||
- text: '页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。'
|
||||
testString: assert((/Things cats love:/i).test($("ul").prev().text()));
|
||||
- text: '页面应该只有一个<code>ul</code>元素。'
|
||||
testString: assert.equal($("ul").length, 1);
|
||||
- text: '页面应该只有一个<code>ol</code>元素。'
|
||||
testString: assert.equal($("ol").length, 1);
|
||||
- text: '<code>ul</code>无序列表应该包含3个<code>li</code>条目。'
|
||||
testString: assert.equal($("ul li").length, 3);
|
||||
- text: '<code>ol</code>有序列表应该包含3个<code>li</code>元素。'
|
||||
testString: assert.equal($("ol li").length, 3);
|
||||
- text: '确保<code>ul</code>无序列表有结束标记。'
|
||||
testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length);
|
||||
- text: '确保<code>ol</code>有序列表有结束标记。'
|
||||
testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length);
|
||||
- text: '确保每个<code>li</code>条目都有结束标记。'
|
||||
testString: assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length);
|
||||
- text: '无序列表里的 <code>li</code> 元素不应该为空。'
|
||||
testString: $('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));
|
||||
- text: '有序列表里的 <code>li</code> 元素不应该为空。'
|
||||
testString: $('ol li').each((i, val) => assert(!!val.textContent.replace(/\s/g, '')));
|
||||
页面应该有一个无序列表，内容是猫咪最喜欢的三件东西。
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
|
||||
</main>
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
</div>
|
||||
页面应该只有一个`ul`元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
页面应该只有一个`ol`元素。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
`ul`无序列表应该包含3个`li`条目。
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
`ol`有序列表应该包含3个`li`元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
确保`ul`无序列表有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/g) &&
|
||||
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
确保`ol`有序列表有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ol>/g) &&
|
||||
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
确保每个`li`条目都有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/g) &&
|
||||
code.match(/<li>/g) &&
|
||||
code.match(/<\/li>/g).length === code.match(/<li>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
无序列表里的 `li` 元素不应该为空。
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));
|
||||
```
|
||||
|
||||
有序列表里的 `li` 元素不应该为空。
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) => assert(!!val.textContent.replace(/\s/g, '')));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: 声明 HTML 的文档类型
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
title: 声明 HTML 的文档类型
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
到目前为止，我们学习了一些特定的 HTML 标签，还有一些标签是用来组成网页的总体结构，并且它们在每个 HTML 文档中都能看到。
|
||||
|
||||
在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
|
||||
你可以通过<code><!DOCTYPE ...></code>来告诉浏览器你使用的是 HTML 的哪个版本，"<code>...</code>" 部分就是版本的数字信息。<code><!DOCTYPE html></code>对应的就是 HTML5。
|
||||
<code>!</code>和大写的<code>DOCTYPE</code>是很重要的，特别是对于老的浏览器。但<code>html</code>大写小写都可以。
|
||||
所有的 HTML 代码都必须位于<code>html</code>标签中。其中<code><html></code>位于<code><!DOCTYPE html></code>的后面，<code></html></code>位于网页的结尾。
|
||||
|
||||
你可以通过`<!DOCTYPE ...>`来告诉浏览器你使用的是 HTML 的哪个版本，"`...`" 部分就是版本的数字信息。`<!DOCTYPE html>`对应的就是 HTML5。
|
||||
|
||||
`!`和大写的`DOCTYPE`是很重要的，特别是对于老的浏览器。但`html`大写小写都可以。
|
||||
|
||||
所有的 HTML 代码都必须位于`html`标签中。其中`<html>`位于`<!DOCTYPE html>`的后面，`</html>`位于网页的结尾。
|
||||
|
||||
这是网页结构一个例子：
|
||||
|
||||
```html
|
||||
@ -22,45 +27,29 @@ title: 声明 HTML 的文档类型
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在代码编辑器的顶部添加一个<code>DOCTYPE（文档类型）</code>为 HTML5 的声明，然后添加一个<code>html</code>元素，再添加一个<code>h1</code>元素，标题的文本可以随意填。
|
||||
</section>
|
||||
在代码编辑器的顶部添加一个`DOCTYPE（文档类型）`为 HTML5 的声明，然后添加一个`html`元素，再添加一个`h1`元素，标题的文本可以随意填。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '网页中应该包含<code><!DOCTYPE html></code>标签。'
|
||||
testString: assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
- text: '网页中只有一个<code>html</code>元素。'
|
||||
testString: assert($('html').length == 1);
|
||||
- text: '<code>h1</code>元素应该位于<code>html</code>元素内部。'
|
||||
testString: assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
网页中应该包含`<!DOCTYPE html>`标签。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
网页中只有一个`html`元素。
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
`h1`元素应该位于`html`元素内部。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: 定义 HTML 文档的 head 和 body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
title: 定义 HTML 文档的 head 和 body
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>html</code>的结构主要分为两大部分：<code>head</code>、<code>body</code>。关于网页的描述都应该放入<code>head</code>标签，网页的内容都应该放入<code>body</code>标签。
|
||||
比如<code>link</code>、<code>meta</code>、<code>title</code>和<code>style</code>都应该放入<code>head</code>标签。
|
||||
# --description--
|
||||
|
||||
`html`的结构主要分为两大部分：`head`、`body`。关于网页的描述都应该放入`head`标签，网页的内容都应该放入`body`标签。
|
||||
|
||||
比如`link`、`meta`、`title`和`style`都应该放入`head`标签。
|
||||
|
||||
这是网页布局的一个例子：
|
||||
|
||||
```html
|
||||
@ -24,58 +26,51 @@ title: 定义 HTML 文档的 head 和 body
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给网页添加<code>head</code>和<code>body</code>，<code>head</code>元素应该包含<code>title</code>，<code>body</code>元素应该包含<code>h1</code>和<code>p</code>。
|
||||
</section>
|
||||
给网页添加`head`和`body`，`head`元素应该包含`title`，`body`元素应该包含`h1`和`p`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '网页应该只有一个<code>head</code>元素。'
|
||||
testString: assert($('head').length == 1);
|
||||
- text: '网页应该只有一个<code>body</code>元素。'
|
||||
testString: assert($('body').length == 1);
|
||||
- text: '<code>head</code>应该是<code>html</code>的子元素。'
|
||||
testString: assert($('html').children('head').length == 1);
|
||||
- text: '<code>body</code>应该是<code>html</code>的子元素。'
|
||||
testString: assert($('html').children('body').length == 1);
|
||||
- text: '<code>title</code>应该是<code>head</code>的子元素。'
|
||||
testString: assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
|
||||
- text: '<code>h1</code>和<code>p</code>都应该是<code>body</code>的子元素。'
|
||||
testString: 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));
|
||||
网页应该只有一个`head`元素。
|
||||
|
||||
```js
|
||||
assert($('head').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
网页应该只有一个`body`元素。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>世上最萌的猫咪</title>
|
||||
|
||||
<h1>世上最萌的猫咪</h1>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
|
||||
</html>
|
||||
```js
|
||||
assert($('body').length == 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
`head`应该是`html`的子元素。
|
||||
|
||||
```js
|
||||
assert($('html').children('head').length == 1);
|
||||
```
|
||||
|
||||
`body`应该是`html`的子元素。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert($('html').children('body').length == 1);
|
||||
```
|
||||
|
||||
`title`应该是`head`的子元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
|
||||
```
|
||||
|
||||
`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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,58 +1,40 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: 删除 HTML 元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
title: 删除 HTML 元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
手机的屏幕空间是有限的。
|
||||
|
||||
让我们删除不必要的元素，开始设计我们的CatPhotoApp。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
任务：删除<code>h1</code>元素以简化视图。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
任务：删除`h1`元素以简化视图。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '删除<code>h1</code>元素。'
|
||||
testString: assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
- text: '保留<code>h2</code>元素。'
|
||||
testString: assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
- text: '保留<code>p</code>元素。'
|
||||
testString: assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
# --hints--
|
||||
|
||||
删除`h1`元素。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
保留`h2`元素。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
保留`p`元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,54 +1,28 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: 用占位符文本填充空白
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
title: 用占位符文本填充空白
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Web 开发者通常用<a href='https://baike.baidu.com/item/Lorem%20ipsum/3684081'>lorem ipsum text</a>来做占位符，占位符就是占着位置的一些文字，没有实际意义。
|
||||
为什么叫<code>lorem ipsum text</code>呢?是因为<code>lorem ipsum</code>是古罗马西塞罗谚语的前两个单词。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把<code>p</code>元素的内容更换为：<code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>
|
||||
</section>
|
||||
Web 开发者通常用[lorem ipsum text](https://baike.baidu.com/item/Lorem%20ipsum/3684081)来做占位符，占位符就是占着位置的一些文字，没有实际意义。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
为什么叫`lorem ipsum text`呢?是因为`lorem ipsum`是古罗马西塞罗谚语的前两个单词。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>p</code>元素的内容必须包含<code>Monkey code</code>。'
|
||||
testString: assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()));
|
||||
# --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.`
|
||||
|
||||
# --hints--
|
||||
|
||||
`p`元素的内容必须包含`Monkey code`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,57 +1,51 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: 用 h2 元素代表副标题
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
title: 用 h2 元素代表副标题
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
在接下来的几节课里，我们将会由浅入深地制作一个 CatPhotoApp。
|
||||
这节课将会引入<code>h2</code>元素。
|
||||
这些元素用来告诉浏览器，网站的结构是什么样子。<code>h1</code>元素通常被用作主标题，<code>h2</code>元素通常被用作副标题，还有<code>h3</code>、<code>h4</code>、<code>h5</code>、<code>h6</code>元素，它们分别用作不同级别的标题。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>h1</code>元素下面创建一个<code>h2</code>元素，元素内容为：<code>CatPhotoApp</code>。
|
||||
</section>
|
||||
这节课将会引入`h2`元素。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
这些元素用来告诉浏览器，网站的结构是什么样子。`h1`元素通常被用作主标题，`h2`元素通常被用作副标题，还有`h3`、`h4`、`h5`、`h6`元素，它们分别用作不同级别的标题。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '创建一个<code>h2</code>元素。'
|
||||
testString: assert(($("h2").length > 0));
|
||||
- text: '<code>h2</code>元素应该有结束标记。'
|
||||
testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
|
||||
- text: '<code>h2</code>元素的内容应为：<code>CatPhotoApp</code>。'
|
||||
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));
|
||||
- text: '<code>h1</code>元素的内容应为：<code>Hello World</code>。'
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
|
||||
# --instructions--
|
||||
|
||||
在`h1`元素下面创建一个`h2`元素，元素内容为：`CatPhotoApp`。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`h2`元素。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素应该有结束标记。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h2>/g) &&
|
||||
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
`h2`元素的内容应为：`CatPhotoApp`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
`h1`元素的内容应为：`Hello World`。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,56 +1,45 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: 用 p 元素代表段落
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
title: 用 p 元素代表段落
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>p</code>是<code>paragraph</code>的缩写，通常用来创建一个段落，就和你写作文一样。
|
||||
# --description--
|
||||
|
||||
`p`是`paragraph`的缩写，通常用来创建一个段落，就和你写作文一样。
|
||||
|
||||
你可以像这样创建一个段落：
|
||||
<code><p>I'm a p tag!</p></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>h2</code>元素下面新增一个<code>p</code>元素，元素内容是：<code>Hello Paragraph</code>。
|
||||
</section>
|
||||
`<p>I'm a p tag!</p>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '创建一个<code>p</code>元素。'
|
||||
testString: assert(($("p").length > 0));
|
||||
- text: '<code>p</code>元素的内容应为：<code>Hello Paragraph</code>。'
|
||||
testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()));
|
||||
- text: '<code>p</code>元素应该有结束标记。'
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
在`h2`元素下面新增一个`p`元素，元素内容是：`Hello Paragraph`。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`p`元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
`p`元素的内容应为：`Hello Paragraph`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
</div>
|
||||
`p`元素应该有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: HTML5 元素介绍
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
title: HTML5 元素介绍
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 引入了很多更具描述性的 HTML 元素，例如：<code>header</code>、<code>footer</code>、<code>nav</code>、<code>video</code>、<code>article</code>、<code>section</code>等等。
|
||||
# --description--
|
||||
|
||||
HTML5 引入了很多更具描述性的 HTML 元素，例如：`header`、`footer`、`nav`、`video`、`article`、`section`等等。
|
||||
|
||||
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
|
||||
<code>main</code>元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
|
||||
举个栗子, 下面的 <code>main</code> 元素嵌套了两个子元素：
|
||||
|
||||
`main`元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
|
||||
|
||||
举个栗子, 下面的 `main` 元素嵌套了两个子元素：
|
||||
|
||||
```html
|
||||
<main>
|
||||
@ -20,57 +23,60 @@ HTML5 引入了很多更具描述性的 HTML 元素，例如：<code>header</cod
|
||||
</main>
|
||||
```
|
||||
|
||||
<strong>提示：</strong>在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。
|
||||
</section>
|
||||
**提示：** 在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在现有的段落下创建一个新的段落，段落内容为：<code>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</code>
|
||||
在第一个段落前添加<code><main></code>，在第二个段落后添加<code></main></code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在现有的段落下创建一个新的段落，段落内容为：`养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '页面中应该有两个段落。'
|
||||
testString: assert($("p").length > 1);
|
||||
- text: '确保每个段落都有结束标记。'
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
- text: '新建的段落应该包含关键词：猫咪。'
|
||||
testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()));
|
||||
- text: '代码中应该包含<code>main</code>元素。'
|
||||
testString: assert($('main').length === 1);
|
||||
- text: '<code>main</code>元素应有两个 <code>p</code>元素作为它的子元素。'
|
||||
testString: assert($("main").children("p").length === 2);
|
||||
- text: '开始标记<code><main></code>应位于第一个段落之前。'
|
||||
testString: assert(code.match(/<main>\s*?<p>/g));
|
||||
- text: '结束标记<code></main></code>应位于第二段落之后。'
|
||||
testString: assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
在第一个段落前添加`<main>`，在第二个段落后添加`</main>`。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面中应该有两个段落。
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
确保每个段落都有结束标记。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>猫咪</h2>
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
新建的段落应该包含关键词：猫咪。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
代码中应该包含`main`元素。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
`main`元素应有两个 `p`元素作为它的子元素。
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
开始标记\`\`应位于第一个段落之前。
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
结束标记\`\`应位于第二段落之后。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,65 +1,47 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: 用 a 实现网页间的跳转
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
title: 用 a 实现网页间的跳转
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你可以用 <code>a</code>（Anchor，简写 a）来实现网页间的跳转。
|
||||
<code>a</code> 需要一个<code>href</code>属性指向目的地，它还需要有 <code>a</code> 文本，例如：
|
||||
<code><a href="https://freecodecamp.org">传送至 freecodecamp.org</a></code>
|
||||
然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到<code>https://freecodecamp.org</code>。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个 <code>a</code>，它的<code>href</code>属性为<code>https://freecatphotoapp.com</code> ，它的文本为<code>cat photos</code>。
|
||||
</section>
|
||||
你可以用 `a`（Anchor，简写 a）来实现网页间的跳转。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`a` 需要一个`href`属性指向目的地，它还需要有 `a` 文本，例如：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>a</code>元素的 <code>a</code> 文本应为：<code>cat photos</code>。'
|
||||
testString: assert((/cat photos/gi).test($("a").text()));
|
||||
- text: '<code>a</code>元素的<code>href</code>属性应为："<code>http://freecatphotoapp<wbr>.com</code>"。'
|
||||
testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
|
||||
- text: '确保<code>a</code>元素有结束标记。'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
`<a href="https://freecodecamp.org">传送至</a>`
|
||||
|
||||
然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到`https://freecodecamp.org`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个 `a`，它的`href`属性为`https://freecatphotoapp.com` ，它的文本为`cat photos`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a`元素的 `a` 文本应为：`cat photos`。
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
`a`元素的`href`属性应为："`http://freecatphotoapp<wbr>.com`"。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
```js
|
||||
assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
</div>
|
||||
确保`a`元素有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: 用 a 实现网页内部跳转
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
title: 用 a 实现网页内部跳转
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>a</code> 元素还可以用来实现页面内不同区域的跳转，只需要把<code>a</code>元素的<code>href</code>值设置为井号<code>#</code>加欲跳转区域对应的<code>id</code>值即可。<code>id</code>是描述网页元素的一个属性，它的值在整个页面中唯一。
|
||||
下面是用来创建内部 <code>a</code> 的例子：
|
||||
# --description--
|
||||
|
||||
`a` 元素还可以用来实现页面内不同区域的跳转，只需要把`a`元素的`href`值设置为井号`#`加欲跳转区域对应的`id`值即可。`id`是描述网页元素的一个属性，它的值在整个页面中唯一。
|
||||
|
||||
下面是用来创建内部 `a` 的例子：
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
@ -17,64 +18,61 @@ title: 用 a 实现网页内部跳转
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
当用户点击了<code>Contacts</code>链接，页面就会跳转到网页的<b>Contacts</b>区域。
|
||||
</section>
|
||||
当用户点击了`Contacts`链接，页面就会跳转到网页的**Contacts**区域。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
通过修改<code>href</code>属性为<code>#footer</code>来更改外部链接为内部链接，同时修改文本<code>cat photos</code>为<code>Jump to Bottom</code>。
|
||||
移除 target="_blank" 属性，它会使得链接在新标签页中打开。
|
||||
然后添加一个<code><footer></code>元素，它的<code>id</code>值为<code>footer</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
通过修改`href`属性为`#footer`来更改外部链接为内部链接，同时修改文本`cat photos`为`Jump to Bottom`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '页面中应该只有一个 <code>a</code> 。'
|
||||
testString: assert($('a').length == 1);
|
||||
- text: '页面中应该只有一个<code>footer</code>元素。'
|
||||
testString: assert($('footer').length == 1);
|
||||
- text: '<code>a</code> 的<code>href</code>属性应为 "#footer"。'
|
||||
testString: assert($('a').eq(0).attr('href') == "#footer");
|
||||
- text: '<code>a</code> 不应该有<code>target</code>属性。'
|
||||
testString: assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true);
|
||||
- text: '<code>a</code> 的文本应为<code>Jump to Bottom</code>。'
|
||||
testString: assert($('a').eq(0).text().match(/Jump to Bottom/gi));
|
||||
- text: '<code>footer</code>元素的<code>id</code>属性应为 "footer"。'
|
||||
testString: assert($('footer').eq(0).attr('id') == "footer");
|
||||
移除 target="\_blank" 属性，它会使得链接在新标签页中打开。
|
||||
|
||||
然后添加一个`<footer>`元素，它的`id`值为`footer`。
|
||||
|
||||
# --hints--
|
||||
|
||||
页面中应该只有一个 `a` 。
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
页面中应该只有一个`footer`元素。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
`a` 的`href`属性应为 "#footer"。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
`a` 不应该有`target`属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof $('a').eq(0).attr('target') == typeof undefined ||
|
||||
$('a').eq(0).attr('target') == true
|
||||
);
|
||||
```
|
||||
|
||||
`a` 的文本应为`Jump to Bottom`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.eq(0)
|
||||
.text()
|
||||
.match(/Jump to Bottom/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`footer`元素的`id`属性应为 "footer"。
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,59 +1,30 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: '用 # 号来创建链接占位符'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
title: '用 # 号来创建链接占位符'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
有时你想为网站添加一个 <code>a</code>，但如果你还不确定要将它链接到哪儿，这时可以使用链接占位符。
|
||||
在后面的课程中我们会学到：如何轻松通过<code>JavaScript</code>更改链接指向的地址。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<code>href</code>属性的当前值是指向 "https://freecatphotoapp.com"，将<code>href</code>属性的值替换为<code>#</code>，就可以创建固定链接。
|
||||
例如: <code>href="#"</code>
|
||||
</section>
|
||||
有时你想为网站添加一个 `a`，但如果你还不确定要将它链接到哪儿，这时可以使用链接占位符。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在后面的课程中我们会学到：如何轻松通过`JavaScript`更改链接指向的地址。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>a</code> 的<code>href</code>属性应为 "#"。'
|
||||
testString: assert($("a").attr("href") === "#");
|
||||
# --instructions--
|
||||
|
||||
`href`属性的当前值是指向 "`https://freecatphotoapp.com`"，将`href`属性的值替换为`#`，就可以创建固定链接。
|
||||
|
||||
例如: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 的`href`属性应为 "#"。
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击这里可以获取更多<a href="https://freecatphotoapp.com" target="_blank">猫咪图片</a>。</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: 将 a 嵌套在段落中
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
|
||||
forumTopicId: 18244
|
||||
title: 将 a 嵌套在段落中
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
你可以在其他文本元素内嵌套链接。
|
||||
|
||||
@ -17,73 +16,98 @@ title: 将 a 嵌套在段落中
|
||||
</p>
|
||||
```
|
||||
|
||||
让我们来分解这个例子：
|
||||
通常，文本是被包裹在<code>p</code>段落内：<br><code><p> Here's a ... for you to follow. </p></code>
|
||||
接下来是<code>anchor</code> <code>a</code> <code><a></code>（需要结束标记 <code></a></code>）:<br> <code><a> ... </a></code>
|
||||
<code>target</code>是 <code>a</code> 的一个属性，用来指定链接的打开方式。属性值 <code>"_blank"</code> 的意思是链接会在新标签页打开。
|
||||
<code>href</code>是 <code>a</code> 的另一个属性：用来指定链接的 URL：<br>`<a href="https://freecodecamp.org"> ... </a>`
|
||||
<code>a</code> 元素内的文本：<strong>"link to freecodecamp.org"</strong>，会显示为一个可以点击的链接：<br> <code><a href=" ... ">link to freecodecamp.org</a></code>
|
||||
例子的最后输出将会是这样：<br><p>Here's a <a target="_blank" href="http://freecodecamp.one"> link to freecodecamp.org</a> for you to follow.</p>
|
||||
</section>
|
||||
让我们来分解这个例子： 通常，文本是被包裹在`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>` 例子的最后输出将会是这样：
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Here's a [link to freecodecamp.org](http://freecodecamp.one) for you to follow.
|
||||
|
||||
用一个段落（<code>p</code>）标签来包裹<code>main</code>元素里的<code>a</code>节点。新段落的文本为：“View more cat photos”，其中 "cat photos" 是一个链接，其余是纯文本。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
用一个段落（`p`）标签来包裹`main`元素里的`a`节点。新段落的文本为：“View more cat photos”，其中 "cat photos" 是一个链接，其余是纯文本。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你需要一个指向 "https://freecatphotoapp.com" 的 <code>a</code> 。'
|
||||
testString: assert(($("a[href=\"https://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0));
|
||||
- text: '<code>a</code> 的文本应为：cat photos。'
|
||||
testString: assert($("a").text().match(/cat\sphotos/gi));
|
||||
- text: '在 <code>a</code> 的外部创建一个新段落，这样页面就有 3 个段落了。'
|
||||
testString: assert($("p") && $("p").length > 2);
|
||||
- text: '<code>a</code> 应嵌套在新段落内。'
|
||||
testString: assert(($("a[href=\"https://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));
|
||||
- text: '段落应该包含文本 View more（记得 more 后面有一个空格）。'
|
||||
testString: assert(($("a[href=\"https://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)));
|
||||
- text: '<code>a</code> 不应该包含文本 View more。'
|
||||
testString: assert(!$("a").text().match(/View\smore/gi));
|
||||
- text: '确保每个段落有结束标记。'
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
- text: '确保每个段落有结束标记。'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
# --hints--
|
||||
|
||||
你需要一个指向 "`https://freecatphotoapp.com`" 的 `a` 。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').length > 0 ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`a` 的文本应为：cat photos。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/cat\sphotos/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
在 `a` 的外部创建一个新段落，这样页面就有 3 个段落了。
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
`a` 应嵌套在新段落内。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p') ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
段落应该包含文本 View more（记得 more 后面有一个空格）。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi) ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`a` 不应该包含文本 View more。
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('a')
|
||||
.text()
|
||||
.match(/View\smore/gi)
|
||||
);
|
||||
```
|
||||
|
||||
确保每个段落有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<p/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
确保每个段落有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,86 +1,53 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: 元素嵌套
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
title: 元素嵌套
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>div</code>元素，也叫 Content Division Element（内容划分元素）元素，是一个包裹其他元素的通用容器。
|
||||
# --description--
|
||||
|
||||
`div`元素，也叫 Content Division Element（内容划分元素）元素，是一个包裹其他元素的通用容器。
|
||||
|
||||
它也是 HTML 中出现频率最高的元素。
|
||||
和其他普通元素一样，你可以用<code><div></code>来标记一个<code>div</code>元素的开始，用<code></div></code>来标记一个<code>div</code>元素的结束。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把无序列表、有序列表和段落都嵌套进同一个<code>div</code>元素。
|
||||
提示：你可以在第一个<code><p></code>之前插入<code>div</code>开始标记，在<code></ol></code>之后插入<code>div</code>结束标记，这样，所有的列表都位于<code>div</code>之内。
|
||||
</section>
|
||||
和其他普通元素一样，你可以用`<div>`来标记一个`div`元素的开始，用`</div>`来标记一个`div`元素的结束。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '把所有的<code>p</code>元素嵌入<code>div</code>元素中。'
|
||||
testString: assert($("div").children("p").length > 1);
|
||||
- text: '把<code>ul</code>元素嵌入<code>div</code>元素中。'
|
||||
testString: assert($("div").children("ul").length > 0);
|
||||
- text: '把<code>ol</code>元素嵌入<code>div</code>元素中。'
|
||||
testString: assert($("div").children("ol").length > 0);
|
||||
- text: '确保<code>div</code>元素有结束标记。'
|
||||
testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length);
|
||||
把无序列表、有序列表和段落都嵌套进同一个`div`元素。
|
||||
|
||||
提示：你可以在第一个`<p>`之前插入`div`开始标记，在`</ol>`之后插入`div`结束标记，这样，所有的列表都位于`div`之内。
|
||||
|
||||
# --hints--
|
||||
|
||||
把所有的`p`元素嵌入`div`元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
把`ul`元素嵌入`div`元素中。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
</div>
|
||||
把`ol`元素嵌入`div`元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
确保`div`元素有结束标记。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,56 +1,40 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: 向 HTML 元素问好
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
title: 向 HTML 元素问好
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
欢迎参加 freeCodeCamp 的编程挑战赛，这些挑战将会帮助你逐步掌握 Web 开发。
|
||||
|
||||
HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，我们来用 HTML 制作一个简单的网页，你可以直接在网页内置的代码编辑器中编辑代码。
|
||||
你看到代码编辑器中的<code><h1>Hello</h1></code>了吗? 那就是一个 HTML 元素。
|
||||
大部分 HTML 元素都有一个<code>开始标记</code>和一个<code>结束标记</code>。
|
||||
开始标记像这样：<code><h1></code>
|
||||
结束标记像这样：<code></h1></code>
|
||||
开始标记和结束标记的唯一区别就是结束标记多了一个<code>/</code>。
|
||||
每个挑战都有测试，任何时候点击<strong>运行测试</strong>按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以进入下一个挑战。反之，测试区会显示你没有通过测试的原因。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
请把<code>h1</code>元素的内容改为：<code>Hello World</code>。
|
||||
</section>
|
||||
你看到代码编辑器中的`<h1>Hello</h1>`了吗? 那就是一个 HTML 元素。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
大部分 HTML 元素都有一个`开始标记`和一个`结束标记`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素的内容应该为：<code>Hello World</code>。'
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($('h1').text()));
|
||||
开始标记像这样：`<h1>`
|
||||
|
||||
结束标记像这样：`</h1>`
|
||||
|
||||
开始标记和结束标记的唯一区别就是结束标记多了一个`/`。
|
||||
|
||||
每个挑战都有测试，任何时候点击**运行测试**按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以进入下一个挑战。反之，测试区会显示你没有通过测试的原因。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把`h1`元素的内容改为：`Hello World`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素的内容应该为：`Hello World`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,65 +1,50 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: 给图片添加链接
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
title: 给图片添加链接
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你可以通过把元素嵌套进 <code>a</code> 里使其变成一个链接。
|
||||
把你的图片嵌套进 <code>a</code>。举例如下：
|
||||
<code><a href="#"><img src="http://cdn.freecodecamp.cn/running-cats.jpg" alt="三只萌萌的小猫"></a></code>
|
||||
把 <code>a</code> 的<code>href</code>属性设置为<code>#</code>，就可以创建固定链接。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
你可以通过把元素嵌套进 `a` 里使其变成一个链接。
|
||||
|
||||
把你的图片嵌套进 `a`。举例如下：
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="三只萌萌的小猫"></a>`
|
||||
|
||||
把 `a` 的`href`属性设置为`#`，就可以创建固定链接。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把现存的图片嵌套进 `a` 中。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把现存的图片嵌套进 <code>a</code> 中。
|
||||
当鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '把现存的图片嵌套进 <code>a</code> 中。'
|
||||
testString: assert($("a").children("img").length > 0);
|
||||
- text: '<code>a</code> 的<code>href</code>属性应为<code>#</code>。'
|
||||
testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href")));
|
||||
- text: '确保每个 <code>a</code> 都有结束标记。'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
把现存的图片嵌套进 `a` 中。
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
`a` 的`href`属性应为`#`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
</div>
|
||||
确保每个 `a` 都有结束标记。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,63 +1,48 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: 去除 HTML 的注释
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
title: 去除 HTML 的注释
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
|
||||
|
||||
注释的另一个用途就是在不删除代码的前提下，让代码不起作用。
|
||||
在 HTML 中，注释的开始标记是<code><!--</code>，结束标记是<code>--></code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
现在我们反其道而行之，去掉<code>h1</code>元素、<code>h2</code>元素、<code>p</code>元素的注释。
|
||||
</section>
|
||||
在 HTML 中，注释的开始标记是`<!--`，结束标记是`-->`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '确保网页中能看到<code>h1</code>元素。'
|
||||
testString: assert($("h1").length > 0);
|
||||
- text: '确保网页中能看到<code>h2</code>元素。'
|
||||
testString: assert($("h2").length > 0);
|
||||
- text: '确保网页中能看到<code>p</code>元素。'
|
||||
testString: assert($("p").length > 0);
|
||||
- text: '确保删除了注释的结束标记<code>--></code>。'
|
||||
testString: assert(!$('*:contains("-->")')[1]);
|
||||
现在我们反其道而行之，去掉`h1`元素、`h2`元素、`p`元素的注释。
|
||||
|
||||
# --hints--
|
||||
|
||||
确保网页中能看到`h1`元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
确保网页中能看到`h2`元素。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<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>
|
||||
-->
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
</div>
|
||||
确保网页中能看到`p`元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
确保删除了注释的结束标记`-->`。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,72 +1,28 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: 给表单添加一个必填字段
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
title: 给表单添加一个必填字段
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。
|
||||
如果你想把文本输入框设置为必填项，在<code>input</code>元素中加上 required 属性就可以了，例如：<code><input type="text" required></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>input</code>元素加上<code>required</code>属性，这样用户就必须先在输入框里填入内容，然后才可以提交表单。
|
||||
</section>
|
||||
如果你想把文本输入框设置为必填项，在`input`元素中加上 required 属性就可以了，例如：`<input type="text" required>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>input</code>元素必须有<code>required</code>属性。'
|
||||
testString: assert($("input").prop("required"));
|
||||
给`input`元素加上`required`属性，这样用户就必须先在输入框里填入内容，然后才可以提交表单。
|
||||
|
||||
# --hints--
|
||||
|
||||
`input`元素必须有`required`属性。
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="猫咪图片地址">
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
</section>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
id: 5c6c06847491271903d37cfd
|
||||
title: 使用单选框和复选框的 value 属性
|
||||
challengeType: 0
|
||||
forumTopicId: 301099
|
||||
title: 使用单选框和复选框的 value 属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当表单提交时，包括 options 已选值在内的数据会发送给服务端。<code>radio</code>和<code>checkbox</code>的<code>value</code>值决定了发送到服务端的实际内容。
|
||||
# --description--
|
||||
|
||||
当表单提交时，包括 options 已选值在内的数据会发送给服务端。`radio`和`checkbox`的`value`值决定了发送到服务端的实际内容。
|
||||
|
||||
例如：
|
||||
|
||||
@ -20,82 +20,63 @@ title: 使用单选框和复选框的 value 属性
|
||||
</label>
|
||||
```
|
||||
|
||||
在这里，有两个 <code>radio</code> 单选框。如果当用户提交表单时 <code>indoor</code> 选项被选中，表单数据会包含：<code>indoor-outdoor=indoor</code>。也就是 "indoor" 单选框的 <code>name</code> 和 <code>value</code> 属性。
|
||||
在这里，有两个 `radio` 单选框。如果当用户提交表单时 `indoor` 选项被选中，表单数据会包含：`indoor-outdoor=indoor`。也就是 "indoor" 单选框的 `name` 和 `value` 属性。
|
||||
|
||||
如果没写 <code>value</code> 属性，会使用默认值做为表单数据提交，也就是 <code>on</code>。在这种情况下，如果用户点击 "indoor" 选项然后提交表单，表单数据的值为 <code>indoor-outdoor=on</code>，这可能并没有什么意义。因此最好将 <code>value</code> 属性设置一些有意义的内容。
|
||||
</section>
|
||||
如果没写 `value` 属性，会使用默认值做为表单数据提交，也就是 `on`。在这种情况下，如果用户点击 "indoor" 选项然后提交表单，表单数据的值为 `indoor-outdoor=on`，这可能并没有什么意义。因此最好将 `value` 属性设置一些有意义的内容。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给每一个<code>radio</code>和<code>checkbox</code>输入框添加<code>value</code>属性。请把每个<code>input</code>对应的<code>label</code>文本转换为小写（如 Outdoor 应转换为 outdoor），设置其为 value 的值（即 <code>value="outdoor"</code>）。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
给每一个`radio`和`checkbox`输入框添加`value`属性。请把每个`input`对应的`label`文本转换为小写（如 Outdoor 应转换为 outdoor），设置其为 value 的值（即 `value="outdoor"`）。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '一个单选按钮应该包含 <code>indoor</code> 的 <code>value</code> 属性。'
|
||||
testString: assert($('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']").length > 0);
|
||||
- text: '一个单选按钮应该包含 <code>outdoor</code> 的 <code>value</code> 属性。'
|
||||
testString: assert($('label:contains("Outdoor") > input[type="radio"]').filter("[value='outdoor']").length > 0);
|
||||
- text: '一个复选框应该包含 <code>loving</code> 的 <code>value</code> 属性。'
|
||||
testString: assert($('label:contains("Loving") > input[type="checkbox"]').filter("[value='loving']").length > 0);
|
||||
- text: '一个复选框应该包含 <code>lazy</code> 的 <code>value</code> 属性。'
|
||||
testString: assert($('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']").length > 0);
|
||||
- text: '一个复选框应该包含 <code>lazy</code> 的 <code>energetic</code> 属性。'
|
||||
testString: assert($('label:contains("Energetic") > input[type="checkbox"]').filter("[value='energetic']").length > 0);
|
||||
# --hints--
|
||||
|
||||
一个单选按钮应该包含 `indoor` 的 `value` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
一个单选按钮应该包含 `outdoor` 的 `value` 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫咪照片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一个可爱的橘猫躺在地上"></a>
|
||||
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Outdoor") > input[type="radio"]').filter(
|
||||
"[value='outdoor']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
一个复选框应该包含 `loving` 的 `value` 属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Loving") > input[type="checkbox"]').filter(
|
||||
"[value='loving']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
一个复选框应该包含 `lazy` 的 `value` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
一个复选框应该包含 `lazy` 的 `energetic` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Energetic") > input[type="checkbox"]').filter(
|
||||
"[value='energetic']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user