下载文档原格式
上一篇文章为大家带来了HTML的介绍以及运行原理、图像表格的实际应用。
本章迪派为大家介绍无序列表，有序列表，框架浮动窗口表单及表单控件，表单及表单控件一、无序列表，有序列表：1.有序列表：<html><title>俺第一个实例</title><head></head><body><Center>成绩表</center><br/><!--表格--><table align="center" bordercolor="#579AFE" height="10px" border="3px"width="500px"><tr align="center"><td>项目</td><td colspan="5" align="center">上课</td><td colspan="2" align="center">休息</td></tr><tr bgcolor="pink" align="center"><th>星期</b></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr align="center"><td rowspan="4" align="center">上午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机1</td><td rowspan="4" align="center">休息</td></tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机2</td></tr><tr align="center"><td>CAD</td><td>AI</td><td>淘宝</td><td>图形图像</td><td>网站后台</td><td>学历</td></tr><tr align="center"><td>日文录入</td><td>公建</td><td>方正飞腾</td><td>网页三剑客</td><td>地理</td><td>计算机4</td></tr><tr></tr><tr align="center" ><td rowspan="2">下午</td> <td>平面设计</td><td>装潢</td><td>英语</td><td>日语</td><td>会计</td><td>PS</td><td rowspan="2">休息</td> </tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机6</td></tr></table></body></html><!--Html不区分大小写-->2.无序列表<ul><li></li></ul>案例:代码:<html><title>实例</title><head></head><body style="margin-top:0px;"> <ul type="circle"><li>英雄</li><li>精武门</li><li>西游记</li></ul></body></html>☞type可以取disc、circle、square有序列表代码:<html><title>实例</title><head></head><body><ol type="1" start="2" ><li>卢俊义</li><li>吴用</li><li>林冲</li></ol></body></html>☞ type用于指定用什么来显示,start 表示从第几开始计算.type有：阿拉伯数字1, 2, 3, …小写字母a, b, c, …大写字母A, B, C, …小写罗马字母i, ii, iii, …大写罗马字母I, II, III, …二、框架浮动窗口表单及表单控件：Frameset框架集用途主要是用于分割显示多个页面☞frameset和frame配合使用，一般讲是用于后台页面快速入门:代码a.html页面用于保护其它页面<frameset cols="30%,*"><!--noresize不能托动框架边框--><frame name="frame1" src="b.html" frameborder="0" scrolling="no" noresize/> <!--frameborder设置框架边框--><frame name="frame2" src="c.html" frameborder="0"/></frameset>☞该frameset页面不能有body和body体b.html<body bgcolor="pink"><!--target表示我们点击后，目标指向谁--><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/></body>☞target属性值有四个_blank :表示打开一个全新的页面(新窗口)_self:替换本页面(本窗口)_top:(整个浏览器窗口)_parent:(父窗口)*还有一个就是在target值中直接写对应的那个frame的名字.c.html:<body bgcolor="gray"><!--silver浅灰--><!--gray深灰-->歌词大全</body>其它页面Frameset的综合小案例:结构示意图:案例all.html<frameset rows="20%,*"><frame src="top.html" scrolling="no"/><frameset cols="20%,*"><frame src="left.html" noresize frameborder="0" /><frame src="right.html" name="myframe" frameborder="0"/></frameset></frameset>top.html<img src="111.JPG"/>left.html<body bgcolor="pink"><ul><li><a href="right.html" target="myframe">青花瓷</a></li><li><a href="right.html" target="myframe">当兵的人</a></li></ul></body>right.html<body bgcolor="silver">歌词大全</body>晚上的练习:1.按照笔记走一遍2.作业2.1做一个自己的网页，显示自己的基本信息：姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还记得吗？）2.2.普通邮箱iframe的使用大连迪派有时我们需要，在一个含有<body>的页面嵌入另外一个页面，形成画中画的效果,怎么处理->iframe元素(浮动窗口)入门案例iframe.html<html><body><h1>hello,world</h1><a href="" target="iframe1">连接到taobao</a><br/><a href="kk.html" target="iframe1" >连接到kk.html</a><br/><iframe name="iframe1" src="" width="500px" height="400px" /><iframe src="" width="400px" height="400px" /></body></html>表单元素为什么需要？看一个图:从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素(常见输入框、单选框、复选框、文本域、密码框、上传文件。
HTML的表格、表单和框架表格元素<table></table>表格是由table标签定义的，有以下⼏个属性：width：宽度加px是以像素为单位，加百分⽐是以百分⽐放⼤；border：设置边框粗细；cellspacing：设置单元格与table边框的距离；cellpadding设置单元格与单元格之间的距离；bordercolor：设置边框颜⾊。
<tr></tr>表格的⾏<td></td>表格的列，有以下⼏个属性：width：宽度； height：⾼度；align：⽔平对齐⽅式；valign：垂直对齐⽅式；bgcolor：背景颜⾊；rowspan：上下合并； colspan：左右合并。
align有以下⼏个属性：left：左； right：右；center：居中；valign有以下⼏个属性：top：上；bottom下；middle：中间；<th></th>通常做表头<table border="1" cellspacing="0" cellpadding="" width="490"><tr><td align="center" valign="middle" width="70" height="40">姓名</td><td width="70"></td><td align="center" valign="middle" width="70">性别</td><td width="70"></td><td align="center" valign="middle" width="70">出⽣年⽉</td><td width="70"></td><td width="70" rowspan="4"></td></tr><tr><td align="center" valign="middle" height="40">民族</td><td></td><td align="center" valign="middle">政治⾯貌</td><td></td><td align="center" valign="middle">⾝⾼</td><td></td></tr><tr><td align="center" valign="middle" height="40">学制</td><td></td><td align="center" valign="middle">学历</td><td></td><td align="center" valign="middle">户籍</td><td></td></tr><tr><td align="center" valign="middle" height="40">专业</td><td></td><td align="center" valign="middle" colspan="2">毕业学校</td><td colspan="2"></td></tr></table><table border="" cellspacing="0" cellpadding="" width="490"><tr><th height="40">技能、特长或爱好</th></tr></table><table border="" cellspacing="0" cellpadding="" width="490"><tr><td align="center" valign="middle" width="70" height="40">外语等级</td><td width="140"></td><td align="center" valign="middle" width="70">计算机</td><td width="210"></td></tr></table>表单元素<form></form>标签定义表单有以下⼏个属性：action：提交给哪个页⾯ method：数据提交的⽅式（ get：显⽰提交 post：隐式提交）target：页⾯打开⽅式（ _blank：在新窗⼝打开页⾯ _self：在⾃⾝的页⾯打开）⽂本类⽂本框<input type="text" name="uid" id="" value="" placeholder="请输⼊⽤户名"/>密码框<input type="password" name="pwd" id="" value="" placeholder="请输⼊密码"/>⽂本域<textarea rows="10" cols="10"></textarea>隐藏域<input type="hidden" name="hid" id="" value="123" />⽂本框与密码框的区别是tpye属性不⼀样，form传值时，都是以name = value 的形式去传值。
Html 中表单、框架、样式表知识总结表单：表单的标签是<input>,有多种类型<type>:（text、password、radio、checkbox、submit、reset、botton）1.text表单，如<input type="text" >;建立的是一个文本输入框,属性有最多输入值：maxlength；默认内容：value；还提示用户输入：placeholder="请输入"；文本宽度：size。
2.Password表单，如<input type="password" >;建立密码表单，输入内容为*。
其他属性和text表单相同3.radio表单：单选框，默认选中：checked="checked"，要给其设置value值，且name必须相同；如性别：<input name="1" type ="radio" value="male" checked>男<input name="1" type ="radio" value="female" >女4.checkbox表单：多选框，属性与radio相同5.submit表单：提交按钮，会引起页面跳转需要页面跳转语句（form），属性有value6.reset表单：重置按钮，属性有value7.botton表单：普通按钮，它的属性也有valueform标签：页面跳转，跳转到哪（action），什么样的方法跳转（method=POST/GET），form有结束标签</form>select标签：下拉框表单，select下拉框要有可以选择的值，用option 来表示。
ASP 表单和框架表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。
一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交（Submit）操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的ASP或者CGI等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。
使用框架结构设计的HTML文件，能够将整个窗口分成几个独立的小窗口，每一个窗口可以分别载入不同的文件，并且各窗口之间还可以进行相互的操作。
1．表单标记<form></form>标记对用来创建一个表单，即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。
<form>标志具有action、method和target属性，各属性如下：●Method 设定在表单传输的数据时到Web服务器的方法，有两种方法：get和post。
●Action 为了能接受浏览者所发送出的数据，在Web服务器内必须有一个服务程序来接收。
而Action属性则可以指定接收表单数据的程序所在地址。
●target 用来指定目标窗口或者目标帧。
可以使用<input type="">标记定义一个用户输入区域，用户可在其中输入信息。
此标记必须放在<form></form>标记对之间。
<input type="">标记共提供了8种类型的输入区域，具体是哪一种类型由type属性来决定，如表8-3所示。
表8-3 8种类型的输入区域字。
这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。
服务器就是通过调用某一输入区域的名字的value属性来获得该区域的数据的。
而value属性是另一个公共属性，它可用来指定输入区域的缺省值。
使用<select></select>标记对可以创建一个下拉列表框或者可以复选的列表框。
