在这两天的视频和实践练习中，逐步掌握运用HTML和CSS的一些基本技术来实现用户注册页面等类似界面的简单构建，其中所学到的一些知识都已经在下面的代码中用注释标出。当然，还有很多常用的，由于时间、篇幅等原因未能标出，但这些代码在很多的学习网站上都可以很轻易的查阅到，因此便不过多赘述。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</script>
<html>
<head>
<title>注册界面</title>
</head>
<body>
<!-- 提交 ， method为提交方式，get和post-->
<form action = "#" method = "get"></form>
<!-- 字号h1-5 -->
<h2 align="center">请注册</h2>
<!-- 下划线及格式 -->
<hr />
<hr size = "10"/>
<hr size = "10" color = "red"/>
<!-- 字体设置 -->
<center><font color = "蓝色" face = "华文楷体" > 注册界面</font></center>
<!-- 隐藏字段 -->
隐藏 字段：<input type = "hidden" name = "id" /> <br />
<form name="form1" action="register_confirm.jsp" method="post" onsubmit="return isValidate(form1)">
<table align="center">
<tr>
<!--文本输入 text , 密码password ，单选radio, 多选 checkbox, name属性取值唯一-->
<td> 用户 ID：</td>
<td><input type="text" name="userid">6-8 位 </td>
</tr>
<tr>
<td> 用户名：</td>
<td><input type="text" name="username">2-10 位</td>
</tr>
<tr>
<td>头像：</td>
<td> <input type = "file" name = "touxiang"/> </td>
</tr>
<tr>
<td> 口令：</td>
<td><input type="password" name="userpass">6-8 位，不能与用户 ID 相同</td>
</tr>
<tr>
<td> 确认口令：</td>
<td><input type="password" name="userpass2"></td>
</tr>
<tr>
<td>性别：</td>
<!-- 提交的为value中内容 取值任意-->
<td><input type = "radio" name = "sex" value = "男"/ checked = "checked">男</td>
<td><input type = "radio" name = "sex" value = "女"/>女</td>
</tr>
<tr>
<td> 生日：</td>
<td><input type="text" name="birthday">格式为：1988-1-1</td>
</tr>
<tr>
<td> 学历：</td>
<td>
<input type="radio" name="degree" value="专科">专科
<input type="radio" name="degree" value="本科" checked>本科
<input type="radio" name="degree" value="硕士研究生">硕士研究生
<input type="radio" name="degree" value="博士研究生">博士研究生
<input type="radio" name="degree" value="其他">其他
</td>
</tr>
<tr>
<td> 地区：</td>
<td>
<select name="local">
<option value="华东">华东</option>
<option value="华南">华南</option>
<option value="华北">华北</option>
<option value="东北" selected = "selected">东北</option>
<option value="东南">东南</option>
<option value="西南">西南</option>
<option value="西北">西北</option>
<option value="华中">华中</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td> <input type = "checkbox" name = "hobby" value = "钓鱼" />钓鱼</td>
<td> <input type = "checkbox" name = "hobby" value = "打游戏" />打游戏</td>
<td> <input type = "checkbox" name = "hobby" value = "写代码" />写代码</td>
</tr>
<tr>
<td> E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td> 地址：</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td> 电话：</td>
<td><input type="text" name="phone"> 数字和连字符，例如 88223322-123</td>
</tr>
<tr>
<td> 备注：</td>
<td> <textarea rows="8" name="comment" cols="40"></textarea></td>
</tr>
<!-- 提交按钮， 重置按钮，普通按钮 -->
<!-- 按钮不需要name属性 -->
<tr>
<td> <input type="reset" value="重置"></td>
<td> <input type="submit" value="提交"></td>
<td><input type = "button" value = "zhuce" /></td>
</tr>
<table>
</form>
</body>
</html>
</body>
</html>
下面是CSS选择器的应用
一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<!--
CSS语法和规范：
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
-->
<style>
/* 元素选择器 */
div{
font-size:30ps;
color:blue;
}
/* 类选择器 */
.div2{
font-size:30px;
color:pink;
}
/* id选择器 */
#div4{
font-size:40px;
color:gold;
}
/* 属性选择器 */
input[type = 'text']{
background-color:red;
}
input[type = 'password']{
background-color:blue;
}
</style>
</head>
<body>
<div>
哈哈哈哈11
</div>
<div>
呵呵呵呵22
</div>
<div>
哈哈哈哈33
</div>
<div>
呵呵呵呵44
</div>
<div class = "div2">
哈哈哈哈22
</div>
<div class = "div2">
哈哈哈哈33
</div>
<div id = "div4">
哈哈哈哈44
</div>
<div>
呵呵呵呵44
</div>
用户名： <input type = "text" name = "usename"/><br />
密码： <input type = "password" name = "password"/><br />
</body>
</html>
二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
/* 层级选择器 */
div p{
font-size:30ps;
color:blue;
}
</style>
</head>
<body>
<div>
<p>
呵呵呵呵22
</p>
</div>
<div>
<p>
哈哈哈哈33
</p>
</body>
</html>
来源：https://www.cnblogs.com/fwk123/p/12256252.html