html表单练习
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3cb5e5832d4cba399c2269297d46013e.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
邮箱地址:<input type="text" placeholder="请输入邮箱地址"/>@
<select name="email">
<option value="">163</option>
<option value="">126</option>
<option value="">yeah</option>
</select>
<br /><br />
密码:<input type="password" />
<br /><br />
性别:<input type="radio" name="gender"/>男
<input type="radio" name="gender" checked/>女
<br /><br />
验证码:<input type="text" />
<img src="img/yanzhengma" title="这是验证码" />
<br /><br />
<!--<input type="button" value=""/>-->
<button>免费获取验证码</button>
<br /><br />
备注:<textarea name="" id="" cols="30" rows="10"></textarea>
<br /><br />
<input type="checkbox" />同意<a href="#">"隐私条款"</a>和"隐私权相关政策"
<br /><br />
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
综合练习
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ce3f9b804874825942591e4d300cc294.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
body{
/*
* 只能设置文字在当前元素中水平的对齐方式,
* 也可以对行内元素和图片。
*/
text-align: center;
}
/*
* 在定义样式的时候一般不建议去使用ID名,
* ID名一般留给JS效果或者后台取数据
*/
.two{
color:#000;
}
.txt{
width:300px;
height:40px;
}
.box1{
margin-bottom: 10px;
}
.box1{
margin-top: 10px;
/*
* 下面的写法可以是固定的技巧
* 可以让一个已知宽度的盒子水平居中显示
* margin:100px auto;
*/
}
</style>
</head>
<body>
<img src="img/yanzhengma.jpg" alt="" />
<br />
<div class="box1">
<a href="">新闻</a>
<a href="" class="two">网页</a>
<a href="">贴吧</a>
<a href="">知道</a>
<a href="">音乐</a>
<a href="">图片</a>
<a href="">视频</a>
<a href="">地图</a>
</div>
<form action="" method="post">
<input type="text" class="txt"/>
<input type="submit" value="百度一下" class="btn"/>
</form>
<div class="box2">
<a href="">新闻</a>
<a href="" class="two">网页</a>
<a href="">贴吧</a>
<a href="">知道</a>
<a href="">音乐</a>
<a href="">图片</a>
<a href="">视频</a>
<a href="">地图</a>
</div>
<br />
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a3c2994efd5eba3417f2d98a415173cf.png)