表格内容
块标签(block):
1.独占一行
2.支持所有的样式
3.不设置宽度,撑满父级的空间
内嵌标签(行内/内联)(inline)
1.在一行显示
2.不支持宽高,对上下的margin和padding支持的也有问题
3.代码换行会被解析成一个空格
4.内嵌的宽度,有内容撑开
块:
div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd
内嵌:
span,a,strong,em,time,mark
background 背景(集合样式)
background-color 背景颜色
background-image 背景图片(添加路径 url())
同一个元素可以拥有多个背景,用逗号分开,先写的背景在上面
background-repeat 背景图片平铺方式
no-repeat (不平铺)
repeat (平铺)
repeat-x (水平平铺)
repeat-y (纵向平铺)
background-postion 背景定位
关键字
x:left center right
y:top center bottom
数值
x:10px/20% (像素大小/百分比)
y:10px/20%
background-attachment:fixed 固定图片不动
background-origin 背景图位置
border-box
padding-box (默认)
content-box
background-clip 背景裁切
-webkit-text (文字背景,只限谷歌)
border-box (默认)
padding-box
content-box
background-size 背景图大小(!!!手机端不建议使用)
等比放大:contain(包含)
cover (覆盖)
线性渐变
background-image:linear-gradient(red,blue) (有红色变蓝色 从上到下)
渐变定位(从什么地方开始到什么地方结束)
在(red,blue)中加入位置
如:(red 50px,blue 100px)也可加入百分比
渐变方向 deg
在开是位置加入角度值 (角度默认180deg)
如:background-image:linear-gradient(120deg,red,blue)
斑马线(就是平铺渐变)
background-image:repeating-linear-gradient()
兼容IE6(方向)
filter:progid:DXTmageTransform.Microsoft.gradient
(starColorstr='red',endColorstr='blue',GradientType='1');或者2
径向渐变
background-image:radial-gradient(起点 形状 大小 点)
起点:可以是关键字(left,top,right,bottom)、具体数值或百分比
形状:ellipse、aircle
大小:具体数值或百分比,也可以是关键字
最近端(closest-side)
最近角(closest-corner)
最远端(farthest-side)
最远角(farthest-side)
包含 contain
覆盖 cover
!!!火狐只支持关键字。
font 文字(集合样式)
color 字体颜色
font-size 文字大小
font-family 字体
font-weight: 字体加粗与否
bold 加粗
normal 正常
font-style: 字体倾斜
italic 倾斜
nomral 正常
line-height 行高
字体语法:
font:font-style font-weight font-size/line-height font-family;
文本:
text-decoration: 文本修饰
line-through 删除线
overline 上划线
underline 下划线
none 没有修饰
text-algin: 文本对齐方式
left 左
center 中
right 右
text-indent 首行缩进
white-space:nowrap 强制不换行(wrap 换行)
word-spacing 单词间距
letter-spacing 字母间距
direction 文字排列方向
rtl 右到左
ltr 左到右
unicode-bidi:bidi-override 改变文字的书写方式(从右到左)
在某一元素内文字超出显示省略号
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border 边框(复合样式,集合样式)
border-top
border-right
border-bottom
border-left
border-top-width 上
border-right-width 右
border-bottom-width 下
border-left-width 左
border-style 边框样式(solid 实线/dashed 虚线/dotted 点线)
border-top-style
border-right-style
border-bottom-style
bordder-left-style
border-color 边框颜色
关键字
rgb(0-255,0-255,0-255);
六位或者三位的一个十六进制的数字;
border-top-color
border-right-color
border-bottom-color
border-left-color
border-radius 圆角半径
列:border-radius:10px 20px 30px 40px
border-width 边框宽度
border-image语法 :
border-image:border-image-sourceg border-image-slice border-image-repeat
-webkit-border-image:url(border.png) 27 27 stretch stretch;
border-image 给内容加入图片仅限谷歌 要加如前缀 -webkit-
border-image-sourceg 引入图片
border-image-slice 切割图片 两个值(上下或左右)不用加px
border-image-repeat 图片的排列方式
round 平铺
repeat 重复
streth 拉伸
border-colors 为边框加颜色(从外层一层层显示)
只可在火狐下使用,并单独为某个方向上的边框设置
盒模型:
怪异盒模型
在IE6,7,8,下,没有文档声明会进入怪异盒模型
box-sizing:
border-box(怪异盒模型)
content-box (标准盒模型)
box-shadow
inset (可选)内阴影、 x 偏移、 y 偏移、 模糊半径、 扩展半径、 阴影颜色
阴影先写的在上边,后写的在下边
padding
padding 内填充(使元素和它的内容之前有一个空隙)
padding:30px(上下左右);
padding:30px(上下) 60px(左右);
padding:10px(上) 30px(左右) 60px(下);
padding:10px(上) 30px(右) 60px(下) 80px(左);
padding-top
padding-right
padding-bottom
padding-left
padding不算在元素的width里边
padding在元素的边框以里,并且padding会显示元素的背景
margin
margin 外边距
margin:30px(上下左右);
margin:30px(上下) 60px(左右);
margin:10px(上) 30px(左右) 60px(下);
margin:10px(上) 30px(右) 60px(下) 80px(左);
margin-top
margin-right
margin-bottom
margin-left
margin在元素的边框以外,并且margin不会显示元素的背景
**同级元素之间的距离用margin,父元素和子元素之间的距离用padding
a 超链接
href 页面地址 点击会跳到这个页面来
href 压缩包 点击会下载这个压缩包
href id名字 点击跳到这个id的元素的位置
a 标签不继承父级的字体颜色
a标签中不能再包含a标签
span 标签区分样式用
包含选择 a span{} 找到a标签下的span标签
base 定义页面上的链接默认的打开方式和默认地址
新窗口打开页面 target="_blank"
当前窗口打开页面 target="_self"
table 表格
table 设置宽度之后,宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行
thead 表格头部
tbody 表格主体
tr 行
th 单元格 (加粗,居中)
td 单元格
colspan 横向合并单元格
rowspan 纵向合并单元格
td,th 不支持margin
tr,thead,tbody :不支持margin和padding
border-spacing:0; 单元格间距为0(IE6,7不支持)
border-collapse:collapse; 合并边框
单元格中的内容默认垂直居中,可通过设置vertical-align进行修改
单元格设置 宽度,一竖列宽度都变,单元格设置 高度,一横行高度都变
表格清除默认样式:
table{border-collapse:collapse;}
td,th{padding:0;border:1px;}
vertical-align 垂直对齐方式(用在两个或多个,内联或者内联块元素垂直方向的对齐)
值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
float(浮动 left/right/none):
1.使内嵌元素支持宽高
2.使块元素在一行显示
3.不设置宽度的时候,宽度由内容
4.脱离文档流
浮动原理:
使元素脱离文档流,然后按照指定的方向去移动,直到碰到父级的边界,或者另外一个浮动元素停止
文档流:
文档流是文档中可显示对象在排列时所占用的位置。
BFC ( Box Formatting Context) 块级格式化上下文
inline formatting context 行内格式化上下文
BFC 作用
1.清除内容浮动
2.阻止margin向外传递
触发BFC的条件:
1.根节点
2.float不为none的情况
3.display的值为inline-block、table-cell、table-caption
4.overflow的值不为visible
5.position的值为absolute或fixed
overflow的值
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
clear 元素的某个方向上不能有浮动元素(left、right、both、none)
清浮动的方法:
1.给同为父元素设置 float
2.给父元素设置 display:inline-block;
3.给父元素设置 overflow不为visible(默认值) 一般设为auto;
4给父元素加个样式
clearFix:after{content:"";display:block; clear:both;} 最流行的方法
定位(position)
position:relative; 相对定位(只加相对定位元素不会有任何变化)
1.不脱离文档流(元素移走元素的初始位置,还会被保留)
2.根据自己的原始位置来计算left(right)和top(bottom)值
3.提升层级
position:absolute; 绝对定位
1. 脱离文档流
2.提升层级
3.根据自己有定位的父级来计算坐标,如果父级没有定位就会一层一层的向外去找.所有的父级都没有定 位,就根据document来计算
4.使内嵌元素支持宽高
5.绝对定位之后不设置宽度,宽度有内容撑开
!!!!元素定位之后,默认情况下,后边的层级高于前边的元素
z-index 层级
1.数值越大层级越高
2.层级只在定位元素上起效果
3.层级最好只在同级元素之间做比较
document 是html的父级
form 表单
action 提交跳转地址
常用控件-----
textarea 输入一段文本
select 下拉框 option
input
type="text" 文本输入框
type="password" 密码框
type="radio" 单选框
type="checkbox" 复选框
type="file" 上传控件
type="submit" 提交按钮
type="email" 邮箱 必须以@结尾
type="tell" 电话 (移动设备自动弹出数字输出法)
type="url" 网址
type="range" 数值选择
max="100" min="1" value="50" step(部署控制,每次移动多少)="10"
type="number" 数字选择
max="9" min="1" value="3" step="3"
type="color" 取色器
type="datetime-local" 时间(年月日小时)
time: 只有时间
date: 只有年月日
week: 第几周/年
month: 第几月/年
value 值
name 数据名称
常用属性-----
checked 单选和复选的默认选中
selected 的默认选中
disabled 禁止控件的编辑和提交
for=要辅助input的id
pattern:正则验证
placeholder:提示文字信息(不兼容IE)
autocomplete:是否保存用户输入值 on(默认)/off
autofocus:指定表单获取输入焦点
required:强制用户输入不能为空
表单草稿箱
当用户想保存草稿箱时
为submit加入
formaction="地址" 新的提交地址
formnovalidate 取消验证
清除表单默认样式
form{margin:0;}
input,select,textarea{padding:0;margin:0;border:1px solid #000;}
textarea{resize:none;overflow:auto;}
resize 属性规定是否可由用户调整元素的尺寸。
注释:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。
值 描述
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。
伪类
:link{} 此链接未被访问过
:visited{} 此链接已访问
:hover{} 鼠标移入
:active{} 鼠标按下
L-V-H-A
:target 点击后出发hash值 类似锚点a
:checked 被选中的单选框或复选框
文本伪类
p:first-letter 第一个字
p:first-line 第一行
p:selection 选中的颜色改变
p:after 元素末尾
p:before 元素开始
p:not (命的名) 排除掉谁
结构性伪类:
box h2:nth-child(3){background:Red;}
找到h2标签的父级下边的第3个子元素,并且标签类型还必须是h2
p:nth-of-type(3){background:Red;}
找到p标签的父级下的第3个p标签
:first-child == :nth-child(1)
:last-child == :nth-last-child(1)
:first-of-type == :nth-of-type(1)
:last-of-type == :nth-last-of-type(1)
(其中括号里面的值可以是:odd(奇数)、even(偶数)、或者数学里面的数列(n、2n、)!)
IE6 兼容问题
1、在IE6下子元素会撑开父级设置好的宽高
2、max-width 最大宽度 min-width 最小宽度
max-height 最大高度 min-height 最小高度
不兼容IE6
3、在IE6下,不支持1px的点线
4、元素内,除了内嵌还有其他类型的元素,行高会失效
5、在IE6,7下,父级有边框,可能会造成子元素的margin值失效
解决办法:触发父级的haslayout
6、关于标签兼容问题--------
7、IE6下只支持l-v-h-a这四个伪类,并且支持加给a标签
8、在IE6下,每行元素宽度和父级的总宽度,相差超过3px,最后一行下margin 失效
9、在IE6下,不支持给块标签加inline-block
10、在IE6下,块元素有横向的margin和浮动的时候,横向的margin会被放大两倍ss
解决办法:给元素加display:inline
11、在IE6下,高度不满19px的元素,高度会被当做19px来处理
解决办法:加overflow:hidden
12、在IE6,7下,li本身没浮动,但是li里边的内容浮动了,li下边会多出几个像素的间隙
解决办法: 1.给li加浮动(当li下的空隙问题和最小高度问题并存的时候,给li加浮动)
2.给li设置vertical-align
13、在IE6下,两个浮动元素之间有注释或者内嵌元素,并且元素的宽度和父级宽度相差小于3px,最后几个文字 会被复 制
14、在IE6,7下,浮动元素父级有宽度的情况下不用请浮动
haslayout(触发)、元素会根据自己自身内容的大小,或者父级的大小来重新计算自己的宽高
haslayout触发条件:
display: inline-block、 height: (任何值除了auto)、 float: (left 或 right)、position: absolute、 width: (任何值除了auto)、zoom: (除 normal 外任意值) zoom放大或缩小
15、在IE6下,浮动元素和绝对定位元素是并列关系的时候,绝对定位元素会消失掉
解决办法:用div把绝对定位元素包起来
16、在IE6,7下,子元素有相对定位的话,父级的overflow对它不起作用
解决办法:给父级也加相对定位
17、在IE6下,父级的宽高是奇数的话,元素的right(bottom)有1px的偏差
18、IE6,7,8不支持opacity、用filter:alpha(opacity=50);
19、在IE6下,给输入类型的表单控件加border:none无效
解决办法:重置input背景
在IE6下,输入类型的表单控件上下各有1px的空隙
解决办法:给元素浮动
在IE6下,输入类型的表单控件输入文字的时候,背景会随着一块移动
解决办法:把背景加给父级
20、在IE6下,子元素的margin -1px(超出父集边框,) 父集会自动包裹住子元素
解决办法:给父集加 position:relative
动画 animation
@keyframs animate(名称随变起){
0%{
width=100px;
}
10%{
width=500px;
}
}
样式内容:.box{animation:animate(名称) 3s(时间) 1s(延迟时间) infinite(无限循环) altermate(反向运行); }
transform:变换
transform-origin:变还原点位置
(x轴方向 (left center right 百分比%)
y轴方向 (left center right 百分比%)
z轴方向 (left center right 百分比%)
transform-style:preserve-3d (做3d必须加)
transform:scale(x,y)
scale3d (x,y,z) 缩放
rotate (deg角度)
rotate (x,y,z,deg角度)旋转
过渡属性:
transition: property duration timing-function delay;
值 描述
transition-property CSS 属性的名称
width、height
transition-duration 过度时间(秒、毫秒)
transition-delay 延迟时间(秒、毫秒)
transition-timing-function 规定运动形式
ease 逐渐变慢(默认值)
linear 匀速
ease-in 加速
ease-in-out 先加速后减慢
cubic-bezier(x1,y1,x1,y1) 贝塞尔曲线
滤镜:
-webkit-filter:blur(5px); //模糊,此处为5像素
-webkit-filter:sepia(0.5); //叠加褐色,取值范围0-1,此处表示50%的褐色
-webkit-filter:brightness(0.5); //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无 法看 到图片)
-webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红- 红) 此处为叠加黄色滤镜
-webkit-filter:invert(1); //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色
-webkit-filter:saturate(4); //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大
-webkit-filter:contrast(2); //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大
-webkit-filter:opacity(0.8); //透明度,取值范围0~1,0为全透明,1为原图
-webkit-filter:drop-shadow(17px 17px 20px black); //阴影
移动端写默认
宽度适应屏幕大小
加入JS 使最宽不超过540px 设置rem 为16分之一
var oHtml=document.getElementsByTagName("html")[0];
var iWidth=document.documentElement.clientWidth;
iWidth=iWidth>540?540:iWidth;
oHtml.style.fontSize=iWidth/16+"px";
清除样式:
a{-webkit-tap-highlight-color:rgba(255,0,0,0);} 点击有暗影
input{-webkit-appearance:none;}
body *{-webkit-text-size-adjust:none;} 字体最小大小
解决滑动内容效果:
var oScroll= new mScroll("wrap"); wrap{指的是内容块}
处理已给像素边框!!
var iScale=1/window.devicePixelRatio;
document.write('');
处理设备高度固定屏幕高度:
document.body.style.height=document.documentElement.clientHeight+"px";
加入body第一个
响应式(媒询media)
媒体类型
all 所有的媒体类型
screen 彩屏设备
print 打印设备
handheld 手持设备
braille 盲文触觉设备
embossed 盲文打印机
projection 投影
speech 听觉设备
TTY
TV 电视
关键字
and
not
only
媒询三种引入方式
1.
2.@import url("css/style.css");
3.直接写入style里面。
@media all
{
.box{
width:100px;
}
}
弹性盒模型(需要加前缀)
display:flex == display:inline-flex 类似浮动,不用清浮动
在改类型的元素内 子元素可以设置margin:auto auto;
设置主轴方向(flex-direction:)
row 从左向右排列(默认值)
row-reverse 从右向左
column 从上到下
column-reverse 向下到上
主轴内元素对齐方式(justify-content:)
flex-start 元素在开始位置 富裕空间在另一侧(默认)
flex-end 元素在末尾位置富裕空间在起始处
center 元素居中富裕空间平分左右两侧
space-between 富裕空间在元素之间平分
space-around 富裕空间在元素两侧平分
侧轴对齐 (align-items:为对齐元素的父集设置)
flex-start 元素在开始位置 富裕空间在另一侧(默认)
flex-end 元素在末尾位置 富裕空间在起始处
center 元素居中 富裕空间平分左右两侧
注意:align-self 也是侧轴对齐但是用来写在对齐元素的样式内!!!
换行 (flex-wrap:)
nowrap(默认)
wrap 换行
wrap-reverse 反向换行
其中 主轴对齐方式 与 换行可以写集合
flex-flow:row(主轴对齐方式) wrap(换行)
堆栈伸缩行(algin-content:)
algin-content 会更改 flex-wrap 的行为
它和 align-items 相似,但是不是对齐伸缩项目,它对齐的是伸缩行。
flex-start
flex-end
center
space-between
space-around
oder(在元素的排列位置,给子元素加人) oder=0(默认)
遮罩(mask)
-webkit-mask:url(img)
mask:用背景图片来覆盖掉图片。
删栏(columns)加浏览器前缀
column-width 栏目宽度
column-cunt 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
column-fill 栏目高度是否统一
外联框架
ioc 网页小标
无标题文档
热区
shape="rect" 矩形
coords="左上角X,左上角Y,右下角X,右下角Y"
shape="circle" 圆形
coords="圆心的X,圆心的Y,半径"
shape="poly" 多边形
coords="第1个点X,第1个点y,第2个点X,第2个点y,第3个点X,第3个点y......"
视频(优酷视频):
来源于同学培训html/css基础的一份笔记,信息量很大
转载于:https://www.cnblogs.com/xiaohuangr/p/4995276.html
你可能感兴趣的:(人工智能,javascript,ViewUI)
- 计算机视觉:解锁智能时代的钥匙与实战案例
我的运维人生
计算机视觉人工智能运维开发技术共享
计算机视觉:解锁智能时代的钥匙与实战案例在人工智能的浩瀚星空中,计算机视觉无疑是最为璀璨的星辰之一。它不仅让机器拥有了“看”的能力,更是推动了自动驾驶、安防监控、医疗影像分析、智能制造等多个领域的革新。本文将深入探讨计算机视觉的核心技术、最新进展,并通过一个具体的代码案例,展示如何在实际项目中应用这些技术。一、计算机视觉概述计算机视觉,简而言之,是指让计算机系统从数字图像或视频中提取有用信息的过程
- Python网络爬虫调试技巧:解决爬虫中的问题
master_chenchengg
pythonpythonPythonpython开发IT
Python网络爬虫调试技巧:解决爬虫中的问题引子:当你的小蜘蛛遇到大麻烦知己知彼:了解常见的爬虫错误类型侦探出马:使用开发者工具和日志追踪问题源头化险为夷:调整User-Agent与添加延时策略进阶秘籍:处理JavaScript渲染页面与动态加载内容引子:当你的小蜘蛛遇到大麻烦在一个阳光明媚的下午,我正坐在电脑前,满怀信心地运行着我的Python爬虫脚本。这个脚本是为了从一个大型电子商务网站上抓
- 探究Fingerprintjs:了解浏览器指纹技术的原理和应用
Bj陈默
javascript
一、什么是FingerprintjsFingerprintjs是一个用于生成浏览器指纹的JavaScript库。浏览器指纹是一种通过收集浏览器的各种信息来识别用户设备的技术。它类似于人的指纹,具有一定的独特性,可以用于区分不同的用户设备。二、浏览器指纹技术的原理(一)基本信息收集用户代理(UserAgent)用户代理字符串包含了浏览器的类型、版本、操作系统等信息。例如,一个典型的用户代理字符串可能
- 人工智能导论--第1章-知识点与学习笔记
想拿高薪的韭菜
人工智能学习笔记
请根据教材内容,完成进行下面的作业任务。必须包含有教材的具体内容,不能是生成式AI系统的生成内容。参考教材1.1节的内容介绍,谈谈你对“智能”的认识。思维能力是智能的重要特征之一,结合教材1.1.2节内容,从思维的定义、分类及其特点等角度,阐述思维的含义。参考教材1.1.3节的内容介绍,名词解析“人工智能”。参考教材1.2节的内容介绍,介绍人工智能的发展简史。参考教材1.3节的内容介绍,人工智能作
- 精讲 JS return 语句的作用
谦虚的w
javascript前端
函数作用域的限制-在JavaScript中,函数有自己的作用域。在函数内部定义的变量和对象(如localObj)默认情况下在函数外部是无法直接访问的。这是因为函数的作用域是封闭的,它将内部的变量和对象隐藏起来,以防止外部代码随意访问和修改。return语句的作用-当在函数内部使用return语句返回一个对象(如returnlocalObj;)时,实际上是将这个对象的引用传递到函数外部。这样,在函数
- Python从0到100(八十一):神经网络-Fashion MNIST数据集取得最高的识别准确率
是Dream呀
python神经网络开发语言
前言:零基础学Python:Python从0到100最新最全教程。想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识,成为学习学习和学业的先行者!欢迎大家订阅专栏:零基础学Python:Python从0到100最新
- HTML基础与进阶技术指南
王奥雷
本文还有配套的精品资源,点击获取简介:HTML是构建网页的基础语言,负责定义网页的内容结构和样式。初学者需要掌握HTML元素、属性、结构等基础知识,并了解HTML5新增的语义化标签,表单元素的使用,布局与定位技术,响应式设计原则,以及如何与JavaScript交互。此外,学习SEO优化和无障碍性设计也是提高网页质量和可访问性的关键。本指南旨在引导初学者从基础到高级技巧,逐步深入理解并实践网页开发。
- 老玩童:互联网智慧助老平台——科技赋能银发族,开启智慧养老新生活
IT源码大师
科技生活
详细描述:1.引言随着全球老龄化社会的加速到来,老年人的生活质量和社会参与度成为社会关注的焦点。传统的养老服务模式往往存在资源不足、服务单一、效率低下等问题,难以满足老年人日益增长的多样化需求。基于互联网技术的智慧助老平台“老玩童”,通过整合物联网、大数据、人工智能等先进技术,构建了一个全方位、智能化、个性化的助老服务体系,为老年人及其家庭提供了全新的解决方案。本文将深入探讨这一平台的核心理念、技
- 什么是ROS2
听风胖耗子
机器人
ROS是机器人操作系统的简称,它本身并不是一个操作系统,而是可以安装在现在已有的操作系统(Linux、Windows、Mac)上的一组用于构建机器人应用程序的软件库和工具集。ROS包括两个版本ROS1和ROS2,ROS1是在2007年由斯坦福大学人工智能实验室与机器人技术公司WillowGarage为了个人机器人项目的合作而开发的,2008年后由WillowGarage来进行推动,目前由开源机器人
- 从零开始大模型开发与微调:汉字拼音数据集处理
AGI大模型与大数据研究院
大数据AI人工智能计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
从零开始大模型开发与微调:汉字拼音数据集处理1.背景介绍1.1问题的由来在人工智能领域,自然语言处理(NLP)是一项基础且重要的研究方向。随着深度学习技术的飞速发展,大规模语言模型(LargeLanguageModel,LLM)在NLP领域取得了显著的成果。然而,LLM的训练与微调过程往往需要海量的文本数据,而这些数据通常以自然语言形式存在,难以直接用于模型训练。因此,如何从自然语言数据中提取结构
- JavaScript Navigator:深入理解浏览器导航机制
lly202406
开发语言
JavaScriptNavigator:深入理解浏览器导航机制引言在Web开发中,浏览器导航是用户与网页交互的重要部分。JavaScriptNavigator对象提供了丰富的API,允许开发者深入理解并控制浏览器的导航行为。本文将详细介绍JavaScriptNavigator对象的功能、使用方法以及在实际开发中的应用。一、什么是JavaScriptNavigator?JavaScriptNavig
- 本地部署LLM工具大比拼:谁才是你的智能之选?
Python_金钱豹
microsoftocr人工智能cnntransformer分类
在人工智能的浪潮中,本地部署LLM工具为我们开启了个性化智能交互的新大门。今天,就带大家深入对比几款热门的本地部署LLM工具:ollama、Llamafile、jan、LLaMa.cpp、GPT4All、LMStudio,从多个关键角度剖析它们的特点与优势,助你挑选出最契合自身需求的智能伙伴。一、安装使用便捷性大排名1.ollama:轻松上手的智能先锋ollama的安装便捷性堪称一流。只需一条简单
- 表单提交实战教程:HTML、CSS、JavaScript到Java后端
河马和荷花
本文还有配套的精品资源,点击获取简介:网页表单是用户与服务器交互的重要界面元素,本资源提供了从构建表单到数据提交的完整流程。介绍了HTML表单基础、GET与POST提交方法、JavaScript事件处理、CSS样式设计,并通过demo.html文件展示综合应用,以及Java后端的接收和处理。同时,强调了表单安全和性能优化的重要性。1.HTML表单基础知识HTML表单的作用和结构HTML表单是Web
- JavaScript中的防抖节流函数为什么要用call或apply去执行fn
EuForth
javascript开发语言ecmascriptJavaScript
防抖(Debounce)和节流(Throttle)是前端开发中常用的性能优化技术,它们可以限制函数的执行频率,有效地控制事件触发的次数。在实际应用中,经常会将防抖节流函数与回调函数一起使用,以避免频繁触发导致的性能问题。在JavaScript中,有时我们会使用call或apply方法来执行回调函数。本文将详细解释防抖节流函数为什么要用call或apply去执行回调函数,并提供相应的源代码示例。了解
- LeetCode169. 多数元素 (JavaScript解法)
煲纸
数据结构与算法leetcode
169.多数元素题解思路1:摩尔投票法思路由于数的数量超过一半,所以那个数的出现的频率,一定大于等于50%,如果res为正确的众数,则voted的数量不可能为0,所以最后的res就是众数。分析时间复杂度O(N)空间复杂度O(1)代码实现varmajorityElement=function(nums){//初始化备选人和票数letres=nums[0],voted=0;for(letnofnums
- 除了layui.js还有什么比较好的纯JS组件WEB UI?在谷歌浏览上显示
专注VB编程开发20年
javascript前端layui
以下是一些比较好的纯JS组件WEBUI,可以在谷歌浏览器上良好显示:1.Sencha特点:提供超过140个高性能UI组件,用于构建现代应用程序。支持与Angular和React集成,提供企业级网格解决方案。适用场景:适用于需要高性能、可定制的UI组件的项目,尤其是企业级应用。2.Webix特点:包含102个UI组件,支持跨平台和跨浏览器,提供快速的渲染速度和纯JavaScript代码。适用场景:适
- 一张图看懂AI技术架构!开发、训练、部署全链路深度解析!
和老莫一起学AI
人工智能数据挖掘学习llamaai大模型程序员
人工智能(AI)技术的快速发展,使得企业在AI模型的开发、训练、部署和运维过程中面临前所未有的复杂性。从数据管理、模型训练到应用落地,再到算力调度和智能运维,一个完整的AI架构需要涵盖多个层面,确保AI技术能够高效、稳定地运行。本文将基于AI技术架构全景图,深入剖析AI的开发工具、AI平台、算力与框架、智能运维四大核心部分,帮助大家系统性地理解AI全生命周期管理。一、AI开发工具:赋能高效开发,提
- Node.js 全局对象
wjs2024
开发语言
Node.js全局对象引言在Node.js中,全局对象是JavaScript环境中的一部分,它提供了对Node.js运行时环境的访问。全局对象在Node.js中扮演着重要的角色,它使得开发者能够访问和操作Node.js的许多核心功能。本文将详细介绍Node.js的全局对象,包括其特点、常用方法和应用场景。全局对象概述Node.js的全局对象是global,它是Node.js中所有模块的父对象。在N
- JavaScript函数中this的指向
暗渡x
JavaScriptjavascript前端
总结:谁调用我,我就指向谁(es6箭头函数不算)一、ES6之前每一个函数内部都有一个关键字是this,可以直接使用重点:函数内部的this只和函数的调用方式有关系,和函数的定义方式没有关系1、函数内部的this指向谁,取决于函数的调用方式1.1、全局定义的函数直接调用,this=>windowfunctionfn(){console.log(this)}fn()//此时this指向window1.
- iconv-lite:一个库搞定所有字符编码问题?
前端徐徐
宝藏工具electron
本文首发同名微信公众号:前端徐徐大家好,我是徐徐。今天跟大家分享一款强大的字符编码转换库:iconv-lite。前言在全球化的开发环境中,处理不同字符编码已成为许多应用程序的关键需求。无论你是在开发需要支持多语言的应用,还是需要处理来自不同源的文本数据,一个高效且可靠的字符编码转换工具可以大大提升你的开发效率。今天,我们要介绍的是iconv-lite这个纯JavaScript实现的字符编码转换库,
- Tauri应用开发实践指南(1)— Tauri 怎么样
前端徐徐
Tauri应用开发实践指南前端前端框架
本文首发于微信公众号:前端徐徐。欢迎关注,获取更多前端技能分享。Tarui是什么Tauri是一个用于构建针对所有主要桌面和移动平台的小型、高速二进制文件的框架。开发人员可以集成任何能编译为HTML、JavaScript和CSS的前端框架来构建用户体验,同时在需要时利用诸如Rust、Swift和Kotlin等语言进行后端逻辑开发。官网:https://tauri.appTarui架构Tauri的整体
- javascript-前后端交互模式-简介
gaog2zh
#javascirptjavascript前后端交互
javascript-前后端交互模式-简介目录文章目录1、相关知识2、异步接口调用方式3、URL地址2.1、传统形式的URL2.2、Restful风格的URL2.2.1、http请求方式2.2.3、示例:***后记***:内容图示0-1:随着前后端分离,前后端交互技术不断更新,下面我们看下前后端交互相关知识。1、相关知识前端通过相关接口发送请求,后端接收请求,处理返回响应结果,前端接收响应结果,完
- Forbes:2025年人工智能发展前瞻
人工智能学家
人工智能百度
来源:科技世代千高原克雷格·S·史密斯CraigS.Smith2025年1月7日技术发展速度飞快,转眼间,星辰延伸成星线,我们今天所处的位置与几天前相去甚远。越来越难以预测明天我们会身在何处。有一点是明确的:我们正在进入通用人工智能(AGI)领域,超级人工智能(ASI)现在似乎触手可及。无论如何定义,AGI不会突然出现;它会不断发展,我们已经看到了它逐渐展开的迹象。AGI的曙光AGI一直以来都是我
- 数字化转型导师坚鹏:AI大模型DEEPSEEK重构人工智能格局的里程碑
银行数字化转型导师坚鹏
人工智能重构DEEPSEEKAI
数字化转型导师坚鹏:AI大模型DEEPSEEK重构人工智能格局的里程碑在人工智能领域迅猛发展的浪潮中,每一次重大技术突破都犹如一颗投入平静湖面的巨石,激起千层浪。DEEPSEEK的发布,无疑是近期人工智能领域最受瞩目的事件之一。凭借其独特的技术优势和创新理念,DEEPSEEK迅速在全球人工智能舞台上崭露头角,对现有的人工智能格局产生了多维度、深层次的影响。一、技术突破:从"追赶者"到"规则制定者"
- Python的Json方法
weixin_34293059
jsonpythonjavascriptViewUI
Json简介:Json,全名JavaScriptObjectNotation,是一种轻量级的数据交换格式。Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式。现在也常用于http请求中,所以对json的各种学习,是自然而然的事情。dumps方法将字典数据类型转换为json字符串类型例子:importjsonm={'a':123,'b':'hahaha'}json_str=js
- 前端必知必会-Vue 简介
编程岁月
vue.js前端javascript
文章目录Vue简介Vue是一个JavaScript框架为什么要学习Vue?OptionsAPI我的第一页文本插值文本插值中的JavaScript总结Vue简介Vue是一个JavaScript框架。可以使用标记将其添加到HTML页面。Vue使用指令扩展HTML属性,并使用表达式将数据绑定到HTML。Vue是一个JavaScript框架Vue是一个用JavaScript编写的前端JavaScript框
- 详细介绍:使用 Axios 上传图片文件
还是鼠鼠
javascript前端开发语言ajaxbootstrap前端框架vscode
目录1.项目背景和功能概述2.(index.html完整代码)结构解析3.JavaScript部分解析3.1事件监听和图片上传3.2处理响应和错误4.完整流程5.总结6.适用场景这篇文章将展示如何通过Axios发送POST请求来实现图片上传。通过用户选择图片文件后,使用FormData构造上传的文件数据,并通过Axios将其提交到服务器。服务器返回图片的URL后,页面会显示上传的图片。下面是详细的
- 图书管理系统 Axios 源码 __删除图书功能
还是鼠鼠
javascriptbootstrapajaxvscode前端前端框架node.js
目录代码实现(index.js)代码解析使用方法下面是完整的删除图书功能代码,基于HTML+Bootstrap+JavaScript+Axios开发。代码实现(index.js)//删除图书功能document.querySelector('.list').addEventListener('click',(e)=>{//判断是否点击了删除按钮if(e.target.classList.conta
- Axios 的地区查询(案例)
还是鼠鼠
ajax前端javascriptbootstrapweb
目录1.项目背景与功能概述2.完整代码3.HTML结构解析输入表单查询按钮地区列表4.JavaScript部分解析监听点击事件发送Axios请求处理响应数据5.完整流程6.总结7.适用场景8.优化和扩展本案例展示了如何使用Axios发送带查询参数的HTTP请求,查询指定省份和城市下的地区列表。通过用户输入的省份名称和城市名称,向后端API发送请求,获取该地区下的具体区域信息,并将返回的数据动态渲染
- 图书管理系统 Axios 源码__获取图书列表
还是鼠鼠
javascriptbootstrapajax前端
目录核心功能源码介绍1.获取图书列表技术要点适用人群本项目是一个基于HTML+Bootstrap+JavaScript+Axios开发的图书管理系统,可用于添加、编辑、删除和管理图书信息,适合前端开发者学习前端交互设计、Axios数据请求以及Bootstrap样式布局。核心功能图书列表渲染通过Axios发送GET请求获取服务器上的图书数据。渲染数据到HTML表格,展示书籍的名称、作者、出版社等信息
- 遍历dom 并且存储(将每一层的DOM元素存在数组中)
换个号韩国红果果
JavaScripthtml
数组从0开始!!
var a=[],i=0;
for(var j=0;j<30;j++){
a[j]=[];//数组里套数组,且第i层存储在第a[i]中
}
function walkDOM(n){
do{
if(n.nodeType!==3)//筛选去除#text类型
a[i].push(n);
//con
- Android+Jquery Mobile学习系列(9)-总结和代码分享
白糖_
JQuery Mobile
目录导航
经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css。
个人觉得基于WebView的Jquery Mobile开发有以下优点:
1、对于刚从Java Web转型过来的同学非常适合,只要懂得HTML开发就可以上手做事。
2、jquerym
- impala参考资料
dayutianfei
impala
记录一些有用的Impala资料
1. 入门资料
>>官网翻译:
http://my.oschina.net/weiqingbin/blog?catalog=423691
2. 实用进阶
>>代码&架构分析:
Impala/Hive现状分析与前景展望:http
- JAVA 静态变量与非静态变量初始化顺序之新解
周凡杨
java静态非静态顺序
今天和同事争论一问题,关于静态变量与非静态变量的初始化顺序,谁先谁后,最终想整理出来!测试代码:
import java.util.Map;
public class T {
public static T t = new T();
private Map map = new HashMap();
public T(){
System.out.println(&quo
- 跳出iframe返回外层页面
g21121
iframe
在web开发过程中难免要用到iframe,但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中,这时我们就需要跳出这个iframe到达一个公共页面去。
首先跳转到一个中间页,这个页面用于判断是否在iframe中,在页面加载的过程中调用如下代码:
<script type="text/javascript">
//<!--
function
- JAVA多线程监听JMS、MQ队列
510888780
java多线程
背景:消息队列中有非常多的消息需要处理,并且监听器onMessage()方法中的业务逻辑也相对比较复杂,为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列;2.使用一个监听器开启多线程监听。
对于上面提到的方法2使用一个监听器开启多线
- 第一个SpringMvc例子
布衣凌宇
spring mvc
第一步:导入需要的包;
第二步:配置web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi=
- 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer
aijuans
Spring3
PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer,但是与后者相比,前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容,那么将使用上下文(配置的xml文件)中相应定义的值。如果properties文件中有bean属性的内容,那么就用properties文件中的值来代替上下
- 通过XSD验证XML
antlove
xmlschemaxsdvalidationSchemaFactory
1. XmlValidation.java
package xml.validation;
import java.io.InputStream;
import javax.xml.XMLConstants;
import javax.xml.transform.stream.StreamSource;
import javax.xml.validation.Schem
- 文本流与字符集
百合不是茶
PrintWrite()的使用字符集名字 别名获取
文本数据的输入输出;
输入;数据流,缓冲流
输出;介绍向文本打印格式化的输出PrintWrite();
package 文本流;
import java.io.FileNotFound
- ibatis模糊查询sqlmap-mapping-**.xml配置
bijian1013
ibatis
正常我们写ibatis的sqlmap-mapping-*.xml文件时,传入的参数都用##标识,如下所示:
<resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO">
<res
- java jvm常用命令工具——jdb命令(The Java Debugger)
bijian1013
javajvmjdb
用来对core文件和正在运行的Java进程进行实时地调试,里面包含了丰富的命令帮助您进行调试,它的功能和Sun studio里面所带的dbx非常相似,但 jdb是专门用来针对Java应用程序的。
现在应该说日常的开发中很少用到JDB了,因为现在的IDE已经帮我们封装好了,如使用ECLI
- 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解
bit1129
controller
在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解(http://bit1129.iteye.com/blog/2114084)中介绍了Autowired和Resource两个注解的功能,它们用于将依赖根据名称或者类型进行自动的注入,这简化了在XML中,依赖注入部分的XML的编写,但是UserDao和UserService两个bea
- cxf wsdl2java生成代码super出错,构造函数不匹配
bitray
super
由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改:
我们原来的代码
wsdl2java com.test.xxx -client http://.....
修改后的代
- 动态页面正文部分中文乱码排障一例
ronin47
公司网站一部分动态页面,早先使用apache+resin的架构运行,考虑到高并发访问下的响应性能问题,在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题,随意进入某一有分页的网页,第一页是正常的(因为静态化过了);点“下一页”,出来的页面两边正常,中间部分的标题、关键字等也正常,唯独每个标题下的正文无法正常显示。 因为有做过系统调整,所以第一反应就是新上
- java-54- 调整数组顺序使奇数位于偶数前面
bylijinnan
java
import java.util.Arrays;
import java.util.Random;
import ljn.help.Helper;
public class OddBeforeEven {
/**
* Q 54 调整数组顺序使奇数位于偶数前面
* 输入一个整数数组,调整数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半
- 从100PV到1亿级PV网站架构演变
cfyme
网站架构
一个网站就像一个人,存在一个从小到大的过程。养一个网站和养一个人一样,不同时期需要不同的方法,不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1:积累是必不可少的
架构师不是一天练成的。
1999年,我作了一个个人主页,在学校内的虚拟空间,参加了一次主页大赛,几个DREAMWEAVER的页面,几个TABLE作布局,一个DB连接,几行PHP的代码嵌入在HTM
- [宇宙时代]宇宙时代的GIS是什么?
comsci
Gis
我们都知道一个事实,在行星内部的时候,因为地理信息的坐标都是相对固定的,所以我们获取一组GIS数据之后,就可以存储到硬盘中,长久使用。。。但是,请注意,这种经验在宇宙时代是不能够被继续使用的
宇宙是一个高维时空
- 详解create database命令
czmmiao
database
完整命令
CREATE DATABASE mynewdb USER SYS IDENTIFIED BY sys_password USER SYSTEM IDENTIFIED BY system_password LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
- 几句不中听却不得不认可的话
datageek
1、人丑就该多读书。
2、你不快乐是因为:你可以像猪一样懒,却无法像只猪一样懒得心安理得。
3、如果你太在意别人的看法,那么你的生活将变成一件裤衩,别人放什么屁,你都得接着。
4、你的问题主要在于:读书不多而买书太多,读书太少又特爱思考,还他妈话痨。
5、与禽兽搏斗的三种结局:(1)、赢了,比禽兽还禽兽。(2)、输了,禽兽不如。(3)、平了,跟禽兽没两样。结论:选择正确的对手很重要。
6
- 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误
dcj3sjt126com
PHP
原文地址:http://www.kafka0102.com/2010/08/281.html
因为需要,今天晚些在本机使用PHP做些测试,PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来,就报出类似下面的错误:“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
- xcode6 Auto layout and size classes
dcj3sjt126com
ios
官方GUI
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html
iOS中使用自动布局(一)
http://www.cocoachina.com/ind
- 通过PreparedStatement批量执行sql语句【sql语句相同,值不同】
梦见x光
sql事务批量执行
比如说:我有一个List需要添加到数据库中,那么我该如何通过PreparedStatement来操作呢?
public void addCustomerByCommit(Connection conn , List<Customer> customerList)
{
String sql = "inseret into customer(id
- 程序员必知必会----linux常用命令之十【系统相关】
hanqunfeng
Linux常用命令
一.linux快捷键
Ctrl+C : 终止当前命令
Ctrl+S : 暂停屏幕输出
Ctrl+Q : 恢复屏幕输出
Ctrl+U : 删除当前行光标前的所有字符
Ctrl+Z : 挂起当前正在执行的进程
Ctrl+L : 清除终端屏幕,相当于clear
二.终端命令
clear : 清除终端屏幕
reset : 重置视窗,当屏幕编码混乱时使用
time com
- NGINX
IXHONG
nginx
pcre 编译安装 nginx
conf/vhost/test.conf
upstream admin {
server 127.0.0.1:8080;
}
server {
listen 80;
&
- 设计模式--工厂模式
kerryg
设计模式
工厂方式模式分为三种:
1、普通工厂模式:建立一个工厂类,对实现了同一个接口的一些类进行实例的创建。
2、多个工厂方法的模式:就是对普通工厂方法模式的改进,在普通工厂方法模式中,如果传递的字符串出错,则不能正确创建对象,而多个工厂方法模式就是提供多个工厂方法,分别创建对象。
3、静态工厂方法模式:就是将上面的多个工厂方法模式里的方法置为静态,
- Spring InitializingBean/init-method和DisposableBean/destroy-method
mx_xiehd
javaspringbeanxml
1.initializingBean/init-method
实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后,来执行初始化的工作,InitialzingBean仅仅指定了一个方法。
通常InitializingBean接口的使用是能够被避免的,(不鼓励使用,因为没有必要
- 解决Centos下vim粘贴内容格式混乱问题
qindongliang1922
centosvim
有时候,我们在向vim打开的一个xml,或者任意文件中,拷贝粘贴的代码时,格式莫名其毛的就混乱了,然后自己一个个再重新,把格式排列好,非常耗时,而且很不爽,那么有没有办法避免呢? 答案是肯定的,设置下缩进格式就可以了,非常简单: 在用户的根目录下 直接vi ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中,保存退出,重新登录,
- netty大并发请求问题
tianzhihehe
netty
多线程并发使用同一个channel
java.nio.BufferOverflowException: null
at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea]
at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
- Hadoop NameNode单点问题解决方案之一 AvatarNode
wyz2009107220
NameNode
我们遇到的情况
Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。
我们的团队负责管理一个1200节点的集群(总大小12PB),目前是运行版本为Hadoop 0.20,transaction logs写入一个共享的NFS filer(注:NetApp NFS Filer)。
经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod