web 笔记_web 父子关系流程图-CSDN博客

本文链接：https://blog.csdn.net/weixin_51227224/article/details/120213837

Web

掌握互联网通信流程【背】

老旧技术的命令不需要记忆90%不需要记忆

前端 HTML CSS
与浏览器做交流javaScript

Mysql【10%】和JDBC 数据库
控制服务器java行为技术：Http服务器 Servlet

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>
    <!-- 所有HTML标签命令必须声明在<html></html> -->
    <!--<html>包含两个子标签
		<head></head>:设置基础参数信息
		<body></body>:负责通知浏览器 指定内容以指定方式展示
	-->
    <head>:
		<meta charset="GBK"><!--默认GBK-->
	</head>
    <body>
    	<!--<p></p>段落标签-->
        <p>第二段</p>
        <p>第二段</p>

        <!--<h数字></h数字>标题标签 数字越大 标题越小-->
        <h1>标题</h1>
        <h2>标题</h2>

		<!--<ol><li></li></ol>有序列表标签-->
		<ol>
			<li>中国</li>
			<li>美国</li>
		</ol>
		<!--<ul><li></li></ul>无序列表标签-->
		<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><tr><td></td></tr></table>表格标签-->
		<table border="2">
		<!--border 表格线框大小
			align 对齐方式
			-->
			<tr> 
			<!--rowspan 扩充单元格高度
				colspan 扩充单元格宽度
				-->
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
			</tr>
		</table>
		<!-- <img/>图片标签
			src 图片路径
			title 鼠标一放图片有信息
			width 图片宽度
			height 图片高度
		-->

		<!-- <font></font> 字体设置
			<conter></conter>居中
			<div></div>小方块
		-->

    </body>
</html>

5.发送请求三要素【背】

5.1 地址

超链接标签命令默认GET

格式：< a href=“请求地址”>提示信息>

表单域标签命令有method 填写请求方式默认GET

< form action=“请求地址”>

< input type=“submit” value=“按钮内容”>

< /form>

5.2 请求方式

GET请求方式：

携带参数不超过4k

地址栏展示参数信息

参数信息保存在http请求协议包中请求头

收到资源文件保存在浏览器缓存

POST请求方式：

可以携带任意参数

地址栏隐藏参数信息

参数信息保存在http请求协议包中请求体

收到资源文件不保存在浏览器缓存

5.3 请求方式适合场景

门户级别的网站拒绝POST请求方式：用户可能发送病毒文件内容服务器进行攻击

某些特殊场景必须POST：文件上传登录验证请求实时变化的数据

5.4携带请求参数

请求参数格式：

请求地址?参数名=值&参数名=值

来源：

超链接标签命令

< a href=“请求地址?参数名=值&参数名=值”>提示信息>

表单域标签命令

<form action="请求地址">
		<!-- text文本框 
			password密码框
			radio单选框 name一样
			checkbox多选框 name一样
			file文件
			reset重置-->
		用户：<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>
        <!--文字编译器 css编译器-->
        <style text="text/css">  
            定位条件{
                "样式属性":"值";
                "样式属性":"值";
            	}
        </style>
    </head>
</html>