前端剑法第四式————御风
御扶搖而上者九萬里，絕云氣，負(fù)青天
風(fēng)往矣，吾亦往矣
今日學(xué)習(xí)內(nèi)容
目錄
一，表格
1.table tr和td
2.合并單元格?rowspan和colspan
二，表格樣式
表格單線邊框border-collapse
三，長(zhǎng)表格?
thead，tbody ， tfoot
四，表單
1，創(chuàng)建表單 ?form標(biāo)簽
? ??（1）input來創(chuàng)建一個(gè)文本框
? ? （2）input創(chuàng)建一個(gè)密碼框
? ? （3）input創(chuàng)建一個(gè)單選按鈕
? ? （4）input創(chuàng)建一個(gè)多選框
? ? ? (5)select來創(chuàng)建一個(gè)下拉列表
? ? （6）textarea創(chuàng)建一個(gè)文本域
? ? （7）input創(chuàng)建一個(gè)提交按鈕，點(diǎn)擊后表單就會(huì)提交
? ? （8）創(chuàng)建一個(gè)重置按鈕，type="reset"
? ? （9）創(chuàng)建一個(gè)單純的按鈕，
? ? ? ? ???input屬性補(bǔ)充
一，表格
表格在日常生活中使用的非常的多，比如excel就是專門用來創(chuàng)建表格的工具，
? 表格就是用來表示一些格式化的數(shù)據(jù)的，比如：課程表、銀行對(duì)賬單
?在網(wǎng)頁中也可以來創(chuàng)建出不同的表格。
1.table tr和td
?1、在HTML中，使用table標(biāo)簽來創(chuàng)建一個(gè)表格
?2、在table標(biāo)簽中使用tr來表示表格中的一行，有幾行就有幾個(gè)tr
?3、 在tr中需要使用td來創(chuàng)建一個(gè)單元格，有幾個(gè)單元格就有幾個(gè)td
?4、table標(biāo)簽里有自帶的屬性： border="1" width="40%" align="center"
2.合并單元格?rowspan和colspan
?5、rowspan用來設(shè)置縱向的合并單元格
注意：合并方向是縱向的，即從上往下合并
?6、colspan橫向的合并單元格
注意：合并方向是橫向的，即從左往右合并
二，表格樣式
一、設(shè)置表格的寬度，表格居中，邊框，設(shè)置內(nèi)部邊框
等同div做法
表格單線邊框border-collapse
? ? ? ? /* 方法一 */
? ? ? ? /* ?border-spacing:0px ; */邊框距離為0
? ? ? ? /*方法二*/
? ? ? ? /* border-collapse [k?'l?ps] 設(shè)置行和單元格的邊是否合并
? ? ? ? ? ? 如果設(shè)置了邊框合并，則border-spacing自動(dòng)失效
? ? ? ? ? ? ? 可選值
? ? ? ? ? ? ? ? separate ?默認(rèn)值，不合并
? ? ? ? ? ? ? ? collapse ?合并邊框 ? ?
? ? ? ? ? ? ?設(shè)置隔行變色 tr:nth-child(even)
? ? ? ? ? ? ??調(diào)整td文字在表格中的位置 ?vertical-align、text-align
三，長(zhǎng)表格?
thead，tbody ， tfoot
有一些情況下表格是非常的長(zhǎng)的
? 這時(shí)就需要將表格分為三個(gè)部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個(gè)標(biāo)簽
? ?thead ?表頭 ?永遠(yuǎn)在表格的頭部
? ?tbody ?表格的主體 ?永遠(yuǎn)在表格中間
? ?tfoot ?表格的底部 ?永遠(yuǎn)在表格底部
? ?用來區(qū)分表格不同的部分，順序，瀏覽器會(huì)自動(dòng)調(diào)整
如果表格中沒有寫tbody，瀏覽器會(huì)自動(dòng)在表格中添加tbody
并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
四，表單
? ? 將用戶信息等本地的數(shù)據(jù)信息提交給服務(wù)器的
? ? 比如：百度的搜索框 注冊(cè) 登錄這些操作都需要填寫表單
1，創(chuàng)建表單 ?form標(biāo)簽
? ? 屬性：
? ? ? ? action屬性（必須要寫）
? ? ? ? 指向的是一個(gè)服務(wù)器的地址，當(dāng)我們提交表單時(shí)將會(huì)提交到action屬性對(duì)應(yīng)的地址
2:添加表單項(xiàng)
? ? 使用form創(chuàng)建的僅僅是一個(gè)空白的表單，
? ? ? ? 我們還需要向form中添加不同的表單項(xiàng)
（1）input來創(chuàng)建一個(gè)文本框
? ? type屬性是text
? ? placeholder 屬性規(guī)定用以描述輸入字段預(yù)期值的提示（樣本值或有關(guān)格式的簡(jiǎn)短描述）。
? ? name屬性：提交內(nèi)容的名字，如果希望表單項(xiàng)中的數(shù)據(jù)會(huì)提交到服務(wù)器中，必須指定一個(gè)name屬性 ? ? ? ?
? ? value屬性值：作為文本框的默認(rèn)值顯示用戶名
? ? ?size：輸入框的長(zhǎng)度大小
? ? ?maxlength：輸入框中允許輸入字符的最大數(shù)
? ? <input type="text" name="username" value="zhangsan" /> <br /><br />
? ? （2）input創(chuàng)建一個(gè)密碼框
? ? ? ? type屬性值是password
? ? ? ? name屬性：提交密碼的名字
? ? 密碼
? ? <input type="password" name="password" /> <br /><br />
? ? （3）input創(chuàng)建一個(gè)單選按鈕
? ? ? ? - type屬性：radio
? ? ? ? - name屬性進(jìn)行分組，屬性相同是一組按鈕，如果不設(shè)置，則都可以選擇
? ? ? ? - value屬性必須設(shè)置，這樣被選中的表單項(xiàng)的value屬性值將會(huì)最終提交給服務(wù)器 ? ? ?
? ? ? ? - checked="checked"屬性 ?默認(rèn)選中
? ? 性別 <input type="radio" name="gender" value="male" id="male" />男 <input type="radio" name="gender" value="female" checked="checked" id="female" />女 <br /><br />
? ? （4）input創(chuàng)建一個(gè)多選框
? ? ? ? -type屬性:checkbox
? ? ? ? -checked="checked"屬性 ?默認(rèn)選中
? ? 愛好
? ? <input type="checkbox" name="hobby" value="zq" />足球 <input type="checkbox" name="hobby" value="lq" />籃球 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
? ? <input type="checkbox" name="hobby" value="ppq" checked="checked" />乒乓球 <br /><br />
? ? ? (5)select來創(chuàng)建一個(gè)下拉列表
? ? ? ? -name屬性設(shè)置給select，
? ? ? ? -value屬性設(shè)置給option
? ? ? ? -selected="selected"，將選項(xiàng)設(shè)置為默認(rèn)選中
? ? 你喜歡的明星
? ? <select name="star">
? ? 在下拉列表中使用option標(biāo)簽來創(chuàng)建一個(gè)一個(gè)列表項(xiàng)
? ? <option value="zbs" selected="selected">趙本山</option>
? ? <option value="fbb">范冰冰</option>
? ? <option value="lxr">林心如</option>
? ? </select>
? ? <br /><br />
? ? （6）textarea創(chuàng)建一個(gè)文本域
? ? 自我介紹 <textarea name="info"></textarea>
? ? <br /><br />
? ? （7）input創(chuàng)建一個(gè)提交按鈕，點(diǎn)擊后表單就會(huì)提交
? ? ? ? ? ? -type屬性值：submit
? ? ? ? ? ? -value屬性：指定按鈕上的文字
? ? <input type="submit" value="注冊(cè)" />
? ? （8）創(chuàng)建一個(gè)重置按鈕，type="reset"
? ? ? ? ? ? 點(diǎn)擊重置按鈕以后表單中內(nèi)容將會(huì)恢復(fù)為默認(rèn)值
? ? <input type="reset" />
? ? （9）創(chuàng)建一個(gè)單純的按鈕，
? ? ? ? ? ? 這個(gè)按鈕沒有任何功能，只能被點(diǎn)擊
? ? ? ? ? ? 優(yōu)點(diǎn)：可以被編輯
? ? <input type="button" value="按鈕" />
? ? （10）button標(biāo)簽來創(chuàng)建按鈕
? ? 方式和使用input類似，它是成對(duì)出現(xiàn)的標(biāo)簽，使用起來更加的靈活 ? ?
? ? <br /><br />
? ? <button type="submit">提交</button>
? ? <button type="reset">重置</button>
? ? <button type="button">按鈕</button>
五，input屬性補(bǔ)充
? ? ? ? ? 1: autocomplete="off" ?關(guān)閉自動(dòng)補(bǔ)全
? ? ? ? ? 2: readonly 設(shè)置為只讀，不能修改
? ? ? ? ? 3: disabled 設(shè)置為禁用
? ? ? ? ? 4: autofocus ?自動(dòng)獲取焦點(diǎn)
? ? ? ? ? 5: placeholder 提示內(nèi)容
今日學(xué)習(xí)內(nèi)容到此結(jié)束
總結(jié)
以上是生活随笔為你收集整理的前端剑法第四式————御风的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： preLaunchTask“C/C++:
- 下一篇： Django之验证码（十七）