HTML
简介
大名:HyperText Markup Language
寓意: 超文本 标记 语言
语义化标签
标题
有六级
列表
- 无序标签
- 有序标签
-
段落
font字体
链接
属性
-
href:写地址
-
target:在什么目标上打开
-
- blank建新窗口打开
- self 在自身窗口打开
图像
属性:
- src:路径
- alt:在图片没法显示时,给用户的提示
HTML div
作用:布局
块级元素和行内元素
块级元素:标题,div,列表
行级元素:链接,元素,段落
格式化标签
- 文本格式化
加粗
另一种粗体
强调字体 (斜线)
大号字体
小号字体
下标
上标
- 预格式文本
《pre》
- 应用
《blockquote》
- 删除线
《del》
《ins》
表格
内容 内容 内容 内容 边框问题 border 单元格间距 cellspacing 单元格边距 cellpadding 单元格跨列 colspan 内容对齐 align 单元格跨行 rowspan 表单
css
基础语法
样式属性 操作符(😃 样式值 分割符(😉
选择器
ID选择器:#+id名称
元素选择器: 元素名
类选择器: .+class名字
属性选择器: [属性名称]
伪类
:link 向未被访问的链接添加样式
:hover 当鼠标悬浮在元素上方,向元素添加样式
:active 向未被激活的元素添加样式
:visited 向已经被访问过的链接添加样式
伪元素
::before 会为当前元素创建一个子元素作为伪元素
::after 用来匹配已选元素的一个虚拟的最后子元素
优先级
- 内联样式的优先级高于外联样式
- 外联样式:id选择器级别最高,其次类选择器、元素选择器和伪类
- 加 !important可以使级别最高
基于关系的选择器
CSS样式
背景
background 简写属性:作用是将背景属性设置在一个声明中
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复
文本
color 设置文本颜色
text-align 对齐元素中的文本
- right 右对齐
- center 居中对齐
- left 左对齐
text-decoration 向文本添加修饰
- 不添加任何修饰为 none
text-indent 缩进元素中文本的首行
vertical-align 设置元素的垂直对齐
字体
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式(斜体)
font-weight 指定字体的粗细
列表
list-style 用于把所有列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志
list-style-type 设置列表项标志的类型
CSS布局
CSS常见布局
- 两行三列布局
- 三行两列布局
CSS设置模型盒子
边框
Border 简写属性,用于把针对 四个边的属性设置在一个声明
border-style 用于设置元素所有的边框的样式,或者单独的为各边设置边框样式
border-width 用于元素的所有边框设置宽度,或者单独的为各边边框设置宽度
border-color 设置元素的所有边框中可见部分的颜色,或者为4个边分别设置颜色
内边距
padding 使用缩写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充
外边距
margin 简写属性。在一个声明中设置所有外边距属性
margin-bottom 设置元素的下外边距
margin-left 设置元素的左外边距
margin-right 设置元素的右外边距
margin-top 设置元素的上外边距
float
四个参数
- float:left 左浮动
- float:right 右浮动
- float:none 不浮动
- float:inherit 继承浮动
浮动副作用的解决
- 手动给父元素添加高度
- 通过clear清楚内部和外部浮动
- 给父元素添加overflow属性并结合zoom:1使用
- 给父元素添加浮动
clear属性
- clear:none
- clear:left
- clear:right
- clear:both
CSS-position
属性
static
静态定位/常规定位/自然定位
作用:使元素定位于常规/自然流中(块,行垂直排列下去、行内水平从左到右)
特点:
- 忽略top,bottom,left,right或者z-index声明
- 两个相邻的元素如果都设置了外边距,那么最终边距=两者外边距中最大的
- 具有固定width和height值的元素,如果左右外边距设置auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中
relative
相对定位
作用:使用元素成为containing-block-官话是可定位的祖先元素
特点:
- 可以使用top/right/bottom/left/z-index进行相对定位
- 相对定位的元素不会西开常规流-----心念家乡
- 任何元素都可以设置relative,他的绝对定位的后代都可以相对于他进行绝对定位----超好用
- 可以使浮动元素发生偏移,并控制它们的堆叠顺序
absolute
绝对定位
作用:使元素脱离常规流
特点:
- 脱离常规流
- 设置尺寸要注意:百分比——最近定位祖先元素
- Irtb如果设置为0,它将对其到最近定位祖先元素的各边——衍生出一个居中的妙计
- Irtb如果设置为auto,它将被打回原形 恢复到常规流
- 如果没有最近定位祖先元素 会认做爹
- z-index可以控制堆叠顺序
fixed
固定定位
作用:我和绝对定位本是同根生相煎何太急
特点:
- 跟absolute区别-----相对于谁做绝对定位
- 固定定位元素不会随着视口滚动二滚动
- 继承absolute特点
sticky
磁贴定位/粘性定位/吸附定位
作用:relative+fixed的完美结合,制造出吸附的效果
特点:
- 如果产生偏移 原位置还是会在常规流中 一亩三分地留着
- 如果他的最近祖先元素有滚动 那么他的偏移标尺就是最近祖先元素
- 如果最近元素没有滚动 那么他的偏移标尺是视口
- 上下左右的偏移规则
js
js基础
js输出
- Window.alert()警告框
- document.write()写到HTML文档中
- innerHTML写到HTML元素
- console.log()写到浏览器的控制台
js语句和注释
- 分号
- JavaScript代码
- JavaScript语句标识符
- 代码块
- 单行和多行注释
数据类型
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 数组(Array)
- 对象(Object)
- 空(Null)
- 未定义(Undefined)
变量
- 变量必须以字母开头
- 变量也可以以$和_符号开头(不推荐)
- 变量名称对大小写敏感(y和Y和不同的变量)
js函数
- 函数是由时间驱动的或者当它被调动时执行的可重复使用的代码块
- function a(参数){} 声明会前置
- var a=function(参数){}
- 函数中的return
js运算符
- 赋值运算符 = += -= 等
- 算数运算符 ± */等
- 字符串的+运算符
js比较与逻辑运算符
-
小于<
-
大于>
-
==等于
-
===对于等于(值和类型均相等)
-
!=不等于
-
&& and
-
||or
条件控制语句与循环
条件语句与switch语句
- 条件语句:if else if else
- switch:switch case break default
while循环和for 循环
- for—循环代码块一定的次数
- for/in-循环遍历对象
- while - 当指定的条件为true是循环指定的代码块
break和continue语句
- break语句可用于跳出循环
- continue 语句跳出本次循环,继续循环
DOM简介
DOM树模型
获得元素
document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();
DOM HTML
修改HTML内容
- document.getElementById(id).innerHTML=‘hellowould’;
修改HTML属性
- element.getAttribute();
- element.setAttribute( “属性”,“具体修改”);
- element.src() 图片
- element.href 网址
DOM CSS
修改样式
.style.样式=“具体”;
DOM 事件
- < οnclick=“this.innerHTML=“谢谢””>请点击该文本
- element.οnclick=function(){displayDate()}
- Element.addEventListener(“click”,function){});
DOM 节点
添加和删除节点
- document.createElement(“p”)
- doucument.createTextNode(“新增”)
- parent.appendChild(child)
- parent.removeChild(child) (删除)
JS window
window
- 所有浏览器都支持的对象。他表示浏览器窗口
- 所有JavaScript全局对象、函数、以及变量均自动成为window对象的成员
- 全局变量是window对象的属性
- 全局函数是window对象的方法
window的方法
- window.open(‘链接’,‘取名’,'with= ,height= ')–打开新窗口
- window.close()–关闭窗口
- window.moveTo( , )–移动当前窗口
- window.resizeT0(’ ‘,’ ')–调整当前窗口的尺寸
Window screen
- window.screen 对象在编写时可以不使用window这个前缀
- screen.availWidth—可用的屏幕宽度
- screen.availHeight—可用的屏幕长度
window Location
- location.hostname 返回web主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.protocol 返回所使用的web协议(http://或https://)
- location.href 返回(当前页面的)整个URL
window History
- window.history 对象在编写时可不使用window 这个前缀
- history.back()–与在浏览器点击后退按钮相同
- history.forward()- 与在浏览器中点击按钮向前相同
- history.go()
Javaweb基础
Java web
- Java Web是用java技术来解决相关的web互联网领域的技术总称。
- 需要在特定的web服务器上运行,分为web服务器和web客户端两部分。
- 跨平台,能够在多个不同平台下部署与运行
jsp
-
JSP全名Java Serve Pages,中文名叫Java服务器页面,其根本是一个简化的Servlet设计
-
JSP是在传统的页面HTML文件中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件,后缀为(*.jsp)
-
用JSP开发的Web应用是跨品台的,既能在Linux下运行,也能唉其他操作系统上运行
JSP
JSP基本语法
- JSP声明语法
<%! String str=“hello world”;%>
定义成员变量,以及成员方法
不能直接包含程序语句
-
JSP程序脚本
-
JSP脚本注释
-
JSP内容输出表
-
包引入语法
JSP内置对象及四种作用域
JSP内置对象
简介:内置对象(又叫隐含对象,有9个内置对象):不需要预先声明就可以在脚本代码和表达式中随意使用
JSP作用域
简介:代表数据存储的范围
pageContext
request
session
application
request内置对象(作用域)及out、response对象应用
- request:封装了由WEB浏览器或其他客户端生成HTTP请求的细节(参数,属性,投标,数据)
- out:代表输出流的对象
- response:封装了返回到HTTP客户端的输出,向页面作者提供设置响应头标和状态吗的方式
- request作用域在相邻两个web资源之间共享同一个
- 作用域:用户的请求周期
pageContext、page对象应用
- pageContext:提供了转发请求到其他资源和包含其他资源的方法,提供获取其他内置对象的方法
- 作用:
- forward方法来完成请求的转发
- include方法来完成页面的包含关系
- pageContext可以来获取其他的内置对象
- page:代表了正在运行的有JPS文件产生的类对象
- pageContext作用域:当前执行页面
session、config、exception对象应用
- session:主要用于跟踪回话
- 会话:代表用户第一次进行当前系统直到退出系统或关闭浏览器,在此期间与服务器的一系列交互
- session作用域:会话期间
- config:获取配置的信息
- exception:异常对象
- 只能在错误页面中使用,page加入一个属性isErrorPage=“true”
application对象应用
- application:提供了关于服务器版本,应用级初始化和应用内资源绝对路径方法
- 作用域:web容器的生命周期
XML
基本概念
- XML(Extensible Markup Language,可扩展标记语言)
- 允许开发者自由定义标签,可以将标签和内容有效的分离
- XML不在侧重于数据如何展示,而是更多地关注数据的存储和传输
应用场景
- XML把数据从HTML分离出来
- 简化数据共享
- 简化数据的传输
- 简化平台的变更
优势
- 简单易用的标记语言
- 严格的格式
- 数据逻辑和显示逻辑分离
文档规则
- 整齐结构
- 有且只有一个根元素
- 元素必须合理结束
- 元素之间必须合理的镶嵌
- 元素的属性必须有值
- 声明
-
- 字符集
- 简体中文:GBK或GB2312
- 繁体中文:BIG5
- 西欧字符:ISO8859-1
- 通用的国际编码:Unicode
- 针对Unicode的可变长度字符编码:UTF-8
-
基本规则
- 合法的标签名
- 嵌套子元素
- 空元素
- 字符数据
- 使用实体引用
- < ; < 小于
- > ; > 大于
- & ; & and 字符
- &apostle; ’ 英文单引号
- " ; " 英文双引号
- 使用CDATA标记
- <!CDATA[文本内容]>
命名空间
语法
xmlns[:prefix]=‘命名空间字符串’
命名空间的特征
- 名字很长(命名空间往往是一个绝对的URL地址)
- 名字里面往往包含英文冒号、斜线等特殊字符
XPath语言
-
概念:XPath语言是一门专门用于在XML文档中查找信息的语言,其他XMl程序可利用XPath在XML文档中对元素和属性进行导航
-
节点
-
基本概念
-
基本值:专门用于表示简单节点的数据值
-
项
-
节点集和序列
-
-
节点关系
-
相对路径和绝对路径
-
基础语法
-
轴:步由使用轴来定义所选节点与当前节点之间的结构关系
-
节点测试:用于从指定轴所匹配的节点集中所选特定的节点
-
限定谓语:一个boolean表达式,或者可以转化为Boolean值的表达式,用于进一步提炼所选的节点集。限定谓语应该放在括号中
-
-
运算符
-
算数运算符
-
比较运算符
-
逻辑运算符(or and )
-
组合多个路径的运算符(|)
-
-
常见函数
XML文档解析模式
-
DOM:文档对象模型
-
SAX
- 使用SAX机制解析XML文档,SAX解析器负责在XML文档中游走,每当遇到文档开始、元素开始、文本、元素结束或文档结束时,都将负责向外发送事件,而程序员则负责提供是事件监听器来监听这些事件,并通过是按获取XML文档信息
-
JAXP:java解析XML文档的API
JSTL和EL表达式
EL表达式介绍
- 介绍和作用
EL:Expression Language(表达式语言),目的是替代JSP页面中的复杂代码
- 语法
$(变量名)
JSTL
-
介绍
JSP标准标签库(JavaServletPages Standard Tag Library)
-
与EL表达式的关系
JSTL通常会与EL表达式合作实现JSP页面的编码
常用标签
-
通用标签
- set:将值保存到指定范围内
- out:将结果输出显示
- remove:删除指定域中内的数据
-
条件标签
- if、choose
-
迭代标签
- forEach
Ajax
-
Ajax是一种用于创建快速动态网页的技术
-
特点
- 通过在后台与服务器进行少量数据交换,Ajax可以是网页实现异步更新
- 传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面
-
好处
- 更新时只需要刷新局部,用户体验好
- 由于只需要刷新局部的数据,对后台服务器的压力小
语法
- url:请求的地址
- type:请求时数据的传递方式(get/post)
- data:用来传递的数据(建议使用json来传递)
- success:交互成功后要执行的方法
- dataType:ajax接受后台数据的类型(建议使用json)
- 注意事项:ajax和后台交互式,后台是不能够直接跳转到其他页面的
java正则表达式
- 简介
- 使用特殊的符号来做校验,目标是操作字符串。例如:手机号码、邮箱、身份证的校验等
- 使用正则表达式的优缺点
- 使用特殊的符号来做检验,目标是操作字符串。例如:手机号码、邮箱、身份证的校验等
- 缺点:虽然能简化书写,但是正则表达式的阅读行较差
表达式语法规则
-
[abc] a、b或c(简单类)
-
[a-zA-Z] a到z或A到Z,两头的字母包括在内(范围)
-
\d 数字:[0-9]
-
X{n} X,恰好n次
-
X{n,} X,最少n次
-
X{n,m} X,最少n次,但是不能超过m次
-
\D:非数字
-
\s:空白字符(如空格、\t制表单、\n换行等)
-
\S:非空白字符(除了空白字符以外的其他都可以)
-
\w:单词字符(a-zA-Z_0-9)
-
\W:非单词字符
-
在正则表达式中“^”表示正则的起始标记,“$”表示结束标记(可以不写)
前台校验
- 前台校验优点
- 能够对数据进行初步的筛选,减少后台服务器的优点
- 能使用html5校验,比较简单易用
- 前台校验弊端
- 可以通过一些手段绕过前台的校验
过滤器
- 作用:实现对Web资源请求的拦截,完成特殊的操作,尤其是对请求的预处理
- 应用场景
- Web资源权限访问控制
- 请求字符集编码处理
- 内容敏感字符词汇过滤
- 响应信息压缩
- 生命周期
- web应用程序启动时,web服务器创建Filter的实例对象,以及对象的初始化
- 当请求访问与过滤器关联的web资源时,过滤器拦截请求,完成指定功能
- Filter对象创建后会驻留在内存,在web应用移除或服务器停止时才销毁
- 过滤器的创建和销毁有WEB服务器负责
- 实现步骤
- 编写java类中实现Filter接口,并实现其doFilter方法
- 在web.xml文件对filter类进行注册,并设置所拦截的资源
- 过滤器链
- 在一个web应用中,多个过滤器组合起来称之为一个过滤器链
- 过滤器的调用顺序取决于过滤器的web.xml文件中的注册顺序
监听器
- 定义
- Servlet规范定义的一种特殊类
- 用于监听ServletContext,HTTPSession,ServletRequest等域对象的创建,销毁及其属性修改发生变化的事件
- 监听器可以在事件发生前后进行一些必要的处理操作
- 应用场景
- 统计在线人数
- 页面访问量的统计
- 应用启动时完成信息初始化工作
- 与Sprig结合
- 实现步骤
- 编写java类实现接听器接口,并实现其接口方法
- 在web.xml文件中对实现的监听器进行注册
- 监听器分类
- 监听对象
- ServletContext对象监听器
- HTTPSession对象监听器
- ServletRequest对象监听
- 监听事件
- 域对象自身的创建和销毁事件监听器
- 域对象中属性的创建、替换和消除事件监听器
- 绑定到session中的某个对象的状态事件的监听器
- 监听对象
-