EasyDemo*Html表格、表单知识点个人总结(五&&六)

五、表格

1.1表格的作用

1.1.1表格的作用

         *表格通常用来组织结构化的消息

*表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成  *表格的数据保存在单元格里

 

1.2使用表格

1.2.1创建表格

         *定义表格：使用成对的<table></table>标记

*创建表格:使用成对的<tr></tr>标记

*创建单元格:使用成对的<td></td>标记

1.2.2表格的常用属性

        *<table>元素

          -border

     -width

     -height

     -align

     -cellpadding:单元格边框与内容间的间距

     -cellspacimng:单元格间的间距

         *<tr>元素

     -align/valign

         *<td>元素

     -align/valign/width/height/colspan/rowspan

1.2.3表格标题<caption>

*使用<caption>元素为表格定义标题

 -默认情况下，标题将在表格上方居中显示

*<caption>标签必须紧随<table>标签之后，且只能对每个表格定义一个标题

1.3表格的复杂应用

1.3.1行分组

*表格可以划分为3个部分：表头、表主体、表尾

*表头行分组：<thead></thead>

*表主体行分组:<tbody></tbody>

*表尾行分组:<tfoot></tfoot>

 -包含一个或多个<tr>元素

1.3.2不规则表格

         *设置单元格<td>的跨行或者跨列属性

        *跨列:clospan

     -水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数

         *跨行:rowspan

          -垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数

        

1.3.3表格的嵌套

         *嵌套表格

         -在单元格中放置另外一个表

         -即<td>元素中再包含<table>

         *使用嵌套的表格以设计复杂表格或者发咋布局

          

 

六、表单

1.1表单概述

1.1.1表单的作用

*表单用于显示、收集信息，并提示信息到服务器

*表单有两个基本部分

 -实现数据交互的可见的界面元素，比如文本框或按钮

 -提交后的表单处理

*界面元素

 -使用<form>元素创建表单

 -在<form>元素中添加其他表单可以包含的控件元素

*图例:

1.1.2表单元素<form>

         *定义表单:使用成对的<form></form>标记

        *主要属性

     -action:定义表单被提交时发生的动作，通常包含服务方脚本的URL(比如:JSP、PHP)

     -method:指出表单数据提交的方式,取值为get或者post

     -enctype:表单数据进行编码的方式

     -name:表单名称

1.1.3表单控件

         *表单可以包含很多不同类型的表单控件

         *表单控件元素是包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息

         *表单控件元素有

         -input元素:文本输入控件、按钮、单选和复选按钮、选项框、文本选择框和隐藏控件等

         -textarea元素

         -select和option元素

         -其他元素

1.2.<input>元素

1.2.1<input>元素

         *<input>元素用于收集用户信息

         *该元素是一个单标记，语法为: <input/>

         *主要属性

          -type:根据不同的type属性值，可以创建各种类型的输入字段，比如文本框、复选框

          -value:控件的数据

          -name:控件的名称

1.2.2文本框与密码框

         *文本框:<input type=”text”/>

         *密码框: <input type=”password”/>

         *主要属性

          -value属性:由访问者自由输入的任何文本

          -maxlength属性:限制输入的字符数

          -readonly属性:设置文本控件只读

        

1.2.3单选框和复选框

         *单选框:<input type=”radio”/>

         *复选框:<input type=”checkbox”/>

         *主要属性:

         -value:文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器

         -name:用于实现分组，一租单选框或者复选框的名称必须相同

         -checked:设置选中

      

1.2.4按钮

         *提交按钮:<input type=”submit”/>

         -传送表单数据给服务器或其他程序处理

         *重置按钮:<input type=”reset”/>

         -清空表单的内容并把所有表单控件设置为最初的默认值

         *普通按钮:<input type=”button”/>

         -用于执行客户端脚本

         *主要属性

         -value:按钮的标题文本

        

1.2.5隐藏域和文件选择框

         *隐藏域:<input type=”hidden”/>

         -在表单中包含不希望用户看见的信息

         *文件选择框:<input type=”file”/>

         -选择要上传的文件