Click here to view more cat photos.
- -Things cats love:
--
-
- cat nip -
- laser pointers -
- lasagna -
Top 3 things cats hate:
--
-
- flea treatment -
- thunder -
- other cats -
links类将锚点标记上的opacity属性设置为0.7。
+ - text: 您的代码应通过选择links类将 a 标记上的opacity属性设置为0.7。
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.");'
```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.chinese.md
index 64e39d3af6..ae6adaa272 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.chinese.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.chinese.md
@@ -2,29 +2,36 @@
id: bad87fee1348bd9aedd08830
title: Add a Submit Button to a Form
challengeType: 0
-videoUrl: ''
-localeTitle: 向表单添加提交按钮
+videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
+forumTopicId: 16627
+localeTitle: 给表单添加提交按钮
---
## Description
-submit按钮。单击此按钮会将表单中的数据发送到您使用表单的action属性指定的URL。这是一个示例提交按钮： <button type="submit">this button submits the form</button> submit提交按钮，当点击提交按钮时，表单中的数据将会被发送到action属性指定的 URL 上。
+例如：
+<button type="submit">this button submits the form</button>
+form元素的最后一个元素，其类型为submit ，并且“Submit”作为其文本。 button按钮，按钮的type属性值为submit，文本为提交。
+submit的属性type 。
- testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute type set to submit.");'
- - text: 您的提交按钮应该只有“提交”文本。
- testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
- - text: 确保您的button元素有一个结束标记。
- testString: 'assert(code.match(/<\/button>/g) && code.match(/Click here to view more cat photos.
- -Things cats love:
-Top 3 things cats hate:
-img元素将图像添加到网站，并使用src属性指向特定图像的URL。这方面的一个例子是： <img src="https://www.your-image-source.com/your-image.jpg">请注意， img元素是自动关闭的。所有img元素都必须具有alt属性。 alt属性中的文本用于屏幕阅读器以提高可访问性，并在图像无法加载时显示。注意：如果图像纯粹是装饰性的，则使用空的alt属性是最佳做法。理想情况下，除非需要，否则alt属性不应包含特殊字符。让我们在上面的img示例中添加一个alt属性： <img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."> img元素来为你的网站添加图片，其中src属性指向一个图片的地址。
+例如：
+<img src="https://www.your-image-source.com/your-image.jpg">
+注意：img元素是没有结束标记的。
+所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
+注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。
+理想情况下，alt属性不应该包含特殊字符，除非必要。
+让我们给上面例子的img添加alt属性。
+<img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">
+h2元素之前插入img标记。现在设置src属性，使其指向此URL： https://bit.ly/fcc-relaxing-cat ： https://bit.ly/fcc-relaxing-cat最后不要忘记为您的图像添加alt文字。 h2元素前，插入一个img元素
+现在设置src属性指向这个地址：
+https://bit.ly/fcc-relaxing-cat
+最后不要忘记给图片添加一个alt文本。
+src属性。
- 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: 您的图片元素必须具有alt属性。
- testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element must have an alt attribute.");'
+ - text: '网页应该有一张图片。'
+ testString: assert($("img").length > 0);
+ - text: '图片 src 属性应该为 https://bit.ly/fcc-relaxing-cat。'
+ testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
+ - text: '图片必须有alt属性。'
+ testString: assert(code.match(/alt\s*?=\s*?(\"|\').*(\"|\')/));
```
@@ -36,12 +53,11 @@ tests:
```html
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.
+ + +在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
+养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会囤老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
input元素中显示的内容。您可以像这样创建占位符文本： <input type="text" placeholder="this is placeholder text"> Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
+你可以像这样创建一个占位符：
+<input type="text" placeholder="this is placeholder text">
+input的placeholder值设置为“cat photo URL”。 input输入框的placeholder占位符文本设置为 “猫咪图片地址”。
+placeholder属性添加到现有文本input元素。
- testString: 'assert($("input[placeholder]").length > 0, "Add a placeholder attribute to the existing text input element.");'
- - text: 将占位符属性的值设置为“cat photo URL”。
- testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
- - text: 完成的input元素应该具有有效的语法。
- testString: 'assert($("input[type=text]").length > 0 && code.match(/input element should have valid syntax.");'
-
+ - text: '给现有的input输入框添加一个placeholder属性。'
+ testString: assert($("input[placeholder]").length > 0);
+ - text: '设置placeholder属性的值为 ”猫咪图片地址“。'
+ testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/猫咪图片地址/gi));
+ - text: 'input输入框的语法必须正确。'
+ testString: 'assert($("input[type=text]").length > 0 && code.match(/Click here to view more cat photos.
- -Things cats love:
+点击查看更多猫咪图片。
+ +猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
checked属性设置默认情况下要选中的复选框或单选按钮。为此，只需将“checked”一词添加到input元素的内部即可。例如： <input type="radio" name="test-name" checked> input元素添加 "checked" 属性。 例如:
+<input type="radio" name="test-name" checked>
+radio buttons和第一个checkboxes 。 radio button和第一个checkbox都设置为默认选中。
+Click here to view more cat photos.
- -Things cats love:
+点击查看更多猫咪图片。
+ +猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
<!--并结束评论，您需要使用-->这里您需要在h2元素开始之前结束评论。 <!--，结束标记是-->。
+现在你需要在h2元素前终止注释。
+h1元素和你的p元素，但不是你的h2元素。 h1元素和p元素，保留h2元素。
+h1元素，使其在你的页面上不可见。
- testString: 'assert(($("h1").length === 0), "Comment out your h1 element so that it is not visible on your page.");'
- - text: 保持h2元素取消注释，以便在页面上显示。
- testString: 'assert(($("h2").length > 0), "Leave your h2 element uncommented so that it is visible on your page.");'
- - text: 注释掉你的p元素，使其在你的页面上不可见。
- testString: 'assert(($("p").length === 0), "Comment out your p element so that it is not visible on your page.");'
- - text: 请务必使用-->关闭每条评论。
- testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with -->.");'
- - text: 请勿更改代码中h1 h2或p的顺序。
- testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="") , "Do not change the order of the h1 h2 or p in the code.");'
+ - text: '注释掉h1元素，这样它就从网页上消失了。'
+ testString: assert(($("h1").length === 0));
+ - text: 'h2元素保持原样，这样网页上还能看到它。'
+ testString: assert(($("h2").length > 0));
+ - text: '注释掉p元素，这样它就从网页上消失了。'
+ testString: assert(($("p").length === 0));
+ - text: '确保每一个注释都以-->结尾。'
+ testString: assert(code.match(/[^fc]-->/g).length > 1);
+ - text: '不要更改h1元素、h2 元素、p元素的顺序。'
+ testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="
")); ``` @@ -43,9 +49,8 @@ tests:
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
+在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
--> - ``` @@ -56,8 +61,5 @@ tests: ## Solutionunordered lists或项目符号样式列表的特殊元素。无序列表以开头<ul>元素开头，后跟任意数量的<li>元素。最后，无序列表以</ul>结尾例如： <UL>会创建一个“牛奶”和“奶酪”的子弹点样式列表。
<LI>乳</ LI>
<LI>干酪</ LI>
</ UL>
unordered lists（缩写 ul）。
+无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。
+例如:
+
+```html
+p元素，并在页面底部创建猫喜爱的三件事的无序列表。 p元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
+ul元素。
- testString: 'assert($("ul").length > 0, "Create a ul element.");'
- - text: 你的ul元素中应该有三个li元素。
- testString: 'assert($("ul li").length > 2, "You should have three li elements within your ul element.");'
- - text: 确保你的ul元素有一个结束标记。
- testString: 'assert(code.match(/<\/ul>/gi) && code.match(/li元素具有结束标记。
- testString: 'assert(code.match(/<\/li>/gi) && code.match(/li elements have closing tags.");'
- - text: 确保您的li元素不包含任何空字符串或者只有空格。
- testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0, 'Make sure your li elements don\’t contain an empty string or only white-space.');
+ - text: '创建一个ul无序列表。'
+ testString: assert($("ul").length > 0);
+ - text: '你应该在ul无序列表中添加三个li条目。'
+ testString: assert($("ul li").length > 2);
+ - text: '确保ul无序列表有结束标记。'
+ testString: assert(code.match(/<\/ul>/gi) && code.match(/Click here to view more cat photos.
- -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.
+ +在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
+养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
Click here to view more cat photos.
- -form元素上指定操作来执行此操作。例如： <form action="/url-where-you-want-to-submit-form-data"></form> form添加action属性。
+例如:
+<form action="/url-where-you-want-to-submit-form-data"></form>
+form元素中，并将action="/submit-cat-photo"属性添加到表单元素中。 input输入框外层创建一个form表单，然后设置表单的action属性为"/submit-cat-photo"。
+form元素中。
- testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a form element.");'
- - text: 确保您的form具有设置为/submit-cat-photo的action属性
- testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your form has an action attribute which is set to /submit-cat-photo");'
- - text: 确保您的form元素具有格式良好的打开和关闭标记。
- testString: 'assert(code.match(/<\/form>/g) && code.match(/