表格

基本标签

<table> </table> 表示表格的整体
<tr> </tr> 表示表格每行
<td> </td> 表示单元格

嵌套关系: table>tr>td

表格相关属性

1.border表示边框宽度,border=" "默认无边框
2.width表示表格宽度
3.height表示表格高度
以上属性写在<table>标签内

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

表格标题和表头单元格标签

1.caption表示表格大标题,默认在表格整体顶部居中显示

 <caption>
         <h3>学生成绩单</h3>
      </caption>

2.th表示表头单元格,用于表格第一行,默认内部文字加粗居中显示,写在tr内

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

表格的结构标签

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>总结</td>
         <td>勇敢牛牛不怕困难</td>
         <td>勇敢牛牛不怕困难</td>
     </tr>
 </tfoot>

合并单元格

1.跨行合并:rowspan
2.跨列合并:colspan
左上原则:上下合并,保留最上边单元格;右合并,保留最左边单元格

表单

input表单标签

input标签可以通过type属性值的不同,展示不同效果
placeholder=" " 占位符,提示用户输入文本内容
form:表单域是一个包含表单元素的区域,会把表单域中收集的信息提交给服务器

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中的信息,如要重置表单内的信息,整个表单应包含在<form></form>中

<input type="reset">

8.普通按钮:button

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

button按钮标签

标签可以通过type属性值的不同,展示不同效果,默认是提交按钮
1.提交:submit

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

2.重置:reset,重置form中的信息,如要重置表单内的信息,整个表单应包含在<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:规定了文本域内可见宽度
2.rows:规定了文本域内可见行数
文本域右下角可以拖拽改变大小

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

lable标签

lable:绑定表单元素,增大可点击区域,增加用户体验
方法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>

Html-Day1