CSS之我不会

devtools/2024/9/18 7:34:24/ 标签: css, 前端

非常推荐html-css学习视频:尚硅谷html-css

一、选择器

作用:选择页面上的某一个后者某一类元素

基本选择器

1.标签选择器

格式:标签{}

<h1>666</h1><style>css">h1{css语法}
</style>

2.类选择器

格式:.类名{}

<h1 class="name">666</h1>
<style>css">.name{css语法}
</style>

3.id选择器

格式:#名称{}

<h1 id="name">666</h1>
<style>css">#name{css语法}
</style>

高级选择器(只说一个id+class组合)

格式:id

<style>css">.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: gray;text-decoration: none;margin-right: 5px;line-height:50px;font: bold 20px/50px Arial;}/*属性名,属性名 = 属性值(正则)= 表示绝对等于*= 表示包含^= 表示以...开头$= 表示以...结尾存在id属性的元素a[]{}*/a[id]{/*a标签使用id的元素*/background: deeppink;}a[id=first]{/*id=first的元素*/background: greenyellow;}a[class*="links"]{/*class 中有links的元素*/background: green;}a[href^=http]{/*选中href中以http开头的元素*/background: aquamarine;}a[href$=pdf]{/*选中href中以http开头的元素*/background: aquamarine;}
</style><p class="demo"><a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a><a href="" class="links item active" target="_blank " title="test">链接</a><a href="img/hello.html" class="links item">网页</a><a href="img/str1.png" class="links item">png</a><a href="img/str2.jpg" class="links item">jpg</a><a href="abc" class="links item">链2</a><a href="/fy.pdf" class="links item">pdf</a><a href="/quit.pdf" class="links item">pdf2</a><a href="dump.doc" class="links item">doc</a><a href="kiko.doc" class="links item last">doc2</a>
</p>   

二、美化

1.字体 font

  1. font-family:字体
  2. font-size:字体大小
  3. font-weight:字体粗细
  4. color:字体颜色

2.文本样式 text

  1. 文本对齐方式:text-align:center
  2. 首行缩进: text-indent:2em
  3. 行高: line-height:300px
  4. 下划线:text-decoration
  • text-decoration:underline /下划线/
  • text-decoration:line-through /中划线/
  • text-decoration:overline /上划线/
  • text-decoration:none /超链接去下划线/
  1. 图片、文字水平对齐 (行内元素对齐)
css">img,span{vertical-align: middle;
}

6.文本阴影

<style>css">
h1 {text-shadow: 2px 2px 5px red;
}
</style><h1>文本阴影效果!</h1>

在这里插入图片描述

3.超链接伪类

	<style>css">/*超链接有默认的颜色*/a{text-decoration: hotpink;color: #000000;}/*鼠标悬浮的状态*/a:hover{color: dodgerblue;}/*鼠标按住未释放的状态*/a:active{color:green}/*点击之后的状态*/a:visited{color:mediumpurple;}</style>

列表 ui li

有序 ui li
无序 ol li
list-style-type: circle
list-style-type: square
list-style-type: upper-roman
list-style-type: lower-alpha

背景

1.背景颜色 background-color

2.透明度 opacity

3.背景图片 background-image: url("name.jpg")

三、盒子模型

布局三大核心:盒子模型、浮动、定位

1.元素的显示模式

1.块元素(block)

又称:块级元素 特点:

  1. 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
  2. 默认宽度:撑满父元素
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高。
  1. 主体结构标签: <html> 、 <body>
  2. 排版标签: <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
  3. 列表标签: <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
  4. 表格相关标签: <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、 <caption>
  5. <form> 与 <option>

2.行内元素(inline)

又称:内联元素 特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排 列。
  2. 默认宽度:由内容撑开。
  3. 默认高度:由内容撑开
  4. 无法通过 CSS 设置宽高。
  1. 文本标签: <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
  2. <a><label><span><input>

3.行内块元素(inline-block)

又称:内联块元素 特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排 列。
  2. 默认宽度:由内容撑开
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高。
  1. 图片: <img>
  2. 单元格: <td> 、 <th>
  3. 表单控件: <textarea> 、 <select> 、 <button>
  4. 框架标签: <iframe>

2.盒子模型

在这里插入图片描述

网页布局过程:

  1. 先准备好相关的网页元素,网页元素基本都是盒子 Box 。
  2. 利用 CSS 设置好盒子样式,然后摆放到相应位置。 (难点)
  3. 往盒子里面装内容

3.盒子模型(Box Model)组成

在这里插入图片描述

1.边框

css"> border : border-width || border-style || border-color;   

在这里插入图片描述
边框样式 border-style 可以设置如下值:

  • none:没有边框即忽略所有边框的宽度(默认值)
  • solid:边框为单实线(最为常用的)
  • dashed:边框为虚线
  • dotted:边框为点线

2.内边距(padding)

和写属性
在这里插入图片描述
分写属性
在这里插入图片描述

3.外边距(margin)

在这里插入图片描述

margin 注意事项:

  1. 子元素的 margin ,是参考父元素的 content 计算的。(因为是父亲的 content 中承装着 子元素)
  2. 上 margin 、左 margin :影响自己的位置;下 margin 、右 margin :影响后面兄弟元素 的位置。
  3. 块级元素、行内块元素,均可以完美地设置四个方向的 margin ;但行内元素,左右 margin 可以完美设置,上下 margin 设置无效。
  4. margin 的值也可以是 auto ,如果给一个块级元素设置左右 margin 都为 auto ,该块级 元素会在父元素中水平居中。
  5. margin 的值可以是负值

4.处理内容溢出

在这里插入图片描述

注意:

  1. overflow-x 、 overflow-y 不能一个是 hidden ,一个是 visible ,是实验性属性,不 建议使用。
  2. overflow 常用的值是 hidden 和 auto ,除了能处理溢出的显示方式,还可以解决很多 疑难杂症。

5.布局小技巧(重点)

  1. 行内元素、行内块元素,可以被父元素当做文本处理。

即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。
例如: text-alignline-heighttext-indent 等。

  1. 如何让子元素,在父亲中 水平居中

若子元素为块元素,给子元素加上: margin:0 auto
若子元素为行内元素行内块元素,给父元素加上:text-align:center

  1. 如何让子元素,在父亲中 垂直居中

若子元素为块元素,给子元素加上: margin-top ,值为:父元素 content -子元素盒子(margin+border+padding) / 2。
若子元素为行内元素、行内块元素: 让父元素的 line-height=height(父元素高度),每个子元素都加上: vertical-align:middle 。
补充:若想绝对垂直居中,父元素 font-size 设置为 0 。

  1. 不知父元素高度,子元素在父元素垂直居中

通过数学计算calc(),计算出父元素高度 :用100%视口高度-已经占用的高度 100vh - height 然后同上

css">height: calc(100vh - 70px);

6.常用布局练习

  1. 块元素水平垂直居中
    在这里插入图片描述
 	<style>css">.outer{height: 400px;width: 400px;background-color: gray;overflow: hidden;}.inner{height: 100px;width: 200px;padding: 10px;border: 10px solid red;background-color: orange;margin: 130px auto 0;text-align: center;line-height: 100px;}</style><div class="outer"><div class="inner">inner</div></div>
  1. 行内元素水平垂直居中
    在这里插入图片描述
	<style>css">.outer{height: 400px;width: 400px;background-color: pink;text-align: center;line-height: 400px;}</style><div class="outer"><span style="css language-css">background-color: salmon;height: 20px">出来玩</span></div>
  1. 行元素、行内块绝对居中
    在这里插入图片描述
	<style>css">.outer{height: 400px;width: 400px;background-color: salmon;text-align: center;line-height: 400px;font-size: 0;}.outer img{vertical-align: middle;height: 100px;width: 100px;}.outer span{background-color: #35BAF6;vertical-align: middle;font-size: 40px;}</style><div class="outer"><span style="">头像:</span><img src="../image/小姐姐.gif"></div>
  1. 背景图片铺满
css">		html, body{width: 100%;height: 100%;}body{background: url("../image/bg.jpg");background-repeat: no-repeat; /*图片不重复*/background-size: cover;  /*图片铺满整个视口*/}

四、浮动 float

场景:布局

1.简介

在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。
在这里插入图片描述

2.元素浮动后的特点

  1. 🤢脱离文档流。
  2. 😊不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),而且可以设置宽
    高。
  3. 😊不会独占一行,可以与其他元素共用一行。
  4. 😊不会 margin 合并,也不会 margin 塌陷,能够完美的设置四个方向的 margin 和 padding 。
  5. 😊不会像行内块一样被当做文本处理(没有行内块的空白问题)。

3.解决浮动产生的影响

3.1元素浮动后会有哪些影响

对兄弟元素的影响: 后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟 无影响。
对父元素的影响: 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。

3.2 解决浮动产生的影响(清除浮动)

解决方案:

  1. 方案一: 给父元素指定高度。
  2. 方案二: 给父元素也设置浮动,带来其他影响。
  3. 方案三: 给父元素设置 overflow:hidden 。
  4. 方案四: 在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置 clear:both 。
  5. 方案五: 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同。===> 推荐使用
css">.parent::after {
content: "";
display: block;
clear:both;
}

布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。

3.3 浮动小练习

整体效果如下:
在这里插入图片描述

盒子分析
在这里插入图片描述

	<style>css">* {margin: 0;padding: 0;}.float-left {float: left;}.float-right{float: right;}.clear-float::after{content: '';display: block;clear: both;}.container {text-align: center;width: 960px;margin: 0 auto;}.header {height: 80px;width: 960px;text-align: center;line-height: 80px;}.log{width: 200px;margin-right: 10px;}.banner1{width: 540px;margin-right: 10px;}.banner2{width: 200px;}.log,.banner1,.banner2{background-color: #ccc;height: 80px;}.menu{margin-top: 10px;background-color: #CCC;line-height: 30px;}.content{width: 960px;}.item1,.item2{width: 368px;height: 198px;border: 1px solid black;margin-top: 10px;margin-right: 10px;line-height: 198px;}.item3,.item4,.item5,.item6{height: 198px;width: 178px;margin-right: 10px;margin-top: 10px;border: 1px solid black;line-height: 198px;}.item7,.item8,.item9{border: 1px solid black;height: 128px;width: 198px;margin-top: 10px;line-height: 128px;}.footer{background-color: #ccc;width: 960px;height: 60px;margin-top: 10px;line-height: 60px;}</style><div class="container"><!--头--><div class="header clear-float"><div class="log float-left">log</div><div class="banner1 float-left">banner</div><div class="banner2 float-left">banner</div></div><!--菜单--><div class="menu">菜单</div><!--内容--><div class="content clear-float"><!--左--><div class="content-left float-left"><!--上--><div class="left-up clear-float"><div class="item1 float-left">栏目一</div><div class="item2 float-left">栏目二</div></div><!--下--><div class="left-down clear-float"><div class="item3 float-left">栏目三</div><div class="item4 float-left">栏目四</div><div class="item5 float-left">栏目五</div><div class="item6 float-left">栏目六</div></div></div><!--右--><div class="content-right clear-float"><div class="item7 float-left">栏目七</div><div class="item8 float-left">栏目八</div><div class="item9 float-left">栏目九</div></div></div><!--页脚--><div class="footer">页脚</div></div>

五、定位 position

1.相对定位

1.1 如何设置相对定位?

  • 给元素设置 position:relative 即可实现相对定位。
  • 可以使用 left 、 right 、 top 、 bottom四个属性调整位置

1.2 相对定位的参考点在哪里?

  • 相对自己原来的位置

1.3 相对定位的特点:

1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。

默认规则是:
定位的元素会盖在普通元素之上。
都发生定位的两个元素,后写的元素会盖在先写的元素之上。
3.left 不能和 right 一起设置, topbottom 不能一起设置。
4. 相对定位的元素,也能继续浮动,但不推荐这样做。
5. 相对行为的元素,也能通过 margin 调整位置,但不推荐这样做。

注意:绝大多数情况下,相对定位,会与绝对定位配合使用。 (子元素绝对定位,父元素相对定位——子绝父相)

2.绝对定位

2.1 如何设置绝对定位?

  • 给元素设置 position: absolute 即可实现绝对定位。
  • 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.2 绝对定位的参考点在哪里?

  • 参考它的包含块

什么是包含块?

  1. 对于没有脱离文档流的元素:包含块就是父元素;
  2. 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都 没定位,那包含块就是整个页面)

2.3 绝对定位元素的特点:

  1. 脱离文档流,会对后面的兄弟元素、父元素有影响。
  2. left 不能和 right 一起设置, top 和 bottom 不能一起设置。
  3. 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
  4. 绝对定位的元素,也能通过 margin 调整位置,但不推荐这样做。
  5. 无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。

何为定位元素? —— 默认宽、高都被内容所撑开,且能自由设置宽高。

3.固定定位

3.1 如何设置为固定定位?

  • 给元素设置 position: fixed 即可实现固定定位。
  • 可以使用 left 、 right 、 top 、 bottom四个属性调整位置。

3.2 固定定位的参考点在哪里?

  • 参考它的视口

什么是视口?—— 对于 PC 浏览器来说,视口就是我们看网页的那扇“窗户”。

3.3 固定定位元素的特点

  1. 脱离文档流,会对后面的兄弟元素、父元素有影响。
  2. left 不能和 right 一起设置, top 和 bottom 不能一起设置。
  3. 固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
  4. 固定定位的元素,也能通过 margin 调整位置,但不推荐这样做。
  5. 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。

4. 粘性定位

4.1 如何设置为粘性定

  • 给元素设置 position:sticky 即可实现粘性定位。
  • 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置,不过最常用的是 top 值。

4.2 粘性定位的参考点在哪里?

离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点

  • 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
  • 最常用的值是 top 值。
  • 粘性定位和浮动可以同时设置,但不推荐这样做。
  • 粘性定位的元素,也能通过 margin 调整位置,但不推荐这样做。

粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。

5.定位层级

  1. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
  2. 如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
  3. 可以通过 css 属性 z-index 调整元素的显示层级。
  4. z-index 的属性值是数字,没有单位,值越大显示层级越高。
  5. 只有定位的元素设置 z-index 才有效。
  6. 如果 z-index 值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级。

6. 定位的特殊应用

注意:

  1. 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设 置宽高。
  2. 发生相对定位后,元素依然是之前的显示模式。
  3. 以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素。

让定位元素的宽充满包含块

  • 块宽想与包含块一致,可以给定位元素同时设置 left 和 right 为 0 。
  • 高度想与包含块一致, top 和 bottom 设置为 0 。

让定位元素在包含块中居中

  • 方案一:
css">left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二:

css">left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意:该定位的元素必须设置宽高!!!

七、布局

1.版心

  • 在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页 的版心。
  • 版心的宽度一般是 960 ~1200 像素之间。
  • 版心可以是一个,也可以是多个。
    在这里插入图片描述

2. 常用布局名词

位置名词
顶部导航条topbar
页头headerpage-header
导航navnavigatornavbar
搜索框searchsearch-box
横幅、广告、宣传图banner
主要内容contentmain
侧边栏asidesidebar
页脚footerpage-footer

八、伸缩盒模型 (display:flex布局)

1.伸缩容器、伸缩项目

  • 伸缩容器: 开启了 flex 的元素,就是:伸缩容器。
  1. 给元素设置: display:flexdisplay:inline-flex ,该元素就变为了伸缩容器。
  2. display:inline-flex 很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩 容器。
  3. 一个元素可以同时是:伸缩容器、伸缩项目。
  • 伸缩项目:伸缩容器所有子元素自动成为了:伸缩项目。
  1. 仅伸缩容器的子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项目。
  2. 无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会“块状化”

2.主轴与侧轴

  • 主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边 是终点)。
  • 侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边
    是终点)。

3.主轴方向

  • 属性名: flex-direction
  • 常用值如下:

1.row :主轴方向水平从左到右 —— 默认值
2.row-reverse :主轴方向水平从右到左。
3.column :主轴方向垂直从上到下。
4.column-reverse :主轴方向垂直从下到上。

在这里插入图片描述

注意:改变了主轴的方向,侧轴方向也随之改变。

4.主轴的换行方式

  • 属性名: flex-wrap

  • 常用值如下:

    1. nowrap :默认值,不换行。
      在这里插入图片描述

    2. wrap :自动换行,伸缩容器不够自动换行。
      在这里插入图片描述

    3. wrap-reverse :反向换行。
      在这里插入图片描述

5.flex-flow

  • flex-flow 是一个复合属性,复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求
    css">flex-flow: row wrap;
    

6.主轴对齐方式

  • 属性名: justify-content

  • 常用值如下:

    1. flex-start :主轴起点对齐。—— 默认值
    2. flex-end :主轴终点对齐。
    3. center :居中对齐
    4. space-between :均匀分布,两端对齐(最常用)。
    5. space-around :均匀分布,两端距离是中间距离的一半。
    6. space-evenly :均匀分布,两端距离与中间距离一致。
      在这里插入图片描述

7.侧轴对齐方式

7.1 一行的情况

  • 所需属性: align-items
  • 常用值如下:
    1. flex-start :侧轴的起点对齐。
    2. flex-end :侧轴的终点对齐。
    3. center :侧轴的中点对齐。
    4. baseline : 伸缩项目的第一行文字的基线对齐。
    5. stretch :如果伸缩项目未设置高度,将占满整个容器的高度。—— (默认值)
      在这里插入图片描述

7.2 多行的情况

  • 所需属性: align-content
  • 常用值如下:
    1. flex-start :与侧轴的起点对齐。
    2. flex-end :与侧轴的终点对齐。
    3. center :与侧轴的中点对齐。
    4. space-between :与侧轴两端对齐,中间平均分布。
    5. space-around :伸缩项目间的距离相等,比距边缘大一倍。
    6. space-evenly : 在侧轴上完全平分。
    7. stretch :占满整个侧轴。—— 默认值
      在这里插入图片描述

8. flex 实现水平垂直居中

方法一:父容器开启 flex 布局,随后使用 justify-content 和 align-items 实现水平垂直居中

css">.outer {width: 400px;height: 400px;background-color: #888;display: flex;justify-content: center;align-items: center;
}
.inner {width: 100px;height: 100px;background-color: orange;
}

方法二:父容器开启 flex 布局,随后子元素 margin: auto

css">.outer {width: 400px;height: 400px;background-color: #888;display: flex;
}
.inner {width: 100px;height: 100px;background-color: orange;margin: auto;
}

九、H5布局简介

新增布局标签

标签名语义单/双标签
header整个页面,或部分区域的头部
footer整个页面,或部分区域的底部
nav导航
article文章、帖子、杂志、新闻、博客、评论等。
section页面中的某段文字,或文章中的某段文字(里面文字通常里面会包含标题)。
aside侧边栏
main文档的主要内容 ( WHATWG 没有语义, IE 不支持),几乎不用。
hgroup包裹连续的标题,如文章主标题、副标题的组合 ( W3C 将其删除)
  • 关于 article 和 section :

    1. artical 里面可以有多个 section 。
    2. section 强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用 section 元素。
    3. article 比 section 更强调独立性,一块内容如果比较独立、比较完整,应该使用
    4. article 元素。

http://www.ppmy.cn/devtools/110288.html

相关文章

Java超详细知识点——I/O流(字节流和字符流)

File类&#xff1a; Java API&#xff1a;java.io.File 类 是用来操作文件或文件夹的&#xff0c;无法用来读写 1.首先创建一下file的对象&#xff1a; 里面可以写相对路径或者绝对路径 File file new File("CCC.java"); 也可以使用其他构造方法 //String path …

【PyQt5 应用程序】PyQt基础组件:连接数据库

在开发现代应用程序时,与数据库的交互几乎是不可避免的。不论是存储用户信息、订单详情还是应用配置,数据库都扮演着核心角色。幸运的是,PyQt提供了一系列的工具来简化数据库的操作。在这一部分,我们将探讨如何使用PyQt连接到数据库,并通过具体的例子来说明如何进行数据的…

第四届长城杯-misc

BrickGame 就连连看 或者 改图标会快一点吧 漏洞探踪&#xff0c;流量解密 第一阶段 192.168.30.234 第二阶段 bdb8e21eace81d5fd21ca445ccb35071 bdb8e21eace81d5fd21ca445ccb350715a76f6751576dbe1af49328aa1d2d2bea16ef62afa3a7c616dbdb8e21eace81d5fd21ca445ccb35071 …

【代码随想录训练营第42期 续Day52打卡 - 图论Part3 - 卡码网 103. 水流问题 104. 建造最大岛屿

目录 一、做题心得 二、题目与题解 题目一&#xff1a;卡码网 103. 水流问题 题目链接 题解&#xff1a;DFS 题目二&#xff1a;卡码网 104. 建造最大岛屿 题目链接 题解&#xff1a;DFS 三、小结 一、做题心得 也是成功补上昨天的打卡了。 这里继续图论章节&#xff…

网络安全 DVWA通关指南 DVWA Reflected Cross Site Scripting (反射型 XSS)

DVWA Reflected Cross Site Scripting (反射型 XSS) 文章目录 DVWA Reflected Cross Site Scripting (反射型 XSS)XSS跨站原理反射型 LowMediumHighImpossible XSS跨站原理 当应用程序发送给浏览器的页面中包含用户提交的数据&#xff0c;但没有经过适当验证或转义时&#xff0…

迭代器模式iterator

学习笔记&#xff0c;原文链接 https://refactoringguru.cn/design-patterns/iterator 不暴露集合底层表现形式 &#xff08;列表、 栈和树等&#xff09; 的情况下遍历集合中所有的元素

leetcode 刷题周报(9.3-9.10)

leetcode 刷题周报&#xff08;9.3-9.10&#xff09; 2708.一个小组的最大实力值 题意&#xff1a; 给你一个下标从 0 开始的整数数组 nums &#xff0c;它表示一个班级中所有学生在一次考试中的成绩。老师想选出一部分同学组成一个 非空 小组&#xff0c;且这个小组的 实力…

《JavaEE进阶》----11.<SpringIOCDI【Spring容器+IOC详解+DI介绍】>

本篇博客会详细讲解什么是Spring。 SpringIOC SpringID 五个类注解&#xff1a;Controller、Service、Repository、Component、Configuration 一个方法注解&#xff1a;Bean 什么是Spring IOC容器 Spring 是包含众多工具的IOC容器。能装东西的容器。 1.容器 如我们之前学的 Tom…

服务器数据恢复—通过拼接数据库碎片的方式恢复SQL Server数据库数据

服务器数据恢复环境&#xff1a; 一台服务器中有一组由4块STAT硬盘通过RAID卡组建的RAID10阵列&#xff0c;上层是XenServer虚拟化平台&#xff0c;虚拟机安装Windows Server操作系统&#xff0c;作为Web服务器使用。 服务器故障&#xff1a; 因机房异常断电导致服务器中一台V…

信创那些事儿——Spring Boot中集成东方通中间件(TongWeb)

在Spring Boot中集成东方通中间件&#xff08;如TongWeb作为Servlet容器&#xff09;通常涉及几个步骤&#xff0c;但需要注意的是&#xff0c;TongWeb本身是一个独立的Java EE应用服务器&#xff0c;而不是像Tomcat那样可以直接嵌入到Spring Boot应用中的中间件。因此&#xf…

Linux部署hadoop2

Java设置&#xff1b; 创建hadoop要用到的文件夹&#xff1b; hadoop设置&#xff1b; 格式化hdfs&#xff1b; 启动hadoop&#xff1b; 验证hadoop&#xff1b; 接下来就逐步开始吧&#xff1b; 机器规划 本次实战用到了三台CentOS7的机器&#xff0c;身份信息如下所…

Windows安装HeidiSQL教程(图文)

一、软件简介 HeidiSQL是一款开源的数据库管理工具&#xff0c;主要用于管理MySQL、MariaDB、SQL Server、PostgreSQL和SQLite等数据库系统。它提供了直观的用户界面&#xff0c;使用户可以轻松地连接到数据库服务器、执行SQL查询、浏览和编辑数据、管理数据库结构等操作。 跨…

C# 路径操作

一、打开程序所在路径 try{string debugPath System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);System.Diagnostics.Process.Start(debugPath);}catch (Exception ex){MessageBox.Show("无法打开目录&#xff1a;" e…

网站安全需求分析与安全保护工程

网站安全威胁与需求分析 网站安全概念 网站&#xff1a;是基于B/S技术架构的综合信息服务平台&#xff0c;主要提供网页信息及业务后台对外接口服务。 网站安全性&#xff1a; 机密性&#xff1a;网站信息及相关数据不被授权查看或泄露完整性&#xff1a;网站信息及数据不能…

设计模式 装饰模式(Decorator Pattern)

装饰器模式简绍 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种类型的设计模式属于结构型模式&#xff0c;它是作为现有的类的一个包装。 装饰器模式的基本结构 装饰器模式的基本结构如下&…

如何让Google收录我的网站?

其实仅仅只是收录&#xff0c;只要在GSC提交网址&#xff0c;等个两三天&#xff0c;一般就能收录&#xff0c;但收录是否会掉&#xff0c;这篇内容收录了是否有展现&#xff0c;排名&#xff0c;就是另外一个课题了&#xff0c;如果不收录&#xff0c;除了说明你的网站有问题&…

mysql 生产问题处理

mysql死锁处理 处理方式1 -- 查看 InnoDB 状态 SHOW ENGINE INNODB STATUS;-- 查看死锁日志部分 -- ... 省略其他输出信息 ... ------------------------ LATEST DETECTED DEADLOCK ------------------------ ... 死锁信息 ...-- 根据日志中的线程ID kill 线程 KILL 线程ID1;…

【PPT学习笔记】使用PPT制作动画/手书/视频等作品的适配性和可能性?

【PPT学习笔记】使用PPT制作动画/手书等作品的可能性&#xff1f; 背景前摇&#xff1a;&#xff08;省流可不看&#xff09; 最近找到另外一份新的实习工作&#xff0c;有很多需要用到PPT动画的地方。 然而&#xff0c;我们之前制作的理工科PPT全是摒弃了形式主义的艰苦朴素…

【笔记】408刷题笔记

文章目录 三对角三叉树求最小带权路径UDP报文首部和TCP报文首部IP报文首部TCP报文首部UDP报文首部 刷新和再生的区别地址译码 为了区分队空队满&#xff0c;可以使用三种处理方式 1&#xff09;牺牲一个单元 队头指针在队尾指针的下一位置作为队满的标志 队满条件&#xff1a;(…

网络初识-相关概念

本篇主要介绍关于网络的相关概念~ 相关概念 局域网&#xff1a; 把几个电脑连接到一起&#xff0c;或者几台电脑连接到同一个路由器&#xff0c;就能构成局域网&#xff0c;局域网中的电脑可以相互通信。 广域网&#xff1a; 将多个局域网连接起来&#xff0c;就构成了范围更…