发表于 | 分类于

JavaSE总结

[TOC]

一、day01

JRE(Java Runtime Evironment):Java运行环境。包括Java虚拟机和Java核心类库及其支持文件。

JDK(Java Development Kit):Java开发工具包 。除了JRE外，还包括Java的开发工具，比如编译器(Java.exe)，打包工具(jar.exe)等。

二、day02

2.1 关键字

2.1.1 定义：被java赋予特殊含义的单词。

2.1.2 特点：全部小写。

2.2 标识符

2.2.1 定义：给类、接口、变量等命名的字符序列。

2.2.2 组成：

（1）区分大小写的字母。

（2）数字

（3）$和_

2.2.3 命名规则：

（1）类、接口：单个单词：首字母大写。多个单词：每个单词首字母大写。

（2）变量、方法：单个单词：首字母小写。多个单词：第二个单词开始首字母大写。

（3）包：单级包：全部小写。多级包：用.隔开，全小写。

（4）常量：单个单词：全部大写。多个单词：全部大写，并用_隔开

2.3 注释

//单行注释

/*多行注释*/

/**文档注释*/

2.4 常量

2.4.1 定义：在程序执行过程中其值不发生改变的量。

2.4.2 分类：字面值常量和自定义常量

2.4.3 字面值常量：

整型常量，浮点型常量，布尔常量，字符常量，空常量，字符串常量。

2.4.4 整型常量的四种表现形式：二进制，八进制，十进制，十六进制。

2.5 进制转换

2.5.1 其他进制转到十进制

基数：X进制的基数就是X

系数：该数据每位上的数字就是该数据在此位的系数。

权：从右向左，从0开始编号，每个号码就是数据该位上数字的权。

结果：系数*基数的权次幂之和。

2.5.2 十进制转到其他进制

除以基数取余，直到商为0，余数反写。

2.5.3 进制间的快速转换法

（1）二进制转十进制：8421码

（2）二进制转八进制：从右往左，三位一隔，不够补0，然后按照二进制转十进制的方法对每三位进行转换，最后将转换后的数据拼接。

（3）二进制转十六进制：从右往左，四位一隔，不够补0，然后按照二进制转十进制的方法对每四位进行转换，最后将转换后的数据拼接。

2.5.4 浮点数的二进制与十进制转换

（1）十进制转二进制

小数部分乘2，取结果的整数部分，之后将结果的小数部分乘2，取结果的的整数部分，以此类推，直到结果为0或一直循环为止。

（2）二进制转十进制

小数部分从左往右，依次乘1/2，1/4，1/8…，求和。

2.6 变量

2.6.1 定义：

在程序执行过程中，其值可能发生改变的量。

2.6.2 声明格式：

方式1:

数据类型 变量名 = 初始化值；

方式2:

数据类型 变量名；

变量名 = 初始化值；

注意：局部变量需要自己给初始化值后才能使用，成员变量初始化时会自动赋值。

2.7 数据类型

2.7.1 定义：

Java对于每一种数据都给予对应的数据类型。

2.7.2 分类：

（1）基本数据类型：

数据类型 占用字节数
byte 1
short 2
int 4
long 8
float 4
double 8
boolean 1
char 2

注意：整数默认int类型，浮点数默认double类型。long类型整数要加l或L，float类型浮点数要加f或F。

（2）引用数据类型：类，接口，数组等。

2.7.3* float类型数据在内存中是如何存储的？

float类型数字在计算机中用4个字节存储。遵循IEEE-754格式标准：
一个浮点数有2部分组成：底数m和指数e

底数部分 使用二进制数来表示此浮点数的实际值
指数部分 占用8bit的二进制数，可表示数值范围为0-255

但是指数可正可负，所以，IEEE规定，此处算出的次方必须减去127才是真正的指数。
所以，float类型的指数可从-126到128

底数部分实际是占用24bit的一个值，但是最高位始终为1，所以，最高位省去不存储，在存储中占23bit
科学计数法。

格式：
SEEE EEEE EMMM MMMM MMMM MMMM MMMM MMMM
S表示浮点数正负
E指数加上127后的值得二进制数据
M底数

举例：
17.625在内存中的存储

首先要把17.625换算成二进制：10001.101

整数部分，除以2，直到商为0，余数反转。
小数部分，乘以2，直到乘位0，进位顺序取。

在将10001.101右移，直到小数点前只剩1位：
1.0001101 * 2^4 因为右移动了四位

这个时候，我们的底数和指数就出来了
底数：因为小数点前必为1，所以IEEE规定只记录小数点后的就好。所以，此处的底数为：0001101
指数：实际为4，必须加上127(转出的时候，减去127)，所以为131。也就是10000011
符号部分是整数，所以是0
综上所述，17.625在内存中的存储格式是：
01000001 10001101 00000000 00000000

换算回去：自己做。

2.8 数据类型转换

2.8.1 默认转换

byte,short,char–int–long–float–double

byte,short,char之间不进行转换，三者进行运算时，先转成int类型后再进行运算。

boolean类型不参与转换。

2.8.2 强制转换

可能损失精度，一般不建议使用。

声明格式：

目标数据类型 变量名 = (目标数据类型) (被转换的数据);

2.8.3 例题

1.

下面两种方式有区别吗？
float f1 = 12.345f；
float f2 = （float）12.345；
//f1是通过double转换过来的，f2本身就是float类型。
2.

byte b1=3,b2=4,b;
b=b1+b2;
b=3+4;
哪句是编译失败的呢？为什么呢？

1
2
3
4
5
b=b1+b2编译失败。
b1是byte类型，b2是byte类型。
两个byte类型相加，先转换成int类型再相加，所以结果是int类型。
b是byte类型，把int类型的结果赋值给byte类型的b，可能损失精度，所以报错。
变量计算时，会先考虑数据类型再进行计算。
1
2
b=3+4编译成功。
因为3、4是常量，常量计算时，先把结果计算出来，然后看是否是在赋值的数据类型（byte）的范围内，如果在就不报错。

3.
byte b = 130;有没有问题？如果我想让赋值正确，可以怎么做？结果是多少呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
有问题，可能损失精度。因为byte的范围是-128～127。130不在此范围内，所以报错。
如果想让赋值正确（不报错），可以使用强制转换
byte b = (byte) (130);
结果是-126
分析过程：
获取130这个数据的二进制。130是整数常量，整数常量默认为int类型，占用4个字节。
00000000 00000000 00000000 10000010
这是130的原码，也是反码，还是补码。
因为强制转换成byte类型（1个字节），所以对130的补码进行截取操作，从左边开始：
补：10000010
反：10000001
原：11111110
此原码对应的数值是-126.

3.1：
byte b = 300;

1
2
3
4
5
6
7
8
9
10
11
12
13
有问题，可能损失精度。因为byte的范围是-128～127，300不在这个范围内，所以报错。
如果想让赋值正确（不报错），可以使用强制转换
byte b = （byte）(300);
结果是
分析过程：
获取300的二进制。整数常量默认为int类型，占用4个字节。
00000000 00000000 00000001 00101100
这是300的原码，反码，补码
因为强制转换成byte类型（1个字节），所以进行截取操作，从左边开始：
补：00101100
反：00101100
原：00101100
此原码对应的数值是44。正数的原反补都相同！！！！

4.
看程序写结果：
System.out.println(‘a’);

1
a

System.out.println(‘a’+1);

1
2
3
4
98
'a' 97
'A' 65
'0' 48

System.out.println(“hello”+’a’+1);

1
2
helloa1
字符串数据和其他数据做+，结果是字符串类型。

System.out.println(‘a’+1+”hello”);

1
98hello

System.out.println(“5+5=”+5+5);

1
5+5=55

System.out.println(5+5+”=5+5”);

1
10=5+5

5.

17.625在float类型中是如何存储的？写出过程。
（1）整数部分转为二进制
（2）小数部分转为二进制
（3）移动小数点找到底数和指数，指数加上127
底数：因为小数点前必为1，所以IEEE规定只记录小数点后的就好，所以，此时的底数为0001101.
指数：实际为4，必须加上127，所以为131，也就是10000011.
（4）在float4个字节中的存储顺序为：
符号部分+指数部分+底数部分+后面补0
结果：
01000001 10001101 00000000 00000000
6.

Java语言中的字符char可以存储一个中文汉字吗？为什么？
可以。因为Java语言中的字符占用两个字节。

注意：Java语言采用的是Unicode编码。

发表于 | 分类于

《月亮与六便士》读书笔记

[TOC]

零、前言

在看书前已经看过木鱼的微剧场，直观的感受就是人生其实就是处于月亮与六便士的矛盾中，想要一心追求月亮，却又无法摆脱六便士。所以，也许伟大并不是如理想中抛开一切“六便士”，全身心地投入到“追求月亮”中，而是在如六便士一般普通的生活中，怀着坚定的信念仰望星空，虽然最后无法追求到月亮，却能在“六便士”的生活中开出沐浴着月光的花朵。

此外，不同人物的特点也是可以关注的一个地方，克兰德，克兰德太太，施特略夫，勃朗什，爱塔等，在看书的时候可以试着总结一下他们的人物特点。

综上所述，在看书前给自己提两个问题：

1.自己如何看待人生中月亮与六便士的关系？

2.总结书中主要人物的特点与不同。

一、Chapter01

人类有制造神话的天性。它会抓住那些出类拔萃的人的生活中令人诧异或迷惑不解的事件，编造出种种神话，并且近乎狂热地深信不疑。这是浪漫主义对平淡生活的一种抗议。

喜欢最后这一句解释：这是浪漫主义对平淡生活的一种抗议。有种生活很平淡，但是人会本能地赋予它一种浪漫的感觉，喜欢这种浪漫主义。

本章小结

查尔斯.史崔兰生前默默无闻与死后被人尊为伟大艺术家的矛盾，以及其子罗伯特.史崔兰对外界对其父亲生平过分渲染的批判。总结得不是很好，但这一章其实就是从社会的角度来概述一下查尔斯.史崔兰这个主人公，让读者带着上述的矛盾，接着往下看，继续了解查尔斯.史崔兰这个人的故事。

二、Chapter02

没看懂在说什么。

发表于 | 分类于

问题：如何学习？
拆分：

1.什么是学习？

1.1定义
通过已知情况寻找可以解决未知情况的规律，这个规律在意识层面上称为知识，更普遍的叫法是模型。
1.2特点
泛化：模型通过已有情况寻找的规律能够解决未知情况的能力，称为泛化。
过拟合：模型只能解决已有情况的问题，却无法解决未知情况的问题的现象，称为过拟合。
欠拟合：连学习过的例子都无法记忆的现象，称为欠拟合。

2.了解人的学习机制。

2.1人类大脑底层的记忆方式
网络记忆，不是记忆所以情况，而是从大量已有情况中寻找共同规律的模型，然后记忆模型的函数,所有的问题都有输入和输出，输入量经过函数变化后得出输出量，如果我们记忆住了这个函数，同类型的问题就能举一反三。
2.1.1 大脑底层为什么是网络记忆而不是查表记忆
因为查表需要提前获得所有情况，而自然界无法向大脑提供所有信息。第二个原因是大脑的容量有限，而自然中有无限种情况。有限的大脑无法存储无限多的情况。
2.2人类为什么会遗忘。
因为已建立的模型不一定能解决所有同类型的问题，造成这种情况的原因可能是用于寻找规律的例子不具有普遍多样性。比如，一直学习比尔盖茨和扎克伯格的例子很容易得出“学历不重要”的错误模型，而当学习更多的新例子时，模型函数可能会发生改变，需要更新，如果没有遗忘，可能会造成函数的重叠，从而导致建立模型的能力严重受损。
另一方面，从概率论与数理统计的角度分析，一个例子出现的次数越低，越不具有普遍性；相反，一个例子多次反复出现，其中隐含的规律更具有普遍性。所以大脑进化出将多次重复的例子所寻找出的规律进行强化，而对出现次数少的例子及其规律很快遗忘。

3.根据学习机制制定学习方法。

3.1如何在网络记忆的基础上进行学习？
收集例子，并从中提取规律。
3.2如何减少遗忘？
多次重复，并在生活中多次运用。

来源：B站YJango视频

发表于 | 分类于

一、轮播图自动播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 步骤分析:
			//事件:onload
			//触发函数:init()
			//init()中开启计时器，并执行转换图片功能changeImg()
			function init() {
				setInterval("changeImg()",1000);
			}
			var index = 0;	
			function changeImg() {
				var curIndex = index%3+1;
				document.getElementById("img").src = "../img/"+curIndex+".jpg";
				index = index+1;
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" id="img">
	</body>
</html>

二、控制图片显示和隐藏(弹出广告又消失)

1.弹出广告又消失代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 显示5s广告然后关闭
			//事件:onload
			//触发函数:init()
			//init()中包含两个功能,showImg(),hideImg()
			function init() {
				setTimeout("showImg()",3000);
			}
			function showImg() {
				document.getElementById("img").style.display = "block";
				setTimeout("hideImg()",3000);
			}
			function hideImg() {
				document.getElementById("img").style.display = "none";
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img" style="display: none;width: 100%;">
		注册
	</body>
</html>

2.文档加载顺序的问题

文档加载顺序是从上到下加载的

三、表单校验

1.简单的表单校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function showTips() {
				document.getElementById("span_username").innerHTML = "用户名长度不能小于6位";
			}
		</script>
	</head>
	<body>
		用户名: <input type="text"id="username" onfocus="showTips()"><span id="span_username"></span><br>
	</body>
</html>

2.表单校验常用事件

onfocus:获得焦点
onblur:失去焦点
onkeyup:按键抬起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function showTips() {
				document.getElementById("span_username").innerHTML = "用户名不能小于6位";
			}
			
			function checkUsername() {
				
				var span = document.getElementById("span_username");
				if(document.getElementById("username").value.length<6) {
					span.innerHTML = "用户名太短";
				}else {
					span.innerHTML = "恭喜您，用户名可用";
				}
			}
			
		</script>
	</head>
	<body>
		用户名: <input type="text"id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()"><span id="span_username"></span><br>
	</body>
</html>

发表于 | 分类于

一、css

1.概述

需求分析：为什么要学习css
因为表格布局存在缺陷：
（1）嵌套层级太多，一旦出现嵌套顺序错乱，整个页面达不到预期效果。
（2）改变表格布局时比较麻烦。
要解决这些缺陷，要学习div+css

2.HTML的块标签

div标签：默认占一行（自动换行）
span标签：内容显示在一行

3.css(Cascading Style Sheets:层叠样式表)

css作用：用来美化html的
可以这样理解：
html决定网页的骨架
css则是在其基础上进行“化妆”

4.css简单语法

在一个style标签中，去编写css内容，最好将style标签写在head标签中。

1
2
3
4
5
6
<style>
	选择器 {
		属性名称:属性值;
		属性名称2:属性值;
	}
</style>

css选择器的作用：帮助我们找到需要修饰的标签或元素
选择器的优先级：
行内样式–ID选择器–类选择器–元素选择器
同一优先级选择器的情况下，采用就近原则，里被修改的代码越近，就采用越近的修饰样式

4.1 元素选择器

比如div，span

4.2 ID选择器

以#开头
#ID的名称{
属性名称:属性值;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">JavaEE</div>
		<div>IOS</div>
		<div>Android</div>
	</body>
</html>

4.3 类选择器

以.开头
.类的名称{
属性名称:属性值;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.fruit{
				color: red;
			}
			.vegetables{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="fruit">香蕉</div>
		<div class="fruit">苹果</div>
		<div class="fruit">橘子</div>
		<div class="vegetables">黄瓜</div>
		<div class="vegetables">茄子</div>
	</body>
</html>

5.css引入方式

外部样式：提高代码复用性。
新建一个.css文件，把style中的修改放入css文件中，在原html文件中使用link引用css文件。
sytle1.css

1
2
3
4
5
6
.fruit{
	color: red;
}
.vegetables{
	color: blue;
}

.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"href="style1.css"/>
	</head>
	<body>
		<div class="fruit">香蕉</div>
		<div class="fruit">苹果</div>
		<div class="fruit">橘子</div>
		<div class="vegetables">黄瓜</div>
		<div class="vegetables">茄子</div>
	</body>
</html>

内部样式：直接在style标签中编写css代码，前面都是用的这种方式
行内样式：直接在标签中添加style属性
如下面的香蕉部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"href="style1.css"/>
	</head>
	<body>
		<div class="fruit" style="color: blue;">香蕉</div> //look here
		<div class="fruit">苹果</div>
		<div class="fruit">橘子</div>
		<div class="vegetables">黄瓜</div>
		<div class="vegetables">茄子</div>
	</body>
</html>

6.css浮动

css浮动：浮动的元素会脱离正常的文档流，在正常的文档流中不占空间。
使用浮动的话需要使用float属性
float属性：
left
right
clear属性：清除浮动
both：两边都不允许浮动
left：左边不允许浮动
fight：右边不允许浮动
浮动最开始设计出来是为了实现文字环绕图片的效果。

练习

1.
做一个网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.logo{
				float: left;
				width: 33%;
				height: 60px;
			}
			.amenu{
				color: white;
				line-height: 50px;
				text-decoration: none;
			}
			.product{
				float: left;
				text-align: center;
				/* border: 1px solid yellowgreen; */
				width: 16%;
				height: 240px;
			}
		</style>
	</head>
	<body>
		<!-- logo -->
		<div>
			<div class="logo"><img src="../img/logo2.png" ></div>
			<div class="logo"><img src="../img/header.jpg" ></div>
			<div class="logo">
				<a href="#">注册</a>
				<a href="#">登录</a>
				<a href="#">购物车</a>
			</div>
		</div>
		<!-- 清除浮动 -->
		<div style="clear: both;"></div>
		<!-- 导航部分 -->
		<div style="background: black;height: 50px;">
			<a href="#" class="amenu">首页</a>
			<a href="#" class="amenu">手机数码</a>
			<a href="#" class="amenu">鞋靴箱包</a>
			<a href="#" class="amenu">电脑办公</a>
			<a href="#" class="amenu">香烟酒水</a>
		</div>
		<!-- 轮播图 -->
		<div>
			<img src="../img/1.jpg" width="100%" >
		</div>
		<!-- 最新商品 -->
		<div>
			<div><h2>最新商品<img src="../img/title2.jpg" ></h2></div>
			<div style="width: 15%;height: 480px;float: left;border: 1px solid red">
				<img src="../img/big01.jpg" width="100%" height="100%" >
			</div>
			<div style="width: 84%;height: 480px;float: left;border: 1px solid gold;">
				<div style="height: 240px;width: 50%;float: left;">
					<img src="../img/middle01.jpg" width="100%" height="100%">
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
				<div class="product">
					<img src="../img/small06.jpg" >
					<p>高压锅</p>
					<p style="color: red;">¥998</p>
				</div>
			</div>
			<!-- 直接放一张图片 -->
			<div>
				<img src="../img/footer.jpg" width="100%" >
			</div>
			<!-- 同上上 -->
			<div>
				<div><h2>热门商品<img src="../img/title2.jpg" ></h2></div>
				<div style="width: 15%;height: 480px;float: left;border: 1px solid red">
					<img src="../img/big01.jpg" width="100%" height="100%" >
				</div>
				<div style="width: 84%;height: 480px;float: left;border: 1px solid gold;">
					<div style="height: 240px;width: 50%;float: left;">
						<img src="../img/middle01.jpg" width="100%" height="100%">
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
					<div class="product">
						<img src="../img/small06.jpg" >
						<p>高压锅</p>
						<p style="color: red;">¥998</p>
					</div>
			</div>
			<div>
				<img src="../img/footer.jpg" width="100%" >
			</div>
			<div style="text-align: center;">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				<br>
				Copyright@
			</div>
		</div>
	</body>
</html>

7.其他选择器

7.1 选择器分组

h1{color:blue}
h2{color:blue}
h3{color:blue}
h4{color:blue}
h5{color:blue}
h6{color:blue}
可以改写成
h1,h2,h3,h4,h5,h6{color:blue}
效果相同

7.2 属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* a[title]{
				color: blue;
			} */
			/* a[title='aaa']{
				color: red;
			} */
			/* a[href][title]{
				color: red;
			} */
			a[href][title='aaa']{
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="#" title="aaa">张三</a>
		<a href="#" title="bbb">李四</a>
	</body>
</html>

7.3 后代选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 将h1标签下的em字体颜色都改成red*/
			/* 后代选择器 */
			/* h1 em{
				color: red;
			} */
			/* 子元素选择器 只有子元素发生改变 */
			h1 > em{
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>
			this is
			<em>
				儿子
			</em>
			<strong>
				<em>
					孙子
				</em>
			</strong>
		</h1>
	</body>
</html>

7.4 伪类选择器(基本只用在a标签)

1
2
3
4
a:link{color:red} //未访问的链接
a:visited{color:green} //已访问的链接
a:hover{color:blue} //鼠标移动到链接上
a:active{color:yellow} //选定的链接

8.盒子模型

修改盒子的内边距和外边距
内边距：padding

1
2
3
4
padding:10px; 上下左右都是10px
padding:10px 20px; 上下10px，左右20px
padding:10px 20px 30px; 上10px，左右20px，下30px
padding: 10px 20px 30px 40px; 上10px，右20px，下30px，左40px

外边距：margin
同上。

8.css的绝对定位

position:absolute
top:控制距离顶部的位置
left:控制距离左边的位置

二、JavaScript

1.概述

为了完成对注册页面的简单数据校验，不允许出现用户名或密码为空的情况。需要学习javascript。
什么是javascript？
是一种直译式脚本语言
什么是脚本语言？
java源代码–编译成class文件–java虚拟机中才能执行
脚本语言：源码–解释执行(js由我们的浏览器解释执行)
HTML：决定页面框架
css：美化页面
js：提供用户的交互

2.JS的组成

ECMAScript：核心部分，定义js的语法规范
DOM：Document Object Model 文档对象模型，主要是用来管理页面
BOM：Browser Object MOdel 浏览器对象模型，前进，后退，页面刷新，地址栏，历史记录，屏幕宽高

3.JS的语法

变量弱类型：var i=true
区分大小写
语句结束之后的分号，可以有，也可以没有
写在script标签

4.JS的数据类型

基本类型
string
number
boolean
undefine
null
引用类型
对象
内置对象
类型转换
js内部自动转换

5.JS的运算和语句

运算符和java一样
“===”全等号：值和类型都必须相等
语句和java一样

5.JS的输出

alert()：弹框输出
document.write()：向页面输出
console.log()：向控制台输出
innerHTML:向页面输出
获取页面元素：document.getElementByld(“d的名称”);
JS声明变量：
var 变量名 = 值；
JS声明函数：
var 函数名 = function(){

}
或
function 函数名() {

}

6.JS的开发步骤

1.确定事件
2.通常事件会触发一个函数
3.在函数中实现功能

发表于 | 分类于

第三周 0811-0817

0817 周六

工作：
web前端知识day01_html完成
生活：
good：早晚洗漱，洗澡，合理夜宵，洗衣服，锻炼(中)，帮同门浇花，剪头发。
bad：外卖两次，睡眠时间不合理，动画*4，空闲时不想做事
非正常开销：
罗技590m ¥159 评价：合理消费

0819 周一

工作：
web前端知识day02_css&js完成，上传新闻稿。
生活
good：扫地，洗漱，洗衣服，合理夜宵
bad：外卖两次，睡眠时间不合理。
感想：这两天整体状态保持得挺好，感觉一切都在想着好的方向前进，一定要保持下去，优秀是一种习惯。

0821 周三

工作：无
生活：
good：洗漱，合理夜宵，打扫(简单)
bad：1次外卖，时间安排不合理(重度)

0822 周四

早：

8.30起；
洗漱；
打扫(简单)；
早餐：牛奶，鸡蛋，粥；

午：

鸭蛋虾仁汤
午休

晚：

沙拉（外卖）
夜宵：牛奶，蛋，红豆面包
俯卧撑*20
看了关于《娱乐至死》的知乎回答
感想：《娱乐至死》的知乎回答让我耳目一新，虽然没看完，但是在阅读过程中，我确实是有着“娱乐至死”归咎于电视等新媒介的想法。然而看了知乎的回答明白，让你对当下文化产生怀疑、批判的文化产品，可能正是当下文化的产物，里面阐述的现象可能是正确的，但是对于原因的探讨可能就有待商榷了。不过当下自己所能做到的，并不是去探究真正的原因或者去反抗，而是防止自己被文化所控制，这才是自己现阶段所要做的事情。
最后留一句看回答时有感触的话：大家都是一周目，选择简单模式很正常…

0830 周五

  • 科研
  • 工作
  • 娱乐 月亮与六便士第一章
  • 生活 两餐+夜宵；
  • 情绪

发表于 | 分类于

一、HTML入门案例(静夜思)

1.概述

HTML：Hyper Text Markup Language 超文本标记语言
超文本：比普通文本功能强大，能实现不同样式(比如加粗，居中，斜体)
标记语言：使用标签对内容进行描述的语言。

2.使用下列标签完成静夜思案例

1
2
3
4
5
<h1></h1> 一级标题
<b></b> 加粗
<i></i> 斜体
</br> 换行
<p></p>段落

HTML的主要作用
设计网页的基础，HTML5

3.HBuilder常用快捷键mac版

ctrl + D 删除光标所在的行
command + shift + R 复制当前行到下一行
command + enter 将光标移动到下一行(如果原先光标在上一行的中间，只用enter会将当前行的前后两部分内容分开成两行，而使用这个命令可以直接将光标跳转到下一行而不改变当前行的内容，说得很麻烦，自己试试，很简单)
command + shift + enter 在当前行的上一行插入空行
tab 输入标签在按tab会自动生成前后标签和<>，这个很好用
command + 方向键 左右是到当前行的前后，上下是到所有行的首尾
command + / 注释

4.入门案例及基本语法规范


1
2
strong:也是加粗，但是包含语义，搜索引擎友好
em：也是斜体，但是包含语义，搜索引擎友好

5.图片及路径

6.有序列表ol和无序列表ul

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 无序列表ul
			li 列表项
			type属性：默认黑点，可以是小圆圈，小方块
		 -->
		<ul type="square">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
		</ul>
		<hr>
		<!-- 有序列表ol
			常用属性：
				type：指定序号的类型
				start：从几开始，必须得写数字
		 -->
		<ol type="I">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
			
		</ol>
	</body>
</html>

7.超链接标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 超链接标签a
		常用属性：
		href：指定网址，要加上http协议，如果访问的是本网站的html文件，可以直接写文件路径
		target：以什么方式打开
			_blank:以新窗口打开
			_self：当前窗口直接跳转
	 -->
	<body>
		<a href="https://www.baidu.com" target="_self">百度</a>
	</body>
</html>

8.表格标签table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- table标签
		tr：行
		td：列，一般是tr嵌套td
		常用属性：
		border：指定边框
		width：宽度
		height：高度
		bgcolor:背景色
		align:对齐方式
		表格的合并
			colspan：跨列合并
			rowspan：跨行合并
	 -->
	<body>
		<table border="2px" width="400px" height="150px" bgcolor="antiquewhite" align="center">
			<tr bgcolor="blue" align="center">
				<td bgcolor="yellow">2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr bgcolor="red">
				<td align="center">2</td>
				<td>2</td>
				<td colspan="2" rowspan="2" align="center">2</td>
				<td>2</td>
			</tr>
			<tr>
				<td colspan="2" align="center" >2</td>
				<td rowspan="2">2</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
		</table>
	</body>
</html>

表格的嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 表格的嵌套 -->
	<body>
		<table border="2px" width="400px" align="center">
			<tr>
				<td colspan="2" rowspan="2">
					<table align="center" border="1px" width="100%">
						<tr>
							<td align="center">11</td>
							<td>12</td>
						</tr>
						<tr>
							<td>21</td>
							<td>22</td>
						</tr>
					</table>
				</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>23</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

练习

1.
做一个网页首页
步骤分析：
（1）创建一个8行1列的表格
（2）第一部分LOGO：嵌套一个1行3列的表格
（3）第二部分导航部分：放置五个超链接
（4）第三部分：轮播图
（5）第四部分：嵌套一个3行7列表格
（6）第五部分：直接放一张图片
（7）第六部分：同（5）
（8）第七部分：放一张图片
（9）第八部分：放置友情链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 
	 做一个网页首页
	 步骤分析：
	 （1）创建一个8行1列的表格
	 （2）第一部分LOGO：嵌套一个1行3列的表格
	 （3）第二部分导航部分：放置五个超链接
	 （4）第三部分：轮播图
	 （5）第四部分：嵌套一个3行7列表格
	 （6）第五部分：直接放一张图片
	 （7）第六部分：同（5）
	 （8）第七部分：放一张图片
	 （9）第八部分：放置友情链接。
	 -->
	<body>
		<table width="100%" >
			<!-- 第一部分LOGO：嵌套一个1行3列的表格 -->
			<tr>
				<td>
					<table width="100%" >
						<tr>
							<td><img src="../img/logo2.png" alt="图片加载失败"></td>
							<td><img src="../img/header.jpg" alt="图片加载失败"></td>
							<td>
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第二部分导航部分：放置五个超链接 -->
			<tr bgcolor="black">
				<td height="50px">
					<a href="#"><font color="white">首页</font></a>
					<a href="#"><font color="white">手机数码</font></a>
					<a href="#"><font color="white">鞋靴箱包</font></a>
					<a href="#"><font color="white">电脑办公</font></a>
					<a href="#"><font color="white">香烟酒水</font></a>
				</td>
			</tr>
			<!-- 第三部分：轮播图 -->
			<tr>
				<td>
					<img src="../img/1.jpg" width="100%">
				</td>
			</tr>
			<!-- 第四部分：嵌套一个3行7列表格 -->
			<tr>
				<td>
					<table width="100%" height="500px">
						<tr>
							<td colspan="7">
							<h3>最新商品<img src="../img/title2.jpg" ></h3>
							</td>
						</tr>
						<tr align="center">
							<td rowspan="2" width="206px" height="475px">
								<img src="../img/big01.jpg" >
								</td>
							<td colspan="3" height="240px">
								<img src="../img/middle01.jpg" width="100%" height="100%" alt="图片加载失败">
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
						<tr align="center">
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第五部分：直接放一张图片 -->
			<tr>
				<td>
					<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%">
				</td>
			</tr>
			<!-- 第六部分：同（5） -->
			<tr>
				<td>
					<table width="100%" height="500px">
						<tr>
							<td colspan="7">
							<h3>热门商品<img src="../img/title2.jpg" ></h3>
							</td>
						</tr>
						<tr align="center">
							<td rowspan="2" width="206px" height="475px">
								<img src="../img/big01.jpg" >
								</td>
							<td colspan="3" height="240px">
								<img src="../img/middle01.jpg" width="100%" height="100%" alt="图片加载失败">
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
						<tr align="center">
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
							<td>
								<img src="../img/small06.jpg" alt="图片加载失败">
								<p>洗衣机</p>
								<p><font color="red">¥998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第七部分：放一张图片 -->
			<tr>
				<td>
					<img src="../img/footer.jpg" width="100%">
				</td>
			</tr>
			<!-- 第八部分：放置友情链接。 -->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<br>
					Copyright@
				</td>
			</tr>
		</table>
	</body>
</html>

2.
网站注册案例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单标签form 
			常用属性：
			action：提交的地址
			method：
				get 方式 默认提交方式 会将参数拼接在链接后面，有大小限制，4k，也有1k的。
				post 方式 会将参数封装在请求体中，没有这样的限制。
		
		-->
		<form action="../04_网站首页/网站首页.html" method="get">
			<!-- 隐藏域
				主要是用来存放页面上的一些ID信息
			 -->
			<input type="hidden" name="uid" id="" value="sdfalsjflsj" />
			<!-- 文本输入框 -->
			用户名：<input type="text" name="username" placeholder="请输入用户名" /><br>
			密码：<input type="password" placeholder="请输入密码"/><br>
			照片：<input type="file"/><br>
			性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br>
			验证码：<input type="text" /><br>
			爱好：
			<input type="checkbox" />抽烟
			<input type="checkbox" />喝酒
			<input type="checkbox" />烫头<br>
			出生日期：<input type="datetime-local" /><br>
			手机号码：<input type="number" /><br>
			个人介绍：
			<textarea rows="4" cols="40">
				
			</textarea><br>
			籍贯：
			<select>
				<option>---请选择---</option>
				<option>湖北</option>
				<option>内蒙古</option>
				<option>火星</option>
			</select><br>
			<input type="submit" value="注册" />
			<input type="button" value="普通按钮">
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

3.
注册入门案例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 创建一个5行1列的表格
		 1.logo部分
		 2.导航栏
		 3.注册部分
		 4.页脚图片
		 5.网站声明信息
		 -->
		 <table border="1px" width="100%">
			 <!-- 1.logo部分 -->
			 <tr>
				 <td>
					 <table border="1px" width="100%" >
					 	<td><img src="../img/logo2.png" ></td>
					 	<td><img src="../img/header.jpg" ></td>
					 	<td>
							<a href="#">注册</a>
							<a href="#">登录</a>
							<a href="#">购物车</a>
						</td>
					 </table>
				 </td>
			 </tr>
			 <!-- 2.导航栏 -->
			 <tr bgcolor="black">
			 	 <td>
					 <a href="#"><font color="white">首页</font></a>
					 <a href="#"><font color="white">手机数码</font></a>
					 <a href="#"><font color="white">鞋靴箱包</font></a>
					 <a href="#"><font color="white">电脑办公</font></a>
					 <a href="#"><font color="white">香烟酒水</font></a>
				 </td>
			 </tr>
			 <!-- 3.注册部分 -->
			 <tr>
			 	<td background="../img/regist_bg.jpg" height="500px">
					<table border="5px"width="60%" height="80%" align="center" bgcolor="white">
						<tr>
							<td>
								<table width="60%" height="60%" align="center">
									<tr>
										<td colspan="2"><font color="blue">会员注册</font>User REGISTER</td>
									</tr>
									<tr>
										<td>用户名：</td>
										<td>
											<input type="text" placeholder="请输入用户名">
										</td>
									</tr>
									<tr>
										<td>密  码：</td>
										<td><input type="password" placeholder="请输入密码"/></td>
									</tr>
									<tr>
										<td>确认密码：</td>
										<td><input type="password" placeholder="请再次输入密码"/></td>
									</tr>
									<tr>
										<td>Email：</td>
										<td><input type="email" placeholder="请输入邮箱"/></td>
									</tr>
									<tr>
										<td>姓名：</td>
										<td><input type="text" placeholder="请输入真实姓名"></td>
									</tr>
									<tr>
										<td>性别：</td>
										<td><input type="radio" name="sex">男<input type="radio" name="sex" />女</td>
									</tr>
									<tr>
										<td>出生日期：</td>
										<td><input type="date" placeholder="请选择出生日期"/></td>
									</tr>
									<tr>
										<td>验证码：</td>
										<td><input type="text" /></td>
									</tr>
									<tr>
										<td></td>
										<td><input type="submit" value="注册"></td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			 </tr>
			 <!-- 4.页脚图片 -->
			 <tr>
			 	<td>
					<img src="../img/footer.jpg" >
				</td>
			 </tr>
			 <!-- 5.网站声明信息 -->
			 <tr>
			 	 <td align="center">
					 <a href="#">关于我们</a>
					 <a href="#">联系我们</a>
					 <a href="#">招贤纳士</a>
					 <a href="#">法律声明</a>
					 <a href="#">友情链接</a>
					 <a href="#">支付方式</a>
					 <a href="#">配送方式</a>
					 <a href="#">服务声明</a>
					 <a href="#">广告声明</a>
					 <br>
					 Copyright@
				 </td>
			 </tr>
		 </table>
	</body>
</html>

发表于 | 分类于

一、类的加载

1.类的初始化

类的初始化是由加载，连接，初始化三部分实现的
加载：
将class文件加载到内存，并创建一个相应的Class对象。
连接：
初始化：

2.类的加载器

负责将class文件加载到内存中，并生成对应的Class对象
虽然我们不需要关心类的加载机制，但是了解它有助于帮我们理解程序的运行。

2.1 类加载器的组成

Bootstrap ClassLoader 根类加载器
也叫引导类加载器，负责System，String这样的核心类的加载，位于JDK中JRE的lib目录下的rt.jar文件中。
Extension ClassLoader 扩展加载器
负责JRE的扩展目录中jat包的加载
在JDK中JRE的lib目录下ext目录。
System ClassLoader 系统加载器
负责在JVM启动时加载来自java命令的class文件，以及classpath环境变量所指定的jar包和类路径。

二、反射

1.概述

Java反射机制是指在运行状态中，对于任意一个类，都能够知道这个类的所有属性和方法；对于任意一个对象，都能够调用它的人以一个方法和属性；这种动态获取的信息以及动态调用对象方法的功能成语java语言的反射机制。

发表于 | 分类于

一、网络编程

1.概述

什么是计算机网络？
就是将多台电脑通过通信线路连接起来，实现资源共享和信息传递的计算机系统。
网络编程的作用
实现网络互连的不同计算机上的程序之间的数据交换。

2.网络模型

网络模型研究的问题，就是计算机网络之间以何种规则进行通信。
网络模型一般指
OSI(Open System Interconnection开放系统互连)参考模型 TCP/IP参考模型
应用层 应用层
表示层
会话层
传输层 传输层
网络层 网际层
数据链路层 主机至网络层
物理层
网络应用程序由：网络编程，IO流，多线程组成。

3.网络编程三要素

(1)IP地址：网络中每台计算机的唯一标识。作用是找到电脑
(2)端口：用来区分电脑上的每一个程序。作用是区分程序
(3)协议 作用是根据某种规则“说出程序能懂的话”

3.1 IP地址

IP地址：网络中计算机的唯一标识。
计算机只能识别二进制的数据，但IP地址不是一个二进制的数，而是一个形如
192.168.1.100
这样的数
这是因为
192.168.1.100换算成二进制是
11000000 10101000 00000001 01100100
如果用二进制来表示IP地址，并使用它进行配置IP地址，记忆起来就比较麻烦，而且容易出错。
为了方便表示IP地址，我们就把IP地址的每一个字节(IP地址有四个字节)上的数据换算成十进制，然后用.分开来表示，如上。
这种方法也叫 点分十进制 。
IP地址的组成：
网络号段+主机号段
IP地址的分类：
A类：第一号段为网络号，第二号段为主机号。1.0.0.1—127.255.255.254
一个A类的网络号段可以配256*256*256台计算机(16777216)
B类：前二号段为网络号段+后二段主机号段. 128.0.0.1–191.255.255.254
一个B类的网络号段可以配256*256台计算机(65536)
C类：前三号段为网络号段+后一段的主机号段 192.0.0.1—223.255.255.254
一个C类的网络号段可以配256台计算机
192.168.X.X和10.X.X.X私有地址：在互联网上不使用，而被用在局域网中。
两个DOS命令 windows版
ipconfig 查看本机IP地址
ping 后面跟ip地址。测试本机与指定的ip地址间的通信是否有问题
mac版
ifconfig 查看本机IP地址
ping 后面跟ip地址。测试本机与指定的ip地址间的通信是否有问题,mac版默认会一直进行测试，control+c可以终止，不是command+c。
特殊的ip地址：
127.0.0.1回环地址(表示本机)
x.x.x.255广播地址
x.x.x.0网络地址

4.InetAddress类

为了方便我们对ip地址的获取和操作，Java提供了一个类InetAddress供我们使用。
InetAddress类没有构造方法
如果一个类没有构造方法：
（1）成员全部是静态的(Math,Arrays,Colletions)
（2）单例设计模式(Runtime)
（3）类中有静态方法返回该类对象(InetAddress)

4.1 InetAddress类的成员方法

public static InetAddress getByName(String host):根据主机名或者ip地址的字符串表示得到ip地址对象。

5.端口号

有物理端口和逻辑端口(我们想说的是逻辑端口)
物理端口：网卡口
逻辑端口：我们指的就是逻辑端口
（1）每个网络程序都会至少有一个逻辑端口，用于标识进程的逻辑地址
（2）有效端口：0～65535，其中0～1024为系统使用或作为保留端口

6.协议(通信的规则)

UDP:
把数据打包
数据有限制(64k)
不需要建立连接，所以速度快，但是不可靠。
TCP:
建立连接通道
数据无限制
效率低，可靠。
举例：
UDP：发短信，一次发一条，不需要经过对方同意
TCP：打电话，只要电话通了，说多少话都可以，需要对方同意才能进行通话。

7.Socket(网络套接字)

Socket编程就是网络编程。
Socket：网络上具有唯一标识的IP地址和端口号组合在一起才能构成唯一能识别的标识符套接字。

7.1 Socket原理机制

（1）通信的两端都有Socket。
（2）网络通信其实就是Socket之间的通信。
（3）数据在两个Socket之间通过IO传输。

8.UDP协议发送数据和接收数据

SendDemo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package cn.itcast_02;

import java.io.IOException;
import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.InetAddress;
import java.net.SocketException;
import java.net.UnknownHostException;

/*
 * UDP协议发送数据：
 * （1）创建Socket对象
 * （2）创建数据并打包
 * （3）调用Socket对象的发送方法发送数据包
 * （4）释放资源
 */
public class SendDemo {
	public static void main(String[] args) throws IOException {
		//创建Socket对象
		DatagramSocket ds = new DatagramSocket();
		
		//创建数据并打包
		//DatagramPacket(byte[] buf,int length,InetAddress address,int port)
		//创建数据
		byte[] bys = "helloworld".getBytes();
		//数组长度
		int length = bys.length;
		//IP地址
		InetAddress address = InetAddress.getByName("192.168.43.178");
		//端口
		int port = 10086;
		//打包
		DatagramPacket dp = new DatagramPacket(bys, length,address,port);
		
		//调用Socket对象的发送方法发送数据
		//public void send(DatagramPacket p)
		ds.send(dp);
		
		//释放资源
		ds.close();
	}
}

ReceiveDemo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package cn.itcast_02;

import java.io.IOException;
import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.InetAddress;

/*
 * UDP协议接收数据：
 * （1）创建Socket对象
 * （2）创建一个数据包(接收容器)
 * （3）调用Socket对象的接收方法接收数据
 * （4）解析数据并显示在控制台
 * （5）释放资源
 */
public class ReceiveDemo {
	public static void main(String[] args) throws IOException {
		// 创建Socket对象
		DatagramSocket ds = new DatagramSocket(10086);

		// 创建一个数据包(接收容器)
		// DatagramPacket(byte[] buf,int length)
		byte[] bys = new byte[1024];
		int length = bys.length;
		DatagramPacket dp = new DatagramPacket(bys, length);

		// 调用Socket对象的接收方法接收数据
		ds.receive(dp);

		// 解析数据包
		// 获取对方IP
		InetAddress address = dp.getAddress();
		String ip = address.getHostAddress();
		// public byte[] getData():获取数据缓冲区
		// public int getLength():获取数据实际长度
		byte[] bys2 = dp.getData();
		int len = dp.getLength();
		String s = new String(bys2, 0, len);
		System.out.println(ip+":"+s);

		// 释放资源
		ds.close();
	}
}

发表于 | 分类于

一、GUI(图形用户接口)

1.GUI与CLI的区别

GUI(Graphocal User Interface):用图形的方式来显示计算机操作的界面，这样更加方便直观。
CLI(Command line User Interface):命令行用户接口，就是常见的Dos命令行操作，需要记忆一些常用命令，操作不直观。

2.awt和swing包的概述

java.awt:Abstract Window ToolKit(抽象窗口工具包),需要调用本地系统方法实现功能。属重量级控件。(与系统关联性强，所以叫称为重量级，重量级的移植性比较差)
javax.swing:在AWT基础上，建立一套图形界面系统，其中提供了更多的组件，而且完全由Java实现，增强了移植性，属轻量级控件。

3.GUI继承体系

Component组件可以理解成对象。
看图(图以后补…)

4.Frame

Component组件的整个体系子类和方法很多，所以我们用到哪个再学哪个。

5.如何关闭窗口(事件监听机制)

事件监听机制：
（1）事件源 事件发生的地方
（2）事件 就是要发生的事情
（3）事件处理 就是针对发生的事件做出的处理方案
（4）事件监听 把事件源与事件关联起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
package cn.itcast_02;

import java.awt.Frame;
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;

/*
 * 
 * 关闭窗口案例
 */
public class FrameDemo {
	public static void main(String[] args) {
		Frame f = new Frame();
		
		f.setBounds(400,200,400,300);
		
		//让窗口关闭
		//事件源
		//事件：对窗体的处理
		//事件处理：关闭窗口(System.exit(0));
		//事件监听
		f.addWindowListener(new WindowListener() {
			
			@Override
			public void windowOpened(WindowEvent e) {
			}
			
			@Override
			public void windowIconified(WindowEvent e) {
			}
			
			@Override
			public void windowDeiconified(WindowEvent e) {
			}
			
			@Override
			public void windowDeactivated(WindowEvent e) {
			}
			
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
			
			@Override
			public void windowClosed(WindowEvent e) {
			}
			
			@Override
			public void windowActivated(WindowEvent e) {
			}
		});
		f.setVisible(true);
		
	}
}

上面的代码实现了窗口关闭的功能，但是WindoListener接口需要重写的方法太多，仅仅需要实现一个功能却要将接口的所有方法重写，很麻烦。
解决方案如下：
接口(方法比较多)–适配器类(实现接口，仅仅空实现)–实现类(仅重写需要实现的功能)
通过适配器类实现接口，空实现所有需要重写的方法，然后创建实现类继承适配器类，实现类中仅需要重写自己想要使用的功能就行。

6.加入按钮、文本框、文本域实现数据转移案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package cn.itcast_02;

import java.awt.Button;
import java.awt.FlowLayout;
import java.awt.Frame;
import java.awt.TextArea;
import java.awt.TextField;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

/*
 * 增加一个按钮、文本框、文本域
 */
public class FrameDemo2 {
	public static void main(String[] args) {
		//创建窗体
		Frame f= new Frame("数据转移程序");
		//设置窗体属性和布局
		f.setBounds(400,200,400,300);
		f.setLayout(new FlowLayout());
		//创建按钮
		Button bu = new Button("数据转移");
		bu.setSize(20, 20);
		//创建文本框
		final TextField tf = new TextField(20);
		//加final是局部内部类访问局部变量，局部变量需要用final修饰
		//上述是视频中的说法，实际操作时，没加final并没有报错，不知道是不是新版本的特性？
		
		//创建文本域
		final TextArea ta = new TextArea(10,40);
		//添加组件到窗体
		f.add(bu);
		f.add(ta);
		f.add(tf);
		//设置窗体关闭
		f.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		});
		
		//对按钮添加事件
		bu.addActionListener(new ActionListener() {		
			@Override
			public void actionPerformed(ActionEvent e) {
				//获取文本框的值
				String tfStr = tf.getText().trim();
				//清空数据
				tf.setText("");
				//设置给文本域
				//ta.setText(tfStr);
				ta.append(tfStr+"\n");
				//获取光标
				tf.requestFocus();
			}
		});
		//显示窗体
		f.setVisible(true);
		
	}
}

7.通过鼠标移动到按钮上更改背景色案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
package cn.itcast_06;

import java.awt.Button;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Frame;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

/*
 * 增加一个按钮、文本框、文本域
 */
public class FrameDemo {
	public static void main(String[] args) {
		// 创建窗体
		Frame f = new Frame("数据转移程序");
		// 设置窗体属性和布局
		f.setBounds(400, 200, 400, 300);
		f.setLayout(new FlowLayout());
		// 创建按钮
		Button redButton = new Button("红色");

		// 添加按钮到窗体
		f.add(redButton);

		// 设置窗体关闭
		f.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		});

		// //对按钮添加动作监听
		// redButton.addActionListener(new ActionListener() {
		// @Override
		// public void actionPerformed(ActionEvent e) {
		// f.setBackground(Color.RED);
		// }
		// });

		// 对按钮添加鼠标点击事件
		// redButton.addMouseListener(new MouseAdapter() {
		// @Override
		// public void mouseClicked(MouseEvent e) {
		// f.setBackground(Color.RED);
		// }
		// });

		// 对按钮添加鼠标加入事件
		redButton.addMouseListener(new MouseAdapter() {
			@Override
			public void mouseEntered(MouseEvent e) {
				f.setBackground(Color.RED);
			}
		});

		// 对按钮添加鼠标离开退出事件
		redButton.addMouseListener(new MouseAdapter() {
			@Override
			public void mouseExited(MouseEvent e) {
				f.setBackground(Color.WHITE);
			}
		});

		// 显示窗体
		f.setVisible(true);

	}
}

8。文本框中只能输入数字案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
package cn.itcast_07;

import java.awt.FlowLayout;
import java.awt.Frame;
import java.awt.Label;
import java.awt.TextField;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

/*
 * 
 */
public class FrameDemo {
	public static void main(String[] args) {
		// 创建窗体对象并设置属性
		Frame f = new Frame("不能输入非数字字符");
		f.setBounds(400, 200, 400, 300);
		f.setLayout(new FlowLayout());

		// 创建标签对象
		Label label = new Label("请输入你的QQ号码，不能是非数字");
		TextField tf = new TextField(40);

		// 添加组件到窗体
		f.add(label);
		f.add(tf);

		// 设置窗体关闭
		f.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		});

		// 给文本框添加事件
		tf.addKeyListener(new KeyAdapter() {
			@Override
			public void keyPressed(KeyEvent e) {
				// 如果你取得是数字字符，显示。如果是非数字字符，取消。
				char ch = e.getKeyChar();
				if (!(ch >= '0' && ch <= '9')) {
					e.consume();
					//视频中是可以实现效果的，但是是实际操作数字和字母还是能输入
					//backspace之类的键倒是变成不能输入了
					//不用太担心，理解思想和主要操作就好，之后基本不会使用到这个。
					//可能是版本问题不同导致。
				}
			}
		});

		// 窗体可视化
		f.setVisible(true);
	}
}

9.一级菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
package cn.itcast_08;

import java.awt.FlowLayout;
import java.awt.Frame;
import java.awt.Menu;
import java.awt.MenuBar;
import java.awt.MenuItem;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

public class FrameDemo {
	public static void main(String[] args) {
		// 创建窗体
		Frame f = new Frame("一级菜单");
		// 设置窗体属性和布局
		f.setBounds(400, 200, 400, 300);
		f.setLayout(new FlowLayout());
		
		//创建菜单栏
		MenuBar mb = new MenuBar();
		//创建菜单
		Menu m = new Menu("文件");
		//创建菜单项
		MenuItem mi = new MenuItem("退出系统");
		
		//添加
		m.add(mi);
		mb.add(m);
		
		//设置菜单栏
		f.setMenuBar(mb);
		
		//添加退出系统功能
		mi.addActionListener(new ActionListener() {
			
			@Override
			public void actionPerformed(ActionEvent e) {
				System.exit(0);
			}
		});
		
		//设置窗体退出
		f.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		});
		
		//窗体可视化
		f.setVisible(true);
		
	}
}

10.多级菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
package cn.itcast_09;

import java.awt.FlowLayout;
import java.awt.Frame;
import java.awt.Menu;
import java.awt.MenuBar;
import java.awt.MenuItem;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.io.IOException;

public class FrameDemo {
	public static void main(String[] args) {
		// 创建窗体
		Frame f = new Frame("一级菜单");
		// 设置窗体属性和布局
		f.setBounds(400, 200, 400, 300);
		f.setLayout(new FlowLayout());

		// 创建菜单栏
		MenuBar mb = new MenuBar();
		// 创建菜单
		Menu m1 = new Menu("文件");
		Menu m2 = new Menu("更改名称");
		// 创建菜单项
		MenuItem mi1 = new MenuItem("好好学习");
		MenuItem mi2 = new MenuItem("天天向上");
		MenuItem mi3 = new MenuItem("恢复标题");
		MenuItem mi4 = new MenuItem("打开记事本");
		MenuItem mi5 = new MenuItem("退出系统");

		// 添加
		m1.add(m2);
		m1.add(mi4);
		m1.add(mi5);
		m2.add(mi1);
		m2.add(mi2);
		m2.add(mi3);
		mb.add(m1);

		// 设置菜单栏
		f.setMenuBar(mb);

		// 添加打开记事本功能
		mi4.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				Runtime r = Runtime.getRuntime();
				try {
					r.exec("open -a TextEdit");
				} catch (IOException e1) {
					e1.printStackTrace();
				}
			}
		});

		// 添加退出系统功能
		mi5.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				System.exit(0);
			}
		});

		// 设置窗体退出
		f.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		});

		// 窗体可视化
		f.setVisible(true);

	}
}

二、NetBeans