freecodecamp上的html练习项目

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>