freecodecamp上的html练习项目

freecodecamp，html练习项目learn html by building a cat photo app

下面是问题的简单描述和问题的答案。

freecodecamp是一个免费的编程练习网站，下面你的代码块中，有的缩进不是很规范，但懒得改了。

更改标签元素的内容

在标签下方添加标签

在标签下面添加

标签

在

元素上面添加注释

在元素之前添加开始标记，在

元素之后添加结束标记标识页面的主要部分

正确缩进嵌套在中的

在

元素下添加元素，元素没有结束标签，称为自结束标签

在现有的img元素中，添加一个URL为https://cdn.freecodecamp.org/curriculum/cat-photoapp/relaxing-cat.jpg的src属性

在img元素中，添加一个alt属性:A cute orange cat lying on its back

在链接到https://freecatphotoapp.com的段落之后添加一个锚元素。此时，链接将不会显示在预览中。

在链接元素中添加文本。

通过在

中的文字左右添加将其变成链接

删除

元素下面的链接

向标签中添加target属性为**_blank** 这样链接在新标签页打开

给了href属性的值，让把图像转换成链接

使用将现在的内容和将来要写的内容分开。

使用包含,

,

在现在的元素下再添加一个元素

在第二个元素中添加，文本内容给了

在第二个section元素的最后一个h2元素之后，添加一个h3元素,文本给了。

在后面添加一个无序列表

在中创建三个列表项每个里面的文本给了

在后添加一个，属性src、alt给了

元素表示自包含的内容，并允许您将图像与标题.figure相关联

将刚刚添加的图像嵌套在元素figure中

图形标题(figcaption)元素用于添加标题来描述图形元素中包含的图像。例如，一只可爱的猫添加了标题一只可爱的猫。

在图像嵌套在figure元素之后，添加一个figcaption元素，文本设置给了

将figcaption元素中的单词love包装在一个强调em元素中来强调它。

在figure元素之后，添加另一个带有文本的h3元素:

有序列表(ol)的代码类似于无序列表，但有序列表中的列表项在显示时是编号的。

在第二个section元素的最后一个h3元素之后，添加一个包含以下三个列表项的有序列表:

在有序列表之后，添加另一个图形元素。

在刚才添加的figure元素中，嵌套一个img元素，将src属性设置为https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg。

为了提高您添加的图像的可访问性，添加文本的alt属性:

在最后一个img元素之后，添加一个figcaption元素，文本为Cats hate other Cats。

strong元素用来表示某些文本非常重要或紧急。

在您刚刚添加的图标题中，通过将仇恨包裹在一个强烈的元素中来表明它非常重要。

现在是添加新部分的时候了。在第二个section元素下面添加第三个section元素。

在第三section元素中，添加一个h2元素，文本如下:

现在您将添加一个web表单来收集用户的信息。在Cat Form标题之后，添加一个表单元素。

action属性指示应将表单数据发送到何处。例如，告诉浏览器表单数据应该发送到路径/submit-url。

向form元素添加值为https://freecatphotoapp.com/submit-cat-photo的action属性。

input元素允许您以多种方式从web表单中收集数据。与img元素一样，输入元素是自关闭的，不需要关闭标记。

在表单元素中嵌套一个输入元素。

可以使用type属性创建多种类型的输入。您可以轻松地创建密码字段、重置按钮或让用户从计算机中选择文件的控件。

通过向input元素添加带有值text的type属性，创建一个文本字段以从用户获取文本输入。

为了让action属性中指定的位置访问表单的数据，必须给文本字段一个name属性，并为其分配一个表示正在提交的数据的值。例如，您可以对电子邮件地址文本字段使用以下语法:

将带有catphotourl值的name属性添加到文本字段。

占位符文本用于向人们提示输入哪种信息。例如:

将占位符文本猫照片URL添加到输入元素中。

为了防止用户在缺少必需的信息时提交表单，需要向输入元素添加必需的属性。不需要将值设置为所需的属性。相反，只需将单词required添加到输入元素中，并确保它与其他属性之间有空格。

使用button元素创建一个可点击的按钮。例如:点击Here创建一个带有文本“点击这里”的按钮。

在输入元素下面添加带有文本Submit的按钮元素。单击没有任何属性的表单按钮的默认行为是将表单提交到表单的动作属性中指定的位置。

即使您将按钮添加到文本输入的下方，它们也会在页面上紧挨着显示。这是因为输入元素和按钮元素都是内联元素，它们不会出现在新行上。

默认情况下，您添加的按钮将提交表单。然而，依赖默认行为可能会导致混乱。向按钮添加带有submit值的type属性，以明确表示这是一个提交按钮。

如果你想在多个选项中选择一个答案，你可以使用单选按钮。

这里有一个带有cat选项的单选按钮的例子:猫。记住，输入元素是自闭的。

在文本输入之前，添加一个单选按钮，选项设置为:

标签元素用于帮助将输入元素的文本与输入元素本身相关联(特别是对于屏幕阅读器之类的辅助技术)。例如，cat< / label>因此，点击单词cat也会选择相应的单选按钮。

将单选按钮嵌套在标签元素中。

id属性用于标识特定的HTML元素。每个id属性的值必须与整个页面的所有其他id值唯一。

将值为indoor的id属性添加到单选按钮。当元素有多个属性时，属性的顺序并不重要。

在第一个单选按钮下面创建另一个单选按钮。将它嵌套在一个标签元素中，使用Outdoor作为标签文本。给单选按钮一个id属性，值为outdoor。

注意，可以同时选择两个单选按钮。为了使选择一个单选按钮自动取消选择另一个按钮，两个按钮必须具有具有相同值的name属性。

向两个单选按钮添加值为室内-室外的name属性。

如果选择室内单选按钮并提交表单，则该按钮的表单数据基于其名称和值属性。由于单选按钮没有value属性，表单数据将包括indoor-outdoor=on，当您有多个按钮时，这是没有用的。

向两个单选按钮添加一个value属性。为方便起见，将按钮的value属性设置为与其id属性相同的值。

fieldset元素用于将相关输入和标签分组在web表单中。字段集元素是块级元素，这意味着它们出现在新行上。

在fieldset元素中嵌套室内和室外单选按钮，并且不要忘记缩进单选按钮。

图例元素充当fieldset元素中内容的标题。它为用户提供了应该在表单的那一部分输入什么内容的上下文。

添加一个图例元素，文本是你的猫是室内猫还是室外猫?上面的两个单选按钮。

接下来，您将添加一些新的表单输入元素，因此在当前fieldset元素的正下方添加另一个fieldset元素。

添加一个文字图例元素What’s your cat’s personality?在第二个fieldset元素内部。

表单通常对可能有多个答案的问题使用复选框。例如，这里有一个选项为tacos的复选框:炸玉米饼。

在你刚刚添加的图例元素下，添加一个type属性设置为复选框的输入，并给它一个选项:

爱的

注意loving和标签之间要有空格

添加一个id属性，其值为爱的复选框输入。

还有另一种方法将输入元素的文本与元素本身相关联。您可以将文本嵌套在标签元素中，并添加一个for属性，其值与输入元素的id属性相同。

通过将文本Loving嵌套在标签元素中，并将其放在复选框输入元素的右侧，将文本Loving与复选框关联起来。

将带有personality值的name属性添加到复选框输入元素中。

虽然你在浏览器中不会注意到这一点，但这样做可以让服务器更容易处理你的网页表单，特别是当有多个复选框的时候。

在刚才添加的复选框之后再添加一个复选框。id属性值应该是lazy的，name属性值应该与最后一个复选框相同。

还可以在新复选框的右侧添加一个标签元素，文本为Lazy。确保使用for属性将label元素与新复选框关联起来。

在前一个复选框之后添加最后一个复选框，其id属性值为energetic。name属性应该与前面的复选框相同。

还在新复选框的右侧添加一个标签元素，文本为Energetic。确保将label元素与新的复选框关联起来。

与单选按钮一样，选定复选框的表单数据是名称/值属性对。虽然value属性是可选的，但最好将其包含在页面上的任何复选框或单选按钮中。

为每个复选框添加一个值属性。为方便起见，将每个复选框的value属性设置为与其id属性相同的值。

为了在默认情况下选中复选框或单选按钮，您需要向其添加checked属性。不需要为checked属性设置值。相反，只需将单词checked添加到input元素中，并确保它与其他属性之间有空格。

默认情况下选择第一个单选按钮和第一个复选框。

现在您将向页面添加页脚部分。

在主元素之后，添加一个页脚元素。

在页脚元素中嵌套一个带有文本No Copyright - freeCodeCamp.org的p元素。

将文本freeCodeCamp.org封装在一个锚(a)元素中，使其成为一个链接。href属性应该设置为https://www.freecodecamp.org。

请注意，到目前为止添加到页面的所有内容都在body元素中。应该呈现给页面的所有页面内容元素都放在body元素中。但是，其他重要的信息放在head元素中。

在body元素上方添加一个head元素。

title元素决定浏览器在页面的标题栏或选项卡中显示什么。

使用下面的文本在head元素中添加一个title元素:

CatPhotoApp

注意，页面的整个内容都嵌套在html元素中。所有其他元素都必须是这个html元素的后代。

在开始的html标记中添加值为en的lang属性，以指定页面的语言为英语。

所有页面都应该以。这个特殊字符串被称为声明，它确保浏览器尝试满足行业规范。

将此声明作为代码的第一行添加。

您可以通过在头部添加自关闭元元素来设置浏览器行为。这里有一个例子:

通过创建一个元元素作为head元素的子元素，告诉浏览器将标记解析为多种语言。将其字符集属性设置为UTF-8。