【前端学习笔记】移动web-黑马程序员学习笔记

article/2025/10/10 11:37:54

移动web-黑马程序员学习笔记

    • 1 字体图标
    • 2 平面转换
      • 2.1 绝对定位元素居中：
      • 2.2 双开门效果
      • 2.3 旋转效果
      • 2.4* 转换原点
      • 2.5 多重转换效果
      • 2.6 缩放
    • 3* 渐变
    • 4 空间转换（3D转换）
      • 4.1 空间位移
      • 4.2 透视效果
      • 4.3 空间旋转
      • 4.4 立体呈现
      • 4.5 缩放
    • 5 动画
      • 5.1 精灵动画
      • 5.2 无缝动画：走马灯
    • 6 移动端特点
      • 7 百分比布局
    • 8 Flex
      • 8.1 Flex布局：
      • 8.2 侧轴
      • 8.3 伸缩比
      • 8.4 改变元素排列方向
      • 8.5 弹性盒子换行
    • 9 移动适配
      • rem
        • 9.1 添加媒体查询
        • 9.2 flexible.js
        • 9.3 Less语法
          • 1.注释
          • 2.计算
          • 3.嵌套
          • 4.变量
          • 5.导入
          • 6.导出
      • vw/vh（用法更简洁）
    • 10 响应式布局
      • 10.1 媒体查询
        • 1. 媒体特性常用写法：
        • 2. 书写顺序
        • 3. link属性
        • 4. 隐藏
      • 10.2 BootStrap
    • 一些设计过程中的常用知识点

1 字体图标

作用：使用字体图标技巧实现网页中简洁的图标效果
展示的是图标，本质上是字体，处理简单的颜色单一的图片。
每个网站的标题栏图标：网站网址+/favicon.ico
素材库： Iconfont：https://www.iconfont.cn/
使用字体图标 - 类名

  1. 引入字体图标样式表
    <link rel="stylesheet" href="./iconfont/iconfont.css">
  1. 调用图标对应的类名，必须调用2个类名
<body><i class="iconfont icon-favorites-fill"></i>
</body>

如果想要的图标没有，可以问设计师要svg格式的图，上传后再下载即可。

2 平面转换

作用：使用transform属性实现元素的位移、旋转、缩放等效果

.father:hover .son {transform: translate(100px, 50px);/* 百分比: 盒子自身尺寸的百分比 */transform: translate(100%, 50%);/* 只给出一个值表示x轴移动距离 */transform: translate(100px);transform: translateY(100px);
}

2.1 绝对定位元素居中：

步骤：

  1. 设置父级和子级宽高，设置子绝父相；
  2. 设置子级位置left:50%;top:50%;，子级左上角在父级中心点。
  3. 微调位置,使子级中心点在父级中心：transform: translate(-50%, -50%);
.father {position: relative;width: 500px;height: 300px;border: 1px solid #000;
}.son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 203px;height: 100px;background-color: pink;          
}

2.2 双开门效果

向左侧移动盒子自身宽度大小
向右侧移动盒子自身宽度大小

<head><style>* {margin: 0;padding: 0;}/*背景盒子设置，采用背景图*/      .box {width: 1366px;height: 600px;margin: 0 auto;background: url('./images/bg.jpg');/* 关键细节1：超出父级的隐藏 */overflow: hidden;}.box::before,.box::after {float: left;content: '';width: 50%;height: 600px;background-image: url(./images/fm.jpg);/*关键细节2：设置转换时间*/transition: all .5s;}.box::after {/*关键细节3：要背景的右半部分*/background-position: right 0;}/* 鼠标移入的时候的位置改变的效果 */.box:hover::before {transform: translate(-100%);}.box:hover::after {transform: translateX(100%);}</style>
</head>
<body><div class="box"></div>
</body>

2.3 旋转效果

必须有过渡属性，旋转才能生效

img {width: 250px;/* 旋转效果必须设置过渡 */transition: all 2s;
} 
img:hover {/* transform: rotate(角度); *//* 顺 */transform: rotate(360deg);/* 逆 */transform: rotate(-360deg);
}

2.4* 转换原点

作用：使用transform-origin属性改变转换原点

默认旋转圆点是盒子中心点，旋转后会改变坐标轴向，修改效果设置在标签上，hover时设置旋转效果

transform-origin: 原点水平位置 原点垂直位置;

/*transform-origin: left、top、right bottom center;*/
transform-origin: left bottom;

2.5 多重转换效果

边走边转，顺序不能反

transform: translate(600px) rotate(360deg);

2.6 缩放

使用scale改变元素尺寸
使用时要注意transform设置定位和缩放会存在层叠特性，导致部分设置不生效

/*transform: scale(x轴缩放倍数, y轴缩放倍数);*/
/*transform: scale(缩放倍数)*/
/* scale值大于1表示放大, scale值小于1表示缩小*/
transform: scale(1.2);

3* 渐变

设置背景透明度渐变的步骤：
1.用伪元素书写盒子控制位置，设置渐变效果并设置过渡属性和opacity:0;
2.用hover显示，设置opacity:1

/*background-image: linear-gradient(color1,color2,color3);*/
background-image: linear-gradient(pink,green,blue);
/*常用为透明度变化*/
background-image: linear-gradient(transparent,rgba(0,0,0, .6));

设置图片大小渐变的步骤：
1.给图片设置过渡属性transition:all 0.5s，给hover设置放大属性transform:scale(1.2)
2.给父元素设置overflow:hidden,使图片超出的部分隐藏

设置文字移动渐变步骤:
hover设置txt的位置移动transform:translate()

4 空间转换（3D转换）

作用：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
Z轴的变化需要设置透视效果才能看到

4.1 空间位移

加在hover上

.box:hover {/* transform: translate3d(50px, 100px, 200px); */transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);
}

4.2 透视效果

作用：产生近大远小，近清晰，远模糊的效果
标签加在父级上，取值为800-1200之间的数值
数值给的小代表距离屏幕近，给的大代表距离屏幕非常远

body {perspective: 1000px;/* perspective: 200px; *//* perspective: 10000px; */}

4.3 空间旋转

都加在hover上
绕中心旋转，可以用以下命令：
transform:rotateZ(值)或者transform: rotate(360deg);
绕x轴旋转：
transform: rotateX(60deg); transform: rotateY(60deg);
左手法则：判断旋转方向，左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

4.4 立体呈现

构建立体图形，给盒子设置该属性

transform-style: preserve-3d;

4.5 缩放

空间缩放

transform: scale3d(0.5,1.1,2);

5 动画

  1. 声明动画
/*animation: 动画名称 动画时间*/
animation: change 1s;
  1. 定义动画
/*变化两步*/
@keyframes change {from {width: 200px;}to {width: 600px;}
}
/*多个动画过程*/
/* 百分比指的是动画总时长的占比 */
@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}
}

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

  1. 动画名称和动画时长必须赋值
  2. 取值不分先后顺序
  3. 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

速度曲线：steps(3)分三阶段执行
重复次数：infinite(无限循环)/3

动画方向：alternate为反向
执行完毕时的状态：forwards最后一帧状态/backwards第一帧状态

animation-name: 动画名称;
animation-duration: 动画时间;
animation-delay: 延迟时间;
animation-fill-mode: 动画执行完毕时状态;
animation-timing-function: 速度曲线;
animation-iteration-count: 重复次数;
animation-direction: 动画执行方向;
animation-play-state: 暂停动画;

5.1 精灵动画

使用steps实现逐帧动画，制作步骤

  1. 准备显示区域，设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
.box {/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);
}
  1. 定义动画
    改变背景图的位置，移动的距离就是精灵图的宽度
    @keyframes move {from {background-position: 0 0;}to {/* 1680: 精灵图的宽度 */background-position:  -1680px 0;}}
  1. 使用动画
    添加速度曲线steps(N),N与精灵图上小图个数相同，添加无限重复效果
.box {animation: move 1s steps(12) infinite;
}
  1. 想让小人跑远一些，在精灵动画的同时添加盒子位移动画
    forwards：停留在最终状态
.box {animation: run 1s forwards;
}
@keyframes run {/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}
}

5.2 无缝动画：走马灯

  1. 所有动画放在一行，显示区域可以放几张图，最后就多加上几张图,ul宽度设置所有的图宽度
  2. 定义动画@keyframes move，给ul设置动画animation:move 5s infinite linear

6 移动端特点

pc端和移动端网页区别：pc端有版心，版心居中
移动端：网页充满屏幕
分辨率：
物理分辨率出厂就被固定，不可被改变。
逻辑分辨率：软件决定的，可以改变，写代码参考的分辨率

视口：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

  • 手机屏幕尺寸都不同，网页宽度为100%
  • 网页的宽度和逻辑分辨率尺寸相同
  • 默认情况下，网页宽度和逻辑分辨率不同，默认网页宽度为980px，移动端都是375px
<meta name="viewport" content="width=device-width, initial-scale=1.0">

二倍图：一般给的都是二倍图，将设计图改为2x，再测量进行开发

7 百分比布局

百分比布局也叫流式布局，实现效果为宽度自适应，高度固定

       .toolbar {/* 百分比布局  流式布局 */width: 100%;height: 50px;}.toolbar li img {height: 100%;}.toolbar li {float: left;width: 20%;height: 50px;}

8 Flex

子级浮动脱标，父级必须设置宽度，采用flex可以不设置浮动，也不会脱标
给父级设置display: flex;

.box {display: flex;/* height: 200px; */border: 1px solid #000;
}

Flex布局是一种浏览器提倡的布局模型，可以避免浮动脱标的问题，布局网页更简单灵活，非常适合结构化布局。
但是Flex布局仅适用于高 版本浏览器，可以查询caniuse.com搜索兼容性

8.1 Flex布局：

  • 弹性容器
  • 弹性盒子
  • 主轴：默认主轴在水平，弹性盒子都是沿着主轴排列
/* 居中 */
justify-content: center;

在这里插入图片描述

/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;

在这里插入图片描述

/* 所有地方的间距都相等 */
justify-content: space-evenly;

在这里插入图片描述

/* 间距加在子级的两侧 */
/* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;

在这里插入图片描述

8.2 侧轴

使用align-items调节元素在侧轴的对齐方式，添加到弹性容器上。
当盒子没给高，按内容大小撑开高度，
给了宽高，则对应给定的宽高

/* 居中 */
align-items: center;
/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度，高度为父级的100%) */
align-items: stretch;
/* 单独设置某个弹性盒子的侧轴对齐方式 */
.box div:nth-child(2) {align-self: center;
}

8.3 伸缩比

单独设置在某一个子盒子上，去掉剩下和盒子宽度剩下的宽度独占份数

flex:1;

8.4 改变元素排列方向

主轴默认是水平方向, 侧轴默认是垂直方向

/*修改主轴方向*/
flex-direction：column;
/*视觉效果：实现盒子水平居中*/
align-items:center;

8.5 弹性盒子换行

当一行显示不完时，flex可以自动将子级压缩成一行
实现换行：flex-wrap:wrap

/* 和主轴对齐方式一样 */
align-content: center;
align-content: space-around;
align-content: space-between;

9 移动适配

  • rem：目前多数企业在用的解决方案
  • vw/vh：未来的解决方案
    目标：使用rem单位设置i网页元素的尺寸，屏幕尺寸不同，最终呈现出来的大小也不同
    1rem = 1HTML字号大小

rem

9.1 添加媒体查询

1. 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
可以检测视口的宽度，编写差异化的css样式，当某个条件成立, 执行对应的CSS样式。

<style>/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */@media (width:375px) {html {font-size: 40px;}}@media (width:320px) {html {font-size: 30px;}}
</style>

2. 设备宽度不同，HTML标签字号设置多少合适？
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

3. 如何确定rem数值？

  1. 根据视口宽度，设置不同的HTML标签字号
    查看设计稿宽度–确定参考设备宽度（视口宽度）–确定基准根字号（1/10视口宽度)
  2. rem单位的尺寸
    rem单位尺寸=px单位尺寸/基准根字号（取小数点后三位）

9.2 flexible.js

使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
优点：rem需要多个视口，移动端尺寸较多，每一个都需要设置太麻烦

写在body最下边。

<body><script src="../js/flexible.js"></script>
</body>

9.3 Less语法

使用less运算完成px到rem单位的转换
less是一个CSS预处理器，后缀为.less，网页引入对应的css文件。

1.注释

单行注释：//
块注释：/**/

2.计算

.less

.box {width: 100 + 10px;width: 100 - 20px;width: 100 * 2px;// 除法，两种表示方法// 68  > remwidth: (68 / 37.5rem);//推荐用法height: 29 ./ 37.5rem;
}

对应的.css:

.box {width: 110px;width: 80px;width: 200px;width: 1.81333333rem;height: 0.77333333rem;
}
3.嵌套

.less

.father {width: 100px;.son {color: pink;// & 表示当前选择器&:hover {color: green;}}&:hover {color: orange;}
}

对应的.css:

.father {width: 100px;
}
.father .son {color: pink;
}
.father .son:hover {color: green;
}
.father:hover {color: orange;
}
4.变量

能够使用Less变量设置属性值。

.less

//1.定义变量
@colora:pink;
.box {color:@colora;
}
.aa {background-color:@colora;
}

对应的.css:

.box {color: pink;
}
.aa {color: pink;
}
5.导入

.less内容：

@import 'less路径';
6.导出

less导出CSS文件

**方法1：**配置EasyLess插件， 实现所有Less有相同的导出路径
在less.compile当中添加导出路径：

"out": "../css/";

**方法2：**控制当前Less文件导出路径

/*导出到qqq文件夹，改名字为daqiu.css*/
// out: ./qqq/daqiu.css
/*导出到abc文件夹，不改名字*/
// out: ./abc/

不想导出：

// out: false

vw/vh（用法更简洁）

  • vw=1/100视口宽度
  • vh=1/100视口高度
    不允许两者混用，只能用单次。

10 响应式布局

10.1 媒体查询

目标：能够根据设备宽度的变化，设置差异化样式

1. 媒体特性常用写法：

/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width: 768px) {body {background-color: pink;}
}
/* 视口宽度大于等于1200px， 网页背景色是skyblue */
@media (min-width: 1200px) {body {background-color: skyblue;}
}

2. 书写顺序

能够根据设备宽度的变化，设置差异化样式

  • min-width（从小到大）
  • max-width（从大到小）
/*视口宽度 >= 768px，网页背景色是 粉色视口宽度 >= 992px，网页背景色是 绿色视口宽度 >= 1200px，网页背景色是 skyblue
*/       
@media (min-width: 768px) {body {background-color: pink;}
}
@media (min-width: 992px) {body {background-color: green;}
}
@media (min-width: 1200px) {body {background-color: skyblue;}
}

3. link属性

外链式css属性：media里一定要加小括号

<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
<!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

4. 隐藏

当视口宽度发生变化时，显示的内容发生改变，部分内容隐藏

<head><style>/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */@media (max-width: 768px) {.left {display: none;}}</style>
</head>
<body><div class="box"><div class="left">bbbbbb</div><div class="main">aaaaa</div></div>
</body>

10.2 BootStrap

UI框架：将常见效果进行统一封装后形成的一套代码, 例如：BootStrap，使用 BootStrap框架快速开发响应式网页。
BootStrap3默认将网页分成12等份

栅格系统布局：
在这里插入图片描述
在BootStrap.com里找到合适的样式，支持定制，下载导入，再将对应的盒子添加对应效果的类即可。

一些设计过程中的常用知识点

  1. 行内标签（a，span，i，伪元素）设置宽高不生效，需要调整显示类型或者加定位，定位可以让盒子具备行内块属性，宽高生效；调整显示类型为块级（单独占一行）或者行内（标签在一行排列，但是换行使会存在一个小间距，比较麻烦），可以采用flex定位，加宽高可以生效。
  2. 想让某元素隐藏，设置：opacity: 0;或者display:none;
  3. background-size:cover：设置背景的时候，图片等比例缩放，图片可以完全覆盖整个盒子，可能会导致图片显示不全；
    background-size:contain：设置背景，图片等比例缩放，当宽度或者高度和盒子尺寸相等，图片就不再缩放。
  4. 需要替换的数据必须单独放一个标签（例如移动布局中产品信息，价格等信息）；可以点击跳转的标签，都先给一个a标签再嵌套；图上压的字通常需要用子绝父相来定位（给图像设置相对定位，文字设置绝对定位）；一般字体图标用i标签加类名显示，字体图标旁边的字用span，整体用p标签包裹，
<p><span>文字</span><i class="iconfont 类名"></i>
</p>
  1. 单个文字或盒子以及图片设置居中效果： 垂直居中：line-height: 行高; 水平居中：text-align:center
  2. 做选项卡的时候，tab: 菜单的个数要和内容的个数相等的
  3. header加固定定位会脱标，要在下边显示内容，可以设置一个padding
  4. 弹性盒子换行：flex-wrap: wrap;
  5. 企业网页版或者网页较少可以修改为响应式布局，其余一律改不了。
  6. 单行文字溢出时显示省略号：给文字设置
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;

再给文字父级设置：

flex：1；
width：0；

给弹性盒子宽度设置为0.则多出的文字就不会撑开盒子。


http://chatgpt.dhexx.cn/article/nbVxxmeT.shtml

相关文章

移动Web UI组件库汇总

移动Web UI组件库汇总

1、 Ant Design Mobile 介绍&#xff1a;一个基于 Preact / React / React Native 的 UI 组件库 组件库地址&#xff1a;https://mobile.ant.design/index-cn 组件库来源&#xff1a;蚂蚁金服体验技术部 2、SUI Mobile 介绍&#xff1a;SUI Mobile 是一套基于 Framework7 开发的…
阅读更多...
移动web网页开发——动画

移动web网页开发——动画

一、动画 1.1 动画 使用animation添加动画效果 思考&#xff1a;过渡可以实现什么效果&#xff1f; 答&#xff1a;实现2个状态间的变化过程 动画效果&#xff1a;实现多个状态间的变化过程&#xff0c;动画过程可控&#xff08;重复播放、最终画面、是否暂停&#xff09…
阅读更多...
移动web学习总结

移动web学习总结

最近学习了些移动web开发的基础知识&#xff0c;稍微做下记录总结&#xff1a; Hello,移动web&#xff1a; https://www.imooc.com/learn/494 一、基础知识 1. 关于Pixel px : CSS px&#xff0c;逻辑像素&#xff0c;浏览器使用的抽象单位dp&#xff0c;pt&#xff1a; dev…
阅读更多...
02-移动WEB

02-移动WEB

网站 favicon 图标 制作 favicon 图标 把图标切成 png 图片 把 png 图片转换为 ico 图标 , 借助第三方平台转换网站 如 https://www.bitbug.net/ favicon 图标放到网站根目录下 HTML 页面引入 favicon 图标 . <link rel"shortcut icon" href"/favicon.ic…
阅读更多...
移动web(看这一篇就够了)

移动web(看这一篇就够了)

文章目录 移动web第一天&#x1f525;今日学习目标字体图标1、字体图标的使用2、购物车案例3、上传SVG矢量图 平面转换1、平面转换概念2、平面转换之位移3、平面转换之旋转4、平面转换之缩放 渐变 移动web第二天&#x1f525;今日学习目标2、透视效果3、空间转换之旋转4、立体呈…
阅读更多...
移动web简介

移动web简介

什么是移动web 移动web就是在手机浏览器里面访问的web页面&#xff0c;除了一般的手机浏览器之外&#xff0c;好友一些程序内置的浏览器访问的页面也称之为移动web&#xff0c;例如微信公众号、小程序中的webview访问的页面等。 移动web与PCweb的区别 页面大小不一样。手机页…
阅读更多...
什么是web移动端-移动端布局特点

什么是web移动端-移动端布局特点

文章目录 前言一、web移动端是什么&#xff1f;二、如何调试移动web网页1.真机调试&#xff1a;2.chrome浏览器调试&#xff1a;3.移动Web的发展历史 三.移动Web布局核心思想1.不允许网页出现横向滚动2.页面盛满屏幕&#xff0c;盒子宽度与屏幕一致 100%3.让盒子的内容宽高widt…
阅读更多...
几种java结构图

几种java结构图

集合类 IO流 线程池的加载 类与对象的关系 JVM springboot注解
阅读更多...
java学习各种实用结构图

java学习各种实用结构图

spring boot路线图 线程池 网络结构模型
阅读更多...
Java基础知识结构图

Java基础知识结构图

目前还没有总结完&#xff0c;之后会慢慢进行补充&#xff01;
阅读更多...
VGG16详细实现（笨办法）

VGG16详细实现（笨办法）

一、 VGG16简介 VGG16网络是通过卷积和全连接的方式提取图片特征&#xff0c;进行识别一种网络结构。曾在某年取得分类第二&#xff0c;定位任务第一的佳绩。其结构包含&#xff1a; 13个卷积层 3个全连接层&#xff0c;所以被称为VGG16,如下图绿色的部分即是网络的结构组成&…
阅读更多...
（Java实现）图片合成GIF动图（“复古”Swing界面）

（Java实现）图片合成GIF动图（“复古”Swing界面）

1、项目简介 项目名称&#xff1a;pic2gif项目实现&#xff1a;将选定的几张图片(支持jpg&#xff0c;png&#xff0c;bmp&#xff0c;gif等) 合成为一张gif图关键字&#xff1a;图片处理&#xff0c;Java&#xff0c;Swing 2、项目结构 图片处理部分Swing界面部分 (u1s1, S…
阅读更多...
图解 JVM 内存结构

图解 JVM 内存结构

文章目录 JVM 内存结构JVM包含哪几部分&#xff1f;在内存中 java 代码的执行的流程Java内存分布&#xff1a;各组件详细说明1. 程序计数器2. Java虚拟机栈3. 本地方法栈4. Java堆5. 方法区6. 运行时常量池7. 直接内存 总结问题那些区域会发生内存溢出&#xff1f;类存放在哪里…
阅读更多...
JVM8基础结构图理解

JVM8基础结构图理解

目录 1 理解DOS里面的java命令 2 JVM内存 2.1 JVM主要组成部分 2.2 JVM内存(运行时数据区域) 2.2.1 虚拟机内存与本地内存区别 2.2.2 JVM内存(运行时数据区域)中的JVM内存 2.2.3 程序计数器(Program Counter Register) 2.2.4 虚拟机栈(JVM Stacks) 2.2.5 本地方法栈(N…
阅读更多...
java绘制（可视化）树结构图

java绘制（可视化）树结构图

以JPanel组件为画板&#xff0c;继承JPanel类并重写paint(Graphics g)函数&#xff0c;在函数中使用画笔g绘制树结构图。 实例代码——3个java源文件&#xff1a;Main.java、DrawNode.java、DrawTree.java 1、Main.java package drawTree;public class Main {public static …
阅读更多...
Java的理论知识以及结构图

Java的理论知识以及结构图

Java基础 1、 简述Java的基本历史 java起源于SUN公司的一个GREEN的项目&#xff0c;其原先目的是&#xff1a;为家用消费电子产品发送一个信息的分布式代码系统&#xff0c;通过发送信息控制电视机、冰箱等 2、 简单写出Java特点&#xff0c;写出5个以上&#xff0c;越多越好…
阅读更多...
Swagger使用教程及Swagger增强工具knife4j

Swagger使用教程及Swagger增强工具knife4j

标题 课外知识须知什么是swagger什么是RESTful 面向资源URI和URL区别&#xff1a; 博址推荐SpringBoot集成SwaggerSwagger常用注解Swagger增强工具knife4j 重点掌握&#xff1a;编写swagger的配置文件&#xff0c;理解每个配置的作用 课外知识须知 Swagger官网&#xff1a; …
阅读更多...
JVM快速入门（类加载，对象创建，运行数据区，GC垃圾回收算法，jvm调优）

JVM快速入门（类加载，对象创建，运行数据区，GC垃圾回收算法，jvm调优）

JVM快速入门 JVM定义&#xff1a;常见的几种jvmJDK&#xff0c;JRE&#xff0c;JVM区别 类加载过程类加载器作用加载器分类双亲委派机制好处 全盘委托机制 对象的创建流程类加载校验分配内存设置初值设置对象头对象头中的Mark Word 字段&#xff08;32位&#xff09;对象头中的…
阅读更多...
一起学JVM（GC可视化工具Visual GC）

一起学JVM（GC可视化工具Visual GC）

导读 众所周知&#xff0c;JVM&#xff08;java虚拟机&#xff09;运行着我们的java程序。java本身提供了自带工具VisualVM来帮助我们查看JVM的运行情况&#xff0c;下面主要介绍GC的可视化插件&#xff0d;Visual GC java版本 1.8.0_281 工具 VisualVM　的　Visual GC　插…
阅读更多...
JVM G1详解

JVM G1详解

java程序性能 当我们调优java程序时&#xff0c;通常的目标有两个&#xff1a; 响应能力 或者 吞吐量 响应能力 响应能力指一个程序或者系统对请求的是否能够及时响应。 比如&#xff1a; 一个桌面UI能多快的响应一个事件&#xff1b; 一个网站能够多快返回一个页面请求&…
阅读更多...
推荐文章

Copyright @ 2022~2023