




版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領
文檔簡介
1、HTML5前端開發(fā)1表單標簽及屬性高級表單標簽及屬性高級2表格標簽及屬性高級表格標簽及屬性高級回顧:回顧: 表單的組成:表單的組成:表單域:表單域: 表單控件表單控件 : 提示信息:提示信息: 1、表單字段集:、表單字段集:1表單標簽及屬性高級表單標簽及屬性高級語法:語法: 說明:說明: 相當于一個方框,在字段集中可以包含文本和其他相當于一個方框,在字段集中可以包含文本和其他元素。元素。該元素用于對表單中的元素進行分組并在文檔中區(qū)該元素用于對表單中的元素進行分組并在文檔中區(qū)別標出文本。別標出文本。fieldset元素可以嵌套,在其內(nèi)部可以在設置多個元素可以嵌套,在其內(nèi)部可以在設置多個field
2、set對象。對象。disabled定義空間禁制可用定義空間禁制可用表單字段集用法表單字段集用法用邊框?qū)⒈韱斡眠吙驅(qū)⒈韱慰丶纸M控件分組2、字段級標題:、字段級標題:語法:語法: 說明:說明: legend元素可以在元素可以在fieldset對象繪制的方框內(nèi)插入對象繪制的方框內(nèi)插入一個標題。一個標題。legend元素必須是元素必須是fieldset內(nèi)的第一個內(nèi)的第一個元素。元素。字段級標題字段級標題給字段集添加給字段集添加標題標題3、提示信息標簽:、提示信息標簽:語法:語法: 說明:說明: label元素用來定義標簽,為頁面上的其他元素指元素用來定義標簽,為頁面上的其他元素指定提示信息。要將定提
3、示信息。要將label元素綁定到其他的控件上,元素綁定到其他的控件上,可以將可以將label元素的元素的for屬性設置為與該控件的屬性設置為與該控件的id屬屬性值相同。性值相同。4、上傳文件框:、上傳文件框:語法:語法: 說明:說明: type屬性值新增的類型有:屬性值新增的類型有:file文件類型,可進行文件類型,可進行文件的選擇,文件的選擇,multiple屬性可實現(xiàn)多選屬性可實現(xiàn)多選5、圖像域:、圖像域:語法:語法: 說明:說明:6、郵件格式:、郵件格式:語法:語法: 說明:說明: 郵箱格式輸入,郵箱格式輸入,html5新增新增required屬性屬性語法:語法: 說明:說明: 設置必填
4、屬性,表示此項為必填項,也可直接設設置必填屬性,表示此項為必填項,也可直接設placeholder屬性屬性語法:語法: 說明:說明: 該屬性用于可以顯示簡短的提示,提示用戶該輸入該屬性用于可以顯示簡短的提示,提示用戶該輸入什么樣的信息什么樣的信息pattern 屬性屬性語法:語法: 說明:說明:該屬性能夠提供一種正則表達式,只有用戶輸入的內(nèi)容該屬性能夠提供一種正則表達式,只有用戶輸入的內(nèi)容與表達式匹配才是有效的,用戶可自定義匹配格式與表達式匹配才是有效的,用戶可自定義匹配格式例如:例如:1:用戶名驗證規(guī)則用戶名驗證規(guī)則 : 用戶名長度為用戶名長度為612并且由字母組成并且由字母組成 patte
5、rn=A-z6,122:密碼驗證規(guī)則密碼驗證規(guī)則 : 密碼必須是數(shù)組與字母組合密碼必須是數(shù)組與字母組合 pattern=A-Za-z.*0-9|0-9.*A-Za-z回顧:回顧: 表格的作用:顯示數(shù)據(jù)表格的作用:顯示數(shù)據(jù);表格的基本結(jié)構(gòu):表格的基本結(jié)構(gòu): 1)關于表格的)關于表格的CSS屬性屬性2)關于表格的布局標簽)關于表格的布局標簽2表格標簽及屬性高級表格標簽及屬性高級1、單元格間距:、單元格間距:語法:語法: border-spacing:value; 說明:說明: 單元格間距單元格間距(該屬性必須給該屬性必須給table添加添加)表示單元格邊框之間的距離,表示單元格邊框之間的距離,不可
6、取負值不可取負值2、合并相鄰單元格邊框:、合并相鄰單元格邊框:語法:語法: border-collapse:separate/collapse;說明:說明: 作用:合并相鄰單元格邊框作用:合并相鄰單元格邊框(該屬性必須給該屬性必須給table添加添加)separate(邊框分開邊框分開)默認值;默認值;collapse(邊框合并邊框合并)3、無內(nèi)容時單元格的設置:、無內(nèi)容時單元格的設置:語法:語法: empty-cells:show/hide;說明:說明: 定義當單元格無內(nèi)容時,是否顯示該單元格的邊框;定義當單元格無內(nèi)容時,是否顯示該單元格的邊框;show:顯示:顯示 ;hide:隱藏;:隱藏
7、;4、顯示單元、行和列的算法、顯示單元、行和列的算法(加快運行的速度加快運行的速度):語法:語法: table-layout:auto/fixed;說明:說明: 定義表格的布局算法,設置定義表格的布局算法,設置fixed,文本為英文字,文本為英文字母且無空格時,內(nèi)容超出單元格寬度則固定不變;母且無空格時,內(nèi)容超出單元格寬度則固定不變;如沒設寬則平均分配;設置如沒設寬則平均分配;設置auto時,則隨內(nèi)容寬度時,則隨內(nèi)容寬度而定;而定;(fixed:固定寬,不會隨內(nèi)容多少改變單元格寬:固定寬,不會隨內(nèi)容多少改變單元格寬,寬寬度可以明確定義,沒有定義時則寬度會平均分配,度可以明確定義,沒有定義時則寬
8、度會平均分配,高度則會隨內(nèi)容變化高度則會隨內(nèi)容變化)5、設置表格標題:、設置表格標題:語法:語法: 標題內(nèi)容標題內(nèi)容說明:說明: caption:表格標題表格標題表格標題位置:表格標題位置:caption-side:top/right/bottom/left說明:說明:left,right位置只有火狐識別,位置只有火狐識別,top,bottom IE6以上版本支持,以上版本支持,ie6以下版本不支持其它屬性值,以下版本不支持其它屬性值,只識別只識別top;6、隔行變色設置:、隔行變色設置:語法:語法: 雙數(shù)行:雙數(shù)行: tr:nth-child(2n) 單數(shù)行:單數(shù)行: tr:nth-chil
9、d(2n+1) 說明:說明: 設置單數(shù)單元格的樣式和雙數(shù)單元格的樣式設置單數(shù)單元格的樣式和雙數(shù)單元格的樣式Html5新增新增(二)、表格布局元素(二)、表格布局元素表格表格 描述描述 定義表格定義表格 定義表格標題定義表格標題 定義表格列標題定義表格列標題 定義表格的行定義表格的行 定義表格單元定義表格單元 定義表格的頁眉定義表格的頁眉 定義表格的主體定義表格的主體 定義表格的頁腳定義表格的頁腳 定義用于表格列的屬性定義用于表格列的屬性 定義表格列的組定義表格列的組 1、html重要屬性:重要屬性:1)colspan=value 合并列合并列2)rowspan=value 和并行和并行3)va
10、lign=top/bottom/middle/baseline 垂直對齊方式垂直對齊方式 4)rules=groups/rows/cols/all/none 添加組分隔線添加組分隔線 說明:說明: rows:位于行之間的線條位于行之間的線條 cols:位于列之間的線條位于列之間的線條 all:位于行和列之間的線條:位于行和列之間的線條 none:沒有線條沒有線條 groups:位于行組和列組之間的線條位于行組和列組之間的線條rules 屬性無法在屬性無法在 Internet Explorer、Chrome 或者或者 Safari 中正中正確地顯示。確地顯示。2、數(shù)據(jù)列分組、數(shù)據(jù)列分組(1) (
11、2) 說明:說明:1)col和和colgroup元素會根據(jù)從左到右的順序依次對數(shù)據(jù)表元素會根據(jù)從左到右的順序依次對數(shù)據(jù)表格進行分組。格進行分組。2)span屬性顯示指定相鄰幾列組成一組,屬性顯示指定相鄰幾列組成一組,span屬性值默認屬性值默認為為1,默認時僅定義一列為一組。,默認時僅定義一列為一組。3)可以通過給)可以通過給table添加添加rules=groups屬性來給分組列添屬性來給分組列添加組的分割線。加組的分割線。注意:雖然注意:雖然col和和colgroup具有相同的功能,但是,我們只具有相同的功能,但是,我們只能使用能使用colgroup元素來設置表格內(nèi)容部分分割線(元素來設置
12、表格內(nèi)容部分分割線(rules)應該處于的位置,而應該處于的位置,而col沒有這個功能。沒有這個功能。th:定義表格內(nèi)的表頭單元格。定義表格內(nèi)的表頭單元格。HTML 表單中有兩種類型的單元格:表單中有兩種類型的單元格:表頭單元格表頭單元格 - 包含表頭信息(由包含表頭信息(由 th 元素創(chuàng)建)元素創(chuàng)建)標準單元格標準單元格 - 包含數(shù)據(jù)(由包含數(shù)據(jù)(由 td 元素創(chuàng)建)元素創(chuàng)建)th 元素內(nèi)部的文本通常會呈現(xiàn)為居中的粗體文本,而元素內(nèi)部的文本通常會呈現(xiàn)為居中的粗體文本,而 td 元元素內(nèi)的文本通常是左對齊的普通文本。素內(nèi)的文本通常是左對齊的普通文本。3、數(shù)據(jù)行分組、數(shù)據(jù)行分組 表頭表頭 表體表
13、體 表尾表尾說明:一個說明:一個table中,只能包含一個中,只能包含一個thead,一個一個tfoot,但可包但可包含多個含多個tbody。說明:說明:thead 元素應該與元素應該與 tbody 和和 tfoot 元素結(jié)合起來使用。元素結(jié)合起來使用。tbody 元素用于對元素用于對 HTML 表格中的主體內(nèi)容進行分組,表格中的主體內(nèi)容進行分組, tfoot 元素用于對元素用于對 HTML 表格中的表注(頁腳)內(nèi)容進行分表格中的表注(頁腳)內(nèi)容進行分組。組。它們的出現(xiàn)次序是:它們的出現(xiàn)次序是:thead、tfoot、tbody,這樣瀏覽器就,這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。必須在可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。必須在 table 元素內(nèi)部元素內(nèi)部使用這些標簽。使用這些標簽。提示:在默認情況下這些元素不會影響到表格的布局。不過提示:在默認情況下這些元素不會影響到表格的布局。不過,可以使用,可以使用 CSS 使這些元素改變表格的外觀。使這些元素改變表格的外觀。詳細描述:詳細描述:thead、tfoot 以及以及 tbody 元素使我們有能力對表格中的行元素使我們有能力對表格中的行進行分組。當創(chuàng)建某個表格時,也許希
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 商業(yè)培訓中的心理調(diào)適技巧探討
- 湖北省孝感市孝南區(qū)2024年物理八年級第一學期期末監(jiān)測模擬試題含解析
- 生態(tài)農(nóng)業(yè)采棉機操作手勞務協(xié)議
- 電子工程師崗前指導:電路與設備維護技能
- 酒店保潔人員的腰腿保護措施
- 零售行業(yè)市場現(xiàn)狀與消費升級趨勢分析報告
- 初中生物課程中的合作學習策略
- 2025至2030中國步態(tài)分析儀行業(yè)項目調(diào)研及市場前景預測評估報告
- 科研機構(gòu)復工復產(chǎn)安全培訓心得體會
- 2025至2030中國自動駕駛汽車和先進駕駛輔助系統(tǒng)行業(yè)產(chǎn)業(yè)運行態(tài)勢及投資規(guī)劃深度研究報告
- 廣東深圳市南山區(qū)機關事業(yè)單位面向高校畢業(yè)生招聘編外人員104人歷年重點基礎提升難、易點模擬試題(共500題)附帶答案詳解
- 放化療相關口腔黏膜炎預防及護理課件
- 北京市海淀區(qū)2025屆高一下生物期末檢測模擬試題含解析
- JT∕T 795-2023 事故汽車修復技術規(guī)范
- 2024四川廣元市檢察機關招聘聘用制書記員22人筆試備考題庫及答案解析
- 內(nèi)科患者VTE風險評估表
- 一年級上冊美術教案-第1課 讓大家認識我:誠實最好 ▏人美版
- 科學認識天氣智慧樹知到期末考試答案2024年
- (高清版)DZT 0064.15-2021 地下水質(zhì)分析方法 第15部分:總硬度的測定 乙二胺四乙酸二鈉滴定法
- 心理體檢收費目錄
- 雅魯藏布江米林-加查段沿線暴雨泥石流危險度評價的中期報告
評論
0/150
提交評論