表格

表格基本构成

​ 表格标签构成

​ table:表格区域

border边框

​ width height

​ bgcolor

​ background

​ cellpadding:内容到边框的距离

​ cellspacing:单元格与单元格之间的距离

​ align=“center”:控制表格在本行中的水平位置

​ tr:定义表格行

​ height

​ bgcolor

​ background

​ align=“center” 让本行所有单元格内容居中

​ valign 设置内容的垂直位置 top middle bottom

​ td:表格的单元格

​ width

​ bgcolor

​ background

​ align=“center”

​ valign 设置内容的垂直位置 top middle bottom

​ th:表头,也是单元格,内容加粗居中显示

​ 学生信息表 表格标题

​ 注意:表格中的内容都必须写在单元格中

<table border="1"width="300" height="200"cellpadding="0" cellspacing="0" align="center"> <caption>学生信息表</caption> <tr height="100"> <th width="100" >姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr align="center"> <td>张三</td> <td>男</td> <td align="right">23</td> </tr> <tr valign="bottom"> <td valign="top" align="center">张三</td> <td>男</td> <td>23</td> </tr> <tr> <td>张三</td> <td>男</td> <td>23</td> </tr> </table>

单元格合并

colspan=“合并的数量” 记得删除多余的单元格

rowspan=“合并的数量” 跨多行操作

<table border="1" width="500" height="300"> <tr> <td colspan="5"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td rowspan="3"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>

表单

表单: 就是从客户端可以向服务器发送数据的.

​ 表单中有许多可以输入或者选择的组件.

​ 用户就可以在表单中输入信息,从而向服务器发送.

​ form标签表示一个表单,不显示

​ action=“向服务器端发送的地址”

​ method=“向服务器端发送数据方式” get/post

​

表单组件:

​ input

​ type=“text” 单行文本输入框

​ id:值要求唯一 自定义值

​ name:属性名可以重复 自定义值 向服务器端发送数据的键

​ value:提交的值

​ class:属性名可以重复 自定义值

​ size=“30” 列数

​ placeholder=“请输入账号” 提示信息 当输入内容后自动消失

​ readonly=“readonly” 只读

​ disabled=“disabled” 禁用组件 一旦组件被禁用了,值就不会向服务器端提交

​ type=“password” 密码框

​ type=“file” 文件选择 accept=".png,.jpg"过滤文件

​ type=“radio” 单选框

​ name相同为一组 一组之内只能选中一个

​ 选择性组件,需要给默认值

​ 表单提交时,只会提交选中的那一个

​ checked=“checked” 默认选中

<form action="" method="get"> <label for="accountId">账号</label> <input type="text" id="accountId" name="account" value="123" size="30" placeholder="请输入账号"/> <br/> 密码:<input type="password" name="password" /><br/> 附件:<input type="file" name="file" accept=".png,.jpg"/><br/> 性别: <input type="radio" name="sex" value="男" id="manid" /><label for="manid">男</label> <input type="radio" name="sex" value="女" checked="checked" id="womanid"/>女<br/> 课程: <input type="checkbox" name="course" value="java" checked="checked"/>java <input type="checkbox" name="course" value="c"/>c <input type="checkbox" name="course" value="html"/>html <input type="checkbox" name="course" value="css"/>css </form>

内联框架

<iframe> </iframe>

​ 网页内部网页