web应用（二）

最新推荐文章于 2024-10-03 23:14:19 发布
最新推荐文章于 2024-10-03 23:14:19 发布
阅读量343 收藏 2
点赞数 5
文章标签： web安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_78820467/article/details/138257646
版权
建议：

       对于学习前端，最好的记忆方式，学习方式就是模仿，照着敲。

对于css的补充：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中元素(选择器),并且添加css样式 */
        /* 1.元素/标签/标记选择器:书写元素名称,即可选中所有对应的元素 */
        p {
            color:red;
        }
        div {
            color:blue;
        }
        /* 需求:选中第2个p元素,第3个span元素以及第1个div元素 */
        /* 2.类选择器:先给元素添加class="类名"来设置元素属于哪个类 */
        /* 再使用.类名的方式来选中添加class="类名"的元素 */
        .color {
            color:purple;
        }

        /* 3.ID选择器:确定唯一的元素 */
        /* 只给第2个div添加颜色 */
        /* 先给元素添加 id="id名称" */
        /* 使用 #id名称 选中唯一的元素 */
        /* 注意:id名称具有唯一性,在同一个html文件中,id的值不能重复 就像是身份证号*/
        #a1 {
            color:violet;
        }
    </style>
</head>
<body>
    <p>第1个p元素</p>
    <p class="color">第2个p元素</p>
    <p>第3个p元素</p>
    <span>第1个span元素</span>
    <span>第2个span元素</span>
    <span class="color">第3个span元素</span>
    <div class="color">第1个div元素</div>
    <div id="a1">第2个div元素</div>
    <div class="color">第3个div元素</div>
</body>
</html>
JS（JavaScript）简介：
  1. 早期用于处理用户的输入验证。
  2. 嵌入到html页面中，实现页面的特性和行为。
  3. 是一种解释性编程语言，基于流浪器执行。
JS的组成： 
  1. ECMAScript，提供核心语言功能。
  2. 文档对象模型（DOM），提供访问和操作文档内容的方法和接口。
  3. 浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在html文件中使用script标签包裹Js代码 -->
    <!-- script:脚本 -->
    <!-- script标签内的代码会被浏览器当做Js脚本代码解析运行 -->
    <script>
        // Js中的注释: 单行注释 //  快捷方式:ctrl + /
        /* 多
        行
        注
        释 */
        // alert(文本) : 在网页中弹出对话框显示文本
        // 一般是用户交互时使用
        alert('hello world!');

        // document.write(文本):在网页中输出内容
        // 很少用,少数情况前端人员测试使用
        document.write('世界你好！');

        // console.log(文本):在控制台输出文本
        // 查看方式:在网页中按 F12 -> 控制台
        // 前端开发人员常用的测试输出方式
        console.log('Hello World!');
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 变量:在程序运行过程中保存数据的量,数据可以发生变化
        // 声明变量 : var 变量名;
        var name;
        // 给变量赋值 变量名 = 值;（有点像C语言）
        name = '张三';
        console.log(name);

        // 声明变量的同时赋值
        var age = 25;
        console.log(age);

        var height = 185;
        var sex = '男';
        var hair = '稀少';
        console.log(height,sex,hair);

        // 标识符(变量名,函数名,参数名,对象属性名)的命名规则
        // 1.第一个字符必须是字母,下划线或者美元符号($)
        // 2.其他字符可以是数字,字母,下划线或者美元符号($)
        // 3.标识符需要按照驼峰大小写写法书写
        // 第一个单词的首字母小写,其他单词的首字母大写
        // var getInfoByName;
        // 4.不能把关键字,保留字作为标识符
        // var continue break for if else ....
        // var var1 = 100;

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Js中的常用的数据类型
        // 1.number : 数值型 包括整数和小数
        // 2.string : 字符串类型 使用单引号或者双引号包裹
        // 3.boolean : 布尔型 true/false
        // 4.undefined : 未定义的
        // 5.null : 空
        // 6.object : 对象

        // 1.number类型
        // typeof(变量) : 输出变量的数据类型
        var num = 3.14;
        console.log(num);
        console.log(typeof(num)); // number

        // 2.string 字符串类型
        // 使用单引号或者双引号包裹的内容是字符串
        var name = 'tony';
        // var sex = "男";
        console.log(name);
        console.log(typeof(name)); // string

        // 问题 : 声明一个变量,数据类型是什么?
        // 1.number  2.string
        // 注意:只要被单引号或者双引号包裹的内容,都是string字符串类型
        var num1 = "100";
        console.log(num1);
        console.log(typeof(num1)); // string

        // 3.boolean : 布尔型  true/false
        var bool = true;
        console.log(bool);
        console.log(typeof(bool)); // boolean

        // 问题: 'fasle'的数据类型是什么?
        console.log(typeof('false')); // string

        // 4.undefined : 未定义的
        // 多数情况是代码出问题才会出现undefined类型
        // 少数情况是为了开发的需要,主动赋值为undefined
        var undef; // 声明变量但没有赋值,值就是undefined
        console.log(undef);
        console.log(typeof(undef)); // undefined

        // 5.null : 空
        // 一般是主动给变量赋值为null,来清空变量中存储的数据
        var nu1 = null;
        console.log(nu1);
        console.log(typeof(nu1)); // object

        // 6.object : 对象 
        // {属性名:属性值,属性名2:属性值2,属性名3:属性值3....}
        var obj = {name:'tony',age:25,sex:'男',height:180};
        console.log(obj);
        console.log(typeof(obj));

        // Js中关于分号的规定,加或者不加都可以
        // ;代表的是语句的结束
        // Js不加分号,程序会自动判断语句结束
        // 建议在语句的结束加上分号
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 运算符
        // 1.赋值运算符 : =   将  =  右侧的内容赋值给  =  左侧
        // var num = 100;
        // 2.算数运算符
        // + - * / %   加 减 乘 除 求余
        console.log( 1 + 1 );
        console.log( 2 - 1 );
        console.log( 2 * 3 );
        console.log( 5 / 2 );
        // % 读作 '模' : 进行求余运算
        // 10 ÷ 3 => 3 余 1
        console.log( 10 % 3 );
        console.log( 5 % 3 );

        // 一般使用%来判断一个数字是否能被另外一个数字整除
        // a%b => 0 代表余数为0 代表能够整除
        // a%b => 不是0 代表余数不为0 代表不能整除

        // += -= *= /= %=
        // 有一个变量,在这个变量的基础上+10,将+10后的结果再次赋值给这个变量
        var num = 100;
        // num = num + 10;
        num += 10;   //这俩个操作完全一样
        console.log(num);

        // 3.自增自减运算符:++ --
        var num1 = 100;
        // num1 += 1;
        num1++; // 在原有变量值的基础上+1
        console.log(num1);

        var num2 = 10;
        num2--; // 在原有变量值的基础上-1
        console.log(num2);

        // 前置写法的自增自减:会先增减,再使用
        var a = 10;
        console.log(++a); // 11 先自增,后输出

        // 后缀写法的自增自减:先使用,再增减
        var b = 10;
        console.log(b++); // 10 先输出b的值,再对b进行自增操作
        console.log(b); // 11

        // 4.关系运算符
        // < > <= >=
        console.log(100 < 99); // false
        console.log(100 > 99); // true
        console.log(100 >= 100); // true
        console.log(100 <= 80); // fasle

        // == : 相等判断  只判断数据的值,不考虑数据类型,
        // 只要值相等,相等判断就会返回true
        console.log(100 == '100'); // true

        // === : 全等判断 既判断值,又判断数据类型
        // 只有在数据类型和值完全一致的情况下,才会返回true
        // 否则就会返回false
        console.log(100 === '100'); // false
        console.log(100 === 100); // true

        // != : 不相等  与相等判断的结果相反
        console.log(100 != '100'); // false

        // !== : 不全等 与全等判断的结果相反
        console.log(100 !== '100'); // true

        // 5.逻辑运算符
        // && : 逻辑与 可以理解为'并且'的意思
        // 女孩1择偶标准:要求男生身高180以上并且年龄在30岁以下
        // &&:必须&&前后的表达式同时为true才会整体为true
        // 如果有一个表达式为false,整体就会为false
        var height = 175;
        var age = 25;
        console.log(height >= 180 && age < 30); // false

        // || : 逻辑或 可以理解为'或者'的意思
        // 女孩2的择偶标准：要求男生身高180以上或者年龄30岁以下
        // || : ||前后的表达式只要一个为true,整体就为true
        // 只有在||前后表达式都为fasle时,整体才是false
        console.log(height >= 180 || age < 30); // true


        // ! : 逻辑非  取反
        console.log(!true); // false
        console.log(!false); // true

    </script>
</body>
</html>

流程控制：js执行代码的顺序称之为流程。

  1. 顺序结构。
  2. 选择结构。
  3. 循环结构。

 顺序结构：

      js代码从上到下一次执行。

选择结构：

      代码的执行根据不同的条件，执行不同的语句。（有点像高中数学的程序框图）

      根据条件的数量不同分为以一下三种：

  1. if语句。
  2. if else语句。
  3. if else if语句。

 循环结构：反复的去执行一段代码。有for， while，  do...while。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 选择结构
        // 1.单分支选择结构 if(表达式){代码块;}
        // 如果表达式为true,执行代码块
        // (如果表达式为false,不执行代码块)
        // var age = 16;
        // 如果年龄不满18周岁,弹窗提示:未成年人禁止入内
        // if(age < 18){
        //     alert('未成年人禁止入内!');
        // }

        // 2.双分支选择结构
        // if(表达式){代码块1}else{代码块2}
        // 如果表达式为true,执行代码块1,否则执行代码块2
        // 如果年龄小于18岁,提示未成年人禁止入内,
        // 否则,提示:欢迎光临,请上二楼
        // var age = 50;
        // if(age < 18){
        //     alert('未成年人禁止入内!');
        // }else{
        //     alert('欢迎光临,请上二楼!');
        // }

        // 3.多分支结构
        // if(表达式1){代码1;}else if(表达式2){代码2;}else if(表达式3){代码3;}...else{代码0}
        // 如果表达式为true,执行代码1,如果为false,进入到下一个表达式的判断
        // 如果表达式2位true,执行代码2,如果为false,进入到下一个表达式的判断
        // 如果表达式3位true,执行代码3...
        // 如果前面的表达式都为false,最终会进入到else分支中,执行代码0
        
        // 满分制100分,会根据你的得分进行分级
        // 分数是100分,满分
        // 分数大于等于90并且小于100,优秀
        // 分数大于等于80并且小于90,良好
        // 分数大于等于60并且小于80,及格
        // 分数小于60分,不及格
        var score = 55;
        if(score == 100){
            alert('满分!');
        }else if(score>= 90 && score<100){
            alert('优秀!');
        }else if(score>=80 && score<90){
            alert('良好!');
        }else if(score>=60 && score<80){
            alert('及格');
        }else{
            alert('不及格');
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 循环结构
        // 1.for循环:重复执行代码

        // 输出100次hello world
        // console.log('hello world');

        for(var i=1;i<=100;i++){
            console.log('hello world');
        }

        // for(语句1;语句2;语句3){代码}
        // 语句1:只执行一次,一般是给变量进行初始化操作
        // 语句2:不断进行循环,一般是一个表达式,表达式的值为true,执行代码,并且执行语句3
        // 如果语句2位false,终止循环
        // 语句3:设置步长 设置变量的变化长度
    </script>
</body>
</html>

北极的零度
关注
web应用项目开发
m0_74145332的博客
12-30 2300
Web（World Wide Web）是一种基于互联网的信息系统，它通过超文本和超链接的方式，将各种资源（如文本、图像、视频等）组织起来并通过浏览器进行访问。Web的核心技术是HTML（Hypertext Markup Language），它是一种标记语言，用于描述和布局Web页面的结构。通过HTML，我们可以创建文本、图像、链接等元素，并将它们组织成页面。除了HTML，Web还依赖其他技术，如CSS（Cascading Style Sheets）和JavaScript。
Web应用开发介绍
人生处处是围城，一切都是最好的安排！
08-11 6420
Web开发基础介绍
Django 5 Web应用开发实战
热门推荐
屿小夏.的知识博客
06-13 6万+
Django 5 Web应用开发实战》集Django架站基础、项目实践、开发经验于一体，是一本从零基础到精通Django Web企业级开发技术的实战指南。《Django 5 Web应用开发实战》内容以Python 3.x和Django 5版本为基础，从Django 5构建项目开始，逐步深入讲述Django框架的各项功能要点，每个功能要点从源码角度分析，并在源码的基础上实现自定义的功能开发。
Web应用的概念以及Java Web应用的发展路程
终生学习践行者
08-12 2657
简单介绍了Web应用的概念以及Java Web应用的发展路程。
Web及其Web应用部署
阳young的博客
02-11 1958
Web概念: Web即网页, 表示在Internet主机上供外界访问的资源. Web资源: 1. 静态资源: html, css, js, txt......2. 动态资源: jsp,servlet...... Web服务器:
二、web应用组织结构
小小菜鸟的博客
07-04 1843
一、web应用组成和虚拟目录映射1、WEB应用程序是指提供给浏览器访问的程序，一个web应用由多个静态资源和动态资源组成 html、css、js文件 jsp文件、java程序、支持jar包 配置文件 …… 2、web应该用开发好以后，若想供外界访问，需要把web应用所在目录交给服务器管理，这个过程称之为虚拟目录的映射。 tomcat中虚拟目录的映射方式详细情况可以参考tomcat文档中config
Web应用程序开发课程总结
花果山
06-06 4916
Web应用程序的定义： 顾名思义，Web应用是运行在Web上的应用程序。但是反过来，运行在Web上的应用程序都是Web应用吗？答案是否定的。这里所说的Web应用是指运行在网络上，以浏览器作为通用客户端的应用程序，在许多地方又被称为B/S（Browser/Server，浏览器-服务器）模式的应用。例如我们身边的教务系统，选课系统，都是基于浏览器进行访问的Web应用程序。 Web应用程序的开发方法及应用范围： Java Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多
WEB应用开发设计实验报告一
j1018726071的博客
06-22 4235
课程名称 WEB应用开发设计 姓 名 玖十柒97 一.实验课题 Servlet的应用 二. 实验目的 1.使用Eclipse开发Servlet。 2.实现Servlet虚拟路径的映射。 三. 实验内容 1、完成课本92页任务3-1。 2、完成课本100页任务3-2。 3、阅读课本104页3.4节，并完成113页课后习题4。 四. 实验步骤 在以下表格中给出实验内容的相应代码。 3-1： package servlet_test; import java.io.IOExcept
Web应用架构
Coder Wu的博客
06-09 4968
前言：博主大三，其实本来学习的是Android移动端开发。近期有幸来到了阿里的菜鸟网络实习，阴差阳错地安排到了Web应用开发。但是我真的是一点都不懂的啊...就是那种连启动tomcat都会想想的那种。到现在已经实习了两周了。学习了很多，很多概念也很是混乱，action，servlet，jsp，javascript，velocity，screen，spring等等。想想就头大。很有必要将所悟沉淀下来
Web开发中常用的Web应用服务器
侯仕奇的博客
09-22 2566
Nginx Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上Nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等, 在连接高并发的情况下，Nginx是Apache服务器不错的替代品. Nginx是由伊...
ASP.NET Web 应用开发技术（第二版） 课后答案
06-19
ASP.NET Web 应用开发技术（第二版） 课后答案 喻钧 web应用程序
WEB应用安全测试指南1
08-08
目录一. 概述 81.1 编写目的 81.2 适用范围 81.3 注意事项 8二. Web应用安全测试指南 82.1 信息泄漏 82.1.1 robots.tx
计算机等级考试二级web程序设计2015综合应用题.pdf
10-07
计算机等级考试二级web程序设计2015综合应用题.pdf
ACCP8.0Y2的Web前端框架与移动应用开发第二部分
02-27
北大青鸟ACCP8.0Y2学期中的Web前端框架与移动应用开发完整版，分成了2个部分，这是第二部分，请下载
海康摄像头web二次开发demo（官方DEMO）
05-17
2. **Web二次开发**：Web二次开发指的是基于现有的Web应用程序或服务，进行功能扩展、定制或优化的过程。在这个案例中，是指利用Web技术来操控海康摄像头。 3. **js脚本控制**：JavaScript是一种广泛用于网页和网络...
网络安全 网络安全的主要领域 安全威胁 防护技术 安全策略 未来趋势
最新发布
weixin_42462436的博客
10-03 1454
随着智能手机和平板电脑的广泛使用，移动设备的安全（如数据加密、设备丢失保护等）也成为重点。由国家级或高级黑客组织发起的持续性、高度隐蔽的网络攻击，通常以窃取敏感信息为目的。使用加密、访问控制、数据备份等手段来保护信息免受未经授权的访问、修改或删除。包括防火墙、入侵检测系统（IDS）、入侵防御系统（IPS）等技术的使用。保证操作系统和相关服务的安全，包括权限控制、补丁管理、系统日志监控等。利用全球收集的安全信息和分析工具，提前识别并防御潜在的威胁。关注对虚拟化平台、API安全、数据隔离和访问管理的控制。
【网络安全】Cookie与ID未强绑定导致账户接管
等风来
10-02 305
DigiLocker 是一项在线服务，旨在为公民提供一个安全的数字平台，用于存储和访问重要的文档，如 Aadhaar 卡、PAN 卡和成绩单等。DigiLocker 通过多因素身份验证（MFA）来保护用户账户安全，通常包括 6 位数的安全 PIN 和一次性密码（OTP）验证。
Web安全 - 文件上传漏洞（File Upload Vulnerability）
小工匠
10-02 1774
文件上传漏洞是指Web应用允许用户上传文件，但没有对上传文件进行充分的验证和限制，导致攻击者可以上传恶意文件，如脚本、恶意代码等，进一步执行恶意操作。这种漏洞常见于文件管理、头像上传或文档管理等功能中。路径穿越结合文件上传：绕过文件上传目录限制，访问或执行敏感位置的文件。远程代码执行（RCE）结合文件上传：通过上传并执行恶意文件实现远程控制。跨站脚本（XSS）结合文件上传：通过文件传播恶意脚本，跨站点执行攻击。跨站请求伪造（CSRF）结合文件上传：在不知情的情况下诱使用户上传恶意文件。
Web安全 - 跨站点请求伪造CSRF（Cross Site Request Forgery）
小工匠
09-29 1323
CSRF (Cross-Site Request Forgery，跨站请求伪造) 是一种攻击方式，攻击者诱导用户在不知情的情况下发起非授权的请求。例如，用户在登录某个站点后，攻击者通过社交工程等手段诱使用户点击包含恶意请求的链接，利用用户已登录的状态，发起用户意图之外的操作，如转账、修改账户设置等。：在每次受保护的请求中，服务器生成一个唯一的CSRF Token，注入到表单或请求头中。：对于敏感操作，可以要求用户进行额外的身份验证，如验证码或短信验证，防止攻击者即便利用用户的认证状态，也无法完成关键操作。
JavaServerPages技术详解：Web应用开发
"Web应用文档通常是指用于指导开发和理解Web应用程序的各种技术文档，包括但不限于需求规格、设计文档、源代码注释、用户手册、API参考等。这些文档是项目开发过程中不可或缺的一部分，有助于团队协作、问题排查和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值