表格

基本標簽

<table> </table> 表示表格的整體
<tr> </tr> 表示表格每行
<td> </td> 表示單元格

嵌套關(guān)系: table>tr>td

表格相關(guān)屬性

1.border表示邊框?qū)挾?border=" "默認無邊框
2.width表示表格寬度
3.height表示表格高度
以上屬性寫在<table>標簽內(nèi)

<table border="1" width="300" height="300">

表格標題和表頭單元格標簽

1.caption表示表格大標題,默認在表格整體頂部居中顯示

 <caption>
         <h3>學生成績單</h3>
      </caption>

2.th表示表頭單元格,用于表格第一行,默認內(nèi)部文字加粗居中顯示,寫在tr內(nèi)

<table>
      <tr>
         <th> </th>
      </tr>
    </table>

表格的結(jié)構(gòu)標簽

1.thead表示表格頭部
2.tbody表示表格主體
3.tfoot表示表格底部

 <thead>
      <tr>
         <th>姓名</th>
         <th>成績</th>
         <th>評分</th>
     </tr>
 </thead>
 <tbody>
      <tr>
         <td>小劉</td>
         <td>100分</td>
         <td>A</td>
     </tr>
     <tr>
         <td>兔子</td>
         <td>100分</td>
         <td>A</td>
     </tr>
 <tbody>
 <tfoot>
      <tr>
         <td>總結(jié)</td>
         <td>勇敢牛牛不怕困難</td>
         <td>勇敢牛牛不怕困難</td>
     </tr>
 </tfoot>

合并單元格

1.跨行合并:rowspan
2.跨列合并:colspan
左上原則:上下合并,保留最上邊單元格;右合并,保留最左邊單元格

表單

input表單標簽

input標簽可以通過type屬性值的不同,展示不同效果
placeholder=" " 占位符,提示用戶輸入文本內(nèi)容
form:表單域是一個包含表單元素的區(qū)域,會把表單域中收集的信息提交給服務器

1.文本框:text,type屬性的默認值

昵稱：<input type="text" placeholder="請輸入您的昵稱">

2.密碼框:password

密碼：<input type="password" placeholder="請輸入您的密碼">

3.單選框:radio
name:分組,有相同name屬性值的單選框為一組,一組只能有一個被選中
checked:打開瀏覽器默認選中

性別：<input type="radio" name="sex">男
     <input type="radio" name="sex">女

4.復選框:checkbox

愛好：<input type="checkbox" checked>吃飯
     <input type="checkbox" checked>睡覺
     <input type="checkbox" checked>打游戲

5.文件上傳:file
multiple:多文件選擇

<input type="file" multiple>

6.提交:submit

<input type="submit">

7.重置:reset,重置form中的信息,如要重置表單內(nèi)的信息,整個表單應包含在<form></form>中

<input type="reset">

8.普通按鈕:button

<input type="button" value="普通按鈕">

button按鈕標簽

標簽可以通過type屬性值的不同,展示不同效果,默認是提交按鈕
1.提交:submit

<button type="submit">提交</button>

2.重置:reset,重置form中的信息,如要重置表單內(nèi)的信息,整個表單應包含在<form></form>中

<button type="reset">重置</button>

3.普通按鈕:button

<button type="button">普通按鈕</button>

select下拉菜單標簽

1.select:下拉菜單的整體
2.option:下拉菜單的每一項
3.selected:下拉菜單的默認選中

所在城市：
<select>
       <option>上海</option>
       <option selected>北京</option>
       <option>浙江</option>
       <option>四川</option>
       <option>河南</option>
  </select>

textarea文本域標簽

1.cols:規(guī)定了文本域內(nèi)可見寬度
2.rows:規(guī)定了文本域內(nèi)可見行數(shù)
文本域右下角可以拖拽改變大小

<textarea cols="30" rows="10"></textarea>

lable標簽

lable:綁定表單元素,增大可點擊區(qū)域,增加用戶體驗
方法1:

性別：<input type="radio" name="sex" id="man"><label for="man">男</label>
     <input type="radio" name="sex" id="woman"><label for="woman">女</label>

方法2:

性別：<label>
        <input type="radio" name="sex">男
    </label>
    <label>
        <input type="radio" name="sex">女
    </label>