HTML+CSS+JavaScript+JQuery+JSP学习笔记

HTML标签
1.段落 <p></p>

2.换行<br/>

3.标题<h1></h1>--<h6></h6> 字体由大到小

4.水平线<hr/>

5.注释

6.(加粗<b></b> 倾斜<i></i> 不常用)

7.下标<sub></sub> 上标<sup></sup>

8.预格式文本 <pre></pre> 用的不多

9.地址标签 <address></address>

10.删除线 <del></del> 下划线<ins></ins>

11.链接：

文本链接<a href="跳转网址"></a>

图像链接 <a href="跳转网址" target="_BLANK"> //target="_BLANK"打开新页面
<img alt="提示信息" src="图片地址或名字">
</a>
跳转到同一界面的不同位置：<a href="#name"> </a> // #代表当前页面

跳出框架：<a href="另一框架" target="_top">跳出框架</a>

创建电子邮件链接：<a href="mailto：邮箱"></a>

13.框架

垂直框架
<frameset cols="25%,50%,25%"> //分为三列
<frame src="index1.html">
<frame src="index2.html">
<frame src="index3.html">
</frameset> //不写在body中

水平框架
<frameset rows="25%,50%,25%"> //分为三列
<frame src="index1.html">
<frame src="index2.html">
<frame src="index3.html">
</frameset> //不写在body中

<noframes></noframes> //浏览器不支持框架时，有提示信息
noresize="noresize" //窗体不能动

14.表格
<table border="1"> //border边框宽度
<caption>表名</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr> //行一行两列
<td></td> //列
<td></td>
</tr>

</table>

colspan="2" //合并两列
rowspan="2" //合并两行
cellpadding="" //单元格边距（文本与边框的距离）
cellspacing=""//单元格间距
bgcolor="" //背景颜色
background="" //背景图像
align="left" //对齐方式

15.列表
无序列表
<ul type="disc"> //disc实心点 list-style-type: none;//去掉实心点
<li>红茶</li>
<li>绿茶</li>
</ul>
有序列表
<ol type="1"> //自己给定
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>

自定义列表
<dl>
<dt>序号1</dt>
<dd>内容1</dd>
<dt>序号2</dt>
<dd>内容2</dd>
</dl>

16.输入表单
<fieldset> //圈起来
<legend>基本信息</legend> //框题
姓名：<input type="text" name="user"> //文本域
密码：<input type="password" name="psw"> //密码域
</fieldset>
爱好：<input type="checkbox" name="likes" value="sing">唱歌 //checkbox复选框
<input type="checkbox" name="likes" value="sleep">睡觉
<input type="checkbox" name="likes" value="xo">泡妞
性别：<input type="radio" name="sex" value="GG">帅哥 //单选框
<input type="radio" name="sex" value="MM">美女
城市：
<select name="city"> //下拉选项
<option value="bj">北京市</option>
<option value="sh">上海市</option>
<option value="tj">天津市</option>
<optgroup label="广东省">
<option>广州市</option>
<option>中山市</option>
</optgroup>
</select>
自我介绍：<br/>
<textarea rows="10" cols="50">请输入信息...</textarea>

提交表单：<form action="">要提交的东西</form>
按钮： <input type="button" value="普通按钮"/>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>

17.图像标签
插入图片<img alt="" src="图片地址">
背景图片<body background="图片地址">
排列图片<img alt="" src="图片地址" align="top">
图片缩放<img alt="" src="图片地址" width="" height="">
为图片显示替换文本<img alt="图片加载失败" src="图片地址">
制作图像链接 <a href="跳转网址">
<img alt="提示信息" src="图片地址或名字">
</a>
18.
<head>
<meta name="description" content="Java免费学习视频"> //文档描述
<meta name="keywords" content="Java,JavaSE,JavaWeb,Android"> //设置关键字
<meta http-equiv="Refresh" content="5;http://www.baidu.com"> //重定向 5秒后，自动跳转到百度
<base target="_blank"> //默认属性
</head>

CSS部分层叠样式表
1.添加CSS四种方式
(1).<p style="color: blue;font-size: 12pt">
(2).<head>
<style type="text/css">
p{
color:blue;
font-size:12pt;
}
</style>
</head>
(3).<head>使用最多
<link rel="stylesheet" href="*.css" type="text/css">
</head>
(4).
2.CSS选择器（重要）优先级：标签选择器<类选择器<id选择器<style属性
标记选择器
<style type="text/css">
p{
color:blue;
font-size:12pt;
}
</style>

类别选择器
<style type="text/css">
.名字{
color:blue;
font-size:12pt;
}
</style>
还得用class=""

ID选择器
<style type="text/css">
#ID{
color:blue;
font-size:12pt;
}
</style>

属性选择器
<style type="text/css">
input[type="text"]{

}
</style>
3.CSS背景
background-color:blue；
padding：20pt //内边距
background-image: url("图片地址");
背景重复：background-repeat: repeat-x;//x轴平铺
背景定位：background-position: center;
背景关联：

4.文本

<style type="text/css">
p {
text-indent: 2em; //缩进文本
text-align: left; // 水平对齐
wordspacing：20px // 字间隔（只针对单词）
letter-spacing：20px;//字母间隔
text-transform：uppercase;//字符转换
text-decoration：underline;//文本修饰
}
</style>

5.字体
<style type="text/css">
body {
font-family: "serif";//设置字体
font-style：italic;//字体风格
font-weight：bold;//字体粗细
font-size:12px;//字体大小
}
</style>

6.边框（盒子模型）
<style type="text/css">
p1{
border-style:solid; //边框
border-width：5px; //边框宽度
border-top-color：green;//边框颜色

}
</style>

7.外边距
<style type="text/css">
h1{
margin: 10px;
}
</style>
值复制
单边外边距

8.内边距
<style type="text/css">
h1{
padding: 10px;
}
</style>

9.列表
<style type="text/css">
ul li{
list-style: circle; //系统的
list-style-image: url("./img/img_0261.jpg");//自定义图标
}
</style>

10.表格
width：100%;//设置宽度
height:300px;//设置高度
text-align:left;//设置表格中文本的水平对齐方式
vertical-align:top; //设置表格中内容的垂直对齐方式

11.轮廓
outline

12.CSS尺寸

13.CSS分类
display //设置是否及如何显示元素
float //定义元素在哪个方向浮动
a:HOVER //鼠标移动到链接上的状态
visibility//设置元素是否可见或不可见
cursor//规定当指向某元素之上时显示的指针类型
clear //设置一个元素的侧面是否允许其他的浮动元素

14.CSS定位
position
overflow //溢出
clip //裁剪

15.CSS伪类
锚伪类
a:link //未被访问的链接
a:visite //已访问的链接
a:hover //鼠标移动到链接上
a:active //选定的链接
：focus //向拥有键盘输入焦点的元素添加样式

16.div+css布局（重要 53讲 JavaWeb 114 115）
float: left;
width: 200px;
padding: 0.5em; //边框
margin: 100px 0px; //外边距
padding: 1em; //内边距
text-align: center;

JavaScript
1.定义对象
var people = {name:"xiao bai",age:19};
2.for...in 循环
var str = "";
for(x in person){
str = str + person[x];
}
3.innerHTML

4.自动刷新
<meta content="2" http-equiv="refresh">

5.浏览器对象
window对象方法
alert("提示信息")//用于调试
close（）//关闭当前窗口
setTimeout("函数",毫秒数)//设置定时器：经过指定毫秒值后执行某个函数
setInterval(表达式，毫秒)
setResizable(true)//允许调整窗口
clearTimeout()清除某个定时器
status()//设置状态栏

6.事件处理
文本框事件处理
οnfοcus="" //得到焦点
οnblur=""//失去焦点
readonly="eradonly"//只读
命令按钮事件处理
onSubmit//提交表单
onClick//按钮单击事件
复选框事件处理
checked//复选框是否被选中
value //设置或获取复选框的值
单选按钮事件处理
下拉列表框事件处理
options //所有的选项组成一个数组，第一个选项为options[0]...以此类推
selectedIndex //返回被选择的索引号
鼠标事件处理
onmousemove //鼠标移动事件
onmousedown//鼠标按下事件
onmouseout //鼠标移出事件
onmouseover //鼠标移进事件
onmouseup //鼠标放开事件
ondblclick //鼠标双击事件

7.DOM操作

jquery
1.基本事件
//
<script type="text/javascript">
//文档就绪函数
$(document).ready(function(){
var str = $("p").html();//获取元素的内容
alert(str);
});
//文档就绪函数的简写
$(function(){
$(document.body).css("background","yellow");//设置背景色
});

$(function(){
var div1 = $("#div1").html();//获取id为div1的元素
alert(div1);
});
</script>

2.动画效果

JSP
声明（declaration）
1.声明变量和方法（不建议）
<%! %>
2.表达式
<%= %>
3.脚本
<% %>

指令
1.page指令
<%@page %>

2.include指令
<%@include file="title.jsp" %>
3.taglib指令

动作元素
1.包含动作
<jsp:include page="title.jsp"></jsp:include>
2.传参动作
<jsp:param value="小白" name="name"/>不能单独使用
3.转发用户请求（URL不变）
<jsp:forward page=""></jsp:forward>
4.创建一个Bean实例并指定它的名字和作用范围（其实就是一个Java类）
<jsp:useBean id="person" class="com.ysu.bean.Person"></jsp:useBean>//创建了一个person对象，只能调用默认构造方法
5.设置Bean的属性值
设置
<jsp:setProperty property="name" name="person" value="小白"/>
<jsp:setProperty property="age" name="person" value="18"/>
获取
<jsp:getProperty property="name" name="person"/>
<jsp:getProperty property="age" name="person"/>

内置对象
1.out //作用域：page；向客户端页面输出数据重要方法：print（）/println（）/write（）
2.request //作用域：request 方法：getParameter(key)获取提交表单的数据
/getParameterValues(key)获取提交表单的一组数据
/getRequestDispather("list.jsp")
/.forward(request,response)转发
/setAttribute(key,object)设置请求对象的属性
/getAttribute(key)获取请求对象的属性
/setCharacterEncoding("UTF-8")对请求数据重新编码
3.response //作用域：page 方法：sendRedirect("页面"); 页面跳转
/setCharacterEncoding("UTF-8") 设置响应编码
4.session //作用域：session 表示一个会话，用来保存用户信息，以便跟踪每个用户的状态
方法：getId()获取session的id号
/isnew()判断session是不是新创建的
/setAttribute(key,object)在当前会话中设置一个属性
/getAttribute(key)获取当前会话中的一个属性
/removeAttribute(key)删除当前会话中的属性
/setMaxInactiveInterval(1000*60*30)设置当前会话失效时间ms
/invalidate()设置session失效，初始化当前会话对象，在系统退出时使用

5.pageContext //作用域：page 本JSP的页面上下文
6.application //作用域：application 周期最长
7.config //作用域：page 配置
8.page //作用域：page
9.exception //作用域：page

表单参数的传递
1.get/post 显式/隐式请求

2.乱码解决：
post乱码：request.setCharacterEncoding("UTF-8");
get乱码：设置tomcat的server里加入：URIEncoding="UTF-8" 不推荐
或name = new String(name.getBytes("iso-8859-1"),"UTF-8");推荐
或<script type="text/javascript">

function login(){
var loginForm = document.forms["loginForm"];
loginForm.name.value = encodeURI(loginForm.name.value);
loginForm.submit();
}
name = URLDecoder.decode(name,"utf-8");
3.URL传值
4.提交表单
5.隐藏域

打赏：

原文链接：https://blog.csdn.net/Be_Proud/article/details/49967567