最近在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-width: 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); 表示純黑。