表格:
在HTML中,使用table標簽來創(chuàng)建一個表格
在table標簽中使用tr來表示表格中的一行狗超,有幾行就有幾對tr
在tr中需要使用td來創(chuàng)建一個單元格弹澎,有幾個單元格就有幾個td
可以使用th標簽來表示表頭中的內容,
它的用法和td一樣努咐,不同的是它會有一些默認效果
rowspan用來設置縱向的合并單元格
colspan橫向的合并單元格
/*邊框*/
? ? ? ? ? ? /*border:1px solid black;*/
? ? ? ? ? ? /*table和td邊框之間默認有一個距離苦蒿,通過border-spacing屬性可以設置這個距離*/
? ? ? ? ? ? /*border-spacing: 10px;*/
? ? ? ? ? ? /*
? ? ? ? ? ? border-collapse可以用來設置表格的邊框合并
? ? ? ? ? ? 如果設置了邊框合并,則border-spacing自動失效
有一些情況下表格是非常的長的渗稍,這時就需要將表格分為三個部分佩迟,表頭,表格的主體竿屹,表格底部
在HTML中為我們提供了三個標簽:
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標簽的作用音五,就來區(qū)分表格的不同的部分,他們都是table的子標簽羔沙,都需要直接寫到table中,tr需要寫在這些標簽當中
thead中的內容厨钻,永遠會顯示在表格的頭部
tfoot中的內容扼雏,永遠都會顯示表格的底部
tbody中的內容坚嗜,永遠都會顯示表格的中間
如果表格中沒有寫tbody,瀏覽器會自動在表格中添加tbody
并且將所有的tr都放到tbody中诗充,所以注意tr并不是table的子元素苍蔬,而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
以前表格更多的情況實際上是用來對頁面進行布局的,但是這種方式早已被CSS所淘汰了
表格的列數由td最多的那行決定
表格是可以嵌套蝴蜓,可以在td中在放置一個表格
子元素和父元素相鄰的垂直外邊距會發(fā)生重疊碟绑,子元素的外邊距會傳遞給父元素
使用空的table標簽可以隔離父子元素的外邊距,阻止外邊距的重疊
解決父子元素的外邊距重疊
.box1:before{
content: "";
/*display:table可以將一個元素設置為表格顯示*/
/*display: table;
}
解決父元素高度塌陷
.clearfix:after{
content: "";
display: block;
clear: both;
}
經過修改后的clearfix是一個多功能的樣式茎匠,既可以解決高度塌陷格仲,又可以確保父元素和子元素的垂直外邊距不會重疊
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
表單:
表單的作用就是用來將用戶信息提交給服務器的
比如:百度的搜索框 注冊 登錄這些操作都需要填寫表單
使用form標簽創(chuàng)建一個表單
form標簽中必須指定一個action屬性,該屬性指向的是一個服務器的地址
當我們提交表單時將會提交到action屬性對應的地址
-->
<!--? 設置請求方式:method="post" -->
<!--? 需要上傳文件時要加屬性: enctype="multipart/form-data" -->
使用form創(chuàng)建的僅僅是一個空白的表單诵冒,我們還需要向form中添加不同的表單項
在表單中可以使用fieldset來為表單項進行分組凯肋,可以將表單項中的同一組放到一個fieldset中
在fieldset可以使用legend子標簽,來指定組名
使用input來創(chuàng)建一個文本框汽馋,它的type屬性是text
如果希望表單項中的數據會提交到服務器中侮东,還必須給表單項指定一個name屬性
name表示提交內容的名字
用戶填寫的信息會附在url地址的后邊以查詢字符串的形式發(fā)送給服務器
url地址?查詢字符串
格式:
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&……
在文本框中也可以指定value屬性值,該值將會作為文本框的默認值顯示
在html中還為我們提供了一個專門用來選中表單中的提示文字的label標簽
該標簽可以指定一個for屬性豹芯,該屬性的值需要指定一個表單項的id值
value是默認值悄雅,設置什么默認顯示什么.
密碼框
使用input創(chuàng)建一個密碼框,它的type屬性值是password
單選按鈕
- 使用input來創(chuàng)建一個單選按鈕铁蹈,它的type屬性使用radio
- 單選按鈕通過name屬性進行分組宽闲,name屬性相同是一組按鈕
- 像這種需要用戶選擇但是不需要用戶直接填寫內容的表單項,還必須指定一個value屬性木缝,這樣被選中的表單項的value屬性值將會最終提交給服務器
如果希望在單選按鈕或者是多選框中指定默認選中的選項便锨,則可以在希望選中的項中添加checked="checked"屬性
多選框
- 使用input創(chuàng)建一個多選框,它的type屬性使用checkbox
下拉列表
- 使用select來創(chuàng)建一個下拉列表
下拉列表的name屬性需要指定給select我碟,而value屬性需要指定給option
可以通過在option中添加selected="selected"來將選項設置為默認選中
當為select添加一個multiple="multiple"放案,則下拉列表變?yōu)橐粋€多選的下拉列表
在下拉列表中使用option標簽來創(chuàng)建一個一個列表項
在select中可以使用optgroup對選項進行分組
同一個optgroup中的選項是一組
可以通過label屬性來指定分組的名字
使用textarea創(chuàng)建一個文本域
提交按鈕可以將表單中的信息提交給服務器
使用input創(chuàng)建一個提交按鈕,它的type屬性值是submit
在提交按鈕中可以通過value屬性來指定按鈕上的文字
<input type="reset">可以創(chuàng)建一個重置按鈕矫俺,點擊重置按鈕以后表單中內容將會恢復為默認值
使用input type=button可以用來創(chuàng)建一個單純的按鈕吱殉,這個按鈕沒有任何功能,只能被點擊
除了使用input厘托,也可以使用button標簽來創(chuàng)建按鈕
這種方式和使用input類似友雳,只不過由于它是成對出現的標簽,使用起來更加的靈活
框架集:
框架集和內聯框架的作用類似铅匹,都是用于在一個頁面中引入其他的外部的頁面
框架集可以同時引入多個頁面押赊,而內聯框架只能引入一個
在h5標準中,推薦使用框架集包斑,而不使用內聯框架
使用frameset來創(chuàng)建一個框架集流礁,注意frameset不能和body出現在同一個頁面中
所以要使用框架集涕俗,頁面中就不可以使用body標簽
屬性:
rows,指定框架集中的所有的框架神帅,一行一行的排列
cols再姑, 指定框架集中的所有的頁面,一列一列的排列
這兩個屬性frameset必須選擇一個找御,并且需要在屬性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一樣元镀,它里邊的內容都不會被搜索引擎所檢索
所以如果搜索引擎檢索到的頁面是一個框架頁的話,它是不能去判斷里邊的內容的
使用框架集則意味著頁面中不能有自己的內容霎桅,只能引入其他的頁面
而我們每單獨加載一個頁面栖疑,瀏覽器都需要重新發(fā)送一次請求,引入幾個頁面就需要發(fā)送幾次請求哆档,用戶的體驗比較差
如果非得用建議使用frameset而不使用iframe
在frameset中使用frame子標簽來指定要引入的頁面
引入幾個頁面就寫幾個frame