前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

HTML基础部分

主要元素介绍

h1,h2,h3...标题元素
p元素代表段落
用占位符文本填充空白-lorem ipsum text
HTML 的注释
HTML5 元素介绍-header、footer、nav、video、article、section等等,main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
给网站添加图片-用img元素来为你的网站添加图片，其中src属性指向一个图片的地址
- 注意：img元素是没有结束标记的
- 所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本
- <img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="放松的猫">

a标签链接

用锚点实现网页间的跳转
- 锚点需要一个href属性指向目的地，它还需要有锚点文本
- <a href="http://freecatphotoapp.com">cat photos</a>

用锚点实现网页内部跳转
- 设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。
- target="_blank"属性点击链接会打开新的元素页。
- <a href="#footer">Jump To Bottom</a>
将锚点嵌套在段落中
- <p>View more <a href="http://freecatphotoapp.com" alt="cat photos">cat photos</a></p>
用 # 号来创建固定链接
- 有时你想为网站添加一个锚点，但如果你还不确定要将它链接到哪儿，这时可以使用固定链接。
- <p>点击这里可以获取更多<a href="#" target="_blank">猫图</a>
给图片添加链接-你可以通过把元素嵌套进锚点里使其变成一个链接。
- <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>

列表

创建一个无序列表
- 无序列表以
  - 元素，最后以
  结尾。
```
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
```
创建一个有序列表
- 有序列表以
```
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>
```

表单+输入框

创建一个输入框
- 注意：input输入框是没有结束标记的
- <input type="text">
给输入框添加占位符文本
- Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
- <input type="text" placeholder="猫咪图片地址">
创建一个表单
- 通过给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单
- <form action="/submit-cat-photo"><input type="text" placeholder="猫咪图片地址"></form>
给表单添加提交按钮
- 当点击提交按钮时，表单中的数据将会被发送到action属性指定的地址上。
- <button type="submit">提交</button>
给表单添加一个必填字段
- 如果你想把文本输入框设置为必填项，在input元素中加上required属性就可以了
- <input type="text" placeholder="猫咪图片地址" required>

单选复选按钮

创建一组单选按钮
- radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label（标签）元素中。所有关联的单选按钮应该拥有相同的name属性。
- 最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系
```
<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor">indoor
</label>
<label for="outdoor">
  <input id="outdoor" type="radio" name="indoor-outdoor">outdoor
</label>
```
创建一组复选框
- checkboxes（复选框）就好比多项选择题，正确答案有多个。复选框是input输入框的另一种类型。每一个复选框都应该嵌套在它自己的label（标签）元素中。
- 所有关联的复选框应该拥有相同的name属性。
- 最佳实践是在label元素上设置for属性，让其值与复选框的id属性值相等，这样就在label元素和它的子元素复选框之间创建了一种链接关系。
```
<label for="per">
<input id="per" type="checkbox" name="personality">1</label>
  <label for="per2">
<input id="per2" type="checkbox" name="personality">2</label>
    <label for="per3">
<input id="per3" type="checkbox" name="personality">3</label>
```
给单选按钮和复选框添加默认选中项
- 通过添加checked属性，你可以设置某个单选按钮或多选按钮被默认选中

元素嵌套

元素嵌套
- div元素，也叫division（层）元素，是一个盛装其他元素的通用容器。

html文档相关

声明 HTML 文档的文档类型
- 到目前为止，我们学习了一些特定的 HTML 标签，还有一些标签是用来组成网页的总体结构，并且它们在每个 HTML 文档中都能看到。在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
- 来告诉浏览器你使用的是 HTML 的哪个版本，"..." 部分就是版本的数字信息。对应的就是 HTML5。
- 所有的 HTML 代码都必须位于html标签中。其中位于的后面，位于网页的结尾。

<!DOCTYPE html>
<html>
  <h1>
    hhh
  </h1>
</html>

定义 HTML 文档的标题和正文
- html的结构主要分为两大部分：head、body。关于网页的描述都应该放入head标签，网页的内容都应该放入body标签
- link、meta、title和style都应该放入head标签
- 给网页添加head和body，head元素应该包含title，body元素应该包含h1和p。

FreeCodeCamp学习点总结-HTML部分

前言

HTML基础部分

主要元素介绍

a标签链接

列表

表单+输入框

单选复选按钮

元素嵌套

html文档相关