WEB程序设计之HTML（二）

于 2014-10-28 19:35:49 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： WEB程序设计 文章标签： web html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aidpcx/article/details/40544627
版权
本文深入探讨了HTML中的表单标记，详细解释了GET和POST提交方式的区别，并提供了表单演示。此外，还介绍了如何创建框架网页，讲解了frameset和frame的用法，以及给出了水平分隔的框架网页实例。最后，提出了表单注册界面和框架网页的练习题供读者实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


WEB程序设计之HTML（二）



1.表单标记


2.get和post提交方式的区别：Get请求把表单的数据显式地放在URL中,并且对长度和数据值编码有所限制.Post请求把表单数据放在HTTP请求体中,并且没有长度限制.


3.表单演示

<span style="font-family:SimSun;font-size:18px;"><form action="" method="post">
<fieldset>
<legend>表单演示</legend>
<p>
姓名：<input type="text" name="username" />
</p>
<p> >密码：</label><input type="password" name="pwd" />
</p>
<p>
性别：
<label><input type="radio" name="sex" value="1" />男</label>
<label><input type="radio" name="sex" value="0" />女</label>
</p>
<p>
爱好：
<label><input type="checkbox" name="basketball" value="basketball" />篮球</label>
<label><input type="checkbox" name="football" value="football" />足球</label>
</p>
<p>
血型：
<select name="bloodtype" >
<option value="A">A型</option>
<option value="B">B型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
</select>
</p>
<p>
介绍
<textarea name="intor" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="b1.jpg" alt="搜索" />
<input type="button" value="自定义按钮" />
</fieldset>
 
</form></span>

演示效果：


4.框架网页

将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页

<frameset rows="" cols="">：框架网页集，rows为横向分隔，cols为纵向分隔，值可以是具体数值也可以是百分比，注意frameset标记是和body标记同级的标记，不能将frameset标记包含在body标记中，否则将无法看到框架网页的效果。

<frame name="" scr="">：指定每一个小窗口的名称和链接的网页，窗口的名称可以用于超级链接的target属性。


水平分隔两个窗口，每个窗口各占50%

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>框架窗口</title>
    </head>
    <frameset rows="50%,*">
    <frame src="http://www.baidu.com" />
    <frame src="http://www.bing.com" />
    </frameset>
    </html></span>

纵向分隔两个窗口，左边窗口宽度为200，右边窗口为剩余大小
 

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>框架窗口</title>
    </head>
    <frameset rows="100,*">
    <frame src="nav.html" name="nav" />
    <frame src="a.html" name="content" />
    </frameset>
    </html></span>

我们希望上面的窗口是导航，下面的窗口来显示内容，那么上面导航窗口的超级链接就应该这样写（nav.html）
 

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>导航</title>
    </head>
    <body>
    <ul>
    <li><a href="a.html" target="content">a文件</a></li>
    <li><a href="b.html" target="content">b文件</a></li>
    <li><a href="c.html" target="content">c文件</a></li>
    </ul>
    </body>
    </html></span>


------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

表单作业练习：

制作一个用户注册的界面如图所示，


参考代码1：


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<form action="#" method="post">	
<p>
<label for="username">姓名：</label><input type="text" name="username" id="username" />
</p>	
<p>
<label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" />
</p>
<p>
<label for="repwd">确认密码：</label><input type="password" name="repwd" id="repwd" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" /><label for="male">男</label>
<input type="radio" name="sex" id="female" /><label for="female">女</label>
</p>
<p>
<label for="email">邮箱：</label><input type="text" name="email" id="email" />
</p>
<p>
<label for="idtype">身份：</label>
<select name="idtype" id="idtype">
<option value="student">学生</option>
<option value="teacher">老师</option>
</select>
</p>
<p>
<label for="intro">介绍</label>
<textarea name="intor" id="intro" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="重填">
</p>
</form>
</body>


参考代码2：


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    </head>
    <body>
    <h1>用户注册</h1>
    <form action="#" method="post">	
    <p>
    <label for="username">姓名：</label><input type="text" name="username" id="username" />
    </p>	
    <p>
    <label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" />
    </p>
    <p>
    <label for="repwd">确认密码：</label><input type="password" name="repwd" id="repwd" />
    </p>
    <p>
    <label>性别：</label>
    <input type="radio" name="sex" id="male" /><label for="male">男</label>
    <input type="radio" name="sex" id="female" /><label for="female">女</label>
    </p>
    <p>
    <label for="email">邮箱：</label><input type="text" name="email" id="email" />
    </p>
    <p>
    <label for="idtype">身份：</label>
    <select name="idtype" id="idtype">
    <option value="student">学生</option>
    <option value="teacher">老师</option>
    </select>
    </p>
    <p>
    <label for="intro">介绍</label>
    <textarea name="intor" id="intro" cols="30" rows="10"></textarea>
    </p>
    <p>
    <input type="submit" value="注册">
    <input type="reset" value="重填">
    </p>
    </form>
    </body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>用户注册</title>
    <style type="text/css">
    <!--
    .STYLE2 {color: #0000FF}
    -->
    </style>
    </head>
    <body>
    <form action=""method="post">
    <th colspan="1" align="left" background="#0000FF"><span class= "STYLE2">用户注册<hr color="#0000FF"></span></th><br/>
    <p>
    <td>用户名            <input type="text" name="userName" size="12" maxlength="30"></td>
    <td>*</td>
    <br/>
    <td>密码                <input name="password1" type="password" size="12" maxlength="30"></td>
    <td>*</td>
    <br/>
    <td>确认密码        <input name="password2" type="password" size="12" maxlength="30"></td>
    <td>*</td>
    <br/>
    <td>性别               <input type="radio" name="radio1" size="12" maxlength="30">男<input type="radio" name="radio2" size="12">女</td>
    <td>*</td>
    <br/>
    <td>邮箱                <input type="text" name="touch" size="12" maxlength="50"></td>
    <td>*</td>
    <br/>
    <td>身份               
    <select name="cardnumber">
    <option value="stu_card" selected="selected">学生
    <option value="work_card">工人
    <option value="labbor_card">农民
    </select><td>
    <br/>
    <td>自我介绍</td><td><textarea name="word" rows=4 cols=30></textarea></td>
    <br/>
    <td>          <input type="submit" name="submer1" value="注册">
                   
    <input type="reset" name="reset1" value="重置" />
    </td>
    </p>
     
    </form>
    </body>
    </html>



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

框架作业练习：



参考代码：


1.主框架网页的html代码

<span style="font-family:SimSun;font-size:18px;">    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>使用框架案例</title>
    </head>
     
    <frameset rows="20%,80%">
    <frame src="html1.html" name="topFrame">
    <frameset cols="30%,70%">
    <frame src="html2.html" name="leftFrame">
    <frame src="html3.html" name="mainFrame">
    </frameset>
    </frameset>
    </html></span>

2.框架中顶部网页的html代码 

<span style="font-family:SimSun;font-size:18px;">    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>topFrame</title>
    </head>
     
    <body>
    <p align="center"><font face="宋体" color="#000000" size="5">HTML商业开发网站</p>
    </body>
    </html></span>

3.框架中左边网页的html代码 

<span style="font-family:SimSun;font-size:18px;">    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>leftFrame</title>
    </head>
     
    <body>
    <p><font face="宋体" color="#000000" size="5">第2章 HTML语言</p>
    <p><a href="a.html" target="content"><font face="宋体" color="#FF0000" size="3">2.1HTML 基础知识</a></p>
    <p><a href="b.html" target="content"><font face="宋体" color="#FF0000" size="3">2.2HTML 语言入门</a></p>
    </body>
    </html></span>

4.框架中右边网页的html代码 

<span style="font-family:SimSun;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>center_right</title>
</head>

<body>
    <p>
        <font face="宋体" color="#FF0000" size="5">    HTML语言是网页制作的基础，是初学者必学的内容。</font>
    </p>
</body>
</html></span>





评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值