CatPhotoApp
<!DOCTYPE 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>
<!-- target的值_self：默认值。在当前窗口或框架中加载链接的目标页面。 _blank：在新窗口或标签页中打开链接的目标页面。
_parent：在父级框架中加载链接的目标 -->
<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>
<!-- alt是在图片显示不出来的时候显示的文字 -->
</section>
<section>
<!-- section元素更加语义化，用于表示文档中的逻辑部分section可以与其他语义化元素结合使用，
例如 <header>、<footer>、<article> 等，来构建更具意义的文档结构。，而 <div> 元素更加通用，
用于进行布局和组织内容。在实践中，应根据具体的语义和结构需求来选择使用哪个元素。 -->
<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>
<!-- em是强调文本 -->
</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和figcaption搭配使用 -->
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<!-- action是表单提交的服务器 -->
<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>
<!-- label用于定义表单元素的标签通常与表单控件例如复选框或单选按钮相关联
<label>标签的主要目的是增强表单的可用性，使得用户点击标签时可以激活对应的表单控件，而不仅仅是点击控件本身。
使用for属性，for属性指定与此表单关联的表单控件id值 -->
</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>
<!-- type属性有14种：text\password\checkbox\radio\submit\reset\button\file\number\data\email\tel\url\search
name属性是表单提交到服务器时的标识符，以便服务端能够准确的识别和处理这些字段。在服务端常常根据name属性获取对应的值如存储在数据库或发送电子邮件-->
<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>
效果图
一、超链接拥有的属性：
target:
__blank打开新的一页
self默认值 在当前页面打开
parent：在父级页面打开
二、复选框 input标签里面的
type属性：
- text：用于接受单行文本输入。
- password：用于接受密码输入，字符将被隐藏。
- checkbox：用于创建复选框。
- radio：用于创建单选按钮。
- submit：用于提交表单数据。
- reset：用于重置表单中的值为默认值。
- button：普通按钮，没有默认行为。
- file：用于选择文件上传。
- number：用于接受数字输入。
- date：用于接受日期输入。
- email：用于接受电子邮件地址输入。
- tel：用于接受电话号码输入。
- url：用于接受 URL 地址输入。
- search：用于接受搜索查询输入。
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
