/g), 'The opening /g), '开始标记 main tag should come before the first paragraph tag.');"
+ "text": "开始标记 应位于第一个段落之前。",
+ "testString": "assert(code.match(/ 应位于第一个段落之前。');"
},
{
- "text": "The closing main tag should come after the second closing paragraph tag.",
- "testString": "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'The closing main tag should come after the second closing paragraph tag.');"
+ "text": "结束标记
style declaration should end with a ; .');"
- }
+ "text": "h2元素的style 属性的值应该以;结束。",
+ "testString": "assert(code.match(/h2 元素 style 属性的值应该以 ; 结束。');"
+
],
"challengeType": 0,
"files": {
@@ -75,37 +75,33 @@
"id": "bad87fee1348bd9aedf08805",
"title": "Use CSS Selectors to Style Elements",
"description": [
- "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.",
- "When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were styling that individual h2 element with inline CSS, which stands for Cascading Style Sheets.",
- "That's one way to specify the style of an element, but there's a better way to apply CSS.",
- "At the top of your code, create a style block like this:",
+ "在CSS中，有上百种属性可以让你改变页面样式。",
+ "通过输入 <h2 style=\"color: red\">CatPhotoApp</h2> 的行内样式，修改单一的h2元素的颜色的方式，配置 层叠样式表（CSS） 的方式之一。",
+ "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置层叠样式表（CSS。",
+ "在代码的顶部，创建一个 style 声明区域，如下方所示：",
"<style>", - "Inside that style block, you can create a
</style>
CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, you would add a style rule that looks like this:",
+ "在style样式声明区域内，可以创建一个CSS 选择器的规则来应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：",
"<style>", - "Note that it's important to have both opening and closing curly braces (
h2 {color: red;}
</style>
{ and }) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.",
+ "注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确定你定义的样式规则位于花括号之间。以及，记得在每个元素样式规则的末尾添加分号。",
"", - "Delete your
h2 element's style attribute, and instead create a CSS style block. Add the necessary CSS to turn all h2 elements blue."
+ "删除h2元素的行内样式，创建style样式声明区域。添加CSS样式规则使h2元素变为蓝色。"
],
"tests": [
{
- "text": "Remove the style attribute from your h2 element.",
- "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2 element.');"
- },
- {
- "text": "Create a style element.",
- "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a style element.');"
+ "text": "移除h2元素的行内样式。",
+ "testString": "assert(!$(\"h2\").attr(\"style\"), '移除h2元素的行内样式。');"
},
{
- "text": "Your h2 element should be blue.",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h2 element should be blue.');"
+ "text": "创建一个style样式声明区域。",
+ "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个style样式声明区域。');"
},
{
- "text": "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.",
- "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');"
+ "text": "h2元素颜色应为蓝色。",
+ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2元素颜色应为蓝色。');"
},
{
- "text": "Make sure all your style elements are valid and have a closing tag.",
- "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/style elements are valid and have a closing tag.');"
+ "text": "确保你的样式声明里的h2规则需以花括号所包括，和分号结束。",
+ "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的h2规则需以花括号所包括，和分号结束。');"
}
],
"challengeType": 0,
@@ -156,33 +152,33 @@
"id": "bad87fee1348bd9aecf08806",
"title": "Use a CSS Class to Style an Element",
"description": [
- "Classes are reusable styles that can be added to HTML elements.",
- "Here's an example CSS class declaration:",
+ "CSS 的class具有可重用性，可应用于各种 HTML 元素。",
+ "一个 CSSclass声明示例，如下所示：",
"<style>", - "You can see that we've created a CSS class called
.blue-text {
color: blue;
}
</style>
blue-text within the <style> tag.",
- "You can apply a class to an HTML element like this:",
+ "可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。",
+ "你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
- "Note that in your CSS style element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.",
+ "注意你的style样式区域声明里，class需以句号开头。而在你的HTML元素里的class属性的类名，不需要包含句号",
"", - "Inside your
style element, change the h2 selector to .red-text and update the color's value from blue to red.",
- "Give your h2 element the class attribute with a value of 'red-text'."
+ "在style样式声明里，h2元素选择器改为.red-text的 CSS class 择器，同时将颜色blue变为red。",
+ "在你的h2元素里，添加一个class属性，且值为'red-text'。"
],
"tests": [
{
- "text": "Your h2 element should be red.",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');"
+ "text": "你的h2元素应该为红色。",
+ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2元素应该为红色。');"
},
{
- "text": "Your h2 element should have the class red-text.",
- "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.');"
+ "text": "你的h2元素应含有red-text class 选择器。",
+ "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2元素应含有red-text class 选择器。');"
},
{
- "text": "Your stylesheet should declare a red-text class and have its color set to red.",
- "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a red-text class and have its color set to red.');"
+ "text": "你的style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。",
+ "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。');"
},
{
- "text": "Do not use inline style declarations like style=\"color: red\" in your h2 element.",
- "testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like style=\"color: red\" in your h2 element.');"
+ "text": "不要在h2元素里使用style=\"color: red\"的行内样式 。",
+ "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在h2元素里使用style=\"color: red\"的行内样式 。');"
}
],
"challengeType": 0,
@@ -239,28 +235,28 @@
"id": "bad87fee1348bd9aefe08806",
"title": "Style Multiple Elements with a CSS Class",
"description": [
- "Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text class to the first p element."
+ "通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将red-text class 选择器应用在第一个p元素上。"
],
"tests": [
{
- "text": "Your h2 element should be red.",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');"
+ "text": "你的h2元素应该是红色的。",
+ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2元素应该是红色的。');"
},
{
- "text": "Your h2 element should have the class red-text.",
- "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.');"
+ "text": "你的h2元素应该含有名为red-text 的 class 选择器。",
+ "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2元素应该含有名为red-text 的 class 选择器。');"
},
{
- "text": "Your first p element should be red.",
- "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first p element should be red.');"
+ "text": "你的第一个p元素应该为红色。",
+ "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个p元素应该为红色。');"
},
{
- "text": "Your second and third p elements should not be red.",
- "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third p elements should not be red.');"
+ "text": "你的第二和第三个p元素不应该为红色。",
+ "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个p元素不应该为红色。');"
},
{
- "text": "Your first p element should have the class red-text.",
- "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first p element should have the class red-text.');"
+ "text": "你的第一个p元素应该包含名为red-text的 class 选择器。",
+ "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个p 元素应该包含名为red-text的 class 选择器。');"
}
],
"challengeType": 0,
@@ -317,15 +313,15 @@
"id": "bad87fee1348bd9aedf08806",
"title": "Change the Font Size of an Element",
"description": [
- "Font size is controlled by the font-size CSS property, like this:",
+ "字体大小由font-size的 CSS 属性控制，如下所示：",
"h1 {", "
font-size: 30px;
}
", - "Inside the same
<style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px)."
+ "在包含red-text class 的<style>声明区域的里，创建一个p元素样式规则，并设置font-size为 16 像素(16px)。"
],
"tests": [
{
- "text": "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.",
- "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.');"
+ "text": "在style样式声明区域里，p元素的font-size的值应为16px，浏览器和文本缩放应设置为 100％。",
+ "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), '在style样式声明区域里，p元素的font-size的值应为16px，浏览器和文本缩放应设置为 100％。');"
}
],
"challengeType": 0,
@@ -382,16 +378,16 @@
"id": "bad87fee1348bd9aede08807",
"title": "Set the Font Family of an Element",
"description": [
- "You can set which font an element should use, by using the font-family property.",
- "For example, if you wanted to set your h2 element's font to sans-serif, you would use the following CSS:",
+ "通过font-family属性，可以设置元素里面的字体样式。",
+ "例如，如果你想设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：",
"h2 {", "
font-family: sans-serif;
}
", - "Make all of your
p elements use the monospace font."
+ "确保你所有的p元素使用monospace字体。"
],
"tests": [
{
- "text": "Your p elements should use the font monospace.",
- "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your p elements should use the font monospace.');"
+ "text": "你的p元素应该使用monospace字体。",
+ "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), '你的p元素应该使用monospace字体。');"
}
],
"challengeType": 0,
@@ -4399,4 +4395,4 @@
}
}
]
-}
\ No newline at end of file
+}
diff --git a/01-responsive-web-design/basic-css.md b/01-responsive-web-design/basic-css.md
new file mode 100644
index 0000000..c3c039c
--- /dev/null
+++ b/01-responsive-web-design/basic-css.md
@@ -0,0 +1,18 @@
+# Introduction to Basic CSS #
+
+Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.
+
+Note that CSS is case-sensitive so be careful with your capitalization. CSS has been adopted by all major browsers and allows you to control:
+
+* color
+* fonts
+* positioning
+* spacing
+* sizing
+* decorations
+* transitions
+
+There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the `style` attribute. Alternatively, you can place CSS rules within `style` tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code. The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.
+
+In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.
+
diff --git a/01-responsive-web-design/basic-html-and-html5.json b/01-responsive-web-design/basic-html-and-html5.json
index 7f00e0b..3df7a2a 100644
--- a/01-responsive-web-design/basic-html-and-html5.json
+++ b/01-responsive-web-design/basic-html-and-html5.json
@@ -8,23 +8,21 @@
"id": "bd7123c8c441eddfaeb5bdef",
"title": "Say Hello to HTML Elements",
"description": [
- "Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.",
- "First, you'll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.",
- "Do you see the code in your code editor that says <h1>Hello</h1>? That's an HTML element.",
- "Most HTML elements have an opening tag and a closing tag.",
- "Opening tags look like this:",
- "<h1>",
- "Closing tags look like this:",
- "</h1>",
- "The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.",
- "Each challenge has tests you can run at any time by clicking the \"Run tests\" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.",
+ "欢迎来到 freeCodeCamp 的 HTML 编码挑战，这些挑战将会帮助你逐步掌握 Web 开发。",
+ "HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，使用 HTML 来制作一个简单的网页，你可以直接在本网页内置的代码编辑器中编辑代码。",
+ "你看到代码编辑器中的 <h1>Hello</h1> 了吗? 那就是一个 HTML 标签。",
+ "大部分 HTML 标签都有一个 开始标记 和一个 结束标记。",
+ "开始标记像这样：<h1>",
+ "结束标记像这样：</h1>",
+ "开始标记和结束标记的唯一区别就是结束标记多了一个 /。",
+ "每个挑战都有测试，任何时候点击运行测试按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以提交你的代码并顺利进入下一个挑战。",
"", - "To pass the test on this challenge, change your
h1 element's text to say \"Hello World\"."
+ "请把 h1 标签的内容改为：Hello World。"
],
"tests": [
{
- "text": "Your h1 element should have the text \"Hello World\".",
- "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\".');"
+ "text": "h1 标签的内容应该为：Hello World。",
+ "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'h1 标签的内容应该为：Hello World。');"
}
],
"challengeType": 0,
@@ -45,28 +43,28 @@
"id": "bad87fee1348bd9aedf0887a",
"title": "Headline with the h2 Element",
"description": [
- "Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.",
- "The h2 element you will be adding in this step will add a level two heading to the web page.",
- "This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different levels of subheadings.",
+ "在接下来的几节课里，我们将会由浅入深地制作一个关于猫的图片应用。",
+ "这节课将会引入 h2 标签。",
+ "这些标签用来告诉浏览器，网站的结构长什么样子。h1 标签通常被用作主标题，h2 标签通常被用作副标题，还有 h3、h4、h5、h6 标签，它们分别用作不同级别的标题。",
"", - "Add an
h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element."
+ "在 h1 标签下面创建一个 h2 标签，标签内容为：CatPhotoApp。"
],
"tests": [
{
- "text": "Create an h2 element.",
- "testString": "assert(($(\"h2\").length > 0), 'Create an h2 element.');"
+ "text": "创建一个 h2 标签。",
+ "testString": "assert(($(\"h2\").length > 0), '创建一个 h2 标签。');"
},
{
- "text": "Make sure your h2 element has a closing tag.",
- "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(//g).length, 'Make sure your h2 element has a closing tag.');"
+ "text": "h2 标签应该有结束标记。",
+ "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(//g).length, 'h2 标签应该有结束标记。');"
},
{
- "text": "Your h2 element should have the text \"CatPhotoApp\".",
- "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'Your h2 element should have the text \"CatPhotoApp\".');"
+ "text": "h2 标签的内容应该为：CatPhotoApp。",
+ "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'h2 标签的内容应该为：CatPhotoApp。');"
},
{
- "text": "Your h1 element should have the text \"Hello World\".",
- "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'Your h1 element should have the text \"Hello World\".');"
+ "text": "h1 标签的内容应该为：Hello World。",
+ "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), '主标题的内容应该为：Hello World。');"
}
],
"challengeType": 0,
@@ -87,24 +85,24 @@
"id": "bad87fee1348bd9aedf08801",
"title": "Inform with the Paragraph Element",
"description": [
- "p elements are the preferred element for paragraph text on websites. p is short for \"paragraph\".",
- "You can create a paragraph element like this:",
+ "p 是 paragraph 的缩写，通常被用来创建一个段落，就和你写作文一样。",
+ "你可以像这样创建一个段落：",
"<p>I'm a p tag!</p>",
"
",
- "Create a p element below your h2 element, and give it the text \"Hello Paragraph\"."
+ "在 h2 标签下面新增一个 p 标签，标签内容是：Hello Paragraph。"
],
"tests": [
{
- "text": "Create a p element.",
- "testString": "assert(($(\"p\").length > 0), 'Create a p element.');"
+ "text": "创建一个 p 标签。",
+ "testString": "assert(($(\"p\").length > 0), '创建一个 p 标签。');"
},
{
- "text": "Your p element should have the text \"Hello Paragraph\".",
- "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'Your p element should have the text \"Hello Paragraph\".');"
+ "text": "p 标签的内容应该为：Hello Paragraph。",
+ "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'p 标签的内容应该为：Hello Paragraph。');"
},
{
- "text": "Make sure your p element has a closing tag.",
- "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/
h2 标签应该有结束标记。');"
},
{
- "text": "Your h2 element should have the text \"CatPhotoApp\".",
- "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'Your h2 element should have the text \"CatPhotoApp\".');"
+ "text": "h2 标签的内容应该为：CatPhotoApp。",
+ "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'h2 标签的内容应该为：CatPhotoApp。');"
},
{
- "text": "Your h1 element should have the text \"Hello World\".",
- "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'Your h1 element should have the text \"Hello World\".');"
+ "text": "h1 标签的内容应该为：Hello World。",
+ "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), '主标题的内容应该为：Hello World。');"
}
],
"challengeType": 0,
@@ -87,24 +85,24 @@
"id": "bad87fee1348bd9aedf08801",
"title": "Inform with the Paragraph Element",
"description": [
- "p elements are the preferred element for paragraph text on websites. p is short for \"paragraph\".",
- "You can create a paragraph element like this:",
+ "p 是 paragraph 的缩写，通常被用来创建一个段落，就和你写作文一样。",
+ "你可以像这样创建一个段落：",
"<p>I'm a p tag!</p>",
"", - "Create a
p element below your h2 element, and give it the text \"Hello Paragraph\"."
+ "在 h2 标签下面新增一个 p 标签，标签内容是：Hello Paragraph。"
],
"tests": [
{
- "text": "Create a p element.",
- "testString": "assert(($(\"p\").length > 0), 'Create a p element.');"
+ "text": "创建一个 p 标签。",
+ "testString": "assert(($(\"p\").length > 0), '创建一个 p 标签。');"
},
{
- "text": "Your p element should have the text \"Hello Paragraph\".",
- "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'Your p element should have the text \"Hello Paragraph\".');"
+ "text": "p 标签的内容应该为：Hello Paragraph。",
+ "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'p 标签的内容应该为：Hello Paragraph。');"
},
{
- "text": "Make sure your p element has a closing tag.",
- "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/p element has a closing tag.');"
+ "text": "p 标签应该有结束标记。",
+ "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/
p 标签应该有结束标记。');"
}
],
"challengeType": 0,
@@ -126,16 +124,16 @@
"id": "bad87fee1348bd9aedf08833",
"title": "Fill in the Blank with Placeholder Text",
"description": [
- "Web developers traditionally use lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.",
- "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
- "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text.",
+ "Web 开发者通常用 lorem ipsum text 来做占位符，占位符就是占着位置的一些文字，没有实际意义。",
+ "为什么叫 lorem ipsum text 呢?是因为 lorem ipsum 是古罗马西塞罗谚语的前两个单词。",
+ "从公元16世纪开始 lorem ipsum text 就被当做占位符了，这种传统延续到了互联网时代。于此同时，孙悟空也在五指山下被压了500年，然后就进化成程序猿了，是不是很巧合。^_^",
"
", - "Replace the text inside your
p element with the first few words of this kitty ipsum text: 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 标签的内容更换为：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。"
],
"tests": [
{
- "text": "Your p element should contain the first few words of the provided kitty ipsum text.",
- "testString": "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'Your p element should contain the first few words of the provided kitty ipsum text.');"
+ "text": "p 标签的内容必须包含 Monkey code。",
+ "testString": "assert.isTrue((/Monkey(\\s)+code/gi).test($(\"p\").text()), 'p 标签的内容必须包含 Monkey code。');"
}
],
"challengeType": 0,
@@ -160,28 +158,28 @@
"id": "bad87fee1348bd9aedf08802",
"title": "Uncomment HTML",
"description": [
- "Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed the end user.",
- "Commenting is also a convenient way to make code inactive without having to delete it entirely.",
- "Comments in HTML starts with <!--, and ends with a -->",
+ "注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。",
+ "注释也可以用来在不删除代码的前提下，让代码不起作用。",
+ "在 HTML 中，注释的开始标记是 <!--，结束标记是 -->。",
"", - "Uncomment your
h1, h2 and p elements."
+ "现在我们反其道而行之，干掉 h1 标签、h2 标签、p 标签的注释。"
],
"tests": [
{
- "text": "Make your h1 element visible on your page by uncommenting it.",
- "testString": "assert($(\"h1\").length > 0, 'Make your h1 element visible on your page by uncommenting it.');"
+ "text": "确保网页中能看到 h1 标签。",
+ "testString": "assert($(\"h1\").length > 0, '确保网页中能看到 h1 标签。');"
},
{
- "text": "Make your h2 element visible on your page by uncommenting it.",
- "testString": "assert($(\"h2\").length > 0, 'Make your h2 element visible on your page by uncommenting it.');"
+ "text": "确保网页中能看到 h2 标签。",
+ "testString": "assert($(\"h2\").length > 0, '确保网页中能看到 h2 标签。');"
},
{
- "text": "Make your p element visible on your page by uncommenting it.",
- "testString": "assert($(\"p\").length > 0, 'Make your p element visible on your page by uncommenting it.');"
+ "text": "确保网页中能看到 p 标签。",
+ "testString": "assert($(\"p\").length > 0, '确保网页中能看到 p 标签。');"
},
{
- "text": "Be sure to delete all trailing comment tags, i.e. -->.",
- "testString": "assert(!/[^fc]-->/gi.test(code.replace(/ */gi.test(code.replace(/ *"
],
"head": [],
@@ -208,31 +206,31 @@
"id": "bad87fee1348bd9aedf08804",
"title": "Comment out HTML",
"description": [
- "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->",
- "Here you'll need to end the comment before your h2 element begins.",
+ "记住：注释的开始标记是 <!--，结束标记是 -->。",
+ "现在你需要在 h2 标签前终止注释。",
"", - "Comment out your
h1 element and your p element, but not your h2 element."
+ "任务：h1 标签和 p 标签都注释掉，h2 标签保留。"
],
"tests": [
{
- "text": "Comment out your h1 element so that it is not visible on your page.",
- "testString": "assert(($(\"h1\").length === 0), 'Comment out your h1 element so that it is not visible on your page.');"
+ "text": "注释掉 h1 标签，这样它就从网页上消失了。",
+ "testString": "assert(($(\"h1\").length === 0), '注释掉 h1 标签，这样它就从网页上消失了。');"
},
{
- "text": "Leave your h2 element uncommented so that it is visible on your page.",
- "testString": "assert(($(\"h2\").length > 0), 'Leave your h2 element uncommented so that it is visible on your page.');"
+ "text": "h2 标签保持原样，这样网页上还能看到它。",
+ "testString": "assert(($(\"h2\").length > 0), 'h2 标签保持原样，这样网页上还能看到它。');"
},
{
- "text": "Comment out your p element so that it is not visible on your page.",
- "testString": "assert(($(\"p\").length === 0), 'Comment out your p element so that it is not visible on your page.');"
+ "text": "注释掉 p 标签，这样它就从网页上消失了。",
+ "testString": "assert(($(\"p\").length === 0), '注释 p 标签，这样它就从网页上消失了。);"
},
{
- "text": "Be sure to close each of your comments with -->.",
- "testString": "assert(code.match(/[^fc]-->/g).length > 1, 'Be sure to close each of your comments with -->.');"
+ "text": "确保每一个注释都以 --> 结尾。",
+ "testString": "assert(code.match(/[^fc]-->/g).length > 1, '确保每一个注释都以-->结尾。');"
},
{
- "text": "Do not change the order of the h1 h2 or p in the code.",
- "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]===\"
\") , 'Do not change the order of the h1 h2 or p in the code.');"
+ "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,
@@ -247,7 +245,7 @@
"",
"
CatPhotoApp
", "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
", "-->" ], "head": [], @@ -259,23 +257,23 @@ "id": "bad87fed1348bd9aedf08833", "title": "Delete HTML Elements", "description": [ - "Our phone doesn't have much vertical space.", - "Let's remove the unnecessary elements so we can start building our CatPhotoApp.", + "手机的屏幕空间是有限的。", + "让我们删除不必要的标签，开始设计我们的 CatPhotoApp。", "", - "Delete your
h1 element so we can simplify our view."
+ "任务：删除 h1 标签以简化视图。"
],
"tests": [
{
- "text": "Delete your h1 element.",
- "testString": "assert(($(\"h1\").length == 0), 'Delete your h1 element.');"
+ "text": "删除 h1 标签。",
+ "testString": "assert(($(\"h1\").length == 0), '删除 h1 标签。');"
},
{
- "text": "Leave your h2 element on the page.",
- "testString": "assert(($(\"h2\").length > 0), 'Leave your h2 element on the page.');"
+ "text": "保留 h2 标签。",
+ "testString": "assert(($(\"h2\").length > 0), '保留 h2 标签。');"
},
{
- "text": "Leave your p element on the page.",
- "testString": "assert(($(\"p\").length > 0), 'Leave your p element on the page.');"
+ "text": "保留 p 标签。",
+ "testString": "assert(($(\"p\").length > 0), '保留 p 标签。');"
}
],
"challengeType": 0,
@@ -289,7 +287,7 @@
"",
"CatPhotoApp
", "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
" ], "head": [], "tail": [] @@ -300,42 +298,42 @@ "id": "bad87fee1348bd9aecf08801", "title": "Introduction to HTML5 Elements", "description": [ - "HTML5 introduces more descriptive HTML tags. These includeheader, footer, nav, video, article, section and others.",
- "These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.",
- "The main HTML5 tag helps search engines and other developers find the main content of your page.",
- "NoteMany of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.", + "HTML5 引入了很多更具描述性的 HTML 标签，例如：
header、footer、nav、video、article、section 等等。",
+ "这些标签让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。",
+ "main 标签让搜索引擎和开发者瞬间就能找到网页的主要内容。",
+ "注意在后面的应用无障碍课程中我们会接触到更多新的 HTML5 标签，以及明白它们的用处。", "
", - "Create a second
p element after the existing p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.",
- "Wrap the paragraphs with an opening and closing main tag."
+ "在现有的段落下创建一个新的段落，段落内容为：养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。",
+ "在第一个段落前添加 p elements with Kitty Ipsum text.",
- "testString": "assert($(\"p\").length > 1, 'You need 2 p elements with Kitty Ipsum text.');"
+ "text": "页面中应该有两个段落。",
+ "testString": "assert($(\"p\").length > 1, '页面中应该有两个段落。');"
},
{
- "text": "Make sure each of your p elements has a closing tag.",
- "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/p elements has a closing tag.');" + "text": "确保每个段落都有结束标记。", + "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/
p element should contain the first few words of the provided additional kitty ipsum text.",
- "testString": "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your p element should contain the first few words of the provided additional kitty ipsum text.');"
+ "text": "新建的段落应该包含关键词：养猫。",
+ "testString": "assert.isTrue((/养猫/).test($(\"p\").text()), '新建的段落应该包含关键词：养猫。');"
},
{
- "text": "Your code should have one main element.",
- "testString": "assert($('main').length === 1, 'Your code should have one main element.');"
+ "text": "代码中应该包含 main 标签。",
+ "testString": "assert($('main').length === 1, '代码中应该包含 main 标签。');"
},
{
- "text": "The main element should have two paragraph elements as children.",
- "testString": "assert($(\"main\").children(\"p\").length === 2, 'The main element should have two paragraph elements as children.');"
+ "text": "main 标签应有两个 p 标签作为它的子标签。",
+ "testString": "assert($(\"main\").children(\"p\").length === 2, 'main 标签应有两个 p 标签作为它的子标签。');"
},
{
- "text": "The opening main tag should come before the first paragraph tag.",
- "testString": "assert(code.match(/
CatPhotoApp
", "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
" ], "head": [], "tail": [] @@ -358,34 +356,34 @@ "id": "bad87fee1348bd9aedf08812", "title": "Add Images to Your Website", "description": [ - "You can add images to your website by using theimg element, and point to a specific image's URL using the src attribute.",
- "An example of this would be:",
+ "用 img 标签来为你的网站添加图片，其中 src 属性指向一个图片的地址。",
+ "举例如下：",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">",
- "Note that img elements are self-closing.",
- "All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
- "Note: If the image is purely decorative, using an empty alt attribute is a best practice.",
- "Ideally the alt attribute should not contain special characters unless needed.",
- "Let's add an alt attribute to our img example above:",
- "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\">",
+ "注意：img 标签是自关闭标签，不需要结束标记。",
+ "所有的 img 标签必须有 alt 属性，alt 属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。",
+ "注意：如果图片是纯装饰性的，用一个空的 alt 是最佳实践。",
+ "理想情况下，alt属性不应该包含特殊字符，除非需要。",
+ "让我们给上面例子的 img 添加 alt 属性。",
+ "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"作者站在沙滩上竖起两个大拇指\">",
"", - "Let's try to add an image to our website:", - "Insert an
img tag, before the h2 element.",
- "Now set the src attribute so that it points to this url:",
+ "让我们给网站添加图片：",
+ "在 h2 标签前，插入一个 img 标签",
+ "现在设置 src 属性指向这个地址：",
"https://bit.ly/fcc-relaxing-cat",
- "Finally don't forget to give your image an alt text."
+ "最后不要忘记给图片添加一个 alt 文本。"
],
"tests": [
{
- "text": "Your page should have an image element.",
- "testString": "assert($(\"img\").length > 0, 'Your page should have an image element.');"
+ "text": "网页应该有一张图片。",
+ "testString": "assert($(\"img\").length > 0, '网页应该有一张图片。');"
},
{
- "text": "Your image should have a src attribute that points to the kitten image.",
- "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 src attribute that points to the kitten image.');"
+ "text": "这张图片应该是一只小猫。",
+ "testString": "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), '这张图片应该是一只小猫。');"
},
{
- "text": "Your image element must have an alt attribute.",
- "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'Your image element must have an alt attribute.');"
+ "text": "图片必须有 alt 属性。",
+ "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), '图片必须有 alt 属性。');"
}
],
"challengeType": 0,
@@ -400,8 +398,8 @@
"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.
", + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
", + "养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
", "anchor elements to link to content outside of your web page.",
- "anchor elements need a destination web address called an href attribute. They also need anchor text. Here's an example:",
+ "你可以用锚点（Anchor，简写 a）来实现网页间的跳转。",
+ "锚点需要一个 href 属性指向目的地，它还需要有锚点文本，例如：",
"<a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a>",
- "Then your browser will display the text \"this links to freecodecamp.org\" as a link you can click. And that link will take you to the web address https://www.freecodecamp.org.",
+ "然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到 https://www.freecodecamp.org。",
"", - "Create an
a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text."
+ "创建一个 a 标签，href 属性为 http://freecatphotoapp.com ，锚点文本为：cat photos。"
],
"tests": [
{
- "text": "Your a element should have the anchor text of \"cat photos\".",
- "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'Your a element should have the anchor text of \"cat photos\".');"
+ "text": "a 标签的锚点文本应为：cat photos。",
+ "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'a 标签的锚点文本应为：cat photos。');"
},
{
- "text": "You need an a element that links to http://freecatphotoapp.com ",
- "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to 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": "Make sure your a element has a closing tag.",
- "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a element has a closing tag.');"
+ "text": "确保 a 标签有结束标记。",
+ "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a 标签有结束标记。');"
}
],
"challengeType": 0,
@@ -448,8 +446,8 @@
" ",
" 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.
", + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
", + "养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
", "" ], "head": [], @@ -461,40 +459,40 @@ "id": "bad88fee1348bd9aedf08816", "title": "Link to Internal Sections of a Page with Anchor Elements", "description": [ - "Anchor elements can also be used to create internal links to jump to different sections within a webpage.", - "To create an internal link, you assign a link'shref attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.",
- "Below is an example of an internal anchor link and its target element:",
+ "锚点同样也可以用来在网页内不同区域的跳转。",
+ "用一个井号 # 加上你想跳转到的区域对应的 id 属性值，通过把它作为锚点的 href 属性值来创建一个内部链接。 id 是用来描述网页元素的一个属性，它的值在整个页面中唯一。",
+ "下面是用来创建内部锚点链接的例子：",
"<a href=\"#contacts-header\">Contacts</a>", - "When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.", + "当用户点击了
...
<h2 id=\"contacts-header\">Contacts</h2>
Contacts 链接，页面就会跳转到网页的 Contacts 区域。",
"", - "Change your external link to an internal link by changing the
href attribute to \"#footer\" and the text from \"cat photos\" to \"Jump to Bottom\".",
- "Remove the target=\"_blank\" attribute from the anchor tag since this causes the linked document to open in a new window tab.",
- "Then add an id attribute with a value of \"footer\" to the <footer> element at the bottom of the page."
+ "通过修改 href 属性为 #footer 来更改外部链接为内部链接，同时修改文本 cat photos 为 Jump to Bottom。",
+ "移除 target=\"_blank\" 属性避免点击链接会打开新的标签页。",
+ "然后添加一个 <footer> 标签，它的 id 值为 footer。"
],
"tests": [
{
- "text": "There should be only one anchor tag on your page.",
- "testString": "assert($('a').length == 1, 'There should be only one anchor tag on your page.');"
+ "text": "页面中应该只有一个锚点。",
+ "testString": "assert($('a').length == 1, '页面中应该只有一个锚点。');"
},
{
- "text": "There should be only one footer tag on your page.",
- "testString": "assert($('footer').length == 1, 'There should be only one footer tag on your page.');"
+ "text": "页面中应该只有一个 footer 标签。",
+ "testString": "assert($('footer').length == 1, '页面中应该只有一个 footer 标签。');"
},
{
- "text": "The a tag should have an href attribute set to \"#footer\".",
- "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'The a tag should have an href attribute set to \"#footer\".');"
+ "text": "a 标签的 href 属性应为：\"#footer\"。",
+ "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'a 标签的 href 属性应为：\"#footer\"。');"
},
{
- "text": "The a tag should not have a target attribute",
- "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'The a tag should not have a target attribute');"
+ "text": "a 标签不应该有 target 属性。",
+ "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'a 标签不应该有 target 属性。');"
},
{
- "text": "The a text should be \"Jump to Bottom\".",
- "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'The a text should be \"Jump to Bottom\".');"
+ "text": "a 标签的文本应为 Jump to Bottom。",
+ "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'a 标签的文本应为 Jump to Bottom。');"
},
{
- "text": "The footer tag should have an id attribute set to \"footer\".",
- "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'The footer tag should have an id attribute set to \"footer\".');"
+ "text": "footer 标签的 id 属性应为 \"footer\"。",
+ "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'footer 标签的 id 属性应为 \"footer\"。');"
}
],
"challengeType": 0,
@@ -511,10 +509,8 @@
" ",
" 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.
", - "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.
", - "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.
", - "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.
", + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
", + "养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
", " ", "", " ", @@ -529,50 +525,50 @@ "id": "bad87fee1348bd9aede08817", "title": "Nest an Anchor Element within a Paragraph", "description": [ - "You can nest links within other text elements.", + "你可以在其他文本标签内嵌套链接。You can nest links within other text elements.", "<p>", - "Let's break down the example:", - "Normal text is wrapped in the
Here's a <a target=\"_blank\" href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.
</p>
p element:<p> Here's a ... for you to follow. </p>",
- "Next is the anchor element <a> (which requires a closing tag </a>):<a> ... </a>",
- "target is an anchor tag attribute that specifies where to open the link and the value \"_blank\" specifies to open the link in a new tab",
- "href is an anchor tag attribute that contains the URL address of the link:<a href=\"http://freecodecamp.org\"> ... </a>",
- "The text, \"link to freecodecamp.org\", within the anchor element called anchor text, will display a link to click:<a href=\" ... \">link to freecodecamp.org</a>",
- "The final output of the example will look like this:Here's a link to freecodecamp.org for you to follow.
", + "让我们来分解这个例子：", + "通常，文本是被包裹在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.
", "", - "Now nest your existing
a element within a new p element (just after the existing main element). The new paragraph should have text that says \"View more cat photos\", where \"cat photos\" is a link, and the rest of the text is plain text."
+ "现在用一个新的 p 标签来包裹现存的 a 标签（必须放在 main 标签之后才行)。新段落的文本为：View more cat photos，其中 \"cat photos\" 是一个链接，其他是纯文本。"
],
"tests": [
{
- "text": "You need an a element that links to \"http://freecatphotoapp.com\".",
- "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'You need an a element that links to \"http://freecatphotoapp.com\".');"
+ "text": "你需要一个指向 \"http://freecatphotoapp.com\" 的锚点。",
+ "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), '你需要一个指向 \"http://freecatphotoapp.com\" 的锚点。');"
},
{
- "text": "Your a element should have the anchor text of \"cat photos\"",
- "testString": "assert($(\"a\").text().match(/cat\\sphotos/gi), 'Your a element should have the anchor text of \"cat photos\"');"
+ "text": "锚点文本为应为：cat photos。",
+ "testString": "assert($(\"a\").text().match(/cat\\sphotos/gi), '锚点文本为应为：cat photos。');"
},
{
- "text": "Create a new p element around your a element. There should be at least 3 total p tags in your HTML code.",
- "testString": "assert($(\"p\") && $(\"p\").length > 2, 'Create a new p element around your a element. There should be at least 3 total p tags in your HTML code.');"
+ "text": "在锚点的外部创建一个新段落，这样页面就有3个段落了。",
+ "testString": "assert($(\"p\") && $(\"p\").length > 2, '在锚点的外部创建一个段落，这样页面就有3个段落了。');"
},
{
- "text": "Your a element should be nested within your new p element.",
- "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'Your a element should be nested within your new p element.');"
+ "text": "锚点应嵌套在新段落内。",
+ "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), '锚点应嵌套在新段落内。');"
},
{
- "text": "Your p 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)), 'Your p element should have the text \"View more \" (with a space after it).');"
+ "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)), '段落的文本应为：View more （记得 more 后面有一个空格）。');"
},
{
- "text": "Your a element should not have the text \"View more\".",
- "testString": "assert(!$(\"a\").text().match(/View\\smore/gi), 'Your a element should not have the text \"View more\".');"
+ "text": "锚点的文本不应该为：View more。",
+ "testString": "assert(!$(\"a\").text().match(/View\\smore/gi), '锚点的文本不应该为：View more。');"
},
{
- "text": "Make sure each of your p elements has a closing tag.",
- "testString": "assert(code.match(/<\\/p>/g) && code.match(//g).length === code.match(/
p elements has a closing tag.');" + "text": "确保每个段落有结束标记。", + "testString": "assert(code.match(/<\\/p>/g) && code.match(/
/g).length === code.match(/
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": "确保每个段落有结束标记。",
+ "testString": "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/",
" ",
- " 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. 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. 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。",
" ",
- "
",
" ",
- "
",
" ",
- "
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.
", + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
", + "养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
", "" ], "head": [], @@ -1469,7 +1465,7 @@ "The best page ever
", - "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.
", + "在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
", " ", "