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="data:image/addSubgraph.gif" border ="1"/>

<%--图片的src也可以使用src="<%=request.getContextPath()%>\image\addSubgraph.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>
密码 ：&emsp;<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; width:100px;height:30px;">
111
<div style="background:#FFFFFF;position:absolute;width: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;width:220px;height:100px;">
<table onmouseout="hidemenu()">
<tr >
<td onmousemove="showmenu('menu1')" >菜单一&nbsp;&nbsp;</td>
<td onmousemove="showmenu('menu2')" >菜单二&nbsp;&nbsp;</td>
<td onmousemove="showmenu('menu3')" >菜单三&nbsp;&nbsp;</td>
</tr>
</table>
<div id ="menu1" onmousemove="showmenu('menu1')" onmouseout="hidemenu()" style ="position:absolute;width: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>
密码 ：&emsp;<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="data: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>

　　

JSP基础篇的更多相关文章

  1. Jenkins: 基础篇（环境配置）

    自动化领域比较有影响力的开源框架jenkins,确实比较强大,易用.很多公司将其用来做持续即成CI(continuous integration).为了拓展和强化自己的软件设计生态系统,也将很久前使用 ...

  2. Spring+SpringMVC+MyBatis+easyUI整合基础篇（六）maven整合SSM

    写在前面的话   承接前文<Spring+SpringMVC+MyBatis+easyUI整合基础篇(五)讲一下maven>,本篇所讲述的是如何使用maven与原ssm项目整合,使得一个普 ...

  3. java基础篇---HTTP协议

    java基础篇---HTTP协议   HTTP协议一直是自己的薄弱点,也没抽太多时间去看这方面的内容,今天兴致来了就在网上搜了下关于http协议,发现有园友写了一篇非常好的博文,博文地址:(http: ...

  4. Java基础篇(JVM)——类加载机制

    这是Java基础篇(JVM)的第二篇文章,紧接着上一篇字节码详解,这篇我们来详解Java的类加载机制,也就是如何把字节码代表的类信息加载进入内存中. 我们知道,不管是根据类新建对象,还是直接使用类变量 ...

  5. Maven——基础篇

    Maven--基础篇 Maven出现前的问题 一个项目就是一个工程,而工程内一般是通过package包来分模块,比较用户模块,订单模块等,如果项目过于庞大,通过包模块来划分就不太合适,而应该拆分为模块 ...

  6. C#多线程之基础篇3

    在上一篇C#多线程之基础篇2中,我们主要讲述了确定线程的状态.线程优先级.前台线程和后台线程以及向线程传递参数的知识,在这一篇中我们将讲述如何使用C#的lock关键字锁定线程.使用Monitor锁定线 ...

  7. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  8. 2000条你应知的WPF小姿势 基础篇<15-21>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  9. ABP框架实践基础篇之开发UI层

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...

随机推荐

  1. 使用 SVG 和 JS 创建一个由星形变心形的动画

    序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...

  2. C#、.NET Framework、CLR的关系

    很多人没有将C#..NET Framework(.NET框架).CLR(Common Language Runtime,公共语言运行库)这三者之间的关系区分清楚,认为其版本号是一一对应的.其实不然,. ...

  3. sizeof与strlen的不同

    sizeof操作符的结果类型是size_t,它在头文件中typedef为unsigned int类型. 该类型保证能容纳实现所建立的最大对象的字节大小. sizeof是算符,strlen是函数. si ...

  4. pycharm中一直跳出updating indices...indexing

    直接比较明显的就是cpu直冲天际. pycharm是一款用了就不愿意换的ide,因为他的功能十分强大,同时也有着让人诟病的问题,就是他功能太全了,以至于有的功能你这辈子可能都不会去触碰,带来的直接问题 ...

  5. LitePal 之 DatabaseGenerateException

    DatabaseGenerateException错误 出现这个错误,是因为表结构的实体类中的属性(对应数据库中的字段) 与 SQL语法中的关键字冲突 . 另外 记录一下 配置litepal.xml文 ...

  6. .32-浅析webpack源码之doResolve事件流(4)

    流程图如下: 重回DescriptionFilePlugin 上一节最后进入relative事件流,注入地点如下: // relative plugins.push(new DescriptionFi ...

  7. Uva10129 - Play on Words 欧拉通路 DFS

    题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=105& ...

  8. vue学习笔记（四）——Vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  9. pjax 笔记

    PJAX的基本思路是,用户点击一个链接,通过ajax更新页面变化的部分,然后使用HTML5的pushState修改浏览器的URL地址,这样有效地避免了整个页面的重新加载.如果浏览器不支持history ...

  10. div流加载

    var hasNext=true;//触发开关,防止多次调用事件 var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度) var nScrollTop = 0; //滚动 ...