HTML/CSS总结

news2024/12/16 17:54:14

HTML

1.1 标题标签h

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

标题标签语义： 作为标题使用，并且依据重要性递减

其基本语法格式如下：

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>
1.2 段落标签p ( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

作用语义：

可以把 HTML 文档分割为若干段落

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

1.3 水平线标签hr(了解)
1.4 换行标签br (熟记)

单词缩写： break

<br />
1.5 div 和 span标签(重点)

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，现在我们主要记住使用方法和特点就好了

  • div标签 用来布局的，但是现在一行只能放一个div

  • span标签 用来布局的，一行上可以放好多个span

1.6 排版标签总结
标签名定义说明
<h></h>标题标签作为标题使用，并且依据重要性递减
<p></p>段落标签可以把 HTML 文档分割为若干段落
<hr />水平线标签没啥可说的，就是一条线
换行标签在网页中实现文本换行
<div></div>div标签用来布局的，但是现在一行只能放一个div
<span></span>span标签用来布局的，一行上可以放好多个span
1.7 文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签

换行标签br (熟记)

单词缩写： break

<br />
1.5 div 和 span标签(重点)

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，现在我们主要记住使用方法和特点就好了

  • div标签 用来布局的，但是现在一行只能放一个div

  • span标签 用来布局的，一行上可以放好多个span

1.6 排版标签总结
标签名定义说明
<h></h>标题标签作为标题使用，并且依据重要性递减
<p></p>段落标签可以把 HTML 文档分割为若干段落
<hr />水平线标签没啥可说的，就是一条线
换行标签在网页中实现文本换行
<div></div>div标签用来布局的，但是现在一行只能放一个div
<span></span>span标签用来布局的，一行上可以放好多个span
1.7 文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签

1.9 图像标签img (重点)

单词缩写：image

要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。

语法如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径，是img标签的必需属性。

1.10 链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚

语法格式：

<a href="跳转地址" target="目标窗口的打开方式">文本或图像</a>
属性作用
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

表格

创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

要深刻体会表格、行、单元格他们的构成。

表格标题caption

定义和用法

<table>
   <caption>我是表格标题</caption>
</table>
 无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>列表项1<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>列表项2<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>列表项3<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
  ......
<span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span></span></span>
有序列表 ol （了解）
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

 input 控件(重点)

1. type 属性

  • 这个属性通过改变值，可以决定了你属于那种input表单。

  • 比如 type = 'text' 就表示 文本框 可以做 用户名， 昵称等。

  • 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。

<span style="background-color:#f8f8f8"><span style="color:#333333">用户名: <span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"text"</span> <span style="color:#117700">/></span> 
密  码：<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"password"</span> <span style="color:#117700">/></span></span></span>
2. value属性
<span style="background-color:#f8f8f8"><span style="color:#333333">用户名:<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"text"</span>  <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"username"</span> <span style="color:#0000cc">value</span>=<span style="color:#aa1111">"请输入用户名"</span><span style="color:#117700">></span> </span></span>

  • value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

3. name属性
<span style="background-color:#f8f8f8"><span style="color:#333333">用户名:<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"text"</span>  <span style="color:#0000cc">name</span>=<span style="color:#aa1111">“username”</span> <span style="color:#117700">/></span>  </span></span>

name表单的名字， 这样，服务端可以通过这个name属性找到这个输入项目用户填写的数据

  • name属性后面的值，是我们自己定义的。

  • radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"radio"</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"sex"</span>  <span style="color:#117700">/></span>男
<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"radio"</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"sex"</span> <span style="color:#117700">/></span>女</span></span>
4. checked属性

  • 表示默认选中状态。 较常见于 单选按钮和复选按钮。

<span style="background-color:#f8f8f8"><span style="color:#333333">性    别:
<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"radio"</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"sex"</span> <span style="color:#0000cc">value</span>=<span style="color:#aa1111">"男"</span> <span style="color:#0000cc">checked</span>=<span style="color:#aa1111">"checked"</span> <span style="color:#117700">/></span>男
<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"radio"</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"sex"</span> <span style="color:#0000cc">value</span>=<span style="color:#aa1111">"女"</span> <span style="color:#117700">/></span>女 </span></span>
5. input 属性小结
属性说明作用
type表单类型用来指定不同的控件类型
value表单值表单里面默认显示的文本
name表单名字页面中的表单很多，name主要作用就是用于区别不同的表单。
checked默认选中表示那个单选或者复选按钮一开始就被选中了

textarea控件(文本域了解)

  • 语法：

    <textarea >
  文本内容
</textarea>

  • 作用：

    通过textarea控件可以轻松地创建多行文本输入框.

    cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

form表单域

  • 收集的用户信息怎么传递给服务器？通过form表单域

  • 目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

语法: 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">form</span> <span style="color:#0000cc">action</span>=<span style="color:#aa1111">"url地址"</span> <span style="color:#0000cc">method</span>=<span style="color:#aa1111">"提交方式"</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"表单名称"</span><span style="color:#117700">></span>
  各种表单控件
<span style="color:#117700"></</span><span style="color:#117700">form</span><span style="color:#117700">></span></span></span>

常用属性：

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
methodget/post用于设置表单数据的提交方式，其取值为get或post。
name名称用于指定表单的名称，以区分同一个页面中的多个表单。

CSS

标签选择器

类选择器

font字体
font-size:大小
font-family:字体

作用：font-family属性用于设置哪一种字体。

p{ font-family:"微软雅黑";}
font-weight:字体粗细
font-style:字体风格
color:文本颜色
text-align:文本水平对齐方式

text-decoration 文本的装饰
值描述
none默认。定义标准的文本。 取消下划线（最常用）
underline定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline定义文本上的一条线。（不用）
line-through定义穿过文本下的一条线。（不常用）
9.6 CSS外观属性总结
属性表示注意点
color颜色我们通常用 十六进制 比如 而且是简写形式 #fff
line-height行高控制行与行之间的距离
text-align水平对齐可以设定文字水平的对齐方式
text-indent首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration文本修饰记住 添加 下划线 underline 取消下划线 none

标签显示模式（重点）

块级元素
常见的块元素有：
    <h1><h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
行内元素
常见的行内元素有：
    <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内块元素
在行内元素中有几个特殊的标签——<img/>、<input/>、<td>，可以对它们设置宽高和对齐属性
三种模式总结区别
元素模式元素排列设置样式默认宽度包含
块元素一行只能放一个块级元素可以设置宽度高度容器的100%容器可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度
标签模式转换

  • 块转行内：display:inline;

  • 行内转块：display:block;

  • 块、行内元素转换为行内块： display: inline-block;

CSS 背景(background)

3.1 背景颜色(color)
background-color:颜色值;   
默认的值是transparent（透明的）
3.2 背景图片(image)
background-image : none | url (url) 
background-image : url(images/demo.png);
背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺

背景位置(position) 重点
background-position : length || length
background-position : position || position
参数值
length百分数 | 由浮点数字和单位标识符组成的长度值
positiontop | bottom | left | center | right 方位名词
背景固定与滚动
background-attachment : scroll | fixed
参数作用
scroll背景图像是随对象内容滚动
fixed背景图像固定
背景总结
属性作用值
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background-image背景图片url(图片路径)
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment背景固定还是滚动scroll/fixed
背景简写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明让盒子半透明background: rgba(0,0,0,0.3); 后面必须是 4个值

盒子模型

CSS优先级（重点）
权重计算公式

  • 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器计算权重公式
继承的权重最低0,0,0,0
标签选择器0,0,0,1
类，伪类0,0,1,0
唯一ID0,1,0,0
行内联样式 style=""1,0,0,0
!important最高权重

上边框下边框左边框右边框
border-top-style:样式;border-bottom-style:样式;border-left-style:样式;border-right-style:样式;
border-top-width:宽度;border- bottom-width:宽度;border-left-width:宽度;border-right-width:宽度;
border-top-color:颜色;border- bottom-color:颜色;border-left-color:颜色;border-right-color:颜色;
border-top:宽度 样式 颜色;border-bottom:宽度 样式 颜色;border-left:宽度 样式 颜色;border-right:宽度 样式 颜色;
盒子模型布局总结

  • margin：会有外边距合并的问题。

  • padding：会影响盒子大小。

浮动-float

  • 概念：元素的浮动是指设置了浮动属性的元素，会脱离标准普通流的控制，移动到指定位置。

    • 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。

    • 可以实现盒子的左右对齐等等。

  • 通过 float属性定义浮动，语法如下

<span style="background-color:#f8f8f8"><span style="color:#333333">选择器 { 
    <span style="color:#000000">float</span>: 属性值; 
}</span></span>
属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动
5.1 浮动元素与父盒子的关系

  • 子盒子的浮动参照父盒子对齐

  • 不会与父盒子的边框重叠，也不会超过父盒子的内边距

清除浮动的方法
选择器{clear:属性值;}
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响（几乎只用clear: both;）

定位

相对定位 (重要)

  • 相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。

  • 语法：

选择器 { 
    position: relative; 
}

  • 相对定位的特点：（务必记住）

    • 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

    • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保持原来位置）

      因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

  • 效果图：

绝对定位 (重要)
绝对定位的介绍

  • 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

  • 语法：

     选择器 { 
    position: absolute; 
 }

  • 完全脱标 —— 完全不占位置；

  • 父元素没有定位，则以浏览器为准定位（Document 文档）。

  • 父元素要有定位

    • 元素将依据最近的已经定位（绝对、固定或相对定位）的父（祖先）元素进行定位。

  • 绝对定位的特点总结：（务必记住）

    • 绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

    • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

  • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

定位口诀 —— 子绝父相

  • 弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

  • 这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

  • 因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

    • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

    • 父盒子需要加定位限制子盒子在父盒子内显示。

    • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

固定定位 (重要)

  • 固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

  • 语法：

     选择器 { 
    position: fixed; 
 }

  • 固定定位的特点：（务必记住）：

    • 以浏览器的可视窗口为参照点移动元素。

    • 跟父元素没有任何关系

粘性定位 (了解)

  • 粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

  • 语法：

     选择器 { 
     position: sticky; 
     top: 10px; 
 }
​

  • 粘性定位的特点：

    • 以浏览器的可视窗口为参照点移动元素（固定定位特点）

    • 粘性定位占有原先的位置（相对定位特点）

    • 必须添加 top 、left、right、bottom 其中一个才有效

    • 跟页面滚动搭配使用。 兼容性较差，IE 不支持。

定位总结
定位模式是否脱标移动位置是否常用
static 静态定位否不能使用边偏移很少
relative 相对定位否 (占有位置)相对于自身位置移动基本单独使用
absolute绝对定位是（不占有位置）带有定位的父级要和定位父级元素搭配使用
fixed 固定定位是（不占有位置）浏览器可视区单独使用，不需要父级
sticky 粘性定位否 (占有位置)浏览器可视区当前阶段少
堆叠顺序 (重要)

  • 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

  • 语法：

    选择器 { 
    z-index: 1; 
}

  • z-index 的特性如下：

    • 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

    • 如果属性值相同，则按照书写顺序，后来居上；

    • 数字后面不能加单位。

  • 注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

  • 应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

绝对定位的盒子居中

  • 注意：加了绝对定位/固定定位的盒子不能通过设置 margin:0 auto 设置水平居中。

flex布局

display:flex

flex-direction 设置主轴的方向

justify-content 设置主轴上的子元素排列方式

flex-wrap 设置子元素是否换行

align-items 设置侧轴上的子元素排列方式（单行）

align-content 设置侧轴上的子元素的排列方式（多行）

align-content 和 align-items 区别

  • align-items 适用于单行情况下，只有上对齐、下对齐、居中和 拉伸

  • align-content 适用于换行（多行）的情况下，可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

  • 总结就是单行找 align-items 多行找 align-content

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row wrap;

flex 属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item{
    flex:<number> /* 默认值  0 */
}
align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许耽搁项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2){
   /* 设置自己在侧轴上的排列方式 */   
    align-self: flex-end;
}
order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

.item{
    order:<number>
}

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

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

相关文章

信号处理：概念、技术、领域

信号处理：概念、技术、领域

目录 基本概念 主要技术 应用领域 信号处理是一个涉及分析、修改和再生信号的多学科领域。信号可以是各种形式的&#xff0c;例如声音、图像、视频或其他类型的监测数据。信号处理的主要目标是提取有用的信息并增强信号的质量。以下是信号处理的一些基本概念和应用&#xff…
阅读更多...
黑盒白盒测试

黑盒白盒测试

任务1 黑盒测试之等价类划分法 【任务需求】 【问题】例&#xff1a;某报表处理系统要求用户输入处理报表的日期&#xff0c;日期限制在2003年1月至2008年12月&#xff0c;即系统只能对该段期间内的报表进行处理&#xff0c;如日期不在此范围内&#xff0c;则显示输入错误信息…
阅读更多...
深度学习物体检测之YOLOV5源码解读

深度学习物体检测之YOLOV5源码解读

V5比前面版本偏工程化,项目化,更贴合实战 一.V5版本项目配置 (1)整体项目概述 首先github直接查找yolov5&#xff0c;下载下来即可。在训练时&#xff0c;数据是怎么处理的&#xff1f;网络模型架构是怎么设计的(如各层的设计)&#xff1f;yolov5要求是大于python3.8与大于等…
阅读更多...
Go 怎么做性能优化芝麻开门篇

Go 怎么做性能优化芝麻开门篇

一、性能优化的流程 我们在对某个功能&#xff08;或单个接口&#xff09;做性能优化的时候。一般是该功能&#xff08;或接口&#xff09;性能无法满足我们的业务要求&#xff0c;所以被迫优化。在开始优化之前&#xff0c;我们需要明白一些理论知识。 1、常见的性能优化指标…
阅读更多...
【Elasticsearch入门到落地】4、Elasticsearch的安装

【Elasticsearch入门到落地】4、Elasticsearch的安装

接上篇《3、es与mysql的概念对比》 上一篇我们学习了Elasticsearch与Mysql的概念与区别。本篇我们来进行Elasticsearch的环境准备及软件安装。 一、环境准备 如果我们没有自己的Linux服务器&#xff0c;且现在正在使用的是Windows操作系统的电脑&#xff0c;那么首先我们需要安…
阅读更多...
CRYPTO密码学

CRYPTO密码学

加解密算法/编码 哈希算法SM3SHA-3base家族GBGB18030GB2312GBKutf家族恺撒二进制分区法unicodeASCIIDSADSSCRC32校验对称非对称gbk编码h264SEA初探smc动态代码保护四方密码曼彻斯特编码剖析基本概念什么是编码?什么是加密与解密寻找银弹-有没有无法破解的密码通过Java代码入门…
阅读更多...
我们来学mysql -- 探讨win安装方式（安装篇）

我们来学mysql -- 探讨win安装方式（安装篇）

题记 书接上回&#xff0c;在我们来学mysql – 闲聊(安装篇)中&#xff0c;拿到安装包&#xff0c;当宝贝一样揣在怀里 然而&#xff0c;还没捂热乎&#xff0c;得粉丝秘报&#xff0c;U哥&#xff0c;上篇文章用了滞后的官方文档&#xff0c;哈哈哈…内心的小倔强&#xff0c…
阅读更多...
pip 如何快速安装包

pip 如何快速安装包

一、问题描述 当使用Python通过pip安装一些包时&#xff0c;pip默认是访问的国外的源&#xff0c;但在国内访问又是异常的慢&#xff0c;而且还经常因为网络问题导致安装失败&#xff0c;比如下面通过pip install jupyter来安装jupyter Notebook&#xff0c;这网速真的超级慢&…
阅读更多...
CodeBook-Ubuntu-sandbox Linux 沙箱服务 docker pull

CodeBook-Ubuntu-sandbox Linux 沙箱服务 docker pull

CodeBook-Ubuntu-sandbox Linux 沙箱服务 开源技术栏 这是一个多用户的 Linux SSH 服务沙箱&#xff0c;支持启动时动态加载用户列表&#xff0c;并可随时更新用户信息。每个用户仅能修改自己目录下的文件&#xff0c;确保了环境的安全性和隔离性。 目录 文章目录 CodeBook-…
阅读更多...
【echarts】数据过多时可以左右滑动查看（可鼠标可滚动条）

【echarts】数据过多时可以左右滑动查看（可鼠标可滚动条）

1. 鼠标左右拖动 在和 series 同级的地方配置 dataZoom&#xff1a; dataZoom: [{type: inside, // inside 鼠标左右拖图表&#xff0c;滚轮缩放&#xff1b; slider 使用滑动条start: 0, // 左边的滑块位置&#xff0c;表示从 0 开始显示end: 60, // 右边的滑块位置&#xf…
阅读更多...
【数据分享】2014-2024年我国POI兴趣点数据（免费获取/来源于OSM地图）

【数据分享】2014-2024年我国POI兴趣点数据（免费获取/来源于OSM地图）

POI是Point of Interest的简称&#xff0c;意为“兴趣点”&#xff0c;是互联网电子地图中用于表示特定位置的地理实体的核心数据类型。POI通常用于标注具体地点&#xff0c;例如餐厅、商场、学校、医院、景点等。这些数据以点的形式呈现&#xff0c;并附带详细属性信息&#x…
阅读更多...
使用html和JavaScript实现一个简易的物业管理系统

使用html和JavaScript实现一个简易的物业管理系统

码实现了一个简易的物业管理系统&#xff0c;主要使用了以下技术和功能&#xff1a; 1.主要技术 使用的技术&#xff1a; HTML: 用于构建网页的基本结构。包括表单、表格、按钮等元素。 CSS: 用于美化网页的外观和布局。设置字体、颜色、边距、对齐方式等样式。 JavaScript…
阅读更多...
SSM 垃圾分类系统——高效分类的科技保障

SSM 垃圾分类系统——高效分类的科技保障

第五章 系统功能实现 5.1管理员登录 管理员登录&#xff0c;通过填写用户名、密码、角色等信息&#xff0c;输入完成后选择登录即可进入垃圾分类系统&#xff0c;如图5-1所示。 图5-1管理员登录界面图 5.2管理员功能实现 5.2.1 用户管理 管理员对用户管理进行填写账号、姓名、…
阅读更多...
ip_done

ip_done

文章目录 路由结论 IP分片 数据链路层重谈Mac地址MAC帧报头局域网的通信原理MSS&#xff0c;以及MAC帧对上层的影响ARP协议 1.公司是不是这样呢? 类似的要给运营商交钱&#xff0c;构建公司的子网&#xff0c;具有公司级别的入口路由器 2&#xff0e;为什么要这样呢?? IP地…
阅读更多...
排序算法（5）：归并排序

排序算法（5）：归并排序

问题 排序 [30, 24, 5, 58, 18, 36, 12, 42, 39] 归并排序 归并排序采用分治法&#xff0c;将序列分成若干子序列&#xff0c;每个子序列有序后再合并成有序的完整序列。 在数组排序中&#xff0c;如果只有一个数&#xff0c;那么它本身就是有序的。如果有两个数&#xff0…
阅读更多...
uniapp打包apk教程

uniapp打包apk教程

文章目录 一、uniapp是什么&#xff1f;二、使用步骤1.需要有Java环境&#xff0c;安装jdk2.安装hbuilderx开发工具3.自签证书4.使用云打包 总结 一、uniapp是什么&#xff1f; ‌uni-app是一个基于Vue.js的跨平台应用开发框架&#xff0c;允许开发者使用一套代码同时构建iOS、…
阅读更多...
Titanic - Machine Learning from Disaster————泰坦尼克号幸存者预测————逻辑回归、随机森林和梯度提升树（XGBoost、LightGBM）

Titanic - Machine Learning from Disaster————泰坦尼克号幸存者预测————逻辑回归、随机森林和梯度提升树（XGBoost、LightGBM）

目录 1. 引言 2. 理解 Titanic 数据集 目标变量 数据的初步探索 3. 数据预处理 3.1 处理缺失值 3.2 处理类别型特征 3.3 创建新特征 3.4 删除无关特征 3.5 确保所有特征都是数值型 4. 模型选择与训练 4.1 数据集拆分 4.2 选择和训练模型 4.2.1 逻辑回归模型 4.2…
阅读更多...
MySQL笔记--多表查询

MySQL笔记--多表查询

1--多表关系 多表关系基本上分为三种&#xff1a; 一对多&#xff08;多对一&#xff09;&#xff1b; 多对多&#xff1b; 一对一&#xff1b; 1-1--多对一 在多的一方建立外键&#xff0c;指向一的一方的主键&#xff1b; 1-2--多对多 建立第三张中间表&#xff0c;中间表至少…
阅读更多...
利用git上传项目到GitHub

利用git上传项目到GitHub

GitHub是基于git实现的代码托管。git是目前最好用的版本控制系统了&#xff0c;非常受欢迎&#xff0c;比之svn更好。 GitHub可以免费使用&#xff0c;并且快速稳定。 利用GitHub&#xff0c;你可以将项目存档&#xff0c;与其他人分享交流&#xff0c;并让其他开发者帮助你一…
阅读更多...
Gate学习(7)引入体素源

Gate学习(7)引入体素源

一、从GitHub下载体素源模型源码 下载地址&#xff1a;BenAuer2021/Phantoms-for-Nuclear-Medicine-Imaging-Simulation&#xff1a;用于核医学成像应用的模型&#xff08;闪烁显像、SPECT 和 PET&#xff09; --- BenAuer2021/Phantoms-For-Nuclear-Medicine-Imaging-Simulat…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023