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="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="http://www.baidu.com/s" 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” />

复选框

单选框
```

```
隐藏域
```

```
文件选择控件
```

```
提交按钮
```

```
普通按钮
```

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

11.3.textarea元素

textarea 表示多行文本框 rows属性，设置多行文本框的显示行数（高度），具体尺寸取决于文字大小 cols属性，设置多行文本框的显示列数（宽度），即字符数，具体尺寸取决于文字大小

11.4.button元素

定义一个按钮。

    <button type="button">Click Me!</button>

11.5.select元素

规定下拉列表框

    <select name="city">

        <option value="bj">北京</option>

        <option>上海</option>

        <option>广州</option>

        <option>深圳</option>

    </select>

name属性，规定下拉框名称 size属性，规定下拉框里面选项的可见数目 multiple属性，设置后选单项目允许多选，否则只能选择一个

11.6.option元素

定义和用法

下拉框的具体每一项 value属性，下拉框的值注意：如果value属性没有写，默认提交的时候，下拉框的值是被选中的option元素里面的内容，例如，上海，广州，当写了value属性以后，表单提交的时候，下拉框发送的值是value里面的值，例如，如果第一个option元素被选中，则提交的值是bj而不是北京

11.7.label元素