HTML语言为超文本标记语言,是一种创建网页的标准标记语言,在所有的语言中还算比较容易学习的了,所以下面小编就介绍一下整个网页注册页面的实现方法。
一、对于新手而言,首先就是要了解html里面到底有什么,该怎样使用,大体上的代码如下:
<!DOCTYPE html>
<html>
<head> <!--定义头部-->
<meta charset = 'UTF-8'> <!--元素的使用,声明编码可使用中文,否则中文网页会乱码-->
<title>注册页面</title> <!--定义文档标题-->
</head>
<body> <!--定义体-->
</body>
</html>
编写完的整个文件用浏览器打开,就能够看到网页的初步模型了,当然只有标题,其他什么都没有,因为body里面没有任何内容。还有记住这是一个html文件。
二、然后呢,我们就进入真正的正题了,废话不多说,直接上代码。
<html>
<head>
<meta charset = 'UTF-8'>
<title>注册页面</title>
</head>
<body>
<div class = 'rg_layout'> <!--div标签一般与css结合使用,class和id优先级比较高-->
<div class = 'rg_left'>
<p id = 'p_user'>新用户注册</p>
<p id = 'p_register'>USER REGISTER</p>
</div>
<div class = 'rg_center'>
<div class = 'rg_form'>
<form action = "#" method = 'post'>
<table > <!--定义表单-->
<tr> <!--tr为表单的行-->
<td class = 'td_left'><label for = 'username'>用户名</label></td > <!--td为表单的单元格,label for为用户名作标记,点击用户名会自动跳转到输入框-->
<td class = 'td_right'><input type = 'text' name = 'username' id = 'username' placeholder = '请输入用户名'></td> <!--input为输入框,placeholder为输入框默认显示的内容-->
</tr>
<tr>
<td class = 'td_left'><label for = 'password'>密码</label></td >
<td class = 'td_right'><input type = 'password' name = 'password' id = 'password' placeholder = '请输入密码'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'Email'>Email</label></td >
<td class = 'td_right'><input type = 'Email' name = 'Email' id = 'Email' placeholder = '请输入邮箱'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'name'>姓名</label></td >
<td class = 'td_right'><input type = 'text' name = 'name' id = 'name' placeholder = '请输入姓名'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'tel'>手机号码</label></td >
<td class = 'td_right'><input type = 'text' name = 'tel' id = 'tel' placeholder = '请输入手机号码'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'gender'>性别</label></td >
<td class = 'td_right'><input type = 'radio' name = 'gender' value = 'male'>男
<input type = 'radio' name = 'gender' value = 'female'>女
</td>
</tr>
<tr>
<td class = 'td_left'><label for = 'birthday'>出生日期</label></td >
<td class = 'td_right'><input type = 'date' name = 'birthday' id = 'birthday'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'checkcode'>验证码</label></td >
<td class = 'td_right'><input type = 'text' name = 'checkcode' id = 'checkcode' placeholder = '请输入验证码'>
<img id = 'img_check' src = './timg.jpg' >
</td>
</tr>
<tr>
<td colspan = '2' align = 'center'><input id = 'btn_sub' type = 'submit' value = '注册'></td>
</tr>
</table>
</form>
</div>
</div>
<div class = 'rg_right'>
<p>已有账号?<a href = '#'>立即登陆</a></p> <!--a 为链接,href定义链接地址-->
</div>
</div>
</body>
</html>
写完代码的结果大致是这样子的:
没有任何的修饰,而且布局也只是在左上方,单一而且不美观,但是如果用上CSS就不一样了,就能极大提高用户的体验了。CSS指层叠样式表,主要功能就是美化页面,布局页面。主要的实现方法有两种,外部样式和内部样式,这两种都比较常见,但一般还是使用外部样式,外部样式可以极大提高工作效率,外部样式表通常储存在css文件中,内部样式表则储存在html文件中就可以了,这里便使用内部样式表实现了。对比一下就能看到CSS的好处。
一、首先就是CSS该怎样使用,那就直接上代码吧,代码里面有注释。
<style> <!--样式风格-->
<!--属性都是以键值对成对存在-->
*{ <!--定义样式里面所有-->
margin:0px; <!--各方向外部间距为0-->
padding:0px; <!--各方向内部间距-->
box-sizing:border-box; <!--定义边框大小固定,不会随着padding的改变而变化-->
}
body{
background:url(background.jpg) no-repeat center; <!--定义背景,图片不重复,居中-->
}
.rg_layout{ <!--自定义的当前目录下的class的名称-->
width : 900px;
height: 500px;
border: 8px solid #eeeeee; <!--边框颜色-->
background-color:white; <!--背景颜色-->
/*让div水平居中*/
margin:auto;
margin-top:15px;
}
.rg_left{
/*border:1px solid red;*/
float:left;
margin:15px;
}
#p_user{ <!--自定义的当前目录下的id的名称-->
color:#ffd026;
font-size:20px;
}
#p_register{
color:#a6a6a6;
font-size:20px;
}
.rg_center{
/*border:1px solid red;*/
float:left;
width:450px;
}
.rg_right{
/*border:1px solid red;*/
float:right;
margin:15px;
}
.rg_right > p:first-child{
font-size:15px;
}
.rg_right p a { <!--rg_right名称所对应的标签下的p标签下的a链接-->
color : pink;
}
.td_left{
width : 100px;
text-align:right;
height:45px;
}
.td_right{
padding-left:50px;
}
#username,#password,#Email,#name,#tel,#birthday,#checkcode{
width:251px;
height:32px;
border:1px solid #a6a6a6;
/**设置边框圆角*/
border-radius:5px;
padding-left:15px;
}
#checkcode{
width:110px;
}
#img_check{
height:32px;
width:130;
vertical-align:middle;
}
#btn_sub{
width:150px;
height:40px;
background-color:#ffd026;
border:1px solid #ffd026;
}
</style>
以上就是注册页面内部样式的伪代码,整个完整的代码如下:
<html>
<head>
<meta charset = 'UTF-8'>
<title>注册页面</title>
<style>
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
background:url(background.jpg) no-repeat center;
}
.rg_layout{
width : 900px;
height: 500px;
border: 8px solid #eeeeee;
background-color:white;
/*让div水平居中*/
margin:auto;
margin-top:15px;
}
.rg_left{
/*border:1px solid red;*/
float:left;
margin:15px;
}
#p_user{
color:#ffd026;
font-size:20px;
}
#p_register{
color:#a6a6a6;
font-size:20px;
}
.rg_center{
/*border:1px solid red;*/
float:left;
width:450px;
}
.rg_right{
/*border:1px solid red;*/
float:right;
margin:15px;
}
.rg_right > p:first-child{
font-size:15px;
}
.rg_right p a {
color : pink;
}
.td_left{
width : 100px;
text-align:right;
height:45px;
}
.td_right{
padding-left:50px;
}
#username,#password,#Email,#name,#tel,#birthday,#checkcode{
width:251px;
height:32px;
border:1px solid #a6a6a6;
/**设置边框圆角*/
border-radius:5px;
padding-left:15px;
}
#checkcode{
width:110px;
}
#img_check{
height:32px;
width:130;
vertical-align:middle;
}
#btn_sub{
width:150px;
height:40px;
background-color:#ffd026;
border:1px solid #ffd026;
}
</style>
</head>
<body>
<div class = 'rg_layout'>
<div class = 'rg_left'>
<p id = 'p_user'>新用户注册</p>
<p id = 'p_register'>USER REGISTER</p>
</div>
<div class = 'rg_center'>
<div class = 'rg_form'>
<form action = "#" method = 'post'>
<table >
<tr>
<td class = 'td_left'><label for = 'username'>用户名</label></td >
<td class = 'td_right'><input type = 'text' name = 'username' id = 'username' placeholder = '请输入用户名'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'password'>密码</label></td >
<td class = 'td_right'><input type = 'password' name = 'password' id = 'password' placeholder = '请输入密码'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'Email'>Email</label></td >
<td class = 'td_right'><input type = 'Email' name = 'Email' id = 'Email' placeholder = '请输入邮箱'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'name'>姓名</label></td >
<td class = 'td_right'><input type = 'text' name = 'name' id = 'name' placeholder = '请输入姓名'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'tel'>手机号码</label></td >
<td class = 'td_right'><input type = 'text' name = 'tel' id = 'tel' placeholder = '请输入手机号码'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'gender'>性别</label></td >
<td class = 'td_right'><input type = 'radio' name = 'gender' value = 'male'>男
<input type = 'radio' name = 'gender' value = 'female'>女
</td>
</tr>
<tr>
<td class = 'td_left'><label for = 'birthday'>出生日期</label></td >
<td class = 'td_right'><input type = 'date' name = 'birthday' id = 'birthday'></td>
</tr>
<tr>
<td class = 'td_left'><label for = 'checkcode'>验证码</label></td >
<td class = 'td_right'><input type = 'text' name = 'checkcode' id = 'checkcode' placeholder = '请输入验证码'>
<img id = 'img_check' src = './timg.jpg' >
</td>
</tr>
<tr>
<td colspan = '2' align = 'center'><input id = 'btn_sub' type = 'submit' value = '注册'></td>
</tr>
</table>
</form>
</div>
</div>
<div class = 'rg_right'>
<p>已有账号?<a href = '#'>立即登陆</a></p>
</div>
</div>
</body>
</html>
代码写完保存后打开,展示网页就是下面这样子的:
这样子看上去是不是好多了,就比较友好了,注册页面的网页也宣告完成了,学好html与css,让自己更进一步,加油!