接下來的30天喜不喜歡都要過，為什么不做一件想做的事情呢？
- 無序列表Unordered List：使用
<ul>...</ul>標簽創建。
<ul>
<li>Apple</li> <!--每一個li標簽都是無序序列的一項-->
<li>Mi</li>
<li>Meizu</li>
...
</ul>
同理，有序序列Order List：使用<ol>...</ol>標簽創建。
<ol>
<li>Apple</li> <!--每一個li標簽都是無序序列的一項-->
<li>Mi</li>
<li>Meizu</li>
...
</ol>
-
<form>...</form>標簽可以創建表單，通過表單的action屬性可以使表單與服務器進行交互，action的值指定了接受表單數據服務器的地址。
<form action = "url you want to submit form data">...</form>
- 表單中的文本輸入框（Text Input）：用來獲取用戶輸入的文本框。
<input type = "text"> <!-- type = "text" 表示輸入框的類型是文本-->
注：input是自封閉的標簽，無需結束標記。
占位符（Placeholder Text）：在input輸入框中，用戶輸入之前默認顯示的內容。使用input標簽的placeholder屬性可以指定默認的內容。
<input type = "text" placeholder = "the default content">
必填屬性（required）：使文本框必須填寫，如果不填，在點擊提交的時候會提示請輸入內容，否則不能提交。
<input type = "text" placeholder = "the default content" required>
- 提交按鈕（Submit Button）：點擊提交按鈕，表單中的數據將會發送到
form標簽action屬性指定地址的服務器上。
<button type = "submit">確認</button> <!-- submit按鈕一般緊跟文本輸入框 -->
- 單選按鈕（Radio）：輸入框的一種，只是
type = radio。每個單選選項需要嵌套在自己的label標簽中，用來顯示按鈕上的內容。
<label><input type = "radio" name = "food" >Rice</label>
<label><input type = "radio" name = "food" >Noodle</label>
<label><input type = "radio" name = "food" >Bread</label>
注：相關聯的一組單選選項必須有相同的name屬性！
- 復選按鈕（Checkbox）：輸入框的另一種類型，每個復選選項需要嵌套在自己的
label標簽中，用來顯示按鈕上的內容。
<label><input type = "checkbox" name = "food" >Rice</label>
<label><input type = "checkbox" name = "food" >Noodle</label>
<label><input type = "checkbox" name = "food" >Bread</label>
注：同理，相關聯的復選按鈕需要相同的name屬性！
- Radio和Checkbox默認選中：
checked屬性。
<label><input type = "radio" name = "food" >Rice</label>
<label><input type = "radio" name = "food" >Noodle</label checked>
<label><input type = "radio" name = "food" >Bread</label>
注：默認選擇的是Noodle。
div元素
指division（層）元素，用于盛裝其他元素的通用容器，類似于PS中層的概念。每個div元素中的內容都是相互獨立。
可以利用CSS繼承關系，將div上的CSS傳給它的所有子元素。
- 使用
class類選擇器為一個div元素設置背景：
<styel>
.green-background {background-color: green;}
</style>
調用背景樣式：
<div class = "green-background">...</div>
- HTML元素的
id屬性
id屬性與class屬性類似，可以聲明選擇器，并且優先級高于類選擇器。HTML元素中id屬性是唯一的！
#cat-photo-app {background-color: gray;}
類選擇器使用.前綴聲明，id選擇器用#前綴聲明。id選擇器的調用與類選擇器相同，在HTML標簽中是屬性id的值為id選擇器的名稱，但是去掉#。
<h2 id = "cat-photo-app">...</h2>
布局
HTML元素本質上是html頁面上小塊的矩形，代表頁面上的一小塊區域。影響HTML元素布局的三個重要屬性：margin外邊距、padding內邊距、border邊框。
-
padding屬性：控制元素內容與元素邊框之間的距離。
四周邊距相同，CSS中樣式描述：
.red-box {padding: 10px;} /*用像素描述*/
四周邊距不等：
.red-box {padding-top: 10px; /*上邊距*/
padding-right:20px; /*右邊距*/
padding-bottom:30px; /*下邊距*/
padding-left: 40px;} /*左邊距*/
注：上述寫法可以簡寫：
.red-box {padding: 10px 20px 30px 40px;} /*按照上、右、下、左順時針填寫*/
-
margin屬性：控制元素邊框和元素所占實際空間的距離。
四周邊距相等，CSS樣式描述：
.red-box {margin: 10px;} /*用像素描述*/
四周邊距不等：
.red-box {margin-top: 10px; /*上邊距*/
margin-right:20px; /*右邊距*/
margin-bottom:30px; /*下邊距*/
margin-left: 40px;} /*左邊距*/
注：上述寫法可以簡寫：
.red-box {margin: 10px 20px 30px 40px;} /*按照上、右、下、左順時針填寫*/
注：如果margin為負值，元素所占區域將會變大！
CSS的繼承
每個html頁面均有唯一的<body>...</body>元素，其余所有HTML元素均是body元素的子元素。
body元素可以應用CSS樣式，其內的所有子元素都將繼承body元素的樣式。使用選擇器為子元素重新賦予CSS樣式時，會覆蓋掉body元素繼承的樣式。
選擇器的優先級：
!important > id > class > element
注：其上四個均會覆蓋的從body繼承的樣式。
- 相同類別的選擇器，優先級遵從就近原則：樣式聲明的位置越靠下，里應用樣式的HTML元素越近，優先級越高。
<style>
.blue-text {color: blue;}
.red-text{color: red;}
</style>
<h2 class = "blue-text red-text">...</h2>
注：h2元素應用的樣式為red-text，就近原則。
