最近在FCC学习前端，将学到的知识点整理如下：
1、常用标签及基本样式设置
1）标题
h1 一级标题 主标题，h2 副标题，h3,h4···字体依次往下减小
2）段落标签p
段落标签<p></p>，用来创建段落
3）注释
html中注释用<!-- 中间为注释内容 -->
4）设置样式
第一种：直接在元素中使用style进行修改，如，<h2 style="color:red">可爱的猫咪</h2>
第二种：在元素前统一使用
<style>
选择器{属性名称：属性值;} 属性值后面一定要加上英文分号
</style>进行样式设置，这里的选择器可以是元素选择器，类选择器，
元素选择器如<style> h2{color:blue;} </style>
类选择器如<style> .red-text{color:blue;}</style> 必须使用.
第三种：单独建立.CSS文件，在html中直接引用
5）font-size与 font-family
font-size设置字号 font-family设置字体
导入谷歌字体：<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。当某种字体不可用时，你可以让浏览器自动降级到另一种字体。
如，p {
font-family: Helvetica, Sans-Serif;
}当Helvetica字体不能用时，自动降级到Sans-Serif字体
6）img标签
img元素是自关闭元素，不需要结束标记。如，<img src="https://www.your-image-source.com/your-image.jpg"> 使用src属性指向一个图片的具体地址。
设置图片大小，使用width属性设置图片的宽度
当图片无法加载时，使用alt属性进行文字提示代替图片显示，如，<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">
7）设置元素边框
可以使用border-color: red;border- 5px;border-style: solid;这三种属性分别来设置，还可以合起来设置border:5px solid red;
对于矩形边框，为了使其美观，可以使用border-radius属性来设置边框外形，
例如border-radius：10px;，得到的效果如图所示，
设置出来是边角半径为10px的一个边框；border-radius：50%;使用百分比来设置边框半径的值，效果如图
8）a标签
用于链接地址<a href=" 链接地址" >链接显示名称</a> a可以放在段落中间，即可以进行嵌套，如，<p>Here's a <a href="链接地址"> 链接显示名称 </a> 段落文本</p>
如果想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接，即将href后的链接改为“#”，将其变为一个固定链接。
可以通过把某元素嵌套进a元素使其变成一个链接，如<a href="#"><img src="/images/relaxing-cat.jpg"></a>，当点击图片时鼠标将变为手型。
9）无序列表ul
无序列表以<ul>元素开始，并包含一个或多个<li>元素。
如<ul>
<li>milk</li>
<li>fish</li>
``````
</ul>
10）有序列表ol
和ul类似
11）表单form1
Text input(文本输入框)是用来获得用户输入的绝佳方式。
可以创建为：<input type="text"> 注意，input元素是自关闭的
占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。如，<input type="text" placeholder="this is placeholder text">
使用HTML来构建可以跟服务器交互的Web表单(form)，通过给form元素添加一个action属性来达到此目的，action属性的值指定了表单提交到服务器的地址，
如<form action="/url-where-you-want-to-submit-form-data"></form>
为form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到通过action属性指定的地址上。如，<button type="submit">this button submits the form</button>
整个的一个表单如下，实现效果如图
具体代码如下:
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
12）表单form2
当设计表单时，可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。
例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：<input type="text" required>
13）单选按钮radio button
单选按钮只是input输入框的一种类型，每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意：所有关联的单选按钮应该使用相同的name属性。
如：<label><input type="radio" name="indoor-outdoor">indoor</label>
<label><input type="radio" name="indoor-outdoor">outdoor</label>
14）复选按钮checkboxes
复选按钮是input的输入框的另一种类型，每一个复选按钮都应该嵌套进label元素中。和单选按钮类似，所有关联的复选按钮应该具有相同的name属性。
如： <label><input type="checkbox" name="personality">Loving</label>
<label><input type="checkbox" name="personality">outgoing</label>
<label><input type="checkbox" name="personality">shy</label>
使用checked属性，你可以设置复选按钮和单选按钮默认被选中。如<input type="radio" name="test-name" checked>
15）div和background
div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器 background-color 属性来设置一个元素的背景颜色，如：.green-background {background-color: green;}
16）基本选择器
通配选择器 选择文档中所有HTML元素
元素选择器 选择指定类型的HTML元素
类选择器 选择指定class属性值为“class”的任意类型的任意多个元素 定义类选择器必须添加 . 为前缀
ID选择器 选择指定ID属性值为“id”的任意类型元素 id 属性应该是唯一的 定义ID选择器必须添加 # 为前缀，id 属性具有更高的优先级。
群组选择器 将每一个选择器匹配的元素集合并
类选择器后面设置的样式可以覆盖前面设置的样式，ID选择器样式可以覆盖类选择器设置的样式，行内样式设置可以覆盖类选择器和ID选择器设置的样式
如果需要某个样式不被覆盖，可以使用！important，如，color: pink !important;
17）HTML元素布局
padding（内边距）控制元素内容 content和元素边框 border 之间的距离，CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding。
padding: 10px 20px 10px 20px;这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
如果上下相同，左右相同，则可以写成padding: 10px 20px；如果上下左右均相同，则可以写为padding:20px;
margin（外边距） 控制元素边框 border 和元素实际所占空间的距离，将一个元素的 margin 设置为负值，元素将会变大。简写类似padding
border（边框）简写为border:5px solid red;
18）颜色表示
英语
16进制。16进制用6位数表示，前2位代表R红色，0最小，F最大，中间2位代表G绿色，最后2位代表B，蓝色，如#00FF00，代表纯绿色，可以简写为#0F0。
RGB值。 background-color: rgb(0,0,0); 表示纯黑。