Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Add a Submit Button to a Form
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-a-submit-button-to-a-form'
|
||||
videoUrl: ''
|
||||
localeTitle: 向表单添加提交按钮
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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">
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Add Images to Your Website
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-images-to-your-website'
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<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>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Add Placeholder Text to a Text Field
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field'
|
||||
videoUrl: ''
|
||||
localeTitle: 将占位符文本添加到文本字段
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">占位符文本是在用户输入任何内容之前在<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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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>
|
||||
<input type="text">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Check Radio Buttons and Checkboxes by Default
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 默认情况下检查单选按钮和复选框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>checked</code>属性设置默认情况下要选中的复选框或单选按钮。为此，只需将“checked”一词添加到input元素的内部即可。例如： <code><input type="radio" name="test-name" checked></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">默认情况下，设置第一个<code>radio buttons</code>和第一个<code>checkboxes</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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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">
|
||||
<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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comment out HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 评论HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Create a Bulleted Unordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Create a Form Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建表单元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用纯HTML来构建实际将数据提交到服务器的Web表单。您可以通过在<code>form</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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Create a Set of Checkboxes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在表单中添加一组三个复选框。每个复选框应嵌套在自己的<code>label</code>元素中。这三者都应该分享<code>personality</code>的<code>name</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>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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">
|
||||
<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>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Create a Set of Radio Buttons
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在表单中添加一对单选按钮，每个按钮都嵌套在自己的标签元素中。一个应该有<code>indoor</code>选择，另一个应该可以选择<code>outdoor</code> 。两者都应该共享<code>indoor-outdoor</code>的<code>name</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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Create a Text Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建文本字段
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们创建一个Web表单。输入元素是从用户获取输入的便捷方式。您可以创建如下文本输入： <code><input type="text"></code>请注意， <code>input</code>元素是自动关闭的。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在列表下创建<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>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Create an Ordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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>
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declare the Doctype of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 声明HTML文档的Doctype
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在代码编辑器中将HTML5的<code>DOCTYPE</code>标记添加到空白HTML文档的顶部。在它下面，添加包含<code>h1</code>元素的开始和结束<code>html</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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Define the Head and Body of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 定义HTML文档的头部和正文
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</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>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Delete HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 删除HTML元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们的手机没有太多的垂直空间。让我们删除不必要的元素，以便我们开始构建CatPhotoApp。 </section>
|
||||
|
||||
## Instructions
|
||||
<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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Fill in the Blank with Placeholder Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Headline with the h2 Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加<code>h2</code>标签，上面写着“CatPhotoApp”创建第二个HTML <code>element</code>你的“Hello World”的<code>h1</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".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Inform with the Paragraph Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通知段落元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>p</code>元素是网站上段落文本的首选元素。 <code>p</code>是“段落”的缩写。你可以创建一个这样的段落元素： <code><p>I'm ap tag!</p></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>h2</code>元素下面创建一个<code>p</code>元素，并为其指定文本“Hello Paragraph”。 </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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introduction to HTML5 Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Link to External Pages with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 链接到具有锚元素的外部页面
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个链接到<code>http://freecatphotoapp.com</code> <code>a</code>元素，并将“猫照片”作为其<code>anchor text</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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Link to Internal Sections of a Page with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 链接到具有锚元素的页面的内部部分
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## 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".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<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.">
|
||||
|
||||
<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>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Make Dead Links Using the Hash Symbol
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用哈希符号制作死链接
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
|
||||
## 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 "#".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Nest an Anchor Element within a Paragraph
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在段落中嵌入锚元素
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">现在，鸟巢现有的<code>a</code>新元素内<code>p</code>元（刚过现有的<code>main</code>元素）。新段落的文本应显示“查看更多猫照片”，其中“猫照片”是一个链接，其余文本是纯文本。 </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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<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.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Nest Many Elements within a Single div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在单个div元素中嵌套许多元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>div</code>元素也称为除法元素，是其他元素的通用容器。 <code>div</code>元素可能是所有人中最常用的HTML元素。就像任何其他非自闭元素一样，您可以使用<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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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">
|
||||
<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>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,49 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Say Hello to HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 向HTML Elements说你好
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">要通过此挑战的测试，请将<code>h1</code>元素的文本更改为“Hello World”。 </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".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Turn an Image into a Link
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将现有图像元素放在锚元素中。完成此操作后，使用光标将鼠标悬停在图像上。光标的正常指针应该成为链接点击指针。这张照片现在是一个链接。 </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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Uncomment HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 取消注释HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">注释是一种方法，您可以在代码中为其他开发人员留下注释，而不会影响显示给最终用户的结果输出。注释也是使代码处于非活动状态而不必完全删除它的便捷方式。 HTML中的注释以<code><!--</code>开头，以<code>--></code>结尾</section>
|
||||
|
||||
## Instructions
|
||||
<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>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Use HTML5 to Require a Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用HTML5需要字段
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以要求特定的表单字段，以便您的用户在填写表单之前无法提交表单。例如，如果要创建所需的文本输入字段，只需在<code>input</code>元素中添加<code>required</code>的属性，如下所示： <code><input type="text" required></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使您的文本<code>input</code> <code>required</code>字段，以便您的用户无法在不填写此字段的情况下提交表单。然后尝试提交表单而不输入任何文本。了解您的HTML5表单如何通知您该字段是必需的？ </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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user