在这两天的视频和实践练习中，逐步掌握运用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>