From 1fe0ba6c0d80981bd789a7fc97b4644a694cb1ce Mon Sep 17 00:00:00 2001 From: S1ngS1ng Date: Fri, 3 Aug 2018 21:02:23 -0700 Subject: [PATCH] Style update for PR #4, #9 and #11 --- .../basic-html-and-html5.json | 504 ++++++++-------- .../intermediate-algorithm-scripting.json | 558 +++++++++--------- .../information-security-with-helmetjs.json | 22 +- 3 files changed, 542 insertions(+), 542 deletions(-) diff --git a/01-responsive-web-design/basic-html-and-html5.json b/01-responsive-web-design/basic-html-and-html5.json index 3df7a2a..b092219 100644 --- a/01-responsive-web-design/basic-html-and-html5.json +++ b/01-responsive-web-design/basic-html-and-html5.json @@ -10,19 +10,19 @@ "description": [ "欢迎来到 freeCodeCamp 的 HTML 编码挑战，这些挑战将会帮助你逐步掌握 Web 开发。", "HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，使用 HTML 来制作一个简单的网页，你可以直接在本网页内置的代码编辑器中编辑代码。", - "你看到代码编辑器中的 <h1>Hello</h1> 了吗? 那就是一个 HTML 标签。", - "大部分 HTML 标签都有一个 开始标记 和一个 结束标记。", + "你看到代码编辑器中的<h1>Hello</h1>了吗? 那就是一个 HTML 标签。", + "大部分 HTML 标签都有一个开始标记和一个结束标记。", "开始标记像这样：<h1>", "结束标记像这样：</h1>", - "开始标记和结束标记的唯一区别就是结束标记多了一个 /。", + "开始标记和结束标记的唯一区别就是结束标记多了一个/。", "每个挑战都有测试，任何时候点击运行测试按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以提交你的代码并顺利进入下一个挑战。", "
", - "请把 h1 标签的内容改为：Hello World。" + "请把h1标签的内容改为：Hello World。" ], "tests": [ { - "text": "h1 标签的内容应该为：Hello World。", - "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'h1 标签的内容应该为：Hello World。');" + "text": "h1标签的内容应该为：Hello World。", + "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'h1标签的内容应该为：Hello World。');" } ], "challengeType": 0, @@ -44,26 +44,26 @@ "title": "Headline with the h2 Element", "description": [ "在接下来的几节课里，我们将会由浅入深地制作一个关于猫的图片应用。", - "这节课将会引入 h2 标签。", - "这些标签用来告诉浏览器，网站的结构长什么样子。h1 标签通常被用作主标题，h2 标签通常被用作副标题，还有 h3、h4、h5、h6 标签，它们分别用作不同级别的标题。", + "这节课将会引入h2标签。", + "这些标签用来告诉浏览器，网站的结构长什么样子。h1标签通常被用作主标题，h2标签通常被用作副标题，还有h3、h4、h5、h6标签，它们分别用作不同级别的标题。", "
", - "在 h1 标签下面创建一个 h2 标签，标签内容为：CatPhotoApp。" + "在h1标签下面创建一个h2标签，标签内容为：CatPhotoApp。" ], "tests": [ { - "text": "创建一个 h2 标签。", - "testString": "assert(($(\"h2\").length > 0), '创建一个 h2 标签。');" + "text": "创建一个h2标签。", + "testString": "assert(($(\"h2\").length > 0), '创建一个h2标签。');" }, { - "text": "h2 标签应该有结束标记。", - "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, 'h2 标签应该有结束标记。');" + "text": "h2标签应该有结束标记。", + "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, 'h2标签应该有结束标记。');" }, { - "text": "h2 标签的内容应该为：CatPhotoApp。", - "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'h2 标签的内容应该为：CatPhotoApp。');" + "text": "h2标签的内容应该为：CatPhotoApp。", + "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'h2标签的内容应该为：CatPhotoApp。');" }, { - "text": "h1 标签的内容应该为：Hello World。", + "text": "h1标签的内容应该为：Hello World。", "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), '主标题的内容应该为：Hello World。');" } ], @@ -85,24 +85,24 @@ "id": "bad87fee1348bd9aedf08801", "title": "Inform with the Paragraph Element", "description": [ - "p 是 paragraph 的缩写，通常被用来创建一个段落，就和你写作文一样。", + "p是paragraph的缩写，通常被用来创建一个段落，就和你写作文一样。", "你可以像这样创建一个段落：", "<p>I'm a p tag!</p>", "
", - "在 h2 标签下面新增一个 p 标签，标签内容是：Hello Paragraph。" + "在h2标签下面新增一个p标签，标签内容是：Hello Paragraph。" ], "tests": [ { - "text": "创建一个 p 标签。", - "testString": "assert(($(\"p\").length > 0), '创建一个 p 标签。');" + "text": "创建一个p标签。", + "testString": "assert(($(\"p\").length > 0), '创建一个p标签。');" }, { - "text": "p 标签的内容应该为：Hello Paragraph。", - "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'p 标签的内容应该为：Hello Paragraph。');" + "text": "p标签的内容应该为：Hello Paragraph。", + "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'p标签的内容应该为：Hello Paragraph。');" }, { - "text": "p 标签应该有结束标记。", - "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p 标签应该有结束标记。');" + "text": "p标签应该有结束标记。", + "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p标签应该有结束标记。');" } ], "challengeType": 0, @@ -125,15 +125,15 @@ "title": "Fill in the Blank with Placeholder Text", "description": [ "Web 开发者通常用 lorem ipsum text 来做占位符，占位符就是占着位置的一些文字，没有实际意义。", - "为什么叫 lorem ipsum text 呢?是因为 lorem ipsum 是古罗马西塞罗谚语的前两个单词。", - "从公元16世纪开始 lorem ipsum text 就被当做占位符了，这种传统延续到了互联网时代。于此同时，孙悟空也在五指山下被压了500年，然后就进化成程序猿了，是不是很巧合。^_^", + "为什么叫lorem ipsum text呢?是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。", + "从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。与此同时，孙悟空也在五指山下被压了 500 年，然后就进化成程序猿了，是不是很巧合。^_^", "

", - "把 p 标签的内容更换为：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。" + "把p标签的内容更换为：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。" ], "tests": [ { - "text": "p 标签的内容必须包含 Monkey code。", - "testString": "assert.isTrue((/Monkey(\\s)+code/gi).test($(\"p\").text()), 'p 标签的内容必须包含 Monkey code。');" + "text": "p标签的内容必须包含Monkey code。", + "testString": "assert.isTrue((/Monkey(\\s)+code/gi).test($(\"p\").text()), 'p标签的内容必须包含Monkey code。');" } ], "challengeType": 0, @@ -160,26 +160,26 @@ "description": [ "注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。", "注释也可以用来在不删除代码的前提下，让代码不起作用。", - "在 HTML 中，注释的开始标记是 <!--，结束标记是 -->。", + "在 HTML 中，注释的开始标记是<!--，结束标记是-->。", "
", - "现在我们反其道而行之，干掉 h1 标签、h2 标签、p 标签的注释。" + "现在我们反其道而行之，干掉h1标签、h2标签、p标签的注释。" ], "tests": [ { - "text": "确保网页中能看到 h1 标签。", - "testString": "assert($(\"h1\").length > 0, '确保网页中能看到 h1 标签。');" + "text": "确保网页中能看到h1标签。", + "testString": "assert($(\"h1\").length > 0, '确保网页中能看到h1标签。');" }, { - "text": "确保网页中能看到 h2 标签。", - "testString": "assert($(\"h2\").length > 0, '确保网页中能看到 h2 标签。');" + "text": "确保网页中能看到h2标签。", + "testString": "assert($(\"h2\").length > 0, '确保网页中能看到h2标签。');" }, { - "text": "确保网页中能看到 p 标签。", - "testString": "assert($(\"p\").length > 0, '确保网页中能看到 p 标签。');" + "text": "确保网页中能看到p标签。", + "testString": "assert($(\"p\").length > 0, '确保网页中能看到p标签。');" }, { - "text": "确保删除了注释的结束标记 -->", - "testString": "assert(!/[^fc]-->/gi.test(code.replace(/ */gi.test(code.replace(/ */g).length > 1, '确保每一个注释都以-->结尾。');" }, { - "text": "不要更改 h1 标签、h2 标签、p 标签的顺序。", - "testString": "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , '不要更改 h1 标签、h2 标签、p 标签的顺序。');" + "text": "不要更改h1标签、h2标签、p标签的顺序。", + "testString": "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , '不要更改h1标签、h2标签、p标签的顺序。');" } ], "challengeType": 0, @@ -260,20 +260,20 @@ "手机的屏幕空间是有限的。", "让我们删除不必要的标签，开始设计我们的 CatPhotoApp。", "

", - "任务：删除 h1 标签以简化视图。" + "任务：删除h1标签以简化视图。" ], "tests": [ { - "text": "删除 h1 标签。", - "testString": "assert(($(\"h1\").length == 0), '删除 h1 标签。');" + "text": "删除h1标签。", + "testString": "assert(($(\"h1\").length == 0), '删除h1标签。');" }, { - "text": "保留 h2 标签。", - "testString": "assert(($(\"h2\").length > 0), '保留 h2 标签。');" + "text": "保留h2标签。", + "testString": "assert(($(\"h2\").length > 0), '保留h2标签。');" }, { - "text": "保留 p 标签。", - "testString": "assert(($(\"p\").length > 0), '保留 p 标签。');" + "text": "保留p标签。", + "testString": "assert(($(\"p\").length > 0), '保留p标签。');" } ], "challengeType": 0, @@ -298,13 +298,13 @@ "id": "bad87fee1348bd9aecf08801", "title": "Introduction to HTML5 Elements", "description": [ - "HTML5 引入了很多更具描述性的 HTML 标签，例如：header、footer、nav、video、article、section 等等。", + "HTML5 引入了很多更具描述性的 HTML 标签，例如：header、footer、nav、video、article、section等等。", "这些标签让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。", - "main 标签让搜索引擎和开发者瞬间就能找到网页的主要内容。", + "main标签让搜索引擎和开发者瞬间就能找到网页的主要内容。", "注意
在后面的应用无障碍课程中我们会接触到更多新的 HTML5 标签，以及明白它们的用处。", "
", "在现有的段落下创建一个新的段落，段落内容为：养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。", - "在第一个段落前添加
，在第二个段落后添加
。" + "在第一个段落前添加
，在第二个段落后添加
。" ], "tests": [ { @@ -320,20 +320,20 @@ "testString": "assert.isTrue((/养猫/).test($(\"p\").text()), '新建的段落应该包含关键词：养猫。');" }, { - "text": "代码中应该包含 main 标签。", - "testString": "assert($('main').length === 1, '代码中应该包含 main 标签。');" + "text": "代码中应该包含main标签。", + "testString": "assert($('main').length === 1, '代码中应该包含main标签。');" }, { - "text": "main 标签应有两个 p 标签作为它的子标签。", - "testString": "assert($(\"main\").children(\"p\").length === 2, 'main 标签应有两个 p 标签作为它的子标签。');" + "text": "main标签应有两个p标签作为它的子标签。", + "testString": "assert($(\"main\").children(\"p\").length === 2, 'main标签应有两个p标签作为它的子标签。');" }, { - "text": "开始标记
应位于第一个段落之前。", - "testString": "assert(code.match(/
\\s*?

/g), '开始标记

应位于第一个段落之前。');" + "text": "开始标记
应位于第一个段落之前。", + "testString": "assert(code.match(/
\\s*?

/g), '开始标记

应位于第一个段落之前。');" }, { - "text": "结束标记
应位于第二段落之后。", - "testString": "assert(code.match(/<\\/p>\\s*?<\\/main>/g), '结束标记
应位于第二个段落之后。');" + "text": "结束标记
应位于第二段落之后。", + "testString": "assert(code.match(/<\\/p>\\s*?<\\/main>/g), '结束标记
应位于第二个段落之后。');" } ], "challengeType": 0, @@ -356,21 +356,21 @@ "id": "bad87fee1348bd9aedf08812", "title": "Add Images to Your Website", "description": [ - "用 img 标签来为你的网站添加图片，其中 src 属性指向一个图片的地址。", + "用img标签来为你的网站添加图片，其中src属性指向一个图片的地址。", "举例如下：", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", - "注意：img 标签是自关闭标签，不需要结束标记。", - "所有的 img 标签必须有 alt 属性，alt 属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。", - "注意：如果图片是纯装饰性的，用一个空的 alt 是最佳实践。", + "注意：img标签是自关闭标签，不需要结束标记。", + "所有的img标签必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。", + "注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。", "理想情况下，alt属性不应该包含特殊字符，除非需要。", - "让我们给上面例子的 img 添加 alt 属性。", + "让我们给上面例子的img添加alt属性。", "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"作者站在沙滩上竖起两个大拇指\">", "
", "让我们给网站添加图片：", - "在 h2 标签前，插入一个 img 标签", - "现在设置 src 属性指向这个地址：", + "在h2标签前，插入一个img标签", + "现在设置src属性指向这个地址：", "https://bit.ly/fcc-relaxing-cat", - "最后不要忘记给图片添加一个 alt 文本。" + "最后不要忘记给图片添加一个alt文本。" ], "tests": [ { @@ -382,8 +382,8 @@ "testString": "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), '这张图片应该是一只小猫。');" }, { - "text": "图片必须有 alt 属性。", - "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), '图片必须有 alt 属性。');" + "text": "图片必须有alt属性。", + "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), '图片必须有alt属性。');" } ], "challengeType": 0, @@ -412,24 +412,24 @@ "title": "Link to External Pages with Anchor Elements", "description": [ "你可以用锚点（Anchor，简写 a）来实现网页间的跳转。", - "锚点需要一个 href 属性指向目的地，它还需要有锚点文本，例如：", + "锚点需要一个href属性指向目的地，它还需要有锚点文本，例如：", "<a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a>", "然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到 https://www.freecodecamp.org。", "
", - "创建一个 a 标签，href 属性为 http://freecatphotoapp.com ，锚点文本为：cat photos。" + "创建一个a标签，href属性为http://freecatphotoapp.com，锚点文本为：cat photos。" ], "tests": [ { - "text": "a 标签的锚点文本应为：cat photos。", - "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'a 标签的锚点文本应为：cat photos。');" + "text": "a标签的锚点文本应为：cat photos。", + "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'a标签的锚点文本应为：cat photos。');" }, { - "text": "a 标签的 href 属性应为：\"http://freecatphotoapp.com\"。", - "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'a 标签的 href 属性应为：\"http://freecatphotoapp.com\"。');" + "text": "a标签的href属性应为：\"http://freecatphotoapp.com\"。", + "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'a标签的href属性应为：\"http://freecatphotoapp.com\"。');" }, { - "text": "确保 a 标签有结束标记。", - "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a 标签有结束标记。');" + "text": "确保a标签有结束标记。", + "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a标签有结束标记。');" } ], "challengeType": 0, @@ -460,14 +460,14 @@ "title": "Link to Internal Sections of a Page with Anchor Elements", "description": [ "锚点同样也可以用来在网页内不同区域的跳转。", - "用一个井号 # 加上你想跳转到的区域对应的 id 属性值，通过把它作为锚点的 href 属性值来创建一个内部链接。 id 是用来描述网页元素的一个属性，它的值在整个页面中唯一。", + "用一个井号#加上你想跳转到的区域对应的id属性值，通过把它作为锚点的href属性值来创建一个内部链接。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。", "下面是用来创建内部锚点链接的例子：", "
<a href=\"#contacts-header\">Contacts</a>
...
<h2 id=\"contacts-header\">Contacts</h2>
", - "当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。", + "当用户点击了Contacts链接，页面就会跳转到网页的 Contacts 区域。", "
", - "通过修改 href 属性为 #footer 来更改外部链接为内部链接，同时修改文本 cat photos 为 Jump to Bottom。", - "移除 target=\"_blank\" 属性避免点击链接会打开新的标签页。", - "然后添加一个 <footer> 标签，它的 id 值为 footer。" + "通过修改href属性为#footer来更改外部链接为内部链接，同时修改文本cat photos为Jump to Bottom。", + "移除target=\"_blank\"属性避免点击链接会打开新的标签页。", + "然后添加一个<footer>标签，它的id值为footer。" ], "tests": [ { @@ -475,24 +475,24 @@ "testString": "assert($('a').length == 1, '页面中应该只有一个锚点。');" }, { - "text": "页面中应该只有一个 footer 标签。", - "testString": "assert($('footer').length == 1, '页面中应该只有一个 footer 标签。');" + "text": "页面中应该只有一个footer标签。", + "testString": "assert($('footer').length == 1, '页面中应该只有一个footer标签。');" }, { - "text": "a 标签的 href 属性应为：\"#footer\"。", - "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'a 标签的 href 属性应为：\"#footer\"。');" + "text": "a标签的href属性应为：\"#footer\"。", + "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'a标签的href属性应为：\"#footer\"。');" }, { - "text": "a 标签不应该有 target 属性。", - "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'a 标签不应该有 target 属性。');" + "text": "a标签不应该有target属性。", + "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'a标签不应该有target属性。');" }, { - "text": "a 标签的文本应为 Jump to Bottom。", - "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'a 标签的文本应为 Jump to Bottom。');" + "text": "a标签的文本应为Jump to Bottom。", + "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'a标签的文本应为Jump to Bottom。');" }, { - "text": "footer 标签的 id 属性应为 \"footer\"。", - "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'footer 标签的 id 属性应为 \"footer\"。');" + "text": "footer标签的id属性应为 \"footer\"。", + "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'footer标签的id属性应为 \"footer\"。');" } ], "challengeType": 0, @@ -509,8 +509,8 @@ " ", " \"A", " ", - "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", - "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", " ", "
", " ", @@ -528,14 +528,14 @@ "你可以在其他文本标签内嵌套链接。You can nest links within other text elements.", "
<p>
Here's a <a target=\"_blank\" href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.
</p>
", "让我们来分解这个例子：", - "通常，文本是被包裹在 p 标签内：
<p> Here's a ... for you to follow. </p>", - "接下来是 anchor 标签 <a>（需要结束标记 </a>）:
<a> ... </a>", - "target 是锚点标签的一个属性，它指定了会以什么方式来打开链接，属性值 \"_blank\" 的意思是链接会在新标签页打开。", - "href 是锚点标签的另一个属性：它指定了链接的 URL 地址：
<a href=\"http://freecodecamp.org\"> ... </a>", - "锚点标签内的文本：\"link to freecodecamp.org\"，会显示为一个可以点击的链接：
<a href=\" ... \">link to freecodecamp.org</a>", + "通常，文本是被包裹在p标签内：
<p> Here's a ... for you to follow. </p>", + "接下来是anchor标签<a>（需要结束标记</a>）:
<a> ... </a>", + "target是锚点标签的一个属性，它指定了会以什么方式来打开链接，属性值\"_blank\"的意思是链接会在新标签页打开。", + "href是锚点标签的另一个属性：它指定了链接的 URL 地址：
<a href=\"http://freecodecamp.org\"> ... </a>", + "锚点标签内的文本：\"link to freecodecamp.org\"，会显示为一个可以点击的链接：
<a href=\" ... \">link to freecodecamp.org</a>", "例子的最后输出将会是这样：

Here's a link to freecodecamp.org for you to follow.

", "
", - "现在用一个新的 p 标签来包裹现存的 a 标签（必须放在 main 标签之后才行)。新段落的文本为：View more cat photos，其中 \"cat photos\" 是一个链接，其他是纯文本。" + "现在用一个新的p标签来包裹现存的a标签（必须放在main标签之后才行)。新段落的文本为：View more cat photos，其中 \"cat photos\" 是一个链接，其他是纯文本。" ], "tests": [ { @@ -598,16 +598,16 @@ "id": "bad87fee1348bd9aedf08817", "title": "Make Dead Links Using the Hash Symbol", "description": [ - "Sometimes you want to add a elements to your website before you know where they will link.", - "This is also handy when you're changing the behavior of a link using JavaScript, which we'll learn about later.", + "Sometimes you want to addaelements to your website before you know where they will link.", + "This is also handy when you're changing the behavior of a link usingJavaScript, which we'll learn about later.", "
", - "The current value of the href attribute is a link that points to \"http://freecatphotoapp.com\". Replace the href attribute value with a #, also known as a hash symbol, to create a dead link.", - "For example: href=\"#\"" + "The current value of thehrefattribute is a link that points to \"http://freecatphotoapp.com\". Replace thehrefattribute value with a#, also known as a hash symbol, to create a dead link.", + "For example:href=\"#\"" ], "tests": [ { - "text": "Your a element should be a dead link with the value of the href attribute set to \"#\".", - "testString": "assert($(\"a\").attr(\"href\") === \"#\", 'Your a element should be a dead link with the value of the href attribute set to \"#\".');" + "text": "Youraelement should be a dead link with the value of thehrefattribute set to \"#\".", + "testString": "assert($(\"a\").attr(\"href\") === \"#\", 'Youraelement should be a dead link with the value of thehrefattribute set to \"#\".');" } ], "challengeType": 0, @@ -636,26 +636,26 @@ "id": "bad87fee1348bd9aedf08820", "title": "Turn an Image into a Link", "description": [ - "You can make elements into links by nesting them within an a element.", - "Nest your image within an a element. Here's an example:", + "You can make elements into links by nesting them within anaelement.", + "Nest your image within anaelement. Here's an example:", "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"></a>", - "Remember to use # as your a element's href property in order to turn it into a dead link.", + "Remember to use#as youraelement'shrefproperty in order to turn it into a dead link.", "
", "Place the existing image element within an anchor element.", "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." ], "tests": [ { - "text": "Nest the existing img element within an a element.", - "testString": "assert($(\"a\").children(\"img\").length > 0, 'Nest the existing img element within an a element.');" + "text": "Nest the existingimgelement within anaelement.", + "testString": "assert($(\"a\").children(\"img\").length > 0, 'Nest the existingimgelement within anaelement.');" }, { - "text": "Your a element should be a dead link with a href attribute set to #.", - "testString": "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your a element should be a dead link with a href attribute set to #.');" + "text": "Youraelement should be a dead link with ahrefattribute set to#.", + "testString": "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Youraelement should be a dead link with ahrefattribute set to#.');" }, { - "text": "Make sure each of your a elements has a closing tag.", - "testString": "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" + "text": "Make sure each of youraelements has a closing tag.", + "testString": "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/aelements has a closing tag.');" } ], "challengeType": 0, @@ -684,30 +684,30 @@ "id": "bad87fee1348bd9aedf08827", "title": "Create a Bulleted Unordered List", "description": [ - "HTML has a special element for creating unordered lists, or bullet point style lists.", - "Unordered lists start with an opening <ul> element, followed by any number of <li> elements. Finally, unordered lists close with a </ul>", + "HTML has a special element for creatingunordered lists, or bullet point style lists.", + "Unordered lists start with an opening<ul>element, followed by any number of<li>elements. Finally, unordered lists close with a</ul>", "For example: ", "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", "would create a bullet point style list of \"milk\" and \"cheese\".", "
", - "Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page." + "Remove the last twopelements and create an unordered list of three things that cats love at the bottom of the page." ], "tests": [ { - "text": "Create a ul element.", - "testString": "assert($(\"ul\").length > 0, 'Create a ul element.');" + "text": "Create aulelement.", + "testString": "assert($(\"ul\").length > 0, 'Create aulelement.');" }, { - "text": "You should have three li elements within your ul element.", - "testString": "assert($(\"ul li\").length > 2, 'You should have three li elements within your ul element.');" + "text": "You should have threelielements within yourulelement.", + "testString": "assert($(\"ul li\").length > 2, 'You should have threelielements within yourulelement.');" }, { - "text": "Make sure your ul element has a closing tag.", - "testString": "assert(code.match(/<\\/ul>/gi) && code.match(/