標簽
<h> ?</h>
h是英文header標題的縮寫，標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文、PPT等。h1是主標題，h2是副標題，h3、h4、h5、h6依次遞減字體的大小。
<p> ?</p>
P是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣。
HTML 更換文本的顏色
style(樣式)
<h1 style = "color: red"> TEXT </h1>
使用CSS選擇器定義標簽
<style>
? ? ?h1 {color : red;}
</style>
<h1> text </h1>
注意：一定要在屬性值的后面加上分號;。
設置標簽的字體大小
font-size: 30px;
設置標簽的字體樣式
font-family: Sans-serif;
引入Google字體
<link rel="stylesheet" type="text/css">
font-family:Lobster
添加圖片
<style>
? ? ? .smaller-image{
? ? ? width: 100px;
? ? ? }
</style>
<img class="smaller-image" src="/statics/codecamp/images/relaxing-cat.jpg" alt="your alt text">
注意：<img>元素是自關閉的。
alt屬性：當圖片無法加載時顯示的替代文本。
增加邊框
CSS 邊框的屬性有style(樣式)、color(顏色)、width(寬度)、height(高度)、邊框半徑等。
如果我們想要讓一個HTML元素的邊框顏色為紅色、邊框寬度為5像素(px)、邊框樣式為固體(solid)，代碼如下:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px; ? ? ? ? ? ? ? ? //除了像素，你還可以使用百分比來指定border-radius邊框半徑的值。border-radius: 50%
}
</style>
提示：你可以應用多個class到一個元素，只需要在多個class之間用空格分開即可。例如：
<img class = "thin-red-border ?smaller-image" scr="/statics/codecamp/images/relaxing-cat.jpg">
<a> </a>鏈接跳轉
a元素，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。
<a > cat photos </a>
嵌套：
<p>view more
<a > 點擊 </a>
</p>
圖片鏈接：
<a href="#"> <img src="/images/relaxing-cat.jpg"> </a>
項目符號無序列表&有序列表
HTML有一個特殊元素，用于創建unordered lists（無序列表）, 或帶項目符號的列表。
無序列表以<ul>元素開始，并包含一個或多個<li>元素。
有序列表以<ol>元素開始，并包含一個或多個<li>元素。
<ul>
<li>cat</li>
<li>pig</li>
</ul> ??
cat
pig
文本輸入框
Text input(文本輸入框)是用來獲得用戶輸入的絕佳方式。
占位符(placeholder text)是用戶在input(輸入)框輸入任何東西之前放置在input(輸入)框中的預定義文本。
<input type="text"? placeholder="this is placeholder text">
添加表單
<form><form>標簽用于為用戶輸入創建 HTML 表單。
表單能夠包含input元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單用于向服務器傳輸數據。
使用HTML來構建可以跟服務器交互的Web表單(form)，通過給你的form元素添加一個action屬性來達到此目的。
為表單添加提交按鈕
為你的form添加一個submit(提交)按鈕，點擊這個按鈕，表單中的數據將會被發送到你通過action屬性指定的地址上。
表單設置為必填
在你的input元素中加上required屬性就可以了。
<form action="/url-where-you-want-to-submit-form-data">
<input type="text" placeholder="cat photo URL" required>
<button type="submit"> submit </button>
? </form> ?
單選框
按鈕單選只是input輸入側框的一種類型。
一個每單選按鈕都應該嵌套在它自己的label(標簽)元素中。
注意：關聯所有的單選按鈕應該使用相同的name屬性
checked屬性設置復選按鈕和單選按鈕默認被選中
<label>? ? <input type = "radio" name = "indoor-outdoor" checked> indoor? </label>
<label>? ? <input type = "radio" name = "indoor-outdoor"> outdoor ?</label>
復選框
checkboxes（復選按鈕）。
復選按鈕是input的輸入框的另一種類型。
每一個復選按鈕都應該嵌套進label元素中。
所有關聯的復選按鈕應該具有相同的name屬性。
checked屬性設置復選按鈕和單選按鈕默認被選中
<label>? <input type = "checkbox" name = "SCORE" checked>? 1ST </label>
<label>? <input type = "checkbox" name = "SCORE"> ?2ED </label> ??
div元素
div元素，也被稱作division(層)元素，是一個盛裝其他元素的通用容器。
添加ID屬性&使用ID屬性設置標簽樣式
除了class屬性之外，每一個 HTML 元素還可以使用id屬性。
聲明一個叫cat-photo-element的ID選擇器 ，并設置背景色為綠色。
#cat-photo-app {
background-color: green;
}
注意：在你的style元素內部，定義類選擇器必須添加.為前綴，定義ID選擇器必須添加#為前綴。
<h2 id="cat-photo-app"> <h2>
