HTML入门案例Demo【猫咪相册】
2023-06-13 09:16:27 时间
案例代码:
<!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>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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>
效果图:
相关文章
- HTML中document的作用,html中的document对象是什么?一篇文章让你了解document对象
- html里面超链接alt_怎样用HTML代码在图片插入超链接[通俗易懂]
- HTML添加背景图片_html背景图片铺满网页
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- JavaScript案例:表格隔行变色效果及表单全选取消全选
- 经典永不过时的句子_网红的成功案例分析
- Echarts5.3.2可视化案例-交互篇
- 花上百万元用three.js开发的元宇宙空间,在线大型车展参考案例
- 不背锅运维:享一个具有高可用性和可伸缩性的ELK架构实战案例
- 【HTML】HTML 注册表单案例 ② ( 表格中的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )
- 文件Linux 打开 HTML 文件的方法(linux打开html)
- Oracle故障处理:从零开始(oracle故障案例)
- MySQL 删表卡死:案例分析与解决方案(mysql删表卡死)
- LVS实战案例:LVS-NAT模式案例
- 案例 | 病理“数字化”,Proscia 用 AI 提升病理诊断精确度
- 实用Linux系统案例:从入门到精通(linux系统案例)
- 使用HTML实现MySQL资料读取(html读取mysql)
- 使用MySQL和HTML打造高效的数据驱动网站(mysql与html)