Web前端部分
Session和Cookie
-
Session
Session 存在服务器中
存储了用户会话登录信息
-
Cookie
Cookie 存储在客户端（浏览器中）
存储了SessionID （JSESSIONID）
html(超文本传输协议)
1.标签
结构：
根元素html
├─body元素
│ ├─div元素
│ ├─h1元素
│ ├─h2元素
│ └─p元素
└─head元素
├─meta元素
└─title元素
属性
<!DOCTYPE html> 标签 (声明)
不加此标签，浏览器Browser以BackCompat(怪异模式)解析渲染页面
加此标签， 浏览器Browser以CSS1Compat(标准模式)解析渲染页面
<head></head> 标签
<meta http-equiv = "Refresh" content = "2,URL=www.vicker.cn"> ***# 两秒钟后，跳转到URL所指地址。若URL为空或无URL项，则隔两秒刷新一次
<meta http-equiv = "Content-Type" charset='UTF8'> # 指定编码格式
<title>@titlename</title> ***# 标签名
<link rel='icon' href="@url地址"> ***# 网页标题图标
<style>
CSS语句
<!--例如：
div{
}
-->
</style>
<body></body> 标签
<h1></h1> # 一级标题
<h2></h2> # 二级标题
<h3></h3> # 三级标题
<h4></h4> # 四级标题
<h5></h5> # 五级标题
<h6></h6> # 六级标题 (最高只到六级)
<p></p> # 段落 (两次换行，相当于"\r\n\r\n")
<hr/> # 水平分割线
<br/> # 换行]
<div>@content</div> # 无任何效果 但是可以通过CSS添加效果
<span></span> # 与div一致，无任何效果 但是可以通过CSS添加效果 （注意只有将其转化为块级标签，其设置的宽高才会有效）
块级标签
<div>
<p>
<h1> ......
内联标签
<span>
<b>加粗</b>
<em>斜体</em>
<strike>去除</strike>
<del>del</del>
2<sub>3</sub>
2<sup>3</sup>
<marquee>滚动标签</marquee>
特殊字符
< > © ® " ' &
小于 大于 版权符 空格 商标 双引号 单引号 与符号(&)
图标标签
<img src='@url'>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
列表标签
<ul>: 无序列表
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
form标签
<form action="" method="get">
<p>姓名：<input type="text" name="username"></p> # type=text 文本输入框
<p>密码：<input type="password" name="passwd"></p> # type=text 密码输入框
<p><input type="button" value="Go"></p> # type=text 按钮
<p>篮球<input type="checkbox" value="press"></p>
<p>足球<input type="checkbox" value="press"></p> # type=checkbox 复选框
<p>男<input type="radio" name="sex" value="1"></p> # type=radio 单选框
<p>女<input type="radio" name="sex" value="0"></p>
<p>文本域<textarea ></p>
<p>文件<input type="file"></p> # type=file 上传文件
<p><input type="reset"></p> # type=reset 重置按钮
<p><input type="submit"></p> # type=submit 提交按钮
<select name="city"> # 选则标签
<option value="sh" selected="selected">-请选择-</option> # selected="selected" 默认选中
<option value="sh">上海</option> # 选项标签
<option value="sh">北京</option>
<option value="sh">天津</option>
</select>
a标签
href 链接
target 目标页（在某个目标页打开）
_self
_top
_parent
_blank
CSS：
link: 没访问的，正常的状态
visited：访问过后，a显示的状态
hover：鼠标悬停的状态
active：鼠标指向a并按住不松手的那个状态
例如：
a:active{
color: #00FDFF;
}
address标签
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address><address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
框架标签
<frameset cols="50%,20%,*">
<frame src=""/>
<frame src=""/>
</frameset>
样式如下：
<iframe>
<iframe></iframe>
<iframe></iframe>
</iframe>
### 其中一个父标签
<h1>father.html</h1>
<iframe src="middle.html" height="1200px" width="900px" frameborder="1"></iframe>
样式如下：
fieldset表单标签
<form action="demo01.html" method="get">
<fieldset>
<legend>用户信息</legend>
<!-- for: 和组件的id属性 关联，点击旁边的文本标签，让组件自动被选中（自动获取焦点） -->
<label for="ccc">用户名1：</label>
<input type="text" name="userName" id="ccc" /> <br/>
<label for="eee"> 密码框：</label>
<input type="password" name="pwd" id="eee" /> <br/>
单选按钮 ：
<label for="male">男</label>
<input type="radio" name="gender" value="1" checked="checked" id="male"/>
<label for="female">女</label>
<input type="radio" name="gender" value="1" checked="checked" id="female"/>
</fieldset>
效果如下：
CSS(层叠样式表)
display: block
inline
inline-block
none
color 设置颜色
line-height 行高
text-align 对齐方式
text-indent：2em 首行缩进
text-decoration 文本装饰 underline,none,line-through
字体样式
font-style 风格
font-weight 粗细
font-size 大小
font-family 字体类型
font 风格 粗细 大小 字体; # 一次性调整要按照此顺序
文本格式
color 颜色
line-height 行高
text-align 对齐方式 例如：left,center,right
text-decoration 文本装饰 例如：underline,none,line-through
背景
background-color
background-image:url("")
background-repect: repect-top
background-position
浮动float
margin: 0px auto; 盒子居中
定位poition
position:relative # 相对定位
absolute # 绝对定位 以其上层离其最近的position为非static的标签为基准
fixed #
如果同时存在float，那么相对定位则是以浮动后的位置为基准来相对定位的
JavaScript
<!-- # 为了防止老版浏览器不识别
-->
如果js在body下，没有问题
window.onload=function(){ # html先加载后在执行。为解决页面加载自上而下
}
输入输出
alert 弹出框
prompt 输入框
confirm 确认框
eval(字符串) 将字符串当js脚本执行
计算
Math.pow(10,3) # 10的3次方
Math.pow(10,3)/Math.pow(10,3) 保留即为有效数字
函数
function f1(){ 这种在函数前后调用都可以
}
var f1=function(){ 这种只能在函数后调用
}
(function(){
})() 匿名函数 直接运行直接调
DOM对象
innerHTML 代表的是Html标签
innerText 代表的是文本
document.getElementById("").innerHTML="<h1>小明<h1>";
输出效果：
小明
document.getElementById("").innerText="<h1>小明<h1>";
输出效果：
<h1>小明<h1>
BOM对象
onload 加载是
onunload 离开或者
onfocus 焦点在标签内时
onblur 焦点离开标签内时
onchange select等标签改变时
onsubmit form表单提交时触发，为了验证用户名密码是否为空，是否符合格式
onmouseover 鼠标划入时
onmouseout 鼠标划出时
//这两者不能同时用在一个标签上，否则只有单击会有作用
onclick 单击触发
ondblclick 双击触发
定时器
var timer1 = setInterval(函数名,时间);
var timer2 = setTimeout(函数名,时间);
clearInterval(timer1);
clearTimeout(timer2);
jquery
parent(): 直接找到父元素
parents(标签名)：直接找到祖先元素