freecodecamp 通过创建猫咪相册应用学习 HTML, 已完成HTML 标签赋予了网页结构。你可以使用 HTML 标签添加照片、按钮和其它元素到你的网页。

AmmAzhou

已于 2023-10-31 17:00:02 修改

阅读量467

点赞数 1

文章标签：学习 html 前端

于 2023-10-27 11:18:42 首次发布

本文链接：https://blog.csdn.net/AmmAzhou/article/details/134072338

版权

<!DOCTYPE html>

<html lang="en">
  <head>
<meta charset="UTF-8">
    <title>CatPhotoApp</title>
  </head>
  <body>
    <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>
      <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>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <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>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>
        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
      </p>
    </footer>
  </body>
</html>

下面有带有注释的代码可以帮助大家更好的理解哦

1. **DOCTYPE 和 HTML 标签**：DOCTYPE 声明文档类型，告诉浏览器使用哪种 HTML 版本来渲染页面。HTML 标签是 HTML 文档的根元素。

2. **head 标签**：head 部分包含了关于文档的元信息，比如字符集声明和标题等。

3. **title 标签**：用于指定文档的标题，通常会显示在浏览器的标题栏或标签页上。

4. **body 标签**：body 部分包含了页面的主要内容。

5. **main 标签**：用于包裹页面的主要内容部分，可以包含多个 section。

6. **section 标签**：用于划分页面中的不同部分，每个 section 可以包含一个标题（h2）和其他内容。

7. **a 标签**：用于创建链接。在代码中有两个链接，分别指向两个不同的猫咪图片。

8. **h2、h3 标签**：用于创建标题，h2 表示更大的标题，h3 表示次级标题。

9. **ul 和 ol 标签**：ul 用于创建无序列表，ol 用于创建有序列表，分别列出了猫咪喜欢和讨厌的事物。

10. **img 标签**：用于插入图片，alt 属性用于提供图片的替代文本，以便在无法显示图片时进行说明。

11. **figure 标签**：用于包含独立的内容，如图像、图表、照片、代码清单等。

12. **form 标签**：用于创建一个包含表单控件的表单，这里包含了一些单选框、复选框和文本输入框，以及一个提交按钮。

13. **fieldset 和 legend 标签**：用于将表单控件分组，并添加一个说明性文本。

14. **footer 标签**：用于定义页面或区段的页脚部分，通常包含版权信息或其他相关链接。

整体上，这段代码展示了一个简单的包含猫咪图片和相关信息的网页，同时提供了一个简单的表单，用于提交猫咪图片的 URL

<!DOCTYPE html> <!--声明文档类型为HTML-->
<html lang="en"> <!--指定文档的语言为英语-->
  <head> <!--定义文档的头部分-->
    <meta charset="UTF-8"> <!--指定文档的字符编码为UTF-8-->
    <title>CatPhotoApp</title> <!--设置页面的标题-->
  </head>
  <body> <!--定义文档的主体部分-->
    <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> <!--插入一张图片-->
      </section>
      <section> <!--另一个区块-->
        <h2>Cat Lists</h2> <!--小标题-->
        <h3>Things cats love:</h3> <!--小标题-->
        <ul> <!--创建一个无序列表-->
          <li>猫薄荷</li> <!--列表项-->
          <li>激光笔</li> <!--列表项-->
          <li>千层面</li> <!--列表项-->
        </ul>
        <figure> <!--定义独立的内容，比如图片及其标题-->
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="一盘上面有意面的千层面。"> <!--插入一张图片-->
          <figcaption>猫咪们喜欢千层面。</figcaption>  <!--图像的标题-->
        </figure>
        <h3>Top 3 things cats hate:</h3> <!--小标题-->
        <ol> <!--创建一个有序列表-->
          <li>除蚤处理</li> <!--列表项-->
          <li>雷声</li> <!--列表项-->
          <li>其他猫咪</li> <!--列表项-->
        </ol>
        <figure> <!--定义另一个独立的内容-->
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="五只猫在田野里张望。"> <!--插入一张图片-->
          <figcaption>猫咪们讨厌其他猫咪。</figcaption> <!--图像的标题-->
        </figure>
      </section>
      <section> <!--另一个区块-->
        <h2>Cat Form</h2> <!--小标题-->
        <form action="https://freecatphotoapp.com/submit-cat-photo"> <!--创建一个用于提交猫咪照片的表单-->
          <fieldset> <!--创建一个字段集，用于组合相关的表单元素-->
            <legend>你的猫是室内猫还是室外猫？</legend> <!--字段集的标题-->
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> 室内</label> <!--单选框选项-->
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> 室外</label> <!--单选框选项-->
          </fieldset>
          <fieldset> <!--另一个字段集-->
            <legend>你的猫的个性是什么？</legend> <!--字段集的标题-->
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">亲爱</label> <!--复选框选项-->
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">懒惰</label> <!--复选框选项-->
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">精力充沛</label> <!--复选框选项-->
          </fieldset>
          <input type="text" name="catphotourl" placeholder="猫咪照片的URL" required> <!--文本输入框-->
          <button type="submit">提交</button> <!--提交按钮-->
        </form>
      </section>
    </main>
    <footer> <!--定义页面的页脚-->
      <p>
        无版权 - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a> <!--包含版权信息的链接-->
      </p>
    </footer>
  </body>
</html>