建议放大到500%查看
看不清的话可以看文字版:
HTML
标记描述网页内容
语法规则:
1、不区分大小写
2、固定标签
3、标签成对出现,单标签
4、标签可以嵌套使用
5、属性的值必须使用双引号
常用标签
p&br&hr
p 表示段落,默认段落上下会有行间距;
br 是换行,自闭和标签;
hr 是横线;
a标签
可添加超链接标签;
<a href="123.com">默认为本页跳转 </a
标题标签H
<h1>1号字体最大</h1>
<h2>字体大小随着“h”后面的数字变大,而变小</h2>
<h6>在原始标签中6号为最小号</h6>
select标签下拉框
Input
Checkbox:多选框;
radio:单选框
filedset:获得一个有名字的边框
text:明文输入信息
password:密文输入信息
button:按钮
submit:提交
reset:重置
textarea:备注信息框
form:表单,设置submit、reset数据的范围,一般在一个form里的数据会被一起提交
table
ul:带点的列表
ol:带序号的列表
iframe标签
用来在页面的一个框体中展示url的网页内容
表单标签
1、<form>:表单标签,可以搜集用户的信息并提交给指定的服务器
2、<input>:用户输入标签
常用属性:
1、type:类型
text:文本框
password:密码框
checkbox:复选框,可以选择多个
radio:单选框,只能选择其一,但是要求拥有相同的name
button:按钮
submit:提交,结合<form>表单,将表单内的数据提交给action
reset:重置,结合<form>表单,清空表单的内容
2、值
name:为当前的标签命名,将来获取标签数据时,会用到
class:为当前标签起个类名,主要用在CSS中
value:值,标签的值,主要用在按钮上
checked:是否选中,h4支持checked,h5支持true或false
<select>:下拉框,实现多个元素的单选或复选,需要结合<option>使用
常用属性:
multiple:是否多选
name:名称
disabled:是否可用
4、<textarea>文本域,可以输入多行和多列数据
CSS
引入
1、元素内联:
在html的body段中,直接在标签头部属性块引入
<div style=‘key1:value1;key2:value2;’>元素内联</div>
2、页面嵌入:
在html的head段中的style块,集中引入
<head>
<style type="text/css">
</style>
</head>
3、外部引入:
将css单独写入一个文件,并将整个文件进入html中
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
选择器
1、标签选择器:
<style> div{ background-color:red; } </style>
2、id选择器:
id选择器,会去body块中的标签中找对应的id属性为“#”后面的id号的标签进行装饰;
CSS
<style>#name{ background-color:red; } </style>
body
<body>
<div id='name' > </div>
</body>
3、class选择器:
.bd{ background-color:red; }
<div class='bd'> </div>
class 选择器是最常用的一种选择器。
4、关联选择器(不常用)
5、组合选择器:(不常用)
input,div,p{ background-color:red; }
6、属性选择器:
input[type='text']{ width:100px; height:200px; }
就是在选择时,精确到标签的属性级,对属性名进行对应。
常用
width:宽度
height:高度
font字体
size:设置大小,以px为单位;
weight:粗细,100-800不等,可以自行测试;
family:设置字体
border :框体
position:相对位移
fixed:固定在屏幕某个位置,并且不随滚动条移动而移动;
absolute:固定在屏幕某个位置,但是随滚动条移动;
relative:本身木太大用处,一般跟absolute配合;
透明度
opacity:0.6
background:rgba(0,0,0,.6)
艺术字
<h1 style="text-shadow: 5px 5px 5px #FF0000;">华枝春满,天心月圆</h1>
<span style="color: rgba(0,0,0,0); text-shadow: 0px 0px 2px #8A2BE2;">
JAVASCRIPT
网页中引入javaScript三种方式:
1.使用<Script></Script>标签内部样式
2.使用外部js文件
3.直接在HTML标签中的行内样式。
.javaScript的作用
1.实现页面表单验证
2.实现页面交互特效
Js中String对象常用的方法:
- toString(包前不包后),2.toLowerCase();toUpperCase();
- charAt(index);返回在指定位置的字符,indexOf(str,index);指定字符串中首次出现的位置;split(str);将字符串分割为字符串数组
alert(“提示信息”);
Js语法:
1.区分大小写
2.注意变量,函数等命名规范
3.每行代码以分号结束
Js中的函数:
1.系统函数
ParseInt();转换为整数 45.9a转换为45;a6转换返回为NaN(Not a Number)
isNaN(判断是不是数字)
typeof(var);判断是什么数据类型
eval(“5+2”);计算表达式值
2.自定义函数
Function 函数名(){javaScript代码}
Function 函数名(参数1,参数2){javaScript代码 return 返回值(可选)}
Js中函数的调用:
- 事件名=“函数名(传递的参数值)“;
- 函数名(传递的参数值);
匿名函数:
Math对象:
Ceil();对数进行向上取整,ceil(25.5)=26;
Floor();向下取整,floor(25.5)=25;
Math.round(25.5);在原数的加0.5后向下取整
JSP
基本语法
一、JSP的声明(statement)
用来定义在产生的类文件中的类的属性和方法(成员变量)。可声明类(即是内部类)。
由于servlet是工作在多线程环境下,所以尽量不要在service方法体外声明成员变量。
<%!.....%> //声明时要加"!",属于类成员,最先加载,可写于任何位置;不加则是脚本的局部变量,必须调用前写。
二、JSP代码段(Scriptlet)
<% java代码 %>
是一段可以在处理请求时间执行的Java代码。可以产生输出,也可以是一些流程控制语句。
比较:
<%! int i=100;%> //成员变量
<% int i=101;%> //_jspService()方法中的局部变量
<%=i%> //同一文件里,局部变量优先
三、JSP表达式(expression)
<%=……%> // "="号
<%="Hello,JSP world!"%> //out.println("Hello,JSP world");
四、JSP指令(direction)
指令用于从JSP发送信息到容器上。用来设置全局变量,声明类,要实现的方法和输出内容等。
指令在JSP整个文件内有效。它为翻译阶段提供了全局信息。
语法
<%@......%> // "@"符号
指令包括:page、include、taglib
1.page指令
页面的语言、内容类型、字符集、页面编码
<%@page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%>
language:java唯一值,表示脚本中使用的编程语言
contentType:设置了内容的类型和静态页面的编码 (告诉浏览器以什么编码显示)
pageEncoding:页面本身的编码格式 (写页面时用的编码格式)
上面的代码等价于servlet里: response.setContentType("text/html; charset=gbk");
import:导入其他的包和类; 其中,JSP默认导入的包是java.lang.*
<%@page import="java.util.Date"%> //具体的包和类
<%@page import="java.sql.*"%> //包下的所有类
<%@page import="java.util.*, java.io.*, java.net.*"%> //连写,逗号分隔
2.include指令
把目标页面的内容包含到当前页面,产生页面叠加以后的输出效果 //相当于将两个页面合并;编译时就包含进来
<%@include file="foot.jsp"%> //可插入任意位置
servlet
servlet和servlet可以互换
需要继承:HttpServlet:是sevlet的实现类,同时也是GerenricServlet的子类。因为父类应经重写过接口中的方法了(例如init(Config config),service()).所以,作为子类的httpservlet就不用重写了,直接对servlce的doGet()和doPost()的方法进行重写就行。直接对浏览器发送的请求方式作出判断。一般表单的请求都是:post的请求,而那些超链接都是get的请求!
JDBC
连接数据库
JavaBean
一般JAVA bean用做实体类
常用模式
JSP
JSP+JavaBean
一般JAVA bean用做实体类
JSP+servlet+JavaBean
JSP+JDBC+JAVABEAN+DAO
三层架构:
持久层(dao模式):创建实体类和数据库表进行映射。也就是哪个表对应哪个类,哪个属性对应哪个列,而持久层的作用是就是完成对象数据和关系数据的转换。
业务层(事务脚本):将客户端请求的数据封装成一个方法。该方法中根据业务需要可能会调用多次数据更新操作。必须保证这些操作同时成功,同时失败。不允许部分成功部分失败而导致的数据混乱。
表现层(MVC):
M:模型,也就是实体bean。用于封装、传输数据
V:视图,也就是html和jsp。用于数据的展示
C:控制,也就是Servlet。用于调用业务类的业务方法,并控制操作的流程。
EL、JSTL、AJAX
EL
我的狗的名字是:${person.dog.name} 需要注意。通过EL表达式取属性值时,调用的是get方法。如果没写该属性,但是有get方法,同样可以通过EL表达式取出数据
从pageContext、request、session、ServletContext中查找属性值,从小作用域向大作用域查找,找到之后不再查找。
EL隐式对象作用域
pageScope 与page作用域属性的名称和值相关联
requestScope 与request作用域属性的名称和值相关联
sessionScope 与session作用域属性的名称和值相关联
applicationScope 与application作用域属性的名称和值相关联
EL表达式也可支持运算
JSTL
Filter
用于权限验证