fix(i18n): update Chinese translation of basic html and html5 (#37911)
Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
This commit is contained in:
ZhichengChen
mrugesh
@ -17,7 +17,7 @@ localeTitle: 降低元素的不透明度
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应通过选择<code>links</code>类将锚点标记上的<code>opacity</code>属性设置为0.7。
|
||||
- text: 您的代码应通过选择<code>links</code>类将 <code>a</code> 标记上的<code>opacity</code>属性设置为0.7。
|
||||
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@ -2,29 +2,36 @@
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Add a Submit Button to a Form
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 向表单添加提交按钮
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
localeTitle: 给表单添加提交按钮
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们在表单中添加一个<code>submit</code>按钮。单击此按钮会将表单中的数据发送到您使用表单的<code>action</code>属性指定的URL。这是一个示例提交按钮： <code><button type="submit">this button submits the form</button></code> </section>
|
||||
<section id='description'>
|
||||
让我们来给表单添加一个<code>submit</code>提交按钮，当点击提交按钮时，表单中的数据将会被发送到<code>action</code>属性指定的 URL 上。
|
||||
例如：
|
||||
<code><button type="submit">this button submits the form</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加一个按钮作为<code>form</code>元素的最后一个元素，其类型为<code>submit</code> ，并且“Submit”作为其文本。 </section>
|
||||
<section id='instructions'>
|
||||
在表单的底部创建一个<code>button</code>按钮，按钮的<code>type</code>属性值为<code>submit</code>，文本为<code>提交</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的表单里面应该有一个按钮。
|
||||
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
|
||||
- text: 您的提交按钮应该具有要<code>submit</code>的属性<code>type</code> 。
|
||||
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
|
||||
- text: 您的提交按钮应该只有“提交”文本。
|
||||
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
|
||||
- text: 确保您的<code>button</code>元素有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
|
||||
- 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*提交\s*$/gi));
|
||||
- text: '确保按钮有结束标记。'
|
||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||
|
||||
```
|
||||
|
||||
@ -38,61 +45,32 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的橘猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层面</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>祛跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<input type="text" placeholder="猫咪图片地址">
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,44 @@
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Add Images to Your Website
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 添加图片到您的网站
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
|
||||
forumTopicId: 16640
|
||||
localeTitle: 给网站添加图片
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>img</code>元素将图像添加到网站，并使用<code>src</code>属性指向特定图像的URL。这方面的一个例子是： <code><img src="https://www.your-image-source.com/your-image.jpg"></code>请注意， <code>img</code>元素是自动关闭的。所有<code>img</code>元素都<strong>必须</strong>具有<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="Author standing on a beach with two thumbs up."></code> </section>
|
||||
<section id='description'>
|
||||
用<code>img</code>元素来为你的网站添加图片，其中<code>src</code>属性指向一个图片的地址。
|
||||
例如：
|
||||
<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">让我们尝试将图像添加到我们的网站：在<code>h2</code>元素之前插入<code>img</code>标记。现在设置<code>src</code>属性，使其指向此URL： <code>https://bit.ly/fcc-relaxing-cat</code> ： <code>https://bit.ly/fcc-relaxing-cat</code>最后不要忘记为您的图像添加<code>alt</code>文字。 </section>
|
||||
<section id='instructions'>
|
||||
让我们给网站添加图片：
|
||||
在<code>h2</code>元素前，插入一个<code>img</code>元素
|
||||
现在设置<code>src</code>属性指向这个地址：
|
||||
<code>https://bit.ly/fcc-relaxing-cat</code>
|
||||
最后不要忘记给图片添加一个<code>alt</code>文本。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的页面应该有一个图像元素。
|
||||
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
|
||||
- text: 您的图像应具有指向小猫图像的<code>src</code>属性。
|
||||
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
|
||||
- text: 您的图片元素<strong>必须</strong>具有<code>alt</code>属性。
|
||||
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
|
||||
- text: '网页应该有一张图片。'
|
||||
testString: assert($("img").length > 0);
|
||||
- text: '图片 src 属性应该为 https://bit.ly/fcc-relaxing-cat。'
|
||||
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
|
||||
- text: '图片必须有<code>alt</code>属性。'
|
||||
testString: assert(code.match(/alt\s*?=\s*?(\"|\').*(\"|\')/));
|
||||
|
||||
```
|
||||
|
||||
@ -38,10 +55,9 @@ tests:
|
||||
<main>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会囤老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -52,8 +68,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,28 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Add Placeholder Text to a Text Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将占位符文本添加到文本字段
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
localeTitle: 给输入框添加占位符文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">占位符文本是在用户输入任何内容之前在<code>input</code>元素中显示的内容。您可以像这样创建占位符文本： <code><input type="text" placeholder="this is placeholder text"></code> </section>
|
||||
<section id='description'>
|
||||
<code>Placeholder</code>占位符是用户在<code>input</code>输入框中输入任何东西前的预定义文本。
|
||||
你可以像这样创建一个占位符：
|
||||
<code><input type="text" placeholder="this is placeholder text"></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将文本<code>input</code>的<code>placeholder</code>值设置为“cat photo URL”。 </section>
|
||||
<section id='instructions'>
|
||||
把<code>input</code>输入框的<code>placeholder</code>占位符文本设置为 “猫咪图片地址”。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 将<code>placeholder</code>属性添加到现有文本<code>input</code>元素。
|
||||
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
|
||||
- text: 将占位符属性的值设置为“cat photo URL”。
|
||||
testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
|
||||
- text: 完成的<code>input</code>元素应该具有有效的语法。
|
||||
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'
|
||||
|
||||
- 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($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|''.*?''|[\^''">\s]+))?)+\s*|\s*)\/?>/gi));'
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -36,25 +42,24 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -65,8 +70,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,31 @@
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Check Radio Buttons and Checkboxes by Default
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 默认情况下检查单选按钮和复选框
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
localeTitle: 给单选按钮和复选框添加默认选中项
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>checked</code>属性设置默认情况下要选中的复选框或单选按钮。为此，只需将“checked”一词添加到input元素的内部即可。例如： <code><input type="radio" name="test-name" checked></code> </section>
|
||||
<section id='description'>
|
||||
如果想设置某个单选按钮或多选按钮默认被选中，只需给<code>input</code>元素添加 "checked" 属性。 例如:
|
||||
<code><input type="radio" name="test-name" checked></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">默认情况下，设置第一个<code>radio buttons</code>和第一个<code>checkboxes</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
把第一个<code>radio button</code>和第一个<code>checkbox</code>都设置为默认选中。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 默认情况下，应检查表单上的第一个单选按钮。
|
||||
testString: 'assert($("input[type="radio"]").prop("checked"), "Your first radio button on your form should be checked by default.");'
|
||||
- text: 默认情况下，应检查表单上的第一个复选框。
|
||||
testString: 'assert($("input[type="checkbox"]").prop("checked"), "Your first checkbox on your form should be checked by default.");'
|
||||
- text: '表单的第一个单选按钮应该被默认选中。'
|
||||
testString: assert($('input[type="radio"]').prop("checked"));
|
||||
- text: '表单的第一个多选按钮应该被默认选中。'
|
||||
testString: assert($('input[type="checkbox"]').prop("checked"));
|
||||
|
||||
```
|
||||
|
||||
@ -34,33 +40,32 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="/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>
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -71,8 +76,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,37 @@
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comment out HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 评论HTML
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
localeTitle: 给 HTML 添加注释
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">请记住，为了开始评论，您需要使用<code><!--</code>并结束评论，您需要使用<code>--></code>这里您需要在<code>h2</code>元素开始之前结束评论。 </section>
|
||||
<section id='description'>
|
||||
记住：注释的开始标记是<code><!--</code>，结束标记是<code>--></code>。
|
||||
现在你需要在<code>h2</code>元素前终止注释。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">注释掉你的<code>h1</code>元素和你的<code>p</code>元素，但不是你的<code>h2</code>元素。 </section>
|
||||
<section id='instructions'>
|
||||
任务：注释掉<code>h1</code>元素和<code>p</code>元素，保留<code>h2</code>元素。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 注释掉你的<code>h1</code>元素，使其在你的页面上不可见。
|
||||
testString: 'assert(($("h1").length === 0), "Comment out your <code>h1</code> element so that it is not visible on your page.");'
|
||||
- text: 保持<code>h2</code>元素取消注释，以便在页面上显示。
|
||||
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
|
||||
- text: 注释掉你的<code>p</code>元素，使其在你的页面上不可见。
|
||||
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
|
||||
- text: 请务必使用<code>--></code>关闭每条评论。
|
||||
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--></code>.");'
|
||||
- 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>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
|
||||
- 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>"));
|
||||
|
||||
```
|
||||
|
||||
@ -43,9 +49,8 @@ tests:
|
||||
|
||||
<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>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -56,8 +61,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,46 @@
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Create a Bulleted Unordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建项目符号无序列表
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
localeTitle: 创建一个无序列表
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML具有用于创建<code>unordered lists</code>或项目符号样式列表的特殊元素。无序列表以开头<code><ul></code>元素开头，后跟任意数量的<code><li></code>元素。最后，无序列表以<code></ul></code>结尾例如： <blockquote> <UL> <br> <LI>乳</ LI> <br> <LI>干酪</ LI> <br> </ UL> </blockquote>会创建一个“牛奶”和“奶酪”的子弹点样式列表。 </section>
|
||||
<section id='description'>
|
||||
HTML 有一个特定的元素用于创建无序列表<code>unordered lists（缩写 ul）</code>。
|
||||
无序列表以<code><ul></code>开始，中间包含一个或多个<code><li></code>元素，最后以<code></ul></code>结尾。
|
||||
例如:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>牛奶</li>
|
||||
<li>奶酪</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
将会创建一个包含牛奶和奶酪的无序列表。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">删除最后两个<code>p</code>元素，并在页面底部创建猫喜爱的三件事的无序列表。 </section>
|
||||
<section id='instructions'>
|
||||
删除页面底部的两个<code>p</code>元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 创建一个<code>ul</code>元素。
|
||||
testString: 'assert($("ul").length > 0, "Create a <code>ul</code> element.");'
|
||||
- text: 你的<code>ul</code>元素中应该有三个<code>li</code>元素。
|
||||
testString: 'assert($("ul li").length > 2, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: 确保你的<code>ul</code>元素有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- 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, "Make sure your <code>li</code> elements have closing tags.");'
|
||||
- text: 确保您的<code>li</code>元素不包含任何空字符串或者只有空格。
|
||||
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0, 'Make sure your <code>li</code> elements don\’t contain an empty string or only white-space.');
|
||||
- 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);
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -39,14 +54,12 @@ tests:
|
||||
```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 cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -57,21 +70,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
|
||||
Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>food</li>
|
||||
<li>toys</li>
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,34 @@
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Create a Form Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建表单元素
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cmQ3Kfa'
|
||||
forumTopicId: 16817
|
||||
localeTitle: 创建一个表单
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用纯HTML来构建实际将数据提交到服务器的Web表单。您可以通过在<code>form</code>元素上指定操作来执行此操作。例如： <code><form action="/url-where-you-want-to-submit-form-data"></form></code> </section>
|
||||
<section id='description'>
|
||||
如果想使用 HTML 向服务器提交数据，可以给<code>form</code>添加<code>action</code>属性。
|
||||
例如:
|
||||
<code><form action="/url-where-you-want-to-submit-form-data"></form></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将文本字段嵌套在<code>form</code>元素中，并将<code>action="/submit-cat-photo"</code>属性添加到表单元素中。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>input</code>输入框外层创建一个<code>form</code>表单，然后设置表单的<code>action</code>属性为<code>"/submit-cat-photo"</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 将文本输入元素嵌套在<code>form</code>元素中。
|
||||
testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a <code>form</code> element.");'
|
||||
- text: 确保您的<code>form</code>具有设置为<code>/submit-cat-photo</code>的<code>action</code>属性
|
||||
testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>");'
|
||||
- text: 确保您的<code>form</code>元素具有格式良好的打开和关闭标记。
|
||||
testString: 'assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, "Make sure your <code>form</code> element has well-formed open and close tags.");'
|
||||
- text: '在<code>input</code>输入框外层创建一个<code>form</code>表单。'
|
||||
testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0);
|
||||
- text: '确保表单的<code>action</code>属性为<code>"/submit-cat-photo"</code>。'
|
||||
testString: assert($("form").attr("action") === "/submit-cat-photo");
|
||||
- text: '确保表单有开始标记和结束标记。'
|
||||
testString: assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length);
|
||||
|
||||
```
|
||||
|
||||
@ -36,25 +43,24 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<input type="text" placeholder="猫咪图片地址">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -65,8 +71,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,42 @@
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Create a Set of Checkboxes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
localeTitle: 创建一组复选框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">表单通常使用<code>checkboxes</code>来表示可能有多个答案的问题。复选框是一种类型的<code>input</code>您的每一个复选框可以嵌套自身的内<code>label</code>元素。通过将<code>input</code>元素包装在<code>label</code>元素内部，它将自动将复选框输入与其周围的标签元素相关联。所有相关的复选框输入应具有相同的<code>name</code>属性。通过在<code>label</code>元素上设置<code>for</code>属性以匹配关联<code>input</code>元素的<code>id</code>属性，最佳做法是明确定义复选框<code>input</code>与其对应<code>label</code>之间的关系。这是一个复选框的示例： <code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code> </section>
|
||||
<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>元素和它的子元素复选框之间创建了一种链接关系。例如：
|
||||
下面是一个复选框的例子：
|
||||
<code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在表单中添加一组三个复选框。每个复选框应嵌套在自己的<code>label</code>元素中。这三者都应该分享<code>personality</code>的<code>name</code>属性。 </section>
|
||||
<section id='instructions'>
|
||||
给表单添加三个复选框，每个复选框都被嵌套进<code>label</code>元素中，并且它的<code>name</code>属性均为<code>personality</code>，它们的内容可以随意指定。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的页面应该有三个复选框元素。
|
||||
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
|
||||
- text: 三个复选框元素中的每一个都应嵌套在自己的<code>label</code>元素中。
|
||||
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
|
||||
- text: 确保每个<code>label</code>元素都有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: 为您的复选框提供<code>personality</code>的<code>name</code>属性。
|
||||
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
|
||||
- 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'));
|
||||
|
||||
```
|
||||
|
||||
@ -38,32 +51,33 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -72,8 +86,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,35 +2,59 @@
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Create a Set of Radio Buttons
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR'
|
||||
forumTopicId: 16822
|
||||
localeTitle: 创建一组单选按钮
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>radio buttons</code>来解决您希望用户仅从多个选项中给出一个答案的问题。单选按钮是一种<code>input</code> 。每个单选按钮都可以嵌套在自己的<code>label</code>元素中。通过将<code>input</code>元素包装在<code>label</code>元素内部，它将自动将单选按钮输入与其周围的标签元素相关联。所有相关的单选按钮应具有相同的<code>name</code>属性以创建单选按钮组。通过创建无线电组，选择任何单个单选按钮将自动取消选择同一组内的其他按钮，确保用户只提供一个答案。这是一个单选按钮的示例： <blockquote> <标签> <br> <input type =“radio”name =“indoor-outdoor”>室内<br> </标签> </blockquote>最佳做法是在<code>label</code>元素上设置<code>for</code>属性，其值与<code>input</code>元素的<code>id</code>属性值相匹配。这允许辅助技术在标签和子<code>input</code>元素之间创建链接关系。例如： <blockquote> <label for =“室内”> <br> <input id =“indoor”type =“radio”name =“indoor-outdoor”>室内<br> </标签> </blockquote></section>
|
||||
<section id='description'>
|
||||
<code>radio buttons</code>（单选按钮）就好比单项选择题，正确答案只有一个。
|
||||
单选按钮是<code>input</code>选择框的一种类型。
|
||||
每一个单选按钮都应该嵌套在它自己的<code>label</code>（标签）元素中。
|
||||
所有关联的单选按钮应该拥有相同的<code>name</code>属性。
|
||||
下面是一个单选按钮的例子：
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
最佳实践是在<code>label</code>元素上设置for属性，让其值与单选按钮的<code>id</code>属性值相等，这样就在<code>label</code>元素和它的子元素单选按钮之间创建了一种链接关系。例如：
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在表单中添加一对单选按钮，每个按钮都嵌套在自己的标签元素中。一个应该有<code>indoor</code>选择，另一个应该可以选择<code>outdoor</code> 。两者都应该共享<code>indoor-outdoor</code>的<code>name</code>属性来创建一个无线电组。 </section>
|
||||
<section id='instructions'>
|
||||
给表单添加两个单选按钮，一个叫<code>indoor</code>，另一个叫<code>outdoor</code>，单选按钮的 <code>name</code> 为 <code>indoor-outdoor</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的页面应该有两个单选按钮元素。
|
||||
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
|
||||
- text: 为您的单选按钮提供<code>indoor-outdoor</code>的<code>name</code>属性。
|
||||
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
|
||||
- text: 两个单选按钮元素中的每一个都应嵌套在自己的<code>label</code>元素中。
|
||||
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
|
||||
- text: 确保每个<code>label</code>元素都有一个结束标记。
|
||||
testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: 您的一个单选按钮应该是<code>indoor</code>标签。
|
||||
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
|
||||
- text: 您的一个单选按钮应该是<code>outdoor</code>标签。
|
||||
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
|
||||
- text: 应在<code>form</code>标记中添加每个单选按钮元素。
|
||||
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
|
||||
- text: '页面上应该有两个单选按钮元素。'
|
||||
testString: assert($('input[type="radio"]').length > 1);
|
||||
- text: '设置单选按钮的<code>name</code>属性为<code>indoor-outdoor</code>。'
|
||||
testString: assert($('label > 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'));
|
||||
|
||||
```
|
||||
|
||||
@ -44,28 +68,27 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -76,8 +99,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,32 @@
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Create a Text Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建文本字段
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
localeTitle: 创建一个输入框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们创建一个Web表单。输入元素是从用户获取输入的便捷方式。您可以创建如下文本输入： <code><input type="text"></code>请注意， <code>input</code>元素是自动关闭的。 </section>
|
||||
<section id='description'>
|
||||
现在让我们来创建一个<code>form</code>表单。
|
||||
<code>input</code>输入框可以让你轻松获得用户的输入。
|
||||
你可以像这样创建一个文本输入框：
|
||||
<code><input type="text"></code>
|
||||
注意：<code>input</code>输入框是没有结束标记的。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在列表下创建<code>text</code>类型的<code>input</code>元素。 </section>
|
||||
<section id='instructions'>
|
||||
在列表下面创建一个<code>type</code>属性为<code>text</code>的<code>input</code>输入框。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的应用应具有<code>text</code>类型的<code>input</code>元素。
|
||||
testString: 'assert($("input[type=text]").length > 0, "Your app should have an <code>input</code> element of type <code>text</code>.");'
|
||||
- text: '网页中有一个<code>type</code>属性为<code>text</code>的<code>input</code>输入框。'
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
|
||||
```
|
||||
|
||||
@ -34,24 +43,23 @@ tests:
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -62,8 +70,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,39 +2,60 @@
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Create an Ordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建有序列表
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
localeTitle: 创建一个有序列表
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML还有另一个用于创建<code>ordered lists</code>或编号列表的特殊元素。有序列表以开头<code><ol></code>元素开头，后跟任意数量的<code><li></code>元素。最后，有序列表以<code></ol></code>结尾例如： <blockquote> <OL> <br> <LI>加菲尔德</ LI> <br> <LI>西尔威斯特</ LI> <br> </醇> </blockquote>将创建一个编号列表“加菲猫”和“西尔维斯特”。 </section>
|
||||
<section id='description'>
|
||||
HTML 有一个特定的元素用于创建有序列表<code>ordered lists（缩写 ol）</code>。
|
||||
有序列表以<code><ol></code>开始，中间包含一个或多个<code><li></code>元素，最后以<code></ol></code>结尾。
|
||||
|
||||
例如:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>加菲猫</li>
|
||||
<li>哆啦A梦</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
将会创建一个包含加菲猫和哆啦A梦的有序列表。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建猫最讨厌的前三件事的有序列表。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个有序列表，内容是猫咪最讨厌的三件东西，内容可以任意指定。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你应该有一个“猫讨厌的三件事”的有序列表：
|
||||
testString: 'assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), "You should have an ordered list for "Top 3 things cats hate:"");'
|
||||
- text: 你应该有一个无序的列表“猫爱的东西：”
|
||||
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");'
|
||||
- text: 你应该只有一个<code>ul</code>元素。
|
||||
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");'
|
||||
- text: 你应该只有一个<code>ol</code>元素。
|
||||
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");'
|
||||
- text: 你的<code>ul</code>元素中应该有三个<code>li</code>元素。
|
||||
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: 你的<code>ol</code>元素中应该有三个<code>li</code>元素。
|
||||
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");'
|
||||
- text: 确保你的<code>ul</code>元素有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: 确保您的<code>ol</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, "Make sure your <code>ol</code> element has a closing tag.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, "Make sure your <code>li</code> element has a closing tag.");'
|
||||
- text: '页面应该有一个无序列表，内容是猫咪最喜欢的三件东西。'
|
||||
testString: assert((/猫咪最喜欢的三件东西：/i).test($("ul").prev().text()));
|
||||
- text: '页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。'
|
||||
testString: assert((/猫咪最讨厌的三件东西：/i).test($("ol").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, '')));
|
||||
|
||||
```
|
||||
|
||||
@ -48,20 +69,19 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -72,8 +92,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,45 @@
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declare the Doctype of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 声明HTML文档的Doctype
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
localeTitle: 声明 HTML 的文档类型
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">到目前为止，挑战涵盖了特定的HTML元素及其用途。但是，有一些元素可以为页面提供整体结构，并且应该包含在每个HTML文档中。在文档的顶部，您需要告诉浏览器您的页面使用的HTML版本。 HTML是一种不断发展的语言，并定期更新。大多数主流浏览器都支持最新的规范，即HTML5。但是，较旧的网页可能使用该语言的先前版本。您可以通过在第一行添加<code><!DOCTYPE ...></code>标记告诉浏览器此信息，其中“ <code>...</code> ”部分是HTML的版本。对于HTML5，您使用<code><!DOCTYPE html></code> 。的<code>!</code>和大写<code>DOCTYPE</code>很重要，特别是对于旧版浏览器。 <code>html</code>不区分大小写。接下来，HTML代码的其余部分需要包装在<code>html</code>标记中。开头<code><html></code>直接位于<code><!DOCTYPE html></code>行下方，结束<code></html></code>位于页面末尾。这是页面结构的一个例子： <blockquote> <！DOCTYPE html> <br> <HTML> <br> <！ - 你的HTML代码在这里 - > <br> </ HTML> </blockquote></section>
|
||||
<section id='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>位于网页的结尾。
|
||||
这是网页结构一个例子：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Your HTML code goes here -->
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在代码编辑器中将HTML5的<code>DOCTYPE</code>标记添加到空白HTML文档的顶部。在它下面，添加包含<code>h1</code>元素的开始和结束<code>html</code>标记。标题可以包含任何文本。 </section>
|
||||
<section id='instructions'>
|
||||
在代码编辑器的顶部添加一个<code>DOCTYPE（文档类型）</code>为 HTML5 的声明，然后添加一个<code>html</code>元素，再添加一个<code>h1</code>元素，标题的文本可以随意填。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应包含<code><!DOCTYPE html></code>标记。
|
||||
testString: 'assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), "Your code should include a <code><!DOCTYPE html></code> tag.");'
|
||||
- text: 应该有一个<code>html</code>元素。
|
||||
testString: 'assert($("html").length == 1, "There should be one <code>html</code> element.");'
|
||||
- text: <code>html</code>标签应该包含一个<code>h1</code>元素。
|
||||
testString: 'assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), "The <code>html</code> tags should wrap around one <code>h1</code> element.");'
|
||||
- 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));
|
||||
|
||||
```
|
||||
|
||||
@ -45,8 +63,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,53 @@
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Define the Head and Body of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 定义HTML文档的头部和正文
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
localeTitle: 定义 HTML 文档的 head 和 body
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>head</code>和<code>body</code>元素在<code>html</code>标记内的HTML文档中添加其他级别的组织。任何包含有关您网页信息的标记都会显示在<code>head</code>标记中。然后，任何带有页面内容（为用户显示的内容）的标记都会进入<code>body</code>标签。元数据元素（例如<code>link</code> ， <code>meta</code> ， <code>title</code>和<code>style</code> ）通常位于<code>head</code>元素内。这是页面布局的示例： <blockquote> <！DOCTYPE html> <br> <HTML> <br> <HEAD> <br> <！ - 元数据元素 - > <br> </ HEAD> <br> <BODY> <br> <！ - 页面内容 - > <br> </ BODY> <br> </ HTML> </blockquote></section>
|
||||
<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>标签。
|
||||
这是网页布局的一个例子：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- metadata elements -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- page contents -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 页面上应该只有一个<code>head</code>元素。
|
||||
testString: 'assert($("head").length == 1, "There should be only one <code>head</code> element on the page.");'
|
||||
- text: 页面上应该只有一个<code>body</code>元素。
|
||||
testString: 'assert($("body").length == 1, "There should be only one <code>body</code> element on the page.");'
|
||||
- text: <code>head</code>元素应该是<code>html</code>元素的子元素。
|
||||
testString: 'assert($("html").children("head").length == 1, "The <code>head</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: <code>body</code>元素应该是<code>html</code>元素的子元素。
|
||||
testString: 'assert($("html").children("body").length == 1, "The <code>body</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: <code>head</code>元素应该包围<code>title</code>元素。
|
||||
testString: 'assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi), "The <code>head</code> element should wrap around the <code>title</code> element.");'
|
||||
- text: <code>body</code>元素应该环绕<code>h1</code>和<code>p</code>元素。
|
||||
testString: 'assert($("body").children("h1").length == 1 && $("body").children("p").length == 1, "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.");'
|
||||
- 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($('body').children('h1').length == 1 && $('body').children('p').length == 1);
|
||||
|
||||
```
|
||||
|
||||
@ -42,13 +62,12 @@ tests:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
<title>世上最萌的猫咪</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 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>
|
||||
<h1>世上最萌的猫咪</h1>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -59,8 +78,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,33 @@
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Delete HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
localeTitle: 删除 HTML 元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们的手机没有太多的垂直空间。让我们删除不必要的元素，以便我们开始构建CatPhotoApp。 </section>
|
||||
<section id='description'>
|
||||
手机的屏幕空间是有限的。
|
||||
让我们删除不必要的元素，开始设计我们的CatPhotoApp。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">删除你的<code>h1</code>元素，以便我们简化视图。 </section>
|
||||
<section id='instructions'>
|
||||
任务：删除<code>h1</code>元素以简化视图。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 删除你的<code>h1</code>元素。
|
||||
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");'
|
||||
- text: 将<code>h2</code>元素留在页面上。
|
||||
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");'
|
||||
- text: 将<code>p</code>元素留在页面上。
|
||||
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");'
|
||||
- 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));
|
||||
|
||||
```
|
||||
|
||||
@ -38,8 +44,7 @@ tests:
|
||||
|
||||
<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>
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -50,8 +55,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,29 @@
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Fill in the Blank with Placeholder Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用占位符文本填充空白
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
localeTitle: 用占位符文本填充空白
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Web开发人员传统上使用<code>lorem ipsum text</code>作为占位符文本。 “lorem ipsum”文字是从古罗马的西塞罗（Cicero of Ancient Rome）的着名文章中随机剪下来的。自16世纪以来，Lorem ipsum文本被排版人员用作占位符文本，这种传统在网上继续存在。好吧，5个世纪足够长了。由于我们正在构建CatPhotoApp，因此我们使用名为<code>kitty ipsum text</code> 。 </section>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">用这个kitty ipsum文本的前几个单词替换你的<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>
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>p</code>元素应该包含所提供的<code>kitty ipsum text</code>的前几个单词。
|
||||
testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.");'
|
||||
- text: '<code>p</code>元素的内容必须包含<code>Monkey code</code>。'
|
||||
testString: assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()));
|
||||
|
||||
```
|
||||
|
||||
@ -35,7 +41,6 @@ tests:
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -46,8 +51,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,36 @@
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Headline with the h2 Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 标题与h2元素
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
localeTitle: 用 h2 元素代表副标题
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在接下来的几节课中，我们将逐个构建一个HTML5猫照片网络应用程序。您将在此步骤中添加的<code>h2</code>元素将向网页添加第二级标题。此元素告诉浏览器您的网站结构。 <code>h1</code>元素通常用于主标题，而<code>h2</code>元素通常用于子标题。还有<code>h3</code> ， <code>h4</code> ， <code>h5</code>和<code>h6</code>元素表示不同级别的副标题。 </section>
|
||||
<section id='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>h2</code>标签，上面写着“CatPhotoApp”创建第二个HTML <code>element</code>你的“Hello World”的<code>h1</code>元素。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>h1</code>元素下面创建一个<code>h2</code>元素，元素内容为：<code>CatPhotoApp</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 创建一个<code>h2</code>元素。
|
||||
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");'
|
||||
- text: 确保您的<code>h2</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, "Make sure your <code>h2</code> element has a closing tag.");'
|
||||
- text: 您的<code>h2</code>元素应该包含文本“CatPhotoApp”。
|
||||
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");'
|
||||
- text: 你的<code>h1</code>元素应该有“Hello World”文本。
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
- 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((/CatPhotoApp/gi).test($("h2").text()));
|
||||
- text: '<code>h1</code>元素的内容应为：<code>Hello World</code>。'
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
|
||||
|
||||
```
|
||||
|
||||
@ -37,7 +44,6 @@ tests:
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -48,8 +54,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Inform with the Paragraph Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通知段落元素
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
localeTitle: 用 p 元素代表段落
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>p</code>元素是网站上段落文本的首选元素。 <code>p</code>是“段落”的缩写。你可以创建一个这样的段落元素： <code><p>I'm ap tag!</p></code> </section>
|
||||
<section id='description'>
|
||||
<code>p</code>是<code>paragraph</code>的缩写，通常用来创建一个段落，就和你写作文一样。
|
||||
你可以像这样创建一个段落：
|
||||
<code><p>I'm a p tag!</p></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>h2</code>元素下面创建一个<code>p</code>元素，并为其指定文本“Hello Paragraph”。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>h2</code>元素下面新增一个<code>p</code>元素，元素内容是：<code>Hello Paragraph</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 创建一个<code>p</code>元素。
|
||||
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");'
|
||||
- text: 你的<code>p</code>元素应该有文本“Hello Paragraph”。
|
||||
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");'
|
||||
- text: 确保您的<code>p</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure your <code>p</code> element has a closing tag.");'
|
||||
- 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);
|
||||
|
||||
```
|
||||
|
||||
@ -36,7 +43,6 @@ tests:
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -47,8 +53,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,35 +2,53 @@
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introduction to HTML5 Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: HTML5元素简介
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
localeTitle: 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>和其他。这些标签使您的HTML更易于阅读，并且还有助于搜索引擎优化（SEO）和可访问性。 <code>main</code> HTML5标记可帮助搜索引擎和其他开发人员找到您网页的主要内容。 <strong>注意</strong> <br> “应用可访问性”部分介绍了许多新的HTML5标记及其优点。 </section>
|
||||
<section id='description'>
|
||||
HTML5 引入了很多更具描述性的 HTML 元素，例如：<code>header</code>、<code>footer</code>、<code>nav</code>、<code>video</code>、<code>article</code>、<code>section</code>等等。
|
||||
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
|
||||
<code>main</code>元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
|
||||
举个栗子, 下面的 <code>main</code> 元素嵌套了两个子元素：
|
||||
|
||||
```html
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<p>Hello Paragraph</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
<strong>提示：</strong>在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建第二个<code>p</code>现有的后件<code>p</code>具有以下的小猫存有文本元素： <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>用开头和关闭<code>main</code>标签包装段落。 </section>
|
||||
<section id='instructions'>
|
||||
在现有的段落下创建一个新的段落，段落内容为：<code>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</code>
|
||||
在第一个段落前添加<code><main></code>，在第二个段落后添加<code></main></code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 使用Kitty Ipsum文本需要2个<code>p</code>元素。
|
||||
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
|
||||
- text: 确保每个<code>p</code>元素都有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: 你的<code>p</code>元素应该包含所提供的额外<code>kitty ipsum text</code>的前几个单词。
|
||||
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
|
||||
- text: 您的代码应该有一个<code>main</code>元素。
|
||||
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
|
||||
- text: <code>main</code>元素应该有两个段落元素作为子元素。
|
||||
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
|
||||
- text: 开头<code>main</code>标记应位于第一个段落标记之前。
|
||||
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
|
||||
- text: 结束<code>main</code>标记应该在第二个结束段标记之后。
|
||||
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
|
||||
- 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((/猫咪/).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));
|
||||
|
||||
```
|
||||
|
||||
@ -42,10 +60,9 @@ tests:
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
<h2>猫咪</h2>
|
||||
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -56,8 +73,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,35 @@
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Link to External Pages with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 链接到具有锚元素的外部页面
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
localeTitle: 用 a 实现网页间的跳转
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>anchor</code>元素链接到网页外部的内容。 <code>anchor</code>元素需要一个名为<code>href</code>属性的目标Web地址。他们还需要锚文本。这是一个例子： <code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code>然后你的浏览器会显示文本<strong>“这个链接到freecodecamp.org”</strong>作为你可以点击的链接。该链接将带您到网址<strong>https://www.freecodecamp.org</strong> 。 </section>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个链接到<code>http://freecatphotoapp.com</code> <code>a</code>元素，并将“猫照片”作为其<code>anchor text</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个 <code>a</code>，它的<code>href</code>属性为<code>http://freecatphotoapp.com</code> ，它的文本为<code>cat photos</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你<code>a</code>元素应该有“猫照片”的<code>anchor text</code> 。
|
||||
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
|
||||
- text: '你需要一个链接到<code>http://freecatphotoapp .com</code> <code>a</code>元素'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>");'
|
||||
- text: 确保您<code>a</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
- 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);
|
||||
|
||||
```
|
||||
|
||||
@ -39,12 +47,11 @@ tests:
|
||||
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -55,8 +62,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,49 @@
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Link to Internal Sections of a Page with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 链接到具有锚元素的页面的内部部分
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
localeTitle: 用 a 实现网页内部跳转
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">锚元素还可用于创建内部链接以跳转到网页中的不同部分。要创建内部链接，请将链接的<code>href</code>属性分配给哈希符号<code>#</code>加上要在内部链接到的元素的<code>id</code>属性值，通常在页面的下方。然后，您需要将相同的<code>id</code>属性添加到要链接的元素。 <code>id</code>是唯一描述元素的属性。下面是内部锚链接及其目标元素的示例： <blockquote> <a href="#contacts-header">通讯录</a> <br> ... <br> <h2 id =“contacts-header”>通讯录</ h2> </blockquote>当用户单击“联系人”链接时，他们将被带到具有“ <b>联系人”</b>标题元素的网页部分。 </section>
|
||||
<section id='description'>
|
||||
<code>a</code> 元素还可以用来实现页面内不同区域的跳转，只需要把<code>a</code>元素的<code>href</code>值设置为井号<code>#</code>加欲跳转区域对应的<code>id</code>值即可。<code>id</code>是描述网页元素的一个属性，它的值在整个页面中唯一。
|
||||
下面是用来创建内部 <code>a</code> 的例子：
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
...
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
当用户点击了<code>Contacts</code>链接，页面就会跳转到网页的<b>Contacts</b>区域。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">通过将<code>href</code>属性更改为“#footer”并将文本从“cat photos”更改为“Jump to Bottom”，将外部链接更改为内部链接。从锚标记中删除<code>target="_blank"</code>属性，因为这会导致链接的文档在新窗口选项卡中打开。然后将值为“footer”的<code>id</code>属性添加到页面底部的<code><footer></code>元素。 </section>
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的页面上应该只有一个锚标记。
|
||||
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
|
||||
- text: 页面上应该只有一个<code>footer</code>标记。
|
||||
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");'
|
||||
- text: '<code>a</code>标签的<code>href</code>属性应设置为“#footer”。'
|
||||
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
|
||||
- text: <code>a</code>标签不应具有<code>target</code>属性
|
||||
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
|
||||
- text: <code>a</code>文本应该是“跳到底部”。
|
||||
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
|
||||
- text: <code>footer</code>标记的<code>id</code>属性应设置为“footer”。
|
||||
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
|
||||
- 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");
|
||||
|
||||
```
|
||||
|
||||
@ -45,29 +61,21 @@ tests:
|
||||
|
||||
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<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. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,30 @@
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Make Dead Links Using the Hash Symbol
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用哈希符号制作死链接
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
localeTitle: '用 # 号来创建链接占位符'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时你想添加<code>a</code>元素到你的网站，你知道他们会链接之前。当您使用<code>JavaScript</code>更改链接的行为时，这也很方便，我们将在稍后了解。 </section>
|
||||
<section id='description'>
|
||||
有时你想为网站添加一个 <code>a</code>，但如果你还不确定要将它链接到哪儿，这时可以使用链接占位符。
|
||||
在后面的课程中我们会学到：如何轻松通过<code>JavaScript</code>更改链接指向的地址。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> <code>href</code>属性的当前值是指向“http://freecatphotoapp.com”的链接。将<code>href</code>属性值替换为<code>#</code> （也称为哈希符号）以创建死链接。例如： <code>href="#"</code> </section>
|
||||
<section id='instructions'>
|
||||
<code>href</code>属性的当前值是指向 "http://freecatphotoapp.com"，将<code>href</code>属性的值替换为<code>#</code>，就可以创建固定链接。
|
||||
例如: <code>href="#"</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您<code>a</code>元素应该是一个死链接， <code>href</code>属性的值设置为“＃”。
|
||||
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
|
||||
- text: '<code>a</code> 的<code>href</code>属性应为 "#"。'
|
||||
testString: assert($("a").attr("href") === "#");
|
||||
|
||||
```
|
||||
|
||||
@ -32,14 +39,13 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
<p>点击这里可以获取更多<a href="http://freecatphotoapp.com" target="_blank">猫咪图片</a>。</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -50,8 +56,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,37 +2,58 @@
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Nest an Anchor Element within a Paragraph
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在段落中嵌入锚元素
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
|
||||
forumTopicId: 18244
|
||||
localeTitle: 将 a 嵌套在段落中
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以在其他文本元素中嵌套链接。 <blockquote> <P> <br>这是一个<a target="_blank" href="http://freecodecamp.org"> freecodecamp.org </a>的链接供您关注。 <br> </ p> </blockquote>让我们分解示例：普通文本包含在<code>p</code>元素中： <br> <code><p> Here's a ... for you to follow. </p></code>接下来是<code>anchor</code>元素<code><a></code> （需要结束标记<code></a></code> ）： <br> <code><a> ... </a></code> <code>target</code>是一个锚标记属性，指定打开链接的位置，值<code>"_blank"</code>指定在新标签中打开链接<code>href</code>是一个锚标记属性，其中包含URL地址链接： <br> <code><a href="http://freecodecamp.org"> ... </a></code>在名为<code>anchor text</code>的锚元素中，文本<strong>“链接到freecodecamp.org”</strong>将显示一个单击的链接： <br> <code><a href=" ... ">link to freecodecamp.org</a></code>示例的最终输出如下所示： <br><p>这是<a target="_blank" href="http://freecodecamp.org">freecodecamp.org</a>的<a target="_blank" href="http://freecodecamp.org">链接</a>供您关注。 </p></section>
|
||||
<section id='description'>
|
||||
|
||||
你可以在其他文本元素内嵌套链接。
|
||||
|
||||
```html
|
||||
<p>
|
||||
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
|
||||
</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><code><a href="https://freecodecamp.org"> ... </a></code>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">现在，鸟巢现有的<code>a</code>新元素内<code>p</code>元（刚过现有的<code>main</code>元素）。新段落的文本应显示“查看更多猫照片”，其中“猫照片”是一个链接，其余文本是纯文本。 </section>
|
||||
<section id='instructions'>
|
||||
|
||||
用一个段落（<code>p</code>）标签来包裹<code>main</code>元素里的<code>a</code>节点。新段落的文本为：“View more cat photos”，其中 "cat photos" 是一个链接，其余是纯文本。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '您需要一个链接到“http://freecatphotoapp.com” <code>a</code>元素。'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
|
||||
- text: 你<code>a</code>元素应该有“猫照片”的锚文本
|
||||
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'
|
||||
- text: 创建一个新的<code>p</code>周围的元素<code>a</code>元素。 HTML代码中应至少包含3个<code>p</code>标签。
|
||||
testString: 'assert($("p") && $("p").length > 2, "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.");'
|
||||
- text: 您<code>a</code>元素应嵌套在新的<code>p</code>元素中。
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), "Your <code>a</code> element should be nested within your new <code>p</code> element.");'
|
||||
- text: 你的<code>p</code>元素应该有“查看更多”文本（后面有一个空格）。
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)), "Your <code>p</code> element should have the text "View more " (with a space after it).");'
|
||||
- text: 您的<code>a</code>元素<em>不</em>应该有文字“查看更多”。
|
||||
testString: 'assert(!$("a").text().match(/View\smore/gi), "Your <code>a</code> element should <em>not</em> have the text "View more".");'
|
||||
- text: 确保每个<code>p</code>元素都有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: 确保每个的<code>a</code>元素具有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
- text: '你需要一个指向 "http://freecatphotoapp.com" 的 <code>a</code> 。'
|
||||
testString: 'assert(($("a[href=\"http://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=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));'
|
||||
- text: '段落应该包含文本 View more（记得 more 后面有一个空格）。'
|
||||
testString: 'assert(($("a[href=\"http://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);
|
||||
|
||||
```
|
||||
|
||||
@ -49,12 +70,11 @@ tests:
|
||||
|
||||
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -65,8 +85,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,37 @@
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Nest Many Elements within a Single div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在单个div元素中嵌套许多元素
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
localeTitle: 元素嵌套
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>div</code>元素也称为除法元素，是其他元素的通用容器。 <code>div</code>元素可能是所有人中最常用的HTML元素。就像任何其他非自闭元素一样，您可以使用<code><div></code>打开<code>div</code>元素，然后使用<code></div></code>其关闭到另一行。 </section>
|
||||
<section id='description'>
|
||||
<code>div</code>元素，也叫 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>div</code>标记放在“Things cats love” <code>p</code>元素上方，并将结束的<code>div</code>标记放在结束的<code>ol</code>标记之后，这样两个列表都在一个<code>div</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
把无序列表、有序列表和段落都嵌套进同一个<code>div</code>元素。
|
||||
提示：你可以在第一个<code><p></code>之前插入<code>div</code>开始标记，在<code></ol></code>之后插入<code>div</code>结束标记，这样，所有的列表都位于<code>div</code>之内。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 将<code>p</code>元素嵌套在<code>div</code>元素中。
|
||||
testString: 'assert($("div").children("p").length > 1, "Nest your <code>p</code> elements inside your <code>div</code> element.");'
|
||||
- text: 将您的<code>ul</code>元素<code>div</code>元素中。
|
||||
testString: 'assert($("div").children("ul").length > 0, "Nest your <code>ul</code> element inside your <code>div</code> element.");'
|
||||
- text: 将您的<code>ol</code>元素<code>div</code>元素中。
|
||||
testString: 'assert($("div").children("ol").length > 0, "Nest your <code>ol</code> element inside your <code>div</code> element.");'
|
||||
- text: 确保你的<code>div</code>元素有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, "Make sure your <code>div</code> element has a closing tag.");'
|
||||
- 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);
|
||||
|
||||
```
|
||||
|
||||
@ -38,34 +46,33 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> 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>
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -76,8 +83,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,35 @@
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Say Hello to HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 向HTML Elements说你好
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
localeTitle: 向 HTML 元素问好
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">欢迎来到freeCodeCamp的HTML编码挑战。这些将逐步引导您完成Web开发。首先，您将首先使用HTML构建一个简单的网页。您可以在<code>code editor</code>编辑<code>code</code> ，该<code>code editor</code>嵌入到此网页中。您是否在代码编辑器中看到<code><h1>Hello</h1></code> ？这是一个HTML <code>element</code> 。大多数HTML元素都有一个<code>opening tag</code>和一个<code>closing tag</code> 。打开标记如下所示： <code><h1></code>结束标记如下所示： <code></h1></code>开始标记和结束标记之间的唯一区别是结束标记的左括号后面的正斜杠。每个挑战都有可以随时单击“运行测试”按钮运行的测试。当您通过所有测试时，系统会提示您提交解决方案并转到下一个编码挑战。 </section>
|
||||
<section id='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>元素的文本更改为“Hello World”。 </section>
|
||||
<section id='instructions'>
|
||||
请把<code>h1</code>元素的内容改为：<code>Hello World</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>h1</code>元素应该有“Hello World”文本。
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
- text: '<code>h1</code>元素的内容应该为：<code>Hello World</code>。'
|
||||
testString: assert.isTrue((/^hello(\s)+world$/gi).test($('h1').text()));
|
||||
|
||||
```
|
||||
|
||||
@ -31,7 +43,6 @@ tests:
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -42,8 +53,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Turn an Image into a Link
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将图像转换为链接
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
localeTitle: 给图片添加链接
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以通过嵌套在他们做出元素融入链接<code>a</code>元素。鸟巢的内部图像<code>a</code>元素。这是一个例子： <code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code>记得使用<code>#</code>为你的<code>a</code>元素的<code>href</code>为了把它变成一个死链接属性。 </section>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将现有图像元素放在锚元素中。完成此操作后，使用光标将鼠标悬停在图像上。光标的正常指针应该成为链接点击指针。这张照片现在是一个链接。 </section>
|
||||
<section id='instructions'>
|
||||
把现存的图片嵌套进 <code>a</code> 中。
|
||||
当鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 巢现有<code>img</code>一个内元件<code>a</code>元件。
|
||||
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");'
|
||||
- text: '您<code>a</code>元素应该是<code>href</code>属性设置为<code>#</code>的死链接。'
|
||||
testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");'
|
||||
- text: 确保每个的<code>a</code>元素具有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
- 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);
|
||||
|
||||
```
|
||||
|
||||
@ -36,14 +45,13 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
|
||||
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -54,8 +62,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Uncomment HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 取消注释HTML
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
localeTitle: 去除 HTML 的注释
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">注释是一种方法，您可以在代码中为其他开发人员留下注释，而不会影响显示给最终用户的结果输出。注释也是使代码处于非活动状态而不必完全删除它的便捷方式。 HTML中的注释以<code><!--</code>开头，以<code>--></code>结尾</section>
|
||||
<section id='description'>
|
||||
注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
|
||||
注释的另一个用途就是在不删除代码的前提下，让代码不起作用。
|
||||
在 HTML 中，注释的开始标记是<code><!--</code>，结束标记是<code>--></code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">取消注释你的<code>h1</code> ， <code>h2</code>和<code>p</code>元素。 </section>
|
||||
<section id='instructions'>
|
||||
现在我们反其道而行之，去掉<code>h1</code>元素、<code>h2</code>元素、<code>p</code>元素的注释。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 通过取消注释，使您的<code>h1</code>元素在您的页面上可见。
|
||||
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");'
|
||||
- text: 通过取消注释，使您的<code>h2</code>元素在您的页面上可见。
|
||||
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
|
||||
- text: 通过取消注释，可以在页面上显示您的<code>p</code>元素。
|
||||
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
|
||||
- text: 请务必删除所有尾随注释标记，即<code>--></code> 。
|
||||
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags, i.e. <code>--></code>.");'
|
||||
- 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(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,'')));
|
||||
|
||||
```
|
||||
|
||||
@ -43,7 +50,6 @@ tests:
|
||||
|
||||
<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>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -54,8 +60,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,29 @@
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Use HTML5 to Require a Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用HTML5需要字段
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
localeTitle: 给表单添加一个必填字段
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以订定必填项，限制您的用户在完成必填项之前无法提交表单。如果您要订定必填项段，只需在<code>input</code>元素中添加<code>required</code>的属性，如下所示： <code><input type="text" required></code> </section>
|
||||
<section id='description'>
|
||||
当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。
|
||||
如果你想把文本输入框设置为必填项，在<code>input</code>元素中加上 required 属性就可以了，例如：<code><input type="text" required></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">利用<code>required</code> 使您的<code>input</code>成为必填项 ，限制您的用户在沒填写必填项的情况下无法提交表单。请尝试在沒有在完成必填项前提交表单，看看HTML5如何通知您少填了必填项。 </section>
|
||||
<section id='instructions'>
|
||||
给<code>input</code>元素加上<code>required</code>属性，这样用户就必须先在输入框里填入内容，然后才可以提交表单。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>input</code>元素应具有<code>required</code>属性。
|
||||
testString: 'assert($("input").prop("required"), "Your text <code>input</code> element should have the <code>required</code> attribute.");'
|
||||
- text: '<code>input</code>元素必须有<code>required</code>属性。'
|
||||
testString: assert($("input").prop("required"));
|
||||
|
||||
```
|
||||
|
||||
@ -32,28 +38,27 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
<input type="text" placeholder="猫咪图片地址">
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -64,8 +69,5 @@ tests:
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 5c6c06847491271903d37cfd
|
||||
title: Use the value attribute with Radio Buttons and Checkboxes
|
||||
challengeType: 0
|
||||
forumTopicId: 301099
|
||||
localeTitle: 使用单选框和复选框的 value 属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当表单提交时，包括 options 已选值在内的数据会发送给服务端。<code>radio</code>和<code>checkbox</code>的<code>value</code>值决定了发送到服务端的实际内容。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
在这里，有两个 <code>radio</code> 单选框。如果当用户提交表单时 <code>indoor</code> 选项被选中，表单数据会包含：<code>indoor-outdoor=indoor</code>。也就是 "indoor" 单选框的 <code>name</code> 和 <code>value</code> 属性。
|
||||
|
||||
如果没写 <code>value</code> 属性，会使用默认值做为表单数据提交，也就是 <code>on</code>。在这种情况下，如果用户点击 "indoor" 选项然后提交表单，表单数据的值为 <code>indoor-outdoor=on</code>，这可能并没有什么意义。因此最好将 <code>value</code> 属性设置一些有意义的内容。
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
</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="/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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
Reference in New Issue
Block a user