HTML5 2 列表 結構標記 表單

2021-08-31 16:25:06 字數 4113 閱讀 3310

2 結構標記

3 表單

3.2 元素

3.3 其他控制項

4 h5新表單元素

預設按照從上到下的順序顯示資料,可以在資料前新增標識;

使用列表布局(去掉標識)

列表是將具有相似特徵或者具有先後順序的幾行文字進行對齊排列;

所有列表都由列表型別和列表項組成:

列表型別:有序列表order list 和無序列表unorder list

列表項:指示具體列表型別list

**混排

按從上到下,或者從左到右的順序顯示所有資料,可以在資料前新增識別符號號

元素表示有序列表,用於列出頁面上有特定次序的專案

元素只能包含列表項元素

屬性:type指定標識項型別:1數字(預設),a小寫字母,a大寫字母,i小寫羅馬數字,i大寫羅馬數字

start指定起始編號

無序列表

元素表示無序列表,用於列出頁面上沒有特定次序的專案;

元素只能包含列表項元素;

屬性:type指定標識項型別:disc實心圓(預設),circle空心圓,square實心菱形,none不顯示標識

列表巢狀

巢狀使用可以建立多層列表,常用於建立文件大綱和導航選單等;

語義上規定下一級ul必須寫在外層ul>li中,否則會影響後續css的定義

定義列表

用於給出一類事物定義情形

標記定義乙個定義列表;

標記定義了定義列表中的術語;

標記定義列表中的術語提供定義

要解釋的名詞

具體解釋

如果使用元素設計頁面的大致布局,當布局複雜時會出現大量元素,相互巢狀會導致難以處理和維護頁面;

html5提供結構標記專門用於標識常見結構,可以很方便地實現頁面各部分劃分,是的文件結構清晰明確,容易閱讀;

元素

標籤,用於定義文件的頁首;可以多次出現,為任何部分的頭部定義;

元素元素定義頁面導航鏈結部分,用於包含表示鏈結的其他元素元素定義頁面導航鏈結部分,用於包含表示鏈結的其他元素

元素標籤用於定義文件中的節,表示文件中乙個具體組成部分;常用於為頁面上內容分塊;可以使用元素為內容新增標題

元素元素常用於定義頁面的額外組成部分

3.1.1 表單作用

表單用於顯示、收集資訊並提交至伺服器;

表單有兩個基本部分:

1.提供視覺化的輸入控制項;

2.收集使用者資訊並提交給伺服器;

前端:提供表單控制項,與使用者做互動的視覺化控制項;

後端:對提交資料進行處理(介面)

使用get是預設值,明文提交(通過url位址傳遞),資料傳遞有大小限制2kb,安全性較低,常用於向伺服器獲取資料;

post隱式提交資料無大小限制,不通過url傳遞,常用於提交資料到伺服器,引數放在請求主體form data中,安全性較高;

delete

put

3)enctype:表單資料進行編碼的方式;

設定表單允許提交的資料

提交普通字元,不能帶有特殊符號;enctype=「text/plain」

允許將檔案提交給伺服器;enctype=「multipart/form-data」

4)name:表單名稱

3.1.3 表單控制項

表單可以包含很多不同型別的表單控制項;

表單控制項元素是包含在表單元素中具有視覺化外觀的html元素,用於訪問者輸入資訊;

input元素:文字輸入控制項、按鈕、單複選按鈕、選項框、檔案選擇框和隱藏控制項

textarea元素

select 和option元素

其他元素

元素用於收集使用者資訊;單標記,

主要屬性:

type:根據不同type屬性值建立各種型別輸入字段

value:控制項的資料

name:控制項的名稱

disabled:禁用控制項,無值屬性

文字框與密碼框

文字框密碼框

主要屬性:

name名稱、value訪問者自由輸入的任何文字;

maxlength限制輸入的字元數;

readonly設定文字控制項唯讀,無值屬性,允許資料提交;

placeholder 佔位符,預設顯示在控制項上的文字,得到焦點即無效

單選框和核取方塊

單選框:

核取方塊:

主要屬性:

name設定名稱,用於分組,同組框的名稱必須相同

value:當提交form時,如果選中,該value被傳送到伺服器;不設定value將傳遞on

checked:設定預設被選中,無值屬性

核取方塊屬性name需要設定為陣列形式才能接受多個資料按鈕

按鈕submit:提交按鈕,傳送表單資料給伺服器端或其他程式處理

reset:重置按鈕,清空表單內容,設定為預設值;

button:無功能按鈕,屬性onclick呼叫js指令碼;

主要屬性:name名稱、value文字

h5定義同時具備submit和button的特點隱藏域

隱藏域:在表單中包含不希望使用者看見的資訊

主要屬性:name名稱、value值;

檔案選擇框

檔案選擇框:

主要屬性:name名稱

注意:method=「post」 , enctype=「multipart/form-data」, 無值屬性multiple設定多個檔案上傳,name屬性也要設定為陣列型別

元素語法:

for表示與label相聯絡的控制項的id值,將文字與控制項聯絡在一起,單擊文字,效果等同單擊按鍵

文字選項框

下拉選項框和滾動列表

建立選項框

name:選項框命名;

size:定義顯示選項的數量,預設為1,大於1則為滾動列表;

multiple:設定多選,忽略size屬性成為滾動列表,屬性name需要改為陣列儲存

:選項value:選項的值;

selected:預選中;

當option沒有value屬性,select的value為option的內容;當option有value屬性,select的value為option的value

\

主要屬性:

name:名稱;cols:指定文字區域的列數,以英文本母為準;rows:指定文字區域的行數;readonly:唯讀

由於列數實際應用中不準確,故專案中很少使用

控制項分組

:為控制項分組

:分組標題

浮動框架元素

在乙個瀏覽器視窗同時顯示多個網頁;

元素,設定屬性src指向其他頁面的url;

src網頁url,height/width用百分比和px調整,新增的文字內容將在瀏覽器不支援該元素時顯示,frameborder=「0」,scrolling=「no」

用處:可以將網頁固定不變的部分單獨提取出html檔案,在其他網頁中用iframe重用;但是需要用js.dom計算視窗高度

搜尋型別

輸入搜尋關鍵字操作的文字框:

快速清除文字框

url型別

驗證資料是否符合url絕對路徑規範< input type=「url」/>

驗證http://以及後面內容

**號碼型別

針對移動端輸入,能夠根據不同裝置進行調整彈出九宮格鍵盤:

數字型別

只能接受固定數字值:

屬性:min、max閾值,step決定域所接受值遞增或遞減的步長,預設為1,value="10"設定預設值

不成熟,比如value初始值可以小於閾值範圍型別

允許使用者選擇乙個範圍的數值:

value:初始值,step:步長

顏色型別

預定義的顏色拾取控制項:

日期型別

建立日期輸入域:

周型別與日期類似,但只能選擇周:

月份型別

與日期類似,但只能選擇月:

05HTML 列表 結構標記 表單

1.作用 按照一定的格式顯示資料 2.列表的分類 語法 2.1列表的組成 由列表型別以及列表項來組成 2.2分類 語法 unorder list 允許包含若干列表項 屬性ol屬性 1 type 1按數字方式排列,預設值 a按小寫英文方式排列 a按大寫英文方式排列 i按小寫羅馬數字排列 i按大寫羅馬數...

HTML筆記(三) 列表

1.無序ul標籤 html body h4 乙個無序列表 h4 ul li 咖啡 li li 茶 li li 牛奶 li ul body html 效果 值描述disc 預設值。實心圓。circle 空心圓。square 實心方塊。2.有序ol標籤 html body type i ol li 咖啡...

HTML學習03 列表

標籤用於定義有序列表,列表排序以數字來顯示,並且使用標籤來定義列表項。有序列表的基本語法格式如下 列表項1 列表項2 列表項3 標籤用於定義描述列表 或定義列表 該標籤會與 定義專案 名字 和 描述每乙個專案 名字 一起使用。自定義列表的基本語法格式如下 名詞1 名詞1解釋1 名詞1解釋2 名詞2 ...