一、表格
1、相关元素：
-
table：定义一个表格，表格最外层的元素
-
th：表头
-
tr：行
-
td：单元格
-
caption：标题
-
thead：页眉
-
tbody：主题内容
-
tfoot：页脚，一般只有一行，一行只有一个格子
<body> <table> <caption>信息表</caption> <!-- thead、tbody、tfoot 可以省略 --> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>籍贯</th> </tr> </thead> <tbody> <!-- 第一行 --> <tr> <td>张红红</td> <td>女</td> <td>成都</td> <td>18</td> </tr> <!-- 第二行 --> <tr> <td>李明明</td> <td>男</td> <td>成都</td> <td>19</td> </tr> <!-- 第三行 --> <tr> <td colspan="2">01</td> <td>02</td> <td rowspan="2">03</td> <!-- 合并后会多出来一个单元格，需手动删除 --> <!-- <td>04</td> --> </tr> <!-- 第四行 --> <tr> <td>01</td> <td>02</td> <td>03</td> <!-- <td >04</td> --> </tr> </tbody> <tfoot> <tr> <td colspan="4">身份信息</td> </tr> </tfoot> </table> </body> 复制代码
2、相关属性
-
colspan：横向合并
-
rowspan：纵向合并
注：前面两个属性直接写在html中
-
border-collapse：边框塌陷
table,td{ border: 1px solid ; border-collapse: collapse; } 复制代码
二、表单
1、表单元素
- form：定义一个表单区域，可以获取用户输入的数据
- input：输入框
- select：下拉列表
- option：下拉列表的选项
- textarea：多行文本框
2、输入框类型
-
text：文本框
<form action=""> <input type="text" placeholder="输入提示内容"> <!-- readonly 表示只读 内容通过value输入 --> <input type="text" value="这个内容只读" readonly> <!-- required 表示必填 没有填提交会有提示 --> <input type="text" required> <!-- disabled 表示禁用 --> <input type="text" disabled> </form> 复制代码 -
password：密码框
<!-- maxlength 设置可输入的长度 --> <input type="password" name="" id="" maxlength="6"> 复制代码 -
button：按钮（没有提交功能）
<input type="button" value="单纯的按钮"> 复制代码 -
submit：提交按钮
<input type="submit" value="提交按钮"> <!--button元素也是提交按钮 提交按钮：具有提交功能，会发生跳转--> 复制代码 -
reset：重置按钮
<input type="reset" value="重置"> 复制代码 -
radio：单选框
<input type="radio" name="gender" id="">男 <input type="radio" name="gender" id="">女 <!-- 通过name属性，设置相同的属性值实现单选效果--> <label for="male">男</label> <input type="radio" name="gender" id="male"> <label for="female">女</label> <input type="radio" name="gender" id="female"> <!--通过id绑定lable标签的文字，使点击文字时也可选中--> 复制代码 -
checkbox：多选框
<input type="checkbox" name="" id=""> 肉末茄子 <input type="checkbox" name="" id=""> 蒜苗回锅 <input type="checkbox" name="" id=""> 小炒肉 <input type="checkbox" name="" id="" checked> 米饭 <!-- 文字也可写在最前面 通过checked可以设置默认选择checked完整写法应该是checked:"checked" 但当属性与属性值相同时可以简写，这种叫做标志性属性，也叫特殊属性--> 复制代码 -
file：选择文件
<input type="file" name="" id=""> 复制代码(新增)
-
email：输入邮件地址，没有@会提示
<input type="email" name="" id=""> 复制代码 -
month：可选择月份
<input type="month" name="" id=""> <!-- 可选择具体日期 --> <input type="date" name="" id=""> <!-- 具体到分钟 --> <input type="datetime-local" name="" id=""> 复制代码
3、下拉列表
-
select
<select name="" id=""> <option value="">成都</option> <option value="">上海</option> <option value="" selected>重庆</option> <option value="">杭州</option> <option value="">北京</option> </select> <!-- selected表示默认该选项在页面上显示 --> 复制代码
4、多行文本框
-
textarea
<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea> <!-- cols表示行的长度，row表示列的长度，且该文本框默认是可拉伸的 resize: none可控制其固定尺寸，不可拉伸，该属性是CSS中的--> 复制代码
\
