1.用户注册页面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<link rel="stylesheet" href="./css/用户注册.css">
</head>
<body>
<form action="#" method="post">
<table width="300" border="0" cellspacing="1" cellpadding="2">
<tr class="box4">
<td class="box1" colspan="2">用户注册</td>
</tr>
<tr class="box4">
<td class="box2">用户密码</td>
<td class="box3">
<input type="text" name="username" id="username" maxlength="20" size="15">
</td>
</tr>
<tr class="box4">
<td class="box2">密码</td>
<td class="box3">
<input type="text" name="passward" id="passward" maxlength="20" size="15">
</td>
</tr>
<tr class="box4">
<td class="box2">性别</td>
<td class="box3">
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr class="box4">
<td class="box2">爱好</td>
<td class="box3">
<input type="checkbox" name="hobby" value="写作">写作
<input type="checkbox" name="hobby" value="听音乐">听音乐
<input type="checkbox" name="hobby" value="体育">体育
</td>
</tr>
<tr class="box4">
<td class="box2">省份</td>
<td class="box3">
<select name="province">
<option value="shanxi">陕西省</option>
<option value="shannxi">山西省</option>
<option value="henan">河南省</option>
</select>
</td>
</tr>
<tr class="box4">
<td class="box2">自我介绍</td>
<td class="box3">
<textarea name="introduce" cols="25" rows="5"></textarea>
</td>
</tr>
<tr class="box4">
<td class="box1" colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>运行结果：
2.QQ注册页面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ注册</title>
<link rel="stylesheet" href="./css/用户注册.css">
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td><img src="./img/qq1.png" alt="QQ注册"></td>
<td>
<table width="1200">
<tr>
<td width="400"></td>
<td></td>
<td></td>
<td style="text-align: right;" width="400">
<a href="#" class="box5" style="color: rgb(235, 44, 76);">QQ靓号</a>
<select name="language" id="language" style="border: none;">
<option selected>简体中文</option>
<option>English</option>
</select>
<a href="#" class="box5" style="color: black;">意见反馈</a>
</td>
</tr>
<tr style="height: 45px;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<h1 style="width: 220px;">欢迎注册QQ</h1>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<div style="font-size: 20px;width: 300px;display: inline-block;">每天一点，乐在沟通。</div>
<a href="#" class="box5" style="display: inline-block;text-align: right;">
<div style="font-size: 20px;color: #2080e7; width: 190px;display: inline-block;text-align: right;">免费靓号</div>
</a>
</td>
<td></td>
</tr>
<tr style="height: 45px;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="text" name="username" id="username" required placeholder="昵称"
size="70"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="password" name="passward" id="passward" required placeholder="密码"
size="70"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<select name="tel" id="tel" style="width: 150px;">
<option selected>+86</option>
<option>+80</option>
</select>
<input type="text" name="tels" id="tels" required placeholder="手机号码" style="width: 341px;">
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><small>可通过该手机号找回号码</small></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="image" src="./img/注册按钮.png" alt="按钮" width="500px"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<a href="#" class="box5" style="color: black;"><input type="checkbox" name="argee"
id="argee" value="同意" checked>我已阅读并同意相关服务条款和隐私政策</a>
</td>
<td></td>
</tr>
<tr>
<td style="height: 100px;"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" style="text-align: center;">Copyright 1998-2020Tencent All Rights Reserved
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>运行结果：
3.QQ登录页面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ登录</title>
<!-- <style>
* {
border: 1px solid rgb(0, 255, 34);
}
</style> -->
<link rel="stylesheet" href="./css/用户注册.css">
</head>
<body>
<form action="#" method="post">
<table style="width: 700px;" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="box6" style="width: 70px;"></td>
<td class="box6"><img src="./img/QQ.png"></td>
<td class="box6">
<div style="font-size: 30px;color: aliceblue;">QQ登录</div>
</td>
<td class="box6" style="width: 110px;"></td>
<td class="box6">
<div style="font-size: 20px;color: aliceblue;">QQ登录|授权管理|申请接入</div>
</td>
<td class="box6" style="width: 83px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="box10" style="width: 350px;" cellspacing="0" cellpadding="0">
<tr>
<td><div style="height: 5x;"></div></td>
</tr>
<tr>
<td>
<div class="box7">账号密码登录</div>
</td>
</tr>
<tr>
<td><div style="height: 5px;"></div></td>
</tr>
<tr>
<td>
<div class="box7">推荐使用<a href="#" class="box12">快速安全登录</a>防止盗号。</div>
</td>
</tr>
<tr>
<td><div style="height: 20px;"></div></td>
</tr>
<tr>
<td>
<div class="box7" style="height: 30px;"><input type="text" name="username" id="username" required
placeholder="支持QQ号/邮箱/手机号登录" style="width: 225px;"></div>
</td>
</tr>
<tr>
<td>
<div class="box7" style="height: 30px;"><input type="password" name="passward" id="passward" required
placeholder="密码" style="width: 225px;"></div>
</td>
</tr>
<tr>
<td>
<div class="box7" style="height: 30px;"><input type="image" src="./img/登录按钮.png" width="235px"></div>
</td>
</tr>
<tr>
<td><div style="height: 20px;"></div></td>
</tr>
<tr>
<td>
<div style="width: 140px;display: inline-block;"></div>
<div style="display: inline-block;">
<a href="#" class="box8">忘了密码?</a>
<div class="box9" style="font-size: 10px;">|</div>
<a href="#" class="box8">注册新账号</a>
<div class="box9" style="font-size: 10px;">|</div>
<a href="#" class="box8">意见见反馈</a>
</div>
<div style="width: 10px;display: inline-block;"></div>
</td>
</tr>
<tr>
<td><div style="height: 15px;"></div></td>
</tr>
</table>
</td>
<td>
<table style="width: 350px;" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td class="box11">
<div style="width: 30px;display: inline-block;"></div>
<div style="height: 30px;display: inline-block;">
<a href="#" class="box12">腾讯网</a>将获得以下权限：
</div>
</td>
</tr>
<tr>
<td class="box11">
<div style="width: 30px;display: inline-block;"></div>
<div style="height: 30px;display: inline-block;">
<input type="checkbox" name="权限" id="权限" value="同意" checked>全选
</div>
</td>
</tr>
<tr>
<td class="box11">
<div style="width: 30px;display: inline-block;"></div>
<div style="height: 30px;display: inline-block;">
<input type="checkbox" name="权限1" id="权限1" value="同意" checked>获得您的昵称、头像、性别及会员信息
</div>
</td>
</tr>
<tr>
<td>
<div style="height: 10px;"></div>
</td>
</tr>
<tr>
<td>
<div style="width: 30px;display: inline-block;"></div>
<div style="display: inline-block;">
授权后表明你已同意<a href="#" class="box12">QQ登录服务协议</a>
</div>
</td>
</tr>
<tr>
<td><div style="height: 50px;"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>运行结果：
css代码
.box1{
background-color: #ccc;
text-align: center;
}
.box2{
background-color: #e6e6e6;
text-align: right;
width: 91px;
}
.box3{
background-color: #e6e6e6
}
.box4{
height: 30px;
}
.box5{
text-decoration: none;
}
.box6{
background-color: rgb(81, 183, 236);
}
.box7{
text-align: center;
}
.box8{
color: black;
font-size: 10px;
text-decoration: none;
}
.box9{
display: inline-block;
}
.box10{
border-right: 1px dashed rgb(127, 127, 127);
}
.box11{
border-top: 1px dashed rgb(127, 127, 127);
}
.box12{
text-decoration: none;
color: rgb(81, 183, 236);
}
/* .box13{
cellspacing="0" cellpadding="0"
} */4.http协议中get和post两种请求的区别
在HTTP协议中，GET和POST是两种常见的请求方法，它们有以下区别：
1. 数据位置：GET请求将数据附加在URL的后面，以查询字符串的方式传输，例如：`http://www.example.com/path?key1=value1&key2=value2`。而POST请求将数据包含在请求体中进行传输，而不是暴露在URL上。
2. 数据长度限制：GET请求对传输数据的长度有限制。不同的浏览器和服务器有不同的限制，通常在几千个字符左右。而POST请求没有特定的数据长度限制。
3. 数据安全性：因为GET请求将数据暴露在URL上，所以对于包含敏感信息（比如密码）的数据，不适合使用GET请求，因为URL可能会被浏览器保存、书签化，或者由于网络日志记录而导致数据被泄露。相比之下，POST请求的数据包含在请求体中，相对安全一些。
4. 缓存：GET请求通常可以被浏览器缓存，因为GET请求是幂等的，即执行相同请求多次不会产生不同的结果。而POST请求则是非幂等的，默认情况下不会被缓存。
5. 请求语义：GET请求用于从服务器获取资源，不应对服务器状态产生副作用。而POST请求则用于向服务器提交数据，可能会对服务器状态产生影响，例如创建、更新、删除等。
总结来说，GET请求适合获取数据，对安全要求不高的情况，而POST请求适合传输大量数据，对安全性要求较高的情况。在实际应用中，根据需求选择合适的请求方法可以更好地满足需求。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
