前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 涵盖了两个综合案例 做到了基础学得会,实战写的出

点击前往前端开发基础专栏:

文章目录

  • HTML5 + CSS3 开发
      • 一、开发环境搭建
          • 下载 VS Code
          • 1. 2 插件的下载
          • 1.3 项目和文件的下载
      • 二、 什么是 HTML
          • 2.1 标签的语法
          • 2.2 代码演示:
          • 2.3 小结
      • 三 、HTML基本骨架
          • 3.1 快捷键生成HTML骨架
          • 3.2 代码展示
          • 3.3 小结
      • 四、标签之间的关系
          • 4.1 标签之间的两种关系
          • 代码示例:
          • 3.3 小结
      • 五、注释
          • 5.1 什么是注释
          • 5.2 代码示例
          • 5.3 小结
      • 六、标题标签
          • 6.1 标题标签
          • 6.2 代码示例:
          • 6.3 小结
      • 七、段落标签
          • 7.1 段落标签的特点
          • 7.2 代码示例:
            • 7.3 小结
      • 八、 换行与水平线标签
          • 8.1 换行与水平线标签
          • 8.2 代码示例:
          • 8.3 小结
      • 九、 文本格式化标签
          • 9.1 什么是文本格式化标签
          • 9.3 代码示例:
          • 小结
      • 十、图像标签
          • 10.1 图像标签
          • 10.2 代码示例:
          • 10.3 小结
      • 十一、 图片标签 - 属性
          • 11.1 图片的属性
          • 11.2
          • 11.3 小结
      • 十二、 路径
        • 12.1 相对路径
        • 12. 3 代码示例
        • 12. 3小结
      • 十三、超链接标签
          • 13. 1 什么是超链接![什么是](https://img-blog.csdnimg.cn/direct/2050ee323f5245238594d7ecd2595272.png)
          • 13.2 代码示例:
          • 13.3 小结
      • 十四、音频标签
          • 14.1 音频标签
          • 14.2 代码示例:
      • 十五、视频标签
          • 15.1 视频标签概述
          • 15.2 代码示例:
      • 综合案例一 - 个人简介
          • 代码示例:
      • 综合案例二 - Harmony OS简介
          • 代码示例
          • 效果展示

HTML5 + CSS3 开发

一、开发环境搭建

在这里插入图片描述

  • 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了!
下载 VS Code

VS Code 官网下载地址

在这里插入图片描述

  • 这里根据自己电脑的操作系统进行下载!

安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是是非常简单的,一直下一步就可以了。

安装完毕后,双击打开安装包运行进行安装

  1. 接受协议,然后点击下一步
  2. 选择你需要安装到的目录路径,自己自定义也可以,默认也行
  3. 可以勾选桌面快捷方式,点击下一步
  4. 然后就直接点击安装即可
1. 2 插件的下载
    1. 汉化版插件
      在这里插入图片描述
    1. 安装浏览器运行插件
      在这里插入图片描述
1.3 项目和文件的下载

可以先自己创建一个文件夹目录,然后拖住文件夹对这 vscode 图标打开,或者 打开 vscode 然后拖进来

也可以在文件中打开找到我们创建的文件夹
在这里插入图片描述
在这里插入图片描述

二、 什么是 HTML

在这里插入图片描述

2.1 标签的语法

在这里插入图片描述

2.2 代码演示:
<!-- * 1.演示标签的写法* 双标签(成对出现)- 注意: 标签是成对出现的,并且结束标签还需需要加上 /- 语法格式: <>内容</>* 单标签- 单标签区分就在于不需要包裹内容的:  <>  
--><!-- 1、双标签代码 -->
<strong>文字加粗标签</strong><!-- 2、单标签代码 -->
<hr>
2.3 小结

在这里插入图片描述

三 、HTML基本骨架

在这里插入图片描述

3.1 快捷键生成HTML骨架

在这里插入图片描述

  • 我们创建文件后 空白的,所以这里我们直接使用快捷键进行生成骨架就OK了。
3.2 代码展示
<!-- * 2. HTML骨架生成快捷键演示- ! (英文状态下) 配合 Enter 或者 Tab进行生成    --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是网页标题</title></head><body>body标签中的标签内容都是可以给用户看的哦!写在这里。</body></html>
  • 浏览器运行后的效果图:

在这里插入图片描述

3.3 小结

在这里插入图片描述

四、标签之间的关系

4.1 标签之间的两种关系

在这里插入图片描述

代码示例:
<!-- * 3. 标签之间的关系-  1. 父子关系(嵌套关系)-  2. 兄弟关系(并列关系)-  细节: 其实我们可以通过观察编辑器的缩进进行区分之间的关系--><!-- 1. 创建一个父级标签 --><html><!-- 2. 创建一个子级标签 --><head></head><!-- 3. 创建第二个子级标签 --> <body></body></html><!-- html  是父级标签,里面两个是子级标签。 head 和  body 之间是并列标签 -->
3.3 小结

在这里插入图片描述

五、注释

5.1 什么是注释

在这里插入图片描述

5.2 代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注释代码演示</title>
</head>
<body><!-- * 4. 注释的演示: Ctrl + / 添加注释或者删除注释 --><!-- <div>我不想被看见,也可以把我注释掉</div> --><div>我没有被注释,可以被发现哦!</div>
</body>
</html>
5.3 小结

在这里插入图片描述

六、标题标签

6.1 标题标签

在这里插入图片描述

6.2 代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示标题标签</title>
</head>
<body><!-- * 5. 演示标题标签:-- 语法: 双标签  -- >  <h 1 - 6>标题内容</h 1 - 6>--><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6>
</body>
</html>
  • 效果展示:

在这里插入图片描述

6.3 小结

在这里插入图片描述

七、段落标签

在HTML中,段落标签(<p>)用于定义文本中的段落。
它是块级元素,意味着每个段落会以新行开始,并且在浏览器中默认会有上下间距。每一对<p>标签之间的内容会被视为一个独立的段落。
1
7.1 段落标签的特点

在这里插入图片描述

7.2 代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示段落标签</title>
</head>
<body><!-- * 6. 演示段落标签 p 标签语法:<p>这是一个段落。</p>--><p>这是第一个段落。</p><p>这是第二个段落。</p>
</body>
</html>
7.3 小结

在这里插入图片描述

八、 换行与水平线标签

8.1 换行与水平线标签

在这里插入图片描述

8.2 代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>换行与水平线标签</title>
</head>
<body><!-- *  演示: 换行与水平线标签- 语法: 换行:<br>  水平线:<hr>-->第一行文字<br>第二行文字<hr>
</body>
</html>
  • 不使用换行的效果
    在这里插入图片描述

  • 使用换行的效果
    在这里插入图片描述

8.3 小结

在这里插入图片描述

九、 文本格式化标签

9.1 什么是文本格式化标签

在这里插入图片描述
*##### 9.2 标签语法和作用

在这里插入图片描述

9.3 代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示文本格式化标签</title>
</head>
<body><!-- * 演示文本格式化标签- 加粗、倾斜、下划线、删除线--><strong><b>strong 加粗</b></strong><b>b 加粗</b><em>em 倾斜</em><i>i 倾斜</i><ins>ins 下划线</ins><u>u 下划线</u><del>del 删除线</del><s>s 删除线</s></body>
</html>
小结

在这里插入图片描述

十、图像标签

10.1 图像标签

在这里插入图片描述

10.2 代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示图片标签的使用</title>
</head>
<body><!-- * 演示图片标签的使用- 语法: 单标签: <img>--><img src="../image/image.png" alt=""></body>
</html>
10.3 小结

在这里插入图片描述

十一、 图片标签 - 属性

11.1 图片的属性

在这里插入图片描述

11.2
	    <!-- alt: 替换文本,图片无法加载,替换成文字 --><img src="../Image/image.pngs" alt="我是替换文字">

在这里插入图片描述

	    <!-- title: 提示文本: 鼠标悬停图片显示的文字 --><img src="../Image/image.png" title="我是 title 文字">

在这里插入图片描述

	    <!-- width: 图片的宽度 没有单位的数值--><img src="../Image/image.png" width="200">

在这里插入图片描述

	    <!-- width: 图片的宽度 没有单位的数值--><img src="../Image/image.png" height="200">

在这里插入图片描述

11.3 小结

在这里插入图片描述

十二、 路径

在这里插入图片描述

12.1 相对路径

在这里插入图片描述

12. 3 代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示路径的使用</title>
</head>
<body><!-- * 路径分为两种: 1. 相对路径   2. 绝对路径- 相对路径: 相对当前文件的路径  ./   ../   描述- 绝对路径: 相对电脑的盘符或者根路径进行描述的路径 (这里不多做介绍)--><img src="../Image/image.png" alt="">
</body>
</html>
  • src的属性值:就是描述的图片路径,是一个相对路径。
12. 3小结

在这里插入图片描述

  • 绝对路径这里就不做介绍了,因为大家电脑里面时时刻刻用的都是绝对路径。

十三、超链接标签

13. 1 什么是超链接什么是
13.2 代码示例:
    <!-- * 演示超链接标签的使用- 语法: <a gref="属性值"></a>--><a href="www.baidu.com">点击跳转到百度!</a>

在这里插入图片描述

13.3 小结

在这里插入图片描述

十四、音频标签

14.1 音频标签

在这里插入图片描述

14.2 代码示例:
    <!--audio音频标签: + 属性说明:- src 属性是我们需要渲染的音频路径 - controls: 显示音频控制面板    - loop;循环播放- autoplay: 自动播放--><audio src="../audio/周深 - 小美满.mp3" controls></audio>
  • 效果展示:

在这里插入图片描述

十五、视频标签

15.1 视频标签概述

在这里插入图片描述

15.2 代码示例:
    <!-- * 演示 视频标签的使用:- 语法: video 双标签- 属性: src : 必须属性  controls 显示视频控制面板 loop 循环播放 muted 静音播放 autoplay 自动播放--><video src="../video/test" controls loop autoplay muted></video>

综合案例一 - 个人简介

在这里插入图片描述

代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>余承东 - 个人简介</title>
</head>
<body><h1>余承东</h1><hr><p>华为常务董事、终端BG CEO、智能汽车解决方BU 董事长、智能终端与智能汽车部件IRB主任</p><img src="../Image/01 yuchengdong.webp" alt="" width="150" height="150"><h3>学习经历</h3><p><a href="https://baike.baidu.com/item/%E4%BD%99%E6%89%BF%E4%B8%9C/3767904?fromModule=search-result_lemma-recommend">余承东</a> ,1969年生,安徽省六安市霍邱县人,本科毕业于西北工业大学,清华大学硕士,1993年加入华为。现任华为董事会成员、常务董事、终端BG CEO、智能汽车解决方案BU 董事长 [22]、智能终端与智能汽车部件IRB主任。   </p><h3>主要成就</h3><p>余承东(Richard Yu)是华为消费者业务CEO,他在华为的发展中发挥了重要的领导作用。以下是余承东的一些主要成就:领导华为消费者业务的蓬勃发展:余承东领导下的华为消费者业务在过去几年取得了巨大的成功。华为智能手机品牌迅速崛起,成为全球最大的智能手机制造商之一。他的领导下,华为在设计、技术创新、摄影能力和性能方面取得了显著突破。推动华为手机的技术创新:余承东致力于推动华为手机的技术创新,使其成为市场上的领先者。他推动了华为在摄影领域的研发和创新,使华为手机成为具有卓越图像质量和摄影能力的设备。华为的摄影技术在业界广受赞誉,并在多个国际评测中获得高分和奖项。推广华为品牌的全球化:余承东在推广华为品牌的全球化方面发挥了重要作用。他引领华为在全球范围内扩大市场份额,尤其是在欧洲、亚洲和拉丁美洲等地。余承东在推出华为P系列和Mate系列等高端产品时,通过全球营销和品牌活动增强了华为在国际市场上的知名度和认可度。推动5G技术的发展:作为华为高层领导,余承东积极推动5G技术的研发和部署。他在全球范围内倡导并推广5G技术的重要性,并与合作伙伴共同推进5G网络建设。华为在5G领域取得了显著的突破,并成为全球5G技术和网络设备的主要供应商之一。强调用户隐私和数据安全:余承东一直非常关注用户隐私和数据安全的重要性。他强调了华为对用户数据隐私的承诺,并采取了多种措施来确保华为产品和服务的安全性。余承东通过加强安全研发、开放透明合规等措施,加强了华为在数据安全方面的声誉。这些是余承东在华为的主要成就之一。作为华为消费者业务的领导者,他在推动华为品牌的全球化、技术创新、市场份额扩大和用户数据安全方面发挥了重要作用。</p><h3>社会任职</h3><p>余承东除了在华为的职位外,还担任了一些社会任职。以下是一些他的社会任职经历:中国信息通信研究院学术委员会委员:余承东是中国信息通信研究院(China Academy of Information and Communications Technology)学术委员会的委员。该机构是中国信息通信技术产业的研究和咨询机构,致力于推动信息通信技术的发展和创新。深圳市电子商务协会副会长:余承东担任深圳市电子商务协会的副会长。深圳市电子商务协会是深圳市电子商务行业的专业组织,旨在促进深圳电子商务的发展和合作。中国电子商务协会常务理事:余承东是中国电子商务协会的常务理事。中国电子商务协会是中国电子商务行业的全国性组织,致力于推动电子商务的发展和规范。这些社会任职经历展示了余承东在信息通信技术和电子商务领域的参与和贡献。通过担任这些职位,他能够与行业内的专业人士和机构合作,推动相关领域的发展和合作。</p>
</body>
</html>
  • 效果展示
    在这里插入图片描述

综合案例二 - Harmony OS简介

在这里插入图片描述

代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HarmonyOS 简介</title>
</head>
<body><h1>Harmony OS</h1> <p>HarmonyOS 让分布式成为开发的“乐趣”统一OS,弹性部署一套操作系统,满足大大小小所有设备的需求,小到耳机,大到车机,智慧屏,手机等,让不同设备使用同一语言无缝沟通。</p><span><a href="https://www.huawei.com/cn/">华为</a> 公司打造的 全场景、分布式智能终端操作系统</span><h3>主要功能</h3><p>HarmonyOS 是华为公司推出的一款操作系统,旨在为各种设备提供统一的操作体验。它的主要功能包括:分布式架构:HarmonyOS 支持分布式架构,能够灵活运行在各种设备上,包括智能手机、平板电脑、智能手表、智能电视、汽车信息娱乐系统等。统一开发:开发者可以使用一套统一的开发工具和开发语言来开发应用程序,无需为不同设备专门开发不同版本的应用。多终端协同:支持多终端协同工作,用户可以在不同设备之间无缝切换应用,实现多设备之间的数据共享和同步。流畅体验:HarmonyOS 提供流畅的操作体验,支持快速启动应用程序和快速响应用户操作。安全性:注重用户数据安全和隐私保护,采用了多种安全技术来保护用户数据不受恶意攻击和侵扰。资源共享:支持设备之间的资源共享,例如共享网络连接、共享文件等。智能化服务:结合人工智能技术,为用户提供更智能、更个性化的服务,如语音助手、智能推荐等。高效能力:优化系统资源管理,提高系统运行效率,从而延长设备的续航时间和使用寿命。生态系统建设:积极建设 HarmonyOS 生态系统,吸引开发者和合作伙伴参与,共同推动 HarmonyOS 生态的发展。</p><!-- 添加视频 --><video src="../video/HarmonyOS.mp4" autoplay="true" controls loop="true" width="100%"></video>
</body>
</html>
效果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/304985.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十四讲:C语言字符函数和字符串函数

目录 1. 字符分类函数 2、字符转换函数 3. strlen的使⽤和模拟实现 4. strcpy 的使⽤和模拟实现 5. strcat 的使⽤和模拟实现 6. strcmp 的使⽤和模拟实现 7. strncpy 函数的使⽤ 8. strncat 函数的使⽤ 9. strncmp函数的使⽤ 10. strstr 的使⽤和模拟实现 11. strt…

Redis的持久化

目录 一、RDB&#xff08;Redis DataBase&#xff09; 二、AOF&#xff08;Append Only File&#xff09; Redis 是内存数据库&#xff0c;如果不将内存中的数据库状态保存到磁盘&#xff0c;那么一旦服务器进程退出&#xff0c;服务器中 的数据库状态也会消失。所以 Redis 提供…

从文字到思维:呆马GPT在人工智能领域的创新之旅

引言 生成式预训练变换器&#xff08;Generative Pre-trained Transformer&#xff0c;简称GPT&#xff09;领域是人工智能技术中的一大革新。自OpenAI推出第一代GPT以来&#xff0c;该技术经历了多代发展&#xff0c;不断提升模型的规模、复杂度和智能化程度。GPT模型通过在大…

【Linux】vim 编辑器

Linux 系统自带了 gedit 和 vi 编辑器&#xff0c;gedit 是图形化界面的操作&#xff0c;而 vi 由比较难用&#xff0c;所以建议安装 vim 编辑器&#xff0c;vim 是从 vi 发展出来的一个文本编辑器&#xff0c;相当于增强版的 vi &#xff0c;其代码补完、编译及错误跳转等功能…

从路由器syslog日志监控路由器流量

路由器是关键的网络基础设施组件&#xff0c;需要随时监控&#xff0c;定期监控路由器可以帮助管理员确保路由器通信正常。日常监控还可以清楚地显出通过网络的流量&#xff0c;通过分析路由器流量&#xff0c;安全管理员可及早识别可能发生的网络事件&#xff0c;从而避免停机…

负荆请罪将相和之后的廉颇蔺相如,下场如何?

“将相和”的故事相信许多人都听说过&#xff0c; 这个故事来自于司马迁的《史记》&#xff0c;并被许多版本的语文教科书所收录&#xff0c;而“完璧归赵”“负荆请罪”等成语也都是出自这个故事。但是这个故事并没有讲“将相和”之后的内容&#xff0c;实际上&#xff0c;蔺相…

C语言面试题之合法二叉搜索树

合法二叉搜索树 实例要求 实现一个函数&#xff0c;检查一棵二叉树是否为二叉搜索树&#xff1b; 示例 1: 输入:2/ \1 3 输出: true 示例 2: 输入:5/ \1 4/ \3 6 输出: false 解释: 输入为: [5,1,4,null,null,3,6]。根节点的值为 5 &#xff0c;但是其右子节点值为 4 …

VS2022使用属性表快速设置OpenCV工程属性

1.创建C控制台应用 2.配置工程 3.打开工程后,为工程添加属性表 打开属性管理器窗口,选择Debug|x64 然后右击选择添加新的项目属性表 并命名为opencv490_debug_x64 点击添加 Debug版本属性表添加成功 使用相同方法添加Release版本属性表 双击debug版本属性表并添加包含目录 添…

90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装)

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇:C站最全Python标准库总结 90天玩转Python--02--基础知识篇:初识Python与PyCharm 90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装) 90天玩转Python—04—基础知识篇:Pytho…

Github第一Star数的国产免费开源防火墙--雷池社区版初步体验

前言 近期准备搭建一个博客网站&#xff0c;用来存储工作室同学们的学习笔记。服务器准备直接放在公网上&#xff0c;方便大家随时随地的上传和浏览&#xff0c;为了防止网站被人日穿成为肉鸡&#xff0c;一些防御措施还是要部署的。 首先明确自己的需求&#xff1a; 零成本…

【Python】控制台进度条

在Python开发中&#xff0c;有时需要向用户展示一个任务的进度&#xff0c;以提供更好的交互体验。下面我将展示如何使用Python来创建一个简单的控制台进度条。 效果&#xff1a; 代码&#xff1a; import time import sys def print_progress_bar(completed, total, length…

Windows搭建Jellyfin影音服务结合内网穿透实现公网访问本地视频文件

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…

【Web】NSSRound#1-20 Basic 刷题记录(全)

目录 [NSSRound#1 Basic]basic_check [NSSRound#1 Basic]sql_by_sql [NSSCTF 2nd]php签到 [NSSCTF 2nd]MyBox [NSSCTF 2nd]MyBox(revenge) [NSSCTF 2nd]MyHurricane [NSSCTF 2nd]MyJs [NSSRound#3 Team]This1sMysql [NSSRound#3 Team]path_by_path [NSSRound#…

二叉树应用——最优二叉树(Huffman树)、贪心算法—— Huffman编码

1、外部带权外部路径长度、Huffman树 从图中可以看出&#xff0c;深度越浅的叶子结点权重越大&#xff0c;深度越深的叶子结点权重越小的话&#xff0c;得出的带权外部路径长度越小。 Huffman树就是使得外部带权路径最小的二叉树 2、如何构造Huffman树 &#xff08;1&#xf…

【Python-MP4文体提取】

Python-MP4文体提取 ■ pip 和 setuptools工具■ OpenCV和Tesseract■ Tesseract OCR V5.0安装教程&#xff08;Windows&#xff09;■ 1. 运行程序出现如下问题&#xff1a;我们需要安装Tesseract OCR■ 2. 下载Tesseract-OCR■ 3. 安装Tesseract-OCR■ 4. 添加到环境变量的系…

Golang中的上下文-context包的简介及使用

文章目录 简介context.Background()上下文取消函数上下文值传递建议Reference 简介 Go语言中的context包定义了一个名为Context的类型&#xff0c;它定义并传递截止日期、取消信号和其他请求范围的值&#xff0c;形成一个链式模型。如果我们查看官方文档&#xff0c;它是这样说…

Ollama利用嵌入模型实现RAG应用

Ollama支持embedding models嵌入模型&#xff0c;从而支持RAG&#xff08;retrieval augmented generation&#xff09;应用&#xff0c;结合文本提示词&#xff0c;检索到文档或相关数据。嵌入模型是通过训练生成向量嵌入&#xff0c;这是一长串数字数组&#xff0c;代表文本序…

练习 21 Web [GXYCTF2019]BabySQli

SQL联合查询&#xff0c;注意有源码看源码&#xff0c;Base64以及32的区别&#xff0c;MD5碰撞 打开后有登录框&#xff0c;先随意登录尝试 只有输入admin才是返回wrong pass&#xff01; 其他返回wrong user 所以用户名字段一定要输入admin 养成好习惯&#xff0c;先查看源码…

kali上python3切换python2环境

一、然后打开终端输入 python --version 二、 打开终端分别输入下面两条命令&#xff1a; update-alternatives --install /usr/bin/python python /usr/bin/python2 100 update-alternatives --install /usr/bin/python python /usr/bin/python3 150 三、 如果需要切换python版…

Windows系统C盘空间优化进阶:磁盘清理与Docker日志管理

Windows系统C盘空间优化进阶&#xff1a;磁盘清理与Docker日志管理 文章目录 Windows系统C盘空间优化进阶&#xff1a;磁盘清理与Docker日志管理磁盘清理工具 使用“运行”命令访问磁盘清理利用存储感知自动管理空间清理WinSxS文件夹结合手动清理策略 小结删除临时文件总结&…