learn html by building a cat photo app

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

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

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

1标题标签

更改<h1>标签元素的内容

  <h1>CatPhotoApp</h1>

2

在<h1>标签下方添加<h2>标签

 <h1>CatPhotoApp</h1><h2>Cat Photos</h2>

3段落标签h

在<h2>标签下面添加<p>标签

    <h2>Cat Photos</h2><p>See more cat photos in our gallery.</p>

4注释

在<p>元素上面添加注释

<!--TODO: Add link to cat photos--><p>See more cat photos in our gallery.</p>

5main标签

在<h1>元素之前添加<main>开始标记，在<p>元素之后添加</main>结束标记标识页面的主要部分

  <main><h1>CatPhotoApp</h1><h2>Cat Photos</h2><!-- TODO: Add link to cat photos --><p>See more cat photos in our gallery.</p></main>

6

正确缩进嵌套在<main>中的<p>

<main><h1>CatPhotoApp</h1><h2>Cat Photos</h2><!-- TODO: Add link to cat photos --><p>See more cat photos in our gallery.</p>
</main>

7img标签

在<p>元素下添加<img>元素，<img>元素没有结束标签，称为自结束标签

 <p>See more cat photos in our gallery.</p><img>

8img标签-src属性

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

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">

9img标签-alt属性

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

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">

10链接标签a

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

      <p>See more cat photos in our gallery.</p><a href="https://freecatphotoapp.com"></a>

11

在链接元素中添加文本。

<a href="https://freecatphotoapp.com">link to cat pictures</a>

12在p中嵌套a

通过在<p>中的文字左右添加<a>将其变成链接

<p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p><a href="https://freecatphotoapp.com">link to cat pictures</a>

13

删除<p>元素下面的链接

<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

14a标签_target属性

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

 <p>See more <a target="_blank" href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>

15a中嵌套img，图像链接

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

<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

16section标签

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

使用<section>包含<h2>,<p>,<a>

  <main><h1>CatPhotoApp</h1><section><h2>Cat Photos</h2><!-- TODO: Add link to cat photos --><p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p><a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a></section></main>

17

在现在的<section>元素下再添加一个<section>元素

<section><h2>Cat Photos</h2><!-- TODO: Add link to cat photos --><p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p><a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a></section><section></section>

18

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

<section><h2>Cat Lists</h2></section>

19

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

<section><h2>Cat Lists</h2><h3>Things cats love:</h3></section>

20ul标签，无序列表

在<h3>后面添加一个无序列表<ul>

 <h2>Cat Lists</h2><h3>Things cats love:</h3><ul></ul>

21li，列表项

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

<ul><li>cat nip </li><li>laser pointers</li><li>lasagna</li></ul>

22

在<ul>后添加一个<img>，属性src、alt给了

      <ul><li>cat nip</li><li>laser pointers</li><li>lasagna</li></ul><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">

23figure将图像和标题相关联

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

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

  <figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."></figure>

24figcaption图像标题

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

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

 <figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."><figcaption>Cats love lasagna.</figcaption></figure>

25em，强调

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

<figcaption>Cats <em>love</em> lasagna.</figcaption>

26

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

 <figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."><figcaption>Cats <em>love</em> lasagna.</figcaption>  </figure><h3>Top 3 things cats hate:</h3>

27ol，无序列表

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

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

<h3>Top 3 things cats hate:</h3><ol><li>flea treatment</li><li>thunder</li><li>other cats</li></ol>

28

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

 <ol><li>flea treatment</li><li>thunder</li><li>other cats</li></ol><figure></figure>

29

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

    <figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"></figure>

30img-alt属性

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

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">

31

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

 <figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."><figcaption>Cats hate other cats.</figcaption></figure>

32strong加粗文本

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

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

  <figcaption>Cats <strong>hate</strong> other cats.</figcaption>

33

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

 <section><h2>Cat Lists</h2><h3>Things cats love:</h3><ul><li>cat nip</li><li>laser pointers</li><li>lasagna</li></ul><figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."><figcaption>Cats <em>love</em> lasagna.</figcaption>  </figure><h3>Top 3 things cats hate:</h3><ol><li>flea treatment</li><li>thunder</li><li>other cats</li></ol><figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."><figcaption>Cats <strong>hate</strong> other cats.</figcaption>  </figure></section><section></section>

34

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

<section><h2>Cat Form</h2></section>

35from表单

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

 <h2>Cat Form</h2><form></form>

36form-action属性

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

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

 <form action="https://freecatphotoapp.com/submit-cat-photo"></form>

37input标签

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

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

 <form action="https://freecatphotoapp.com/submit-cat-photo"><input /></form>

38input-type=“text”，文本框

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

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

<input type="text">

39input-name属性

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

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

<input type="text" name="catphotourl">

40input-placeholder占位符

占位符文本用于向人们提示输入哪种信息。例如:<input type=“text” placeholder=“Email address”>

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

 <input type="text" name="catphotourl" placeholder="cat photo URL">

41input-required属性,必填

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

<input type="text" name="catphotourl" placeholder="cat photo URL" required>

42button按钮

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

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

<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button>submit</button>

43button-submit属性

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

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

<button type="submit">Submit</button>

44input-type=“radio”，单选框

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

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

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

<input type="radio">Indoor
<input type="text" name="catphotourl" placeholder="cat photo URL" required>

45label>input,单选选文字也能选中

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

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

 <label><input type="radio"> Indoor</label>

46input-id,唯一

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

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

<label><input type="radio" id="indoor"> Indoor</label>

47

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

<label><input id="indoor" type="radio"> Indoor</label>
<label><input id="outdoor" type="radio">Outdoor</label>

48input-name,选择一个单选按钮自动取消选择另一个按钮

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

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

<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

49input-value

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

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

<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor"value="outdoor">Outdoor</label>

50fieldset,表单分组

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

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

 <fieldset>  <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label><label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset>

51legend,表单分组的标题

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

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

<fieldset><legend>Is your cat an indoor or outdoor cat?</legend><label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label><label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset>

52

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

<fieldset><legend>Is your cat an indoor or outdoor cat?</legend><label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label><label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset><fieldset></fieldset>

53

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

<fieldset><legend>What's your cat's personality?</legend>
</fieldset>

54input-type=“checkbox”

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

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

爱的

<legend>What's your cat's personality?</legend>
<input type="checkbox"> Loving

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

55复选框文本

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

 <input type="checkbox" id="loving"> Loving

56label给复选框文本

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

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

<input id="loving" type="checkbox"> <label for="loving">Loving</label>

57input-name属性

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

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

<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>

58

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

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

<input id="loving" type="checkbox" name="personality"><label for="loving">Loving</label>
<input id="lazy" name="personality" type="checkbox"><label for="lazy">Lazy</label>

59

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

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

 <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label><input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label><input type="checkbox" id="energetic" name="personality"><label for="energetic">Energetic</label>

60input-value属性

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

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

<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset><fieldset><legend>What's your cat's personality?</legend><input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label><input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label><input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label></fieldset>

61intput-checked属性，默认选中

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

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

<fieldset><legend>Is your cat an indoor or outdoor cat?</legend><label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label><label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset><fieldset><legend>What's your cat's personality?</legend><input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label><input id="lazy" type="checkbox" name="personality" value="lazy" > <label for="lazy">Lazy</label><input id="energetic" type="checkbox" name="personality" value="energetic" > <label for="energetic"> Energetic</label></fieldset>

62footer页脚元素

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

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

    </main><footer></footer></body>

63footer中嵌套p

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

<footer><p>No Copyright - freeCodeCamp.org</p>
</footer>

64

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

No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>

65head元素

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

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

<html><head></head><body>

66head中添加title

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

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

CatPhotoApp

  <head><title>CatPhotoApp</title></head>

67html-lang属性

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

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

<html lang="en">

68`<!DOCTYPE html>`文档声明

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

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

<!DOCTYPE html>
<html lang="en">

69meta-charset字符集

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

<meta attribute="value">

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

<head><meta charset="UTF-8"><title>CatPhotoApp</title></head>

freecodecamp上的html练习项目相关推荐

川大优秀毕业生在GitHub上建了一个项目《深度学习500问》，还未完结就获赞无数
近年来,深度学习在语音.图像.自然语言处理等领域都取得了非常不错的成果,自然而然地成为技术人员争相学习的热点. 为了帮助正在学习深度学习的伙伴们,川大的一名优秀毕业生,在GitHub上创建了一个项目: ...
如何在window上把你的项目提交到github
1.首先你需要在https://github.com/ 上注册一个账户 2.注册成功以后,你需要新建一个repository(储藏室),这个用来存放你要上传的项目点击中间的带加号的图标就可以新建re ...
本篇文档介绍如何手动在ECS实例上部署Java web项目
本篇文档介绍如何手动在ECS实例上部署Java web项目.适用于刚开始使用阿里云进行建站的个人用户. 项目配置 { .section} 本篇教程在示例步骤中使用了以下版本的软件.操作时,请您以实际软 ...
idea怎么更改推到github的路径_IDEA 拉取、上传、更新项目到 Gitee+GitHub_超详细超简单版...
注:本人使用的idea是最新版(2019.1.2),要是其他的版本的不要惊慌〜,基本上都一样,没有什么太大的差别的首先我要说一下,拉取项目分两个,一个,你就没有项目,拉取仓库的整个项目,而另一种的, ...
2020年10月份Github上热门的开源项目
10月份GitHub上最热门的Java开源项目排行已经出炉啦,一起来看看上榜详情吧: 1. base-admin https://github.com/huanzi-qch/base-admin St ...
如何优化WebAPP性能：从五个层面上彻底优化前端项目性能
如何优化WebAPP性能:从五个层面上彻底优化前端项目性能资源层面上的优化该项措施可以帮助我们优化 FP.FCP.LCP 指标. 压缩文件.使用 Tree-shaking 删除无用代码服务端配置 ...
如何优化WebAPP性能：从四个层面上彻底优化前端项目性能
如何优化WebAPP性能:从四个层面上彻底优化前端项目性能资源层面上的优化该项措施可以帮助我们优化 FP.FCP.LCP 指标. 压缩文件.使用 Tree-shaking 删除无用代码服务端配置 ...
在ubuntu上启动一个vue项目
在ubuntu上启动一个vue项目本地: npm install npm run dev npm run build 然后发现报错,大面积报错,原来是被npm给墙了经过 npm install - ...
iOS开发必读-GitHub 上Top100 的 Objective-C 项目
这篇文章是官方账号在简书推出的文章,感兴趣的请点击下面: 点我看<iOS开发必读-GitHub 上Top100 的 Objective-C 项目> 简单摘录5个项目: 1.AFNetwor ...

freecodecamp上的html练习项目