表格构舟、表單灰追、框架集

表格:

在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

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末蔽挠,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子瓜浸,更是在濱河造成了極大的恐慌澳淑,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件插佛,死亡現場離奇詭異杠巡,居然都是意外死亡,警方通過查閱死者的電腦和手機雇寇,發(fā)現死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門氢拥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人锨侯,你說我怎么就攤上這事嫩海。” “怎么了囚痴?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵叁怪,是天一觀的道長。 經常有香客問我深滚,道長奕谭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任痴荐,我火速辦了婚禮血柳,結果婚禮上,老公的妹妹穿的比我還像新娘生兆。我一直安慰自己难捌,他們只是感情好,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著根吁,像睡著了一般昆汹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上婴栽,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天,我揣著相機與錄音辈末,去河邊找鬼愚争。 笑死,一個胖子當著我的面吹牛挤聘,可吹牛的內容都是我干的轰枝。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼组去,長吁一口氣:“原來是場噩夢啊……” “哼鞍陨!你這毒婦竟也來了?” 一聲冷哼從身側響起从隆,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤诚撵,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后键闺,有當地人在樹林里發(fā)現了一具尸體寿烟,經...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年辛燥,在試婚紗的時候發(fā)現自己被綠了筛武。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡挎塌,死狀恐怖徘六,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情榴都,我是刑警寧澤待锈,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站缭贡,受9級特大地震影響炉擅,放射性物質發(fā)生泄漏。R本人自食惡果不足惜阳惹,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一谍失、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧莹汤,春花似錦快鱼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽线罕。三九已至,卻和暖如春窃判,著一層夾襖步出監(jiān)牢的瞬間钞楼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工袄琳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留询件,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓唆樊,卻偏偏與公主長得像宛琅,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子逗旁,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內容

  • HTML標簽解釋大全 一嘿辟、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,260評論 1 41
  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的,因此網頁是網絡信息傳遞的載體片效。網頁文件是用...
    阿啊阿吖丁閱讀 3,906評論 0 0
  • (注1:如果有問題歡迎留言探討红伦,一起學習!轉載請注明出處堤舒,喜歡可以點個贊哦Iā)(注2:更多內容請查看我的目錄。) ...
    love丁酥酥閱讀 4,213評論 2 5
  • 其實很多東西開始做比較痛苦舌缤,但是做著做著就上癮了箕戳!就連吸煙喝酒都是這樣,不會吸煙的開始學吸煙的都是難受的国撵,只過...
    樂陽L閱讀 66評論 0 0
  • 人生最可怕的事情也許就是以下幾點 1.總是被自己的情緒打敗陵吸,第一是情感情緒,第二是工作情緒 解決的辦法就是不對抗介牙,...
    Vincent呼歡閱讀 153評論 0 0