途径与工具
freeCodeCamp 是你获得第一份软件开发工作的有效途径。
超过 40,000 人在完成这些课程后获得了开发者工作——包括进入谷歌、微软、阿里巴巴、腾讯等大型公司。
如果你刚开始学习编程，我们建议你从头开始，按顺序获得认证。
要获得每个认证，需要完成 5 个必做项目，并通过所有测试。
你可以将这些认证添加到你的简历或 LinkedIn 个人资料。但是你在学习过程中所做的练习比获得认证更重要。
如果你感到沮丧，很正常，因为编程本来就很难。
练习是关键。练习，练习，再练习。
这套课程需要你进行数千个小时的编程练习。
如果你想获得开发者工作或者成为自由职业开发者找到客户，那么除了编程技能，你还需要搭建自己的社交网络，打造自己作为开发者的影响力。
你还可以在 LinkedIn、Twitter、GitHub 和 freeCodeCamp 论坛 上做到这一点。
编程愉快！
- Quincy Larson，freeCodeCamp.org 创始人、老师
HTML学习
优化搜索
HTML5 有些元素能够指明不同的内容区域。 这些元素能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍访问。
通过在 h1 元素之前添加 <main> 开始标签和在 p 元素之后添加 </main> 结束标签来标识此页面的主要部分。
加图片
你可以通过使用 img 元素来为你的网站添加图片。 img 元素只有一个开始标签，没有结束标签。 一个没有结束标签的元素，它的标签被称为自闭合标签。
在 p 元素的下方添加一个 img 元素。 此时，没有图片会出现在浏览器中。
HTML 属性是写在一个元素的开始标签中的特殊词汇，它们用于控制这个元素的行为。 在 img 元素中的 src 属性明确了一个图片的 URL（图片所在的位置）。
这是一个 img 元素的示例，其中包含一个 src 属性指向 freeCodeCamp logo：
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_secondary.svg">
在现有的 img 元素中，添加一个具有以下 URL 的 src 属性：
https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg
图片显示不了的补救
所有的 img 元素都应该有一个 alt 属性。 alt 属性的文本（值）有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。 例如 <img src="cat.jpg" alt="A cat"> 有一个 alt 属性，其文本为 A cat。
在 img 元素中，添加一个带有以下文本的 alt 属性：
A cute orange cat lying on its back
创建超链接
你可以使用锚点元素（a）链接到另一个页面。 例如 <a href='https://freecodecamp.org'></a> 会链接到 freecodecamp.org。
在段落下方添加一个锚点元素并链接到 https://freecatphotoapp.com。 此时，链接不会出现在预览中。
<a href='https://freecatphotoapp.com'>一键穿越</a> <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
打开新的标签页中的链接。
向锚点元素（a）的起始标签中添加值为 _blank 的 target 属性，用以在新的标签页中打开链接。
把图片转化成超链接
在之前的步骤中，你使用了锚点元素将文本转换为链接。 也可以把其他类型的内容放在锚标签中，将其转换成一个链接。
用必要的元素标签包裹图片，把它变成一个链接。 使用 https://freecatphotoapp.com 作为锚点元素中 href 属性的值。
<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>
加个列表
添加一个无序列表（ul）元素。 请注意，此时不会显示任何内容。
<ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul>
加个有序列表
<ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol>
加个塞，独立内容
figure 元素代表独立的内容，并允许你将图像与标题相关联。
将刚刚添加的图像嵌套在 figure 元素中。
添加标题以描述 figure 元素包含的图像
图像标题（figcaption）元素用于添加标题以描述 figure 元素中包含的图像。 例如，<figcaption>A cute cat</figcaption> 添加标题 A cute cat。
在嵌套在 figure 元素中的图像之后，添加一个 figcaption 元素，其文本为：
Cats love lasagna.
指示某些文本非常重要或紧急。
strong 元素用于指示某些文本非常重要或紧急。
在你刚刚添加的 figcaption 中，通过将 hate 放在 strong 元素中来表明它非常重要。
指示把表单数据发到哪里
action 属性指示应该将表单数据发送到哪里。 例如，<form action="/submit-url"></form> 告诉浏览器应该将表单数据发送到路径/submit-url。
<form action="https://freecatphotoapp.com/submit-cat-photo"> </form>
收集数据
input 元素允许你通过多种方式从 Web 表单中收集数据。 与 img 元素一样，input 元素是自闭合的，并且不需要结束标签。
在 form 元素中嵌套一个 input 元素。
为了通过 action 属性中指定的位置访问表单的数据，你必须给文本字段一个 name 属性，并为其分配一个值来表示数据正在提交。 例如，你可以对电子邮件地址文本字段使用以下语法：<input type="text" name="email">。
输入框提示
占位符文本用于提示人们在输入框中输入什么样的信息。 例如，<input type="text" placeholder="Email address">。
防止不填就提交
将占位符文本 cat photo URL 添加到你的 input 元素中。
为了防止用户在缺少所需信息时提交你的表单，你需要将 required 属性添加到 input 元素。 无需为 required 属性设置值。 只需将单词 required 添加到 input 元素，确保它和其他属性之间有空格。
添加个按钮
<button>Submit</button>
即使你在文本输入下方添加了按钮，它们也会在页面上彼此相邻。 这是因为 input 和 button 元素都是内联元素，它们不会出现在新的行上。
提交按钮
你添加的按钮将默认提交表单。 然而，依赖默认行为可能造成混乱。 将值为 submit 的 type 属性添加到 button 以明确它是一个提交按钮。
<button type="submit">Submit</button>
单选按钮
对于需要从多个选项中获得一个答案的问题，你可以使用单选按钮。
下面是一个带有 cat 选项的单选按钮示例：<input type="radio"> cat。 请记住，input 元素是自闭合的。
方便单选，做成一体label
label 元素用于帮助将 input 元素的文本与 input 元素本身关联起来（尤其是对于屏幕阅读器等辅助技术）。 例如，<label><input type="radio"> cat</label> 使得点击单词 cat 也会选择相应的单选按钮。
将 radio 按钮嵌套在 label 元素中。
用id给html元素编上号
id 属性用于标识特定的 HTML 元素。 每个 id 属性的值必须不同于整个页面的所有其他 id 值。
让单选框非此即彼
请注意，可以同时选择两个单选按钮。 为了使选择一个单选按钮自动取消选择另一个，两个按钮必须有具有相同值的 name 属性。
将值为 indoor-outdoor 的 name 属性添加到两个单选按钮。
让单选框提交的数据有意义
如果你选择 Indoor 单选按钮并提交表单，则该按钮的表单数据基于其 name 和 value 属性。 由于你的单选按钮没有 value 属性，因此表单数据将包含 indoor-outdoor=on，这在你有多个按钮时没有用处。
为两个单选按钮添加 value 属性。 为方便起见，将按钮的 value 属性设置为与其 id 属性相同的值。
把表单输入和标签组合在一起
fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起。 fieldset 元素是块级元素，这意味着它们出现在新的一行上。
将 Indoor 和 Outdoor 单选按钮嵌套在 fieldset 元素中，不要忘记缩进单选按钮。
给组合块起标题
legend 元素充当 fieldset 元素中内容的标题。 它为用户提供了有关他们应该在表单的该部分中输入什么的上下文。
在两个单选按钮上方添加一个 legend 元素，其中包含文本 Is your cat an indoor or outdoor cat?。
<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>
复选框表单
对于可能有多个答案的问题，表单通常使用复选框。 例如，这是一个带有 tacos 选项的复选框：<input type="checkbox"> tacos。
在你刚刚添加的 legend 元素下，添加一个 input，将其 type 属性设置为 checkbox，并为其指定选项：
另一种方法将文本和复选框相连
还有另一种方法可以将 input 元素的文本与元素本身相关联。 你可以将文本嵌套在 label 元素中，并添加与 input 元素的 id 具有相同值的 for 属性。
通过仅给 label 元素添加文本 Loving，并给它添加适当的 for 属性值，将文本 Loving 与复选框相关联。
</fieldset> <fieldset> <legend>What's your cat's personality?</legend> <input id="loving" type="checkbox"> <label for="loving"> Loving</label> </fieldset> <input type="text" name="catphotourl" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>
默认选择
为了使复选框或单选按钮默认被选中，你需要为其添加 checked 属性。 无需为 checked 属性设置值。 只需将单词 checked 添加到 input 元素，确保它和其他属性之间有空格。
默认选中第一个单选按钮和第一个复选框。
添加页脚部分
现在你将向页面添加页脚部分。
在 main 元素之后，添加 footer 元素。
No Copyright - freeCodeCamp.org
其他重要信息位于head元素
请注意，到目前为止你添加到页面的所有内容都在 body 元素内。 应该呈现到页面的所有页面内容元素都放在 body 元素中。 但是，其他重要信息位于 head 元素中。
在 body 元素上方添加一个 head 元素。
添加浏览器在页面或选项卡标题
title 元素决定了浏览器在页面的标题栏或选项卡中显示的内容。
在 head 元素中添加一个具有以下文本的 title 元素。
CatPhotoApp
为页面设置默认语言
请注意，页面的全部内容都嵌套在 html 元素中。 所有其他元素必须是此 html 元素的后代。
将值为 en 的 lang 属性添加到开始 html 标签以指定页面的语言为英语。
添加页面声明-满足行业规范
所有页面都应以 <!DOCTYPE html> 开头。 这个特殊的字符串被称为声明，并确保浏览器尝试满足行业范围的规范。
将此声明添加为代码的第一行。
告诉浏览器渲染 markdown 为UTF-8
你可以通过在 head 中添加自闭合的 meta 元素，来设置浏览器行为。 如下所示：
<meta attribute="value">
通过创建一个 meta 元素作为 head 元素的子元素，告诉浏览器渲染 markdown 为多种语言。 将其 charset 属性设置为 UTF-8。
<meta charset="UTF-8">
<head> <meta charset="UTF-8"> <title>CatPhotoApp</title> </head>
🌸I could be bounded in a nutshell and count myself a king of infinite space.
特别鸣谢：木芯工作室 、Ivan from Russia
