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” /> 

复选框

单选框

<!--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元素

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元素

定义和用法

为 input 元素定义标注（标记） label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

    <!--显式的绑定：for属性于哪一个表单项元素绑定（通过id属性绑定）。-->
    <label for="SSN">Social Security Number:</label>
    <input type="text" name="SocSecNum" id="SSN" />
    <!--隐式的绑定：-->
    <label>Date of Birth: <input type="text" name="DofB" /></label>

螺钉课堂视频课程地址：http://edu.nodeing.com

原文地址：https://www.cnblogs.com/dadifeihong/p/12024071.html