Learn HTML by Building a Cat Photo

Step 20

After the h3 element with the Things cats love: text, add an unordered list (ul) element. Note that nothing will be displayed at this point.

        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul></ul>

无序列表:

• Coffee
• Tea
• Milk

Step 21

Use list item (li) elements to create items in a list. Here is an example of list items in an unordered list:

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

Within the ul element nest three list items to display three things cats love:

cat nip laser pointers lasagna

        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>

<li> 标签定义列表项目。

<li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中

Step 22

After the unordered list, add a new image with an src attribute value set to:

https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg

And its alt attribute value to:

A slice of lasagna on a plate.

        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate">

Step 23

The figure element represents self-contained content and will allow you to associate an image with a caption.

Nest the image you just added within a figure element.

        <figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."></figure>

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

Step 24

A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element. For example, <figcaption>A cute cat</figcaption> adds the caption A cute cat.

After the image nested in the figure element, add a figcaption element with text set to:

Cats love lasagna.

        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats love lasagna</figcaption>
        </figure>

<figcaption> 标签为 <figure> 元素定义标题。

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

Step 25

Emphasize the word love in the figcaption element by wrapping it in an emphasis em element.

          <figcaption>Cats <em>love</em> lasagna.</figcaption>

<em> 标签是一个短语标签，用来呈现为被强调的文本。

提示：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。

所有短语标签：

标签	描述
<em>	呈现为被强调的文本。
<strong>	定义重要的文本。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

Step 26

After the figure element, add another h3 element with the text:

Top 3 things cats hate:

        <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>

Step 27

The code for an ordered list (ol) is similar to an unordered list, but list items in an ordered list are numbered when displayed.

After the second section element's last h3 element, add an ordered list with these three list items:

flea treatment thunder other cats

        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。

有序列表:

1. Coffee
2. Tea
3. Milk

无序列表:

• Coffee
• Tea
• Milk

属性	值	描述
compact	compact	HTML5 中不支持，不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。
reversedNew	reversed	指定列表倒序(9,8,7...)
start	number	一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
type	a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号（默认）	规定列表的类型。不赞成使用。请使用样式代替。

Step 28

After the ordered list, add another figure element.

        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          
        </figure>

Step 29

Inside the figure element you just added, nest an img element with a src attribute set to https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg.

        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg">
        </figure>

Step 30

To improve accessibility of the image you just added, add an alt attribute with the text:

Five cats looking around a field.

          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">

Step 31

After the last img element, add a figcaption element with the text Cats hate other cats.

          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats hate other cats.</figcaption>

Step 32

The strong element is used to indicate that some text is of strong importance or urgent.

In the figcaption you just added, indicate that hate is of strong importance by wrapping it in a strong element.

 

  <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  

Step 33

It is time to add a new section. Add a third section element below the second section element.

      <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>
      </section>

Step 34

Inside the third section element, add an h2 element with the text:

Cat Form

      <section>
        <h2>Cat Form</h2>
      </section>

Step 35

Now you will add a web form to collect information from users.

After the Cat Form heading, add a form element.

        <h2>Cat Form</h2>
        <form></form>

<form> 标签用于创建供用户输入的 HTML 表单。

<form> 元素包含一个或多个如下的表单元素：

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>
• <fieldset>
• <label>

属性	值	描述
accept	MIME_type	HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset	character_set	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocompleteNew	on off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
method	get post	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
novalidateNew	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top	规定在何处打开 action URL。

Step 36

The action attribute indicates where form data should be sent. For example, <form action="/submit-url"></form> tells the browser that the form data should be sent to the path /submit-url.

Add an action attribute with the value https://freecatphotoapp.com/submit-cat-photo to the form element.

        <form action="https://freecatphotoapp.com/submit-cat-photo">
        </form>

Step 37

The input element allows you several ways to collect data from a web form. Like img elements, input elements are self-closing and do not need closing tags.

Nest an input element in the form element.

        <form action="https://freecatphotoapp.com/submit-cat-photo">
        <input>
        </form>

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。

注意: <input> 元素是空的,它只包含标签属性。

提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type="file")
align	left right top middle bottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocompleteNew	on off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNew	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
formNew	form_id	form 属性规定 <input> 元素所属的一个或多个表单。
formactionNew	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNew	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNew	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNew	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew	_blank _self _parent _top framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNew	pixels	规定 <input>元素的高度。(只针对type="image")
listNew	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
maxNew	number date	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
minNew	number date	属性规定 <input>元素的最小值。
multipleNew	multiple	属性规定允许用户输入到 <input> 元素的多个值。
name	text	name 属性规定 <input> 元素的名称。
patternNew	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNew	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
readonly	readonly	readonly 属性规定输入字段是只读的。
requiredNew	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
stepNew	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。
widthNew	pixels	width 属性规定 <input> 元素的宽度。 (只针对type="image")

Step 38

There are many kinds of inputs you can create using the type attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer.

Create a text field to get text input from a user by adding the type attribute with the value text to the input element.

          <input type="text">

type

button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week

type 属性规定要显示的 <input> 元素的类型。

Step 39

In order for a form's data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: <input type="text" name="email">.

Add the name attribute with the value catphotourl to your text field.

         <input type="text" name="catphotourl">

name 属性规定 <input> 元素的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。

注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

Step 40

Placeholder text is used to give people a hint about what kind of information to enter into an input. For example, <input type="text" placeholder="Email address">.

Add the placeholder text cat photo URL to your input element.

          <input type="text" name="catphotourl" placeholder="cat photo URL">

placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

该提示会在用户输入值之前显示在输入字段中。

注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

Step 41

To prevent a user from submitting your form when required information is missing, you need to add the required attribute to an input element. There's no need to set a value to the required attribute. Instead, just add the word required to the input element, making sure there is space between it and other attributes.

          <input type="text" name="catphotourl" placeholder="cat photo URL" required>

required 属性是一个布尔属性。

required 属性规定必需在提交表单之前填写输入字段。

注意：required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

Step 42

Use the button element to create a clickable button. For example, <button>Click Here</button> creates a button with the text Click Here.

Add a button element with the text Submit below the input element. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's action attribute.

          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button>Submit</button>

<button> 标签定义一个按钮。

在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

属性	值	描述
autofocusNew	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
formNew	form_id	规定按钮属于一个或多个表单。
formactionNew	URL	规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
formenctypeNew	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。
formmethodNew	get post	规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
formnovalidateNew	formnovalidate	如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
formtargetNew	_blank _self _parent _top framename	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
name	name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

Step 43

Even though you added your button below the text input, they appear next to each other on the page. That's because both input and button elements are inline elements, which don't appear on new lines.

The button you added will submit the form by default. However, relying on default behavior may cause confusion. Add the type attribute with the value submit to the button to make it clear that it is a submit button.

          <button type="submit">Submit</button>

type

button reset submit

规定按钮的类型。

Step 44

You can use radio buttons for questions where you want only one answer out of multiple options.

Here is an example of a radio button with the option of cat: <input type="radio"> cat. Remember that input elements are self-closing.

Before the text input, add a radio button with the option set as:

Indoor

          <input type="radio">Indoor
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>

Step 45

label elements are used to help associate the text for an input element with the input element itself (especially for assistive technologies like screen readers). For example, <label><input type="radio"> cat</label> makes it so clicking the word cat also selects the corresponding radio button.

  <label> <input type="radio"> Indoor</label>

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

属性	值	描述
for	element_id	规定 label 与哪个表单元素绑定。
formNew	form_id	规定 label 字段所属的一个或多个表单。

Step 46

The id attribute is used to identify specific HTML elements. Each id attribute's value must be unique from all other id values for the entire page.

Add an id attribute with the value indoor to the radio button. When elements have multiple attributes, the order of the attributes doesn't matter.

          <label><input type="radio" id="indoor"> Indoor</label>

Step 47

Create another radio button below the first one. Nest it inside a label element with Outdoor as the label text. Give the radio button an id attribute with outdoor as the value.

          <label><input id="indoor" type="radio"> Indoor</label>
          <label><input type="radio" id="outdoor">Outdoor</label>

Step 48

Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a name attribute with the same value.

Add the name attribute with the value indoor-outdoor to both radio buttons.

 

<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

Step 49

If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

Add a value attribute to both radio buttons. For convenience, set the button's value attribute to the same value as its id attribute.

          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>

input中id和name属性的区别

        到现在还没有搞明白input中name和id的区别，在学习中遇到了这个问题，将搜集的资料整理出来以备后用 做网站很久了，但到现在还没有搞明白input中name和id的区别，最近学习jquery，又遇到这个问题，就在网上搜集资料。看到这篇，就整理出来，以备后用。

        可以说几乎每个做过Web开发的人都问过，到底元素的ID和Name有什么区别阿？为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。

        上周我也遇到了ID和Name的问题，在页面里输入了一个input type="hidden"，只写了一个ID='SliceInfo'，赋值后submit，在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示，于是在input里加了个Name='SliceInfo'，就一切ok了。

        第一段里对于ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完全由ID来代替，从而将其取消掉。具体用途有：

用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。
用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。

当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值element.name = "..."来添加其Name，而必须在创建Element时，使用document.createElement('<element name = "myName"></element>')为元素添加Name属性。这是什么意思啊？看下面的例子就明白了。

代码如下:

<script language="JavaScript"> 
var input = document.createElement('INPUT'); 
input.id = 'myId'; 
input.name = 'myName'; 
alert(input.outerHTML); 
< /script>

消息框里显示的结果是：<INPUT id=myId>。

代码如下:

< script language="JavaScript"> 
var input = document.createElement('<INPUT name="myName">'); 
input.id = 'myId'; 
alert(input.outerHTML); 
< /script>

消息框里显示的结果是：<INPUT id=myId name=myName>。
初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白。

这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中。

表单元素(form input textarea select)与框架元素(iframe frame)用 name
这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只
接收有name的元素, 赋ID的元素通过表单是接收不到值的, 你自己可以验证一下.
有一个例外: A 可以赋 name 作为锚点, 也可以赋ID

当然上述元素也可以赋ID值, 赋ID值的时候引用这些元素的方法就要变一下了.
赋 name: document.formName.inputName document.frames("frameName")
赋 ID : document.getElementById("inputID") document.all.frameID

只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)
body li table tr td th p p span pre dl dt dd font b 等等

引用文章出处

从该篇文章转载

Step 50

The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line.

Nest the Indoor and Outdoor radio buttons within a fieldset element, and don't forget to indent the radio buttons.

          <fieldset>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>

定义围绕表单中元素的边框

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

属性	值	描述
disabledNew	disabled	规定该组中的相关表单元素应该被禁用。
formNew	form_id	规定 fieldset 所属的一个或多个表单。
nameNew	text	规定 fieldset 的名称。

Step 51

The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.

Add a legend element with the text Is your cat an indoor or outdoor cat? above both of the radio buttons.

          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>

The <legend> 元素为 <fieldset>元素定义标题

Step 52

Next, you are going to add some new form input elements, so add another fieldset element directly below the current fieldset element.

          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset></fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>

Step 53

Add a legend element with the text What's your cat's personality? inside the second fieldset element.

          <fieldset>
            <legend>What's your cat's personality?</legend>
          </fieldset>

Step 54

Forms commonly use checkboxes for questions that may have more than one answer. For example, here's a checkbox with the option of tacos: <input type="checkbox"> tacos.

Under the legend element you just added, add an input with its type attribute set to checkbox and give it the option of:

Loving

<legend>What's your cat's personality?</legend>
            <input type="checkbox"> Loving

Step 55

Add an id attribute with the value loving to the checkbox input.

<input type="checkbox" id="loving"> Loving

Step 56

There's another way to associate an input element's text with the element itself. You can nest the text within a label element and add a for attribute with the same value as the input element's id attribute.

Associate the text Loving with the checkbox by only nesting the text Loving in a label element and place it to the right side of the checkbox input element.

<input id="loving" type="checkbox"> <label for="loving">Loving</label>

Step 57

Add the name attribute with the value personality to the checkbox input element.

While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes.

 <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>

Step 58

Add another checkbox after the one you just added. The id attribute value should be lazy and the name attribute value should be the same as the last checkbox.

Also add a label element to the right of the new checkbox with the text Lazy. Make sure to associate the label element with the new checkbox using the for attribute.

 <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
 <input id="lazy" type="checkbox" name="personality"><label for="lazy">Lazy</label>

Step 59

Add a final checkbox after the previous one with an id attribute value of energetic. The name attribute should be the same as the previous checkbox.

Also add a label element to the right of the new checkbox with text Energetic. Make sure to associate the label element with the new checkbox.

            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality"><label for="energetic">Energetic</label>

Step 60

Like radio buttons, form data for selected checkboxes are name / value attribute pairs. While the value attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page.

Add a value attribute to each checkbox. For convenience, set each checkbox's value attribute to the same value as its id attribute.

          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> 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"> <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>

Step 61

In order to make a checkbox checked or radio button selected by default, you need to add the checked attribute to it. There's no need to set a value to the checked attribute. Instead, just add the word checked to the input element, making sure there is space between it and other attributes.

Make the first radio button and the first checkbox selected by default.

          <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>

checked 属性是一个布尔属性。

checked 属性规定在页面加载时应该被预先选定的 <input> 元素。

checked 属性适用于 <input type="checkbox"> 和 <input type="radio">。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

Step 62

Now you will add a footer section to the page.

After the main element, add a footer element.

    </main>
    <footer></footer>
  </body>
</html>

<footer> 标签定义文档或者文档的一部分区域的页脚。

<footer> 元素应该包含它所包含的元素的信息。

在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中，您可以定义多个 <footer> 元素。

Step 63

Nest a p element with the text No Copyright - freeCodeCamp.org within the footer element.

    <footer>
      <p>No Copyright - freeCodeCamp.org</p>
    </footer>

Step 64

Make the text freeCodeCamp.org into a link by enclosing it in an anchor (a) element. The href attribute should be set to https://www.freecodecamp.org.

No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>

Step 65

Notice that everything you've added to the page so far is inside the body element. All page content elements that should be rendered to the page go inside the body element. However, other important information goes inside the head element.

Add a head element just above the body element.

  <head></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>

<head> 元素是所有头部元素的容器。

<head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。

以下列出的元素能被用在 <head> 元素内部：

• <title> （在头部中，这个元素是必需的）
• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>

<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。

<title>元素：

• 定义浏览器工具栏中的标题
• 提供页面被添加到收藏夹时的标题
• 显示在搜索引擎结果中的页面标题

注释：一个 HTML 文档中不能有一个以上的 <title> 元素。

提示：如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。

<style> 标签定义 HTML 文档的样式信息。

在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。

每个 HTML 文档能包含多个 <style> 标签。

提示：如需链接外部样式表，请使用 <link> 标签。

提示：如需学习更多有关样式表的知识，请阅读我们的 CSS 教程。

注释：如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。

<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。

在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。

提示：请把 <base> 标签排在 <head> 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。

注释：如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

元数据（Metadata）是数据的数据信息。

<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

注意： link 元素是空元素，它仅包含属性。

注意： 此元素只能存在于 head 部分，不过它可出现任何次数。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

注意：<meta> 标签通常位于 <head> 区域内。

注意： 元数据通常以 名称/值 对出现。

注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

JavaScript 通常用于图像操作、表单验证以及动态内容更改。

注释：如果使用 "src" 属性，则 <script> 元素必须是空的。

提示：请参阅 <noscript> 元素，对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。

注释： 有多种执行外部脚本的方法：

• 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
• 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
• 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

noscript 元素用来定义在脚本未被执行时的替代内容（文本）。

此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器。

提示：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。

注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！

Step 66

The title element determines what browsers show in the title bar or tab for the page.

Add a title element within the head element using the text below:

CatPhotoApp

  <head>
    <title>CatPhotoApp</title>
  </head>

<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。

<title>元素：

• 定义浏览器工具栏中的标题
• 提供页面被添加到收藏夹时的标题
• 显示在搜索引擎结果中的页面标题

注释：一个 HTML 文档中不能有一个以上的 <title> 元素。

提示：如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。

Step 67

Notice that the entire contents of the page are nested within an html element. All other elements must be descendants of this html element.

Add the lang attribute with the value en to the opening html tag to specify that the language of the page is English.

<html lang="en">

<html> 标签告知浏览器这是一个 HTML 文档。

<html> 标签是 HTML 文档中最外层的元素。

<html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

属性	值	描述
manifestNew	URL	定义一个 URL，在这个 URL 上描述了文档的缓存信息。

Step 68

All pages should begin with <!DOCTYPE html>. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications.

Add this declaration as the first line of the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CatPhotoApp</title>
  </head>

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。

HTML5 不是基于 SGML，因此不要求引用 DTD。

提示：总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。

注释：<!DOCTYPE> 标签没有结束标签。

提示：<!DOCTYPE> 声明不区分大小写。

提示：使用 W3C 的验证 检查您是否编写了一个带有正确 DTD 的合法的 HTML / XHTML 文档！

Step 69

You can set browser behavior by adding self-closing meta elements in the head. Here's an example:

<meta attribute="value">

Tell the browser to parse the markdown into multiple languages by creating a meta element as a child of the head element. Set its charset attribute to UTF-8.

  <head>
    <title>CatPhotoApp</title>
    <meta charset="UTF-8">
  </head>

元数据（Metadata）是数据的数据信息。

<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

注意：<meta> 标签通常位于 <head> 区域内。

注意： 元数据通常以 名称/值 对出现。

注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。