9 综合实例
仿百度云盘下载页面实战

10 表格 10.1 table

table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示一行里面的某个单元格,通常用在后台管理系统中数据表格的显示

<table border="1" cellspacing="0" cellpadding="0"> <tr> <td>学号</td> <td>姓名</td> <td>班级</td> <td>成绩</td> <td>等级</td> </tr> <tr> <td>20080795113</td> <td>李菲</td> <td>3</td> <td>12</td> <td>不及格</td> </tr> <tr> <td>20080795114</td> <td>张菲</td> <td>3</td> <td>82</td> <td>良好</td> </tr> <tr> <td>20080795115</td> <td>赵菲</td> <td>3</td> <td>32</td> <td>不及格</td> </tr> </table>

注意：在table的开始标签 后面加上 border cellspacing cellpadding，这种形式 叫做给html标签添加属性，border 表示边框， cellspacing 表示单元格之间的间隙，cellpadding表示单元格内容和边框之间的距离

10.2 合并单元格

colspan 设置当前单元格的在水平方向上合并单元格的个数

<table border="1px" width="300" cellspacing="0" cellpadding="0"> <tr> <td>姓名</td> <td>张三</td> <td>年龄</td> <td>20</td> </tr> <tr> <td >个人简介</td> <td colspan="3"></td> </tr> <tr> <td >专业技能</td> <td colspan="3"></td> </tr> </table>

rowspan 设置当前单元格的在垂直方向上合并单元格的个数。

<table border="1" cellpadding="0" cellspacing="0"> <tr> <td>姓名</td> <td>张三</td> <td>年龄</td> <td>12</td> <td rowspan="3"> <img src=http://www.mamicode.com/"tablehead.jpg"/> </td> </tr> <tr> <td>籍贯</td> <td>中国</td> <td>民族</td> <td>汉族</td> </tr> <tr> <td>出生日期</td> <td>1999.3.4</td> <td>政治面貌</td> <td>党员</td> </tr> </table> 练习：

1.课程表 2.个人简历

11 表单 11.1 form标签

form 标签 表示表单，作用就是用来 收集用户的信息 并且发送给后台使用，例如：登录，注册就是通过formate表单完成

form 表单属性

action: 用于设置表单提交的地址 也就是说表单收集的数据要发送到哪里去 method： 用于设置表单提交的方法 也就是说表单是以何种方式把数据发送到action设置好的地址 get： 表单发送数据的方式之一 特点： 表单的发送的数据会显示在浏览器地址栏 post： 表单发送数据的方式之一 特点： 表单发送的数据通常不被用户看见

<form action="" method="get"> 用户名: <input type="text" name="user"/> 密码： <input type="password" name="password"/> <input type="submit" value="提交" /> </form> 11.2 input 标签

input标签为表单的某一个子项 会根据type属性的不同而功能不同 常用的几种type属性：

type = "text" type = "password" type = "checkbox" type = "radio" type = "button" type = "submit" type="file" type = "hidden"

输入框

<input type=“text” /> <!--type="text" 通常用来输入文本内容-->

密码框

<!--type="password" 通常用来输入密码，输入内容不可见--> <input type=“password” />

复选框

单选框

<!--type="radio" 表示单选，几个input中只能选择一个，是否选中用checked属性--> <input type=“radio” />

隐藏域

<!--type="hidden" 隐藏表单元素，有些时候后台需要某个数据，但是在前端 不需要显示的时候这个数据的时候使用--> <input type=“hidden” />

文件选择控件

<input type=“file” /> <!--type="file" 文件上传-->

提交按钮

<input type=“submit” /> <!--type="submit" 执行提交动作将数据发送到后台处理-->

普通按钮

<input type=“button” /> <!--type="button" 普通按钮 不触发提交动作-->

其他属性 name属性，规定input元素的名称，后台会根据这个属性的值来接收数据
value属性，表单项的值 readonly属性，指定控件处于只读状态，针对输入框有效，对按钮无意义 disabled属性，控件不可用，灰色，并且表单提交时不会传送此数据 注意：如果元素没有name属性，表单提交的时候，数据不会被发送出去

11.3.textarea元素