接下來的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
,就近原則。