CSS基础知识 ----- 学习

news2025/1/19 23:03:53
介绍

CSS(Cascading Style Sheets)是一种用于定义网页样式和布局的样式表语言。

它与 HTML 一起用于构建 Web 页面,HTML 负责定义页面的结构和内容,而 CSS 则负责控制页面的外观和样式(各种元素的字体,颜色,大小,间距,边距)。

语法

CSS(Cascading Style Sheets)的语法用于定义网页的样式和外观。CSS 规则通常由选择器、属性和属性值组成,多个规则可以组合在一起,以便同时应用多个样式,以下是 CSS 的基本语法:

选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
}
  1. 声明的每一行属性,都需要以英文分号结尾;

  2. 声明中的所有属性和值都是以键值对这种形式出现的;

  3. 选择器的声明中可以写无数条属性

CSS 的语法就是选择一个元素,为它指定属性,然后为这些属性指定值。你可以使用不同的选择器来定位不同的元素,然后定义它们的样式以实现所需的外观。 CSS 样式表通常包含多个规则,这些规则会按照特定的优先级和级联规则(Cascading)应用到页面上,以确保一致的外观。

导入方式

在 CSS 中,你可以使用不同的方式来导入样式表,以便将样式应用到 HTML 文档。下面是三种常见的 CSS 导入方式:

  1. 内联样式(Inline Styles):内联样式是将 CSS 样式直接嵌入到 HTML 元素中的一种方式。你可以在 HTML 标签的 style 属性中定义样式规则。这些样式仅适用于特定元素,优先级较高。

<h1 style="color: blue; font-size: 30px;">这是一段内联样式文本。</h1>
  1. 内部样式表(Internal Stylesheet):内部样式表是将 CSS 样式放置在 HTML 文档的 <head> 部分的 <style> 标签内。这些样式将应用于整个文档,但仍具有较高的优先级。

<head>
    <style>
        h2 {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
<h2>这是一段内部样式表控制文本。</h2>
</body>
  1. 外部样式表(External Stylesheet):外部样式表是将 CSS 样式定义在一个单独的 .css 文件中,并使用 <link> 元素将其链接到 HTML 文档中。这是一种最常用的方式,允许你在多个页面上重用相同的样式。外部样式表具有较低的优先级。

在该 HTML 文件目录下创建名为 css 的目录,并创建 style.css 的外部样式表文件,在其中加入以下代码:

p {
    color: purple;
    font-size: 16px;
}

在 HTML 文档中链接外部样式表:

<head>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<p>这是一段外部样式表控制文本。</p>
</body>

使用外部样式表的优势在于它可以帮助你更好地维护和管理样式,使样式与内容分离,提高代码的可维护性。根据需要,你可以选择其中一种或多种导入方式,具体取决于项目的要求和结构。

优先级:内联样式>内部样式表>外联样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 导入方式 学习</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        p{
            color: blue;
            font-size: 26px;
        }
        h2{
            color:green;
        }
    </style>
</head>
<body>
    <p>这是一个应用了CSS样式的文本</p>
    <h1 style="color:red">这是一个一级标题标签,使用内联样式</h1>
    <h2>这是一个二级标题,应用内部样式</h2>
    <h3>这是一个三级标题,应用外部样式</h3>
</body>
</html>

选择器

选择器用于选择要应用样式的 HTML 元素。

可以选择所有的元素、特定元素、特定类或 ID 的元素,甚至更多。

选择器位于规则的开头。

  • 元素选择器:选择特定类型的 HTML 元素(例如,p 选择所有段落)。

  • 类选择器:选择具有特定类的元素(例如,.highlight 选择具有 highlight 类的元素)。

  • ID 选择器:选择具有特定 ID 的元素(例如,#header 选择 ID 为 header 的元素)。

  • 通用选择器:选择页面上所有的元素。

  • 子元素选择器:选择直接位于父元素内部的子元素。语法:父元素 > 子元素,例如,ul > li 选择了 <ul> 元素内直接包含的 <li> 元素。

  • 后代选择器(包含选择器):选择元素的后代元素。语法:元素名 元素名,例如,ul li 选择了所有在 <ul> 元素内部的 <li> 元素。

  • 相邻兄弟选择器:选择紧邻在另一个元素后面的兄弟元素。元素名 + 元素名,例如,h2 + p 选择了与 <h2> 相邻的 <p> 元素。

  • 伪类选择器:选择 HTML 文档中的元素的特定状态或位置,而不仅仅是元素自身的属性。伪类选择器以冒号(:)开头,通常用于为用户交互、文档结构或其他条件下的元素应用样式。这些条件可以包括鼠标悬停(:hover )、链接状态(:active)、第一个子元素(:first-child)等。

选择器使用样例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器 学习</title>
    <style>
        /* 元素选择器 */
        h2 {
            color:aqua;
        }
​
        /* 类选择器 */
        .highlight {
            background: yellow;
        }
​
        /* id选择器 */
        #header {
            font-size: 35px;
        }
​
        /* 通用选择器 */
        * {
            font-family: 'KaiTi';
            font-weight: bolder;
        }
​
        /* 子元素选择器 */
        .father > .son {
            color: yellowgreen;
        }
​
        /* 后代选择器 */
        .father p{
            color: brown;
            font-size: larger;
        }
​
        /* 相邻元素选择器 */
        h3 + p {
            background-color: red;
        }
​
        /* 伪类选择器 */
        #element:hover {
            background-color: blueviolet;
        }
        /* 
        选中第一个子元素:first-child
                       :nth-child()
                       :active
        */
​
        /* 
            伪元素选择器
            ::after
            ::before
        */
    </style>
</head>
<body>
    <h1>不同类型的 CSS 选择器 </h1>
​
    <h2>这是一个元素选择器示例</h2>
    <h3 class="highlight">这是一个类选择器示例</h3>
    <h3>这是另一个类选择器示例</h3>
    
    <h4 id="header">这是一个id选择器示例</h4>
​
    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>
    </div>
​
    <p>这是一个普通的p标签</p>
    <h3>这是一个相邻兄弟选择器</h3>
    <p>这是另一个p标签</p>
​
    <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

属性

CSS 的属性有上百个,但是这不意味着,我们每个都要学习,更多的属性可以参考 (CSS 参考手册 | 菜鸟教程)

属性名说明
font-family用于设置文本的字体.示例: font-family:Arial,sans-serif;
font-size用于设置文本的字号大小.示例:font-size:16px;
color用于设置文本的颜色.示例:color:#333;
font-weight用于设置文本的粗细,可以是normal \ bold 等.示例:font-weight:bold;
line-height用于设置文本的行高.示例:line-height:bold;
text-align用于设置文本的对齐方式,可以是left \ righr \ center等.示例:text-align:center;
text-decoration用于添加文本装饰效果,如下划线 \ 删除线/示例:text-decoration:underline;
background-color设置或检索对象的背景对象
height设置元素的高度
width设置元素的宽度
块 \ 行内 \ 行内块元素

块元素(block):

  • 快原色通常会从新行开始,并占据整行的宽度

  • 可以包含其他块级元素和行内元素

行内元素(inline):

  • 行内元色通常在同一行内呈现,不会独占一行

  • 他们只占据其内容所需的宽度,而不是整行的宽度

  • 行内元素不嫩那个包含块级元素,但可以包含其他行内元素

行内块元素(Inline-block):

  • 水平方向上排列,但可以设置宽度 \ 高度,内外边距等块级元素的属性

  • 行内块元素可以包含其他行内元素或块级元素

复合属性的使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 常用属性 学习</title>
​
    <style>
        .block {
            background-color: aqua;
            width: 150px;
            height: 100px;
        }
​
        .line {
            background-color: brown;
        }
​
        .inline-block {
            width: 100px;
            height: 150px;
        }
​
        .div-inline {
            display: inline;
            background-color: aquamarine;
        }
​
        .span-inline-block {
            display: inline-block;
            background-color: blueviolet;
            width: 300px;
        }
​
​
    </style>
</head>
<body>
    <h1 style="font: bolder 50px 'KaiTi';">这是一个font复合属性示例</h1>
    <p style="line-height: 40px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
 
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span><br><br>
    <img src="./logo.png" alt="" class="inline-block">
    <h2>display</h2>
    <div class="div-inline">这是一个转换成行内元素的div标签</div>
    <span class="span-inline-block">这是一个转换成行内块元素的span标签</span>
</body>
</html>

盒子模型

盒子模型是 CSS 中一种用于布局的基本概念,它描述了文档中的每个元素都被看作是一个矩形的盒子,这个盒子包含了内容、内边距、边框和外边距。

属性名说明
内容(content)盒子包含的实际内同,比如文本 \ 图片等
内边距(padding)围绕在内容的内部,是内容与边框之间的空间.可以使用padding属性来设置
边框(border)围绕在内边距的外部,是盒子的边界.可以是用border属性来设置
外边距(margin)围绕在边框的外部,是盒子与其他元素之间的空间.可以使用margin属性来设置

理解盒子模型是构建网页布局的基础,它允许你更精确地控制元素在页面中的位置和大小。

边框的样式:

solid : 实线

dashed : 虚线

dotted : 点线

double : 双实线

盒子示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 盒子模型 练习</title>
    <style>
        .demo {
            background-color: aqua;
            display: inline-block;
            border: 5px solid yellowgreen;
            padding: 50px;
            margin: 40px;
        }
​
        .border-demo {
            background-color: yellow;
            width: 300px;
            height: 200px;
            border-style: solid;
            border-width: 10px;
            border-color: blueviolet;
        }
    </style>
</head>
​
<body>
    <div class="demo">B站搜索</div>
    <div class="border-demo">这是一个边框示例</div>
</body>
</html>

浮动

网页布局的本质其实就是通过块元素来放置盒子,把盒子放在相应的位置。

传统的网页布局方式有以下五种 :

  • 标准流(普通流 \ 文档流) : 网页按照元素的书写顺序一次排列

  • 浮动

  • 定位

  • Flexbox 和 Grid (自适应布局)

标准流是由块级元素和行内元素按照默认规定的方式来排列,块级就是占一行,行内元素一行放好多个元素

浮动:元素脱离文档流,根据开发者的意愿漂浮到网页的任何位置

浮动属性用于创建浮动框,将其移动到一边,知道左边缘或右边缘初级包含块或另一个浮动框的边缘,这样即可使得元素进行浮动

语法 :

选择器 {
    float: left/right/none;
}

浮动是相对父元素浮动,只会在父元素的内部移动

浮动的三大特性:
  • 脱标 : 顾名思义就是脱离标准流,当元素设置了浮动后,该元素将会脱离标准流(普通流)的控制,移动到指定位置,浮动的盒子不再保留原来所占有的位置,就像漂浮在空中一样,脱离了原来的地面.

  • 一行显示,顶部对齐 : 如果多个盒子都设置了浮动,则他们会按照属性值,一行内显示并且顶端对齐排列.

  • 具备行内块元素特性 : 不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性

Attention :

  • 浮动的元素是相互贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐

  • 而如果使用元素模式转换,让块级元素转换成行内块元素,彼此之间是由空隙的.

清除浮动

由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置 ,最后父级盒子高度为 0 时,就会影响下面的标准流盒子,从而对整个网页元素的排版产生不良影响。

常见的清除浮动的方法包括以下几种:

  1. 空的块级元素 + clear 属性: 这是最经典的清除浮动方法之一,通过在浮动元素后添加一个空的块级元素,并设置其 clear 属性,使其不允许浮动元素在其左侧或右侧浮动。

  2. 伪元素清除浮动: 类似于上述方法,但使用伪元素来创建清除浮动的元素,而不需要在 HTML 中添加额外的空元素。

  3. 使用 overflow 属性: 将包含浮动元素的容器设置为 overflow: hidden;,可以触发 BFC(块级格式上下文),从而清除浮动。

浮动的使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 浮动 练习</title>
    <style>
        .father {
            background-color: aquamarine;
            height: 150px;
            border: 3px solid brown;
            /*清除浮动方法一: overflow: hidden; */
        }
​
        /* 清除浮动方法二:
        .father::after {
            content:"";
            display: table;
            clear: both;
        } */
​
        .left-son {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
​
        .right-son {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
</body>
</html>
定位

CSS 定位是一种用于控制元素在网页上的位置的布局技术。通过定位,可以将元素放置在页面的特定位置,而不受文档流的约束。CSS 提供了几种定位属性,包括相对定位、绝对定位和固定定位。

定位布局可以精准定位,但缺乏灵活性

定位方式 :

  • 相对定位 : 相对于元素在文档流中的正常位置进行定位.通过使用 position: relative; 属性,可以在不脱离文档流的情况下调整元素的位置。

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}
  • 绝对定位 : 相对于其最近的一定为祖先元素进行定位,不占据文档流.通过使用 position: absolute; 属性,可以自由地调整元素的位置。

.absolute-box {
    position: absolute;
    top: 50px;
    left: 100px;
}
  • 固定定位 : 相对于浏览器窗口进行定位.不占据文档流,固定在屏幕上的位置,不随滚动而移动;通过使用 position: fixed; 属性,可以创建固定定位的元素。

.fixed-box {
    position: fixed;
    top: 10px;
    right: 10px;
}

定位使用示例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 定位 练习</title>
    <style>
        .box1 {
            height: 350px;
            background-color: aqua;
        }
​
        .box-normal {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
​
        .box-relative {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            /* left: ;
            right: ;
            top: ;
            bottom: ; */
            left: 120px;
            top: 40px; 
        }
​
        .box2 {
            height: 350px;
            background-color: yellow;
            /* margin-bottom: 400px; */
        }
​
        .box-absolute {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            left: 120px;
        }
​
        .box-fixed {
            width: 100px;
            height: 100px;background-color: brown;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
    <h1>绝对定位</h1>
    <div class="box2">
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    </div>
    <h1>固定定位</h1>
    <div class="box3">
        <div class="box-normal"></div>
        <div class="box-fixed"></div>
        <div class="box-normal"></div>
    </div>
</body>
</html>

通常,相对定位用于微调元素的位置,而绝对、固定定位用于创建更复杂的布局。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机网络 (50)两类密码体制

前言 计算机网络中的两类密码体制主要包括对称密钥密码体制&#xff08;也称为私钥密码体制、对称密码体制&#xff09;和公钥密码体制&#xff08;也称为非对称密码体制、公开密钥加密技术&#xff09;。 一、对称密钥密码体制 定义&#xff1a; 对称密钥密码体制是一种传…

Asp.Net Core 8.0 使用 Serilog 按日志级别写入日志文件的两种方式

1、所需的Nuget包 本文项目的版本是.NET 8.0&#xff0c;如果使用其它版本安装适配版本即可。 Serilog.AspNetCore(8.0.2) Serilog.Sinks.File(5.0.0) Serilog.Expressions(5.0.0) 2、两种配置方式 2.1 代码形式&#xff08;Program.cs&#xff09; 在Program.cs文件中&am…

华为HuaweiCloudStack(一)介绍与架构

本文简单介绍了华为HCS私有云解决方案&#xff0c;并从下至上介绍HCS的整体架构&#xff0c;部署架构、部署方式等内容。 目录 HCS简介 HCS架构 纵向结构 ?管理平台类型 HCS节点类型 FusionSphere OpenStack CPS ServiceOM SC 运营面 OC 运维面 HCS部署架构 regi…

彻底讲清楚 单体架构、集群架构、分布式架构及扩展架构

目录 什么是系统架构 单体架构 介绍 示例图 优点 缺点 集群架构 介绍 示意图 优点 缺点 分布式架构 示意图 优点 缺点 生态扩展 介绍 示意图 优点 缺点 扩展&#xff1a;分布式服务解析 纵切拆服务 全链路追踪能力 循环依赖 全链路日志&#xff08;En…

flutter 常用UI组件

文章目录 1. Toast 文本提示框oktoastbot_toast2. loading 加载窗flutter_easyloading3. 对话框gex dialog4.下拉刷新pull_to_refresh5. pop 窗custom_pop_up_menu6. pin code 密码框pinput7. 二维码qr_flutter8. swiper 滚动组件carousel_sliderflutter_swiper_view9. Badge 角…

【王树森搜索引擎技术】概要01:搜索引擎的基本概念

1. 基本名词 query&#xff1a;查询词SUG&#xff1a;搜索建议文档&#xff1a;搜索结果标签/筛选项 文档单列曝光 文档双列曝光 2. 曝光与点击 曝光&#xff1a;用户在搜索结果页上看到文档&#xff0c;就算曝光文档点击&#xff1a;在曝光后&#xff0c;用户点击文档&…

【开源免费】基于SpringBoot+Vue.JS欢迪迈手机商城(JAVA毕业设计)

本文项目编号 T 141 &#xff0c;文末自助获取源码 \color{red}{T141&#xff0c;文末自助获取源码} T141&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

【ArcGIS微课1000例】0140:总览(鹰眼)、放大镜、查看器的用法

文章目录 一、总览工具二、放大镜工具三、查看器工具ArcGIS中提供了三种局部查看的工具: 总览(鹰眼)、放大镜、查看器,如下图所示,本文讲述这三种工具的使用方法。 一、总览工具 为了便于效果查看与比对,本实验采用全球影像数据(位于配套实验数据包中的0140.rar中),加…

【TCP】rfc文档

tcp协议相关rfc有哪些 TCP&#xff08;传输控制协议&#xff09;是一个复杂的协议&#xff0c;其设计和实现涉及多个RFC文档。以下是一些与TCP协议密切相关的RFC文档列表&#xff0c;按照时间顺序排列&#xff0c;涵盖了从基础定义到高级特性和优化的各个方面&#xff1a; 基…

智能学习平台系统设计与实现(代码+数据库+LW)

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装智能学习平台系统软件来发挥其高效地信息处理的作用&#…

5 分钟复刻你的声音,一键实现 GPT-Sovits 模型部署

想象一下&#xff0c;只需简单几步操作&#xff0c;就能生成逼真的语音效果&#xff0c;无论是为客户服务还是为游戏角色配音&#xff0c;都能轻松实现。GPT-Sovits 模型&#xff0c;其高效的语音生成能力为实现自然、流畅的语音交互提供了强有力的技术支持。本文将详细介绍如何…

HunyuanVideo 文生视频模型实践

HunyuanVideo 文生视频模型实践 flyfish 运行 HunyuanVideo 模型使用文本生成视频的推荐配置&#xff08;batch size 1&#xff09;&#xff1a; 模型分辨率(height/width/frame)峰值显存HunyuanVideo720px1280px129f60GHunyuanVideo544px960px129f45G 本项目适用于使用 N…

浅谈 JVM

JVM 内存划分 JVM 内存划分为 四个区域&#xff0c;分别为 程序计数器、元数据区、栈、堆 程序计数器是记录当前指令执行到哪个地址 元数据区存储存储的是当前类加载好的数据&#xff0c;包括常量池和类对象的信息&#xff0c;.java 编译之后产生 .class 文件&#xff0c;运…

macOS安装的Ubuntu 20 VM虚拟机扩充磁盘的便捷方式

文章目录 说明操作一 VM扩充虚拟磁盘二 ubuntu系统调整分区 说明 建议ubuntu虚拟机安装图形化界面&#xff0c;方便磁盘管理。如果你安装的debian12&#xff0c;那可能需要使用命令行的方式&#xff0c;本人选择放弃&#xff0c;操作太复杂&#xff01; 操作 一 VM扩充虚拟磁…

关于机器学习的一份总结

在之前的文章中分别有详细的关于机器学习中某一学习算法的介绍&#xff0c;但缺少一个总体关于机器学习的总结&#xff0c;所以在这篇文中就是关于机器学习的一份总结。 在最近的日子中&#xff0c;人工智能日益火热起来&#xff0c;而机器学习是其中举足轻重的一部分&#xf…

idea中远程调试中配置的参数说明

Ⅰ 远程调试中配置的端口号与服务本身端口号区别 一、远程调试中配置端口号的作用 在 IDEA 中进行远程调试时配置的端口号主要用于建立开发工具&#xff08;如 IDEA&#xff09;和远程服务之间的调试连接。当你启动远程调试时&#xff0c;IDEA 会监听这个配置的端口号&#xf…

初识JVM HotSopt 的发展历程

目录 导学 目前企业对程序员的基本要求 面向的对象 实战 学习目标 JVM 是什么 JVM 的三大核心功能 各大 JVM look 看一下虚拟机 HotSopt 的发展历程 总结 导学 目前企业对程序员的基本要求 面向的对象 实战 学习目标 JVM 是什么 JVM 的三大核心功能 即时编译 主要是…

3. 后端验证前端Token

书接上回&#xff0c;后端将token返回给前端&#xff0c;前端存入cookie&#xff0c;每次前端给后端发送请求&#xff0c;后端是如何验证的。 若依是用过滤器来实现对请求的验证&#xff0c;过滤器的简单理解是每次发送请求的时候先发送给过滤器执行逻辑判断以及处理&#xff0…

系统思考—系统性抛弃过去成功的经验

“成功的经验就是最好的老师。” 这句话常听&#xff0c;但在快速变化的市场中&#xff0c;过去的成功可能正是你眼前困境的根源。曾经有效的方法&#xff0c;今天或许已经不适用。要突破瓶颈&#xff0c;企业必须做出艰难的选择——放下过去的成功模式&#xff0c;拥抱未来的…

【MySQL】简单解析一条SQL更新语句的执行过程

1. 更新语句执行流程概述 在 MySQL 中&#xff0c;一条更新语句&#xff08;如 update T set cc1 where ID2&#xff09;的执行涉及多个关键步骤&#xff0c;与查询语句类似&#xff0c;会经过连接器、分析器、优化器、执行器等 Server 层模块&#xff0c;最终到达存储引擎&…