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
throughh6
heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, soh2
elements have less importance thanh1
elements. Only use oneh1
element per page and place lower importance headings below higher importance headings.Below the
h1
element, add anh2
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 ap
element below yourh2
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 textTODO: 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 theh1
element, and a</main>
closing tag after thep
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, andp
elements inside themain
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 themain
element in the code below. Use the space bar on your keyboard to add two more spaces in front of thep
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 thep
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
rightHTML5 不支持。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 animg
element specifies the image's URL (where the image is located). An example of animg
element using ansrc
attribute:<img src="https://www.example.com/the-image.jpg">
.Inside the existing
img
element, add ansrc
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 analt
attribute. Thealt
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 analt
attribute with the textA cat
.Inside the
img
element, add analt
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 tofreecodecamp.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
polyHTML5 不支持。规定链接的形状。 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 textclick 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 ap
element.In the text of your
p
element, turn the wordscat photos
into a link tohttps://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 thep
element into a link, you don't need the second link below thep
element. Delete the entire anchor element below thep
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'shref
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 asection
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 existingsection
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 newh2
element with the textCat 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 secondsection
element, add anh3
element with this text:
Things cats love:
<section> <h2>Cat Lists</h2> <h3>Things cats love:</h3> </section>