freeCodeCamp 响应式网页设计的认证课程第一章。HTML 标签赋予了网页结构。你可以使用 HTML 标签添加照片、按钮和其它元素到你的网页。在通过编写猫咪相册应用学习 HTML 的课程中，通过编写一个猫咪相册应用，学习最常见的 HTML 标签。以下为我在学习和实战练习过程中所做的笔记，可供参考。
一、重点代码 页面格式：
1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html > <html lang ="en" > <header > <title > CatPhotoApp</title > </header > <body > <main > <section > </section > </main > <footer > <p > Copyright</p > </footer > </body > </html >
figure 标签，用于规定独立的流内容（图像、图表、照片、代码等）：
1 2 3 4 <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 >
form 表单提交：
1 2 3 4 <form action ="https://freecatphotoapp.com/submit-cat-photo" > <input type ="text" name ="catphotourl" placeholder ="cat photo URL" required > <button type ="submit" > Submit</button > </form >
用 fieldset 标签对表单进行分组，一个表单可以有多个 fieldset：
1 2 3 4 5 6 7 8 9 10 11 <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 >
二、页面展示