使用一個CSS Class去給標簽定義Style
類是可重用的樣式，可以添加到HTML元素。
下面是一個CSS類聲明的例子：
<style>
.blue-text {
color: blue;
}
</style>
你可以看到我們已經在 <style> 標簽中創建了一個名為 blue-text 的CSS類。
你可以將類應用於HTML元素，如下所示：
<h2 class="blue-text">CatPhotoApp</h2>
注意，在CSS樣式元素中，類選擇器應該添加.為前綴。而在HTML元素的類聲明中，類屬性不能添加.為前綴。
在你的style元素中，將h2選擇器修改為.red-text選擇器，並將顏色值從blue修改為red。
最后，給你的 h2 元素的 class 屬性的值為.red-text。
HTML 給標簽增加邊框
CSS 邊框具有 style(樣式)、color(顏色)、width(寬度) 等屬性。
例如，如果我們想要設定一個HTML元素的邊框顏色為紅色、邊框寬度為5像素(px)、邊框樣式為實線(solid)，代碼如下所示:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
任務：創建一個叫 thick-green-border的class，設定它的邊框寬度為10px、邊框樣式為solid、邊框顏色為綠色，並將該class應用於你的貓咪照片上。
請記住，你可以應用多個class到一個元素，只需要在多個class之間用空格分開即可。例如：
<img class="class1 class2">
<style>
.thick-grenn-border{border-width:10px;
border-style:solid;
border-color:green;}
</style>
</style>
HTML 創建文本輸入框
現在我們來創建一個Web表單。
文本輸入框是獲取用戶輸入的一種方便的方法。
你可以用如下方法創建：
<input type="text">
注意，input元素是自關閉的。
任務：在列表下創建一個type（類型）為 text 的input元素。
<input type="text">
添加文本框設定預定值（占位符）屬性placeholder
用法<input type="text" placceholder="預設文本">
效果
HTML 添加表單
你可以使用HTML來構建跟服務器交互的Web表單。你可以通過在form元素上添加一個action屬性來執行此操作。
action屬性的值指定了表單提交到服務器的地址。
例如：
<form action="/url-where-you-want-to-submit-form-data"></form>
把你的文本輸入框嵌套到form元素中。並為此form元素添加action="/submit-cat-photo"。
<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>
HTML 為表單添加提交按鈕
我們在form中添加一個 submit (提交)按鈕。點擊此按鈕，表單中的數據將會被發送到你使用表單 action 屬性指定的地址上。
以下是一個submit按鈕的例子：
<button type="submit">this button submits the form</button>
在你的 form 元素中添加一個提交按鈕，並以類型為 submit， "Submit"為按鈕文本。
<form action="/submit-cat-photo">
<button type="submit">Submit</button>
<input type="text" placeholder="cat photo URL">
</form>
效果
HTML 添加單選框
你可以使用單選按鈕來解決你希望用戶只給出一個答案的問題。
單選按鈕是 input 輸入框的一種類型。
每個單選按鈕都應該嵌套在自己的 label(標簽) 元素中。
所有關聯的單選按鈕應具有相同的 name 屬性。
下面是一個單選按鈕的例子：
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
在你的表單中添加兩個單選按鈕，一個叫 indoor，另一個叫 outdoor。
<label><input type="radio" name="indoor-outdoor">indoor</label>
<label><input type="radio" name="indoor-outdoor">outdoor</label>
HTML 添加復選框
checkboxes（復選按鈕）通常用於可能有多個答案的問題的形式。
復選按鈕是 input 的輸入框的一種類型。
每一個復選按鈕都應嵌套在其自己的 label元素中。
所有關聯的復選按鈕輸入應該具有相同的 name屬性。
以下是一個復選按鈕的示例：
<label><input type="checkbox" name="personality"> Loving</label>
任務：為你的表單添加三個復選按鈕，每個復選按鈕都應嵌套在其自己的 label 元素，所有復選按鈕的name屬性必須為personality。
<label><input type="checkbox" name="personality">Loving</label>
<label><input type="checkbox" name="personality">like</label>
<label><input type="checkbox" name="personality">hate</label>
效果
HTML 在div元素中嵌套多個元素
div 元素，也被稱作division(層)元素，是一個盛裝其他元素的通用容器。
div 元素是最常用的HTML元素。所以可以利用CSS的繼承關系把 div 上的CSS傳遞給它所有子元素。
你可以使用<div>來標記一個div元素的開始，並使用</div>來標記一個div元素的結束。