AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

HTML教程之表格与表单 by PHPChina

发布者 weber
发布于 1441154911004  浏览 2365 关键词 HTML5, 前端 
分享到

第1页

表格与表单
http://www.phpchina.com
PHPChina 工作室

第2页

知识回顾
HTML文档结构
常用的HTML标签
链接
图片
换行
分段
字体
……

第3页

内容摘要
在 HTML 文档中进行排版布局
列表
表格
框架 
使用表单及其中的对象

第4页

列表简介
列表用于按逻辑方式对数据分组



 


 
玫瑰花
向日葵
兰花
苹果
桔子
水仙
芒果
水果
苹果 
芒果
桔子
花卉
水仙
兰花
向日葵
玫瑰花

第5页

列表类型:无序列表 

<BODY>
<H1>星期中的每一天</H1>
<UL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</UL>
</BODY>
无序列表也称为“项目列表”

第6页


<BODY>
<H1>星期中的每一天</H1>
<OL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</OL>
</BODY>
… 
列表类型:有序列表 
在有序列表中,列表项以自动生成的顺序显示 

第7页

表格 

第8页

创建表格 
第一步
第三步
第二步
此时,在“文档”窗口中将插入一个空白表格
演示:创建表格的步骤

第9页

格式化表格 
演示:格式化表格的步骤

第10页

表格
列标题
在 HTML 文档中,广泛使用表格来存放网页上的文本和图像
单元格

第11页

<HTML>
<HEAD>
<TITLE>使用表格</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2 >
 <TR>
   <TD>姓名</TD>
   <TD>性别</TD>
   <TD>分数</TD>
 </TR>
 <TR>
  <TD>Robert</TD>
  <TD>M</TD>
  <TD>80</TD>
 </TR>
 .......
</TABLE>
</BODY>
</HTML>
创建表格 
<TABLE>代表表格的开始,border=2表示边框尺寸为2
<TR>表示行,这是表格的第一行,有三列数据,<TD>代表列 
表格的第二行,有三列数据
表格的第三行,也有三列数据

第12页

<BODY>
<TABLE BORDER = 2>
<CAPTION align=top>学员档案信息</CAPTION>
 <TR>
   <TH>姓名</TH>
   <TH>性别</TH>
   <TH>分数</TH>
 </TR>
 <TR>
  <TD>Robert</TD>
  <TD>M</TD>
  <TD>80</TD>
 </TR>
 .......
</TABLE>
</BODY>
</HTML>
表格的标题
<CAPTION>表示表格标题
<TH>表示行或列标题,粗体显示 
表格的第二行,有三列数据
表格的第三行,有三列数据

第13页

<BODY>
<TABLE border=2 align=center>
  <CAPTION align=top>学员档案信息</CAPTION>
  <TR>
    <TH>姓名</TH>
    <TH align="center">性别</TH>
    <TH align="right">分数</TH>
  </TR>
  <TR>
    <TD>Robert</TD>
    <TD align="center">M</TD>
    <TD align="right">80</TD>
  </TR> 
 .......
</TABLE>
</BODY>
</HTML>
表格的对齐方式
整个表格居中
姓名列默认左对齐 
性别列居中 
分数列右对齐 

第14页

合并单元格(跨列)
<BODY>
<TABLE BORDER = 2 ALIGN = CENTER>
<CAPTION>创建表格 </CAPTION>
<TH COLSPAN = 3>第一学期</TH>
<TH COLSPAN = 3>第二学期</TH>
<TR>
 <TD>数学</TD>
 <TD>科学</TD>
 <TD>英语</TD>
 <TD>数学</TD>
 <TD>科学</TD>
 <TD>英语</TD>
<TR>
 <TD>98</TD>
<TD>88</TD>
.... 
COLSPAN=“n” 属性表示跨多少列 

第15页

合并单元格(跨行)
<BODY>
<TABLE BORDER = 1, align = center>
<CAPTION><b>创建表格<b></CAPTION>
 <TR>
 <TH></TH>
 <TH></TH>
 <TH>螺母</TH>
 <TH>螺栓</TH>
 <TH>锤子</TH>
 <TR>
<TD ROWSPAN = 3>第一季度</TD>
<TD>一月</TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
 <TR>
<TD>二月</TD>
.....
ROWSPAN=“n” 属性表示跨多少行 

第16页

<BODY>
<TABLE border=0 align=center width=50%>
  <CAPTION align=top>学员档案信息</CAPTION>
  <TR bgcolor="#00FFFF">
    <TH align="left">姓名</TH>
    <TH align="center">性别</TH>
    <TH align="right">分数</TH>
  </TR>
  <TR bgcolor="#FFFF00">
    <TD>Robert</TD>
    <TD align="center">M</TD>
    <TD align="right">80</TD>
  </TR>
  <TR bgcolor="#FFFF00">
    <TD>Mary</TD>
    <TD align="center">F</TD>
    <TD align="right">18</TD>
  </TR>
</TABLE>
表格的背景色和尺寸设置 
表格的颜色设置:
表格的背景色 <TABLE bgcolor=颜色值> 
行的背景色<TR bgcolor=颜色值> 
   列的背景色  <TD bgcolor=颜色值>
颜色值可以采用 RGB(red/green/blue)红绿蓝十六进制值表示,如红色#FF0000, 
或是一些预定义色彩名称:red ,blue,yellow等。
表格的尺寸设置:
<TABLE   width=n1   height=n2>
例如:
<TABLE width="200" height="100">
表示一个长为200像素,宽为100像素的表格。
<TABLE width=20% height=10%>
表示一个宽为窗口的20%,高为窗口的10%的表格。

第17页

课堂练习:请编写HTML代码

第18页

框架 
广告栏顶部框架(top.htm)
商品详细介绍右侧框架(main.htm)
商品导航
左侧
框架(left.htm)

第19页

为何使用框架 
在另一个固定部分
显示导航部分
在页面的一个固定部分显示徽标或静态信息
在此处显示主要内容。
 
站点中只有此部分是变化的。

第20页

使用iframe框架
使用iframe进行页面内的页面嵌套
可以定义嵌套页面的大小、位置等

用法:
<iframe name=“ifra1” scr=“abc.htm” border=“1”/>

可以通过name属性将链接的显示目标定位到
iframe框架内。

第21页

表单

第22页

METHOD =“post或get”
表单<FORM>
ACTION
METHOD
指定提交后由服务器上哪个处理程序处理
指定向服务器提交的方法:
一般为post或get方法, 
post方法比较安全
 ACTION = “URL” 
<FORM action=“http://www.sohu.com” method=“post”>

第23页

表单输入元素-1 
文本框、按钮、单选按钮、复选框等都是输入元素。
<INPUT type=“?” name=“?” size=”?”   
   value=“?” maxlength=“?” checked=“?”>

第24页

表单输入元素-2
  <INPUT name="button1" type="submit" value="提交">

  <INPUT name="button2" type="reset" value="重置">

  <INPUT name="button3" type="button" value="普通按钮">
BUTTON(按钮)

第25页

表单输入元素-3
身份证号<input type="Text" name="PID" value=""  
   size="20" maxlength="18">
TEXT(文本)
密 码: <INPUT type=password value=“”  name=“pass" size=15>
<TEXTAREA name=“textarea” clos="20" rows="5" >请填写您的工作经历</TEXTAREA>

第26页

表单输入元素-4
性别:<INPUT TYPE=radio NAME=”sex” VALUE=”male”>男性
<INPUT TYPE=radio NAME=”sex” VALUE=”male”>女性
单选按钮和复选框 
你喜欢以下哪些明星: 
<br> 
<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子 
<input type="Checkbox" name="id2" value="Leon">郑秀文 
<input type="Checkbox" name="id3" value="BonJovi" 
checked>BonJovi

第27页

HTML输入元素-5
<BODY bgColor="#ccccff" Text="#000099">
<FORM ACTION="http://www.com.cn" METHOD="POST">
<B><H2 align="left">2004 年欧锦赛</H2></B>
<P><B>预测“最佳球员”</B></P><P>
<INPUTTYPE="RADIO"NAME="myradio“ VALUE="0">Ronaldo
<INPUT TYPE="RADIO" NAME="myradio" VALUE="1">Beckham
<INPUT TYPE="RADIO" NAME="myradio" VALUE="2">Zidane
</P><P><B>预测大赛亚军</B></P><P>
<INPUT NAME="mybox2" TYPE="CHECKBOX" VALUE="0">巴西
<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="1">法国
<INPUT NAME="mybox3" TYPE="CHECKBOX"  VALUE="2">阿根廷
<BR></P><P><B>预测谁将成为 2004 年欧锦赛冠军?</B></P><P>
<INPUTNAME="text1“ TYPE="TEXT" SIZE="30" MAXLENGTH="30"></P><P>
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="提交">
<INPUT TYPE="RESET" NAME="Reset" VALUE="重置"></P>
</FORM>
</BODY>
阅读代码,请问网页中的显示结果?

第28页

表单输入元素-6
下拉菜单 
<B>谁是 2002 年世界杯冠军?</B>
<SELECT NAME =“myselect">
<OPTION SELECTED>西班牙</OPTION>
<OPTION>法国</OPTION>
<OPTION>巴西</OPTION>
<OPTION>德国</OPTION>
</SELECT>
列表选项

第29页

表单输入元素-7
课堂练习:请编写HTML代码

第30页

课堂重点 
使用表格进行页面排版布局
表格相关的标签和属性
表单中的各种元素

第31页

谢 谢
http://www.phpchina.com
支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。