前言
当看到 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前端复习+面试)
C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以添加戳这里获取一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!intmain(){vectormyvec{3,
PyTorch & TensorFlow速成复习:从基础语法到模型部署实战(附FPGA移植衔接)
阿牛的药铺
算法移植部署 pytorch tensorflow fpga开发
PyTorch&TensorFlow速成复习:从基础语法到模型部署实战(附FPGA移植衔接)引言:为什么算法移植工程师必须掌握框架基础?针对光学类产品算法FPGA移植岗位需求(如可见光/红外图像处理),深度学习框架是算法落地的"桥梁"——既要用PyTorch/TensorFlow验证算法可行性,又要将训练好的模型(如CNN、目标检测)转换为FPGA可部署的格式(ONNX、TFLite)。本文采用"
Java大厂面试实录:谢飞机的电商场景技术问答(Spring Cloud、MyBatis、Redis、Kafka、AI等)
Java大厂面试实录:谢飞机的电商场景技术问答(SpringCloud、MyBatis、Redis、Kafka、AI等)本文模拟知名互联网大厂Java后端岗位面试流程,以电商业务为主线,由严肃面试官与“水货”程序员谢飞机展开有趣的对话,涵盖SpringCloud、MyBatis、Redis、Kafka、SpringSecurity、AI等热门技术栈,并附详细解析,助力求职者备战大厂面试。故事设定谢
Java大厂面试故事:谢飞机的互联网音视频场景技术面试全纪录(Spring Boot、MyBatis、Kafka、Redis、AI等)
来旺
Java场景面试宝典 Java Spring Boot MyBatis Kafka Redis 微服务 AI
Java大厂面试故事:谢飞机的互联网音视频场景技术面试全纪录(SpringBoot、MyBatis、Kafka、Redis、AI等)互联网大厂技术面试不仅考察技术深度,更注重业务场景与系统设计能力。本篇以严肃面试官与“水货”程序员谢飞机的对话,带你体验音视频业务场景下的Java面试全过程,涵盖主流技术栈,并附详细答案解析,助你面试无忧。故事场景设定谢飞机是一名有趣但技术基础略显薄弱的程序员,这次应
Shader面试题100道之(81-100)
还是大剑师兰特
# Shader 综合教程100+ 大剑师 shader面试题 shader教程
Shader面试题(第81-100题)以下是第81到第100道Shader相关的面试题及答案:81.Unity中如何实现屏幕空间的热扭曲效果(HeatDistortion)?热扭曲效果可以通过GrabPass抓取当前屏幕图像,然后在片段着色器中使用噪声或动态UV偏移模拟空气扰动,再结合一个透明通道控制扭曲强度来实现。82.Shader中如何实现物体轮廓高亮(OutlineHighlight)?轮廓
Java三年经验程序员技术栈全景指南:从前端到架构,对标阿里美团全栈要求
可曾去过倒悬山
java 前端 架构
Java三年经验程序员技术栈全景指南:从前端到架构,对标阿里美团全栈要求三年经验是Java程序员的分水岭,技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求,为你绘制可落地的进阶路线。一、Java核心:从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解,大厂面试常考以下能力:JVM与性能调优内存模型(堆外内存、元空间)、GC算法(G1/ZGC适用场
无面试无offer? 你需要AI 求职co-pilot的帮助!
大家好啊,我写的开源免费求职AIco-pilot工具发布了v3.0.0,欢迎大家参与、使用!https://github.com/weicanie/prisma-ai一、项目介绍开源免费的求职co-pilot,自动化简历准备至offer到手的整个流程。优化您的项目、定制您的简历、为您匹配工作,并帮助您做好面试准备。二、核心价值prisma-ai旨在解决求职者在准备简历和寻找工作时最头疼的3个问题:
OkHttp3源码解析--设计模式,android开发实习面试题
this.cache=builder.cache;}//构造者publicstaticfinalclassBuilder{Cachecache;…//构造cache属性值publicBuildercache(@NullableCachecache){this.cache=cache;returnthis;}//在build方法中真正创建OkHttpClient对象,并传入前面构造的属性值publi
《Java前端开发全栈指南:从Servlet到现代框架实战》
前言在当今Web开发领域,Java依然是后端开发的主力语言,而随着前后端分离架构的普及,Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术,包括传统Servlet/JSP体系、现代前端框架集成方案,以及全栈开发的最佳实践。通过本文,您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet:JavaWeb基础,处
自动化运维工程师面试题解析【真题】
ZabbixAgent默认监听的端口是A.10050。以下是关键分析:选项排除:C.80是HTTP默认端口,与ZabbixAgent无关。D.5432是PostgreSQL数据库的默认端口,不涉及ZabbixAgent。B.10051是ZabbixServer的默认监听端口,用于接收Agent发送的数据,而非Agent自身的监听端口。ZabbixAgent的配置:根据官方文档,ZabbixAgen
javaSE面试题---语法基础、面向对象、常用类、集合、多线程、文件和IO
yang_xiao_wu_
java 面试 开发语言 javase java基础 多线程 文件和IO
目录语法基础1.jdkjrejvm区别2.基本数据类型3.引用数据类型4.自动类型转换、强制类型转换5.常见的运算符6.&和&&区别7.++--在前和在后的区别8.+=有什么作用9.switch..case中switch支持哪些数据类型10.break和continue区别11.while和dowhile区别12.如何生成一个取值范围在[min,max]之间的随机数13.数组的长度如何获取?数组下
vue3面试题(个人笔记)
武昌库里写JAVA
面试题汇总与解析 课程设计 spring boot vue.js java 学习
vue3比vue2有什么优势?性能更好,打包体积更小,更好的ts支持,更好的代码组织,更好的逻辑抽离,更多的新功能。描述Vue3生命周期CompositionAPI的生命周期:onMounted()onUpdated()onUnmounted()onBeforeMount()onBeforeUpdate()onBeforeUnmount()onErrorCaptured()onRenderTrac
flutter知识点
ZhDan91
flutter
#时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下,最开始是开发Android出身的,所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点:整理来源:flutter面试题——基础篇(1)-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微
2025年渗透测试面试题总结-2025年HW(护网面试) 43(题目+回答)
独行soc
2025年护网 面试 职场和发展 linux 科技 渗透测试 安全 护网
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。目录2025年HW(护网面试)431.自我介绍与职业规划2.Webshell源码级检测方案3.2025年新型Web漏洞TOP54.渗透中的高价值攻击点5.智能Fuzz平台架构设计6.堆栈溢出攻防演进7.插桩技术实战应用8.二进制安全能力矩阵9.C语言内存管理精要10.Pyth
python相关内容二
湫默
python 开发语言
1.技术面试题(1)详细描述单调栈的工作原理和应用场景答:工作原理:维护一个栈结构,栈中元素保持单调递增或单调递减的顺序。遍历数据时,新元素入栈前,弹出栈顶所有不满足单调关系的元素,再将新元素入栈,确保栈的单调性。应用场景:解决下一个元素更大的问题,如数组中后面一个元素比前面一个入栈的元素大,则需要上一个元素出栈,然后大的那个元素入栈。(2)详细描述单调队列的工作原理和应用场景答:工作原理:维护队
面试官:Spring 如何控制 Bean 的加载顺序?
在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能。核心原则:依赖驱动加载SpringIoC容器会构建一个依赖关系图(DependencyGraph)。如果BeanA依赖于BeanB(例如,A的构造函数需要一个B类型的参数),Spring会保证在创建BeanA之前,BeanB已经被完全创建和初始化好了。@ServicepublicclassServiceA{
C++面试核心知识点全面解析:从基础到高级
掌握这些核心知识点,轻松应对90%的C++技术面试一、基础语法与关键字1.1const关键字的多种用法//1.常量变量constintMAX_SIZE=100;//2.常量指针与指针常量constint*ptr1=&var;//指向常量的指针int*constptr2=&var;//常量指针constint*constptr3=&var;//指向常量的常量指针//3.常量成员函数classMyCl
Java实习模拟面试之安徽九德 —— 面向对象编程、Spring框架与数据库技术详解
培风图南以星河揽胜
java面试 java 面试 spring
关键词:Java实习生、模拟面试、安徽九德、SpringBoot、MySQL、Redis、面向对象编程、团队协作一、前言作为一名计算机相关专业的学生,想要顺利进入一家互联网公司或软件开发企业实习,技术面试是必须面对的一道门槛。本文将带你走进一场真实的Java实习生模拟面试场景,以“安徽九德”公司为背景,围绕其发布的招聘岗位要求,进行一次全方位的技术面试演练。本次模拟面试涵盖以下核心知识点:Java
C++ 性能优化指南
三月微风
c++ 性能优化 开发语言
C++性能优化指南(针对GCC编译器,面向高级工程师面试)代码优化面试常问点:如何避免不必要的对象拷贝?为什么要用引用或std::move?虚函数调用有什么性能开销?原理解释:传递对象时按值会拷贝整个对象,特别是大对象会频繁分配/释放内存,影响性能;应尽量改用引用或指针传递。C++11引入移动语义(move),允许“窃取”临时对象的资源,避免深拷贝。虚函数调用需要先通过对象的虚函数表指针(vptr
C#常见面试题
rapLiu
c# 数据库 开发语言
1.http和https的区别1.HTTP明文传输,数据都是未加密的,安全性较差,HTTPS(SSL+HTTP)数据传输过程是加密的,安全性较好。2.使用HTTPS协议需要到CA(CertificateAuthority,数字证书认证机构)申请证书,一般免费证书较少,因而需要一定费用。证书颁发机构如:Symantec、Comodo、GoDaddy和GlobalSign等。3.HTTP页面响应速度比
C#常见面试题
rapLiu
java 开发语言
1.i++中为什么用到锁在C#中,i++通常不需要用锁,因为i++操作本身是一个原子操作。原子操作是指一个操作要么完全执行,要么完全不执行,不会被中断。因此,在单线程环境下,i++操作是安全的。然而,在多线程环境下,如果多个线程同时对i进行++操作,就可能会出现竞争条件(racecondition),导致数据不一致或错误的结果。为了避免这种情况,需要使用锁来保护i的操作,确保在同一时刻只有一个线程
前端面试题总结——JS篇
又又呢
前端 javascript 开发语言
一、说说JavaScript中的数据类型?存储上有什么差别?1、数据类型基本类型number:数值类型十进制:letintNum=55八进制(零开头):letnum1=070十六进制(0x开头):lethexNum1=0xANaN:特殊数值,意为“不是数值”string:字符串类型boolean:布尔值,true或falseundefined:表示未定义null:空值symbol:是原始值,且符号
前端面试题——5.AjAX的缺点?
浅端
前端面试题 前端面试题
①传统的web交互是:用户一个网页动作,就会发送一个http请求到服务器,服务器处理完该请求再返回一个完整的HTML页面,客户端再重新加载,这样极大地浪费了带宽。②AJAX的出现解决了这个问题,它只会向服务器请求用户所需要的数据,并在客户端采用JavaScript处理返回的数据,操作DOM更新页面。③AJXA优点:无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点:干掉了Back和Hist
JavaScript知识归纳——面试题
Dream_Lee_1997
JavaScript js面试题
JavaScript面试题总结JavaScript知识点1、JavaScript中settimeout与setinteval两个函数的区别?2、编写JavaScript脚本生成1-6之间的整数?3、在JavaScript脚本中,isNaN的作用是什么?4、JavaScript中获取某个元素有哪几种方式?5、Ajax的优缺点都有什么?6、简述一下Ajax的工作原理。7、JavaScript中的数据类
2023高薪前端面试题(二、前端核心——Ajax)
原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML,就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势是:无刷新获取数据,实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示
前端面试题——手写实现 ajax
阿水爱踢中锋
ajax js 前端
凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据,这样就能在保证良好用户体验的同时,将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯,几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法,如jQuery、zepto、angular等等,这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷,就是我们知道如何去使用封
【Kafka专栏 13】Kafka的消息确认机制:不是所有的“收到”都叫“确认”!
作者名称:夏之以寒作者简介:专注于Java和大数据领域,致力于探索技术的边界,分享前沿的实践和洞见文章专栏:夏之以寒-kafka专栏专栏介绍:本专栏旨在以浅显易懂的方式介绍Kafka的基本概念、核心组件和使用场景,一步步构建起消息队列和流处理的知识体系,无论是对分布式系统感兴趣,还是准备在大数据领域迈出第一步,本专栏都提供所需的一切资源、指导,以及相关面试题,立刻免费订阅,开启Kafka学习之旅!
Golang面试题二(slice,map,chan)
os-lee
go高级 golang 开发语言 后端
目录1.slice的底层实现1.结构体定义2.slice四种初始化方式3.底层函数2.Go语言当中数组和slice的区别是什么?1.长度不同2.函数传参不同3.计算长度方式不同3.slice的扩容机制,有什么注意点扩容机制总结4.扩容前后的Slice是否相同5.深拷贝和浅拷贝浅拷贝(ShallowCopy)深拷贝(DeepCopy)总结6.slice为什么不是线程安全的7.map底层实现8.map
前端每周清单第 16 期:JavaScript 模块化现状;Node V8 与V6 真实性能对比
前端每周清单第16期:JavaScript模块化现状;NodeV8与V6真实性能对比;Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件,首发地址为这里;如需转载,请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列;部分文章需要自备梯子。前端每周清单第16期:JavaScript模块化现状;NodeV8与V6真实性能对比;Nuxt.jsSSR与权限验证指
蓝领招聘爆发前夜:招工小程序如何抢占万亿级市场?
中国蓝领人群超4亿,但招聘线上化率不足30%!垂直领域招聘小程序正迎来三大机遇:1.市场规模与增长潜力数据:2023年蓝领招聘市场规模达8000亿元,年复合增长率超25%;痛点:传统中介收费高、信息不透明,企业“招工难”与求职者“就业难”并存;趋势:Z世代蓝领更倾向通过小程序“一键求职”,避免线下奔波。2.细分场景机会制造业:对接工厂“日结工”“临时工”需求,提供“当日面试、次日上岗”服务;服务业
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