前言
当看到 CSS Selectors Level 4
很多人会理所当然地喊出 CSS4
。但是,这里必须明确一个概念,目前所谓的 CSS3 和 CSS4 都是 CSS2.1 以后对某一些 CSS 模块进行升级更新后的称呼。CSS3 和 CSS4 永远都不会出现,它们只是为了区分 CSS 模块升级后的等级,例如有些 CSS 选择器在之前就存在了,但是此时我们为它添加了新的特性,那么这个模块就升级到了 CSS Selectors Level 3 中,如果再一次升级,那么就变成了 CSS Selectors Level 4。下面我们可以对目前 W3C 工作草案中的 CSS Selectors Level 4 新特性进行一个阶段性总结,之所以叫阶段性,是因为未来可能有更多的新特性加入。
Negation pseudo-class——:not()
:not()
用于将符合规则的元素剔除,将样式规则应用于其他元素上。在 CSS3 中已经有 :not()
,不过在 CSS3 中只能使用简单的匹配规则,例如 :not(p)
用来选择不是
的元素。而在 CSS4 中,可以应用更复杂的匹配规则,但是同样地不允许嵌套使用,例如 :not(:not(...))
。
.negation {
color : black ;
}
.negation .default :not( [data-red="no"] ) {
color : red ;
}
.negation .default a {
color : green ;
}
.negation .default a :not( [rel="green"] , [rel="default"] ) {
color : blue ;
}
<div class ="negation" >
<div class ="default" data-red ="no" >
<a href ="http://www.baidu.com" rel ="green" > 这里是绿色a >
<a href ="http://www.ele.me" rel ="default" > 这里也是绿色a >
<a href ="http://www.sina.com" rel ="blue" > 这里是蓝色a >
div >
<div class ="default" data-red ="no" >
这里是黑色
div >
<div class ="default" data-red ="yes" >
这里是红色
div >
div >
:not()
小提示
我们可以利用 :not()
来对 CSS 样式进行一个优先级提升,例如 div:not(span) {…}
跟 div {…}
是同个概念,但是明显地前者的优先级更高。
想解锁更多 :not()
的使用姿势就去看 The Negation Pseudo-class 草案。
Matches-any Pseudo-class——:matches 伪类
:matches()
用于匹配所述规则的元素,并应用相应的样式规则,同样不允许嵌套使用,-webkit-any()
和 -moz-any()
是它的两个兼容性写法。它可以让我们节省书写大量的 CSS 样式匹配规则,让我们从大量重复的规则书写中解放出来。
.matches {
color : black ;
}
.matches :matches(span , div ) :matches(span , div ) {
color : green ;
}
.matches :-webkit-any(span , div ) :-webkit-any(span , div ) {
color : green ;
}
.matches :-moz-any(span , div ) :-moz-any(span , div ) {
color : green ;
}
.matches :matches( .a , .b ) :matches( .a , .b ) {
color : red ;
}
.matches :-webkit-any( .a , .b ) :-webkit-any( .a , .b ) {
color : red ;
}
.matches :-moz-any( .a , .b ) :-moz-any( .a , .b ) {
color : red ;
}
<div class ="matches" >
<span >
<div > 绿色div >
span >
<span >
<span > 绿色span >
span >
<div >
<span > 绿色span >
div >
<div >
<div > 绿色div >
div >
<div class ="a" >
<div class ="b" > 红色div >
div >
<div class ="b" >
<div class ="a" > 红色div >
div >
<div class ="a" >
<div class ="a" > 红色div >
div >
<div class ="b" >
<div class ="b" > 红色div >
div >
div >
Case-Sensitivity——不区分大小写匹配标识
Case-Sensitivity
用于声明某个匹配规则中,对字符串或者某个 value 的匹配不区分大小写。该标志声明于 ]
即右中括号之前,例如 [data-value="case" i]
,其中的 i
就是 Case-Sensitivity 标识。但是如果我们需要明确区分大小写区别的时候,该标识可能会导致某些不可意料的后果,所以使不使用该标识应该明确使用的场景是否对数据来源的大小写敏感。
.case-sensitivity :matches( [data-value="case" i] ) {
color : yellow ;
}
<div class ="case-sensitivity" >
<p data-value ='Case' > Casep >
<p data-value ="case" > casep >
div >
以上的例子,data-value
虽然既有大写也有小写,但是由于我们声明了 Case-Sensitivity
,所以无论大小写都会被匹配。像例子中 case
,Case
,CASE
等都会被匹配。
The Directionality Pseudo-class——:dir()
:dir()
用于匹配符合某个方向性的元素,例如 :dir(ltr)
和 dir(rtl)
。顾名思义,ltr
表示 left to right
,即方向从左到右,rtl
表示 right-to-left
,即方向从右到左。值得注意的是,使用 :dir()
匹配元素和使用 [dir=...]
在某个程度上是一样的效果,但是一个区别是 [dir=...]
无法匹配到没有显示声明 dir
的元素,但是 :dir()
却可以匹配到由浏览器计算得到或者继承来的 dir
属性的元素,详情可以看一下草案。因此,如果我们有明确地对某个元素声明 dir
,那我们大可以使用 [dir=...]
的形式来匹配某个元素,但是如果我们只是单纯从父元素继承而来的 dir
,那么此时还是需要用到:dir()
。
.dir :dir(ltr) {
color : blue ;
}
.dir :dir(rtl) {
color : green ;
}
<div class ="dir" >
<p dir ="ltr" > 从左到右p >
<p dir ="rtl" > 从右到左p >
div >
The Language Pseudo-class——:lang()
:lang()
用于匹配声明了 lang=value
的元素,并且可以使用通配符匹配,例如 p:lang(*-CH)
将可以匹配 de-CH
的 p
元素。
.lang p :lang(de-DE) {
color : green ;
}
.lang p :lang( *-CH ) {
color : blue ;
}
<div class ="lang" >
<p lang ="de-DE-1996" > de-DE-1996p >
<p lang ="de-CH" > de-CHp >
div >
The Hyperlink Pseudo-class——:any-link 伪类
:any-link
用于匹配带有 href
属性的超链接元素,例如
,
,
等带有 href
属性的元素。:-webkit-any-link
和 :-moz-any-link
是它的兼容性写法。目前工作组对该选择器的命名尚不满意,未来该选择器可能会修改其名字。该选择器的作用在于可以选出所有带有链接的元素,如果使用旧方法,那么只能使用标签名的方式或者a[href=value]
的方式去匹配。
.link a :any-link {
color : red ;
}
.link a :-webkit-any-link {
color : red ;
}
.link a :-moz-any-link {
color : red ;
}
<div class ="link" >
<a href ="#" > 我是带有颜色的超链接a >
div >
The contextual reference element pseudo-class——:scope
:scope
用于匹配当前作用域下的顶级元素。但是目前
已经被移除——issue,所以 :scope
基本等效于:root
。
<div class ="scope" >
<p > This paragraph is outside the scope.p >
<div >
<style scoped >
:scope {
background-color : red ;
}
p {
color : blue ;
}
style >
<p > This paragraph is inside the scope.p >
div >
div >
以上代码,第二个 div
将会有红色背景,并且他的所有
子元素都将拥有蓝色文字。
Time-dimensional Pseudo-classes——:current(), :past(), :future()
我个人用 时间轴伪类
统一称呼 :current()
, :past()
, :future()
这三个伪类。:current()
匹配时间轴当前的元素,:past()
匹配 :current()
元素之前的元素,:future()
则匹配当前时间轴后的所有元素。这里说的时间轴指的是例如WebVTT
。值得注意的是,规范中写道如果使用的时间轴并不是文档语言所规定的,那么 :past()
和 :future()
有可能分别匹配 :current()
元素的前面的兄弟元素和后面的兄弟元素。由于在 Chrome Canary 和 Safari TP 上都不支持这几个伪类,所以无法实验正确性。下面使用的例子是从这个网址摘过来的。
:current(p , span ) {
background-color : yellow ;
}
:past(p , span ),
:future(p , span ) {
background-color : gray ;
}
<video controls preload ="metadata" >
<source src ="http://html5demos.com/assets/dizzy.mp4" type ="video/mp4" />
<source src ="http://html5demos.com/assets/dizzy.webm" type ="video/webm" />
<source src ="http://html5demos.com/assets/dizzy.ogv" type ="video/ogv" />
<track label ="English" kind ="subtitles" srclang ="en" src ="http://www.iandevlin.com/html5test/webvtt/upc-video-subtitles-en.vtt" default >
video >
The Indeterminate-value Pseudo-class——:indeterminate
在 radio
和 checkbox
元素上一般有两种状态——选中
和 未选中
,但是有的时候的状态会是不确定状态,而:indeterminate
就是匹配这种不确定状态的 radio
或 checkbox
。
:indeterminate + label {
background-color : gray ;
}
<input type ="radio" name ="name" id ="test" >
<label for ="test" > 未确定状态label >
通常地,radio
和 checkbox
在没有声明选中状态时,默认只有两种可能性:checked
和 unchecked
,为了让他们出现第三种状态,我们可以借助 JS 来控制:
document .querySelector('#test' ).indeterminate = true ;
上面例子的
在
处于 indeterminate state
的时候,文字将会变为灰色。
The default-option pseudo-class——:default
:default
匹配一组相似元素集合中的默认元素,例如
中有多个
,其中有一个是
,那么该元素将会被匹配。此外还有
也有默认元素。
.default .default-form :default {
background-color : gray ;
}
<div class ="default" >
<form class ="default-form" action ="#" method ="get" >
<input type ="submit" name ="name" value ="submit" >
<input type ="reset" name ="name" value ="reset" >
form >
div >
The validity pseudo-classes——:valid, :invalid
在
中,如果我们输入了 abc123
,那么此时 :invalid
将会匹配该元素,假如我们输入abc123@163.com
,那么此时 :valid
将会匹配该元素。这里要注意假如我们没有为
作约束,例如
,那么它的任意输入将使元素既不会被 :valid
匹配,也不会被 :invalid
匹配。
.valid input :valid {
color : green ;
}
.valid input :invalid {
color : red ;
}
<div class ="valid" >
<input type ="email" name ="eamil_valid" value ="abc@abc.com" >
<input type ="email" name ="email_invalid" value ="abc" >
div >
The range pseudo-classes——:in-range, :out-of-range
:in-range
和 :out-of-range
只对有被条件约束的元素起作用,例如
,如果输入数字小于 1,那么将会被 :out-of-range
匹配,反之则是被 :in-range
匹配。在很多时候,我们需要对“脏值”做一个高亮的显示,以前可能需要配合 JS 对值的边界进行检测,然后在对元素的样式进行修改。而现在,有了这两个伪类的存在,我们可以完全使用 CSS 来控制。
.range input :in-range {
color : green ;
}
.range input :out-of-range {
color : red ;
}
<div class ="range" >
<input type ="number" name ="range" value ="1" min ="1" max ="10" >
div >
The optionality pseudo-classes——:required, :optional
:required
和 :optional
分别匹配带有 required
标识的元素和不带 required
标识的元素。同样地,我们可以利用这两个伪类来对需要填写的元素添加特定的样式。
.optionality input :required {
color : green ;
}
.optionality input :optional {
color : red ;
}
<div class ="optionality" >
<input type ="text" name ="required" value ="required" required >
<input type ="text" name ="optional" value ="optional" >
div >
The user-interaction pseudo-class——:user-error
:user-error
会匹配 :invalid
, :out-of-range
和没有任何值的 :required
元素,但是假如是初始化时就触发这三种错误,user-error
将不会匹配该元素,只有当用户和元素进行交互或者提交了该表单并且触发了这三种错误,:user-error
才会被触发。Chrome 和 Safari 可能尚未支持,所以无法验证正确性。
.user-error input :user-error {
color : red ;
}
.user-error input :valid {
color : green ;
}
<div class ="user-error" >
<input type ="email" name ="eamil_valid" value ="abc@abc.com" >
<input type ="email" name ="email_invalid" value ="abc" >
div >
The mutability pseudo-classes——:read-only, :read-write
:read-only
匹配不可被编辑的元素,:read-write
则匹配可被编辑的元素,例如
或者 contenteditable="true"
的元素。:-moz-read-only
和 :-moz-read-write
分别是他们的兼容性写法。
.mutability :read-only {
color : red ;
}
.mutability :read-write {
color : green ;
}
<div class ="mutability" >
<input type ="text" name ="read-write-input" value ="read-write" >
<p contenteditable ="true" > read-write-paragraphp >
<p > read-only-paragraphp >
div >
The placeholder-shown pseudo-class——:placeholder-shown
:placeholder-shown
匹配 placeholder
文字显示时的
元素。::-webkit-input-placeholder
,::-moz-placeholder
, :-ms-input-placeholder
分别是它在不同浏览器的兼容性写法。在此之前,原生的 placeholder 文字是没有方法去改变其颜色的,大多数做法是使用 value 来代替 placeholder,同时利用 JS 对 input 的 focus 事件进行监听,将 value 清空,从而达到一个模仿 placeholder 的效果。
.placeholder input :placeholder-shown {
color : green ;
}
.placeholder input ::-webkit-input-placeholder {
color : green ;
}
.placeholder input ::-moz-placeholder {
color : green ;
}
.placeholder input :-ms-input-placeholder {
color : green ;
}
<div class ="placeholder" >
<input type ="text" name ="placeholder" placeholder ="placeholder is green" >
div >
Grid-Structural Selectors
该特性将对例如 的栅格布局起作用。它包含 :column(selector)
, :nth-column(n)
和 :nth-last-column(n)
。目前浏览器都还未支持,无法实验正确性。这些伪类将让栅格布局的样式控制变得更为简单,不过更多的试验要等到浏览器支持才能一一试验。
:column(selector)
:column(selector)
将匹配例如 中 带有 selector
类名的那一列的所有元素。
:column( .selected ) {
color : green ;
}
<table >
<col class ="selected" />
<col class ="blur" />
<col class ="blur" />
<tr >
<td > Atd >
<td > Btd >
<td > Ctd >
tr >
<tr >
<td > Dtd >
<td > Etd >
<td > Ftd >
tr >
<tr >
<td > Gtd >
<td > Htd >
<td > Itd >
tr >
table >
在上面的例子中,A、D、G 都将是绿色的。
:nth-column(n) 和 :nth-last-column(n)
:nth-column(n)
匹配括号内 n
的计算值的某一列的元素,计算方式是从头开始计算,而 :nth-last-column(n)
则是从后开始计算。
:nth-column(2n) {
color : red ;
}
:nth-last-column(3n) {
color : green ;
}
<table >
<col class ="selected" />
<col class ="blur" />
<col class ="blur" />
<tr >
<td > Atd >
<td > Btd >
<td > Ctd >
tr >
<tr >
<td > Dtd >
<td > Etd >
<td > Ftd >
tr >
<tr >
<td > Gtd >
<td > Htd >
<td > Itd >
tr >
table >
Tree-Structural pseudo-classes——:blank
Tree-Structural pseudo-classes 是 CSS3 中的规范,但在 CSS Selectors Level 4 中加入了 :blank
,它和 :empty
类似,区别在于 :empty
只能匹配没有任何内容的元素,而 :blank
可以匹配带有 spaces(空格)
, tabs(缩进符)
和segment breaks(段落过段)
内容的元素。
Combinators——>>
A >> B
匹配祖先元素为 A 的 B元素,其用法与 A B
一样,与 >
, +
, ~
用意一样,不过意义不同。
上面的特性都已经存在 Working Draft 中,还有一些 Editor’s Draft 的特性,也顺带一提。
The Relational Pseudo-class——:has()
:has(selector)
匹配含有 某些规则
的元素。
下面例子将匹配含有 img 子元素的 a 元素:
a :has( > img )
dt :has(+ dt )
下面例子将匹配不含有 h1、h2、h3、h4、h5、h6 元素的 section 元素:
section :not( :has(h1 , h2 , h3 , h4 , h5 , h6 ))
和上面例子不同,下面交换了两个伪类的嵌套,表示匹配含有的不是 h1、h2、h3、h4、h5、h6 子元素的元素,区别在于这种写法要求必须含有一个子元素,而上面的写法可以不含有子元素也会被匹配:
section :has( :not(h1 , h2 , h3 , h4 , h5 , h6 ))
The Drag-and-Drop Pseudo-class——:drop, :drop()
:drop
和 :drop()
匹配可被放置拖动元素的目标元素,两者区别在于 :drop()
可以匹配一些规则,包括 active
, valid
,invalid
。active
会匹配可被放置的目标元素,valid
匹配放置的元素为合法元素的目标元素,invalid
反之。如果:drop()
括号里没有任何过滤,那么将和 :drop
没有区别。
最后
文章介绍了目前 CSS Selectors Level 4 的一些新的特性,我们看到 CSS 正在逐渐将以前需要依赖 JS 做到的事情转化为 CSS 自身能够处理的过程,这个将大大降低了 CSS 和 JS 之间的代码耦合,从而也降低了项目迭代过程中的维护成本。从 1996 年发表的 CSS1 规范至今已经过去了 20年,从浏览器厂商的各自为战到现在各个浏览器厂商遵守规范进行 CSS 新特性的开发,可以说现在前端因为浏览器兼容性的原因所造成的开发成本已经不如以前了,当然,现在还存在许多需要与 IE8+ 打交道的网站,但是这个比例已经大大降低了。还有新的挑战来源于手机端 Web 的兴起,手机的性能远远不及 PC 的性能,而国内手机浏览器内核的百花齐放又再一次让兼容性这个严峻的问题摆在了前端开发者眼前,开发者们可以在开源社区中寻找各种 polyfill 来消除这种差异,也可以利用各种 CSS hack 来解决不同浏览器的兼容性,但是不可避免地会对性能造成影响。
其实说到了 CSS,不得不说与 CSS 密不可分的 JavaScript,JavaScript 自从 ES6 的发表,解决了 JavaScript 某些方面多年来混乱的局面,EcmaScript 的版本更新频率也变得勤快了起来。在 ES6 中我们可以看到的是其解决很多 ES5 上存在的问题,例如异步事件处理,其新增了许多方法我们都发现 JQuery、underscore 等知名库的影子,所以说,开发者的热情是推动规范的不可或缺的中坚力量。规范的制定不再是一言堂,开发者们也有了说话和建议的余地。
无论如何,相信在各大厂商的和 W3C 工作组的推动下,未来不管在 CSS 还是 JavaScript 上,将会逐渐走向规范上的统一,让我们拭目以待吧!
你可能感兴趣的:(Web前端——html+css,web前端复习+面试)
Swift面试题2025(附答案)
Skinny Camel
swift Swift面试题 iOS面试题 Xcode iOS开发
1、如下Swift的代码的输出结果是什么?请说明理由。vararr1=["1","2","3"]vararr2=arr1arr2.append("4")print(arr1)答:输出结果是:1,2,3此处考察的是Swift和OC中数组数据类型的区别(值类型与引用类型),因为在Swift中数组是值类型,所以当值类型赋值给变量时,它会创建一个新的数组赋值给arr2。2、如下Swift代码运行会不会报错
Swift - 基础面试题
赑屃王者
面试题 swift 面试
面试题目录一、类和结构体的区别是什么二、写时拷贝机制三、模式匹配四、协议五、泛型六、运算符、下标、字面量协议、尾随闭包七、Optional、变量常量、类型检查、扩展八、函数式编程九、响应式编程十、swift和OC的区别?一、类和结构体的区别是什么类是引用类型,结构体是值类型,拷贝赋值时,结构体是值拷贝,对象赋值时指针拷贝。结构体保存在栈区,类对象保存在堆区,类对象指针一般在栈区,指向堆区的对象。结
[AI笔记]-Word2Vec面试考点
Micheal超
AI笔记 人工智能 笔记 word2vec
✅一、基础认知类什么是Word2Vec?它的基本思想是什么?关键词:将词语转换为向量表示;捕捉语义关系;基于上下文预测Word2Vec与One-hot编码的区别?关键词:维度灾难(维度过高,存储空间大)、高稀疏性、语义表达能力(没有距离概念,无法计算相似度)、内积关系Word2Vec的两种模型是什么?它们有何区别?答案:Word2Vec的重要假设:文本中离得越近的词语相似度越高。主要有:CBOW(
GO泛型编程面试题及参考答案
大模型大数据攻城狮
go golang go泛型 go语法 go面试 go面经 go编译器
目录什么是Go中的泛型?Go从哪个版本开始支持泛型?在Go中如何定义一个带类型参数的函数?如何为结构体添加类型参数?使用any关键字和自定义类型约束有什么区别?泛型中~T的语义及其实际应用是什么?如何在函数中使用多个类型参数?举例说明。Go泛型支持变长参数(variadic)吗?如何结合使用?什么是约束(constraint)?如何定义一个自定义约束?在泛型中如何使用接口类型作为约束?compar
I2C子系统面试指南:基础原理、经典问答与答题技巧全解析
嵌入式Jerry
Linux+内核 面试 职场和发展 linux 服务器 运维 单片机 java
I2C子系统面试指南:基础原理、经典问答与答题技巧全解析关于本篇博文,B站视屏讲解链接,点击进入深度学习一、引言:为什么要深入掌握I2C子系统?在嵌入式、驱动开发、BSP移植、甚至AIoT行业,I2C几乎是绕不开的“基础功”。不管你是应聘Linux驱动开发、嵌入式软件工程师、SoC底层支持,还是BSP/系统调试,I2C的核心架构和调试经验都是面试高频关注点。掌握I2C子系统,关键不止是能写驱动,更
鸿蒙(影音娱乐类)APP开发——在线短视频流畅切换
CTrup
HarmonyOS 鸿蒙开发 移动开发 harmonyos 娱乐 音视频 移动开发 鸿蒙开发 组件化 ArkUI
往期推文全新看点鸿蒙(HarmonyOS)北向开发知识点记录~鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~对于大前端开发来说,转鸿蒙开发究竟是福还是祸?鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中……简介为了帮助开发者解决在应用中在线短视频快速
SQL SELECT语句的基本用法
Mnioc
学习 SQL
SQLSELECT语句的基本用法表S有三个字段:学生学号Sno,课程号Cno,成绩score。求每个学生的总分。这是一个很简单的问题,这篇博客就是源于这个问题,博主是一个大三即将入坑的菜鸟,进入公司实习的第一天,就被几个SQL查询问题难倒了。通过这篇文章复习一下数据库基本的SELECT语句,仅供参考,如有错误或不当之处还望大神们告知。这里使用的是SQLFiddle,一款在线的SQL语句练习网站链接
面试150 旋转图像
Alfred king
面试150题目 面试 leetcode 数组
思路解包法。zip函数可以使矩阵转置,本题需要对矩阵先反转在转置。因此联想到zip是一种很简便的方法classSolution:defrotate(self,matrix:List[List[int]])->None:"""Donotreturnanything,modifymatrixin-placeinstead."""matrix[:]=zip(*matrix[::-1])
高性能 List 转 Map 解决方案(10,000 元素)
快乐肚皮
list 数据结构 java
文章目录前言一、问题背景:为什么List转Map如此重要?二、基础方法对比:StreamvsFor循环三、性能优化关键点四、面试回答技巧前言遇到一个有意思的面试题,如标题所说,当10,000条数据的List需要转Map,如何完成高性能的转换,本文将深入探讨这个问题。一、问题背景:为什么List转Map如此重要?在Java开发中,List转Map是最常见的集合操作之一://常见场景ListuserL
Leetcode-423. Reconstruct Original Digits from English
K_W
算法 java leetcode 算法
前言:为了后续的实习面试,开始疯狂刷题,非常欢迎志同道合的朋友一起交流。因为时间比较紧张,目前的规划是先过一遍,写出能想到的最优算法,第二遍再考虑最优或者较优的方法。如有错误欢迎指正。博主首发CSDN,mcf171专栏。博客链接:mcf171的博客——————————————————————————————Givenanon-emptystringcontaininganout-of-orderE
测试面试必备:如何在 JMeter 中添加 Cookie
二进制11
# JMeter面试题 面试 软件测试 自动化测试 接口测试 测试工具 JMeter
JMeter面试题-如何在JMeter中添加Cookie?Cookie在性能测试中的重要性Cookie是Web应用程序中用于维持会话状态的重要机制。在性能测试中,正确处理Cookie对于模拟真实用户行为至关重要。JMeter提供了多种方式来管理Cookie,确保测试脚本能够像真实浏览器一样工作。是否开始测试需要Cookie?添加Cookie管理器直接发送请求发送带Cookie的请求服务器响应结束J
【大模型面试必备】130道大模型问题深度解析,附详细答案,非常详细收藏这一篇就够了!
大模型学习
大模型 架构 数据库 langchain 人工智能 面试
Attention1、讲讲对Attention的理解?Attention机制是一种在处理时序相关问题的时候常用的技术,*主要用于处理序列数据。*核心思想:在处理序列数据时,网络应该更关注输入中的重要部分,而忽略不重要的部分,它通过学习不同部分的权重,将输入的序列中的重要部分显式地加权,从而使得模型可以更好地关注与输出有关的信息。在序列建模任务中,比如机器翻译、文本摘要、语言理解等,输入序列的不同部
数据库设计体系化知识(后端+前端+AI+三高场景+大厂面试+简历包装)
@一叶之秋
Java架构师学习路线 数据库 前端 人工智能 java
数据库设计体系化知识(AI融合版:后端+前端+AI+三高场景+大厂面试+简历包装)一、数据库设计基础:范式理论+AI辅助建模1.核心知识(AI赋能表结构设计)(1)三大范式+AI校验规则落地:用AI代码生成工具(如Copilot)自动校验表结构是否符合范式。→示例:输入“设计学生-班级表”,AI生成符合3NF的表结构,并标注冗余字段风险。后端协同:Java后端通过SchemaValidator工具
缓存设计体系化知识(结合大厂面试+实战案例+简历包装)
@一叶之秋
Java架构师学习路线 缓存 面试 spring 简历包装 实战案例 缓存设计体系化
缓存设计体系化知识(结合大厂面试+实战案例+简历包装)一、缓存基础设计:键、值、更新策略1.核心知识(1)缓存键设计原则:分层命名(业务:模块:ID)、唯一、可读、避免过长(≤1024字节)案例:电商商品缓存键product:{id}:detail(分层清晰,支持按商品ID快速查询)进阶:动态键(如user:{id}:orders:{date}支持时间范围查询)(2)缓存值设计序列化:优先选Pro
DevOps 完整资料与面试突击图谱
@一叶之秋
Java架构师学习路线 devops 面试 运维
DevOps完整资料与面试突击图谱一、DevOps核心概念1.DevOps的目标与价值DevOps是开发(Development)与运维(Operations)之间的协作方法,旨在通过持续的集成与部署(CI/CD)来提高软件开发和运维的效率。目标:提高软件交付速度:通过自动化构建、测试、部署。提升系统稳定性:通过持续监控、日志追踪、自动化回滚等保障系统高可用。增强团队协作:开发、运维、测试、运维团
前端面试题整理-场景设计题
C_greenbird
前端学习 前端 javascript css
1.如何使用css画一个三角形借助border实现,在width和height都为0时,设置border,便会呈现三角形。想要哪个方向的三角形,设置其他三边为透明即可。同时,可以通过调整不同边的宽度,来调整三角形的高度和宽度。三角符号/*记忆口诀:盒子宽高均为零,三面边框皆透明。*/div:after{position:absolute;width:0;height:0;content:"";bo
微信小程序|流浪动物救助小程序的设计与实现
qq_469603589
微信小程序 小程序 微信小程序
作者主页:编程指南针作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路关注作者有好处文末获取源码项目编号:L-BS-XZBS-30一,环境介绍语言环境:Java:jdk1
面试题 防抖和节流
摆烂波比
javascript 前端 面试
防抖和节流前言防抖手写防抖节流手写节流防抖和节流的区别前言防抖和节流是一个常问的面试题我也不指名道姓了,不同于某些jsonp防抖和节流在实际开发者对性能的优化和对用户体验的升级都有作用所以我们很有必要掌握话不多说开始正文防抖函数防抖,就是指触发事件后,函数在n秒后只能执行一次,如果在n秒内又触发了事件,则会重新计算函数的执行时间。简单的说就是一段时间只执行一次这样就能够保证用户在频繁触发某些事件的
[ vulhub漏洞复现篇 ] Drupal XSS漏洞 (CVE-2019-6341)
寒蝉听雨[原ID_PowerShell]
[ 靶场实战 ] vulhub vulhub漏洞复现 Drupal XSS漏洞 CVE-2019-6341 渗透测试 网络安全
博主介绍博主介绍:大家好,我是_PowerShell,很高兴认识大家~✨主攻领域:【渗透领域】【数据通信】【通讯安全】【web安全】【面试分析】点赞➕评论➕收藏==养成习惯(一键三连)欢迎关注一起学习一起讨论⭐️一起进步文末有彩蛋作者水平有限,欢迎各位大佬指点,相互学习进步!文章目录博主介绍一、漏洞编号二、影响范围三、漏洞描述四、环境搭建1、进入CVE-2019-6341环境2、启动CVE-20
【手写前端面试题01】防抖和节流
全栈前端老曹
javascript 前端 javascript 学习 防抖 节流
《手写防抖和节流:从“打工人”到“时间管理大师”》一、本质理解(别被术语吓到)防抖(debounce)是什么?玩游戏看60秒广告只需要完整看一次就行了,退出去一次重新60秒,别一直退✅核心思想:在事件被触发后,等待一段时间,如果这段时间内没有再次触发,才执行。节流(throttle)又是什么?闪现CD:不管多急,都要等冷却好才能再次使用✅核心思想:多次触发→只按固定频率执行,在一定时间内只允许执行
[面试] 手写题-eventBus
533_
# 面试 javascript
EventBus本质上是一个发布-订阅模式。它的作用是:订阅事件(on):存储回调函数,等待事件触发。触发事件(emit):当事件发生时,执行所有订阅的回调函数。取消订阅(off):移除指定的回调函数。只触发一次(once):回调函数执行一次后自动移除。//定义EventBus事件总线类classEventBus{constructor(){//设置类实例的初始状态//存储所有事件及其对应的回调函
[面试]手写题-Promise.all() Promise.race()
533_
# 面试 面试
Promise.all()接收一个Promise数组,数组中如有非Promise项,则此项当做成功如果所有Promise都成功,则返回成功结果数组如果有一个Promise失败,则返回这个失败结果staticall(promises){constresult=[];//创建一个空数组用于存储每个Promise的结果letcount=0;//返回一个新的MyPromise实例returnnewMyPr
大学专业科普 | 计算机应用、视觉与算法
鸭鸭鸭进京赶烤
计算机应用
一、专业概述计算机应用专业是一门实践性很强的学科,专注于将计算机技术转化为实际应用,服务于各个行业和领域,为社会的数字化转型提供人才支撑。二、课程设置专业基础课程:包括计算机组成原理、操作系统、数据结构、计算机网络等,为学生构建坚实的理论基础。专业核心课程:聚焦于程序设计语言(如C、C++、Java、Python等)、数据库原理与应用、软件工程、Web前端开发等,使学生具备开发各类软件系统的能力。
JS面试题---什么是节流和防抖?怎样手写一个自己的节流和防抖工具函数
如何理解节流和防抖,如何手写一、概念二、手写实现三、使用场景四、区别与联系联系区别技术背景:相信以下场景你都不陌生多次点击按钮导致页面失去响应或者出现意外情况。如何实现搜索联想功能以及各企业邮箱提示功能。页面滚动、输入框输入以及窗口尺寸变化频繁触发事件。手机号、邮箱格式的实时校验…为了解决或者实现这类场景,优化性能和改善用户体验。衍生出了一种技术,防抖(debouce)和节流(throttle)一
2025年6月28和29日复习和预习(C++)
子豪-中国机器人
算法 java 数据结构 c++
学习笔记大纲一、预习部分:数组基础(一)核心知识点数组的创建:掌握一维数组的声明方式,如intarr[5];(创建一个包含5个整数的数组)。重点在于理解数组长度需为常量,且在声明时确定。数组的初始化:学会为数组赋值,例如intarr[]={1,2,3};,可省略数组长度,编译器根据初始化值自动确定。数组元素的访问:通过索引访问数组元素,索引从0开始,如arr[1]表示访问数组arr的第二个元素。(
搞笑Java工程师面试:从基础到高并发,大厂技术总监直击水货本质
搞Java的小码农
Java技术场景题 Java 面试 技术 高并发 微服务 分布式 Redis
搞笑Java工程师面试:从基础到高并发,大厂技术总监直击水货本质场景设定在一个位于硅谷某栋现代化办公楼的会议室里,气氛庄重而专业。面试官李工是一位经验丰富的技术总监,他身穿整洁的西装,神情严肃,手中拿着一份详尽的面试提纲。对面的求职者小兰则显得自信满满,穿着时尚,带着一点漫不经心的神情,准备接受这场“挑战”。第1轮:Java核心、基础框架与数据库问题1:Java中的ConcurrentHashMa
2025年 Java 面试八股文(20w字)
持续学习多模态大模型
java
目录第一章-Java基础篇1、你是怎样理解OOP面向对象???难度系数:?2、重载与重写区别???难度系数:?3、接口与抽象类的区别???难度系数:?4、深拷贝与浅拷贝的理解???难度系数:?5、sleep和wait区别???难度系数:?6、什么是自动拆装箱?int和Integer有什么区别???难度系数:?7、==和equals区别???难度系数:?8、String能被继承吗为什么用final修
Java 程序员必备的 26 个 Linux 命令,常用 + 面试两手抓
库库林_沙琪马
Linux linux 面试 运维
有人问我:日常开发中最常用的Linux命令有哪些?我不假思索地就列出了26个,涵盖开发、调试、运维场景,每一个都值得收藏+实战。内容速览26个高频Linux命令详解面试官常问的重点命令实操建议&学习指引一、开发者高频使用的26个Linux命令1️⃣cd-切换目录cd/usr/local/bincd..cd~Tips:~表示当前用户主目录,..表示上级目录。2️⃣mkdir-创建目录mkdirmyd
2023年JAVA面试题【Redis/Elasticsearch】
GJH-JAVA
java redis elasticsearch
1.什么是Redis?Redis是一个使用C语言写成的,开源的高性能key-value非关系缓存数据库。它支持存储的value类型相对更多,包括string(字符串)、list(链表)、set(集合)、zset(sortedset--有序集合)和hash(哈希类型)。Redis的数据都基于缓存的,所以很快,每秒可以处理超过10万次读写操作,是已知性能最快的Key-ValueDB。Redis也可以实
25年银行行业java后端常问高频面试题
小凡敲代码
java java后端 java面试 Java面试题 互联网大厂 Java八股文 后端开发
一、技术八股文高频题(银行侧重点)1.Java基础&并发编程HashMap在JDK1.8中的优化?ConcurrentHashMap如何保证线程安全?银行系统对线程安全要求极高,需深入理解CAS+synchronized的实现细节。synchronized和ReentrantLock的区别?银行系统更推荐哪种?银行系统倾向ReentrantLock(可中断、公平锁),需解释AQS原理。Thread
rust的指针作为函数返回值是直接传递,还是先销毁后创建?
wudixiaotie
返回值
这是我自己想到的问题,结果去知呼提问,还没等别人回答, 我自己就想到方法实验了。。
fn main() {
let mut a = 34;
println!("a's addr:{:p}", &a);
let p = &mut a;
println!("p's addr:{:p}", &a
java编程思想 -- 数据的初始化
百合不是茶
java 数据的初始化
1.使用构造器确保数据初始化
/*
*在ReckInitDemo类中创建Reck的对象
*/
public class ReckInitDemo {
public static void main(String[] args) {
//创建Reck对象
new Reck();
}
}
[航天与宇宙]为什么发射和回收航天器有档期
comsci
地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...
所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行
&
linux下批量替换文件内容
商人shang
linux 替换
1、网络上现成的资料
格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径`
linux sed 批量替换多个文件中的字符串
sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir`
例如:替换/home下所有文件中的www.admi
网页在线天气预报
oloz
天气预报
网页在线调用天气预报
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
SpringMVC和Struts2比较
杨白白
springMVC
1. 入口
spring mvc的入口是servlet,而struts2是filter(这里要指出,filter和servlet是不同的。以前认为filter是servlet的一种特殊),这样就导致了二者的机制不同,这里就牵涉到servlet和filter的区别了。
参见:http://blog.csdn.net/zs15932616453/article/details/8832343
2
refuse copy, lazy girl!
小桔子
copy
妹妹坐船头啊啊啊啊!都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料,结果查到了人家写得完完整整的。我清楚的认识到:
1.那是我自己觉得写不出的高度
2.如果直接拿来用,很快就能解决问题
3.然后就是抄咩~~
4.肿么可以这样子,都不想写了今儿个,留着作参考吧!拒绝大抄特抄,慢慢一点点写!
apache与php整合
aichenglong
php apache web
一 apache web服务器
1 apeche web服务器的安装
1)下载Apache web服务器
2)配置域名(如果需要使用要在DNS上注册)
3)测试安装访问http://localhost/验证是否安装成功
2 apache管理
1)service.msc进行图形化管理
2)命令管理,配
Maven常用内置变量
AILIKES
maven
Built-in properties
${basedir} represents the directory containing pom.xml
${version} equivalent to ${project.version} (deprecated: ${pom.version})
Pom/Project properties
Al
java的类和对象
百合不是茶
JAVA面向对象 类 对象
java中的类:
java是面向对象的语言,解决问题的核心就是将问题看成是一个类,使用类来解决
java使用 class 类名 来创建类 ,在Java中类名要求和构造方法,Java的文件名是一样的
创建一个A类:
class A{
}
java中的类:将某两个事物有联系的属性包装在一个类中,再通
JS控制页面输入框为只读
bijian1013
JavaScript
在WEB应用开发当中,增、删除、改、查功能必不可少,为了减少以后维护的工作量,我们一般都只做一份页面,通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来,实际上就是查看的过程,唯一的区别是修改时,页面上所有的信息能修改,而查看页面上的信息不能修改。因此完全可以将其合并,但通过前端JS将查看页面的所有信息控制为只读,在信息量非常大时,就比较麻烦。
AngularJS与服务器交互
bijian1013
JavaScript AngularJS $http
对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码,最后处理服务端的响应。整个过程示例如下:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange
[Maven学习笔记八]Maven常用插件应用
bit1129
maven
常用插件及其用法位于:http://maven.apache.org/plugins/
1. Jetty server plugin
2. Dependency copy plugin
3. Surefire Test plugin
4. Uber jar plugin
1. Jetty Pl
【Hive六】Hive用户自定义函数(UDF)
bit1129
自定义函数
1. 什么是Hive UDF
Hive是基于Hadoop中的MapReduce,提供HQL查询的数据仓库。Hive是一个很开放的系统,很多内容都支持用户定制,包括:
文件格式:Text File,Sequence File
内存中的数据格式: Java Integer/String, Hadoop IntWritable/Text
用户提供的 map/reduce 脚本:不管什么
杀掉nginx进程后丢失nginx.pid,如何重新启动nginx
ronin47
nginx 重启 pid丢失
nginx进程被意外关闭,使用nginx -s reload重启时报如下错误:nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了,下一次再开启nginx -s reload时无法启动解决办法:nginx -s reload 只是用来告诉运行中的ng
UI设计中我们为什么需要设计动效
brotherlamp
UI ui教程 ui视频 ui资料 ui自学
随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的UI设计师们也开始投身动效设计领域。
但是说到底,我们到底为什么需要动效设计?或者说我们到底需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计。
一、加强体验舒适度
嗯,就是让用户更加爽更加爽的用你的产品。
Spring中JdbcDaoSupport的DataSource注入问题
bylijinnan
java spring
参考以下两篇文章:
http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/
http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration
Sprin
数据库连接池的工作原理
chicony
数据库连接池
随着信息技术的高速发展与广泛应用,数据库技术在信息技术领域中的位置越来越重要,尤其是网络应用和电子商务的迅速发展,都需要数据库技术支持动 态Web站点的运行,而传统的开发模式是:首先在主程序(如Servlet、Beans)中建立数据库连接;然后进行SQL操作,对数据库中的对象进行查 询、修改和删除等操作;最后断开数据库连接。使用这种开发模式,对
java 关键字
CrazyMizzz
java
关键字是事先定义的,有特别意义的标识符,有时又叫保留字。对于保留字,用户只能按照系统规定的方式使用,不能自行定义。
Java中的关键字按功能主要可以分为以下几类:
(1)访问修饰符
public,private,protected
p
Hive中的排序语法
daizj
排序 hive order by DISTRIBUTE BY sort by
Hive中的排序语法 2014.06.22 ORDER BY
hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序,这意味着所有的数据会传送到一个Reduce任务上,这样会导致在大数量的情况下,花费大量时间。
与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下,必须指定 limit 否则执行会报错。
单态设计模式
dcj3sjt126com
设计模式
单例模式(Singleton)用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后,该对象可以被其它众多对象所使用。
<?phpclass Example{ // 保存类实例在此属性中 private static&
svn locked
dcj3sjt126com
Lock
post-commit hook failed (exit code 1) with output:
svn: E155004: Working copy 'D:\xx\xxx' locked
svn: E200031: sqlite: attempt to write a readonly database
svn: E200031: sqlite: attempt to write a
ARM寄存器学习
e200702084
数据结构 C++ c C# F#
无论是学习哪一种处理器,首先需要明确的就是这种处理器的寄存器以及工作模式。
ARM有37个寄存器,其中31个通用寄存器,6个状态寄存器。
1、不分组寄存器(R0-R7)
不分组也就是说说,在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时,由于不同的处理器模式使用一个名字相同的物理寄存器,就是
常用编码资料
gengzg
编码
List<UserInfo> list=GetUserS.GetUserList(11);
String json=JSON.toJSONString(list);
HashMap<Object,Object> hs=new HashMap<Object, Object>();
for(int i=0;i<10;i++)
{
进程 vs. 线程
hongtoushizi
线程 linux 进程
我们介绍了多进程和多线程,这是实现多任务最常用的两种方式。现在,我们来讨论一下这两种方式的优缺点。
首先,要实现多任务,通常我们会设计Master-Worker模式,Master负责分配任务,Worker负责执行任务,因此,多任务环境下,通常是一个Master,多个Worker。
如果用多进程实现Master-Worker,主进程就是Master,其他进程就是Worker。
如果用多线程实现
Linux定时Job:crontab -e 与 /etc/crontab 的区别
Josh_Persistence
linux crontab
一、linux中的crotab中的指定的时间只有5个部分:* * * * *
分别表示:分钟,小时,日,月,星期,具体说来:
第一段 代表分钟 0—59
第二段 代表小时 0—23
第三段 代表日期 1—31
第四段 代表月份 1—12
第五段 代表星期几,0代表星期日 0—6
如:
*/1 * * * * 每分钟执行一次。
*
KMP算法详解
hm4123660
数据结构 C++ 算法 字符串 KMP
字符串模式匹配我们相信大家都有遇过,然而我们也习惯用简单匹配法(即Brute-Force算法),其基本思路就是一个个逐一对比下去,这也是我们大家熟知的方法,然而这种算法的效率并不高,但利于理解。
假设主串s="ababcabcacbab",模式串为t="
枚举类型的单例模式
zhb8015
单例模式
E.编写一个包含单个元素的枚举类型[极推荐]。代码如下:
public enum MaYun {himself; //定义一个枚举的元素,就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候:/** himself = MaYun() {*
Kafka+Storm+HDFS
ssydxa219
storm
cd /myhome/usr/stormbin/storm nimbus &bin/storm supervisor &bin/storm ui &Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
Java获取本地服务器的IP
中华好儿孙
java Web 获取服务器ip地址
System.out.println("getRequestURL:"+request.getRequestURL());
System.out.println("getLocalAddr:"+request.getLocalAddr());
System.out.println("getLocalPort:&quo