gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(i18n): update Chinese translation of basic html and html5 (#37911)

Browse Source 
Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
This commit is contained in:
ZhichengChen
2019-12-26 20:05:59 +08:00
committed by mrugesh
parent 075bfb38ff
commit 3857e8d779
29 changed files with 950 additions and 689 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.chinese.md
View File

@ -17,7 +17,7 @@ localeTitle: 降低元素的不透明度
```yml ```yml
tests: 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>.");' 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>.");'
``` ```

84
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.chinese.md
View File

@ -2,29 +2,36 @@
id: bad87fee1348bd9aedd08830 id: bad87fee1348bd9aedd08830
title: Add a Submit Button to a Form title: Add a Submit Button to a Form
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
localeTitle: 向表单添加提交按钮 forumTopicId: 16627
localeTitle: 给表单添加提交按钮
--- ---
## Description ## Description
<section id="description">我们在表单中添加一个<code>submit</code>按钮。单击此按钮会将表单中的数据发送到您使用表单的<code>action</code>属性指定的URL。这是一个示例提交按钮： <code>&lt;button type=&quot;submit&quot;&gt;this button submits the form&lt;/button&gt;</code> </section> <section id='description'>
让我们来给表单添加一个<code>submit</code>提交按钮，当点击提交按钮时，表单中的数据将会被发送到<code>action</code>属性指定的 URL 上。
例如：
<code>&#60;button type="submit"&#62;this button submits the form&#60;/button&#62;</code>
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 你的表单里面应该有一个按钮。 - text: '表单内部应该有一个按钮。'
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");' testString: assert($("form").children("button").length > 0, '表单内部应该有一个按钮。');
- text: 您的提交按钮应该具有要<code>submit</code>的属性<code>type</code> 。 - text: '按钮的<code>type</code>属性值应该为<code>submit</code>。'
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");' testString: assert($("button").attr("type") === "submit");
- text: 您的提交按钮应该只有“提交”文本。 - text: '提交按钮的文本应该为<code>提交</code>。'
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");' testString: assert($("button").text().match(/^\s*提交\s*$/gi));
- text: 确保您的<code>button</code>元素有一个结束标记。 - text: '确保按钮有结束标记。'
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.");' 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 ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层面</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>祛跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<form action="/submit-cat-photo"> <form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL"> <input type="text" placeholder="猫咪图片地址">
</form> </form>
</main> </main>
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
<section id='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> </section>

47
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.chinese.md
View File

@ -2,27 +2,44 @@
id: bad87fee1348bd9aedf08812 id: bad87fee1348bd9aedf08812
title: Add Images to Your Website title: Add Images to Your Website
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
localeTitle: 添加图片到您的网站 forumTopicId: 16640
localeTitle: 给网站添加图片
--- ---
## Description ## Description
<section id="description">您可以使用<code>img</code>元素将图像添加到网站，并使用<code>src</code>属性指向特定图像的URL。这方面的一个例子是： <code>&lt;img src=&quot;https://www.your-image-source.com/your-image.jpg&quot;&gt;</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>&lt;img src=&quot;https://www.your-image-source.com/your-image.jpg&quot; alt=&quot;Author standing on a beach with two thumbs up.&quot;&gt;</code> </section> <section id='description'>
用<code>img</code>元素来为你的网站添加图片，其中<code>src</code>属性指向一个图片的地址。
例如：
<code>&#60img src="https://www.your-image-source.com/your-image.jpg"&#62</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>&#60img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指"&#62</code>
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的页面应该有一个图像元素。 - text: '网页应该有一张图片。'
testString: 'assert($("img").length > 0, "Your page should have an image element.");' testString: assert($("img").length > 0);
- text: 您的图像应具有指向小猫图像的<code>src</code>属性。 - text: '图片 src 属性应该为 https://bit.ly/fcc-relaxing-cat。'
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.");' testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
- text: 您的图片元素<strong>必须</strong>具有<code>alt</code>属性。 - text: '图片必须有<code>alt</code>属性。'
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");' testString: assert(code.match(/alt\s*?=\s*?(\"|\').*(\"|\')/));
``` ```
@ -38,10 +55,9 @@ tests:
<main> <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>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</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>
</main> </main>
``` ```
</div> </div>
@ -52,8 +68,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

54
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.chinese.md
View File

@ -2,28 +2,34 @@
id: bad87fee1348bd9aedf08830 id: bad87fee1348bd9aedf08830
title: Add Placeholder Text to a Text Field title: Add Placeholder Text to a Text Field
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
localeTitle: 将占位符文本添加到文本字段 forumTopicId: 16647
localeTitle: 给输入框添加占位符文本
--- ---
## Description ## Description
<section id="description">占位符文本是在用户输入任何内容之前在<code>input</code>元素中显示的内容。您可以像这样创建占位符文本： <code>&lt;input type=&quot;text&quot; placeholder=&quot;this is placeholder text&quot;&gt;</code> </section> <section id='description'>
<code>Placeholder</code>占位符是用户在<code>input</code>输入框中输入任何东西前的预定义文本。
你可以像这样创建一个占位符：
<code>&#60;input type="text" placeholder="this is placeholder text"&#62;</code>
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 将<code>placeholder</code>属性添加到现有文本<code>input</code>元素。 - text: '给现有的<code>input</code>输入框添加一个<code>placeholder</code>属性。'
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");' testString: assert($("input[placeholder]").length > 0);
- text: 将占位符属性的值设置为“cat photo URL”。 - text: '设置<code>placeholder</code>属性的值为 ”猫咪图片地址“。'
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".");' testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/猫咪图片地址/gi));
- text: 完成的<code>input</code>元素应该具有有效的语法。 - 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.");' testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|''.*?''|[\^''">\s]+))?)+\s*|\s*)\/?>/gi));'
``` ```
</section> </section>
@ -36,25 +42,24 @@ tests:
```html ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<input type="text"> <input type="text">
</main> </main>
``` ```
</div> </div>
@ -65,8 +70,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

62
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.chinese.md
View File

@ -2,25 +2,31 @@
id: bad87fee1348bd9aedd08835 id: bad87fee1348bd9aedd08835
title: Check Radio Buttons and Checkboxes by Default title: Check Radio Buttons and Checkboxes by Default
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
localeTitle: 默认情况下检查单选按钮和复选框 forumTopicId: 301094
localeTitle: 给单选按钮和复选框添加默认选中项
--- ---
## Description ## Description
<section id="description">您可以使用<code>checked</code>属性设置默认情况下要选中的复选框或单选按钮。为此，只需将“checked”一词添加到input元素的内部即可。例如： <code>&lt;input type=&quot;radio&quot; name=&quot;test-name&quot; checked&gt;</code> </section> <section id='description'>
如果想设置某个单选按钮或多选按钮默认被选中，只需给<code>input</code>元素添加 "checked" 属性。 例如:
<code>&#60;input type="radio" name="test-name" checked&#62;</code>
</section>
## Instructions ## Instructions
<section id="instructions">默认情况下，设置第一个<code>radio buttons</code>和第一个<code>checkboxes</code> 。 </section> <section id='instructions'>
把第一个<code>radio button</code>和第一个<code>checkbox</code>都设置为默认选中。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 默认情况下，应检查表单上的第一个单选按钮。 - text: '表单的第一个单选按钮应该被默认选中。'
testString: 'assert($("input[type="radio"]").prop("checked"), "Your first radio button on your form should be checked by default.");' testString: assert($('input[type="radio"]').prop("checked"));
- text: 默认情况下，应检查表单上的第一个复选框。 - text: '表单的第一个多选按钮应该被默认选中。'
testString: 'assert($("input[type="checkbox"]").prop("checked"), "Your first checkbox on your form should be checked by default.");' testString: assert($('input[type="checkbox"]').prop("checked"));
``` ```
@ -34,33 +40,32 @@ tests:
```html ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<form action="/submit-cat-photo"> <form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label> <label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality"> Loving</label> <label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality"> Energetic</label><br> <label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="cat photo URL" required> <input type="text" placeholder="猫咪图片地址" required>
<button type="submit">Submit</button> <button type="submit">提交</button>
</form> </form>
</main> </main>
``` ```
</div> </div>
@ -71,8 +76,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

42
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.chinese.md
View File

@ -2,31 +2,37 @@
id: bad87fee1348bd9aedf08804 id: bad87fee1348bd9aedf08804
title: Comment out HTML title: Comment out HTML
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
localeTitle: 评论HTML forumTopicId: 16782
localeTitle: 给 HTML 添加注释
--- ---
## Description ## Description
<section id="description">请记住，为了开始评论，您需要使用<code>&lt;!--</code>并结束评论，您需要使用<code>--&gt;</code>这里您需要在<code>h2</code>元素开始之前结束评论。 </section> <section id='description'>
记住：注释的开始标记是<code>&#60;!--</code>，结束标记是<code>--&#62;</code>。
现在你需要在<code>h2</code>元素前终止注释。
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 注释掉你的<code>h1</code>元素，使其在你的页面上不可见。 - 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.");' testString: assert(($("h1").length === 0));
- text: 保持<code>h2</code>元素取消注释，以便在页面上显示。 - text: '<code>h2</code>元素保持原样，这样网页上还能看到它。'
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");' testString: assert(($("h2").length > 0));
- text: 注释掉你的<code>p</code>元素，使其在你的页面上不可见。 - 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.");' testString: assert(($("p").length === 0));
- text: 请务必使用<code>--&gt;</code>关闭每条评论。 - text: '确保每一个注释都以<code>--&#62;</code>结尾。'
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--&#62;</code>.");' testString: assert(code.match(/[^fc]-->/g).length > 1);
- text: 请勿更改代码中<code>h1</code> <code>h2</code>或<code>p</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.");' 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> <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> </div>
@ -56,8 +61,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

69
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.chinese.md
View File

@ -2,31 +2,46 @@
id: bad87fee1348bd9aedf08827 id: bad87fee1348bd9aedf08827
title: Create a Bulleted Unordered List title: Create a Bulleted Unordered List
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
localeTitle: 创建项目符号无序列表 forumTopicId: 16814
localeTitle: 创建一个无序列表
--- ---
## Description ## Description
<section id="description"> HTML具有用于创建<code>unordered lists</code>或项目符号样式列表的特殊元素。无序列表以开头<code>&lt;ul&gt;</code>元素开头，后跟任意数量的<code>&lt;li&gt;</code>元素。最后，无序列表以<code>&lt;/ul&gt;</code>结尾例如： <blockquote> &lt;UL&gt; <br> &lt;LI&gt;乳&lt;/ LI&gt; <br> &lt;LI&gt;干酪&lt;/ LI&gt; <br> &lt;/ UL&gt; </blockquote>会创建一个“牛奶”和“奶酪”的子弹点样式列表。 </section> <section id='description'>
HTML 有一个特定的元素用于创建无序列表<code>unordered lists（缩写 ul）</code>。
无序列表以<code>&#60;ul&#62;</code>开始，中间包含一个或多个<code>&#60;li&#62;</code>元素，最后以<code>&#60;/ul&#62;</code>结尾。
例如:
```html
<ul>
<li>牛奶</li>
<li>奶酪</li>
</ul>
```
将会创建一个包含牛奶和奶酪的无序列表。
</section>
## Instructions ## Instructions
<section id="instructions">删除最后两个<code>p</code>元素，并在页面底部创建猫喜爱的三件事的无序列表。 </section> <section id='instructions'>
删除页面底部的两个<code>p</code>元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 创建一个<code>ul</code>元素。 - text: '创建一个<code>ul</code>无序列表。'
testString: 'assert($("ul").length > 0, "Create a <code>ul</code> element.");' testString: assert($("ul").length > 0);
- text: 你的<code>ul</code>元素中应该有三个<code>li</code>元素。 - 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.");' testString: assert($("ul li").length > 2);
- text: 确保你的<code>ul</code>元素有一个结束标记。 - 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.");' testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length);
- text: 确保您的<code>li</code>元素具有结束标记。 - 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.");' testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length);
- text: 确保您的<code>li</code>元素不包含任何空字符串或者只有空格。
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0, 'Make sure your <code>li</code> elements don\’t contain an empty string or only white-space.');
``` ```
</section> </section>
@ -39,14 +54,12 @@ tests:
```html ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</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>
</main> </main>
``` ```
</div> </div>
@ -57,21 +70,5 @@ tests:
## Solution ## Solution
<section id='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> </section>

55
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.chinese.md
View File

@ -2,27 +2,34 @@
id: bad87fee1348bd9aede08830 id: bad87fee1348bd9aede08830
title: Create a Form Element title: Create a Form Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cmQ3Kfa'
localeTitle: 创建表单元素 forumTopicId: 16817
localeTitle: 创建一个表单
--- ---
## Description ## Description
<section id="description">您可以使用纯HTML来构建实际将数据提交到服务器的Web表单。您可以通过在<code>form</code>元素上指定操作来执行此操作。例如： <code>&lt;form action=&quot;/url-where-you-want-to-submit-form-data&quot;&gt;&lt;/form&gt;</code> </section> <section id='description'>
如果想使用 HTML 向服务器提交数据，可以给<code>form</code>添加<code>action</code>属性。
例如:
<code>&#60;form action="/url-where-you-want-to-submit-form-data"&#62;&#60;/form&#62;</code>
</section>
## Instructions ## Instructions
<section id="instructions">将文本字段嵌套在<code>form</code>元素中，并将<code>action=&quot;/submit-cat-photo&quot;</code>属性添加到表单元素中。 </section> <section id='instructions'>
在<code>input</code>输入框外层创建一个<code>form</code>表单，然后设置表单的<code>action</code>属性为<code>"/submit-cat-photo"</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 将文本输入元素嵌套在<code>form</code>元素中。 - text: '在<code>input</code>输入框外层创建一个<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.");' testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0);
- text: 确保您的<code>form</code>具有设置为<code>/submit-cat-photo</code>的<code>action</code>属性 - text: '确保表单的<code>action</code>属性为<code>"/submit-cat-photo"</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>");' testString: assert($("form").attr("action") === "/submit-cat-photo");
- text: 确保您的<code>form</code>元素具有格式良好的打开和关闭标记。 - text: '确保表单有开始标记和结束标记。'
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.");' 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 ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<input type="text" placeholder="cat photo URL"> <input type="text" placeholder="猫咪图片地址">
</main> </main>
``` ```
</div> </div>
@ -65,8 +71,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

71
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.chinese.md
View File

@ -2,29 +2,42 @@
id: bad87fee1348bd9aedf08835 id: bad87fee1348bd9aedf08835
title: Create a Set of Checkboxes title: Create a Set of Checkboxes
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
forumTopicId: 16821
localeTitle: 创建一组复选框 localeTitle: 创建一组复选框
--- ---
## Description ## 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>&lt;label for=&quot;loving&quot;&gt;&lt;input id=&quot;loving&quot; type=&quot;checkbox&quot; name=&quot;personality&quot;&gt; Loving&lt;/label&gt;</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>&#60;label for="loving"&#62;&#60;input id="loving" type="checkbox" name="personality"&#62; Loving&#60;/label&#62;</code>
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的页面应该有三个复选框元素。 - text: '表单应该有三个复选框。'
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");' testString: assert($('input[type="checkbox"]').length > 2);
- text: 三个复选框元素中的每一个都应嵌套在自己的<code>label</code>元素中。 - 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.");' testString: 'assert($(''label > input[type="checkbox"]:only-child'').length > 2);'
- text: 确保每个<code>label</code>元素都有一个结束标记。 - 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.");' testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length);
- text: 为您的复选框提供<code>personality</code>的<code>name</code>属性。 - text: '设置复选框的<code>name</code>属性均为<code>personality</code>。'
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <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 ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<form action="/submit-cat-photo"> <form action="/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label> <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">室内</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br> <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor">室外</label><br>
<input type="text" placeholder="cat photo URL" required> <input type="text" placeholder="猫咪图片地址" required>
<button type="submit">Submit</button> <button type="submit">提交</button>
</form> </form>
</main> </main>
``` ```
</div> </div>
@ -72,8 +86,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

88
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.chinese.md
View File

@ -2,35 +2,59 @@
id: bad87fee1348bd9aedf08834 id: bad87fee1348bd9aedf08834
title: Create a Set of Radio Buttons title: Create a Set of Radio Buttons
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR'
forumTopicId: 16822
localeTitle: 创建一组单选按钮 localeTitle: 创建一组单选按钮
--- ---
## Description ## Description
<section id="description">您可以使用<code>radio buttons</code>来解决您希望用户仅从多个选项中给出一个答案的问题。单选按钮是一种<code>input</code> 。每个单选按钮都可以嵌套在自己的<code>label</code>元素中。通过将<code>input</code>元素包装在<code>label</code>元素内部，它将自动将单选按钮输入与其周围的标签元素相关联。所有相关的单选按钮应具有相同的<code>name</code>属性以创建单选按钮组。通过创建无线电组，选择任何单个单选按钮将自动取消选择同一组内的其他按钮，确保用户只提供一个答案。这是一个单选按钮的示例： <blockquote> &lt;标签&gt; <br> &lt;input type =“radio”name =“indoor-outdoor”&gt;室内<br> &lt;/标签&gt; </blockquote>最佳做法是在<code>label</code>元素上设置<code>for</code>属性，其值与<code>input</code>元素的<code>id</code>属性值相匹配。这允许辅助技术在标签和子<code>input</code>元素之间创建链接关系。例如： <blockquote> &lt;label for =“室内”&gt; <br> &lt;input id =“indoor”type =“radio”name =“indoor-outdoor”&gt;室内<br> &lt;/标签&gt; </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 ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的页面应该有两个单选按钮元素。 - text: '页面上应该有两个单选按钮元素。'
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");' testString: assert($('input[type="radio"]').length > 1);
- text: 为您的单选按钮提供<code>indoor-outdoor</code>的<code>name</code>属性。 - text: '设置单选按钮的<code>name</code>属性为<code>indoor-outdoor</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>.");' testString: assert($('label > input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
- text: 两个单选按钮元素中的每一个都应嵌套在自己的<code>label</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.");' testString: 'assert($(''label > input[type="radio"]:only-child'').length > 1);'
- text: 确保每个<code>label</code>元素都有一个结束标记。 - 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.");' testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length));
- text: 您的一个单选按钮应该是<code>indoor</code>标签。 - text: '其中一个<code>label</code>元素的文本为<code>indoor</code>。'
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");' testString: assert($("label").text().match(/indoor/gi));
- text: 您的一个单选按钮应该是<code>outdoor</code>标签。 - text: '其中一个<code>label</code>元素的文本为<code>outdoor</code>。'
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");' testString: assert($("label").text().match(/outdoor/gi));
- text: 应在<code>form</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.");' testString: assert($("label").parent().get(0).tagName.match('FORM'));
``` ```
@ -44,28 +68,27 @@ tests:
```html ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<form action="/submit-cat-photo"> <form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required> <input type="text" placeholder="猫咪图片地址" required>
<button type="submit">Submit</button> <button type="submit">提交</button>
</form> </form>
</main> </main>
``` ```
</div> </div>
@ -76,8 +99,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

45
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.chinese.md
View File

@ -2,23 +2,32 @@
id: bad87fee1348bd9aedf08829 id: bad87fee1348bd9aedf08829
title: Create a Text Field title: Create a Text Field
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
localeTitle: 创建文本字段 forumTopicId: 16823
localeTitle: 创建一个输入框
--- ---
## Description ## Description
<section id="description">现在让我们创建一个Web表单。输入元素是从用户获取输入的便捷方式。您可以创建如下文本输入： <code>&lt;input type=&quot;text&quot;&gt;</code>请注意， <code>input</code>元素是自动关闭的。 </section> <section id='description'>
现在让我们来创建一个<code>form</code>表单。
<code>input</code>输入框可以让你轻松获得用户的输入。
你可以像这样创建一个文本输入框：
<code>&#60;input type="text"&#62;</code>
注意：<code>input</code>输入框是没有结束标记的。
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的应用应具有<code>text</code>类型的<code>input</code>元素。 - text: '网页中有一个<code>type</code>属性为<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>.");' testString: assert($("input[type=text]").length > 0);
``` ```
@ -34,24 +43,23 @@ tests:
<main> <main>
<p>Click here to view more <a href="#">cat photos</a>.</p> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
</main> </main>
``` ```
</div> </div>
@ -62,8 +70,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

85
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.chinese.md
View File

@ -2,39 +2,60 @@
id: bad87fee1348bd9aedf08828 id: bad87fee1348bd9aedf08828
title: Create an Ordered List title: Create an Ordered List
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
localeTitle: 创建有序列表 forumTopicId: 16824
localeTitle: 创建一个有序列表
--- ---
## Description ## Description
<section id="description"> HTML还有另一个用于创建<code>ordered lists</code>或编号列表的特殊元素。有序列表以开头<code>&lt;ol&gt;</code>元素开头，后跟任意数量的<code>&lt;li&gt;</code>元素。最后，有序列表以<code>&lt;/ol&gt;</code>结尾例如： <blockquote> &lt;OL&gt; <br> &lt;LI&gt;加菲尔德&lt;/ LI&gt; <br> &lt;LI&gt;西尔威斯特&lt;/ LI&gt; <br> &lt;/醇&gt; </blockquote>将创建一个编号列表“加菲猫”和“西尔维斯特”。 </section> <section id='description'>
HTML 有一个特定的元素用于创建有序列表<code>ordered lists（缩写 ol）</code>。
有序列表以<code>&#60;ol&#62;</code>开始，中间包含一个或多个<code>&#60;li&#62;</code>元素，最后以<code>&#60;/ol&#62;</code>结尾。
例如:
```html
<ol>
<li>加菲猫</li>
<li>哆啦A梦</li>
</ol>
```
将会创建一个包含加菲猫和哆啦A梦的有序列表。
</section>
## Instructions ## Instructions
<section id="instructions">创建猫最讨厌的前三件事的有序列表。 </section> <section id='instructions'>
创建一个有序列表，内容是猫咪最讨厌的三件东西，内容可以任意指定。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 你应该有一个“猫讨厌的三件事”的有序列表： - 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:"");' testString: assert((/猫咪最喜欢的三件东西：/i).test($("ul").prev().text()));
- text: 你应该有一个无序的列表“猫爱的东西：” - text: '页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。'
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");' testString: assert((/猫咪最讨厌的三件东西：/i).test($("ol").prev().text()));
- text: 你应该只有一个<code>ul</code>元素。 - text: '页面应该只有一个<code>ul</code>元素。'
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");' testString: assert.equal($("ul").length, 1);
- text: 你应该只有一个<code>ol</code>元素。 - text: '页面应该只有一个<code>ol</code>元素。'
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");' testString: assert.equal($("ol").length, 1);
- text: 你的<code>ul</code>元素中应该有三个<code>li</code>元素。 - text: '<code>ul</code>无序列表应该包含3个<code>li</code>条目。'
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");' testString: assert.equal($("ul li").length, 3);
- text: 你的<code>ol</code>元素中应该有三个<code>li</code>元素。 - text: '<code>ol</code>有序列表应该包含3个<code>li</code>元素。'
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");' testString: assert.equal($("ol li").length, 3);
- text: 确保你的<code>ul</code>元素有一个结束标记。 - 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.");' testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length);
- text: 确保您的<code>ol</code>元素具有结束标记。 - 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.");' testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length);
- text: '' - text: '确保每个<code>li</code>条目都有结束标记。'
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.");' 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 ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
</main> </main>
``` ```
</div> </div>
@ -72,8 +92,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

43
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.chinese.md
View File

@ -2,27 +2,45 @@
id: 587d78aa367417b2b2512aed id: 587d78aa367417b2b2512aed
title: Declare the Doctype of an HTML Document title: Declare the Doctype of an HTML Document
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
localeTitle: 声明HTML文档的Doctype forumTopicId: 301095
localeTitle: 声明 HTML 的文档类型
--- ---
## Description ## Description
<section id="description">到目前为止，挑战涵盖了特定的HTML元素及其用途。但是，有一些元素可以为页面提供整体结构，并且应该包含在每个HTML文档中。在文档的顶部，您需要告诉浏览器您的页面使用的HTML版本。 HTML是一种不断发展的语言，并定期更新。大多数主流浏览器都支持最新的规范，即HTML5。但是，较旧的网页可能使用该语言的先前版本。您可以通过在第一行添加<code>&lt;!DOCTYPE ...&gt;</code>标记告诉浏览器此信息，其中“ <code>...</code> ”部分是HTML的版本。对于HTML5，您使用<code>&lt;!DOCTYPE html&gt;</code> 。的<code>!</code>和大写<code>DOCTYPE</code>很重要，特别是对于旧版浏览器。 <code>html</code>不区分大小写。接下来，HTML代码的其余部分需要包装在<code>html</code>标记中。开头<code>&lt;html&gt;</code>直接位于<code>&lt;!DOCTYPE html&gt;</code>行下方，结束<code>&lt;/html&gt;</code>位于页面末尾。这是页面结构的一个例子： <blockquote> &lt;！DOCTYPE html&gt; <br> &lt;HTML&gt; <br> &lt;！ - 你的HTML代码在这里 - &gt; <br> &lt;/ HTML&gt; </blockquote></section> <section id='description'>
到目前为止，我们学习了一些特定的 HTML 标签，还有一些标签是用来组成网页的总体结构，并且它们在每个 HTML 文档中都能看到。
在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
你可以通过<code>&lt;!DOCTYPE ...&gt;</code>来告诉浏览器你使用的是 HTML 的哪个版本，"<code>...</code>" 部分就是版本的数字信息。<code>&lt;!DOCTYPE html&gt;</code>对应的就是 HTML5。
<code>!</code>和大写的<code>DOCTYPE</code>是很重要的，特别是对于老的浏览器。但<code>html</code>大写小写都可以。
所有的 HTML 代码都必须位于<code>html</code>标签中。其中<code>&lt;html&gt;</code>位于<code>&lt;!DOCTYPE html&gt;</code>的后面，<code>&lt;/html&gt;</code>位于网页的结尾。
这是网页结构一个例子：
```html
<!DOCTYPE html>
<html>
<!-- Your HTML code goes here -->
</html>
```
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的代码应包含<code>&lt;!DOCTYPE html&gt;</code>标记。 - text: '网页中应该包含<code>&lt;!DOCTYPE html&gt;</code>标签。'
testString: 'assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), "Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.");' testString: assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
- text: 应该有一个<code>html</code>元素。 - text: '网页中只有一个<code>html</code>元素。'
testString: 'assert($("html").length == 1, "There should be one <code>html</code> element.");' testString: assert($('html').length == 1);
- text: <code>html</code>标签应该包含一个<code>h1</code>元素。 - text: '<code>h1</code>元素应该位于<code>html</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.");' testString: assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
``` ```
@ -45,8 +63,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

64
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.chinese.md
View File

@ -2,33 +2,53 @@
id: 587d78aa367417b2b2512aec id: 587d78aa367417b2b2512aec
title: Define the Head and Body of an HTML Document title: Define the Head and Body of an HTML Document
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
localeTitle: 定义HTML文档的头部和正文 forumTopicId: 301096
localeTitle: 定义 HTML 文档的 head 和 body
--- ---
## Description ## 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> &lt;！DOCTYPE html&gt; <br> &lt;HTML&gt; <br> &lt;HEAD&gt; <br> &lt;！ - 元数据元素 - &gt; <br> &lt;/ HEAD&gt; <br> &lt;BODY&gt; <br> &lt;！ - 页面内容 - &gt; <br> &lt;/ BODY&gt; <br> &lt;/ HTML&gt; </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 ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 页面上应该只有一个<code>head</code>元素。 - text: '网页应该只有一个<code>head</code>元素。'
testString: 'assert($("head").length == 1, "There should be only one <code>head</code> element on the page.");' testString: assert($('head').length == 1);
- text: 页面上应该只有一个<code>body</code>元素。 - text: '网页应该只有一个<code>body</code>元素。'
testString: 'assert($("body").length == 1, "There should be only one <code>body</code> element on the page.");' testString: assert($('body').length == 1);
- text: <code>head</code>元素应该是<code>html</code>元素的子元素。 - 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.");' testString: assert($('html').children('head').length == 1);
- text: <code>body</code>元素应该是<code>html</code>元素的子元素。 - 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.");' testString: assert($('html').children('body').length == 1);
- text: <code>head</code>元素应该包围<code>title</code>元素。 - text: '<code>title</code>应该是<code>head</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.");' testString: assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
- text: <code>body</code>元素应该环绕<code>h1</code>和<code>p</code>元素。 - text: '<code>h1</code>和<code>p</code>都应该是<code>body</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.");' testString: assert($('body').children('h1').length == 1 && $('body').children('p').length == 1);
``` ```
@ -42,13 +62,12 @@ tests:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<title>The best page ever</title> <title>世上最萌的猫咪</title>
<h1>The best page ever</h1> <h1>世上最萌的猫咪</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> <p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
</html> </html>
``` ```
</div> </div>
@ -59,8 +78,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

34
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/delete-html-elements.chinese.md
View File

@ -2,27 +2,33 @@
id: bad87fed1348bd9aedf08833 id: bad87fed1348bd9aedf08833
title: Delete HTML Elements title: Delete HTML Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
localeTitle: 删除HTML元素 forumTopicId: 17559
localeTitle: 删除 HTML 元素
--- ---
## Description ## Description
<section id="description">我们的手机没有太多的垂直空间。让我们删除不必要的元素，以便我们开始构建CatPhotoApp。 </section> <section id='description'>
手机的屏幕空间是有限的。
让我们删除不必要的元素，开始设计我们的CatPhotoApp。
</section>
## Instructions ## Instructions
<section id="instructions">删除你的<code>h1</code>元素，以便我们简化视图。 </section> <section id='instructions'>
任务：删除<code>h1</code>元素以简化视图。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 删除你的<code>h1</code>元素。 - text: '删除<code>h1</code>元素。'
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");' testString: assert(($("h1").length == 0));
- text: 将<code>h2</code>元素留在页面上。 - text: '保留<code>h2</code>元素。'
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");' testString: assert(($("h2").length > 0));
- text: 将<code>p</code>元素留在页面上。 - text: '保留<code>p</code>元素。'
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");' testString: assert(($("p").length > 0));
``` ```
@ -38,8 +44,7 @@ tests:
<h2>CatPhotoApp</h2> <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> </div>
@ -50,8 +55,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

24
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.chinese.md
View File

@ -2,23 +2,29 @@
id: bad87fee1348bd9aedf08833 id: bad87fee1348bd9aedf08833
title: Fill in the Blank with Placeholder Text title: Fill in the Blank with Placeholder Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
localeTitle: 使用占位符文本填充空白 forumTopicId: 18178
localeTitle: 用占位符文本填充空白
--- ---
## Description ## 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 ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 你的<code>p</code>元素应该包含所提供的<code>kitty ipsum text</code>的前几个单词。 - text: '<code>p</code>元素的内容必须包含<code>Monkey code</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>.");' testString: assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()));
``` ```
@ -35,7 +41,6 @@ tests:
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<p>Hello Paragraph</p> <p>Hello Paragraph</p>
``` ```
</div> </div>
@ -46,8 +51,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

37
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.chinese.md
View File

@ -2,29 +2,36 @@
id: bad87fee1348bd9aedf0887a id: bad87fee1348bd9aedf0887a
title: Headline with the h2 Element title: Headline with the h2 Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
localeTitle: 标题与h2元素 forumTopicId: 18196
localeTitle: 用 h2 元素代表副标题
--- ---
## Description ## 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 ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 创建一个<code>h2</code>元素。 - text: '创建一个<code>h2</code>元素。'
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");' testString: assert(($("h2").length > 0));
- text: 确保您的<code>h2</code>元素具有结束标记。 - 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.");' testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
- text: 您的<code>h2</code>元素应该包含文本“CatPhotoApp”。 - text: '<code>h2</code>元素的内容应为：<code>CatPhotoApp</code>。'
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");' testString: assert.isTrue((/CatPhotoApp/gi).test($("h2").text()));
- text: 你的<code>h1</code>元素应该有“Hello World”文本。 - text: '<code>h1</code>元素的内容应为：<code>Hello World</code>。'
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");' testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
``` ```
@ -37,7 +44,6 @@ tests:
```html ```html
<h1>Hello World</h1> <h1>Hello World</h1>
``` ```
</div> </div>
@ -48,8 +54,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

33
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.chinese.md
View File

@ -2,27 +2,34 @@
id: bad87fee1348bd9aedf08801 id: bad87fee1348bd9aedf08801
title: Inform with the Paragraph Element title: Inform with the Paragraph Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
localeTitle: 通知段落元素 forumTopicId: 18202
localeTitle: 用 p 元素代表段落
--- ---
## Description ## Description
<section id="description"> <code>p</code>元素是网站上段落文本的首选元素。 <code>p</code>是“段落”的缩写。你可以创建一个这样的段落元素： <code>&lt;p&gt;I&#39;m ap tag!&lt;/p&gt;</code> </section> <section id='description'>
<code>p</code>是<code>paragraph</code>的缩写，通常用来创建一个段落，就和你写作文一样。
你可以像这样创建一个段落：
<code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 创建一个<code>p</code>元素。 - text: '创建一个<code>p</code>元素。'
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");' testString: assert(($("p").length > 0));
- text: 你的<code>p</code>元素应该有文本“Hello Paragraph”。 - text: '<code>p</code>元素的内容应为：<code>Hello Paragraph</code>。'
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");' testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()));
- text: 确保您的<code>p</code>元素具有结束标记。 - 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.");' testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
``` ```
@ -36,7 +43,6 @@ tests:
```html ```html
<h1>Hello World</h1> <h1>Hello World</h1>
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
``` ```
</div> </div>
@ -47,8 +53,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

64
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.chinese.md
View File

@ -2,35 +2,53 @@
id: bad87fee1348bd9aecf08801 id: bad87fee1348bd9aecf08801
title: Introduction to HTML5 Elements title: Introduction to HTML5 Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
localeTitle: HTML5元素简介 forumTopicId: 301097
localeTitle: HTML5 元素介绍
--- ---
## Description ## 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 ## 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>&#60main&#62</code>，在第二个段落后添加<code>&#60/main&#62</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 使用Kitty Ipsum文本需要2个<code>p</code>元素。 - text: '页面中应该有两个段落。'
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");' testString: assert($("p").length > 1, '页面中应该有两个段落。');
- text: 确保每个<code>p</code>元素都有一个结束标记。 - text: '确保每个段落都有结束标记。'
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.");' testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
- text: 你的<code>p</code>元素应该包含所提供的额外<code>kitty ipsum text</code>的前几个单词。 - text: '新建的段落应该包含关键词：猫咪。'
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>.");' testString: assert.isTrue((/猫咪/).test($("p").text()));
- text: 您的代码应该有一个<code>main</code>元素。 - text: '代码中应该包含<code>main</code>元素。'
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");' testString: assert($('main').length === 1);
- text: <code>main</code>元素应该有两个段落元素作为子元素。 - text: '<code>main</code>元素应有两个 <code>p</code>元素作为它的子元素。'
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");' testString: assert($("main").children("p").length === 2);
- text: 开头<code>main</code>标记应位于第一个段落标记之前。 - 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.");' testString: assert(code.match(/<main>\s*?<p>/g));
- text: 结束<code>main</code>标记应该在第二个结束段标记之后。 - 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.");' testString: assert(code.match(/<\/p>\s*?<\/main>/g));
``` ```
@ -42,10 +60,9 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<h2>CatPhotoApp</h2> <h2>猫咪</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> </div>
@ -56,8 +73,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

40
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.chinese.md
View File

@ -2,27 +2,35 @@
id: bad87fee1348bd9aedf08816 id: bad87fee1348bd9aedf08816
title: Link to External Pages with Anchor Elements title: Link to External Pages with Anchor Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
localeTitle: 链接到具有锚元素的外部页面 forumTopicId: 18226
localeTitle: 用 a 实现网页间的跳转
--- ---
## Description ## Description
<section id="description">您可以使用<code>anchor</code>元素链接到网页外部的内容。 <code>anchor</code>元素需要一个名为<code>href</code>属性的目标Web地址。他们还需要锚文本。这是一个例子： <code>&lt;a href=&quot;https://freecodecamp.org&quot;&gt;this links to freecodecamp.org&lt;/a&gt;</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>&#60;a href="https://freecodecamp.org">传送至 freecodecamp.org&#60;/a&#62;</code>
然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到<code>https://freecodecamp.org</code>。
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 你<code>a</code>元素应该有“猫照片”的<code>anchor text</code> 。 - text: '<code>a</code>元素的 <code>a</code> 文本应为：<code>cat photos</code>。'
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");' testString: assert((/cat photos/gi).test($("a").text()));
- text: '你需要一个链接到<code>http://freecatphotoapp .com</code> <code>a</code>元素' - text: '<code>a</code>元素的<code>href</code>属性应为："<code>http&#58;//freecatphotoapp<wbr>.com</code>"。'
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>");' testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));'
- text: 确保您<code>a</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.");' 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>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</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>
</main> </main>
``` ```
</div> </div>
@ -55,8 +62,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

64
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.chinese.md
View File

@ -2,33 +2,49 @@
id: bad88fee1348bd9aedf08816 id: bad88fee1348bd9aedf08816
title: Link to Internal Sections of a Page with Anchor Elements title: Link to Internal Sections of a Page with Anchor Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
localeTitle: 链接到具有锚元素的页面的内部部分 forumTopicId: 301098
localeTitle: 用 a 实现网页内部跳转
--- ---
## Description ## Description
<section id="description">锚元素还可用于创建内部链接以跳转到网页中的不同部分。要创建内部链接，请将链接的<code>href</code>属性分配给哈希符号<code>#</code>加上要在内部链接到的元素的<code>id</code>属性值，通常在页面的下方。然后，您需要将相同的<code>id</code>属性添加到要链接的元素。 <code>id</code>是唯一描述元素的属性。下面是内部锚链接及其目标元素的示例： <blockquote> &lt;a href=&quot;#contacts-header&quot;&gt;通讯录&lt;/a&gt; <br> ... <br> &lt;h2 id =“contacts-header”&gt;通讯录&lt;/ h2&gt; </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 ## Instructions
<section id="instructions">通过将<code>href</code>属性更改为“#footer”并将文本从“cat photos”更改为“Jump to Bottom”，将外部链接更改为内部链接。从锚标记中删除<code>target=&quot;_blank&quot;</code>属性，因为这会导致链接的文档在新窗口选项卡中打开。然后将值为“footer”的<code>id</code>属性添加到页面底部的<code>&lt;footer&gt;</code>元素。 </section> <section id='instructions'>
通过修改<code>href</code>属性为<code>#footer</code>来更改外部链接为内部链接，同时修改文本<code>cat photos</code>为<code>Jump to Bottom</code>。
移除 target="_blank" 属性，它会使得链接在新标签页中打开。
然后添加一个<code>&lt;footer&gt;</code>元素，它的<code>id</code>值为<code>footer</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的页面上应该只有一个锚标记。 - text: '页面中应该只有一个 <code>a</code> 。'
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");' testString: assert($('a').length == 1);
- text: 页面上应该只有一个<code>footer</code>标记。 - text: '页面中应该只有一个<code>footer</code>元素。'
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");' testString: assert($('footer').length == 1);
- text: '<code>a</code>标签的<code>href</code>属性应设置为“#footer”。' - 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".");' testString: assert($('a').eq(0).attr('href') == "#footer");
- text: <code>a</code>标签不应具有<code>target</code>属性 - 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");' testString: assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true);
- text: <code>a</code>文本应该是“跳到底部”。 - text: '<code>a</code> 的文本应为<code>Jump to Bottom</code>。'
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");' testString: assert($('a').eq(0).text().match(/Jump to Bottom/gi));
- text: <code>footer</code>标记的<code>id</code>属性应设置为“footer”。 - 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".");' testString: assert($('footer').eq(0).attr('id') == "footer");
``` ```
@ -45,29 +61,21 @@ tests:
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a> <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>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</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>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</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> </main>
<footer>Copyright Cat Photo App</footer> <footer>Copyright Cat Photo App</footer>
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

33
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.chinese.md
View File

@ -2,23 +2,30 @@
id: bad87fee1348bd9aedf08817 id: bad87fee1348bd9aedf08817
title: Make Dead Links Using the Hash Symbol title: Make Dead Links Using the Hash Symbol
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
localeTitle: 使用哈希符号制作死链接 forumTopicId: 18230
localeTitle: '用 # 号来创建链接占位符'
--- ---
## Description ## Description
<section id="description">有时你想添加<code>a</code>元素到你的网站，你知道他们会链接之前。当您使用<code>JavaScript</code>更改链接的行为时，这也很方便，我们将在稍后了解。 </section> <section id='description'>
有时你想为网站添加一个 <code>a</code>，但如果你还不确定要将它链接到哪儿，这时可以使用链接占位符。
在后面的课程中我们会学到：如何轻松通过<code>JavaScript</code>更改链接指向的地址。
</section>
## Instructions ## Instructions
<section id="instructions"> <code>href</code>属性的当前值是指向“http://freecatphotoapp.com”的链接。将<code>href</code>属性值替换为<code>#</code> （也称为哈希符号）以创建死链接。例如： <code>href=&quot;#&quot;</code> </section> <section id='instructions'>
<code>href</code>属性的当前值是指向 "http://freecatphotoapp.com"，将<code>href</code>属性的值替换为<code>#</code>，就可以创建固定链接。
例如: <code>href="#"</code>
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您<code>a</code>元素应该是一个死链接， <code>href</code>属性的值设置为“＃”。 - 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 "#".");' testString: assert($("a").attr("href") === "#");
``` ```
@ -32,14 +39,13 @@ tests:
```html ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</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>
</main> </main>
``` ```
</div> </div>
@ -50,8 +56,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

73
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.chinese.md
View File

@ -2,37 +2,58 @@
id: bad87fee1348bd9aede08817 id: bad87fee1348bd9aede08817
title: Nest an Anchor Element within a Paragraph title: Nest an Anchor Element within a Paragraph
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
localeTitle: 在段落中嵌入锚元素 forumTopicId: 18244
localeTitle: 将 a 嵌套在段落中
--- ---
## Description ## Description
<section id="description">您可以在其他文本元素中嵌套链接。 <blockquote> &lt;P&gt; <br>这是一个&lt;a target=&quot;_blank&quot; href=&quot;http://freecodecamp.org&quot;&gt; freecodecamp.org &lt;/a&gt;的链接供您关注。 <br> &lt;/ p&gt; </blockquote>让我们分解示例：普通文本包含在<code>p</code>元素中： <br> <code>&lt;p&gt; Here&#39;s a ... for you to follow. &lt;/p&gt;</code>接下来是<code>anchor</code>元素<code>&lt;a&gt;</code> （需要结束标记<code>&lt;/a&gt;</code> ）： <br> <code>&lt;a&gt; ... &lt;/a&gt;</code> <code>target</code>是一个锚标记属性，指定打开链接的位置，值<code>&quot;_blank&quot;</code>指定在新标签中打开链接<code>href</code>是一个锚标记属性，其中包含URL地址链接： <br> <code>&lt;a href=&quot;http://freecodecamp.org&quot;&gt; ... &lt;/a&gt;</code>在名为<code>anchor text</code>的锚元素中，文本<strong>“链接到freecodecamp.org”</strong>将显示一个单击的链接： <br> <code>&lt;a href=&quot; ... &quot;&gt;link to freecodecamp.org&lt;/a&gt;</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>&#60;p&#62; Here's a ... for you to follow. &#60;/p&#62;</code>
接下来是<code>anchor</code> <code>a</code> <code>&#60;a&#62;</code>（需要结束标记 <code>&#60;/a&#62;</code>）:<br> <code>&#60;a&#62; ... &#60;/a&#62;</code>
<code>target</code>是 <code>a</code> 的一个属性，用来指定链接的打开方式。属性值 <code>"_blank"</code> 的意思是链接会在新标签页打开。
<code>href</code>是 <code>a</code> 的另一个属性：用来指定链接的 URL：<br><code>&#60;a href="https://freecodecamp.org"> ... &#60;/a&#62;</code>
<code>a</code> 元素内的文本：<strong>"link to freecodecamp.org"</strong>，会显示为一个可以点击的链接：<br> <code>&#60;a href=" ... "&#62;link to freecodecamp.org&#60;/a&#62;</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 ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '您需要一个链接到“http://freecatphotoapp.com” <code>a</code>元素。' - 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".");' testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0));'
- text: 你<code>a</code>元素应该有“猫照片”的锚文本 - text: '<code>a</code> 的文本应为：cat photos。'
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");' testString: assert($("a").text().match(/cat\sphotos/gi));
- text: 创建一个新的<code>p</code>周围的元素<code>a</code>元素。 HTML代码中应至少包含3个<code>p</code>标签。 - text: '在 <code>a</code> 的外部创建一个新段落，这样页面就有 3 个段落了。'
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.");' testString: assert($("p") && $("p").length > 2);
- text: 您<code>a</code>元素应嵌套在新的<code>p</code>元素中。 - text: '<code>a</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.");' testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));'
- text: 你的<code>p</code>元素应该有“查看更多”文本（后面有一个空格）。 - 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)), "Your <code>p</code> element should have the text "View more " (with a space after it).");' 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>元素<em>不</em>应该有文字“查看更多”。 - text: '<code>a</code> 不应该包含文本 View more。'
testString: 'assert(!$("a").text().match(/View\smore/gi), "Your <code>a</code> element should <em>not</em> have the text "View more".");' testString: assert(!$("a").text().match(/View\smore/gi));
- text: 确保每个<code>p</code>元素都有一个结束标记。 - text: '确保每个段落有结束标记。'
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.");' testString: assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
- text: 确保每个的<code>a</code>元素具有一个结束标记。 - text: '确保每个段落有结束标记。'
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.");' 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> <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>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</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>
</main> </main>
``` ```
</div> </div>
@ -65,8 +85,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

72
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.chinese.md
View File

@ -2,29 +2,37 @@
id: bad87fee1348bd9aede08835 id: bad87fee1348bd9aede08835
title: Nest Many Elements within a Single div Element title: Nest Many Elements within a Single div Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
localeTitle: 在单个div元素中嵌套许多元素 forumTopicId: 18246
localeTitle: 元素嵌套
--- ---
## Description ## Description
<section id="description"> <code>div</code>元素也称为除法元素，是其他元素的通用容器。 <code>div</code>元素可能是所有人中最常用的HTML元素。就像任何其他非自闭元素一样，您可以使用<code>&lt;div&gt;</code>打开<code>div</code>元素，然后使用<code>&lt;/div&gt;</code>其关闭到另一行。 </section> <section id='description'>
<code>div</code>元素，也叫 Content Division Element（内容划分元素）元素，是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样，你可以用<code>&#60;div&#62;</code>来标记一个<code>div</code>元素的开始，用<code>&#60;/div&#62;</code>来标记一个<code>div</code>元素的结束。
</section>
## Instructions ## 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>&#60p&#62</code>之前插入<code>div</code>开始标记，在<code>&#60/ol&#62</code>之后插入<code>div</code>结束标记，这样，所有的列表都位于<code>div</code>之内。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 将<code>p</code>元素嵌套在<code>div</code>元素中。 - 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.");' testString: assert($("div").children("p").length > 1);
- text: 将您的<code>ul</code>元素<code>div</code>元素中。 - 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.");' testString: assert($("div").children("ul").length > 0);
- text: 将您的<code>ol</code>元素<code>div</code>元素中。 - 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.");' testString: assert($("div").children("ol").length > 0);
- text: 确保你的<code>div</code>元素有一个结束标记。 - 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.");' testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length);
``` ```
@ -38,34 +46,33 @@ tests:
```html ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<form action="/submit-cat-photo"> <form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality"> Energetic</label><br> <label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="cat photo URL" required> <input type="text" placeholder="猫咪图片地址" required>
<button type="submit">Submit</button> <button type="submit">提交</button>
</form> </form>
</main> </main>
``` ```
</div> </div>
@ -76,8 +83,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

30
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.chinese.md
View File

@ -2,23 +2,35 @@
id: bd7123c8c441eddfaeb5bdef id: bd7123c8c441eddfaeb5bdef
title: Say Hello to HTML Elements title: Say Hello to HTML Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
localeTitle: 向HTML Elements说你好 forumTopicId: 18276
localeTitle: 向 HTML 元素问好
--- ---
## Description ## Description
<section id="description">欢迎来到freeCodeCamp的HTML编码挑战。这些将逐步引导您完成Web开发。首先，您将首先使用HTML构建一个简单的网页。您可以在<code>code editor</code>编辑<code>code</code> ，该<code>code editor</code>嵌入到此网页中。您是否在代码编辑器中看到<code>&lt;h1&gt;Hello&lt;/h1&gt;</code> ？这是一个HTML <code>element</code> 。大多数HTML元素都有一个<code>opening tag</code>和一个<code>closing tag</code> 。打开标记如下所示： <code>&lt;h1&gt;</code>结束标记如下所示： <code>&lt;/h1&gt;</code>开始标记和结束标记之间的唯一区别是结束标记的左括号后面的正斜杠。每个挑战都有可以随时单击“运行测试”按钮运行的测试。当您通过所有测试时，系统会提示您提交解决方案并转到下一个编码挑战。 </section> <section id='description'>
欢迎参加 freeCodeCamp 的编程挑战赛，这些挑战将会帮助你逐步掌握 Web 开发。
HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，我们来用 HTML 制作一个简单的网页，你可以直接在网页内置的代码编辑器中编辑代码。
你看到代码编辑器中的<code>&#60;h1&#62;Hello&#60;/h1&#62;</code>了吗? 那就是一个 HTML 元素。
大部分 HTML 元素都有一个<code>开始标记</code>和一个<code>结束标记</code>。
开始标记像这样：<code>&#60;h1&#62;</code>
结束标记像这样：<code>&#60;/h1&#62;</code>
开始标记和结束标记的唯一区别就是结束标记多了一个<code>/</code>。
每个挑战都有测试，任何时候点击<strong>运行测试</strong>按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以进入下一个挑战。反之，测试区会显示你没有通过测试的原因。
</section>
## Instructions ## Instructions
<section id="instructions">要通过此挑战的测试，请将<code>h1</code>元素的文本更改为“Hello World”。 </section> <section id='instructions'>
请把<code>h1</code>元素的内容改为：<code>Hello World</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 你的<code>h1</code>元素应该有“Hello World”文本。 - text: '<code>h1</code>元素的内容应该为：<code>Hello World</code>。'
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");' testString: assert.isTrue((/^hello(\s)+world$/gi).test($('h1').text()));
``` ```
@ -31,7 +43,6 @@ tests:
```html ```html
<h1>Hello</h1> <h1>Hello</h1>
``` ```
</div> </div>
@ -42,8 +53,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

43
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.chinese.md
View File

@ -2,27 +2,36 @@
id: bad87fee1348bd9aedf08820 id: bad87fee1348bd9aedf08820
title: Turn an Image into a Link title: Turn an Image into a Link
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
localeTitle: 将图像转换为链接 forumTopicId: 18327
localeTitle: 给图片添加链接
--- ---
## Description ## Description
<section id="description">您可以通过嵌套在他们做出元素融入链接<code>a</code>元素。鸟巢的内部图像<code>a</code>元素。这是一个例子： <code>&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://bit.ly/fcc-running-cats&quot; alt=&quot;Three kittens running towards the camera.&quot;&gt;&lt;/a&gt;</code>记得使用<code>#</code>为你的<code>a</code>元素的<code>href</code>为了把它变成一个死链接属性。 </section> <section id='description'>
你可以通过把元素嵌套进 <code>a</code> 里使其变成一个链接。
把你的图片嵌套进 <code>a</code>。举例如下：
<code>&#60;a href="#"&#62;&#60;img src="http://cdn.freecodecamp.cn/running-cats.jpg" alt="三只萌萌的小猫"&#62;&#60;/a&#62;</code>
把 <code>a</code> 的<code>href</code>属性设置为<code>#</code>，就可以创建固定链接。
</section>
## Instructions ## Instructions
<section id="instructions">将现有图像元素放在锚元素中。完成此操作后，使用光标将鼠标悬停在图像上。光标的正常指针应该成为链接点击指针。这张照片现在是一个链接。 </section> <section id='instructions'>
把现存的图片嵌套进 <code>a</code> 中。
当鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 巢现有<code>img</code>一个内元件<code>a</code>元件。 - text: '把现存的图片嵌套进 <code>a</code> 中。'
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");' testString: assert($("a").children("img").length > 0);
- text: '您<code>a</code>元素应该是<code>href</code>属性设置为<code>#</code>的死链接。' - 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>.");' testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href")));
- text: 确保每个的<code>a</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.");' 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 ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</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>
</main> </main>
``` ```
</div> </div>
@ -54,8 +62,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

37
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/uncomment-html.chinese.md
View File

@ -2,29 +2,36 @@
id: bad87fee1348bd9aedf08802 id: bad87fee1348bd9aedf08802
title: Uncomment HTML title: Uncomment HTML
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
localeTitle: 取消注释HTML forumTopicId: 18329
localeTitle: 去除 HTML 的注释
--- ---
## Description ## Description
<section id="description">注释是一种方法，您可以在代码中为其他开发人员留下注释，而不会影响显示给最终用户的结果输出。注释也是使代码处于非活动状态而不必完全删除它的便捷方式。 HTML中的注释以<code>&lt;!--</code>开头，以<code>--&gt;</code>结尾</section> <section id='description'>
注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
注释的另一个用途就是在不删除代码的前提下，让代码不起作用。
在 HTML 中，注释的开始标记是<code>&#60;!--</code>，结束标记是<code>--&#62;</code>。
</section>
## Instructions ## 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 ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 通过取消注释，使您的<code>h1</code>元素在您的页面上可见。 - text: '确保网页中能看到<code>h1</code>元素。'
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");' testString: assert($("h1").length > 0);
- text: 通过取消注释，使您的<code>h2</code>元素在您的页面上可见。 - text: '确保网页中能看到<code>h2</code>元素。'
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");' testString: assert($("h2").length > 0);
- text: 通过取消注释，可以在页面上显示您的<code>p</code>元素。 - text: '确保网页中能看到<code>p</code>元素。'
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");' testString: assert($("p").length > 0);
- text: 请务必删除所有尾随注释标记，即<code>--&gt;</code> 。 - text: '确保删除了注释的结束标记<code>--&#62;</code>。'
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</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> <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> </div>
@ -54,8 +60,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

48
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.chinese.md
View File

@ -2,23 +2,29 @@
id: bad87fee1348bd9aedc08830 id: bad87fee1348bd9aedc08830
title: Use HTML5 to Require a Field title: Use HTML5 to Require a Field
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
localeTitle: 使用HTML5需要字段 forumTopicId: 18360
localeTitle: 给表单添加一个必填字段
--- ---
## Description ## Description
<section id="description">您可以订定必填项，限制您的用户在完成必填项之前无法提交表单。如果您要订定必填项段，只需在<code>input</code>元素中添加<code>required</code>的属性，如下所示： <code>&lt;input type=&quot;text&quot; required&gt;</code> </section> <section id='description'>
当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。
如果你想把文本输入框设置为必填项，在<code>input</code>元素中加上 required 属性就可以了，例如：<code>&#60;input type="text" required&#62;</code>
</section>
## Instructions ## Instructions
<section id="instructions">利用<code>required</code> 使您的<code>input</code>成为必填项 ，限制您的用户在沒填写必填项的情况下无法提交表单。请尝试在沒有在完成必填项前提交表单，看看HTML5如何通知您少填了必填项。 </section> <section id='instructions'>
给<code>input</code>元素加上<code>required</code>属性，这样用户就必须先在输入框里填入内容，然后才可以提交表单。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的<code>input</code>元素应具有<code>required</code>属性。 - 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.");' testString: assert($("input").prop("required"));
``` ```
@ -32,28 +38,27 @@ tests:
```html ```html
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <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> <ul>
<li>cat nip</li> <li>猫薄荷</li>
<li>laser pointers</li> <li>激光笔</li>
<li>lasagna</li> <li>千层饼</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>猫咪最讨厌的三件东西：</p>
<ol> <ol>
<li>flea treatment</li> <li>跳蚤</li>
<li>thunder</li> <li>打雷</li>
<li>other cats</li> <li>同类</li>
</ol> </ol>
<form action="/submit-cat-photo"> <form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL"> <input type="text" placeholder="猫咪图片地址">
<button type="submit">Submit</button> <button type="submit">提交</button>
</form> </form>
</main> </main>
``` ```
</div> </div>
@ -64,8 +69,5 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
// solution required
```
</section> </section>

102
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.chinese.md Normal file
View File

@ -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>