关于html，servlet、css、js一些总结
2018-03-16 20:37
645 查看
2017/12/28
不仅是要会还是要在已有的基础上改造
Servlet技术
Servlet是java服务器端应用小程序，其主要功能在于交互式
浏览和数据处理，生成动态Web内容是Sun公司服务器端组件技术之一，属于Web服务器扩展
是平台喜爱实现动态网页的基本技术，具有占用资源少
效率高，可移植性和安全性强等特点
使用Servlet的基本流程如下：
客户端通过HTTP提出请求。
Web服务器接收该请求并将其发给Servlet。如果这个Servlet尚未被加载，Web服务器将把它加载到Java虚拟机并且执行它。
Servlet将接收该HTTP请求并执行某种处理。
Servlet将向Web服务器返回应答。
Web服务器将从Servlet收到的应答发送给客户端。
字符实体
空格
< <
> >
& 和号 &
<span></span>
<link>用于建立和外部文件的链接
，常用的是对css外部样式表的链接
<meta>提供有关界面的元信息
<blockquote></blockquote>文本缩进
<a href=""></a>
设置热点区域
<map name=""></map>
shape属性控制划分区域 coords控制划分区域坐标
<area shape="" coords="" href=""></area>
表格：
<table></table>
<tr></tr>定义行
<td></td>定义列
align属性设置行
valign属性设置垂直对齐方式
<nav></nav>定义导航链接部分
列表
<ul></ul>
<ol></ol>有序列表
自定义列表
<dl>
<dt>
<dd>列表项</dd>
</dt>
</dl>
<select></select>下拉列表
<form></form>表单
Action属性定义在提交表单时执行的动作
向服务器提交表单通常做法是使用提交按钮
通常表单会被提交到web服务器上的网页
<form action = "action_page.php">指定某个服务器脚本来处理被提交的表单
省略action则会被设置为当前页面
Method属性：提交表单时所用到http方法（GET/POST）
1. get（默认方法）提交表单时被动的并且没有敏感信息
使用GET时，表单数据在页面地址栏中是可见的
GET最适合少量数据的提交，浏览器会设定容量限制
2. POST表单正在更新数据，或者包含敏感信息
post更加安全，提交数据不可见
Name属性
如果要正确被提交，每个输入字段必须设置一个name属性
表单元素：
<input>，<select>,<option>,<textarea>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<input>输入类型
0.text定义供文本输入
1.password定义密码字段
2.submit定义提交表单数据只表单处理程序的按键
3.radio定义单选按钮
4.checkbox定义复选框
5.button定义按钮<input type="button" onclick="alert("xxxx")"></button>
CSS简介
CSS语法三部分组成：选择器、属性、属性值
1.标记选择起
2.类别选择器.class{}
3.ID选择器#id{}
HTML中使用CSS：
a:hover{
}
/**
* :hover选择器用于选择鼠标指针浮动在上面的原色
* ：link选择器设置指向未被访问页面的链接的样式
：visited设置已经被访问的页面链接
：active选择器用于活动链接
*/
1.行内样式 <p style=”color:green;
font-size:18px;”>行内样式</p>
2.内嵌样式，将CSS写在
<head>
<style>
</style>
</head>
3.链接样式<link>
4.导入样式
CSS网页元素
/**
######网络公开课内容######
cursor:pointer
position :fixed; //相对浏览器
box-shadow:
opacity:
background-position： 0px,0px；
hover:鼠标悬浮与页面的某个热点之上
@-webkit-keyframes rotateM{
from{
}to{
}
}
*/
1.css背景样式
属性值是某种颜色
background-color:yello
属性值是图片
background-image:url(images/tu.png)
2.文本样式
text-indent:5em属性设置文本缩进
text-align是文本样式中基本的CSS样式属性，用来设置文本的对齐方式。
word-spacing用来改变字或单词之间的标准距离。
letter-spacing用来改变字符或字母之间的间隔。
text-transform属性用来处理文本的大小写，属性取值为：none、uppercase、lowercase、capitalize。
text-decoration用来对文本装饰的属性，属性取值为：none、underline、overline、line-through、blink等
3.列表样式
三、JavaScript
js一种轻量级的编程语言，脚本语言。
js功能：
（1）将动态的文本放入HTML页面:
1.<script>在head部分，确保函数在调用前，脚本已经载入
2.在<body>部分，在页面载入是，脚本就会被执行
3.引入外部脚本文件
（2）对时间做出相应
（3）读写HTML元素
（4）验证数据
（5）槛车访问者浏览器
（6）创建cookies
3.基本数据类型
Number :数值型数据
String :字符型数据（不区分单个字母和字符串，都可以用双引号或者单引号引起来）
Boolean
NULL
4.函数
函数是由事件驱动
function 函数名（var1, var2..）
{
语句；
}
5.js事件
1.鼠标点击
2.页面或者乳香载入
3.鼠标悬浮与页面的某个热点之上
4.在表单中选取输入框
5.确认表单
6.键盘按键
unload和onunload事件：
unload用于在页面或者乳香加载完成后立即发生
onfocus，onblur，onchange事件：
onfous在对象获得焦点时发生
onblur在对象失去焦点时发生
onsubmit：用于提交表单之前验证所有的表单域
onmouseover/onmouseout用于鼠标移动到指定对象
案例：通过js控制图片 http://www.w3school.com.cn/tiy/t.asp?f=js_lightbulb <!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html>
代码规范：
1.js互忽略多余的空格
2.可以在文本字符串使用反斜杠对代码进行换行
3.注释与java一样
4.js对大小写敏感
5.变量未使用值来声明的变量其值为undefined
js拥有动态类型----相同的变量可用作不同的类型
var cars = new Array();//创建car数组
var cars = new Array("xx", "xx");
var cars = ["xx","xx"];
js对象由{}分隔
var person={firtname:"xxx"，lastname:"yyy"};
对象属性两种寻址方式：
name = person.lastnaem;
name = person["lastname"];
将变量值设为null清空变量
重点：js中对象是数据（变量）
js中运算符同java一样还有try-catch,throw
js html dom简介
dom（文档对象模型 document object model）
js能过改变页面中所有的html元素、属性、css样式、以及对页面中所有的时间作出反应
查找html元素
1.通过getElementById("id")找到html元素
2.通过标签名getElementsByTagName("")通过标签名getElementsByTagName
例2：
通过响应dom事件把内容注入到相应位置
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
例3：
鼠标移至html上方与移出
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:90px;color:#ffffff; margin:50px">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
obj.style.backgroundColor="#1ec5e5";
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
obj.style.background="green"
}
</script>
</body>
</html>
JS对象
1.定义并创建对象的实例
var person = new Object();
person.firstname = "xxx";
person={fristname:"xxx",lastname:"yyy"};
2.使用函数来定义对象，然后创建对象实例
第三章：JSP
1.jsp脚本元素
1.声明<%! %>
2.表达式 <%= %>
3.脚本段 <% %>
2.JSP指令元素
<%@指令名 属性="值" %>
指令元素三种类型：page设置JSP页面的全局属性
include文件包含,
tablib指令标记库指令；用于定义一个标记库和自己定义标记的前缀
<%@ taglib uri=" " prefix="">
request隐含对象
（1）request隐含对象在服务器启动时自动创建。、
当客户端通过http协议请求jsp页面是，servlet容器会将客户端
提交的请求信息封装在request对象中。
可以通过调用request对象相应的方法可以获取请求信息
当servlet容器完成该请求后，request对象会被撤销
（2）获取客户端参数名称和参数值的方法：
（a）getParameter(String name)返回指定变量名的参数值
（b）getParameterValues(String name)返回所有变量名的参数值
(3)获取cookie当用户再次来到该网站是，
服务器通过request对象getCookies()获取客户端存储
的cookie
（4）request作用范围变量----request属性
由属性名和属性值构成，用于两个Servlet程序间传递数据。
程序A通过调用request.setAttibute()把数据对象写入request作用范围
并且通过request.getRequestDispatcher()跳转第二个Servlet
request作用范围变量----request.getAttribute()读取数据对象
request实例从一个界面跳转到另一个界面后
它的生命周期结束，和他绑定的request属性变量会变成垃圾回收
1）setAttribute(String name,Object value): 用于把一个属性值对象按指定的名字写入request作用域。
2）getAttribute(String name)：从request作用域读出指定名字的属性值对象。
3）getRequestDispatcher()：由Servlet容器创建，用于封装一个由路径所标识的目标资源。利用RequestDispatcher对象，把当前Servlet程序的request和response对象转发给目标资源，并跳转至目标资源上运行程序，这样，目标资源就可以通过request对象读取上一资源传递给它的request属性。
response隐含对象
将服务器处理后的结果返回到客户端，对客户请求作出动态的相应
1）输出缓冲区与响应提交
2）设置HTTP响应报头response对象可以通过方法setHeader(String name, String value)设置指定名字的HTTP文件头的值，以此达到操作HTTP文件头的目的。
3）响应动态contentType属性
JSP页面重定向
RequestDispatcher.forward()实现转发跳转
response.sendRedirect()实现重定向跳转
session隐含对象
通过session跟踪记录每个客户端的访问状况
把有用的信息保存下来。
session跟踪方法：1）session对象
2）cookie
3）URL重写 response.encodeRedirectURL()
4）隐藏表单域
application隐含对象
跟随服务器启动而创建，随着服务器关闭而消失
同一个web应用中的所有jsp页面豆浆存取同一个application对象
不仅是要会还是要在已有的基础上改造
Servlet技术
Servlet是java服务器端应用小程序，其主要功能在于交互式
浏览和数据处理，生成动态Web内容是Sun公司服务器端组件技术之一，属于Web服务器扩展
是平台喜爱实现动态网页的基本技术，具有占用资源少
效率高，可移植性和安全性强等特点
使用Servlet的基本流程如下：
客户端通过HTTP提出请求。
Web服务器接收该请求并将其发给Servlet。如果这个Servlet尚未被加载，Web服务器将把它加载到Java虚拟机并且执行它。
Servlet将接收该HTTP请求并执行某种处理。
Servlet将向Web服务器返回应答。
Web服务器将从Servlet收到的应答发送给客户端。
字符实体
空格
< <
> >
& 和号 &
<span></span>
<link>用于建立和外部文件的链接
，常用的是对css外部样式表的链接
<meta>提供有关界面的元信息
<blockquote></blockquote>文本缩进
<a href=""></a>
设置热点区域
<map name=""></map>
shape属性控制划分区域 coords控制划分区域坐标
<area shape="" coords="" href=""></area>
表格：
<table></table>
<tr></tr>定义行
<td></td>定义列
align属性设置行
valign属性设置垂直对齐方式
<nav></nav>定义导航链接部分
列表
<ul></ul>
<ol></ol>有序列表
自定义列表
<dl>
<dt>
<dd>列表项</dd>
</dt>
</dl>
<select></select>下拉列表
<form></form>表单
Action属性定义在提交表单时执行的动作
向服务器提交表单通常做法是使用提交按钮
通常表单会被提交到web服务器上的网页
<form action = "action_page.php">指定某个服务器脚本来处理被提交的表单
省略action则会被设置为当前页面
Method属性：提交表单时所用到http方法（GET/POST）
1. get（默认方法）提交表单时被动的并且没有敏感信息
使用GET时，表单数据在页面地址栏中是可见的
GET最适合少量数据的提交，浏览器会设定容量限制
2. POST表单正在更新数据，或者包含敏感信息
post更加安全，提交数据不可见
Name属性
如果要正确被提交，每个输入字段必须设置一个name属性
表单元素：
<input>，<select>,<option>,<textarea>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<input>输入类型
0.text定义供文本输入
1.password定义密码字段
2.submit定义提交表单数据只表单处理程序的按键
3.radio定义单选按钮
4.checkbox定义复选框
5.button定义按钮<input type="button" onclick="alert("xxxx")"></button>
CSS简介
CSS语法三部分组成：选择器、属性、属性值
1.标记选择起
2.类别选择器.class{}
3.ID选择器#id{}
HTML中使用CSS：
a:hover{
}
/**
* :hover选择器用于选择鼠标指针浮动在上面的原色
* ：link选择器设置指向未被访问页面的链接的样式
：visited设置已经被访问的页面链接
：active选择器用于活动链接
*/
1.行内样式 <p style=”color:green;
font-size:18px;”>行内样式</p>
2.内嵌样式，将CSS写在
<head>
<style>
</style>
</head>
3.链接样式<link>
4.导入样式
CSS网页元素
/**
######网络公开课内容######
cursor:pointer
position :fixed; //相对浏览器
box-shadow:
opacity:
background-position： 0px,0px；
hover:鼠标悬浮与页面的某个热点之上
@-webkit-keyframes rotateM{
from{
}to{
}
}
*/
1.css背景样式
属性值是某种颜色
background-color:yello
属性值是图片
background-image:url(images/tu.png)
2.文本样式
text-indent:5em属性设置文本缩进
text-align是文本样式中基本的CSS样式属性，用来设置文本的对齐方式。
word-spacing用来改变字或单词之间的标准距离。
letter-spacing用来改变字符或字母之间的间隔。
text-transform属性用来处理文本的大小写，属性取值为：none、uppercase、lowercase、capitalize。
text-decoration用来对文本装饰的属性，属性取值为：none、underline、overline、line-through、blink等
3.列表样式
三、JavaScript
js一种轻量级的编程语言，脚本语言。
js功能：
（1）将动态的文本放入HTML页面:
1.<script>在head部分，确保函数在调用前，脚本已经载入
2.在<body>部分，在页面载入是，脚本就会被执行
3.引入外部脚本文件
（2）对时间做出相应
（3）读写HTML元素
（4）验证数据
（5）槛车访问者浏览器
（6）创建cookies
3.基本数据类型
Number :数值型数据
String :字符型数据（不区分单个字母和字符串，都可以用双引号或者单引号引起来）
Boolean
NULL
4.函数
函数是由事件驱动
function 函数名（var1, var2..）
{
语句；
}
5.js事件
1.鼠标点击
2.页面或者乳香载入
3.鼠标悬浮与页面的某个热点之上
4.在表单中选取输入框
5.确认表单
6.键盘按键
unload和onunload事件：
unload用于在页面或者乳香加载完成后立即发生
onfocus，onblur，onchange事件：
onfous在对象获得焦点时发生
onblur在对象失去焦点时发生
onsubmit：用于提交表单之前验证所有的表单域
onmouseover/onmouseout用于鼠标移动到指定对象
案例：通过js控制图片 http://www.w3school.com.cn/tiy/t.asp?f=js_lightbulb <!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html>
代码规范：
1.js互忽略多余的空格
2.可以在文本字符串使用反斜杠对代码进行换行
3.注释与java一样
4.js对大小写敏感
5.变量未使用值来声明的变量其值为undefined
js拥有动态类型----相同的变量可用作不同的类型
var cars = new Array();//创建car数组
var cars = new Array("xx", "xx");
var cars = ["xx","xx"];
js对象由{}分隔
var person={firtname:"xxx"，lastname:"yyy"};
对象属性两种寻址方式：
name = person.lastnaem;
name = person["lastname"];
将变量值设为null清空变量
重点：js中对象是数据（变量）
js中运算符同java一样还有try-catch,throw
js html dom简介
dom（文档对象模型 document object model）
js能过改变页面中所有的html元素、属性、css样式、以及对页面中所有的时间作出反应
查找html元素
1.通过getElementById("id")找到html元素
2.通过标签名getElementsByTagName("")通过标签名getElementsByTagName
例2：
通过响应dom事件把内容注入到相应位置
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
例3：
鼠标移至html上方与移出
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:90px;color:#ffffff; margin:50px">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
obj.style.backgroundColor="#1ec5e5";
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
obj.style.background="green"
}
</script>
</body>
</html>
JS对象
1.定义并创建对象的实例
var person = new Object();
person.firstname = "xxx";
person={fristname:"xxx",lastname:"yyy"};
2.使用函数来定义对象，然后创建对象实例
第三章：JSP
1.jsp脚本元素
1.声明<%! %>
2.表达式 <%= %>
3.脚本段 <% %>
2.JSP指令元素
<%@指令名 属性="值" %>
指令元素三种类型：page设置JSP页面的全局属性
include文件包含,
tablib指令标记库指令；用于定义一个标记库和自己定义标记的前缀
<%@ taglib uri=" " prefix="">
request隐含对象
（1）request隐含对象在服务器启动时自动创建。、
当客户端通过http协议请求jsp页面是，servlet容器会将客户端
提交的请求信息封装在request对象中。
可以通过调用request对象相应的方法可以获取请求信息
当servlet容器完成该请求后，request对象会被撤销
（2）获取客户端参数名称和参数值的方法：
（a）getParameter(String name)返回指定变量名的参数值
（b）getParameterValues(String name)返回所有变量名的参数值
(3)获取cookie当用户再次来到该网站是，
服务器通过request对象getCookies()获取客户端存储
的cookie
（4）request作用范围变量----request属性
由属性名和属性值构成，用于两个Servlet程序间传递数据。
程序A通过调用request.setAttibute()把数据对象写入request作用范围
并且通过request.getRequestDispatcher()跳转第二个Servlet
request作用范围变量----request.getAttribute()读取数据对象
request实例从一个界面跳转到另一个界面后
它的生命周期结束，和他绑定的request属性变量会变成垃圾回收
1）setAttribute(String name,Object value): 用于把一个属性值对象按指定的名字写入request作用域。
2）getAttribute(String name)：从request作用域读出指定名字的属性值对象。
3）getRequestDispatcher()：由Servlet容器创建，用于封装一个由路径所标识的目标资源。利用RequestDispatcher对象，把当前Servlet程序的request和response对象转发给目标资源，并跳转至目标资源上运行程序，这样，目标资源就可以通过request对象读取上一资源传递给它的request属性。
response隐含对象
将服务器处理后的结果返回到客户端，对客户请求作出动态的相应
1）输出缓冲区与响应提交
2）设置HTTP响应报头response对象可以通过方法setHeader(String name, String value)设置指定名字的HTTP文件头的值，以此达到操作HTTP文件头的目的。
3）响应动态contentType属性
JSP页面重定向
RequestDispatcher.forward()实现转发跳转
response.sendRedirect()实现重定向跳转
session隐含对象
通过session跟踪记录每个客户端的访问状况
把有用的信息保存下来。
session跟踪方法：1）session对象
2）cookie
3）URL重写 response.encodeRedirectURL()
4）隐藏表单域
application隐含对象
跟随服务器启动而创建，随着服务器关闭而消失
同一个web应用中的所有jsp页面豆浆存取同一个application对象
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于MFC中CDHtmlDialog嵌入flash和调用JS一些技术总结
- 关于HTML和CSS 浏览器兼容性问题的一些总结（1）
- 关于HTML和Css的一些总结
- 关于html ，css， js 的总结
- 一些关于HTML与CSS的总结与实际应用
- 关于HTML/JSP文件中JS文件和CSS文件的导入顺序
- 关于对HTML CSS Javascript 的学习总结
- Html,css,js总结问题
- 关于servlet的一些总结
- 总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
- Cnblogs关于嵌入js和css的一些黑科技
- 关于HTML在input标签内检测输入内容合法性和在js验证表单合法性后跳转到servlet的几点内容
- 关于grunt实现js,html,css编译压缩
- 上学时的HTML+JS+CSS(小总结)
- 关于Html与css的一些解释
- 关于html、css、js是否写在一个文件里
- 关于html+js+servlet中用jsonp回调进不了回调函数的问题
- Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
- 关于js运动的一些总结
- 关于js css html加载顺序整理