新坑 到P83页了。。。
HTML5基本语法
<hr> 一个横线
<label> </label> 用于为input 元素进行标注 其 for 属性应与要绑定的元素的id相同，form属性用于规定其属于哪个或者多个表单
<!DOCTYPE html> <!--文档声明，目的是让浏览器知道这是什么类型的文件-->
<html > <!--文档的开始，没有什么实际含义-->
<head> <!--头标记，放在html 内来防止这个文件中的信息，比如提供索引信息或者定义CSS样式等-->
<!--标题标记，网页的标题，也就是上方的标~ 题，不是内容的标题-->
<title>
我的测试文件
</title>
</head>
<body> <!--文档正文的开始--> <!--文本属性中可以加入text 来表示文本的颜色，bgcolor来表示背景的颜色-->
<!-- <body text="red" bgcolor="blue">-->
<!--hn 各种大小标题-->
<h1>
<font color = "blue"> <!--设置字体颜色-->
蓝色的一级标题
</font>
</h1>
<p>
<!--段落标记-->
这是我的第一个测试文件
</p>
<!--文字样式标记-->
<b> <!--加粗-->
<i>
<!--斜体-->
这是加粗斜体字
</i>
</b>
<br>
<!--删除线-->
<s>删除线</s>
<br>
<!--下划线-->
<u>下划线</u>
<br>
<!--放大缩小，加强强调，强调，现实电子邮件或者地址，写代码-->
<big>放大</big>
<br>
<small>缩小</small>
<br>
<!--加强强调-->
<strong>加强强调</strong>
<br>
<em>强调</em>
<br>
<address>2354796263@qq.com</address>
<br>
<code>
#include <bits/stdc++.h>
using namespace std;
int main(){
cout << "Hello World!"<< endl;
return 0;
}
</code>
<!--文字上浮和下浮-->
<p>文字<sup>上浮</sup> <sub>下浮</sub> </p>
<!--文字样式标记-->
<!--文本的位置-->
<center> <font color = "red" face = "宋体" size = "7"> 实现居中</font></center><br> <!--font 还可以设置字体和大小，属性是 face 和 size-->
<h4 align = "right"> <font color = "blue">实现右侧</font> </h4>
<br>
<!--照片的操作-->
<img src="source/image/Elysia.jpg" alt="图片丢失时显示" title="鼠标放在上面可以看到">
</body>
</html>导航菜单
使用
<ul> + <li> + <a> 即可，之后在css中进行设置样式设置表格:
<table>表格 <tr> 定义一行 <col> 定义一列 <td> 定义一个单元格 <caption> 表格的大标题 <th> 表头，主要用于行或列的名称，<th> 与<td> 相似
实例:
<table border="2" cellspacing ="2" bgcolor = "#eeeeee">
<caption>成绩表</caption>
<tr> <!--开始定义表头-->
<th>姓名</th> <th>性别</th> <th>成绩</th>
</tr>
<tr><th>张三</th> <td>男</td> <td>114</td></tr>
<tr><th>李四</th> <td>男</td> <td>514</td></tr>
</table>
使用<td> 中的rowspan 和 colspan 来合并单元格设置表单
<form> 和 <input> 两个标签
实例：
<form action="">
姓名：<input type="text">
</form>
type = "text"
name 设定文本框的名称，在交互程序中可以用到
size 数值，设定此一栏位要显示的宽度
value 预设内容
maxlength 设置文本可输入的最大最大文字长度
type 属性内容:
type = "radio“ 单选
可选属性：
checked 设置某个选项为默认选
name name属性内容相同的两个选项只能选中一个
type = "checkbox" 多选
可选
checked
name 需要将一组选中中的所有复选按钮设置为相同的名称才能让服务器处理时知道这几个选项是一个组的
type = "password" 密码框
属性与文本类型相同
type = "submit" 提交按钮
type = "reset" 重置按钮
type = "image" 提交图片
type = "textarea" 多行文本框
可选：
cols 定义文本框的宽度，字符的列数
rows 字符行数
wrap 定义换行方式 主要有 off 文字不自动换行， virtual 输入文字时会自动换行，但是如果没有自己按下回车键换行，提交到服务器时结果就时没有换行
physical 自动换行，提交到服务器结果也是换行
列表框：
在form中使用 <select> 标签
在<select> 中使用<option>来设置选项</option>
## class 的用法：
- 一个对象可以包含多个class(方便了在CSS中定义)
```css
<style type="text/css">
.Ely{
font-size:larger;
}
.red{
color : purple;
}
</style>
<p class ="Ely red" align = "center" >Elysia <small></small> </p> CSS
基本规则:
张飞{ 身高： 体重： 性别 民族 }选择器
对网页中指定的对象进设置
标记选择器：所有同名的标签都会被选择
使用html 的标记标签进行选择，例如：
<p>基本语法：
<style> h1 { 标签选择 声明 color :red ; 属性 + 值 font_size :25px; } </style>类别选择器：实现只修改指定的标签class
基本语法：
.class { . + 类别名(自定义的名字) 声明 }ID选择器，**id在HTML中具有唯一性，不可重复，尽量做到一个标签一个id**
ヽ（≧□≦）ノ
HTML中使用方法：
行内央视，直接使用
<style>属性 注意，每一个声明之后要加入分号<p style="color : purple; font-size :larger" align = "center">Elysia </p>内嵌式一般放在
<head>标签之间
<head> <style type="text/css"> .Ely{ font-size:larger; } .red{ color : purple; } </style> </head>链接式，将CSS与HTML文件分离 在html中使用
<link>标签进行 导入<link rel="stylesheet" href="文件地址">导入式 使用@import 在html初始化时就会进行导入，而使用链接式只有在需要格式时才进行导入
/*需要放在style 标签中*/ <style> @import "1.css"; </style>
Tips:CSS中遵循覆盖规则，对于同一个被选择的对象，后面的定义会覆盖前面的定义，所以可以使用标签进行全局定义，在使用class 来对指定的对象进行微调
Tips2:优先级
最后面导入的样式 > 最后面的连接式 ， 链接式与
<style>遵循先后顺序， 同一个<style>中内嵌式 > 导入式CSS3新特性：
交集选择器：
Ely{ color :purple; } p{ color: red; } p.Ely{ color :blue; }并集选择器：使用 ， 进行隔开即可
p,.Ely,h5{ color :blue; }全局选择器：* 使得所有HTML标签都遵循这个规则
*{ color :blue; }后代选择器，空格隔开即可
li ul { color :blue; } li ul ul { color : red; } li ul ul ul { color : purple; }只对直接后代有用的选择器： p > 可搭配*使用
ID 选择器：#+id
相邻选择器：A+B 直接兄弟，紧跟着的后面那个
相邻兄弟组选择器：A~B 后面的所有兄弟
属性选择器： 使用中括号进行选择，属性是自定义的
<p ely = "123">最喜欢爱莉希雅了</p> /*这里ely是自定义的属性，它的值是123*/ p[ely]{ /*使用这个进行选择，即可*/ color : red; } /*也可以使用属性+属性的值来进行选择*/ /*需要属性的值必须是给定的这个值*/ p[ely = "123"]{ color : red; } /*属性包含选择器，只需要属性的值包含给定的值的即可*/ p[ely *= "1"]{ color : red; } <p ely = "123 4 5 6">最喜欢爱莉希雅了</p> /*单词包含选择器 ， 只要包含给定单词即可*/ p[ely ~= "123"]{ color : red; } /*以某个单词或者字母开开头的选择器*/ p[ely ^= "1"]{ color : red; } /*以什么结尾的选择器，只要以某个单词结尾或则和某个字母结尾即可，数字也行*/ p[ely $= "6"]{ color : red; }结构伪类选择器
/* 基本语法： E是父元素 E : nth - child 第几个元素 E : root 根元素，HTML中根元素始终为html 还有很多。。。自己去看吧 给个链接：https://juejin.cn/post/7001869576069873695 */伪元素选择器
待补
CSS继承和层叠特性
子标记会继承夫标记的所有样式风格，但是子标记的改变不会影响父标记
层叠是出现冲突时的处理方式，越特殊的样式，优先级越高，
层叠优先级：行内样式> ID 样式 > 类别样式 > 标记样式
CSS设置文本样式
单位：
相对类型：
px : 像素，根据设备类分辨率来进行调整，最常用的
em: 设置以目前字符的高度为单位
rem: root em 设置以网页跟元素HTML 字符的高度为单位， 一般浏览器莫默认单位为 1rem = 16px
vw 和 vh 基于视图窗口的相对单， 1vw 等于视口宽度的1% 1vh 等于窗口高度的的1%
绝对类型
in 英尺
cm 厘米
mm
pt 点数
pc 印刷单位 1pc = 12pt
颜色：
HTML中统一使用RGB模式，基本设置 rgb(red, green , blue , 透明度 )
基本设置：
font-family : 设置字体
font-style : 设置斜体
font-weight: 设置加粗，参数有 normal, bold(加粗) , bolder(更粗),lighter(更细), 100- 900 按每100为为一个阶段，数字越大，字体越粗
font-transform： 大小写转换
font-size:字体大小
text-decoration:文字的修饰，主要有underline 下划线，line-through 删除线,overline为文字加顶线，blink 文字闪烁(部分浏览器支持)
texr-indent：首行缩进，后面跟缩进的长度，一般使用2em来实现缩进两个字
letter-spacing： 控制字母间距
word-sacing:控制单词间距
line-height: 行高
border :添加边框，可以设置粗细，颜色和虚实
margin 外边框 后面两个参数分别是设置上下距离和左右距离
text-align : 设置文本的水平位置，left,right,center, justify(两端对齐)
background: 设置背景色
text-shadow: 给图片添加阴影效果，后面四个参数是x轴的偏移尺寸，y轴的便宜尺寸，阴影半径，阴影颜色
颜色
- rgba () 第四个参数是透明度
CSS设置图片属性
border-width 设置边框的粗细
border-color 设置边框的颜色
border-style 线性，可以在一些预先定义好的线型中选择
也可以
border-上下左右-属性 来单独设置上下左右的边框
甚至可以直接border ： 后面写大小类型和颜色
例如： border : plum 2px dotted;
实现文字环绕：
float : 将图片移动到页面左侧或者右侧从而使得文字能够从另一端来环绕
盒模型
DOM ：document object model 文档对象模型 ^eb3dd6
padding -border-margin 模型 (顺序是上右下左)
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
一个盒模型包括：content(内容) 、padding(内边距) 、border(内容的边框), margin (外边距)
标准文档流：normal document stream
div 区块容器标记，里面可以容纳各种HTML元素，可以将div看作一个对象
span 也是区块标记
二者区别： div 内的元素可以自动换行，
span 不会换行，没结构上的意义，仅仅是一个行内元素，当其他行内元素不适合的时候就可以使用span了
span 可以包含在div中，但是div不能包含在span 中，使用display来让行内元素表现的像块级元素
相邻的两个行内元素的margin 是第一个的right-margin 第二个的left-margin 之和
边距控制
- border-bottom
背景
background-image : url() 插入图片，
一般情况下，图片会自动向水平和数值两个方向平铺，可以使·用以下属性来进行控制
background-repeat :
repeat 默认，沿水平和竖直方向平铺
no-repeat 不平铺，只显示一次
repeat-x 沿水平平铺
repeat-y 沿竖直方向平铺
background-position 设置背景的位置
也是可以合并为一行的: 直接background + 属性即可
background-radius： 来设置盒模型的四个角是否圆滑 ， 后面的四个参数是从左上角开始，顺时针旋转的
box-shadow 给盒模型设置阴影， 后面四个参数分别是水平偏移量，垂直偏移量，模糊，阴影扩展尺寸，阴影颜色，外部阴影或者是内部阴影
background 函数
linear-gradient(direction,指定渐变方向,color-stop1,...)链接：
想要打开一个新的窗口，需要在a标签中使用target 属性，并将其设置为_bank
### 对鼠标的操作进行反应的元素(任何html元素都能做到)
常规选择器 + : +
- link 常规状态
- visited 点击过之后
- hover 悬停状态
- active 点击时
### 使用CSS对超链接进行修饰
- text-decoration 包括color,line,style,thickness
a{/*通用*/
text-decoration: none;
}
/*以下是使用了CSS伪类型属性来进行修饰*/
/*
设置顺寻时 LoVw HaTe 爱恨
link
visited
hover
active
*/
a:link{ /*普通浏览*/
color: black;
}
a:visited{/*点击过之后*/
color: black;
}
a:hover{ /*鼠标指针经过时*/
color: plum;
text-decoration: underline;
}
a:active{/*点击时*/
color: blue;
}filter
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
修饰鼠标指针
cursor :属性即可
修饰列表
list-style-type：
属性有：
disc 实心圆、
circle 空心圆
square :正方形
decimal : 十进制数字
upper-alpha 大写字母
lower-alpha 小写字母
upper-roman 大写罗马数字
lower-roman 小写罗马数字
none 不显示任何符号
JavaScript
~~比起c语法更像是Java~~
组成：
ECMAScript,DOM , BOM
1. ECMScript 语言
2. DOM 文档对象模型，使用节点来web
3. BOM 浏览器对象模型
### 语法：
区分大小写，变量无类型，只需要使用let进行声明即可，可初始化为任意类型的值
### 数据类型
```js
number 数字包括，整数小数,NaN Not a Number
string
boolean
null 对象未空
undefined 当声明的变量未初始化时该变量的默认值
使用typeof 来获取数据的类型注释与C相同
HTML中的调取方式：
1.使用 script 标签直接调用
2.通过 script 中src属性进行调用外部文件
var和let的区别
var 声明是全局作用域或函数作用域，而 let 和 const 是块作用域。 var 变量可以在其范围内更新和重新声明； let 变量可以被更新但不能重新声明； const 变量既不能更新也不能重新声明。 它们都被提升到其作用域的顶端
判断
JavaScript中 == 在比较两侧对象时，如果不同吗，会将其转化为同一个类型再比较，而 === 严格等于不会强制类型转换
!= 不等于 !== 不严格等于
jQuery
是JavaScript的一个库，简化 了js的操作
包含功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
使用方式: 查询使用版本，F12打开控制台之后从console中输入$.fn.jquery 即可查询<script src = "本地的jQuery文件或者CDN的url即可" - 基础语法: 通过选取HTML元素对选取的元素执行操作
防止在文档未完全加在就绪之前就运行jQuery代码，可以使用以下两种方式之一来解决$(selector).action() selector 选择符 查询和查找HTML元素 action() 执行对元素的操作 //示例 $(this).hide() 隐藏当前元素 $("p").hide() 隐藏所有<p>元素 $("p.test").hide() class = "test" $("#test").hide() id = "test"
选择器:$(document).ready(function(){ // 开始写 jQuery 代码... }); 或者 $(function(){ // 开始写 jQuery 代码... }); - 所有元素
- this
- .class
- “#id”
- xxx:first 第几个xxx元素
- 后代用空格隔开
- “[herf]” 选取带有herf 属性的元素
- “A[B=’C’]” 或者 “A[B!=’C’]” 选取所有B属性值为C或者不为C的A的元素
- :button 选取所有type = button的元素
常用的事件方法： - click()点击
- dbclick()双击
- mouseenter鼠标穿过元素时会发生
- mouseleave鼠标离开元素
- mousedown 鼠标移动到元素上并进行按下
- mouseup 松开鼠标按键
- hover悬停
- focus 获得焦点
- blur 失去焦点
效果: - hide，隐藏，show显示
- toggle 在hide和show之间进行切换
- fadeIn淡入，fadeOut 淡出, fade Toggle()切换淡入淡出
- fade To() 允许渐变给不透明度
- $(selector).fadeTo(speed,opacity,callback);
- 滑动 slideDown向下滑， slideUp向上滑, slideToggle()切换
- 动画操作: $(selector).animate({params},speed,callback);
- params定义动画CSS属性，可使用相对值, +xxx
- 使用队列:
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); - 停止动画: stop()
- 动画链: 连续点即可 $(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);
DOM操作
- text 设置或返回所选元素的文本内容
- html 设置或返回所选元素的内容 包括html标签
- val 设置或返回表单字段的值
- attr 获得属性值
- append 在被选中元素的结尾追加内容
- prepend 在被选中元素的开头插入内容‘
- after 在被选中元素之后加入内容
- before 在被选中元素之前加入内容
- remove 删除元素
- empty 从被选中元素删除子元素
操作CSS类 (要提前定义css样式才能添加)
- addClass 向被选中元素添加一个或多个类
- removeClass 从被选中元素删除一个或多个类
- toggleClass 对被选中元素进行添加/删除的切换擦偶哦在
- css 设置或返回样式属性 (可直接添加属性值)
- $(“p”).css(“background-color”,”yellow”);
- $(“p”).css({“background-color”:”yellow”,”font-size”:”200%”})
尺寸 - width , height , (context大小)
- innerWidth , innerHight ,(内边框,padding)
- outerWidth , outerHight (margin)
遍历DOM树
- 向上遍历
- parent
- parent 向上到根元素
- parentsUntil 返回介于两个给定元素之间的祖先元素
- 向下遍历
- children 直接子元素
- find 查找到最后一个元素
- 同级遍历
- siblings 所有同级元素
- next 下一个同胞元素
- nextAll 下一个所有同胞
- nextUntil
- jQuery prev(), prevAll() & prevUntil()
- 过滤
- first 被选元素的首个元素
- last
- eq返回都带有指定索引号的元素(索引从0开始)
- filter 过滤条件
- not
jQuery AJAX使用
- load 从服务器加在数据并把返回的数据放入备选元素中
- $(selector).load(URL,data,callback)
- get() post()
$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); }); /////////////////////////////////////// $("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });
例如：
let a = 1;
let b = "1";
console.log(a == b);
console.log(a === b);
//输出为
true
false
let a = 1;
let b = "1";
console.log(a != b); //不进行类型转换
console.log(a !== b); // 进行类型转换
//输出为:
false
truefor of 语句 (和foreach 一样)
for (a of b){
}for in 枚举对象的的属性
函数：两种写法
function name (){
}.
//或者
name = function(){
}通过使用argumens对象，可以 不用声明形参的名称
arguments[0] 即为第一个形参
arguments.length() 可以获得传入函数中的参量个数，从而用于判断。
箭头函数(类似于Lambda表达式)
let name = (参数) => { }类是具有相同属性和功能的“对象” 的抽象
对象是从类中创建的实例
属性是对象中的变量
方法是类中的函数
引用类型：Boolean ， Number 和String 类比Java
对象：
var person = {
xxx : xxx
};赋值
let myCar = {
size : "large",
color : "blue",
eat : function () {
console.log("吃吃吃");
}
}
let {size , color} = myCar; // 同名可用这种方式一键赋值
console.log(size);
console.log(color);集合
数组
数组进行复制:
let a = [1 , 2 , 3 , 4]
let b = [...a];;
//补充，对象复制
let obj = {name : "Bob" };
let c = {...obj};JavaScript中数组内容的类型可以不一致
解构数组：
array的函数
push , pop
unshift() 从头部增加 shift() 从头部开始删除第一个元素，并返回
splice(start , deleteCount) 删除指定位置 第二个参数可选，并且代表要删除几个元素
sort
indexOf() 从头开始查找 lastIndexOf () 从尾开始查找，两个参数分别是要查找的内容和开始查找的位置
forEach() 为每一个元素执行一个函数
map() 返回一个由指定函数调用后得到的新数组
let array = [1 , 2, 3, 4, 5]; let b = array.map(e=>{ return e *2 ; })//使用map建立一个新数组 for (a of b){ console.log(a); } let c = array.filter(x => x < 5)//filter用于过滤数组的某些数据 for (a of c){ console.log(a); } console.log(array[1]);//打印出了map[a[]] = b[]every 每个元素都当作参数，所有都满足才返回true
some 部分满足即可true
slice 截取一部分
joint(‘,’) 将数组转化为字符串并返回
展开运算符 数组[…] 即可展开
Map
- set(“key” ,”value”)
- for (let [key , value] of map)
- for (let key of map) for (let value of map)
- forEach(函数)
- 合并 自己看文档喽
Set
- add
- 并集，交集，差集 自己看
BOM对象
window对象，用于操作浏览器的窗口
常用的有 第三个参数与新窗口有关，自己去看
- moveBy(x , y) 将窗口向又或者向下移动 - moveTo(x ,y) 移动到指定位置 - resizeBy (dw , dh) 缩放 - resizeTo (w ,h ) 缩放到指定窗口大小 - alert() 输出 - prompt() 读入用户输入 - confirm() 显示确认和取消 确定 返回值是true - setinterval() 按照指定周期来调用函数和表达式 参数未函数 + 毫秒数 - setTimeout() 在指定毫秒数后调用函数计算表达式location 对象，用于分析和设置页面的URL，主要是window 和 document 对象的属性
直接使用location . xxx 即可有以下属性
- hash 如果URL包含书签#，则返回#后边的内容 - host 服务器的名称 - <u>**herf**</u> 当前载入的完整的URL - pathname URL 中主机后面的部分 - port 请求端口 - protocol 协议 - search 执行GET请求的URL中 ? 之后的部分补充：URL
URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 web 服务器的拥有者需要认真地维护资源以及与它关联的 URL。
navigator 对象， 进行客户端检测
- appCodeName 浏览器代码名的字符串表示 - appName 官方浏览器名的字符串表示 - appVersion 浏览器版本信息表示 - javaEnabled() 是否启用了Java - platform 运行浏览器的计算机平台字符串表示 - plugins 安装在浏览器中的插件组数 - userAgent 用户代理头字符串的字符串表示 最常用screen 对象 也是 window对象的属性
- availHeight 窗口可以使用的屏幕高度 - availWidth - colorDepth 用户表示颜色位数 - height 屏幕高度 - widthhistory 导航历史记录
- go( ) 前进后退几页，也可以使用字符串，导航到包哦含这个字符串的第一个也米娜 - back() - forward() - length 历史记录中有多个条目，可以来判断当前是不是你的第一个页面DOM
将标记语言的各个组成部分封装为对应的对象
Document 整个文档对象
Element 元素对象
Text 文本对象
Comment 注释对象js可以通过DOM对HTML进行操作和做出反应 ^6aefb6
组成
- [[Web学习#^6aefb6|Core DOM 所有文档类型的标准模型]]
- XML DOM XML 文档的标准模型
- HTML DOM HTML 文档的标准模型
常用函数
具体的标签对象的属性和函数去MDN里看看
//通过id值查找对象
var h1 = doucument.getElementById1('h1')
//以下函数无法查找特定的某一个对象，所以返回的一个对象数组
//根据标签名查找对象
var divs = document.getElementsByTagName('div')
//根据name来获取
getElementsByName('hobby')
//根据class 来获取
getElementsByClassName('cls')事件绑定
- 通过HTML标签中的属性来绑定
<input type = "button" onclick = "on()" value1 = "按钮1" > <script> function on () { alert ('我被点击了'); } </script> - 通过DOM元素来绑定
<input type = "button" id = "btn" value = "按钮2" > <script> document.getElementById('btn').onclick = function(){ alert('我被点击了'); }
React
JavaScript的一个第三方库
react app 由组件组成，react组件是返回html标签的JavaScript函数
react 的组件可以用作类似于html的标签，区别是React 组件必须以大写字母开头，HTML标签必须以小写字母开头
JavaScript的component实际上就是JavaBean
例如:
function MyButton() {
return (
<button>I'm a button</button>
);
}之后MyButton可作为标签使用
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}hotloader是好东西
React命名:
HTML中的类为 class ，而React中的class命名为className
<h4 className="Profile-subTitle">About Me</h4>类名为：组件名(文件名) 扩折号 文件中的作用名，遵循驼峰
使用 import xxx from “xxx” 来在js文件中导入其他的component
使用 import “xxx.css” 来从导入css文件
使用 export default xxx 来导出这个组件，从而让其他文件能够调用这个组件
具体可看示例 catbook-react
JSON
使用js对象标记法书写的文本
格式：
//这个变量是一个字符串类型的，不是对象
var 变量 = '{"key1" : value1 , "key2" : value2}';//单引号来表名时变量类型
//JSON 字符串和js对象转化
var jsObject = JSON.parse(userStr)
var jsonStr = JSON.stringify(jsObject)后端
HTTP
组成：URL + Methods + Request Headers + Request Body
URL 文件定位，网址 (定位)
URI主要用于标识网络资源名称（比如网址）标识唯一的资源 (身份证)
网络通信三要素
- ip:计算机在网络中的唯一标识
- 端口: 应用程序在计算机中的唯一表示
- 传输协议:
- tcp 安全协议，三次握手,四次挥手 教程
- udp 不安全协议
HTTP协议
- 请求行大写请求方式，URL,请求协议，版本号
- 请求头存放请求参数和值，键值对的方式， 参数名:参数值
- 请求空行一行来区分请求头和请求体
- get方式没有请求体
Methods
GET方法请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据。HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用。PUT方法用有效载荷请求替换目标资源的所有当前表示。DELETE方法删除指定的资源。CONNECT方法建立一个到由目标资源标识的服务器的隧道。OPTIONS方法用于描述目标资源的通信选项。TRACE方法沿着到目标资源的路径执行一个消息环回测试。PATCH方法用于对资源应用部分修改。
响应部分
- 响应行 : 协议，版本号，状态码，状态描述信息
- 响应头 : 参数和值， 参数名 : 参数值
- 响应体 : html 格式
状态码：
1xx：信息
2xx：succeeded
3xx：redirect 重定向
4xx: 你请求出错
5xx：服务器出错
API
应用程序接口（英语：application programming interface[1]），缩写为API[2]，是一种计算接口，它定义多个软件中介之间的交互，以及可以进行的调用（call）或请求（request）的种类，如何进行调用或发出请求，应使用的数据格式，应遵循的惯例等。它还可以提供扩展机制，以便用户可以通过各种方式对现有功能进行不同程度的扩展[3]。一个API可以是完全定制的，针对某个组件的，也可以是基于行业标准设计的以确保互操作性。通过信息隐藏，API实现了模块化编程，从而允许用户实现独立地使用接口。
目的：
@RestController //加上这个之后变为请求处理类
public class HelloController {
@RequestMapping("/hello")
public String hello(){
return "hello world!";
}一些参数的实现
形式良好的 XML 文档
“形式良好”的 XML 文档拥有正确的语法。
在前面的章节描述的语法规则：
- XML 文档必须有一个根元素
- XML元素都必须有一个关闭标签
- XML 标签对大小写敏感
- XML 元素必须被正确的嵌套
- XML 属性值必须加引号
在 XML 中，有 5 个预定义的实体引用：
| < | < | less than |
| > | > | greater than |
| & | & | ampersand |
| ' | ‘ | apostrophe |
| " | “ | quotation mark |
Servlet
是接口，使用时要自己实现
web.xml中配置（可用注解实现了，暴怒需要这么写了）
<!-- Servlets -->
<!-- 配置类名和路径-->
<servlet>
<servlet-name>demo1</servlet-name>
<servlet-class>com.example.servelet_study.servlet.ServletDemo1</servlet-class>
</servlet>
<!-- 配置请求路径 -->
<servlet-mapping>
<servlet-name>demo1</servlet-name>
<url-pattern>/demo1</url-pattern>
</servlet-mapping>
<!-- 配置servlet的init时间 -->
<load-on-startup> 数字 </load-on-startup> 数字为正数时可以在服务器启动时被创建，为 负数时可以在第一次访问的时候进行加载注解
@WebServlet( "/...","/...","/...")接口方法
init() 在第一次创建Servlet时被调用
service() 在被访问时会被调用，会适当的调用doGet等方法
destroy()
getSercletConfig() 获取配置文件
getServletInfo () 获取servlet版本信息## 分层解耦
### 三层架构
1. controller : 控制层 ，接受前端发送的请求，对请求进行处理，并响应数据
2. service: 业务逻辑层，处理具体的业务逻辑
3. dao 数据访问层(Data Access Object ) (持久层),负责数据的访问操作，包括增删改查
### IOC & DI
```java
@Component 将当前类交给IOC 容器 //加在需要被new的对象所在的层
@Autowired 运行时IOC 容器会提供该类型的bean并赋值给变量 依赖注入 //加在controller层
加上之后就不需要自己进行new对象了，直接建立对象变量即可
//其他注解
@Component 声明bean的基础注解
//以下在web中常用
@Controller 标注在控制器上
@Service 标注在业务类上
//DI注解
@Autowired 默认是按照类型进行的，如果存在多个相同的类型的bean就会出现报错
@Primary 想要哪个bean被注入就直接加在那个类前面
@Qualifier("value") 在使用的时候加上这个，value为bean的名字
@Resource (name = "")
HttpServletRequest中常用的方法
- Map getParameterMap()
获取包含所有请求参数及值的 Map 对象。需要注意，该 Map 的 value 为 String[]，即一个参数所对应的值为一个数组。说明一个参数可以对应多个值。 - Enumeration getParameterNames()
获取请求参数 Map 的所有 key,即获取所有请求参数名。 - String[] getParameterValues(String name)
根据指定的请求参数名称，获取其对应的所有值。这个方法一般用于获取复选框(checkbox)数据。 - String getParameter(String name)
根据指定的请求参数名称，获取其对应的值。若该参数名称对应的是多个值，则该方法获取到的是第一个值。这个方法是最常用的方法。
获取客户端信息的方法：
- getRequestURL方法返回客户端发出请求时的完整URL。
- getRequestURI方法返回请求行中的资源名部分。
- getQueryString 方法返回请求行中的参数部分。
- getRemoteAddr方法返回发出请求的客户机的IP地址
- getRemoteHost方法返回发出请求的客户机的完整主机名
- getRemotePort方法返回客户机所使用的网络端口号
- getLocalAddr方法返回WEB服务器的IP地址。
- getLocalName方法返回WEB服务器的主机名
- getMethod得到客户机请求方式
request.setAttribute("test","hello"); 暂存req请求中的信息 equest.getRequestDispacther("/test.jsp").forword(request,response); 转发 response.sendRedirect("test.jsp"); 重定向
filter
由于表单的post 提交方式，所以要编写好编码的过滤器来支持中文存取
Vue
免除js中的 DOM操作简化书写
- 新建html页面引入Vue.js文件
- 创建Vue核心对象，定义数据模型
<script> new Vue ({ el : "#app", //Vue要控制哪个区， #+id 类似css的选择器 data : {//数据模型 message : "hello Vue" } method :{ //定义函数 } }) </script> - 编写视图
<div id = "app" > <input type = "text" v-model = "message"> //绑定数据模型 {{ message }} //直接获取数据模型中的数据进行展示 </div> // {{}} 插值表达式，中间可以填入 变量，三元运算符，函数调用，算数运算 v-model = "" 模型绑定
常用指令
v-bind 为HTML 标签绑定属性值，例如设置href , css 样式
或者直接 : + href ...
v-model 在表单元素上实现双向数据绑定
v-on 为HTML绑定事务 v-on:click 可简写为@click
//
//
v-if
v-else-if 条件性的渲染某元素
v-else
v-show 根据条件显示某元素，区别是切换的是display属性的值
v-for 列表渲染，遍历容器的元素或对象的属性生命周期及其对应的方法
Ajax : 异步的js和xml
Axios
简化了Axios npm install axios
在入口文件引入
import axios from "axios";
//把axios全局导出
app.config.globalProperties.$axios = axios;- 发送多个请求
//定义两个异步函数 function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } //等待两个都执行完毕再返回结果 Promise.all([getUserAccount(), getUserPermissions()]) .then(function ([acct, perm]) { // ... }); - 使用时只需要在axios中传入config即可
- 创建一个自定义的实例
const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); - config配置详解
- 拦截器
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); }); - 错误处理
Nginx
Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件（IMAP/POP3）代理服务器。
什么是反向代理？
反向代理（Reverse Proxy）方式是指以代理服务器来接受 internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 internet 上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。
nginx -s stop 快速关闭Nginx，可能不保存相关信息，并迅速终止web服务。
nginx -s quit 平稳关闭Nginx，保存相关信息，有安排的结束web服务。
nginx -s reload 因改变了Nginx相关配置，需要重新加载配置而重载。
nginx -s reopen 重新打开日志文件。
nginx -c filename 为 Nginx 指定一个配置文件，来代替缺省的。
nginx -t 不运行，仅仅测试配置文件。nginx 将检查配置文件的语法的正确性，并尝试打开配置文件中所引用到的文件。
nginx -v 显示 nginx 的版本。
nginx -V 显示 nginx 的版本，编译器版本和配置参数。使用
启动nginx服务，启动时会一闪而过是正常的
start nginx
查看任务进程是否存在，dos或打开任务管理器都行
tasklist /fi “imagename eq nginx.exe”
Vue
Element
maven
用于项目管理构建和依赖管理，将依赖写入到maven配置文件中即可自动下载到项目中
- https://m.imooc.com/wiki/mavenlesson-maveninstall
- 构建项目
mvn archetype:generate -DgroupId=com.mic.tech -DartifactId=firstProject -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
- -DgourpId: 组织名，一般为公司网址的反写；
- -DartifactId: 项目名-模块名；
- -DarchetypeArtifactId: 用来指定 ArchetypeId，这里用到的是maven-archetype-quickstart，即创建一个简单 Java 应用；
- -DinteractiveMode: 是否使用交互模式。
- idea已经内置maven
添加外部依赖
将外部文件导入到项目中，配置pom.xml
<dependencies>
<!-- 在这里添加你的依赖 -->
<dependency>
<groupId>ldapjdk</groupId> <!-- 库名称，也可以自定义 -->
<artifactId>ldapjdk</artifactId> <!--库名称，也可以自定义-->
<version>1.0</version> <!--版本号-->
<scope>system</scope> <!--作用域-->
<systemPath>${basedir}\src\lib\ldapjdk.jar</systemPath> <!--项目根目录下
的lib文件夹下-->
</dependency>
</dependencies>JSP
cookie存储在客户端，session 存储在服务器端
基本语法
<% 代码 %>
<%! int i = 0 ; %> 变量声明
<%= 表达式 %> 表达式声明
<%-- 注释 --%> 注释，注释内容 不会被发送到浏览器
<!-- html注释 --> 可以通过查看源代码来进行查看
if --else 语法
<% if (day == 1 || day == 7) { %>
<p>今天是周末</p>
<% } else { %>
<p>今天不是周末</p>
<% } %>
switch
<%
switch(day) {
case 0:
out.println("星期天");
break;
case 1:
out.println("星期一");
break;
case 2:
out.println("星期二");
break;
case 3:
out.println("星期三");
break;
case 4:
out.println("星期四");
break;
case 5:
out.println("星期五");
break;
default:
out.println("星期六");
}
%>
for循环
<%for ( fontSize = 1; fontSize <= 3; fontSize++){ %>
<font color="green" size="<%= fontSize %>">
菜鸟教程
</font><br />
<%}%>
while循环
<%while ( fontSize <= 3){ %>
<font color="green" size="<%= fontSize %>">
菜鸟教程
</font><br />
<%fontSize++;%>
<%}%>JSP行为
使用xml语法来控制servlet引擎，能够动态插入一个文件重用Javabean组件，切换页面
<jsp :action_name attribute attribute = "value"/>
action_name :
include 在当前页面包含静态
useBean 寻找和初始化一个java组件
setProperty 设置JavaBean组件的值
getProperty 将JavaBean 组件的值插入到output中
forward 从一个jsp文件向另一个文件传递一个包含用户请求的request 对象
plugin 再生成的html页面中包含Applet和JavaBean对象
element 动态创建一个xml元素
attribute 定义动态创建的xml元素的属性
body 动态创建xml元素主体
text 用于封装数据
JSP 指令
<%@ 指令 %>
主要指令有:
page 定义网页依赖属性 脚本语言,error页面，缓存需求等
page相关的属性
buffer 指定out对象使用缓冲区大小
autoFlush 控制out 对象的缓存区
conteneType 指定当前JSP 页面发生异常时需要转向的错误处理页面
error Page 指定当JSP页面发生异常时需要转向的错误处理页面
isErrorPage 指定当前页面是否可以作为另一个JSP页面的错误处理页面
extends servlet 从哪个类继承
import 导入要使用的java 类
info 定义jsp页面的表述信息
isThreadSafe 指定对JSP页面的访问是否为线程安全
language 定义JSP页面所用的脚本语言，默认是Java
session 指定JSP页面是否使用session
isELIgnored 指定是否执行EL表达式
isScriptingEnabled 确定脚本元素能否被使用
include 包含其他文件
<%@ include file = "文件的相对url" %>
taglib 引入标签库的定义，可以自定义标签
<% tagelib uri = "uri" prefix = "refix0Tag" %>
uri 标签库的位置 prefix 指定标签库的前缀JSP动作元素
JSP动作元素在请求阶段处理阶段起作用，且使用的时xml语法
语法：
<jsp: action_name attribute = "" />
include 在页面被请求的时候引入一个文件
page = "url" flush = "true or false" 定义在包含资源前是否刷新缓存区
useBean 寻找或者实例化一个JavaBean
<jsp:useBean id="name" class="package.class" />
class指定Bean的完整包名。
type 指定将引用该对象变量的类型。
beanName 通过 java.beans.Beans 的 instantiate() 方法指定Bean的名字。
setProperty 设置JavaBean的属性
将其放在useBean中只会在找到一个Bean示例才会进行执行
放在外部则不论是否找到bean都会执行
属性: name 表示要设置属性的是哪个bean
property 无论要设置哪个属性都有一个特殊用法
value 指定bean属性的值
param 指定用哪个参数作为Bean属性的值
getProperty 输出某个JavaBean的属性
提取对应的Bean属性的值，转化为字符串然后输出
name 药检所的bean属性名称
property 表示要提取属性的值
forward 把请求转到一个新的界面
plugin 根据浏览器类型为Java插件生成obeject 活embed 标记
element 定义动态xml元素
attribute 设置动态定义的xml属性
body 动态定义的xml内容
text 在jsp页面和文档中使用写入文本的模板JSP隐式对象，可以直接使用而不显示声明
- request 对象 ^8a3722
- response对象
- out
- session 用来追踪在各个客户端请求间的会话
- application 代表这这个JSP页面
- config
- pageContext 代表整个jsp页面，存储了request和response的引用，application 对象，config , session . out可以访问这个对象来导出
- page == this
- exception
request(同servlet中的request)
| 1 | Cookie[] getCookies() 返回客户端所有的Cookie的数组 |
| 2 | Enumeration getAttributeNames() 返回request对象的所有属性名称的集合 |
| 3 | Enumeration getHeaderNames() 返回所有HTTP头的名称集合 |
| 4 | Enumeration getParameterNames() 返回请求中所有参数的集合 |
| 5 | HttpSession getSession() 返回request对应的session对象，如果没有，则创建一个 |
| 6 | HttpSession getSession(boolean create) 返回request对应的session对象，如果没有并且参数create为true，则返回一个新的session对象 |
| 7 | Locale getLocale() 返回当前页的Locale对象，可以在response中设置 |
| 8 | Object getAttribute(String name) 返回名称为name的属性值，如果不存在则返回null。 |
| 9 | ServletInputStream getInputStream() 返回请求的输入流 |
| 10 | String getAuthType() 返回认证方案的名称，用来保护servlet，比如 “BASIC” 或者 “SSL” 或 null 如果 JSP没设置保护措施 |
| 11 | String getCharacterEncoding() 返回request的字符编码集名称 |
| 12 | String getContentType() 返回request主体的MIME类型，若未知则返回null |
| 13 | String getContextPath() 返回request URI中指明的上下文路径 |
| 14 | String getHeader(String name) 返回name指定的信息头 |
| 15 | String getMethod() 返回此request中的HTTP方法，比如 GET,，POST，或PUT |
| 16 | String getParameter(String name) 返回此request中name指定的参数，若不存在则返回null |
| 17 | String getPathInfo() 返回任何额外的与此request URL相关的路径 |
| 18 | String getProtocol() 返回此request所使用的协议名和版本 |
| 19 | String getQueryString() 返回此 request URL包含的查询字符串 |
| 20 | String getRemoteAddr() 返回客户端的IP地址 |
| 21 | String getRemoteHost() 返回客户端的完整名称 |
| 22 | String getRemoteUser() 返回客户端通过登录认证的用户，若用户未认证则返回null |
| 23 | String getRequestURI() 返回request的URI |
| 24 | String getRequestedSessionId() 返回request指定的session ID |
| 25 | String getServletPath() 返回所请求的servlet路径 |
| 26 | String[] getParameterValues(String name) 返回指定名称的参数的所有值，若不存在则返回null |
| 27 | boolean isSecure() 返回request是否使用了加密通道，比如HTTPS |
| 28 | int getContentLength() 返回request主体所包含的字节数，若未知的返回-1 |
| 29 | int getIntHeader(String name) 返回指定名称的request信息头的值 |
| 30 | int getServerPort() 返回服务器端口号 |