html表格有3个基本组成部分.docx
《html表格有3个基本组成部分.docx》由会员分享，可在线阅读，更多相关《html表格有3个基本组成部分.docx（8页珍藏版）》请在冰豆网上搜索。
html表格有3个基本组成部分
竭诚为您提供优质文档/双击可除
html表格有3个基本组成部分
篇一：
html表单页面的基本结构
html表单页面的基本结构
本章开始讲解表单和框架，其中重点是如何使用表单中的各种元素．如何使用框架制作多窗框页面；难点是表单中的post方法和get方法的区别．窗口的target属性。
为了能在一个页面中显示多个html文档．我们还要介绍框架。
本节单词记忆：
标签1.form2.input属性1.action2.method3.size
4.maxlength5.checked
网页学习网提示：
html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。
热衷于上网的用户经常会在网上看到一些会员注册页面、购买某个商品收集信息页面、网上调查问卷页面、搜索工具页面等，这些页面是什么做的呢？
我不敢说完全是用表单做的，但我敢肯定至少包含有表单，所以表单主要用来收集客户端相关信息，使网页具有交互功能。
本节主要讨论如何使用html来创建表单，然后向表单中添加表单元素。
网页中的表单用途很广，而且还在不断发展。
下面我们就列举一些典型的表单应用：
●在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。
●为收集购买某个商品的订单信息。
例如，如果想通过intemet购买一本书，则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。
●收集关于调查问卷信息。
大部分提供服务性的网站都鼓励用户参与调查问卷，提供反馈信息。
这些反馈信息除了维系良好的客户关系外，它还有助于改进和提高网站的服务质量，从而使网站的服务更具人性化，吸引更多的浏览者。
●为网站提供搜索工具。
提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到想要的信息，如比较著名的搜索网站：
谷歌（http：
//）等。
如图1所示是网页上的一个典型表单。
图1典型的表单
一、表单包含的控件
创建表单后，就可以在表单中放置控件以接受用户的输入。
这些控件通常放在标签对之间一起使用，也可以在表单之外用来创建用户界面。
在网上冲浪时，我们经常会见到一些常用的控件，例如：
让用户输入姓名的单行文本框，让用户输入密码的密码框，让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。
不同的表单控件有不同的用途。
如果要求用户输入的仅仅是一些文字信息，如“姓名”、“备注”、“留言”等，一般使用单行文本框或多行文本框；如果要求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框，如图1中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些控件。
如果要把填写好的表单信息提交给服务器，一般使用“提交”按钮，如图3.1中的“同意以下服务条款，提交注册信息”按钮。
除此之外，还有一些不太常用的表单控件，在这里就不一一列举了。
二、表单页面的基本结构
标签用于在网页中创建表单区域，属于一个容器标签，表示其他表单标签需要在它的包围中才有效，便是其中的一个。
用以设定各种输入资料的方法，其属性见下表。
属性说明
此属性指示服务器上处理表单输出的程序。
一般来说，当用户
action单击表单上的“提交”按钮后，信息发送到web服务器上，由
action属性所指定的程序处理。
语法为：
action="uRl"
此属性告诉浏览器如何将数据发送给服务器，它指定向服务器
发送数据的方法（用post方法还是用get方法）。
如果值为get，
浏览器将创建一个请求，该请求包含页面uRl、一个问号和表单method的值。
浏览器会将该请求返回给uRl中指定的脚本，以进行处
理。
如果将值指定为post，表单上的数据会作为一个数据块发
送到脚本，而不使用请求字符串。
语法为：
method=（getlpost）
使用post方法将表单提交给"processform"程序处理，代码如示例1所示。
示例1:
action="/processform">
名字：
密码：
在示例1中，若把method=”post”改为method=”get’就变成了使用get方法将表单提交给"processform"程序处理。
这两种方法都是将表单数据提交给服务器上指定的程序进行处理，那有什么区别呢？
先让大家看看采用post和get方法提交表单信息后浏览器地址栏的变化，如图2和图3所示。
在“名字”和“密码”标签后，分别输入用户名和密码，然后单击“提交”按钮。
采用post方法提交表单信息之后，浏览器地址栏前后没变化，如一图3.2所示；采用get方法提交表单信息之后，浏览器地址栏前后有变化，如图3.3所示，并且在浏览器地址栏中能看到信息
"name=wzq&password=123”，这其实就是我刚才输入的用户名和密码信息，是不是很恐怖？
密码都能看得见。
由此可以看出，使用post方法提交表单信息更安全，相反，使用get方法提交表单信息极其不安全，建议大家在使用表单时尽可能地使用post方法来传送数据。
图3get方法提交表单信息后
三、表单元素的统一格式
网页中的表单由许多不同的表单元素组成，这些表单元素各自都有很多属性，要一一节绍，篇幅不允许，下面就把这些表单元素中的一些常用的属性作一个统一的介绍。
下面给出了表单元素的统一格式：
maxlength=“4”checked=“checked”>
元素定义要在表单中显示的控件类型和外观。
此元素包括的属性见下表。
属性说明
此属性指定表单元素的类型。
可用的选项有：
text、password、
checkbox、radio、submit、reset、file、hidden、image
和button。
默认选择为text
此属性指定表单元素的名称。
例如，如果表单上有几个文本
框，可以按名称来标识它们，如textl、text2等。
名称属性
的作用域为FoRm元素内
此属性是可选属性，它指定表单元素的初始值。
但如果type
为radio，则必须指定一个值
此属性指定表单元素的初始宽度。
如果type为text或
password，则表单元素的大小以字符为单位。
对于其他输入
类型，宽度以像素为单位typenamevaluesize
比属性用于指定可在text或passwordy元素中输入的最大字maxlength符数。
默认值为无限大
checked此属性是boolean属性，指定按钮是否是被选中的。
当输入
类型为radio或checkbox时，使用此属性
本节作业：
本节以概念理解为主，特别注意的action和method属性，以及理解表单的提交过程，虽然现在用不到，但在动态网页的学习中是非常重要的。
点击下载第三章案例及作业资源返回《html入门经典》教程列表
转载请注明本文地址:
/html/jc/503.html
篇二：
第三章html表格_上机需求
上机需求
主要目标
使用表格制作课程表
使用表格进行网页布局
使用表格完成注册页面的布局
模拟项目中的列表页
实验1
任务：
使用表格制作课程表。
如下图：
任务：
使用表格进行网页布局。
如下图：
任务：
使用表格完成注册页面的布局。
如下图：
实验4
任务：
模拟项目中的列表页。
如下图：
篇三：
html的表格基础
html的表格基础
上一章已介绍了html基本标签，既介绍了如何使用html文件的基本结构创建网页，又介绍了文本相关标签实现文字修饰和布局，还讲解了图像相关标签如何实现图文并茂的页面，超链接相关标签如何实现页面间的跳转。
本章开始讲解表格的基础，其中重点是表格的基本结构，难点是如何创建跨多行跨多列的表格。
为了使我们制作的页面更精致、表格更美观，我们还要研究表格布局，以及如何对表格进行美化修饰。
本节单词记忆：
标签1.table2.tr3.td属性1.border
网页学习网提示：
html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。
表格是网页制作中使用最多的技术之一，它通常用来显示分类数据，在网页中表格更多地用在网页布局和定位上。
通过使用表格相关属性，可实现对网页中的文字和图片进行合理的布局和定位，使得网页在形式上丰富多彩，在组织上井然有序。
真是表格在手，一清二楚！
在html语言中，表格至少由标签、标签和标签这3对标签组成，否则，就不能成为表格。
…标签中间将包括所有表格元素，表格元素主要有行、列、单元格等。
了解表格的基本结构之后，我们就可以创建一个简单的表格。
一、为什么要使用表格
当我们在网上冲浪时，会看到论坛页面（如图1所示）、门户网站页面（如图2所示）、购物网站页面（如图3所示）等。
这些图文并茂、绚丽多彩、整齐有序的页面效果是如何实现的呢？
其实很简单，就是用表格来实现的，既然表格有如此广泛的应用和如此强大的功能，下面我们就抓紧时间开始对表格的学习吧！
图1论坛页面
图2门户网站页面
图3购物网站页面
二、表格的基本结构
看到这么多使用表格进行布局、定位的精美页面，你是不是很想体验一把呢！
不用急，万丈高楼平地起，先让我们来看一看表格的最基本的结构。
表格是由指定
数目的行和列组成，如图4所示。
文字或图片按照相应的列或行进行分类和显示。
图4表格的布局
可以使用有行和列的表格格式来显示数据。
表格可在一定程度上控制文本和图像在网页中的位置，而不是完全由浏览器对此进行控制。
在html中，用于创建表格的标签如下：
1.
…标签用于在html文档中创建表格。
它包含表名和表格本身内容的代码。
表格的基本单元是单元格，用…标签定义。
2.
表格行用标签定义，由单元格构成。
多个行结合在一起就构成一个表格，这反映在用于创建表格的html语法中。
表格的每一行都用标签表示，并用相应的
标签结束。
3.
表格的每一行又有若干表格单元格，用…标签表示。
td是"表格数据（tabledata）”的英文缩写。
标签定义一个列，嵌套于标签内。
border属性是最常用的属性，可用于定义表格的单元格和结构。
该属性指定边框的厚度，如果其值设置为零（0），则不显示边框。
三、如果创建表格
所有的表格都包括3个基本标签，即表格标签…、行标签
…和单元格标签…。
可以说，在页面中如果要创建一个完整的表格，至少要包含这3对标签。
语法:
创建表格的基本语法：
单元格内容
创建表格时，一般情况下分3步：
第一步：
创建表格标签…。
第二步：
在表格标签…里创建行标签，可以有多行。
第三步：
在行标签…里创建单元格标签…，可以有多个单元格。
如示例1所示为在页面中添加一个2行3列的表格的代码。
示例1:
基本表格
移动
联通
铁通
ibm
惠普
华硕
运行示例1代码，其效果如图5所示。
图5基本表格
本节作业：
不看示例代码，制作如图5网页。
注意事项：
1.注意表格的基本结构，不要忘了闭合td标签或是混淆闭合td、tR标签。
网页学习网提示：
光看教程是无法让你掌握html知识，最好是完成作业后才进入下一次教程，动起手来吧！
点击下载第二章案例及作业资源返回《htm（html表格有3个基本组成部分）l入门经典》教程列表
转载请注明本文地址:
/html/jc/499.html
升级会员 