● 表單高級
○ 表單字段集<fieldset></fieldset>
■ 功能:相當于一個方框,在字段集中可以包含文本和其他元素。該元素用于對表單中的元素進行分組并在文檔中區別標出文本。fieldset元素可以嵌套,在其內部可以在設置多個fieldset對象。
○ 字段級標題<legend></legend>
■ 功能:legend元素可以在fieldset對象繪制的方框內插入一個標題。legend元素必須是fieldset內的第一個元素。
○ 提示信息標簽<label for="綁定控件id名"></label>
■ 功能:label元素用來定義標簽,為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上,可以將label元素的for屬性設置為與該控件的id屬性值相同。
○ 上傳文件框
■ 文件域:<input type="file" />
○ 圖像域
■ <input type="image" width="100" height="100" alt="上傳圖片"src="圖片路徑" />作用跟提交按鈕一樣,可以說是美化后的提交按鈕
○ 說明: 表單的組成:表單域,表單控件,提示信息
例:表單域<form name="" method="" action=""></form>
表單控件<input type="text" value=""/>
● 表格高級
● 關于表格的CSS屬性
○ 單元格間距(該屬性必須給table添加)
■ border-spacing:value;(ie7及以下不支持,相當于屬性cellspacing)
○ 合并相鄰單元格邊框
■ border-collapse:separate(邊框分開)/collapse(邊框合并);
○ 無內容單元格顯示、隱藏
■ empty-cells:show/hide;
○ 表格布局算法(加快運行的速度)
■ table-layout:auto/fixed(固定寬度,不會隨內容多少改變單元格寬度)
○ 表格標題
■ <caption>標題內容</caption>
■ 表格標題位置:caption-side:top/right/bottom/left
■ 說明:left,right位置只有火狐識別,top,bottom IE6以上版本支持,ie6以下版本不支持其它屬性值,只識別top;
● html重要屬性:
○ colspan="value" 合并列
○ rowspan="value" 和并行
○ valign="top/bottom/middle/baseline" 垂直對齊方式
○ rules="groups/rows/cols/all/none" 添加組分隔線
○ 說明:
■ rows:位于行之間的線條
■ cols:位于列之間的線條
■ all:位于行和列之間的線條
■ none:沒有線條
■ groups:位于行組和列組之間的線條
○ 數據行分組
■ <thead></thead> 表頭
■ <tbody></tbody> 表體
■ <tfoot></tfoot> 表尾
● 說明:一個Table中,只能包含一個thead,一個tfoot,但可包含多個tbody。
○ 數據列分組
■ <colgroup span="value"></colgroup>
■ <col span="value" />
■ 說明:
● col和colgroup元素會根據從左到右的順序依次對數據表格進行分組。
● span屬性顯示指定相鄰幾列組成一組,span屬性值默認為1,默認時僅定義一列為一組。
● 可以通過給table添加rules="groups"屬性來給分組列添加組分割線。
● 注意:雖然col和colgroup具有相同的功能,但是,我們只能使用colgroup元素來決定表格內容部分分割線(rules)應該處于的位置,而col沒有這個功能。
● CSS 統籌
○ 命名規范
■ 必須以英文數字下劃線組成,不能有中文以及特殊符號,開頭必須以英文開頭不能以數字或者下劃線開頭
○ 網站優化
■ 詳情文件
● BFC模式(塊級格式化上下文)
○ 產生BFC的環境
■ 根元素
■ float不為none
■ position為absolute和fixed
■ display為inline-block、table-cell, table-caption, flex, inline-flex。
■ overflow不為visible
○ BFC作用及原理
■ 內部的Box會在垂直方向,一個接一個地放置。
■ Box垂直方向的距離有margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
■ 每個元素的margin box的左邊,與包含塊border box的左邊相接觸(對于從左往右的格式化,否則相反)。即使存在浮動也是如此
■ BFC的區域不會與float box重疊
■ BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也是如此。
■ 計算BFC的高度時,浮動元素也參與計算
● 擴展
● th:表格列標題(放在tr里)
● <input type="hidden"/>隱藏域
● CSS 濾鏡
●