前端学习日记-log6

本文最后更新于：3 个月前

百度前端技术学院

第一天：为什么有那么多人要做前端？

一个普通网站访问的过程
简单概括一下，对于我们普通的网站访问，涉及到的技术就是：

  1. 用户操作浏览器访问，浏览器向服务器发出一个HTTP请求；
  2. 服务器接收到HTTP请求，Web Server进行相应的初步处理，使用服务器脚本生成页面；
  3. 服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
  4. Web Server将生成的页面作为HTTP响应的body，根据不同的处理结果生成HTTP header，发回给客户端；
  5. 客户端（浏览器）接收到HTTP响应，通常第一个请求得到的HTTP响应的body里是HTML代码，于是对HTML代码开始解析；
  6. 解析过程中遇到引用的服务器上的资源（额外的CSS、JS代码，图片、音视频，附件等），再向Web Server发送请求，Web Server找到对应的文件，发送回来；
  7. 浏览器解析HTML包含的内容，用得到的CSS代码进行外观上的进一步渲染，JS代码也可能会对外观进行一定的处理；
  8. 用户与页面交互（点击，悬停等等）时，JS代码对此作出一定的反应，添加特效与动画；
  9. 交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过JS代码（响应某个动作或者定时）向Web Server发送请求，Web Server再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

注意这只是小网站里比较常见的模型，大网站为了解决规模问题还会有很多处理，每个环节都会有一些细微的差异，中间还会使用各种各样的工具减轻服务器的压力，提高效率，方便日常维护

第二天：给自己做一个在线简历吧

  1. 羡辙的简历
  2. Web语义化，Semantic 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>简历</title>
	</head>
	<body>
		
		<div id="">
			<h3>个人信息</h3>
			
			<div id="">
				<span>姓名：张三</span>
				<span>性别：男</span>
			</div>
			
			<div id="">
				<span>手机：18600000000</span>
				<span>邮箱：joinefe@baidu.com</span>
			</div>
		</div>
		
		<div id="">
			<h3>项目列表</h3>
			
			<div id="">
				<p>项目名称：A</p>
				
				<p>项目时间：xxxx.xx - xxxx.xx</p>
				
				<p>项目描述：</p>
				
				<p>少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书</p>
			</div>
			
			<div id="">
				<p>项目名称：B</p>
				
				<p>项目时间：xxxx.xx - xxxx.xx</p>
				
				<p>项目描述：</p>
				
				<p>少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书</p>
			</div>
		</div>
	</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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>简历</title>
		<link rel="stylesheet" type="text/css" href="css/test.css"/>
	</head>
	<body>
		
		<div id="infoCell">
			<h3>个人信息</h3>
			
			<div class="cell">
				<p class="halfInfo">姓名：张三</p>
				<p class="halfInfo">性别：男</p>
			</div>
			
			<div class="cell">
				<p class="halfInfo">手机：18600000000</p>
				<p class="halfInfo">邮箱：joinefe@baidu.com</p>
			</div>
		</div>
		
		<div id="projectCell">
			<h3>项目列表</h3>
			
			<div>
				<div class="cell">
					<p class="halfInfo">项目名称：A</p>
					<p class="halfInfo">项目时间：xxxx.xx - xxxx.xx</p>
				</div>
				
				<p>项目描述：</p>
				<p>少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书</p>
			</div>
			
			<div>
				
				<div class="cell">
					<p class="halfInfo">项目名称：B</p>
					<p class="halfInfo">项目时间：xxxx.xx - xxxx.xx</p>
				</div>
				
				<p>项目描述：</p>
				
				<p>少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书少时诵诗书</p>
			</div>
		</div>
	</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
33
34
35
36
/* css */
* {
	margin: 0;
}

body {
	margin: 8px 8px 8px 8px;
}

h3 {
	font-weight: bold;
	background-color: darkslategray;
	color: white;
	width: 100px;
	height: 28px;
	font-size: 20px;
	text-align: center;
	margin-top: 15px;
}

.cell {
	width: 100%;
	height: 38px;
}

.halfInfo {
	float: left;
	width: 50%;
	height: 38px;
	line-height: 38px;
	
	/* 超出部分显示省略号 */
	text-overflow: ellipsis;
	white-space: nowrap;
    overflow: hidden;
}

未完待续