前端基础系列（二）HTML基础下
程序员文章站
2022-04-29 17:20:48
...
一、框架标签的简单使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架集标签</title>
</head>
<frameset cols="25%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</html>运行结果：
二、框架标签应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站后台系统显示页面</title>
</head>
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.html" />
<frame name = "right" />
</frameset>
</frameset>
</html>left.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<a href="right.html" target="right">会员管理</a><br />
<a href="#">品牌管理</a><br />
<a href="#">商品管理</a><br />
<a href="#">分类管理</a><br />
<body>
</body>
</html>right.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
所有用户信息
</body>
</html>运行结果：
三、HTML表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
用户名：<input type="text" name="username" placeholder="请输入用户名" size="40px" maxlength="6"/><br />
密码：<input type="password" name="password"/><br />
确认密码：<input type="password" name="repassword"/><br />
性别：<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女<br />
爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动"/>打电动
<input type="checkbox" name="hobby" value="写代码"/>写代码<br />
头像：<input type="file" name="file"/><br />
籍贯：<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍：
<textarea name="自我介绍"></textarea><br />
提交按钮：<input type="submit" value="注册"/><br />
普通按钮：<input type="button" value="zhuce"/><br />
重置按钮：<input type="reset" />
</form>
</body>
</html>运行结果：
四、案例注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px"/>
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px"/>
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50px">
<td bgcolor="black">
<a href="#"><font size="5" color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴香包</font></a>
<a href="#"><font color="white">家用电器</font></a>
</td>
</tr>
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<form action="#" method="get">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40">
<td colspan="2">
<font size="4">USER</font>   REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="35px"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="35px"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td><input type="password" name="repassword" size="35px"/></td>
</tr>
<tr>
<td>
Email
</td>
<td><input type="text" name="email" size="35px"/></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" name="username" size="35px"/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yzm"/>
<img src="../img/yanzhengma.png"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="../img/footer.jpg"/>
</td>
</tr>
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2018 火之意志 版权所有
</p>
</td>
</tr>
</table>
</form>
</body>
</html>运行结果：
转载请标明出处，原文地址：https://blog.csdn.net/weixin_41835916
如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。
上一篇： Apache反向代理Tomcat
下一篇： Struts2--非表单标签