HTML（超文本标记语言）是建立网站的一种重要标记语言，HTML表示网页的内容。
但当你第一次学习这些信息时，可能很难掌握所有不同的HTML元素。
在这篇文章中，我为整个 "通过构建猫咪照片应用程序学习HTML "实践项目创建了一份学习指南。这个学习指南充满了额外的信息、链接和视频，以帮助你更好地理解这些概念。
在你通过认证的过程中，可以随时参考这份指南。如果你对HTML的详细介绍感兴趣，请阅读这篇freeCodeCamp HTML文章。
以下是所涉及的主题的完整列表，点击下面的任何一个链接来了解更多关于该主题的信息。
目录
- 标题元素--步骤1-2、17、18、25、33
- 段落元素--步骤3
- HTML注释--步骤4
- 主要元素--步骤5
- HTML缩进--第6步
- 图片元素--步骤7-9，21,28,29
- 锚点元素--步骤10-11,63
- 在段落内嵌套锚点元素--步骤12
- 目标属性--步骤13
- 在锚点标签内嵌套图像--步骤14
- 章节元素--步骤15-16,32
- 无序列表元素--步骤19-20
- 图和Figcaption元素--步骤22-23,27,30
- 强调元素--步骤24
- 有序列表元素--步骤26
- 强势元素--步骤31
- 表格元素--步骤34-35
- 表格文本输入和提交按钮--步骤36-42
- 表格单选按钮--步骤43、47、48
- 标签元素--步骤44-46,55
- 字段集和图例元素--步骤49-52
- 表格复选框元素--步骤53-54,56-58
- 值和检查属性--步骤59-60
- 页脚元素--步骤61-62
- 头部和标题元素--步骤64-65
- lang属性--第66步
- DOCTYPE - 第67步
其他HTML资源
标题元素
HTML标题元素代表网页的主标题和副标题。
h1 元素代表最重要的标题，每个网页只应使用一次：
<h1>I represent the main heading of a web page</h1>
h2 元素代表页面上第二重要的标题：
<h2>I am the second most important heading element</h2>
总共有六个章节标题元素：
<h1>I am the most important heading element</h1>
<h2>I am the second most important heading element</h2>
<h3>I am the third most important heading element</h3>
<h4>I am the fourth most important heading element</h4>
<h5>I am the fifth most important heading element</h5>
<h6>I am the least important heading element</h6>
这是它呈现在页面上的样子：
要了解更多关于标题元素的信息，请阅读本DevDocs详细的标题元素解释。
段落元素
段落元素代表网页上的段落：
<p>I love learning with freeCodeCamp. They have thousands of free articles and videos to help me learn how to code.</p>
这是它呈现在页面上的样子：
要了解更多关于段落元素的信息，请阅读这个DevDocsp 元素的详细解释。
HTML注释
当你需要给未来的自己或其他正在阅读你的代码的开发者留下信息时，HTML注释在代码中是很有用的。注释不会被渲染到网页上：
<!--I am a comment. I am not displayed on the web page.-->
<p>I am a paragraph element.</p>
这就是渲染到网页上的结果的样子：
要了解更多关于HTML注释的信息，我建议阅读这些有用的文章。
主元素
main 元素是用来组合网页的所有主要内容的：
<h1>What freeCodeCamp has to offer</h1>
<main>
<p>The core freeCodeCamp curriculum teaches full stack JavaScript and Python. There are hundreds of lessons to go through to get you ready for an entry level developer job.</p>
<p>freeCodeCamp has thousands of free articles on their news publication. They also have hundreds of videos on their YouTube channel.</p>
</main>
这就是代码呈现在页面上的样子：
要了解更多关于main 元素的信息，请阅读这个DevDocs详细的main 元素解释。
HTML缩进
每当你有HTML元素嵌套在其他HTML元素中时，最好使用缩进的方式。嵌套元素被称为其父元素的子元素。
缩进是为了使你的代码更容易被其他开发者阅读。为了缩进你的代码，你将把元素向右移动两个空格。
这是一个没有缩进的例子：
<main>
<h2>Let's learn about indentation</h2>
<p>There is no indentation here</p>
</main>
但如果我编辑代码，将h2 和p 元素向右移动两个空格，现在我们就有了适当的缩进：
<main>
<h2>Let's learn about indentation</h2>
<p>This is indentation</p>
</main>
现在我们可以看到，h2 和p 元素是main 元素的子女。
要了解更多关于HTML缩进的信息以及为什么它很重要，请阅读这篇有用的缩进文章。
图像元素
img 元素是用来向网页添加图像的。
src 属性代表图像的位置，alt 属性是图像的描述性文本：
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="plate of lasagna">
这就是代码呈现在页面上的样子：
要了解更多关于img 元素的信息，请阅读这个有用的img 元素教程。
锚元素
锚点元素代表网页上的一个链接。
这里是基本的语法：
<a href="link-where-you-want-to-go">anchor text goes here</a>
这是它呈现在页面上的样子：
你使用href 属性来告诉超链接要去哪里：
href="link-where-you-want-to-go"
锚文本是在屏幕上显示给用户的内容。
下面是一个链接到freeCodeCamp的锚标签的例子：
<a href="https://www.freecodecamp.org/">freeCodeCamp</a>
这是它在页面上的显示情况。
要了解更多关于HTML锚点元素的信息，我建议阅读这些有用的文章。
在段落内嵌套锚点元素
如果你想在你的段落内包含链接，那么你可以在段落标签内嵌套锚标签。
在这个例子中，我们有一个文本 "I love freeCodeCamp"：
<p>I love freeCodeCamp</p>
如果我想把freeCodeCamp这个词变成一个链接，那么我就把它包在一组锚标签里面：
<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>
这就是呈现在屏幕上的结果：
当你想把你的用户引导到与页面上的主要内容有关的额外信息时，在段落标签中嵌套链接是很有帮助的。
要了解更多关于在段落内嵌套锚定标签的信息，我建议阅读这篇有帮助的文章。
目标属性
你在开头的锚标签内使用target="_blank" 属性，像这样：
<a href="website-link-goes-here" target="_blank">
当用户点击该链接时，一个新的浏览器标签将自动打开到该页面。
在这个例子中，我在一组段落标签内嵌套了一个链接，以引导人们到freeCodeCamp。
<p>To learn how to code for free, please visit <a href="https://www.freecodecamp.org/learn" target="_blank">freeCodeCamp.org</a></p>
当你点击freeCodeCamp的链接，那么它将为你打开一个新的浏览器标签。
要了解更多关于目标属性的信息，我建议阅读这篇有用的文章。
在锚标签内嵌套图像
在HTML中，我们可以使用<img> 元素来在页面上添加图片。在这个例子中，我们要添加一张五只猫的图片：
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/>
如果我们想让这个图片成为一个可点击的链接，那么我们可以把它放在一组锚标签里面：
<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>
我们还可以添加target="_blank" 属性，使该链接在一个新的标签中打开：
<a target="_blank" href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field." /></a>
当你把鼠标悬停在图片上时，你会看到光标指针，表明它是一个链接，引导你进入一篇关于猫的文章。
部分元素
section 元素用于对HTML文档中的内容部分进行分组。
下面是一个关于section 元素的例子：
<h1>Let's learn about section elements</h1>
<section>
<h2>Defintion</h2>
<p>The section element is used to group sections of content in the HTML document.</p>
</section>
这是呈现在页面上的结果的样子：
要了解更多关于section 元素的信息，请阅读这个DevDocssection 元素的详细解释。
无序列表元素
ul 列表元素是用来显示一个没有特定顺序的项目列表。li 元素代表单个列表项。
下面是一个食品列表的例子：
<h2>Favorite foods</h2>
<ul>
<li>Salad</li>
<li>Pizza</li>
<li>Burger</li>
<li>Carrots</li>
</ul>
这是它呈现在屏幕上的样子：
要了解更多关于无序列表元素的信息，请阅读这篇有用的文章：
- HTML Bullet Points - 如何使用
图和Figcaption元素
figure元素表示自包含的内容，通常与图像和标题一起使用。可选的figcaption是图片的简短描述性文本。在这个例子中，我们有一张草地上的五只小猫的图片，下面有一个小标题：
<figure> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field." /> <figcaption>Five kittens looking around in the grass</figcaption> </figure>这是它在页面上呈现的样子：
要了解更多关于
figure和figcaption元素的信息，请阅读这个有用的DevDocs解释。强调元素
em元素是用来在一段文字上放置额外的强调。在这个例子中，我们有这样一个句子："我们需要马上离开这栋楼！"
<p>We need to get out of the building now!</p>如果我想把重点放在现在这个词上，那么我可以用
<em>标签把它包起来。<p>We need to get out of the building <em>now</em>!</p>这就是呈现在页面上的结果：
要了解更多关于强调元素的信息，请阅读这个有用的DevDocs解释。
有序列表元素
ol元素用于以特定的顺序显示一个项目的列表。li元素代表单个列表项。下面是一个菜谱的一组步骤的例子：
<h1>How to bake a cake</h1> <h2>Directions for recipe</h2> <ol> <li>Prep the oven</li> <li>Whisk the flour, sugar and cocoa in a bowl</li> <li>Mix the milk, vegetable oil, eggs, and vanilla</li> <li>Bake for 30 minutes</li> <li>Remove from oven, cool for 10 minutes and frost cake</li> </ol>这是呈现在页面上的结果的样子。
要了解更多关于有序列表元素的信息，请阅读这篇有用的文章：
强势元素
强势元素是指代表一种紧迫感或严肃性的文本部分。
在这个例子中，我们有以下句子：
<p>Danger! Unsafe area ahead</p>我们可以使用
strong标签来强调 "危险 "这个词的强烈的严肃感。<p><strong>Danger!</strong> Unsafe area ahead</p>下面是呈现在页面上的结果的样子：
表格元素
表格元素用于收集用户的数据，如姓名和电子邮件地址。表格的例子可能是调查表或加入邮件列表的表格。
下面是一个表单的基本语法：
<form action="url-where-data-should-be-sent-to"> <!--inputs go inside here--> </form>action属性是用户数据将被发送到的URL。在form标签内，将有输入，这是用户提供他们信息的地方。输入将在下一节中详细介绍。
表格文本输入和提交按钮
文本
input是一个文本字段，用户可以在这里输入他们的信息。这些输入要放在form元素里面。下面是基本的语法。
<form action="url-where-data-should-be-sent-to"> <input type="text"> </form>type="text"告诉计算机这是一个文本输入。下面是结果呈现在页面上的样子：
name属性是用来表示被提交的数据的值：<input type="text" name="username">placeholder文本是用来向用户提供文本输入的内容信息。在这个例子中，占位符文本向用户展示了一个用户名的例子。一旦你开始键入输入，占位符文本就消失了：
<input type="text" name="username" placeholder="Ex.codergirlrules">提交按钮用于向服务器提交表单信息。
type="submit"告诉计算机它是什么类型的按钮：<button type="submit">Submit form</button>required属性是用来确保用户在提交表单前必须填写所需的输入内容。如果你试图在没有完成所需输入的情况下提交表单，那么将弹出一条信息，指导你填写这些信息：<input required type="text" name="username" placeholder="Ex.codergirlrules">
要了解更多关于表单输入的信息，请通读这篇文章：
表格单选按钮
单选按钮代表一组用户可以选择的选项。每次只能选择该组中的一个选项。
这里是基本的语法：
<input type="radio">这是呈现在屏幕上的样子：
在这个例子中，我们使用了一组单选按钮，用户可以选择牛肉、鸡肉、鱼肉或其他。当使用一组单选按钮时，该组中的所有按钮的
name属性的值必须相同：<input type="radio" id="beef" name="food">Beef <input type="radio" id="chicken" name="food">Chicken <input type="radio" id="fish" name="food">Fish <input type="radio" id="other" name="food">Other试试下面的例子，注意你一次只能选择一个选项。注意所有的输入都有相同的
name="food"值。你可以通过阅读这个DevDocs单选按钮文档来了解更多关于单选按钮的信息。
标签元素
label元素将标签文本与输入相关联。下面是一个使用
label元素将 "Beef "的文本与输入关联的例子：<label for="beef">Beef</label> <input type="radio" id="beef" name="food">for属性被用来连接标签和输入，所以当用户点击标签文本时，它将选择输入。for属性的值与输入的id相同。试着在下面的例子中点击标签文本。你会看到单选输入被选中。
你也可以将输入嵌套在
label元素内。在这种情况下，你不需要使用for属性，因为这两个元素之间的关联是隐含的：<label>Beef <input type="radio" id="beef" name="food"> </label>要了解更多关于
label元素的信息，请阅读这篇有用的文章：字段集和图例元素
fieldset元素用于分组表单控件，即输入和标签。legend元素用于为fieldset元素提供一个标题。这里有一个
fieldset元素的例子：<form action=""> <fieldset> </fieldset> </form>这是它呈现在屏幕上的样子：
这里是一个
legend元素的例子：<form action=""> <fieldset> <legend>Choose your favorite programming language</legend> </fieldset> </form>这是它呈现在屏幕上的样子：
下面是
fieldset和legend元素如何与表单输入和标签一起工作的完整例子：<form action=""> <fieldset> <legend>Choose your favorite programming language</legend> <input type="radio" id="JavaScript" name="programming"> <label for="JavaScript">JavaScript</label> <input type="radio" id="Python" name="programming"> <label for="Python">Python</label> <input type="radio" id="Rust" name="programming"> <label for="Rust">Rust</label> </fieldset> </form>表单复选框元素
checkbox元素是用户可以在表单中选择多个选项的盒子。下面是一个复选框的例子：
<input type="checkbox" id="London" name="London"> <label for="London">London</label>这是呈现在页面上的样子：
这里有一个完整的例子，用多个复选框表示不同的城市：
<form action=""> <fieldset> <legend>Cities you would like to visit</legend> <input type="checkbox" id="London" name="London"> <label for="London">London</label> <input type="checkbox" id="Barcelona" name="Barcelona"> <label for="Barcelona">Barcelona</label> <input type="checkbox" id="Venice" name="Venice"> <label for="Venice">Venice</label> <input type="checkbox" id="Tokyo" name="Tokyo"> <label for="Tokyo">Tokyo</label> </fieldset> </form>试试下面的例子，你就可以选择多个选项了。
要了解更多关于复选框元素的信息，请阅读DevDocs复选框文档。
值和复选属性
value属性代表输入的值。下面是一个例子：
<input type="checkbox" id="London" name="London" value="London">checked属性用于指示哪些输入应该在页面加载时被默认检查。
这里有一个例子：
<input type="checkbox" id="London" name="London" value="London" checked> <label for="London">London</label>这是渲染到页面上的结果的样子：
页脚元素
footer元素位于HTML文档的底部，包含版权等信息，或页面的其他相关信息的链接。下面是一个基本的例子：
<footer> <p>© 2022 Jessica Wilkins</p> </footer>要了解更多关于
footer元素的信息，请阅读这个DevDocs对footer元素的解释。头部和标题元素
<head>标签包含由机器处理的信息。在<head>标签里面，你将嵌套元数据，这是描述机器的文档的数据：<head> <!--important meta data goes inside here--> <!--title element also goes inside here--> </head><title>标签是网页的标题。这段文字会显示在浏览器的标题栏中：<title>HTML 5 Boilerplate</title>
这是一个例子，说明了
head在一个真实的网页上会是什么样子。这些信息都不会显示在网页本身：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 5 Boilerplate</title> <link rel="stylesheet" href="style.css"> </head>关于所列出的每个元标签的详细描述，请通读这篇关于HTML5模板的文章。
lang属性lang属性在开头的<html>标签内设置页面的语言。出于可访问性的考虑，将其包括在内也是很好的，因为屏幕阅读器会知道如何正确发音：<html lang="en">DOCTYPE
你的HTML代码中的第一行应该是doctype声明。doctype告诉浏览器该页面是用什么版本的HTML编写的。
<!DOCTYPE html>如果你忘记在文件中加入这行代码，那么一些HTML 5标签，如
<article>,< footer >, 和<header>，可能不被浏览器支持。
