表單控制元件

在HTML中使用form來建立一個表單，表單中包含各式各樣的輸入控制元件、選框以及按鈕。最終表單要提交到伺服器，這就需要在form標籤上面設定method='post'和action='index.php'。表單中 可以使用fieldset來區分不同的型別的輸入資訊，使用<legend></legend>。

<form method="post" action="index.php">
    <fieldset>
        <legend>
            基本資訊
        </legend>
        <!--一些輸入控制元件--->
    </fieldset>
    <fieldset>
        <legend>
            詳細資訊
        </legend>
        <!--一些輸入控制元件--->
    </fieldset>
</form>
 

輸入控制元件主要是input標籤，不同型別的輸入控制元件，它的type屬性值不一樣：

• type='text' 普通文字框 可以輸入一行資訊 一般是短內容的輸入，它支援的屬性：

  • size：文字框的長度
  • maxlength：可輸入的最大字元
  • value：初始化的預設值
  • placeholder：初始化的提示資訊 它以灰色且不阻塞輸入的方式呈現
  • readonly：只讀屬性，該輸入框 不支援修改 該控制元件可以提交到伺服器
  • disbabled ：禁用的控制元件是指服務端無法接收該文字框的值，一般使用者展示資訊

  文字框還可以配合datalist標籤一起使用，datalist用來輸入提示資訊，每個提示項放在<option>

  標籤中，然後在文字框裡面使用list屬性關聯該datalist列表：

  <input type='text' name='username' list='rel'>
  <datalist id='rel'>
  	<option value="Wang" />
      <option value="Hey Gor" />
      <option value='lautin' />
  </datalist>
  

• type='password' 密碼框，輸入內容不可見，它的屬性同文本框相似

• type='number' 數值輸入框，指定輸入數值以及控制它的範圍，屬性如下：

  • min：可輸入的最小值
  • max：可輸入的最大值
  • value：初始化的值

• type='date' 它可以生成一個日曆控制面板 供使用者選擇一個日期 避免輸入格式的混亂

  • value：預設的日期時間 該日期的格式必須是2019-08-12
  • 實際上 除了date日期外，還支援time、datetime、week、month型別的日曆。目前FF不完全支援，谷歌都支援

• type='color' 它可以一個顏色面板 供使用者選擇

• type='url' 支援輸入一個url地址，在提交時 會驗證格式中是否包含http(s)://協議

• type='email' 支援輸入一個郵箱地址，同樣在提交時 會自動嚴格它的格式 至少寫成a@b

表單中的按鈕選框也是使用input，它有幾種型別：

• type='radio' 單選框 同一個選項它的name值必須一致，否則無法實現單選
  • checked屬性 設定預設選中項
• type='checkbox' 多選框，支援同時選擇多個值 它的name值必須使用陣列形式，否則服務端只能接收到選中的第一個值。同樣的使用checked來預設選中項
• select定義下拉框：

表單中 必須的控制元件還有按鈕，按鈕也分為幾種：

• type="button" 普通按鈕 它沒有預設行為 需要配合javascript來實現互動
• type="reset" 重置按鈕 清空表單內容 重新輸入
• type="submit" 提交按鈕 觸發表單的提交行為

特別強調

所有的表單控制元件（輸入控制元件、選框等）都必須宣告它的name屬性，用於服務端接收資料

CSS入門

基本語法

<style>
    選擇器 {
        /*宣告列表*/
        屬性1:值1;
        屬性2:值2；
    }
</style>

引入方式

在HTML中嵌入css樣式 有三種方式：

• 內聯樣式： 在HTML中 使用style標籤嵌入的樣式
• 外聯樣式：當樣式較多的時候 建立單獨的css檔案來定義樣式，接下來在HTML頭中使用link引入該檔案
• 行內樣式：在標籤中通過style屬性給該元素定義樣式

當對同一元素 使用了不同的方式定義了同一個屬性，會存在優先順序，採用就近原則。

基本選擇器

• 標籤/元素名選擇器：直接通過標籤名來選擇相應的元素
• class類選擇器：通過給標籤新增類名 然後在css中使用.類名來選中元素。class可以同時標記多個元素
• ID選擇器：給標籤設定ID名稱，然後在css中使用#ID來選中該元素，ID名不能重複

常用的屬性

• 文字相關的屬性設定：
  • color :
  • font : 縮寫形式，它包含 font-weight,font-style|font-size,font-family
  • text-align :
  • text-decoration ：
• border ：縮寫形式，它包含：border-width,border-style,border-color
• background ：縮寫形式，它包含：background-color,background-image,background-repeat,background-position
• width和height：它只對塊級（整行）元素有效，行內元素無意義

選擇器詳解

關係選擇器

關係選擇器是通過元素之間的關聯關係來查詢元素，例如：父子關係、兄弟關係、鄰里關係

• 後代選擇器：S1 S2，匹配S1內部的所有後代S2，不限於某一級
• 子選擇器：S1>S2，匹配S1中的下一級S2，也就是“子級”元素。
• 相鄰選擇器：S1+S2 ，匹配S1後面緊挨著的同級（兄弟）元素S2
• 兄弟選擇器：S1~S2 ，匹配S1後面的所有同級（兄弟）元素S2

在書寫時 關係符號和元素之間 可以有空白符，但不建議加，可以使用格式化去除。

屬性選擇器

根據HTML標籤的屬性特徵來選擇元素，它有幾種匹配的方式：

• [attr]：[]表示匹配具有attr屬性的元素 ，不要求值
• [attr="aa"] 表示具有attr屬性且為定值aa的元素
• [attr*="aa"] 表示具有attr屬性，值包含aa關鍵字即可
• [attr~="aa"] 表示具有attr屬性，值中包含aa單詞，aa必須作為一個單詞出現
• [attr^="aa"]表示具有attr屬性，值以aa開頭即可
• [attr$="aa"]表示具有attr屬性，值以aa結尾即可

偽類選擇器

偽類選擇器是通過單冒號（：）和特定的具有某種含義的單詞來確定所選元素。

所謂偽類選擇器，是相對於“類選擇器”來說的，對比如下：

• 類選擇器：

  說明：類的名稱是由我們程式設計師來設定的，符合命名規範就行。

  形式：.類名稱{ ... }

• 偽類選擇器：

  說明：偽類的名稱是CSS標準中所預先設定的，我們不能自己設定。可用的偽類名不多。

  形式：:偽類名稱{ ... }

a連結偽類

這4個偽類主要用於表示一個連結（也就是a標籤）的4種不同狀態。

它們可以設定一個連結在不同狀態下的外觀表現（樣式表現）。

:link ——表示一個連結初始時候的狀態。

:visited ——表示一個連結在訪問（點選）過之後的狀態。

:hover ——表示一個連結在滑鼠移上去（滑鼠懸停）的時候的狀態。

:active ——表示一個連結在活動狀態的時候的狀態，通常就是點選的瞬間（按住不放能看到）。

注意：

1. 這幾個偽類選擇器主要用於a標籤，形式類似這樣： a:link{ ... }, a:visited{ ... }等。
2. :hover也經常用於其它標籤，表示滑鼠放上去的時候的樣式表現。
3. 對於a連結的這4個狀態，他們有順序問題，必須按上述順序才有合理效果（lvha，Lv哈）

E:focus

表示一個元素在成為可輸入狀態（獲得焦點）的時候，主要用於表單元素。

其中“E”表示某個元素（或某個選擇器所選中的元素）。

字首元素E是表示該元素在獲得焦點的時候，其樣式表現如何。

也可以不用前面寫“E”，而是直接用“:focus”，但實際應用中，一般會在前面有這個限定。

比如：

input:focus{ .... } /表示input元素在獲得焦點的時候/

也可以不用input，如下所示：

:focus{ .... }

但此時其實所選擇的範圍擴大了（不僅僅針對input元素）。

子元素偽類

這幾個偽類用於表示（或選中）“具有某種特徵的子元素E”，它有如下幾種形式：

• E:first-child ——匹配作為父元素的第一個子元素E。

• E:last-child ——匹配作為父元素的最後一個子元素E。

• E:only-child ——匹配作為父元素的唯一一個子元素E。

• E:nth-child(n) ——匹配作為父元素的第n個子元素E。括號中的n是一個具體數字

• E:nth-last-child(n) --匹配作為父元素的倒數第n個子元素E，n的值從1開始

li:first-child{ ... }	/*表示作為第一個子元素的li標籤*/
td:last-child{ ... }	/*表示作為最後一個子元素的td標籤*/
p:only-child{ ... }		/*表示作為父元素中只有一個子元素且為p標籤*/
li:nth-child(2){ ... }	/*表示作為第2個子元素的li標籤*/

子元素選擇器中 一些特殊的用法：

• :nth-child(2n+1)在表示式2n+1中，n的值從0開始，代表0,1,2,3,,,,n這樣的值。它表示每2箇中的第1個元素，也就是所有子元素中編號為奇數的那些。編號為偶數的即是2n或者2n+2
• nth-last-child(-n+3) 表示式中n的值也是0,1,2,，，n，隨著n值的改變 -n+3表示式的值是3,2,1，對應的倒數前3個元素。也就是說-n+x可以用來選擇連續倒數的x個元素。

注意：上述也可以單用（不要冒號前面的部分），但一般較少這樣用。

其他偽類

• E:empty：選擇內容為空的E元素，就是標籤內什麼都沒有，空格也不能有。毋庸置疑 所有的單標籤一定符合

<style>
    li:empty {
        color : red;
    }
</style>
<ul>
    <li>item1</li>
    <li> </li>  
    <li></li>	/*它會變紅*/
</ul>

• E:checked：作為選中項的E元素 它針對radio和checkbox
• E:enabled：作為有效控制元件的E元素，不能含有disabled屬性
• E:disabled：作為無效控制元件的E元素，也就是含有disabled屬性的輸入控制元件

偽元素選擇器

偽元素選擇器是通過雙冒號（：：）和特定的具有某種含義的單詞來確定所選元素。

偽元素選擇器通常是"本沒有這個元素（標籤）"，但會創建出一個隱性元素並對其進行樣式設定。

偽元素選擇器又稱為“偽物件選擇器”。

• E::before

  • 表示會建立一個新元素並新增到元素E的內部的最前面（偽元素）。

    其中必須寫上一個屬性：content:"內容"; 當然，內容可以為空。

• E::after

  • 表示會建立一個新元素並新增到元素E的內部的最後面（偽元素）。

    其中必須寫上一個屬性：content:”內容”;

• E::selection

  • 表示給元素E內容中“選中的部分”建立一個偽元素並設定它的樣式。

• E::first-line

  • 表示給元素E中的“第一行內容”建立一個偽元素並設定它的樣式。

• E::first-letter

  • 表示元素E中的“第一個字元”可以單獨作為一個元素（偽元素）。

選擇器組合

選擇器的組合是將多個不同形式的選擇器組合起來以確定所選元素，它主要有以下幾種形式：

• E(Element)：元素選擇器
• E.class：表示選擇E元素 同時它的類名是class
• E#id：表示選擇E元素 同時ID是id
• E[attr]：表示選擇E元素 且屬性為attr
• 並列選擇器：表示同時選中這些元素，例如：div , p 選擇div和p

CSS樣式特性

層疊性

所謂層疊性，是指對同一元素同一屬性的設定，後設定的某個樣式（屬性）會覆蓋之前設定的樣式。例如：

.d1 { color: red; }
.d1 {color: blue; }
<div class="d1">文字內容</div>

則此時文字顏色就是blue，即後者覆蓋了前者的設定。

事實上它分為兩種情況：

1. 兩個相同的選擇器選中了相同的元素，並設定了同樣的屬性，後者覆蓋前者。
2. 兩個同級別的不同選擇器選中了相同的元素，並設定了同樣的屬性，也是後者覆蓋前者。

body .d1 { color : red; }
div.d1 { color : blue; }

繼承性

所謂繼承性，是指對某個元素所設定的樣式，不但影響該元素本身，還影響該元素的後代元素。例如：

.d1 {color:red;}
<div  class="d1">
	文字1
	<p>文字2</p>
</div>

則此時文字1和文字2實際都是紅色。

實際上繼承性不是普遍情況，而只是少數一些屬性才具有繼承性（即能夠影響後代元素）。

應用中繼承性通常用在有關文字屬性上。

盒子模型

所謂盒子，就是將HTML網頁中的標籤在網頁版面中所佔據的平面範圍，抽象出來的一個“視覺形狀”。

一個簡單的理解就是：幾乎所有標籤，都可以看做是一個“矩形盒子”，具有一定的寬高（區域）。

總體上來說，一個盒子是由若干個部分構成的，從內到外依次包括：

​ 盒子內容區，內邊距區，邊框，外邊距區

• content：內容

• padding：內邊距，又稱為內補白，是一片空白區域

• border：邊框

• margin：外邊距，又稱為外補白，也是一片空白區域

  top，right，bottom，left：上，右，下，左

特別注意：

1. 一般情況下，給容器設定的width和height是指內容區的大小，不包括邊框和內邊距。事實上盒子模型有兩種，可以通過box-sizing來設定：

   ​ 1.1 外擴型：內容區大小不變 當設定內邊距和邊框時 盒子模型放大

   ​ 1.2 內減型：盒子的總大小不變 當設定內邊距和邊框時 內容區減小

2. 平常我們看不到內邊距，邊框和外邊距，是因為他們預設都是0（寬度，或厚度）。

盒子屬性

與盒子模型相關的屬性有：

border

邊框可以使用border縮寫形式，它包含三個屬性：border-width，border-style，border-color。這裡使用border是給盒子整體設定的邊框，還可以分別設定某一側的邊框：

• border-left ：左邊框
• border-right：右邊框
• border-bottom：下邊框
• border-top：上邊框

css中 合成詞 都是以"-"作為邏輯斷點的

div {
	border-bottom:1px solid red;
}
div {
	border-bottom-width : 1px;
	border-bottom-color : red;
	border-bottom-style : solid;
}

outline

outline是邊框以外的輪廓設定，它有四個屬性：

• outline-width：輪廓的寬度
• outline-style：輪廓樣式 可選值和邊框是一樣的
• outline-color：輪廓的顏色
• outline-offset：輪廓距離邊框的偏移值
• outline：以上四個屬性的縮寫形式

background

• 基本使用：

  • background-color :
  • background-image：
  • background-repeat：
  • background-position：
  • background：背景圖片的幾個屬性寫一起，顏色現在它們的前面或後面都行

  div {
      background:  url() no-repeat left top  red;
  }
  
  

• 精靈圖（spirit）設計

  • 精靈圖也叫雪碧圖，它是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。
  • 雪碧圖被運用在眾多使用了很多小圖示的網站上。相對於把每張小圖示以.png格式檔案的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對記憶體和頻寬更好，並且可以減小圖片的總大小。

width

width和height設定盒子內容區的尺寸，重點：只有塊級元素 才有盒子模型的概念以及尺寸大小。

• min-width
• max-width

padding

css中使用padding給盒子或者元素 新增內補白（內間距），它是元素和邊框之間的距離，有四個方向：

• 左邊距：padding-left

• 右邊距：padding-right

• 上邊距：padding-top

• 下邊距：padding-bottom

• 縮寫形式：padding，書寫時要遵循固定的順序（順時針）：↑→↓←

  div {
      padding-top : 5px;
      padding-right : 10px;
      padding-bottom : 15px;
      padding-left : 20px;
      padding : 5px 10px 15px 20px;
     
      padding : 8px;/*四個方向都是8px*/
      padding : 8px 18px;	/*上下8px 左右18px*/
      padding : 8px 18px 25px;/*預設的第四個值 取第二個*/
  }
  
  

margin

margin是外補白，也就是外邊距，它的設定和padding是一樣的：

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin：