web

时间：2021-09-11 14:31:10 收藏：0 阅读：28

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 互联网流程图：

技术分享图片

5.我在互联网通信的职责

技术分享图片

二、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="请求地址">提示信息</a>>

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

< form action="请求地址">

< input type="submit" value="按钮内容">

< /form>

5.2 请求方式

GET请求方式：

携带参数不超过4k

地址栏展示参数信息

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

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

POST请求方式：

可以携带任意参数

地址栏隐藏参数信息

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

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

5.3 请求方式适合场景

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

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

5.4携带请求参数

请求参数格式：

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

来源：

超链接标签命令

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

表单域标签命令

<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;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;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>

4. ID选择器

根据HTML标签中ID属性的值进行定位 #id编号

5. 标签类型选择器

根据HTML标签类型进行定位标签类型

6. 层级选择器

根据标签之间父子关系或兄弟关系进行定位 #定位父标签条件定位子标签条件

7. 自定义选择器

一组HTML没有相同的特征但是需要对指定的属性赋值相同的内容 .自定义选择器名

在想要设置的标签属性class="自定义选择器名"

原文：https://www.cnblogs.com/zumeng/p/15249748.html