Learn HTML by Building a Cat Photo（1-19）

Step 1

HTML elements have opening tags like <h1> and closing tags like </h1>.

The text for an element goes between its opening and closing tags.

Find the h1 element and change its text to:

CatPhotoApp

<h1>CatPhotoApp</h1>

Step 2

The h1 through h6 heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so h2 elements have less importance than h1 elements. Only use one h1 element per page and place lower importance headings below higher importance headings.

Below the h1 element, add an h2 element with this text:

Cat Photos

<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>

Step 3

The p element is used to create a paragraph of text on websites. Create a p element below your h2 element and give it the following text:

Click here to view more cat photos.

<h2>Cat Photos</h2>
<p>Click here to view more cat photos.</p>

Step 4

Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with <!--, contains any number of lines of text, and ends with -->. For example, the comment <!-- TODO: Remove h1 --> contains the text TODO: Remove h1.

Add a comment above the p element with this text:

TODO: Add link to cat photos

 <!--TODO: Add link to cat photos-->
 <p>Click here to view more cat photos.</p>

Step 5

HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility.

Identify the main section of this page by adding a <main> opening tag before the h1 element, and a </main> closing tag after the p element.

    <main>
        <h1>CatPhotoApp</h1>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more cat photos.</p>
    </main>

<main> 标签用于指定文档的主体内容。

<main> 标签中的内容在文档中是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注意在一个文档中，<main> 元素是唯一的，所以不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>

Step 6

In the previous step, you put the h1, h2, comment, and p elements inside the main element. This is called nesting. Nested elements should be placed two spaces further to the right of the element they are nested in. This spacing is called indentation and it is used to make HTML easier to read.

The h1 element, h2 element and the comment are indented two spaces more than the main element in the code below. Use the space bar on your keyboard to add two more spaces in front of the p element so that it is indented properly as well.

 <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more cat photos.</p>
</main>

Step 7

You can add images to your website by using the img element. img elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a self-closing tag.

Add an img element below the p element. At this point, no image will show up in the browser.

 <p>Click here to view more cat photos.</p>
 <img>

<img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性：src 和 alt。

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接

属性	值	描述
align	top bottom middle left right	HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
loading	eager：立即加载 lazy：延迟加载	指定浏览器是应立即加载图像还是延迟加载图像。
alt	text	规定图像的替代文本。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossoriginNew	anonymous use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap	ismap	将图像规定为服务器端图像映射。
longdesc	URL	HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src	URL	规定显示图像的 URL。
usemap	#mapname	将图像定义为客户器端图像映射。
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width	pixels	规定图像的宽度。

Step 8

HTML attributes are special words used inside the opening tag of an element to control the element's behavior. The src attribute in an img element specifies the image's URL (where the image is located). An example of an img element using an src attribute: <img src="https://www.example.com/the-image.jpg">.

Inside the existing img element, add an src attribute with this URL:

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

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

src 标签的 src 属性是必需的。它规定图像的 URL。

注意：当一个网页加载时，浏览器从 Web 服务器上获取图像，并把它插入到页面中。因此，确保图像与相关的网页在同一点，否则访问者可能会得到一个损坏的链接图标。如果浏览器找不到图像时，会显示损坏的链接图标

图像的 URL。

可能的值：

• 绝对 URL - 指向另一个网站（比如 src="http://www.example.com/image.gif"）
• 相对 URL - 指向网站内的一个文件（比如 src="image.gif"）

Step 9

All img elements should have an alt attribute. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, <img src="cat.jpg" alt="A cat"> has an alt attribute with the text A cat.

Inside the img element, add an alt attribute with this text:

A cute orange cat lying on its back

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。

注意：当用户把鼠标移动到 img 元素上时，Internet Explorer （9 之前的版本）把 alt 属性的值显示为工具提示。根据 HTML 规范，这种行为并不正确。

提示：如果需要为图像创建工具提示，请使用 title 属性！

规定图像的替代文本。

alt 文本的使用原则：

• 如果图像包含信息，使用 alt 描述图像
• 如果图像在 <a> 元素中，使用 alt 描述目标链接
• 如果图像仅供装饰，请使用 alt=""

title 属性规定关于元素的额外信息。

这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）

语法：

<element title="text">

text	规定元素的工具提示文本（tooltip text）。

Step 10

You can link to another page with the anchor (a) element. For example, <a href='https://freecodecamp.org'></a> would link to freecodecamp.org.

Add an anchor element after the paragraph that links to https://freecatphotoapp.com. At this point, the link won’t show up in the preview.

      <p>Click here to view more cat photos.</p>
      <a href="https://freecatphotoapp.com"></a>

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

• 未被访问的链接带有下划线而且是蓝色的
• 已被访问的链接带有下划线而且是紫色的
• 活动链接带有下划线而且是红色的

提示：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。

提示：通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。

提示：请使用 CSS 来改变链接的样式。

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
coords	coordinates	HTML5 不支持。规定链接的坐标。
downloadNew	filename	指定下载链接
href	URL	规定链接的目标 URL。
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name	section_name	HTML5 不支持。规定锚的名称。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape	default rect circle poly	HTML5 不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。 _blank：新窗口打开。 _parent：在父窗口中打开链接。 _self：默认，当前页面跳转。 _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
typeNew	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。 注：MIME = Multipurpose Internet Mail Extensions。

Step 11

A link's text must be placed between the opening and closing tags of an anchor (a) element. For example, <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a> is a link with the text click here to go to freeCodeCamp.org.

Add the anchor text link to cat pictures to the anchor element. This will become the link's text.

 <a href="https://freecatphotoapp.com">link to cat pictures</a>

Step 12

In the previous step you turned the words link to cat pictures into a link by placing them between opening and closing anchor (a) tags. You can do the same to words inside of an element, such as a p element.

In the text of your p element, turn the words cat photos into a link to https://freecatphotoapp.com by adding opening and closing anchor (a) tags around these words.

 <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a>.</p>
 <a href="https://freecatphotoapp.com">link to cat pictures</a>

Step 13

Now that you turned the text cat photos inside the p element into a link, you don't need the second link below the p element. Delete the entire anchor element below the p element

  <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a>.</p>

Step 14

Add a target attribute with the value _blank to the anchor (a) element's opening tag, so that the link opens in a new tab

 <p>Click here to view more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a>.</p>

target

_blank _parent _self _top framename

规定在何处打开目标 URL。仅在 href 属性存在时使用。 _blank：新窗口打开。 _parent：在父窗口中打开链接。 _self：默认，当前页面跳转。 _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

Step 15

Turn the image into a link by surrounding it with necessary element tags. Use https://freecatphotoapp.com as the anchor's href attribute value.

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

Step 16

Before adding any new content, you should make use of a section element to separate the cat photos content from the future content.

Take your h2, comment, p, and anchor (a) elements and nest them in a section element

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

<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

Step 17

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

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

Step 18

Within the second section element, add a new h2 element with the text Cat Lists.

<section>
    <h2>Cat Lists</h2>
</section>

Step 19

When you add a lower rank heading element to the page, it's implied that you're starting a new subsection.

After the last h2 element of the second section element, add an h3 element with this text:

Things cats love:

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