HTML5與CSS3基礎(五)

2022-09-06 22:24:33 字數 1954 閱讀 4349

16表單

16.1輸入和元素

16.2建立表單

每個表單都已form開始標籤開始,以form結束標籤結束。

兩個標籤之間是組成表單的說明標籤、控制項和按鈕,每乙個控制項都有乙個name屬性,用於在提交表單時對資料進行識別。

form開始標籤可以有一些屬性,其中最重要的就是action和method

action屬性的值設為訪問者提交表單時伺服器上對資料進行處理的指令碼url,例如action=「s**e-info.php」

method屬性的值要麼是get 要麼是post。大多數情況下都可以使用post

get和post的區別

get,使用get後,表單中的資料就會顯示在瀏覽器的位址列裡。通常如果你希望在提交表單之後從伺服器得到資訊就使用get

例如,大多數搜尋引擎會在搜尋表單中使用get

post,使用method=「post」,表單中的資料不會顯示在瀏覽器的位址列裡,這樣更加安全。同時。比起get 使用post可以向伺服器傳送更多的資料。通常post用於向伺服器傳送資料而非獲取資料,因此如果需要在資料庫中儲存,新增和刪除資料,就應該選擇post

16.4對表單元素進行組織

如果表單上有很多資訊需要填寫,可以使用fieldset元素將相關的元素將相關的元素整合在一起,使表單更加容易理解。

元素提高表單的可訪問性,對於單選按鈕來說最好總是使用fieldset和legend。

建立文字框的步驟:

1:如果需要,輸入用於讓訪問者識別文字的標籤,

例如lastname:,

其中idlable匹配第(4)步中的標籤。

2:輸入3:輸入name=」datename」,這裡的datename是用於讓伺服器(和指令碼)識別輸入資料的文字

4:如果在第一步中建立了lable,輸入id=」idlable」,這裡的idlable跟第(1)步中for屬性文字一樣,儘管這並不是必須的。

5:如果需要,輸入value=「default」,這裡的default是這個欄位中最初顯示的資料,如果訪問者沒有輸入別的內容的話,這一資料將被傳送到伺服器。

6:如果需要,輸入placeholder=「hinttext」,這裡的hinttext用於指導使用者的輸入,當input獲取焦點的時候,這些文字就會消失。

7:19:js

19.1載入外部指令碼

指令碼主要分為兩種型別,一種是從外部檔案載入的指令碼(使用純文字格式).

另一種是嵌入在頁面中的指令碼

從外部載入js檔案要好一點!使行為和結構分離

19.3j**asript事件:

(1):onblur:訪問者離開先前獲得焦點的元素

(2)onchange:訪問者改變元素內的值。通常用於表單字段

(3)ondblclick:訪問者雙擊特定區域

(4)onfocus:焦點

(6)onkeypress:在指定的元素上,訪問者鬆開乙個鍵

(7)onkeyup:在指定元素上,訪問者在輸入後鬆開乙個鍵

(8)onload瀏覽器完成頁面的載入,包括外部檔案

(9)onmousedown:在指定元素上,訪問者按下滑鼠鍵

(10)onmouseout:訪問者在滑鼠指標停留的特定元素上移開滑鼠

(11)onmousemove:訪問者移動滑鼠指標

(12)onmouseover:訪問者將滑鼠指向元素

(13)onmouseup:使用者在點選元素後鬆開滑鼠

(14)onreset:訪問者點選表單的重置按鈕或在該按鈕獲得焦點的時候按下回車鍵。

(15)onselect:訪問者選擇元素中的乙個或多個字元

(16)onsubmit訪問者點選表單的提交按鈕或在獲得焦點下按下回車鍵

20 測試和除錯網頁

20.1驗證**

驗證**的步驟

(1):首先使用或者w3c的對html進行檢查

(2)修復標出來的html錯誤,儲存修改,需要的話再次上傳到伺服器,重複第一步

(3)可以使用w3c的驗證器

css3和html5的基礎

流式布局 應對視窗大小做等比例縮放布局 簡單來說利用百分數來進行布局 css3的box sizing與calc 通常設定邊框會被設定在元素的外圍 box sizing屬性值設為border box時邊框就加在元素內部 css3中在進行響應式布局時需要對不不同的螢幕大小設定不同的div排序方式。這時候...

HTML5與CSS3基礎教程 筆記

1.構造塊 3.基本html結構 頁面字元編碼很重要,例如如果沒有設定utf 8,可能很多字元都會亂碼 語義化標籤 以下標籤為html5新引入 出於seo和可訪問性的目的,最好將重要的內容放在前面,通過css來改變他們在瀏覽器中的順序 4.文字 5.影象 無損 jpeg不支援透明,png gif均支...

Html5與CSS3新特性

新增的語義化標籤 新增的多 標籤 音訊標籤 檔案位址 video 檔案位址 audio 屬性 屬性屬性值 描述autoplay autoplay control control loop loop muted muted 新增的input表單type型別 新增的表單屬性新增屬性選擇器 權重為10,注...