:定义表格单元
:定义表格标题
语义化标签:`` ``
注:在一个table中,只能出现一次,可以出现多次
< table>
< caption> 天气预报caption >
< tHead>
< tr>
< th> 日期th >
< th> 天气情况th >
< th> 出行情况th >
tr >
< tHead/>
< tBody>
< tr>
< td> 2020.01.02td >
< td> 晴td >
< td> 适合出行td >
tr >
< tr>
< td> 2020.01.03td >
< td> 雨td >
< td> 不宜出行td >
tr >
< tBody/>
table >
3.表格属性
border
:表格边框
cellpadding
:单元格内的空间
cellspacing
:单元格之间的空间
colspan
合并列
rowspan
:合并行
align
:左右对齐方式(left、center、right)
valign
:上下对齐方式(top、middle、bottom)
< table border = " 2" >
< table border = " 2" cellpadding = " 25" >
< table border = " 2" cellpadding = " 25" cellspacing = " 12" >
colspan和rowspan
< table border = " 2" cellpadding = " 25" cellspacing = " 12" >
< caption> 天气预报caption >
< tr>
< th> 日期th >
< th> 日期th >
< th> 天气情况th >
< th> 出行情况th >
tr >
< tr>
< td> 2020.01.02td >
< td> 白天td >
< td> 晴td >
< td> 适合出行td >
tr >
< tr>
< td> 2020.01.03td >
< td> 白天td >
< td> 雨td >
< td> 不宜出行td >
tr >
table >
利用colspan后
< th colspan = " 2" > 日期th >
< table border = " 2" cellpadding = " 25" cellspacing = " 12" >
< caption> 天气预报caption >
< tr>
< th colspan = " 2" > 日期th >
< th> 天气情况th >
< th> 出行情况th >
tr >
< tr>
< td> 2020.01.02td >
< td> 白天td >
< td> 晴td >
< td> 适合出行td >
tr >
< tr>
< td> 2020.01.02td >
< td> 夜晚td >
< td> 晴td >
< td> 适合出行td >
tr >
< tr>
< td> 2020.01.03td >
< td> 白天td >
< td> 雨td >
< td> 不宜出行td >
tr >
< tr>
< td> 2020.01.03td >
< td> 夜晚td >
< td> 雨td >
< td> 不宜出行td >
tr >
table >
利用rowspan后
< tr>
< td rowspan = " 2" > 2020.01.02td >
< td> 白天td >
< td> 晴td >
< td> 适合出行td >
tr >
< tr>
< td> 夜晚td >
< td> 晴td >
< td> 适合出行td >
tr >
< tr>
< td rowspan = " 2" > 2020.01.03td >
< td> 白天td >
< td> 雨td >
< td> 不宜出行td >
tr >
使用rowspan align/valign
< table align = " right" >
练习:
< table border = " 3" cellpadding = " 5" >
< tr>
< th> 班次名称th >
< th> 科目th >
< th> 授课内容th >
< th> 增值服务th >
< th> 课时th >
< th> 价格th >
tr >
< tr valign = " middle" >
< td rowspan = " 3" > 真题解析班td >
< td> 行测+申论td >
< td> 全科历年真题td >
< td rowspan = " 3" > 课后模拟案卷td >
< td> 48td >
< td> 1280td >
tr >
< tr>
< td> 行测td >
< td> 行测真题td >
< td> 32td >
< td> 1520td >
tr >
< tr>
< td> 申论td >
< td> 申论真题td >
< td> 25td >
< td> 3620td >
tr >
< tr valign = " midddle" >
< td rowspan = " 3" > 高分技巧班td >
< td> 行测+申论td >
< td> 全技巧td >
< td rowspan = " 3" > 入学测评td >
< td> 48td >
< td> 1235td >
tr >
< tr>
< td> 行测td >
< td> 技巧强化td >
< td> 20td >
< td> 5210td >
tr >
< tr>
< td> 申论td >
< td> 理论强化td >
< td> 62td >
< td> 3620td >
tr >
table >
4.表单标签
:表单的最外层容器
< form action = " ./html/list.html" >
/*action作为下述文件的上传地址,提供了一个地址的作用*/
< h2> 输入框h2 >
< input type = " text" >
< h2> 密码框h2 >
< input type = " password" >
< h2> 复选框h2 >
< input type = " checkbox" > 苹果
< input type = " checkbox" > 香蕉
< input type = " checkbox" > 葡萄
< h2> 单选框h2 >
< input type = " radio" name = " gender" > 是
< input type = " radio" name = " gender" > 否
/*利用name来告诉系统这两者是一个属性*/
< h2> 上传文件h2 >
< input type = " file" >
< h2> 提交和重置按钮h2 >
< input type = " submit" >
< input type = " reset" >
form >
< h2> 多行文本框h2 >
< textarea cols = " 20" rows = " 20" > textarea >
< select>
< option selected disabled > 请选择option >
< option> 巧克力option >
< option> 菠萝蜜option >
< option> 苹果派option >
select >
< select size = " 2" >
< option> 巧克力option >
< option> 菠萝蜜option >
< option> 苹果派option >
select >
< select multiple >
< option> 巧克力option >
< option> 菠萝蜜option >
< option> 苹果派option >
select >
< h2> 单选框h2 >
< input type = " radio" name = " gender" id = " yes" > < label for = " yes" > 是label >
< input type = " radio" name = " gender" id = " no" > < label for = " no" > 否label >
练习:
< h4> 设置密码:h4 > < input type = " password" >
< h4> 真实姓名:h4 > < input type = " text" >
< h4> 性别:h4 >
< input type = " radio" name = " gender" > 男
< input type = " radio" name = " gender" > 女
< h4> 生日:h4 >
< select>
< option selected disabled > 请选择option > 年
< option> 2020.01.23option >
select >
< select>
< option selected disabled > --option > 月
select >
< select>
< option selected disabled > --option > 日
select >
< h4> 我现在:h4 >
< select>
< option selected disabled > 请选择身份option > (非常重要)
select >
< h4> 验证码:h4 > < input type = " text" >
5.表格与表单的组合
示例:
< form action = " " >
< table border = " 2" cellpadding = " 5" >
< tr>
< td rowspan = " 4" > 总体信息td >
< td colspan = " 2" align = " center" > 用户注册td >
tr >
< tr>
< td> 用户名:td >
< td>
< input type = " text" placeholder = " 请输入用户名" >
td >
tr >
< tr>
< td> 密码:td >
< td>
< input type = " password" placeholder = " 请输入密码" >
td >
tr >
< tr>
< td align = " center" colspan = " 2" >
< input type = " submit" >
< input type = " reset" >
td >
tr >
table >
form >
(表格一般写在表单内部,因为表单无嵌套要求,但表格有)
6.与
(块)
div
全称为division,用来划分区域,类似于一个盒子,可以装段落、标题、图像等各种构成网页的元素。HTML中多数标签都可以嵌套在
div
中,
div
也可以嵌套多层
div
,将网页分割为不同的规划布局
(内联) 用来修饰文字,和
都是没有默认样式的,需要css配合才行
< div>
< h2> < a href = " #" > HTML 教程a > h2 >
< a href = " #" > < img src = " images/1.png.PNG" alt = " " weight = " 80" height = " 80" > a >
< p>
现在开始学习 HTML!HTML 实例 学习100 个实例!使用我们的编辑器,HTML 测验!HTML...
p >
< a href = " #" > www.w3school.com.cn/html/ind.....a >
div >
7.css的基础语法
格式:div{属性1:值1;属性2:值2} span{属性1:值1;属性2:值2} 同时对多个不同块进行不同的样式修饰可以利用id属性
单位:px–像素pixel、%–百分比(外容器–600px 当前容器50%–300px)
基本样式:width、height、background-color
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Documenttitle >
< style>
div { width : 50px; height : 90px; background-color : rgb ( 174, 174, 227) ; }
span { background : rgb ( 55, 225, 152) ; }
style >
head >
< body>
< div> 俄罗斯方块div >
< span> 乐高玩具span >
body >
html >
8.css样式的引入方式
内联(行间、行内)样式:在html标签上添加
属性来实现
内部样式:在
标签内添加的样式 注:内部样式的优点,可以复用代码,符合w3c的规范标准,进行结构和样式分开处理
外部样式:引入一个单独的css文件 name.css
方法一:通过标签引入外部资源,link标签中的rel属性指定资源跟页面的关系;herf属性指定资源地址, rel属性规定当前文档与被链接文档间的关系 (只有rel属性的stylesheet:【外部样式表】得到所有浏览器的支持,其他值只得到部分的支持)
方法二:@import引入外部链接
9.css中的颜色表示法
单词表示法:red、blue
十六进制表示法:#00000
rgb表示法:rgb(255,255,255) 取值范围0~255 获取颜色的工具:
提取颜色的下载地址:https://www.baidufe.com/fehelper
photoshop工具
10.css背景样式
:背景颜色
:背景图片(css作用的区域的背景图,出了css作用区域则不显示)
(背景默认地址) 默认都会水平垂直均铺满
:背景图片的平铺方式 repeat-x x轴平铺 repeat-y y轴平铺 no-repeat 不平铺 repeat (默认值,全都平铺)
:背景图片的位置 x y:number(px、%) 单词: x:left、center、right y:top、center、bottom
:背景图随滚动条的移动方式 scroll:默认值(背景位置按照当前元素进行偏移)背景动 fiexd:背景位置按照浏览器进行偏移,(覆盖)背景不动
视觉差 的实现:通过background-attachment来实现
scroll图片跟随滚动条滚动 fixed图片不动
11.css背景样式
:边框样式 solid:实线 dashed:虚线 dotted:点线
:边框粗细 px…
:边框颜色 red、#0000… 边框也可以针对某一条边特定设置:border-left/right/top/bottom-
利用border属性实现三角形
12.css文字样式
:字体类型 英文字体:Arial,‘Time New Roman’ 中文字体:微软雅黑,宋体
中文字体的英文名称:微软雅黑’Microsoft YaHei’ 宋体:SimSun 英文字体只针对英文,但中文样式可以中英文字体两者都对应 衬线体、非衬线体 (设置多个字体:防止计算机没有部分字体; 字体中出现空格时要用’'单引号引起来)
< style>
#div1 { font-family : Arial; }
#div2 { font-family : 'Times New Roman' ; }
style >
head >
< body>
< div id = " div1" > 我爱阅读div >
< p> 我爱阅读p >
< div id = " div1" > I like readingdiv >
< p> I like readingp >
< div id = " div2" > 我爱阅读div >
< p> 我爱阅读p >
< div id = " div2" > I like readingdiv >
< p> I like readingp >
body >
:字体大小 默认写法:px
单词写法: 注:字体大小一般为偶数
:字体粗细
模式:正常–normal
加粗–bold
利用number(px)100500都是普通,600 900加粗
:字体样式
正常:normal
斜体:italic带有倾斜属性的字体可以设置
oblique没有倾斜属性的也可以设置倾斜操作
color
:字体颜色
示例:
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Documenttitle >
< style>
#div1 { font-family : 宋体; font-weight : 700; font-size : 18px; color : brown; }
#div2 { font-size : 16px; color : blueviolet; font-style : italic; }
#div3 { font-weight : bold; color : aqua; }
style >
head >
< body>
< div id = " div1" >
< h1> 喜羊羊与灰太狼h1 >
div >
< div id = " div2" >
< h2> 主题介绍h2 >
< p> 《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品,
以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线,
讲述了羊狼凭借友谊和热爱,共同保卫家园、完成梦想的励志故事。p >
div >
< div id = " div3" >
< h2> 内容梗概h2 >
< p>
截至2022年7月,《喜羊羊与灰太狼》共播出作品37部2719集主线25部2042集、
网络短剧12部677集、电影10部、舞台剧5部p >
div >
body >
html >
13.css段落样式
:文本装饰
取值:下划线underline、删除线line-through、上划线overline、不添加任何装饰none
添加多个:通过空格添加
:文本大小写(仅针对英文)
取值:小写lowercase、大写uppercase、只针对首字母大写capitalize
:文本缩进
:文本对齐方式
left、right、center、justify(两端点对齐)
:定义行高
定义:一行文字的高度,上边距和下边距相等
默认:默认行高不是固定值,根据当前字体大小不断变化
取值:number(px)|比例值跟文字大小成比例
:字之间的间距
:词之间的间距(针对英文)
强行折行:针对英文和数字
(非常强烈的折行)
(没有那么强烈的折行,会产生一些空白区域)
eg.
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Documenttitle >
< style>
h2 { font-size : 20px; font-weight : bold; color : brown; text-align : center; }
#div1 { font-size : 18px; color : aqua; font-style : italic; text-indent : 2em; }
#p1 { color : blueviolet; text-align : justify; text-indent : 2em; line-height : 10px; }
#p2 { color : blue; text-decoration : underline; text-transform : capitalize; text-align : center; }
#p3 { text-indent : 1em; text-align : left; text-transform : lowercase;
color : rgb ( 236, 142, 27) ; text-decoration : line-through; }
#div2 { width : 200px; px; height : 200px; word-break : break-all;
border-color : brown; border-width : 5px; border-style : solid; }
style >
head >
< body>
< h2> 海蒂与爷爷h2 >
< div id = " div1" > 基本信息div >
< p id = " p1" > 《海蒂和爷爷》是映欧嘉纳影业公司出品德国剧情电影,由阿兰·葛斯彭纳执导,
佩特拉·比翁迪娜·沃尔普编剧,阿努克·斯特芬、伊莎贝尔·奥特曼、安娜·申斯等主演,
该片于2015年12月10日在德国上映于2019年5月16日在中国内地上映
p >
< div id = " div1" > 角色介绍div >
< p id = " p2" >
海蒂是个聪明伶俐,且具有乐观开朗的性情,心地善良的孩子。一岁时即失去双亲,
因此到五岁之前都是由姨母照顾。由于姨母必须出外工作,
便把她带至居于阿尔卑斯山的爷爷那里。
在山上的生活让海蒂自由奔放的性格彻底散发,并和牧羊少年成了好朋友
p >
< div> 影片评价div >
< p id = " p3" > 影片《海蒂和爷爷》中的故事在不同的空间场景中上演,
阿尔卑斯山和法兰克福这两座不同的城市,分割成主人公所经历的两段不同的故事,
而每一阶段发生的故事对应了年复一年的时光。
空间与时间的循环不仅仅是小海蒂成长的标志,
p >
< div id = " div2" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
div >
body >
html >
14.css复合样式
一个css属性只控制一种样式----单一样式
一个css属性控制多种样式----复合样式
(注意两者尽量不要混写,如果非要混写,一定要先写复合样式再写单一样式)
复合写法是通过空格实现的,有的无关顺序,如background、border;有的有关顺序,如font(至少要有两个值size family ,顺序不可调换)
size family必须按顺序放在最后
weight style size family √
style weight size family √
weight style/line-height family √
15.css选择器
css:#elem{} ---- html:id=“elem”
注:一个页面中,id值是唯一的; 命名规范:字母 _ - 数字(命名的第一位不能是数字)
"word">
( √
)
"wor_d">
( √
)
"wor-d">
( √
)
"word1">
( √
)
"2word">
( ×
)
写法:
驼峰写法:searchButton(小驼峰) SerchButton(大驼峰)searchSmallButton
短线写法:search-small-button
下划线写法:search_smaal_button
注:1.claas选择器可以复用
2.可以添加多个class样式
3. 多个样式的时候,样式的优先根据css中的顺序决定,而不是class属性中的顺序
4.标签+类的写法
等
你可能感兴趣的:(前端,html,css,前端)
全面指南:用户行为从前端数据采集到实时处理的最佳实践
数字沉思
营销 流量运营 系统架构 前端 内容运营 大数据
引言在当今的数据驱动世界,实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析,这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时,需要考虑多种因素,包括事件类型、时间戳、用户信
document获取元素的方法
小成语
js 平时 js
js学习总结----DOM获取元素的方法(8个)DOM:documentobjectmodel文档对象模型DOM就是描述整个html页面中节点关系的图谱,可以如下图理解在DOM中,提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法。1、获取页面中元素的方法1)、document.getElementById('元素的ID')在整个文档中,通过元素的ID获取到这个元素对象(获取的是一个
10/24 每周学习总结5
木木ainiks
1024程序员节
1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return
javascript添加p元素,html添加文字,appendChild
游勇一
javascript html添加p appendChild
javascript添加p元素,html添加文字,appendChild。网页添加p元素效果截图。个人签名:游志勇,预制板,南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制
SteveJi666
WebGL cesium EarthSDK SuperMap 3d javascript 前端 arcgis
版本简介:cesium:1.99;Supermap3D:SuperMapiClientJavaScript11i(2023);官方下载文档链家:SuperMap技术资源中心|为您提供全面的在线技术服务示例参考:support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
前端使用react-intl-universal进行国际化
Stephy_Yy
# 调研 reactjs javascript css
一、国际化/i18n目前国际化,就是开发者写对象,一个key关联若干语种的翻译。相比于浏览器自带的翻译功能,语义更加准确。“国际化”的简称:i18n(其来源是英文单词internationalization的首末字符i和n,18为中间的字符数)二、react项目国际化react-intl是业界最受欢迎的软件包之一:React-intl是雅虎的语言国际化开源项目FormatJS的一部分,通过其提供的
用html打开dbf文件,dbf文件怎么打开?dbf是什么文件?
今天也要开心呢
用html打开dbf文件
dbf文件怎么打开?dbf文件是一种数据库格式文件,用于存储数据库的数据。一些用户在工作的过程中,可能会碰到后缀名为dbf的文件,正常双击是无法打开的,我们需要借助软件才能打开dbf文件。下面给大家推荐一些软件来打开dbf文件,具体请看下文。工具/原料:1、Exceldbf是什么文件?dbf文件是一种数据库格式文件,Foxbase,Dbase,VisualFoxPro等数据库处理系统会运用到dbf
html ul点击删除,用原生实现点击删除点击的li
weixin_39993454
html ul点击删除
简单的实现方式#button{display:inline-block;}ul{list-style:none;}li{background-color:red;display:inline-block;width:20px;padding:10px;margin-left:3px;color:white;}window.onload=function(){varoBtn1=document.ge
excel打开html非常慢,解决EXCEL表格打开缓慢,文件异常臃肿庞大
史文林
excel打开html非常慢
相信很多每天在操作EXCEL的朋友,会觉得自己的表格一天比一天大,一天比一天打开慢,但表格里面实际也没多少内容。这其中的主要原因之一,就是你喜欢在多个表格之间互相复制来复制去,粘贴的时候也不是使用选择性粘贴。把原来表格里面的所有样式设置内容和不必要的数据都复制过来了,导致整个工作薄变得异常臃肿庞大。接下来我们就来分析下具体发生了什么情况和如何解决这个问题吧!1.看这个“源文件”,文件大小居然达到了
html 删除事件,html 事件的添加和删除
列蒂齐亚
html 删除事件
jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法,但性能极不好on()新版写法,事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi
html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示
睿理
html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格,可以填数的表格控件?首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
习翔宇
//已存在div//创建标签functioncreatepage(){varspan=document.createElement('span')span.innerHTML=“测试span”//设置属性span.setAttribute("class","gopage");varpagenum=document.getElementById("pagenum")pagenum.appendChi
html添加文字标注
傲世阿龍
HTML
添加文字标注有情芍药含春泪,无力蔷薇卧晓枝。作者秦观效果:
Java在Controller生成Excel供前端直接下载
pengjunlee
SpringBoot重点详解 导出文件 POI excel Controller
在许多企业办公系统中,经常会有用户要求,需要对数据进行统计并且可以直接下载Excel文件,这样子的话,既然客户提出了要求,我们就应该去满足吖,毕竟客户是上帝嘛,那么我们如何去实现呢?且看我为你一一道来。POI简介JakartaPOI是一套用于访问微软格式文档的JavaAPI。JakartaPOI有很多组件组成,其中有用于操作Excel格式文件的HSSF和用于操作Word的HWPF,在各种组件中目前
什么是 PHP? 为什么用 PHP? 谁在用 PHP?
m0_37438181
永远学习 php 开发语言
一、什么是PHP?PHP(HypertextPreprocessor,超文本预处理器)是一种广泛应用于Web开发的通用开源脚本语言。PHP主要用于服务器端编程,可以嵌入HTML中,与数据库进行交互,生成动态网页内容。它具有以下特点:简单易学:语法相对简单,容易上手,对于初学者来说是一个不错的选择。跨平台性:可以在多种操作系统上运行,如Windows、Linux、Unix等。丰富的函数库:提供了大量
HTML5概述
WFIT~SKY
Web前端 html5 前端 html
1.HTML概述1.1HTML定义HTML超文本标记语言,其中超文本是链接,标记也叫标签(即带尖括号的文本)。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html:整个网页head:网页头部,存放给浏览器看的代码,例如CSSbody:网页主体,存放给用户看的代码,例如文字、图片title:网页标题1.3HTML关系父子关系(嵌套)兄弟关系(并列)2.HTML开发环境2.1
ceph KVM使用rbd做存储
SkTj
博客:https://blog.csdn.net/bobpen/article/details/40112939博客:http://www.aboutyun.com/thread-13195-1-1.html导言很多cepher都会使用RBD块存储功能,下面介绍qemu-kvm访问RBD的方法。操作目前Ubuntu14.04.x和CentOS7.1(如使用CentOS7建议升级到7.1,CentO
解决前端导出excel文件,打开为乱码
荔枝,你让我拿什么荔枝!
vue 前端 elementui vue.js
前端开发中,导入和导出文件是比较常见的业务场景,常见的情况是:后端返回一个二进制的流文件,前端将其转化为excel文件即可。但是往往会出现转化后的excel文件内容位乱码的情况,本文中提供了两个解决方案:方案一:用户自定义上传方法添加附件添加附件代码解读:上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式:1.组件自带的上传方法,只需要给其设置acti
动态生成的html元素绑定click事件
.NET跨平台
Jquery及其组件 html jquery
第一篇博客,开启技术博客的生涯,欢迎大家批评指教(坚信妹子也可以做好程序猿)今天想说帮公司做项目的时候遇到的一个小问题,动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行,然后序列号还要随着增加,当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决,但是发现一个问题会出现事件绑定很多次
CesiumJS+SuperMap3D.js混用实现通视分析
SteveJi666
WebGL cesium EarthSDK SuperMap 3d javascript 前端 arcgis
版本简介:cesium:1.99;Supermap3D:SuperMapiClientJavaScript11i(2023);官方下载文档链家:SuperMap技术资源中心|为您提供全面的在线技术服务示例参考:support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
HTML添加文字
若无心_.
HTML html5
一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲:在第四次工业革命中共谋包容增长
CSS中如何实现鼠标悬停效果?
神明木佑
css 前端
在CSS中,您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子,展示了如何在鼠标悬停时改变文本颜色和背景颜色:MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
html加载界面发送ajax请求
足球数据分析
html ajax 前端
html加载界面发送ajax请求makeAjaxRequest();functionmakeAjaxRequest(){varxhr=newXMLHttpRequest();//创建一个新的XMLHttpRequest对象xhr.open('GET','yourUrlPath',true);//配置请求,设置请求类型、URL和是否异步xhr.send();//发送请求}
【Java】如何将二进制转换成MultipartFile
Mxin5
Java java 开发语言
业务场景:前端发送请求到后端进行文件上传,后端接收文件并调用第三方接口进行文件处理,响应格式为二进制,然后我们需要将二进制进行转换为MultipartFile进行文件上传。如果你想要将File转换成MultipartFile,可以参考:【Java】如何将File转换成MultipartFile_javafile转multipartfile_MXin5的博客-CSDN博客1.传递二进制respons
看《绝望主妇》学英语
高雅_1f79
第四季第九集剧集连接https://www.imeiju.cc/Play/3543-1-8.html单词1.tendverbUS/tend/1)tendverb(BELIKELY)趋向;倾向于[I]tobelikelytohappenortohaveaparticularcharacteristicoreffect:Wetendtoeatathome.Childrentendtobelikethe
Jacoco的XML报告详解
CrissChan
自动化测试 持续交付和持续测试 jacoco 测试
使用jacococli完成jacoco测试报告生成后,会看到有一个.xml结尾的文件,这个就是xml格式的覆盖率报告。除了xml还有csv、html格式的报告,本文进介绍xml报告。DTD文件在介绍jacoco的xml报告之前,我们应该先看一下对应的DTD文件的内容。(DTD的全称为DocumentTypeDefinition,是一种文件定义格式,它规定了XML文件结构为XML文件提供了语法与规则
【Java将File完美转为MultipartFile】:亲测有效
阿火~
java
由于multipartFile有很多有用的api,但是有时候我们接收到前台的参数是文件名和文件内容,而不是文件,此时不能使用multipartFile接收,导致处理起来很不方便,比如我用minio上传文件,minio需要multipartFile类型的文件,而我拿到前端传来的文件名和文件内容只能自己通过File类创建文件,所以如果想用multipartFile类型就需要自己转换,然而天不遂人愿,并
js的书写位置和css的书写位置的区别?为什么要这样写?
李是啥也不会
javascript css 开发语言
JavaScript和CSS的书写位置有以下区别:CSS通常写在标签中,或者在外部样式表文件中()。CSS主要用于控制页面的视觉样式和布局,通常在HTML文件的部分引入,以确保在页面渲染时样式已经加载完毕,从而避免样式闪烁。JavaScript通常写在标签中,或者在外部脚本文件中()。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾(标签之前)
基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element(解决SecureRandom造成的服务器请求缓慢)
Tate_Brown
git JAVA IDEA DEBUG VUE
用md5两次加盐密码,可以灵活更换算法--直接上代码地址:JAVA后台:https://github.com/TateBrownJava/TwoFALogindemoBackendVue前端:https://github.com/TateBrownJava/TwoFALoginDemofrontend-------------------------------------------------
react里的index.js是怎么跟index.html结合起来的?
SherrinfordL
image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中,所以你无法直观的看到这些配置。你可以在项目下运行npmruneject,被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是,你执行npmrunstart时,启动的webpack-dev-server,会加载react-script项目conf
Java开发中,spring mvc 的线程怎么调用?
小麦麦子
spring mvc
今天逛知乎,看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题,觉得挺有意思的,那哥们儿问的也听仔细,下面的回答也很详尽,分享出来,希望遇对遇到类似问题的Java开发程序猿有所帮助。
问题:
在用spring mvc架构的网站上,设一线程在虚拟机启动时运行,线程里有一全局
maven依赖范围
bitcarter
maven
1.test 测试的时候才会依赖,编译和打包不依赖,如junit不被打包
2.compile 只有编译和打包时才会依赖
3.provided 编译和测试的时候依赖,打包不依赖,如:tomcat的一些公用jar包
4.runtime 运行时依赖,编译不依赖
5.默认compile
依赖范围compile是支持传递的,test不支持传递
1.传递的意思是项目A,引用
Jaxb org.xml.sax.saxparseexception : premature end of file
darrenzhu
xml premature JAXB
如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误:
org.xml.sax.saxparseexception : premature end of file
很有可能时你直接读取文件为inputstream,然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
CSS Specificity
周凡杨
html 权重 Specificity css
有时候对于页面元素设置了样式,可为什么页面的显示没有匹配上呢? because specificity
CSS 的选择符是有权重的,当不同的选择符的样式设置有冲突时,浏览器会采用权重高的选择符设置的样式。
规则:
HTML标签的权重是1
Class 的权重是10
Id 的权重是100
java与servlet
g21121
servlet
servlet 搞java web开发的人一定不会陌生,而且大家还会时常用到它。
下面是java官方网站上对servlet的介绍: java官网对于servlet的解释 写道
Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
eclipse中安装maven插件
510888780
eclipse maven
1.首先去官网下载 Maven:
http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz
下载完成之后将其解压,
我将解压后的文件夹:apache-maven-3.2.3,
并将它放在 D:\tools目录下,
即 maven 最终的路径是:D:\tools\apache-mave
jpa@OneToOne关联关系
布衣凌宇
jpa
Nruser里的pruserid关联到Pruser的主键id,实现对一个表的增删改,另一个表的数据随之增删改。
Nruser实体类
//*****************************************************************
@Entity
@Table(name="nruser")
@DynamicInsert @Dynam
我的spring学习笔记11-Spring中关于声明式事务的配置
aijuans
spring 事务 配置
这两天学到事务管理这一块,结合到之前的terasoluna框架,觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容,对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种,我承认后两种的内容很好,很强大。但是实际的项目当中
java 动态代理简单实现
antlove
java handler proxy dynamic service
dynamicproxy.service.HelloService
package dynamicproxy.service;
public interface HelloService {
public void sayHello();
}
dynamicproxy.service.impl.HelloServiceImpl
package dynamicp
JDBC连接数据库
百合不是茶
JDBC编程 JAVA操作oracle数据库
如果我们要想连接oracle公司的数据库,就要首先下载oralce公司的驱动程序,将这个驱动程序的jar包导入到我们工程中;
JDBC链接数据库的代码和固定写法;
1,加载oracle数据库的驱动;
&nb
单例模式中的多线程分析
bijian1013
java thread 多线程 java多线程
谈到单例模式,我们立马会想到饿汉式和懒汉式加载,所谓饿汉式就是在创建类时就创建好了实例,懒汉式在获取实例时才去创建实例,即延迟加载。
饿汉式:
package com.bijian.study;
public class Singleton {
private Singleton() {
}
// 注意这是private 只供内部调用
private static
javascript读取和修改原型特别需要注意原型的读写不具有对等性
bijian1013
JavaScript prototype
对于从原型对象继承而来的成员,其读和写具有内在的不对等性。比如有一个对象A,假设它的原型对象是B,B的原型对象是null。如果我们需要读取A对象的name属性值,那么JS会优先在A中查找,如果找到了name属性那么就返回;如果A中没有name属性,那么就到原型B中查找name,如果找到了就返回;如果原型B中也没有
【持久化框架MyBatis3六】MyBatis3集成第三方DataSource
bit1129
dataSource
MyBatis内置了数据源的支持,如:
<environments default="development">
<environment id="development">
<transactionManager type="JDBC" />
<data
我程序中用到的urldecode和base64decode,MD5
bitcarter
c MD5 base64decode urldecode
这里是base64decode和urldecode,Md5在附件中。因为我是在后台所以需要解码:
string Base64Decode(const char* Data,int DataByte,int& OutByte)
{
//解码表
const char DecodeTable[] =
{
0, 0, 0, 0, 0, 0
腾讯资深运维专家周小军:QQ与微信架构的惊天秘密
ronin47
社交领域一直是互联网创业的大热门,从PC到移动端,从OICQ、MSN到QQ。到了移动互联网时代,社交领域应用开始彻底爆发,直奔黄金期。腾讯在过去几年里,社交平台更是火到爆,QQ和微信坐拥几亿的粉丝,QQ空间和朋友圈各种刷屏,写心得,晒照片,秀视频,那么谁来为企鹅保驾护航呢?支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢?本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个排好序的数组的一个旋转,输出旋转数组的最小元素
bylijinnan
java
public class MinOfShiftedArray {
/**
* Q69 旋转数组的最小元素
* 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个排好序的数组的一个旋转,输出旋转数组的最小元素。
* 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转,该数组的最小值为1。
*/
publ
看博客,应该是有方向的
Cb123456
反省 看博客
看博客,应该是有方向的:
我现在就复习以前的,在补补以前不会的,现在还不会的,同时完善完善项目,也看看别人的博客.
我刚突然想到的:
1.应该看计算机组成原理,数据结构,一些算法,还有关于android,java的。
2.对于我,也快大四了,看一些职业规划的,以及一些学习的经验,看看别人的工作总结的.
为什么要写
[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖
comsci
开源项目
为什么这样说呢? 因为科学和技术的发展有时候需要一个平缓和长期的积累过程,但是行政和商业体系本身充满各种不稳定性和不确定性,如果你希望长期从事某个科研项目,但是却又必须依赖于某种行政和商业体系,那其中的过程必定充满各种风险。。。
所以,为避免这种不确定性风险,我
一个 sql优化 ([精华] 一个查询优化的分析调整全过程!很值得一看 )
cwqcwqmax9
sql
见 http://www.itpub.net/forum.php?mod=viewthread&tid=239011
Web翻页优化实例
提交时间: 2004-6-18 15:37:49 回复 发消息
环境:
Linux ve
Hibernat and Ibatis
dashuaifu
Hibernate ibatis
Hibernate VS iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架,当前版本是3.05。它出身于sf.net,现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架,当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言,iBATIS 是一种“Sql Mappi
备份MYSQL脚本
dcj3sjt126com
mysql
#!/bin/sh
# this shell to backup mysql
#
[email protected] (QQ:1413161683 DuChengJiu)
_dbDir=/var/lib/mysql/
_today=`date +%w`
_bakDir=/usr/backup/$_today
[ ! -d $_bakDir ] && mkdir -p
iOS第三方开源库的吐槽和备忘
dcj3sjt126com
ios
转自
ibireme的博客 做iOS开发总会接触到一些第三方库,这里整理一下,做一些吐槽。 目前比较活跃的社区仍旧是Github,除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流,这里主要介绍一下Github里面流行的iOS库。 首先整理了一份
Github上排名靠
html wlwmanifest.xml
eoems
html xml
所谓优化wp_head()就是把从wp_head中移除不需要元素,同时也可以加快速度。
步骤:
加入到function.php
remove_action('wp_head', 'wp_generator');
//wp-generator移除wordpress的版本号,本身blog的版本号没什么意义,但是如果让恶意玩家看到,可能会用官网公布的漏洞攻击blog
remov
浅谈Java定时器发展
hacksin
java 并发 timer 定时器
java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor,从后者的表现来看,可以考虑完全替代Timer了。
Timer与ScheduleThreadPoolExecutor对比:
1.
Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
移动端页面侧边导航滑入效果
ini
jquery Web html5 css javascirpt
效果体验:http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js,该版本的jQuery库是用于支持HTML5的浏览器上,不再兼容IE8以前的浏览器,现在移动端浏览器一般都支持HTML5,所以使用该jQuery没问题。HTML文件代码:
<!DOCTYPE html>
<h
AspectJ+Javasist记录日志
kane_xie
aspectj javasist
在项目中碰到这样一个需求,对一个服务类的每一个方法,在方法开始和结束的时候分别记录一条日志,内容包括方法名,参数名+参数值以及方法执行的时间。
@Override
public String get(String key) {
// long start = System.currentTimeMillis();
// System.out.println("Be
redis学习笔记
MJC410621
redis NoSQL
1)nosql数据库主要由以下特点:非关系型的、分布式的、开源的、水平可扩展的。
1,处理超大量的数据
2,运行在便宜的PC服务器集群上,
3,击碎了性能瓶颈。
1)对数据高并发读写。
2)对海量数据的高效率存储和访问。
3)对数据的高扩展性和高可用性。
redis支持的类型:
Sring 类型
set name lijie
get name lijie
set na
使用redis实现分布式锁
qifeifei
在多节点的系统中,如何实现分布式锁机制,其中用redis来实现是很好的方法之一,我们先来看一下jedis包中,有个类名BinaryJedis,它有个方法如下:
public Long setnx(final byte[] key, final byte[] value) {
checkIsInMulti();
client.setnx(key, value);
ret
BI并非万能,中层业务管理报表要另辟蹊径
张老师的菜
大数据 BI 商业智能 信息化
BI是商业智能的缩写,是可以帮助企业做出明智的业务经营决策的工具,其数据来源于各个业务系统,如ERP、CRM、SCM、进销存、HER、OA等。
BI系统不同于传统的管理信息系统,他号称是一个整体应用的解决方案,是融入管理思想的强大系统:有着系统整体的设计思想,支持对所有
安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题
wudixiaotie
function
1.在~/.bashrc最后加入
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"
2.重新启动terminal输入:
rvm use ruby-2.2.1 --default
把当前安装的ruby版本设为默