常用表单标签：Form
表单标签中需要注意的地点：
<form action="process.html" method="get" onsubmit="return checkFrm();" >
1）//JS解决了表单验证问题，可以提高验证效率，减轻网络压力，提升服务器效率
2）get提交的属于以key/value形式存储在url上进行提交，保密性差
3）隐藏域，我们不想让客户看到，但是提交的时候需要一起提交到服务器端
4）onsubmit是表单提交前我们想完成什么样的操作都放在响应函数里面
5）被disabled的表单控件将不能被提交给服务器，readonly知识不能改动其原来的内容，但是是可以提交的
6）input类型可以是：text（文本类型） password（密码类型） checkbox（多选框 默认checked） radio（单选框）
7）select标签：下拉选择标签，与option标签项配套使用，selected（默认选中） multiple（多选） size（可见项数）
8）textarea：文本框标签 cols:列数，rows：行数
9）placeholder：占位符，配套手机上面使用，用于提示输入类似信息；
样式表标签
css:级联/层叠样式表（Casading style sheet）
a.为什么要使用css?
在传统网页编程中，用于控制内容显示的标签和正文标签相混合，使程序员对网页代码的阅读产生阻力，更多的查看影响显示效果的代码，而不能突出内容代码，导致网页代码不清晰。如果遇到显示风格的修改，将改动大量的页面数据。
随着网页应用的日益发展， 网页越来越复杂，为了更容易地进行网页代码的阅读，一场内容和显示相分离的革命开始，CSS技术就在这样的环境下诞生了。
使用样式表的优点：
a.内容和显示相分离，容易进行代码阅读，降低开发强度。
b.实现了类似函数的效果，可集中修改。
c.容易实现分享，css文件可以跨网页分享。
d.降低网络流量，提高网站负载。
e.提高渲染速度。
f.可以提供更多的显示控制能力。
简单表单网页实例：
表单验证.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
function $(id)
{
return document.getElementById(id);
}
//表单验证，
//do Something
function checkFrm()
{
var pwdVal=document.getElementsByName("stupwd")[0].value;
if(pwdVal==null||pwdVal.length==0)
{
alert("学生密码不能为空！");
return false;
}
return true;
}
//JS解决了表单验证问题，可以提高验证效率，减轻网络压力，提升服务器效率
/* 表单提交响应参数：
file:///C:/Users/%E5%BD%AD%E4%BB%95%E8%89%B3/Desktop/%E5%AD%A6%E4%B9%A0/%E7%AC%AC4%E5%91%A8%E8%AF%BE%E5%A0%82-%E5%B8%B8%E7%94%A8%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E5%92%8C%E6%A0%B7%E5%BC%8F%E8%A1%A8%E6%A6%82%E8%BF%B0/process.html
?regCode=JAHDSNC&stuno=123&stupwd=sss&stusex=m&stuhobby=CM&stuhobby=SW&stuphoto=chrome.dll&stuorigin=XM&stuorigin=Chinese&stumemo=12346&%E7%99%BB%E8%AE%B0=%E6%8F%90%E4%BA%A4
*/
</script>
</head>
<body>
<h3>新生登记</h3>
<!-- get提交的属于以key/value形式存储在url上进行提交，保密性差 -->
<form action="process.html" method="get" onsubmit="return checkFrm();" >
<!-- 这个是隐藏域，我们不想让客户看到，但是提交的时候需要一起提交到服务器端 -->
<div>
<input type="hidden" name="regCode" value="JAHDSNC">
</div>
<div>
<!-- 被disabled的表单控件将不能被提交给服务器，readonly知识不能改动其原来的内容，但是是可以提交的 -->
<span>学生学号:</span>
<input type="text" name="stuno" size="6"
maxlength="6" autofocus required>
</div>
<div>
<span>学生密码:</span>
<input type="password" name="stupwd" size="6" maxlength="6">
</div>
<div>
<span>学生姓名:</span>
<input type="radio" name="stusex" value="f">女
<input type="radio" name="stusex" value="m" checked>男
</div>
<div>
<span>学生爱好:</span>
<input type="checkbox" name="stuhobby" value="CM" checked>爬山
<input type="checkbox" name="stuhobby" value="SW">游泳
<input type="checkbox" name="stuhobby" value="RN">跑步
<input type="checkbox"
name="stuhobby" value="RD">阅读
</div>
<div>
<span>学生照片:</span>
<input type="file" name="stuphoto">
</div>
<div>
<span>学生籍贯:</span>
<select name="stuorigin">
<option value="ND">宁德</option>
<option value="XM" selected>厦门</option>
<option value="FZ">福州</option>
<option value="HH">怀化</option>
</select>
</div>
<div>
<span>学生专业:</span>
<select name="stuorigin" multiple size=3>
<option value="Math">数学专业</option>
<option value="Chinese" selected>语文专业</option>
<option value="English">英语专业</option>
<option value="Chemical">化学专业</option>
</select>
</div>
<div>
<span>备注说明:</span>
<textarea name="stumemo" cols="70" rows="6" placeholder="这个家伙很懒，什么都没写!..."></textarea>
</div>
<div>
<input type="submit" value="登记"/> <!-- 这种简易收口写法也是可以的 -->
<input type="reset" value="重置"/>
</div>
</form>
</body>
</html>
简单网页样式使用实例：
site.css
/*RGB色彩*/
div{
/*color:red;*/
color:yellow;
font-size:30px;
background-color:red;
text-decoration:underline;
display: inline-block;
}
what-css.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="site.css"> </style> </head> <body> <!-- <div><font color="red" size="30">福州大学</font></div> <div><font color="red" size="30">厦门大学</font></div> <div><font color="red" size="30">福建师范大学</font></div> <div><font color="red" size="30">福建师范大学</font></div> --> <div>福州大学</div> <div>厦门大学</div> <div>福建师范大学</div> <div>福建师范大学</div> </body> </html>another.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="site.css"> </head> <body> <div>江西财经大学</div> <div>浙江大学</div> </body> </html>selector.html 样式选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*男同学{
上衣：白寸衫；
裤子：蓝长裤；
鞋子：anta运动鞋；
}
*/
/*div 选择器 key1:value1;key2:value2;....keyn:valuen;*/
div:first-child{
color:red;
font-size:40px;
font-weight:bold;
}
span{
color:red;
font-size:40px;
}
</style>
</head>
<body>
<div>福州大学</div>
<div>厦门大学</div>
<div>福建师范大学</div>
<div>福建师范大学</div>
<span>明江小学</span>
<span>江狄小学</span>
</body>
</html>