一、input標籤
1.<input>實現按鈕效果
-與表單相關的按鈕效果
-<input type="button" value="按鈕">
2.<button>標籤表示按鈕
-與表單無關的按鈕效果：<button>按鈕</button>
-類似於<input type="submit"> - 提交表單
3.<input type="image">
-基本用法 - 也可以顯示圖片
-滑鼠點選圖片時 - 也有提交表單的作用
<input type="image" src="imgs/girl.jpg">
不同於<img src="imgs/girl.jpg">（只是圖片）二、基本選擇器
1.選擇器的優先順序別
萬用字元選擇器 < 元素選擇器 < 類選擇器/屬性選擇器 < ID選擇器
2.元素選擇器 - 定位當前頁面的指定標籤名
ID選擇器 - 定位當前頁面中指定ID屬性值的標籤（只能匹配一個標籤，無法重複使用）
類(class)選擇器 - 定位當前頁面中指定class屬性值的標籤
萬用字元選擇器 - 匹配當前頁面所有內容
屬性選擇器 - [attr] - 匹配含有指定屬性(屬性名為attr)的標籤(元素)。
3.優先順序別：內聯樣式 > 外聯樣式。
4.!important
設定當前內容的選擇器的級別為最高;
注意 - 打亂CSS選擇器的預設優先順序別順序;
建議 - 儘量不要使用.三、關係選擇器
1.祖先與後代的關係 - 後代選擇器 A B
2.父級與子級的關係 - 子選擇器 A>B
3.相鄰兄弟選擇器 - 定位指定元素的下一個兄弟元素 A+B
4.後面兄弟選擇器 - 定位指定元素的後面所有兄弟元素 A~B四、組合選擇器
1.組合選擇器 - 選擇器之間使用逗號隔開，之間為並集如：
h1, h2, h3 {font-size: 18px;}
其中：<h1>標題一</h1>
<h2 >標題二</h2>
<h3>標題三</h3>
2.組合選擇器 - 選擇器之間沒有任何分隔，之間為交集
1） p#p1 { color: lightcoral; } 都選中
<p>這是一個段落內容.</p>
<p id="p1">這是一個段落內容.</p>
2） p.mini { font-size: 12px; } 只選中p元素。
<h2 class="mini">標題二</h2>
<p class="mini">這是一個段落內容.</p>五、顏色值
1.使用英文單詞描述顏色
-常用的顏色使用比較方便
-問題
-比較特殊的顏色，表示比較麻煩
-不同瀏覽器對單詞描述的顏色存在色差
-建議 - 開發中，儘量不要使用
2.顏色基本由三原色（紅、綠、藍）組成
-rgb(紅, 綠, 藍)
-每個顏色值的範圍 - 0 ~ 255
- #紅綠藍
-每個顏色使用兩位表示
-值的範圍 00 ~ ff
-舉例
-#000000六、偽類
偽類 - 設定指定狀態下的樣式
<a>標籤連結 - 預設樣式
未被訪問的樣式 - 字型顏色為藍色
滑鼠懸浮在連結元素時 - 滑鼠樣式變化
當滑鼠點選連結元素時 - 字型顏色為紅色
已被訪問的樣式 - 字型顏色變化
：hover ：active ：visited ：link ：focus七、偽元素
：：before ：：after等八、塊級元素與內聯元素
1.塊級元素
獨佔一行（自動換行） - 所有的塊級元素都是垂直排列的
<h1> <p> <ul> <table>
2.內聯元素
內聯元素是水平方向排列的
內聯元素 - 設定高度和寬度是無效的（高度和寬度由文字決定）
<a> <td> <img>九、語義化
所謂的語義化
-每一個指定的HTML元素， 具有明確的指定含義。
HTML編寫靜態頁面時
1. 使用常見的HTML元素 + CSS樣式
-<table>、<h1>、<p>等
2. 使用語義化的HTML元素 + CSS樣式
-HTML5新增了很多語義化標籤
3.若<div>與<span>元素 + CSS樣式，這兩個標籤都是無語義化的表示十、div與span
1.<div>標籤是塊級元素 - 獨佔一行
- 預設的寬度為父級元素寬度的100%
- 預設的高度為 0
作用：用於佈局
2.<span>元素是內聯元素