HTML表單及CSS選擇器、僞類和僞元素

1、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">（只是圖片）

2、基本選擇器

1.選擇器的優先級別
 通配符選擇器 < 元素選擇器 < 類選擇器/屬性選擇器 < ID選擇器
2.元素選擇器 - 定位當前頁面的指定標籤名
  ID選擇器 - 定位當前頁面中指定ID屬性值的標籤（只能匹配一個標籤，沒法重複使用）
  類(class)選擇器 - 定位當前頁面中指定class屬性值的標籤
  通配符選擇器 - 匹配當前頁面全部內容
  屬性選擇器 - [attr] - 匹配含有指定屬性(屬性名爲attr)的標籤(元素)。
3.優先級別：內聯樣式 > 外聯樣式。
4.!important
  設置當前內容的選擇器的級別爲最高;
  注意 - 打亂CSS選擇器的默認優先級別順序;
  建議 - 儘可能不要使用.

3、關係選擇器

1.祖先與後代的關係 - 後代選擇器 A B
2.父級與子級的關係 - 子選擇器 A>B
3.相鄰兄弟選擇器 - 定位指定元素的下一個兄弟元素 A+B
4.後面兄弟選擇器 - 定位指定元素的後面全部兄弟元素 A~B

4、組合選擇器

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>

5、顏色值

1.使用英文單詞描述顏色
  -經常使用的顏色使用比較方便
  -問題
   -比較特殊的顏色，表示比較麻煩
   -不一樣瀏覽器對單詞描述的顏色存在色差
    -建議 - 開發中，儘可能不要使用
2.顏色基本由三原色（紅、綠、藍）組成
  -rgb(紅, 綠, 藍)
  -每一個顏色值的範圍 - 0 ~ 255
  - #紅綠藍
    -每一個顏色使用兩位表示
    -值的範圍 00 ~ ff
    -舉例
    -#000000

6、僞類

僞類 - 設定指定狀態下的樣式
<a>標籤連接 - 默認樣式
   未被訪問的樣式 - 字體顏色爲藍色
   鼠標懸浮在連接元素時 - 鼠標樣式變化
   當鼠標點擊連接元素時 - 字體顏色爲紅色
已被訪問的樣式 - 字體顏色變化
：hover  ：active  ：visited  ：link  ：focus

7、僞元素

：：before   ：：after等

8、塊級元素與內聯元素

1.塊級元素
    獨佔一行（自動換行） - 全部的塊級元素都是垂直排列的
    <h1>  <p>  <ul>  <table>
2.內聯元素
    內聯元素是水平方向排列的
    內聯元素 - 設置高度和寬度是無效的（高度和寬度由文字決定）
    <a>  <td>  <img>

9、語義化

所謂的語義化
 -每個指定的HTML元素， 具備明確的指定含義。
HTML編寫靜態頁面時
1. 使用常見的HTML元素 + CSS樣式
 -<table>、<h1>、<p>等  
2. 使用語義化的HTML元素 + CSS樣式
 -HTML5新增了不少語義化標籤
3.若<div>與<span>元素 + CSS樣式，這兩個標籤都是無語義化的表示

10、div與span

1.<div>標籤是塊級元素 - 獨佔一行
  - 默認的寬度爲父級元素寬度的100%
  - 默認的高度爲 0
  做用：用於佈局
2.<span>元素是內聯元素