JSP可以认为是加上了Java代码块的HTML文件，常常和CSS，JS结合使用，下面是一个JSP的基本的例子。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.lang.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%-- meta是元数据，用于描述网页的信息 --%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%-- title中的信息用于显示网页的标题栏 --%>
<title>HTML示例</title>
<%-- css的内部样式表,p.mystyle1适用于段落标记p，.mystyle2可适用于多种标签--%>
<style type = "text/css">
p.mystyle1{font-size:40px;color:#dd44aa;text-algin:center}
.mystyle2{color:#ff44aa;text-algin:center}
</style>
<%-- css的外部样式表,要能找到m1.css文件 --%>
<link href = "m1.css" rel ="stylesheet" type = "text/css">
<%-- css样式表优先级，内嵌css>内部css>内嵌css --%>
</head>
<%-- body的可选属性有bgcolor="red" text ="yellow" backgroud ="aa.jpg" bgproperties = "fixe" 等--%>
<body>
<%--html对字母大小写是不敏感的 --%>
<%-- 一些基本的html标签 <p>段落标签，<br>换行 ,<hr>水平分割线，<pre>之间的段落会被原样的显示，用于段落结构复杂的情况，<sup>上标,<sub>下标，用于指数形式，font用于字体--%>
<%--下面是展示信息的标签实例，colspan跨几列，rowspan跨几行 --%>
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<br/>
<%--target的属性有_blank,_self,_parent,_top，用于窗体分割时，指定在哪个窗口显示 --%>
<a href="http://www.baidu.com" target="_blank">在新窗口打开百度</a><br/>
<%--超链接设置锚点，在页面间指定位置跳转，也可以跳到其他网页的指定位置，jdk文档 --%>
<a name = "p1">点击下面的超链接将跳转到这里</a>
<a href = "#p1">跳转到上面锚点的位置</a>
<br/>
<img alt="图片的替代文字，图片不能显示时使用" src="image/addSubgraph.gif" border ="1"/>
<%--图片的src也可以使用src="<%=request.getContextPath()%>imageaddSubgraph.gif"，如果是IDE环境，WebContent目录是不需要加上的，否则反而会找不到文件 --%>
<%--下面是收集用户输入的标签实例 --%>
<%--form表单的提交方式由post和get 2种，get会将参数加到URL中，post则不会，更加安全，form是html中重要的标签 --%>
<form action="HtmlLabel.jsp" method="post" name="form" >
用户名：<input type="text" name="name" width="20"><br>
密码 ： <input type="password" name ="password" width="20"><br>
性别：<input type= "radio" name = "sex" value ="男">男
<input type= "radio" name = "sex" value ="女">女<br>
出生日期: <select name = "birth">
<option value="0">请选择</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
</select><br>
兴趣：<input type= "checkbox" name = "habit" value = "1">音乐
<input type= "checkbox" name = "habit" value = "2">动漫
<input type= "checkbox" name = "habit" value = "3">电影<br>
<%--input还有一种类型file，可用于上传文件,form要加上属性enctype ="multipart/form-data" --%>
<input type ="submit" value ="确定" onclick="test()">
<input type ="reset" value ="取消">
</form>
<%--解决form的乱码问题，采用post的提交方式，加上request.setCharacterEncoding("UTF-8");--%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
String sex = request.getParameter("sex");
String birth = request.getParameter("birth");
String habit = request.getParameter("habit");
%>
<br><br>
你所输入的信息是：<br>
用户名：<%=name %><br>
密码：<%=password %><br>
性别：<%=sex %><br>
出生日期：<%=birth %><br>
兴趣：<%=habit %><br>
<%-- frameset可以在一个浏览器中显示多个html页面,结合标签a的target属性，在指定窗口显示，类似于swing的Jsplitpanel --%>
<%-- embed标签可以在浏览器中嵌入视频，音频文件，flash等多媒体文件，要求本机已经安装相应的程序 --%>
<!-- javascript简单实例，可以单写成.js的文件，使用src =""进行引用 -->
<!-- javascript中的内置对象包括：window,navigator,screen,histroy,location,document -->
<!-- window对象可用于打开新的窗口等操作 -->
<!-- navigator对象可用于读取浏览器的信息 -->
<!-- screen对象可用于读取屏幕的高，宽等 -->
<!-- histroy对象可用于控制浏览器的前进后退等 -->
<!-- location对象可用于控制页面的跳转 -->
<!-- document对象就是整个html对象 -->
<script language="javascript">
function test(){
var name = document.forms[0].name.value;
if(name.length>5){
alert("max length is 5");
}
}
</script>
<!-- window对象示例,window name不能有空格，否则无法显示 -->
<script language="javascript">
var win;
function openwin(){
win = window.open("http://www.baidu.com", "newwindow", "width=300,height=200");
}
</script>
<br><input type="button" name = "createwin" value ="创建窗口" onclick="openwin()">
<!-- window对象示例,用于显示对话框，alert，window.confirm，window.prompt -->
<script language="javascript">
function confrimDialog(){
if(window.confirm("确定提交吗？"))
alert("已提交");
else
alert("已取消");
}
</script>
<br><input type="button" name = "confrimDialog" value ="提交" onclick="confrimDialog()">
<!-- 利用window动态地创建网页 -->
<script language="javascript">
function createActiveHtml(){
var content = "<html><head><title>动态创建的网页</title></head>";
content += "<body>这个网页是动态生成的</body></html>";
var newwindow = window.open();
newwindow.document.write(content);
newwindow.document.close();
}
</script>
<br><input type="button" name = "createActiveHtml" value ="动态创建网页" onclick="createActiveHtml()">
<!-- location对象控制跳转 -->
<script language="javascript">
function location(){
window.location.href = "http://hao123.com";
}
</script>
<br><input type="button" name = "location" value ="跳转页面" onclick="location()">
<%--下面是css简单示例，级联样式表 --%>
<%-- css又分为内嵌样式表，内部样式表，外部样式表，下面都是内嵌样式表，用于标签内，style --%>
<%-- 使用css内部样式表 --%>
<p class = "mystyle1">该文本将使用内部样式表</p>
<%--div和span用于css的渲染，div是块级别渲染，默认会独占一行。span是行内渲染，可以和其他的元素同在一行 。这也不是绝对的，如下--%>
<%--<div style="display:inline">inline</div>可以和其他的元素同在一行 --%>
<%--<span style="display:block">block</span>会独占一行 --%>
<%--下面文字缩进2个字符还未实现 --%>
<div align="left">字体属性设置</div>
<span style="font-family:幼园;font-style:italic;font-weight:bold;font-size：10pt">幼园，斜体，黑体</span><br>
<div align="left">背景颜色设置</div>
<span style="color:red;background-color: yellow;text-align:left;text-ident =2em">字体红色，背景黄色，首行缩进2字符</span><br>
<%--设置鼠标的显示样式 --%>
<div style="font-family:宋体;font-size：10pt">
<span style="cursor: hand">手形状</span>
<span style="cursor: move">移动</span>
<span style="cursor: ne-resize">反方向</span>
<span style="cursor: wait;">等待</span>
<span style="cursor: help;">求助</span>
<span style="cursor: text;">文本</span>
<span style="cursor: crosshair;">十字</span>
<span style="cursor: s-resize;">箭头朝下</span>
</div>
<%--css的定位提供了除table之外的另一种定位方法.postion的属性有absolute,relative,static,应该如下的使用嵌套关系 --%>
<div style="background:#FFFFFF; position:relative; 100px;height:30px;">
111
<div style="background:#FFFFFF;position:absolute;100px;height:20px;left:10px;">
222
</div>
</div>
<%--javscript+css实现下拉菜单 --%>
<script language="javascript">
function showmenu(m){
if(m == "menu1"){
document.getElementById("menu1").style.visibility="visible";
document.getElementById('menu2').style.visibility="hidden";
document.getElementById('menu3').style.visibility="hidden";
}else if(m == "menu2"){
document.getElementById("menu2").style.visibility="visible";
document.getElementById('menu1').style.visibility="hidden";
document.getElementById('menu3').style.visibility="hidden";
}else if(m == "menu3"){
document.getElementById("menu3").style.visibility="visible";
document.getElementById('menu1').style.visibility="hidden";
document.getElementById('menu2').style.visibility="hidden";
}
}
function hidemenu(){
document.getElementById('menu1').style.visibility="hidden";
document.getElementById('menu2').style.visibility="hidden";
document.getElementById('menu3').style.visibility="hidden";
}
</script>
<%--位置外侧使用relative，内侧用absolute，absolute是相对于外侧的方框而定的 --%>
<div style ="position:relative;220px;height:100px;">
<table onmouseout="hidemenu()">
<tr >
<td onmousemove="showmenu('menu1')" >菜单一 </td>
<td onmousemove="showmenu('menu2')" >菜单二 </td>
<td onmousemove="showmenu('menu3')" >菜单三 </td>
</tr>
</table>
<div id ="menu1" onmousemove="showmenu('menu1')" onmouseout="hidemenu()" style ="position:absolute;100px;height:50px;left:0px;visibility:hidden">
<span>子菜单一</span><br>
<span>子菜单二</span><br>
<span>子菜单三</span><br>
</div>
<div id ="menu2" onmousemove="showmenu('menu2')" onmouseout="hidemenu()" style ="position:absolute;left:10;top:40;left:70px;visibility:hidden">
<span>子菜单一</span><br>
<span>子菜单二</span><br>
<span>子菜单三</span><br>
</div>
<div id ="menu3" onmousemove="showmenu('menu3')" onmouseout="hidemenu()" style ="position:absolute;left:20;top:40;left:140px;visibility:hidden">
<span>子菜单一</span><br>
<span>子菜单二</span><br>
<span>子菜单三</span><br>
</div>
</div>
<form action="forward.jsp" method="post">
用户名：<input type="text" name="username" width="20"><br>
密码 ： <input type="password" name ="userpassword" width="20"><br>
<input type="submit" value="提交">
</form>
<!-- jsp中的include用于引入，分为静态引入和动态引入，下面的方式为动态引入，也可以使用<%@include file ="text/textOutput.txt" %>是静态引入-->
<!-- 静态引入不会去检查引用页面的内容是否发生变化，动态引入则会去检查。静态引用在编译期执行，动态引用在执行期执行 -->
<jsp:include page="text/textOutput.txt" flush="true" ></jsp:include><br>
<jsp:include page="index.jsp" flush="true" ></jsp:include><br>
<!-- forward和redirect的区别。forward只是把请求转到新页面，URL中显示还是自身。redirect是把request和response都转到新的页面，URL中显示的是新页面 -->
<!-- request.getRequestDispatcher("resultJsp.jsp").forward(request, response); -->
<!-- response.sendRedirect("resultJsp.jsp"); -->
<!-- forward中可以加上param参数 -->
<!-- <jsp:forward page="index.jsp">
<jsp:param value="note" name="note"/>
</jsp:forward>-->
实现图片下载功能
<a href="downImage.jsp?fileName=haha.jpg&filePath=/image/addSubgraph.gif"><img alt="" src="image/addSubgraph.gif"/></a>
</body>
</html>
downImage.jsp的代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String filePath =request.getParameter("filePath");
String fileName = request.getParameter("fileName");
if(fileName!=null&&filePath!=null){
response.setContentType("application/x-download");
response.addHeader("Content-Disposition","attachment;filename=" + java.net.URLEncoder.encode(fileName,"UTF-8"));
try{
out.clear();
out = pageContext.pushBody();
}catch(Throwable e){
e.printStackTrace();
}
try{
RequestDispatcher dis = application.getRequestDispatcher(filePath);
dis.forward(request,response);
}catch(Throwable e){
e.printStackTrace();
}finally{
response.flushBuffer();
}
}
%>
</body>
</html>