利用github page搭建个人网页的过程：先在github里新建一个repository
对repository的settings进行设置：
将git repository clone到本地任意盘，然后打开webstorm创建一个本地对应project，以后只要将本地project目录下的内容copy到git
repository目录就行，
后续通过git bash 进行代码commit到git上（貌似webstorm也可自动commit）
进行git同步，在repository目录直接git bash：
输入网址，查看自己个人网站效果：
水平垂直居中方法一：通过left：50%；top：50%；margin-left和margin-top为center_1div宽高一半的负值
不定高盒子水平垂直居中这样可实现否？（如水平垂直居中方法一）
我才是正宗的不定高盒子水平垂直居中！
我实现了不定宽高的盒子居中！！！77777777778888888888888
水平垂直居中方法二：通过flex布局
@@@字符串相关@@@
12
语法：
window.open([URL], [窗口名称], [参数字符串])
参数说明：
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，
那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
点击一下，查看js中操作符之间的优先级
举个例子：
false体会一下清除浮动与不清除的效果！
使用了浮动的div好像在body里面撑不开内容，就像不显示一样的原因
div如果是没有内容的默认是不被撑开的，再有如果div里面的元素全部浮动了，而你有没有清除浮动，那么div会出现高度“塌陷”，也是没有高度的。 再有如果你div里面仅有一个元素，并且定义了absolute或者fixed，那么这个div也是没有高度的。不知道你是否是以上情况中的一个。如果有最简单的 方法就是将div设置一个理想的高度
浮动产生的原因，负作用以及清除浮动的三种方法（介绍得很好，很仔细！）
什么时候需要清除浮动，清除浮动有哪些方法（简书上的回答），也写的非常精湛，易理解！
与此同时，这就牵扯到关于文档流，以及如何脱离文档流的方法（之一就是设置浮动，还有position:absolute;和 position:fixed(相对于浏览器窗口定位）的方法
里面揭示了一个关于不清除浮动，为什么后面元素的内容如p标签里的内容出现位置如此奇怪的原因：
注意！！！：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置， 环绕在该元素的周围。
这也是利用浮动特性实现文字环绕效果的深刻体会呀！
父元素设置了position：absolute；或position：fixed之后，子div设置float失效。
js变量命名规则：
1.必须以字母、下划线或美元符$开头，后面可以跟字母、下划线、美元符号和数字。如下：
正确：
mynum
_mychar
$numa1
错误:
6num //开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(% + /等)
sum+num //开头中间不能使用除(_ $)外特殊符号，如(% + /等)
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。
声明变量语法：var 变量名;
var关键字的作用是声明变量，并为变量准备位置（即内存）
var也可以一次声明多个变量，变量之间用“，”逗号隔开
var num1,num2;
注意：变量也可以不声明，直接使用，但为了规范，需要先声明，再使用。
1.number
2.string
3.boolean
4.undefined
5.null
6.object
如何判断变量类型example：
undefined
1,2,3
object
number
false
注意
1. 查找HTML元素使用querySelector()方法；
2. 判断相等时尽量使用“===”别用‘’==‘’，‘’===‘’是属性相等类型相等；
3. null和undefined都是false，number类型中0为false其他值为1；
4. 尽量别使用‘i++’，使用‘i+=i’和‘i=i+1’，在Python不能使用i++这种形式。
JS中null和undefined的区别：
原文链接：
https://www.cnblogs.com/dyh-air/articles/7943295.html
判断变量不为空
一般不用
if(obj==""){}
而用
if(obj){}
原文链接一：
https://blog.csdn.net/qq_42650983/article/details/80975011
原文链接二：
https://www.cnblogs.com/zhengyeye/p/6485124.html
Tab切换实现过程中体会到的getElementsByClassName的神奇之处
js中getElementsByClassName获取到的是一个对象（object），虽然不是数组类型，但是是一种array-like（类数组）对象，
是HTMLCollection,在javascript有array之前就已经存在的东西。
关于getElementsByClassName获取到的对象到底是什么类型？
块级元素设置text-indent才会有效的，span标签设置text-indent无效，a超链接标签设置text-indent无效，因为span和a标签不像
div标签和p标签那样默认
是块元素（默认独占一行才具有空间性）。
轮播图所用技能点：【1】DOM操作【2】定时器【3】事件运用【4】JS动画【5】函数递归【6】无限滚动法
定时器体现在轮播图会自动轮播；无限滚动法的应用使得到了轮播图最后一张图片时，继续轮播，会回到第一张图片。
对于轮播，可以自己吃透js控制，自己动手写复杂的代码实现，但是往往在实际生产活动中，我们都喜欢用一些省事的插件或者框架去实现，
所以轮播图有非常非常多的实现方法，我们尽量掌握最原始的原理，然后学会熟练使用几个轮播图插件。
margin：auto探索出的关于水平垂直居中的另一个小方法！
777777777777777777777777777777777777777777777777777777777777
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
我aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaa aaaa aaaaaa aaaaaaaa aaaa aaaaaaa aaaaa aaaaaa aaaaaaaaaaaaaaaaa
是不是很奇怪，为什么会出现内容溢出？
详解原文链接:
https://zhidao.baidu.com/question/647626760350972565.html
margin塌陷现象的解决：
原文链接：
https://www.cnblogs.com/hugejinfan/p/5901320.html
数组内容输出：60,70,80
数组增加一个元素后，数组长度增加了，那未赋初值的那些数组元素默认为0还是？
输出看看就知道了
60,70,80,,,100
也可以这样定义数组：在创建数组的同时，为数组指定长度，长度可任意指定。
var myarr=new Array(8);
注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
定义数组，给数组赋值，我们可以“一气呵成”将这两步合为一步
第一种方法：
var myarr=new Array(66,80,90,77,59);
第二种方法：
var myarr=[66,80,90,77,59];
获得数组的长度和获得字符串长度是一致的：
字符串“tanglong”的长度为：8
数组[1,2,3,4,,5,6,7]的长度为：7
二维数组相关
var myarr=new Array() //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; //赋值，每个数组元素的值为i+j
}
}
2.二维数组的定义方法二var myarr=[[0,1,2],[1,2,3]];
输出myarr:0,1,2,1,2,3当有很多种选项的时候，switch比if else 使用更方便
语法：
switch(表达式)
{
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
...
case值n:
执行代码块 n
break;
default:
与 case值1 、 case值2...case值n 不同时执行的代码
}
语法说明：
Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，
执行default后的语句。
下面是switch语句的执行效果：
周末也要花点时间学习呢！！！！
退出循环使用break
数值：1
数值：2
数值：3
数值：4
继续循环使用continue
数值：1
数值：2
数值：3
数值：4
数值：6
数值：7
数值：8
数值：9
数值：10
使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数
2,3的最大值是：3
7,7的最大值是：7
8,5的最大值是：8
什么是事件
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表：
| HTML5新语义元素表 | 这是表头，大多数浏览器会显示为粗体居中文本。 |
|---|---|
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| article | 定义独立的自包含文章 |
| details | 定义额外的细节 |
| summary | 定义details元素的标题 |
w3c上关于h5新的8个语义元素好像更为准确，有意思！
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。
您可以把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为：
实例
header, section, footer, aside, nav, main, article, figure {
display: block;
}
既然学习了table布局，就深入了解些，边框怎样控制，border="1"什么意思？
border="1"的意思是边框宽度为1px；
单元格边距（cellpadding）:单元格内容与边框之间的空白；（h5已经不再支持）
单元格间距（cellspacing）:单元格之间的距离；（h5已经不再支持）
关于cellpadding和cellspacing在h5中不再支持的详细说明--原文链接：
https://www.cnblogs.com/liuyonglong/p/3707872.html
td：table data（单元格数据）；
可以分别给不同的表格行设置background，以颜色来凸显区别；
border-collapse:collapse(设置后将表格中相邻边框合并为一条，默认是separate)
关于<!doctype html>：
原文链接一：
http://www.w3school.com.cn/tags/tag_doctype.asp
原文链接二：
https://blog.csdn.net/weixin_38469425/article/details/79732718
| 版本 | 年份 |
| HTML | 1991 |
| HTML+ | 1993 |
| HTML2.0 | 1995 |
| HTML3.2 | 1997 |
| HTML4.01 | 1999 |
| XHTML1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
HTML字符实体介绍，比如<,>,©等怎么表示
详述见链接：
http://www.w3school.com.cn/html/html_entities.asp
HTML5 - 新特性
HTML5中一些最有趣的新特性：
| 标签 | 描述 |
| <canvas> | 定义使用JavaScript的图像绘制 |
| <svg> | 定义使用SVG的图像绘制 |
<canvas id="myCanvas" width="200" height="100"></canvas> <script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
canvas默认宽高300*150
字符串（string）对象
定义好字符串以后，我们就可以访问它的属性和方法。
1.访问字符串对象的属性length：
字符串Self-learning的长度为：13
2.访问字符串对象的方法：
将字符串字符全部转化为大写后：SELF-LEARNING
将字符串字符全部转化为小写后：self-learning
返回指定位置的字符用string.charAt(index)方法，返回index=4的字符：-
返回指定位置的字符用string.charAt(index)方法中index介于0-（str.length-1）之间
返回指定位置的字符用string.charAt(index)方法中如果参数index不在0-（str.length-1）之间，该方法将返回一个空字符串：
返回指定位置的字符用string.charAt()方法，返回最后一个字符：g
注意：一个空格也算一个字符
字符串分割split（分割标志，也称为separator）方法
www.baidu.com分割后：www,baidu,com
Math对象
使用math的属性和方法：
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
PI的值为：3.141592653589793
数值数组升序降序sort实现
数组numarray[1,5,3,6,9,7,8]从小到大排序后为：1,3,5,6,7,8,9
方法/步骤
1.首先我们需要下载破解补丁，直接百度搜索关键词——IntelliJ IDEA 注册码。进入红框处网站后，下载红框标注的补丁文件。
2.然后将补丁复制到webstorm安装目录的bin文件夹下面。(右键webstorm桌面快捷方式，选择打开文件所在的位置)
3.接下来需要修改文件，使用记事本打开bin文件夹下面的WebStorm.exe.vmoptions 和WebStorm64.exe.vmoptions这两个文件。
4.然后这里非常关键，在打开的文件最后面加上如下代码：
-javaagent:+路径名称+jar包名称，例如图片上我的路径，修改之后保存文件。
注意这里的路径需要替换成你自己的安装路径，并且是左斜杠“/”，jar包的名称也必须是你刚刚下载的jar包名称。
5.保存完毕之后，回到IntelliJ IDEA 注册码的网页，点击中间的获得注册码，然后复制弹出的注册码。
6.重新启动WebStorm，依次点击【help】——【register】——【activation code】，
然后粘贴输入激活码，确认就可以了。
系统右下角会弹出激活提示。
原文链接地址：
https://jingyan.baidu.com/article/77b8dc7faa0ece6174eab6d8.html
因为canvas元素有个默认宽高的问题，我们是不能在style里面去定义canvas宽高的，这样就会出现一个将画布进行拉伸
操作的现象，很影响效果。
<canvas height="200" width="200"><canvas>这种定义宽高的方式是完全ok的，我们要明确一个问题，这里的width、height
和样式style里面的width、height不是同一回事，这里的width、height就是指canvas画布右下角的X、Y坐标。
（有没有发现canvas的宽高定义方法和图片一样，不带单位，但单位就是像素px）
原文链接：
https://www.cnblogs.com/xiaqilin/p/6841661.html
那如何画一个圆或者或圆弧呢？
详细介绍链接：
https://www.cnblogs.com/joyco773/p/5435393.html
下面是我自己在canvas下体会一下如何画圆，和画圆弧。
浏览器对象
介绍浏览器对象中，history,navigator,screen,location等。
window对象是BOM（Browser Object Model,浏览器对象模型）的核心，window指当前的浏览器窗口。
window对象方法：
计时器setInterval
在执行时，从载入页面后每隔指定的时间执行代码
语法：
setInterval(代码，交互时间)；
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
或
setInterval(clock,1000)
利用setInterval()函数显示动态时间：
下面这种动态显示时间的方式是更优的，比较美观格式化！
原文链接：
https://bbs.csdn.net/topics/390256532
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
使用setTimeout()实现计数统计效果，并在文本框中显示数值。
由此联想到倒计时效果，并在文本框中显示数值。
History对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：
window.history.属性|方法
注意：window可以省略。
History 对象属性
History 对象方法
location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:
location.属性|方法
location对象属性图示:
location对象属性:
location对象方法:
返回当前完整的URL为：https://jackietl1018.github.io/Learning_notes/index.html?utm_source=ld246.com
如何使用css画出三角形
一定要深刻理解border的宽并不是画出来的三角形的边长，下面这张图会让你深刻理解一下：
编程练习：
制作一个跳转提示页面：
要求：
1. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。
2. 如果点击“返回”按钮则返回前一个页面。
效果:
充值完成，5秒后跳回主页！
string与json互相转化
1.string转json
tanglong
tangdong
这个JSON.parse()与eval()都可以实现,但是它们是有区别的,
JSON.parse对json字符串要求比eval()更为严格，key名称(例如name)全部必须有双引号。
而eval必须用括号将json字符串括起来才能成功转换,key名称(例如name)有无双引号都可以成功转化。
2.json转string
object
string
{"name":"tanglong","age":24}
json的key名称(例如name)有无双引号都可以成功用JSON.stringify()实现转化,但是注意我们最好还是将双引号写上
(或者要求后端在返回数据的时候为key名称加上双引号)。
原文链接：
https://www.cnblogs.com/jewave/p/5830637.html
像素与分辨率的区别：
组成图像的最小单位是像素，而屏幕分辨率是由DPI（Dots Per Inch 每英寸点数）决定的，像素不等同于分辨率。
windows配置github ssh key原文链接：
https://blog.csdn.net/MissXy_/article/details/79901949
绝对路径与相对路径，以及涉及到的html中引用文件、css中引用文件和js中引用文件问题：
js中引入图片方法：
https://blog.csdn.net/qq_29273683/article/details/78110657
html不设置font-size时默认字体大小是16px,字体大小最小为12px（浏览器可解析，其实字体最小可以到9px，
12px不过是所有浏览器都支持的，具有普遍性），像素必须是整数，一般要求是偶数的整数，其实奇数也没影响
盛世情微，再无终老777
盛世情微，再无终老777
盛世情微，再无终老777
盛世情微，再无终老777
如果想比9px字体都小，能否实现呢？
点击我，跳转到实现链接...(下面这行文字为实现出来的效果)
盛世情微，再无终老777
盛世情微，再无终老777（最终发现实在无法实现，9px应该已经是最小字体啦！！！）
盛世情微，再无终老777
1.刚开始为了避免激活等麻烦事情，我选择了IDEA community版本，可是在里面配置tomcat的时候遇到一个问题一直没法解决，与下面链接
https://blog.csdn.net/qq_33499534/article/details/85632282
里面描述的情况一模一样
2.于是我弃用了IDEA community版，改用IDEA Ultimate（终极版），具有更加强大的功能，并且也能很方便地配置tomcat。
但是使用IDEA Ultimate版就涉及到一个激活的问题，当然是希望永久激活呀！发现激活过程竟然和WebStorm有异曲同工之妙，
打开百度，搜索IntelliJ IDEA注册码，进入后，如下图：
下载后之后参考IDEA激活链接原文地址：
https://blog.csdn.net/yl1712725180/article/details/80309862
然而把里面的破解码输入到Activation code框里面是不行的，会出现key is invalid的情况，这时候就需要试试好心人下面的评论了，
我的解决办法License is valid till Nov 23, 2017的问题, 在avtivation code页面, 输入jar地址, 我的是 -javaagent:C:\Downloads\Tool\idea\
ideaIU-2018.3.3\bin\JetbrainsIdesCrack-4.2-release-sha1-3323d5d0b82e716609808090d3dc7cb3198b8c4b.jar 即可。
那么，我只要输入自己的jar地址就好，果然ok，成功永久激活IDEA，哈哈！
3.tomcat下载,我点击了红色框进行下载，结果下载到我的电脑本地目录：E:\Choreme_downloads是一个.exe安装文件，然后我进行了安装
好像安装过程中也无法选择安装目录，就默认安装到了C:\Program Files\Apache Software Foundation\Tomcat 9.0，点击蓝色框就是下载压缩包了，
下载好之后解压就可以，无需安装。在此之后，还需要进行
环境变量配置，配置过程如下：
新建系统变量：CATALINA_HOME
变量值：C:\Program Files\Apache Software Foundation\Tomcat 9.0
系统变量Path中添加：%CATALINA_HOME%\bin
然后在cmd命令窗口下输入startup（如果未设置环境变量，会报错，“startup”不是内部或者可执行命令），成功启动tomcat，当然另一种启动方式是
到tomcat的bin目录下点击startup.bat，两种启动方式无论哪种，一旦启动都不能关闭命令窗口，不然就不能访问tomcat主页了，访问tomcat主页的方式是：
网址里输入localhost:8080
可是在我启动IntelliJ IDEA后，一个麻烦的事情出现了，有时候dos窗口下输入startup会报错，win+x快捷键，选择Windows Powershell以管理员身份打开命令窗口，
输入startup倒是可以启动，可是会闪退，之后仍然无法访问tomcat主页。这是因为我们首次运行IDEA，并没有很好地进行配置。
结果我傻愣愣地先dos窗口下启动好了tomcat，然后IDEA里面编译运行时一直报错：报错信息如下：
Error running "Tomcat 9.0.14":Address localhost:8080 is already in use
折腾了好些时间，具体原因很简单，参考链接：
https://zhidao.baidu.com/question/66486087.html
maven安装与在IDEA里面的配置
我的maven下载目录是：E:\Choreme_downloads，下载好压缩包后进行解压，然后进行下面的操作
参考链接：
https://www.cnblogs.com/eagle6688/p/7838224.html
然而，这些弄好之后，我还是没把symphony-demo跑通，编译时还是出了些问题，继续解决好吧，停留两三天了都，暂时性卡住......
先不说没跑通这个事情，即使能跑通，也是需要数据库支持的，为此，我下载好了my sql 数据库（community版本，应该够用吧），
下载目录：E:\Choreme_downloads， 安装目录：C:\Program Files
在不断跑项目的过程中，又遇到一个新的问题，那就是IDEA里面启动tomcat时输出的server log日志文件中文乱码问题：
解决方法：参考原文链接--
https://blog.csdn.net/nan_cheung/article/details/79337273
新问题：在用tomcat跑maven项目的时候，输出的server log日志文件里一个报错信息如下图：
解决方法：参考原文链接--
https://blog.csdn.net/jiankunking/article/details/51462111
