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