<!DOCTYPE html>
<!--起始标签-->
<meta lang="en">
<!--规定网站语言-->
<head>
<!--头部信息-->
<meta charset="UTF-8">
<!--规定解码字符-->
<title>CatPhotoApp</title>
<!--网站标题(此处的标题在正文处不显示，但有利于搜索引擎抓取)-->
</head>
<!--/代表该标签结束-->
<body>
<!--中部信息-->
<main>
<!--主要内容-->
<h1>CatPhotoApp</h1>
<!--h1规定一个文章(或网站)标题(访问者能在正文处看到)-->
<section>
<!--规定一个部分-->
<h2>Cat Photos</h2>
<!--和h1作用相同，但字更小，最大为h1最小为h6-->
<!-- TODO: Add link to cat photos -->
<!--这是一个注释-->
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
<!--p为一个文章的正文-->
<!--a为作用标签，target是一个属性类别，_blank是一个属性名，这个属性的意思是：在新标签页中打开这个网站
，此外还有_top在当前标签页打开链接并替换掉当前标签页内容，href表示链接，后面的属性是一个网址-->
<!--这串代码运用了嵌套，a把p中的文本cat photos嵌套了，并赋予它两个属性，这几个字在网页中将变蓝，用户
点击后还能在新标签页中跳转到"https://freecatphotoapp.com"网站-->
<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>
<!--img src用来引导图片 后面跟着图片网址或文件路径(/a/b/c/123.jpg),同时给这个图片引导另一个网址，用户点击
图片后便会跳转到"https://freecatphotoapp.com"-->
</section>
<!--这个部分结束了-->
<section>
<!--这个网站的另一个部分-->
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<!--ul标签代表···xxxxx式的无序列表-->
<!--li为列表-->
<figure>
<!--通常，figure的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的
另一部分或附录而不影响主内容流-->
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<!--alt属性意为当img src引导的网址无法访问时，在本该出现图片的地方显示规定的文字-->
<figcaption>Cats <em>love</em> lasagna.</figcaption>
<!--通过在figure插入figcaption(作为第一个或最后一个子元素)，可以将标题或文字(通常用于图片的注释)与figure元素相关联-->
<!--em标签让文字斜体-->
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<!--ol标签代表1.2.3.xxxxx式的有序标签-->
<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>
<!--strong标签让文字粗体-->
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<!--action属性规定当提交表单时，向何处发送表单数据并由人整理统计数据，在码表单时是必需的-->
<fieldset>
<!--fieldset用于对表单中的控制元素进行分组-->
<legend>Is your cat an indoor or outdoor cat?</legend>
<!--legend标签是一个选项表单分组的标题-->
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<!--input本是一个文本框，但将input的type属性设置为radio使它成为单选选项框，input是自闭合标签，在它后面
无需加入</input>，而<input>后面的文字就是该选项-->
<!--label标签使用户即使不点击选项的按钮，只点击选项的文本也可以选择该选项，对于手机端用户较友好-->
<!--id属性用于标识特定的HTML元素。每个id属性的值必须是整个网页唯一的-->
<!--为其添加checked 属性使复选框或单选按钮默认被选中,需要确保它和其他属性之间有空格-->
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
<!--这是另一个选项outdoor-->
<!--两个选项具有相同的name属性为了让选择一个选项，另一个选项就自动取消而不是可以同时选择多个选项-->
<!--value属性规定该选项的值，如果没有value，那么无论用户选择outdoor还是indoor，提交到表单的数据
都是indoor-outdoor=on-->
</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的type属性设定为checkbox以规定它是一个复选框-->
<!--因为label没有嵌套input，给label添加与input元素的id具有相同值的for属性，将文本Loving与复选框相关联，这是另一种方法而已。-->
<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>
<!--将值为personality的name添加到input标签内，可以使服务器更轻松地处理Web表单-->
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<!--将input的type属性设置为text创建一个文本字段以从用户那里获取文本输入-->
<!--为了通过action属性中指定的位置访问表单的数据，必须给文本字段一个name属性，并为其分配一个值来表示数据正在提交-->
<!--placeholder用于占位符，常用于提示用户这个文本框要输入什么-->
<!--required用于防止用户提交时忘记填写某个框-->
<button type="submit">Submit</button>
<!--button用于创建一个按钮-->
<!--type="submit定义这个按钮的作用是“提交”-->
<!--单击没有任何属性的表单按钮的默认行为会将表单提交到表单的action属性中指定的位置。-->
</form>
</section>
</main>
<footer>
<!--底部信息-->
<p>
No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
</p>
</footer>
</body>
</html>
<!--结束-->这一串代码所建立的网站如下图
扫一扫
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
