[TOC] # 表格 ~~~ <table> 表格 <thread>標簽定義表格的表頭。該標簽用于組合 HTML 表格的表頭內容 <tr> 行 <td></td> 列 <td></td> <td></td> </tr> </thread> <tfoot>用于對 HTML 表格中的主體內容進行分組 <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody>用于對 HTML 表格中的表注（頁腳）內容進行分組 <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> ~~~ 加了表格的頭部,身體和腳,寫了這些有利于SEO優化,但是這些在不同瀏覽器中支持不是太好 ## 屬性 ~~~ Border="1" 邊框 Width="500" 寬度 Height="300" 高 cellspacing="2" 單元格與單元格的距離(默認為2像素) cellpadding="2" 內容距邊框的距離(默認值為1) align="left | right | center" 設置表格在網頁中的水平對齊方式 如果直接給表格用align="center" 表格居中 如果給tr或者td使用 ，tr或者td內容居中。 bgcolor="red" 背景顏色 ~~~ ## 表頭和單元格合并 先上后下,先左后右 ~~~ 表頭 <caption></caption> colspan="2" 合并同一行上的單元格 rowspan="2" 合并同一列上的單元格 ~~~ ## 表格標題,邊框顏色,內容垂直對齊 ~~~ 表格標題 <th></th> 用法和td一樣 ~~~ 邊框顏色 ~~~ bordercolor="red" ~~~ 內容垂直對齊方式 ~~~ <td valign="bottom">11</td> valign="top | middle | bottom" ~~~ # 注意 ~~~ <tr></tr>只能嵌套<td></td> <td></td>標簽,就像個容器,可以容納所有的元素 ~~~ # 表單域 ~~~ <form action="1.php" method="get"> 屬性: action處理信息 method="get | post" get 安全性差 post 安全性高 ~~~ ## 文本輸入框 ~~~ maxlength="6" 限制輸入字符長度 readonly=”readonly” 將輸入框設置為只讀狀態（不能編輯） disabled="disabled" 輸入框未激活狀態 name="username" 輸入框的名稱 value="大前端" 將輸入框的內容傳給處理文件 size 正整數,inout顯示的寬度 ~~~ ## 密碼輸入框 ~~~ 密碼: <input type="password" name="pwd"> ~~~ 文本輸入框的所有屬性對密碼輸入框都有效 ## 單選框 ~~~ <input type="radio" name="gender" checked="checked"> ~~~ 只有將name的值設置相同的時候,才能實現單選效果 ~~~ checked="checked" 設置默認選擇項 ~~~ ## 下拉列表 ~~~ <select> <option>下拉</option> <option>下拉</option> </select> ~~~ 屬性 ~~~ multiple="multiple" 將下拉列表設置為多選項 selected="selected" 設置默認選中項目 ~~~ ~~~ <optgroup label="北京市"> <option>朝陽區</option> <option>昌平區</option> </optgroup> ~~~ ~~~ <optgroup></optgroup> 對下拉列表進行分組 label="" 分組名稱 ~~~ ## 多選框 ~~~ <input type="checkbox" checked="checked">上衣 <input type="checkbox" checked="checked">下衣 <input type="checkbox" checked="checked">鞋子 checked="checked" 設置默認選中項 ~~~ ## 多行文本 ~~~ <textarea cols="130" rows="10"></textarea> ~~~ cols 控制輸入字符的長度 rows 控制輸入的行數 ## 文件上傳控件 ~~~ <input type="file"> ~~~ ## 文件提交按鈕 ~~~ <input type="submit"> ~~~ 可以實現信息提交功能 = ## 普通按鈕 ~~~ <input type="button" value="普通按鈕"> ~~~ 不可以實現信息提交功能,需配合js ## 圖片按鈕 ~~~ <input type="image" src="1.jpg"> ~~~ 圖片按鈕可以實現信息提交功能 ## 重置按鈕 ~~~ <input type="reset"> ~~~ 將信息重置到默認狀態 ## 表單信息分組 ~~~ <form action="1.php" method="post"> <fieldset> <legend>分組信息</legend> </fieldset> </form> ~~~ ## html5補充表單控件 type屬性 ~~~ email: 郵箱 tel: 手機號碼 url: url格式 number: 數字格式 search: 搜索框 range: 自由拖動滑塊 time: 小時分鐘 date: 年月日 datetime: 時間 month : 月年 week: 星期 年 ~~~ ## 常用新屬性 | 屬性 | 用法 | 含義 | | -------------------- | ---------------------------------------- | ---------------------------------------- | | placeholder | `placeholder="請輸入用戶名"` | 占位符 當用戶輸入的時候 里面的文字消失 刪除所有文字，自動返回 | | autofocus | `autofocus` | 規定當頁面加載時 input 元素應該自動獲得焦點 | | multiple | ` multiple` | 多文件上傳 | | autocomplete | `autocomplete="off"` | 規定表單是否應該啟用自動完成功能 有2個值，一個是on 一個是off on 代表記錄已經輸入的值 1.autocomplete 首先需要提交按鈕 2.這個表單您必須給他名字 | | required | `required ` | 必填項 內容不能為空 | | accesskey | `accesskey="s"` | 規定激活,使元素獲得焦點元素的快捷鍵 采用 alt + s的形式 | ## label標簽 label標簽為input元素定義標注(標簽) 作用: 用于綁定一個表單元素,當點擊label標簽的時候,被綁定的表單元素就會獲得輸入焦點 ~~~ <label for="pwd">pwd</label> <br> 用戶名: <input type="text" name="username"> <br> 密碼: <input type="password" name="password" id="pwd"> ~~~ label中的for對應里面的id 點label的會自動在對應input里獲得焦點 --- 還有種,包含的 ~~~ <label> 密碼: <input type="password" name="password"> </label> ~~~ # 標簽語義化 好的語義化的網站標準就是去掉樣式表文件之后，結構依然很清晰。 標簽語義化概念：根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化） -標簽語義化意義： 1:網頁結構合理 2:有利于seo:和搜索引擎建立良好溝通，有了良好的結構和語 義你的網頁內容自然容易被搜索引擎抓取； 3:方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備） 4:便于團隊開發和維護 1：盡可能少的使用無語義的標簽div和span； 2：在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利； 3：不要使用純樣式標簽，如：b、font、u等，改用css設置。 4：需要強調的文本，可以包含在strong或者em標簽中strong默認樣式是加粗（不要用b），em是斜體（不用i）；  # 表格讓盒子垂直居中 ~~~ .t1 { width: 300px; height: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; } .t2 { width: 200px; height: 200px; border: 1px solid blue; margin-left: 50px; } <div class="t1"> <div class="t2"></div> </div> ~~~