Web
掌握互联网通信流程【背】
老旧技术的命令不需要记忆90%不需要记忆
-
前端 HTML CSS -
与浏览器做交流javaScript
? JSP java处理结果与浏览器交流
-
互联网通信流程开发规则：MVC -
项目在线考试管理系统
一、互联网通信流程
1.互联网通信
两台计算机通过网络实现文件共享行为
2.角色划分
客户端计算机：发起请求 索要文件
服务端计算机：接收请求 提供对应文件
3.通信模型
3.2 C/S:
-
C：客户端软件
- 专门安装在客户端计算机
- 帮助客户端向指定服务器发送请求，解析文件
-
S：服务端软件
- 专门安装在服务端计算机
- 接收指定客户端请求 找到文件 解析为二进制 发送回
-
适用：个人娱乐市场【微型，淘宝，B站…】
-
优点：安全性高 降低服务端工作压力 -
缺点：增加客户获得服务的成本 更新繁琐
3.1 B/S：【主要学习】
-
B：浏览器
- 浏览器安装在客户端
- 可以向任意的服务器发送请求 解析返回的文件
-
S：服务器软件
- 专门安装在服务器
- 可以接收任意浏览器请求 找到文件 解析发送回文件
-
适用：个人娱乐市场 又广泛适用于企业 -
优点：不会增加用户服务成本 几乎不会更新浏览器 -
缺点：安全性低 工作压力大【高并发】
4.共享资源文件
通过网络进行传输的文件
Http服务器下文件分类：
4.1 静态资源文件：
- 文件内容固定【文档、图片、视频】
- 存放命令 只能在浏览器编译执行【html、css、js】
4.2 动态资源文件：
- 存放命令 不能被浏览器编译执行 只能在服务器编译执行【class】
4.3 静动调用区别：
- 静被索要:http服务器将文件解析通过输出流发送请求浏览器
- 动被索要:http服务器创建class对象,调用对应方法处理用户请求通过输出流将运算结果发送请求浏览器
4.4 互联网流程图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAfsuLRZ-1631231516074)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210909090558039.png)]
5.我在互联网通信的职责
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9dlnoxWD-1631231516081)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210909100743813.png)]
二、HTML
超文本标记式编程语言
1.介绍
2.作用
-
将浏览器接收的数据以指定方式在窗口展示 -
控制浏览器请求行为【前端/后端 重点】
3.语法规范
4.常见标签命令：
<html>
<head>:
<meta charset="GBK">
</head>
<body>
<p>第二段</p>
<p>第二段</p>
<h1>标题</h1>
<h2>标题</h2>
<ol>
<li>中国</li>
<li>美国</li>
</ol>
<ul>
<li>人口</li>
<li>版图</li>
</ul>
<ul>
<li>中国
<ol>
<li>人口</li>
<li>版图</li>
</ol>
</li>
<li>美国
<ol>
<li>人口</li>
<li>版图</li>
</ol>
</li>
</ul>
<table border="2">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>
5.发送请求三要素【背】
5.1 地址
超链接标签命令 默认GET
表单域标签命令 有method 填写请求方式 默认GET
5.2 请求方式
GET请求方式：
? 携带参数不超过4k
? 地址栏展示参数信息
? 参数信息保存在http请求协议包中请求头
? 收到资源文件 保存在浏览器缓存
POST请求方式：
? 可以携带任意参数
? 地址栏隐藏参数信息
? 参数信息保存在http请求协议包中请求体
? 收到资源文件 不保存在浏览器缓存
5.3 请求方式适合场景
门户级别的网站拒绝POST请求方式：用户可能发送病毒文件内容服务器进行攻击
某些特殊场景必须POST：文件上传 登录验证请求 实时变化的数据
5.4携带请求参数
请求参数格式：
请求地址?参数名=值&参数名=值
来源：
超链接标签命令
? < a href=“请求地址?参数名=值&参数名=值”>提示信息>
表单域标签命令
<form action="请求地址">
?
? 用户：<input type="text" name="url"><br>
密码：<input type="password" name="pass"><br>
性别：男：<input type="radio" name="sex" value="man">
女：<input type="radio" name="sex" value="woman"><br>
擅长：<input type="checkbox" name="check" value="java">java:
<input type="checkbox" name="check" value="c++">c++<br>
籍贯：<select name="home">
<option value="bj">北京</option>
<option value="fj">福建</option>
</select><br>
<textarea name="text" rows="10">
</textarea><br>
<input type="file" name="file"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
表单value默认值
大多数value：空字符串
raido和checkbox：“on” 字符串
表单域作为参数的条件
- 在form内部
- 声明name属性
- raido和checkbox必须满足第三条件 被选中
- disabled修饰 失去作为参数的资格 标签不可用
- readOnly 只能看不能改 但是可以作为参数
三、CSS 【能看懂就可】
1. 介绍
专门在浏览器编译执行的编程语言
用于定位浏览器中HTML标签中样式属性进行统一管理
2. HTML标签分类
2.1 基本属性
id属性 区分HTML标签
name属性允许一组标签拥有一样的name
2.2 样式属性
通知浏览器将HTML标签中数据在浏览器中以指定形态展示
<div style="width:300;height:300;background-color:green;font-size:50;color:red">我是div</div>
2.3 工作状态属性
只存在表单域标签中 radio与checkbox checked表示标签是否被选中
disabled 标签当前不可用
readOnly 标签只读
selected 存在option 标签是否被选中
2.4 监听属性
监听用户在何时对当前标签进行操作
通知浏览器调用avaScript方法处理当前请求
<script type="text/javascript">
function 方法(){
var mydiv = document.getElementById("xxx");
}
</script>
<div id="xxx" style="width:300;height:300;background-color:green;font-size:50;color:red"
onmouseover="方法()">
我是div
</div>
3.CSS选择器
3.1 介绍
一组定位条件用于定位HTML标签 9个分类
3.2 语法
<html>
<head>
<style text="text/css">
定位条件{
"样式属性":"值";
"样式属性":"值";
}
</style>
</head>
</html>
4. ID选择器
根据HTML标签中ID属性的值进行定位 #id编号
5. 标签类型选择器
根据HTML标签类型进行定位 标签类型
6. 层级选择器
根据标签之间父子关系或兄弟关系进行定位 #定位父标签条件 定位子标签条件
7. 自定义选择器
一组HTML没有相同的特征 但是需要对指定的属性赋值相同的内容 .自定义选择器名
在想要设置的标签 属性class=“自定义选择器名”
|