WEB程序设计之HTML（二）

关注

原创最新推荐文章于 2026-04-28 12:00:00 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

使用下拉列表实现个人信息档案的制作（select标签和option标签的使用）使用下拉列表实现个人信息档案的制作效果展示代码HTMLCSS 效果展示代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>study34</title> <link href="main.css" rel="stylesheet"> </head> <body> < 阅读详情

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>