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中的某个对象的状态事件的监听器
- 监听对象
-
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
