开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
项目说明
| 说明项 | 具体内容 |
|---|---|
| 项目简介 | 猫咪相关的展示介绍与问卷采集网页 |
| 技术栈 | HTML |
| 重要知识点 | HTML中的列表标签和表单标签 |
重点知识
<main> 和 <section> 标签的使用
<main>（表示body中的主体内容部分） 和<section>（表示HTML文档中一个通用独立章节） 让结构更加清晰
图片链接
将图片用链接包括，点击图片即可跳转至对应链接处
<figure> 和 <figcaption> 标签的使用
- HTML
<figure>元素代表一段独立的内容，常与说明（caption）<figcaption>配合使用，并且作为一个独立的引用单元。- 使用场景：
<figure>用于插入图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。<figure>中插入的第一个<figcaption>元素显示为图的标题
<fieldset> 和 <legend> 标签的使用
<fieldset>元素用于对表单中的控制元素进行分组（也包括label元素）内置的
<legend>元素作为 fieldset 的标题
<fieldset> 在 <form> 中的用法：对表单进行分组，一个表单可以有多个fieldset，同时用legend说明每组的内容描述
<form> 表单控件
一组单选或复选选项必须有相同的name值
form元素中包含的表单控件有：
| 控件元素 | 功能使用 |
|---|---|
| input | input 元素是空的, 可以通过type属性值设置不同的形式 |
| button | 定义一个按钮， 可以放置内容，比如文本或图像 |
| textarea | 定义一个多行的文本输入控件 |
| select | 创建下拉列表，内部可用 【option 定义可选项】 和 【optgroup 定义可选项组】 |
| fieldset | 对表单中的相关元素进行分组 |
| label | 为 input 元素定义标注（标签） |
整体结构与代码
（一）标题模块
<h1>CatPhotoApp</h1>
（二）主体内容模块
注意：主体模块需要用 main 标签整体包起来
<main>
【主体内容模块：包括3个section板块】
</main>
板块一 : 猫猫图片展示介绍
板块一：猫猫图片展示介绍(主要练习图片和链接的使用)
<section>
<h2>Cat Photos</h2>
<p>Click here to view more <a href="https://freecatphotoapp.com/">cat photos</a>.</p>
<!-- TODO 将图片用链接包括，点击图片即可跳转至对应链接处 -->
<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> 和<figcaption> 标签？ -->
<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 treatmen</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>
板块三 : 猫猫信息问卷收集
表单练习 : 主要练习了 input 控件（单选、复选、文本框）和 button 控件
该表单包含四个部分：
【问题一】板块、【问题二】板块、【图片上传框】板块、【提交】板块
<section>
<h2>Cat Form</h2>
<!-- 问题一 -->
<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label for="indoor">
<input type="radio" name="q1" id="indoor" checked>Indoor
</label>
<label for="outdoor">
<input type="radio" name="q1" id="outdoor">Outdoor
</label>
</fieldset>
<!-- 问题二 -->
<fieldset>
<legend>What's your cat's personality?</legend>
<label for="loving">
<input type="checkbox" name="q2" id="loving" checked>Loving
</label>
<label for="lazy">
<input type="checkbox" name="q2" id="lazy">Lazy
</label>
<label for="energetic">
<input type="checkbox" name="q2" id="energetic">Energetic
</label>
</fieldset>
<!-- 图片上传框 -->
<!-- TODO 图片上传框要求：有默认提示文字（placeholder属性）和 必须填写（required属性），最好加上一个name值 -->
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<!-- 提交按钮 -->
<button type="submit">Submit</button>
</section>
（三）底部说明模块
底部页面标志和网页跳转链接
<footer>
<p>
No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
</p>
</footer>
