一、html5语义化
二、HTML5新特性
1、HTML5新特性的浏览器支持情况
http://www.caniuse.com/#index
2、新的选择器
querySelector 获取单个元素 如:
var obj = document . querySelector ( '.box' );
var obj1 = document . querySelector ( '#box' );
var obj2 = document . querySelector ( '[name="username"]);
querySelectorAll 获取多个元素集合 如:
var obj = document . querySelectorAll ( '.box' );
getElementsByClassName 获取class的元素集合
3、获取class列表属性 : 获取对象的className的集合
classList
length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法
如:
< div class = "a b" > div > alert ( document . querySelector ( '#div' ). classList ) //输出a b
4、data自定义数据
-dataset :是data-的集合
data-name : dataset.name data-name-first : dataset.nameFirst 如:
< div id = "box" data - name = "zhangsan" data - user - sex = "nan" > div >
var obj = document . querySelector ( '#box' );
console . log ( obj . dataset . name )
console . log ( obj . dataset . userSex )
-Data数据在jquery mobile中有着重要作用
5、JSON的新方法
-p arse() : 把字符串转成json, 类似eval()方法
字符串中的属性要严格的加上引号
-stringify() : 把json转化成字符串
会自动的把双引号加上
-新方法与eval的区别 :eval都能转换,是JSON.parse()只能转换json
-新方法的应用
深度克隆新对象 如:
//以往的方法
var a ={ "name" : "zhangsan" };
var b = a ;
b . name = "lisi" ;
alert ( a . name ); //lisi
//html5 -json新方法
var a ={ "name" : "zhangsan" };
var str = JSON . stringify ( a ); //转换成字符串
var b = JSON . parse ( str ); //转换成对象
b . name = "lisi" ;
alert ( a . name ); //zhangsan
http://www.json.org/去下载json2.js
6、延迟加载JS
很多浏览器都采用了并行加载JS,但还是会影响其他内容
defer : 延迟加载,会按顺序执行,在onload执行前被触发(或者简单理解为是在页面加载完时执行,会按顺序) async : 异步加载,加载完就触发,有顺序问题(并行加载,而且不会按照顺序加载) 如:
< script src = "a.js" defer > script >
Labjs库:(第三方插件:最大化提高性能,即能异步,也能延迟)
如:labjs.com/documentation.php
labjs中wait()等待前面的加载完才执行
< script >
$LSB
. script ( 'a.js' )
. script ( 'b.js' )
. script ( 'c.js' ). wait ()
. script ( 'd.js' ). wait ();
script >
seaJs,requireJs框架集成了延迟和异步加载
7、历史管理
onhashchange
:改变hash值来管理 如:改变hash方法 window.location.hash=”cont”;
监听hash根据hash改变现实内容: html5事件 onhashchange 案例:
< ul class = "nav" >
< li data - hash = "index" >首页 li >
< li data - hash = "news" >新闻 li >
< li data - hash = "sports" >体育 li >
< /ul>
首页内容
div >
< div data - content = "news" >新闻内容 div >
< div data - content = "sports" >体育内容 div >
< /div>
/ /知识点 querySelector querySelectorAll 选择器
//substring截取字符串
//onhashchange html5的监听事件
window . onload = function (){
var oLi = document . querySelectorAll ( 'li' );
var oCont = document . querySelector ( '.cont' ). querySelectorAll ( 'div' );
for ( var i = 0 ; i < oLi . length ; i ++) {
oLi [ i ]. onclick = function (){
window . location . hash = this . dataset . hash ;
}
};
function changeCont (){ //根据hash改变内容
var hash = window . location . hash . substring ( 1 );
for ( var i = 0 ; i < oCont . length ; i ++){
if ( hash == oCont [ i ]. dataset . content ){
oCont [ i ]. style . display = "block" ;
} else {
oCont [ i ]. style . display = "none" ;
}
}
}
changeCont ();
window . onhashchange = function (){
changeCont ();
}
}
history :
服务器下运行
pushState : 三个参数 :数据 标题(都没实现) 地址(可选)
popstate事件 : 读取数据 event.state
注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面
案例:
< ul class = "nav" >
< li data - hash = "index" >首页 li >
< li data - hash = "news" >新闻 li >
< li data - hash = "sports" >体育 li >
< /ul>
首页内容
div >
< div data - content = "news" >新闻内容 div >
< div data - content = "sports" >体育内容 div >
< /div>
window.οnlοad=function(){
var oLi=document.querySelectorAll('li');
var oCont=document.querySelector('.cont').querySelectorAll('div');
var iNow=0;
for (var i = 0; i < oLi.length; i++) {
oLi[i].οnclick=function(){
var hash=this.dataset.hash;
history.pushState(hash,'',iNow++);/ /第二个参数是标题很多浏览器没实现便可不写,加上第三个参数便可以改变网址,但是是虚假的网址刷新就没有了,所以得配合后端使用
changeCont ( hash );
}
};
function changeCont ( hash ){ //根据hash改变内容
for ( var i = 0 ; i < oCont . length ; i ++){
if ( hash == oCont [ i ]. dataset . content ){
oCont [ i ]. style . display = "block" ;
} else {
oCont [ i ]. style . display = "none" ;
}
}
}
window . onpopstate = function ( ev ){
console . log ( 1 );
changeCont ( event . state );
}
}
script >
8、拖放事件
draggable :
设置为true,元素就可以拖拽了 (如单独设置draggable为true,前台拖拽的时候只是有拖拽的拖影,而不是整个元素都能拖动)
拖拽元素事件 :
事件对象为被拖拽元素(在给元素绑定拖拽事件时,必须得给元素设置draggable=”true”属性)
dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间,连续触发
dragend , 拖拽结束触发
案例:
< style >
# box { height : 100px ; width : 100px ; border : 1px solid # 999 ;}
< /style>
div >
< script >
window . onload = function (){
var oDrag = document . querySelector ( '#box' );
oDrag . ondragstart = function (){
console . log ( "拖拽前" );
}
oDrag . ondrag = function (){
console . log ( "拖拽进行中" );
}
oDrag . ondragend = function (){
console . log ( "结束" );
}
}
script >
目标元素事件 :
事件对象为目标元素(目标元素通常是被拖拽元素,碰撞到最终的元素,如拖拽上传,上传框就是目标元素)
dragenter , 进入目标元素触发,相当于mouseover (元素进入不会触发,一定是鼠标进入才触发)
dragover ,进入目标、离开目标之间,连续触发
dragleave , 离开目标元素触发,相当于mouseout
drop , 在目标元素上释放鼠标触发 (需要在dragover事件中设置阻止默认事件,不然拖动的时候鼠标移至都是禁止的状态,就无法释放,也就不能触发drop事件)
案例:
< style >
# box ,# mubiao { height : 100px ; width : 100px ; border : 1px solid # 999 ;}
< /style>
div >
< div id = "mubiao" > div >
< script >
window . onload = function (){
var index = 0 ;
var oMubiao = document . querySelector ( '#mubiao' );
oMubiao . ondragenter = function (){
this . style . background = "#000" ;
}
oMubiao . ondragleave = function (){
this . style . background = "#999" ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
console . log ( index ++);
}
oMubiao . ondrop = function (){
alert ( "鼠标放开了" );
}
}
script >
事件的执行顺序 :drop不触发的时候 dragstart > drag > dragenter > dragover > dragleave > dragend 事件的执行顺序 :drop触发的时候(dragover的时候阻止默认事件) dragstart > drag > dragenter > dragover > drop > dragend 不能释放的光标和能释放的光标不一样,需要触发drop释放事件,在上例中
解决火狐下的问题
(火狐不设置的话只支持dragstart事件其他都不支持)
必须设置dataTransfer对象才可以拖拽除图片外的其他标签 案例:如在dragstart的event对象中设置dataTransfer.setData 设置一个参数 dataTransfer对象 (属于event事件对象)
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据,根据key值,获取对应的value
effectAllowed
effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
三个参数:指定的元素,坐标X,坐标Y
获取外部拖拽的文件,返回一个filesList列表 filesList下有个type属性,返回文件的类型
关于:setDate,getDate,effectAllowed,setDragImage的案例
< style >
# box ,# mubiao { height : 100px ; width : 100px ; border : 1px solid # 999 ;}
< /style>
div >
< div id = "mubiao" > div >
< img id = "img" src = "http://www.baidu.com/img/bd_logo1.png" alt = "" >
< script >
window . onload = function (){
var index = 0 ;
var oDrag = document . querySelector ( '#box' );
var oMubiao = document . querySelector ( '#mubiao' );
oDrag . ondragstart = function ( ev ){
var oImg = document . querySelector ( '#img' );
console . log ( "拖拽前" );
ev . dataTransfer . setData ( 'name' , 'demo' );
ev . dataTransfer . effectAllowed = "link" ;
ev . dataTransfer . setDragImage ( this , 50 , 50 );
//此处this可以是其他对象,也可以试图片对象比如换
//ev.dataTransfer.setDragImage(oImg,50,50);
// 扩展拖拽排序,百度音乐播放器,拖拽排列歌曲列表
}
oDrag . ondrag = function (){
console . log ( "拖拽进行中" );
}
oDrag . ondragend = function (){
console . log ( "结束" );
}
oMubiao . ondragenter = function (){
this . style . background = "#000" ;
}
oMubiao . ondragleave = function (){
this . style . background = "#999" ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
console . log ( index ++);
}
oMubiao . ondrop = function ( ev ){
alert ( ev . dataTransfer . getData ( 'name' ));
}
}
script >
关于:files的案例
< style >
# mubiao { height : 200px ; width : 200px ; border : 1px solid # 999 ;}
< /style>
div >
< script >
window . onload = function (){
var oMubiao = document . querySelector ( '#mubiao' );
oMubiao . ondragenter = function (){
this . innerHTML = '可以释放啦' ;
}
oMubiao . ondragleave = function ( ev ){
this . innerHTML = '请在此区域释放鼠标' ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
}
oMubiao . ondrop = function ( ev ){
ev . preventDefault ();
console . log ( ev . dataTransfer . files [ 0 ]. type )
}
}
script >
9、FileReader(读取文件信息)
readAsDataURL
参数为要读取的文件对象,将文件读取为DataUrl
onload
当读取文件成功完成的时候触发此事件 this. result , 来获取读取的文件数据,如果是图片,将返回base64格式的图片数据
实例 拖拽删除列表 拖拽购物车 上传图片预览功能 简单案例:
< style >
# mubiao { height : 200px ; width : 200px ; border : 1px solid # 999 ;}
< /style>
div >
< img src = "" id = "img" alt = "" >
< script >
window . onload = function (){
var oImg = document . querySelector ( '#img' );
var oMubiao = document . querySelector ( '#mubiao' );
oMubiao . ondragenter = function (){
this . innerHTML = '可以释放啦' ;
}
oMubiao . ondragleave = function ( ev ){
this . innerHTML = '请在此区域释放鼠标' ;
}
oMubiao . ondragover = function ( ev ){
ev . preventDefault ();
}
oMubiao . ondrop = function ( ev ){
ev . preventDefault ();
var fs = ev . dataTransfer . files ; //获取文件对象
console . dir ( fs [ 0 ]);
var fr = new FileReader (); //实例化读取文件信息对象
fr . readAsDataURL ( fs [ 0 ]); //将文件读取为dataUrl格式
fr . onload = function (){ //读取文件成功后事件
//alert(this.result);
oImg . src = this . result ; //假如上传的是图片可以复制给一个图片对象
}
}
}
script >
10、可做练习:
理解新的选择器
获取class列表属性
Json的新方法
data自定义数据
延迟加载JS
历史管理
拖放事件
一些可能感兴趣的资源:
http://ued.baidu.com/?p=894
http://www.caniuse.com
你可能感兴趣的:(html5)
html5 二进制数据解析,JavaScript读写二进制数据的方法详解
如果有片海
html5 二进制数据解析
前言二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数,如果想要在前端中处理音频和视频。那你必须要对二进制数据有很好地掌握和操作能力。下面话不多说了,来一起看看详细介绍的吧类型化数组的出现类型化数组是HTML5中引入的API,它能够让开发者使用JavaScript直接操作二进制数据。在类型化数组出现之前,我们是无法直接通过JavaScript操作二进制数据,通常都是操作J
html5+ push-消息推送
代码简单说
html5+ h5+ mui js推送 打包app
push-消息推送Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过plus.push可获取推送消息管理对象。方法:addEventListener:添加推送消息事件监听器clear:清空所有推送消息createMessage:创建本地消息getAllMessage:获取所有推送消息getClientInfo:获取客户端推送标识信息setAutoNotification:设置程序是否
如何使用Vue3创建在线三维模型展示?
ScriptEcho
前端
本文由ScriptEcho平台提供技术支持项目地址:传送门代码相关的技术博客代码应用场景介绍本段代码使用RoughJS库在HTML5Canvas上创建了手绘风格的图像,展示了RoughJS库的强大功能,可用于创建具有有机手绘外观的图形。代码基本功能介绍代码通过RoughJS库创建了一个火焰状的图形,包括:火焰主体:使用path()函数绘制,采用不规则的形状和粗糙的线条。火焰细节:添加了额外的pat
【Three.js】JS 3D library(一个月进化史)
Tiffany_Ho
前端 Three.js
#春节过完了,该继续投入学习了~作为一个平面开发者,想要增进更多的技能,掌握web3D开发#前置知识与技能1.JavaScript基础-掌握ES6+语法(类、模块、箭头函数、解构等)-熟悉异步编程(Promise、async/await)-了解事件循环和DOM操作2.HTML5和CSS3-熟悉Canvas和WebGL的基础概念-了解CSS3动画和变换(transform、transition)3.
Python如何播放本地音乐并在web页面播放
玩人工智能的辣条哥
开源项目AI Sphere Butler python 前端 开发语言
环境:Python问题描述:Python如何播放本地音乐并在web页面播放解决方案:要在Python中播放本地音乐并在Web页面中播放,您可以采用两种不同的方法:一种是在服务器端使用Python播放音频文件,另一种是创建一个Web应用程序,在客户端通过HTML5的标签来播放音频文件。下面我将分别介绍这两种方法。方法1:使用Python播放本地音乐如果您只是想在服务器端(例如在开发环境中)播放本地音
video 标签实现进度条不可拖动,并监听观看状态、超时触发挂机验证
牡丹城沉静的萝卜
html5 前端 javascript
需求:用户观看视频时,实时监听观看状态,超过一定时长后,触发挂机验证,并禁止拖动滚动条快进查看。技术:主要是用html5的vidoe标签做的,用到了自带的暂停(pause)、播放(play)、监听(timeupdate)等事件html:javascript:data(){return{videoUrl:'',video:{currTime:'',maxTime:'',tipsTime:0,//出现
Ajax基础学习
喜欢代码的新之助
ajax 学习 okhttp
AJAX浏览器本身就具备网络通信的能力,但在早期浏览器并没有把这个能力开放给JS最早是微软在IE浏览器中把这一能力向JS开放,让JS可以在代码中实现发送请求,这项技术在2005年被正式命名为AJAX(AsynchronousJavascriptAndXML)这套API主要依靠一个构造函数完成;该构造函数的名称为XMLHttpRequest,简称为XHR由于XHRAPI有着诸多缺陷,在HTML5和E
HTML5 起步
强强学习
html5 前端 html
HTML5是W3C与WHATWG合作的结果,WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表单和应用程序,而W3C专注于XHTML2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML。HTML5中的一些有趣的新特性:用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好
canvas 添加html元素,给canvas添加内容
云舞空城
canvas 添加html元素
画布是一个矩形区域,您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度:通过JavaScript来绘制canvas元素本身是没有canvas画布与画布内容都缩小如何实现?如何将canvas复制给另外一个canvascanvas怎么根据坐标获取上面的内容html5canvas清除
HTML5新特性
augenstern416
HTMl html 前端
1.声明方式修改html5:2.更多的语义化标签header(网页头部)footer(网页尾部)aside(侧边栏)section(内容区域块)3.新的input表单输入类型与属性类型邮箱数值输入文件导入上传本地文件,需js代码配合。如果需要上传多个文件,给表单添加mulitiple属性。如果上传图片,给表单添加enctype属性。constmyFile=document.getElementBy
html5游戏引擎-Pharse.js学习笔记(一)
18520195858
游戏 javascript c/c++ ViewUI
1.前言前几天随着flappybird这样的小游戏的火爆,使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎,感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎,并且将从看官网demo的学习整理成博客和大家一起分享。我了解过cocos-2dforhtml5和phaser.js这两个引擎,其中前者比较复杂,对于有过coco
高级前端工程师Vue面试题
盼盼盼
面试题 前端 前端
HTML/CSS1.解释HTML5中的元素及其用途。元素用于通过JavaScript绘制图形,比如图表、图像处理等。它提供了一个图形上下文,可以进行2D图形绘制。2.CSS中display:none和visibility:hidden有什么区别?display:none会将元素从文档流中完全移除,不占据空间。而visibility:hidden则元素依然占据空间,只是变得不可见。3.描述CSSFl
html5 判断长按操作,移动端h5模拟长按事件
weixin_39933414
html5 判断长按操作
1、标志位vartimer='';varisLongTouch=false;//加个标志位,防止settimeout因为事件循环和实际时间有偏差vartarget=document.getElementById('target');target.addEventListener('touchstart',function(){timer=setTimeout(function(){isLongTo
HTML5(十二)——一文读懂 WebSocket 原理
m0_70646989
Web前端 经验分享 前端 前端框架
二、WebSocket通信过程================WebSocket协议可分为两部分:握手阶段和数据通信阶段。WebSocket为应用层协议,定义在TCP/IP协议栈之上,连接服务器的url是以ws或wss开头的。ws开头的默认TCP端口为80,wss开头的默认端口为443。ws(websocket)是不安全的,容易被窃听,只要别人知道你的ip和端口号,任何人都可以去连接通讯。wss(
一文读懂Websocket
渣渣高
websocket javascript 前端 网络协议
系列文章目录提示:通过本章节的学习,你想深入了解什么是websocket。文章目录系列文章目录前言一、Websocket是什么?二、如何使用Websocket前端创建流程后端创建流程websocket应用场景:websocket缺点:websocket总结:前言提示:这里可以添加本文要记录的大概内容:例如:websocket是html5新增的全双工通讯协议,基于Tcp协议,属于应用层协议。提示:以
网页设计与制作成品——蛋糕甜品店铺(HTML+CSS+JavaScript)
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript HTML学生个人网页设计 课程设计 网页设计与制作成品
静态网站的编写主要是用HTMLDIV+CSSJS等来完成页面的排版设计,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。精彩专栏推荐❤
【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)
二挡起步
web前端期末大作业 web设计网页规划与设计 html html5 css 课程设计 HTML学生个人网页设计 javascript 网页设计作业
文章目录二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码六、如何让学习不再盲目七、更多干货❤【作者主页——获取更多优质源码】❤【学习资料/简历模板/面试资料/网站设计与制作】❤【web前端期末大作业——毕设项目精品实战案例】#一、网站题目学生管理系统网页设计、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。二、✍️网站描述️HTML网页设计,采用DIV+C
基于自定义WebView实现H5混合开发
小二李
Flutter Flutter 组件封装 flutter webview
pubspec.yaml添加webview插件flutter_webview_plugin:^0.4.0webview.dart基于webview的组件封装constCATCH_URLS=['m.ctrip.com/','m.ctrip.com/html5/','m.ctrip.com/html5'];classWebViewextendsStatefulWidget{finalStringurl
混合开发框架整理:使用Crosswalk + WebViewJavascriptBridge进行混合开发
hwj3747
Android 混合开发 android html5 javascript jquery html
作者:hwj3747转载请注明Crosswalk介绍目前APP的开发模式大多基于H5+原生壳的开发模式,这时候使用到的WebView的性能就至关重要。我们知道,Android平台上,系统的碎片化比较严重,同Android版本的WebView的H5解析能力也有较大差异,导致相应的HTML5应用一致性难以保证。所以在做混合开发的时候,对Android系统的适配是一个比较麻烦的问题。这个时候,如果能在我
区分h5页面和原生页面
Jenna的海塘
前端
现在为了方便开发很多app中都会嵌入H5页面,H5页面和原生页面还是有一些差异的。下面是这两个的概念和区别一、技术基础与实现方式H5页面:基于HTML5、CSS和JavaScript等Web技术开发。本质上是一个网页应用,可以通过移动设备的浏览器访问,也可以被封装成一个类似原生应用的形式(通过一些工具如Cordova、PhoneGap等),在设备上安装和运行。原生页面:为特定操作系统(如iOS使用
python创建画布语句_canvas元素创建画布
weixin_39847945
python创建画布语句
Phaser桌面和手机游戏HTML5框架Phaser是一个流行的2D开源游戏框架,可以用来开发桌面或手机浏览器HTML5游戏,适合侧视或顶视风格:Phaser同时支持Canvas和WebGL渲染引擎,预置了完备的精灵动画、输入管理、瓦片地图、补间动画、资源加载器、物理系统、粒子系统等特性,几乎能够满足你开发一个2D游戏的任何...文章马拉喀什2017-11-021163浏览量HTML5学习手笔四:
【虚幻引擎UE】UE4.23到UE5.5的核心功能变化
灵境引路人
虚幻 ue4 ue5
简单总结从UE4.23到UE5.5,虚幻引擎的重大变化:1.WebGL/HTML5平台支持和像素流UE4.23-UE4.25:移除官方HTML5支持,改为社区插件维护。但通过第三方插件(如WebAssembly+WebGPU)可在浏览器运行部分项目。UE5.1:对像素流的支持度提升,发布前端git地址:https://github.com/EpicGames/PixelStreamingInfra
html+Canvas+js 实现 图片的剪裁效果
慕容屠苏
大前端爬坑之路
html+Canvas实现图片的剪裁效果开发过程中我们上传图片的时候,有时需要保证图片尺寸的统一,以避免以固定尺寸显示图片时会出现拉伸问题。这是就需要在上传之前对图片进行裁剪后再上传图片。我们裁剪图片将会用到canvas:canvas是HTML5中的一个新元素,这个元素可以通过JavaScript用来绘制图形。例如可以用它来画图、合成图象、做一些动画等。通常呢,我们在canvas上画图的方法是使用
jquery的引入与使用(附有HTML5的代码实例)
GodGump
html复习
1.引入引入方法有两种:一种本地,一种联网(CDN)。本地的方法:下载并放入项目文件,并用js引入(取决于自己的路径)联网的方法(CDN):官网jquery压缩版引用地址(以3.0版本为例子,早期请使用2版本,兼容特别老的使用1版本):百度压缩版引用地址:微软压缩版引用地址:2.使用在如图所示部分(//代码部分)添加代码,至于为什么这么写?因为jQuery的本质是js,将函数封装起来供我们使用,使
HTML5--网页前端编程(上)
赋箫
网页编程 前端 html5 html
HTML5–网页前端编程(上)1.网页(1)网站是根据一定的规则,使用html制作的相关的网页的集合。网页是网站上的一页,通常是html格式的文件,他要通过浏览器来阅读。网页是网站的基本元素,由图片链接声音文字等元素造成,以.html或.htm后缀结尾的文件称为html文件。(2)html是指超文本标记语言,不是编程语言,是一种标记语言,超越了文本限制,超级文本链接。(3)网页形成:前端人员开发代
《DNK210使用指南 -CanMV版 V1.0》第四十三章 人脸属性分析实验
嵌入式程序员人工智能开发硬件
第四十三章人脸属性分析实验1)实验平台:正点原子DNK210开发板2)章节摘自【正点原子】DNK210使用指南-CanMV版V1.03)购买链接:https://detail.tmall.com/item.htm?&id=7828013987504)全套实验源码+手册+视频下载地址:http://www.openedv.com/docs/boards/k210/ATK-DNK210.html5)正
Python制作动态图-matplotlib.animation
qq_39429669
python
Python制作动态图-matplotlib.animationPython制作动态图-matplotlib.animation我们使用matplotlib.animation.FuncAnimation来完成生成动画和保存(保存格式为html5),其形如
html 游戏解锁,html5塔楼游戏,来啊,盖楼啊,带教程!
weixin_39979516
html 游戏解锁
塔楼游戏让您感到快乐。是的,这是真的,因为游戏的设计方式是我们想要一次又一次地玩它。它类似于屡获殊荣的TowerBloxxDeluxe游戏,您的任务是将棋盘放在彼此的顶部并朝向天空。它的结构是使用HTML5语言的新canvas元素创建的,而逻辑是用ES6编写的(对JavaScript语言的一个杰出更新)。基于ES6和Canvas的塔式建筑游戏(TowerBloxxDeluxeSkyscraper)
创建数字印章:使用 HTML5 Canvas 和 JavaScript
小刘哥007
Vue实战 html5 javascript 前端
在许多文档处理和验证场景中,印章用作认证和批准的象征。随着数字化进程的加速,电子印章在电子文档管理中变得越来越重要。本文将介绍如何使用HTML5的元素和JavaScript来创建一个简单的电子印章,以模拟传统印章的外观和感觉。什么是Canvas?是HTML5新增的元素,提供了一个强大的绘图接口。通过使用JavaScript,开发者可以在上绘制2D图形,从简单的线条到复杂的图形。这使得它成为生成动态
JavaScript实现贪吃蛇游戏(附完整源码)
源代码大师
JavaScript实战教程 javascript 游戏 开发语言
JavaScript实现贪吃蛇游戏以下是一个简单的JavaScript实现贪吃蛇游戏的代码。这个游戏使用HTML5canvas元素来绘制游戏区域,使用键盘控制贪吃蛇的移动,同时计分和计时。HTML:<metacharset
log4j对象改变日志级别
3213213333332132
java log4j level log4j对象名称 日志级别
log4j对象改变日志级别可批量的改变所有级别,或是根据条件改变日志级别。
log4j配置文件:
log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION
#log4j.appender.FILE=org.apache.log4j.RollingFileAppender
log4j.appender.FILE=org.apache.l
elk+redis 搭建nginx日志分析平台
ronin47
elasticsearch kibana logstash
elk+redis 搭建nginx日志分析平台
logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢?首先,架构方面,nginx是有日志文件的,它的每个请求的状态等都有日志文件进行记录。其次,需要有个队 列,redis的l
Yii2设置时区
dcj3sjt126com
PHP timezone yii2
时区这东西,在开发的时候,你说重要吧,也还好,毕竟没它也能正常运行,你说不重要吧,那就纠结了。特别是linux系统,都TMD差上几小时,你能不痛苦吗?win还好一点。有一些常规方法,是大家目前都在采用的1、php.ini中的设置,这个就不谈了,2、程序中公用文件里设置,date_default_timezone_set一下时区3、或者。。。自己写时间处理函数,在遇到时间的时候,用这个函数处理(比较
js实现前台动态添加文本框,后台获取文本框内容
171815164
文本框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
持续集成工具
g21121
持续集成
持续集成是什么?我们为什么需要持续集成?持续集成带来的好处是什么?什么样的项目需要持续集成?... 持续集成(Continuous integration ,简称CI),所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
数据结构哈希表(hash)总结
永夜-极光
数据结构
1.什么是hash
来源于百度百科:
Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值。这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可能会散列成相同的输出,所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。
乱七八糟
程序员是怎么炼成的
eclipse中的jvm字节码查看插件地址:
http://andrei.gmxhome.de/eclipse/
安装该地址的outline 插件 后重启,打开window下的view下的bytecode视图
http://andrei.gmxhome.de/eclipse/
jvm博客:
http://yunshen0909.iteye.com/blog/2
职场人伤害了“上司” 怎样弥补
aijuans
职场
由于工作中的失误,或者平时不注意自己的言行“伤害”、“得罪”了自己的上司,怎么办呢?
在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议:
一、利用一些轻松的场合表示对他的尊重
即使是开明的上司也很注重自己的权威,都希望得到下属的尊重,所以当你与上司冲突后,最好让不愉快成为过去,你不妨在一些轻松的场合,比如会餐、联谊活动等,向上司问个好,敬下酒,表示你对对方的尊重,
深入浅出url编码
antonyup_2006
应用服务器 浏览器 servlet weblogic IE
出处:http://blog.csdn.net/yzhz 杨争
http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx
一、问题:
编码问题是JAVA初学者在web开发过程中经常会遇到问题,网上也有大量相关的
建表后创建表的约束关系和增加表的字段
百合不是茶
标的约束关系 增加表的字段
下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式
1,增加字段(student表中增加 姓名字段)
alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型
alter table student add name varchar2(10);
&nb
Uploadify 3.2 参数属性、事件、方法函数详解
bijian1013
JavaScript uploadify
一.属性
属性名称
默认值
说明
auto
true
设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传。
buttonClass
”
按钮样式
buttonCursor
‘hand’
鼠标指针悬停在按钮上的样子
buttonImage
null
浏览按钮的图片的路
精通Oracle10编程SQL(16)使用LOB对象
bijian1013
oracle 数据库 plsql
/*
*使用LOB对象
*/
--LOB(Large Object)是专门用于处理大对象的一种数据类型,其所存放的数据长度可以达到4G字节
--CLOB/NCLOB用于存储大批量字符数据,BLOB用于存储大批量二进制数据,而BFILE则存储着指向OS文件的指针
/*
*综合实例
*/
--建立表空间
--#指定区尺寸为128k,如不指定,区尺寸默认为64k
CR
【Resin一】Resin服务器部署web应用
bit1129
resin
工作中,在Resin服务器上部署web应用,通常有如下三种方式:
配置多个web-app
配置多个http id
为每个应用配置一个propeties、xml以及sh脚本文件
配置多个web-app
在resin.xml中,可以为一个host配置多个web-app
<cluster id="app&q
red5简介及基础知识
白糖_
基础
简介
Red5的主要功能和Macromedia公司的FMS类似,提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写,使用RTMP作为流媒体传输协议,这与FMS完全兼容。它具有流化FLV、MP3文件,实时录制客户端流为FLV文件,共享对象,实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
angular.fromJson
boyitech
AngularJS AngularJS 官方API AngularJS API
angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json
string
JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例:
<!DOCTYPE HTML>
<h
java-颠倒一个句子中的词的顺序。比如: I am a student颠倒后变成:student a am I
bylijinnan
java
public class ReverseWords {
/**
* 题目:颠倒一个句子中的词的顺序。比如: I am a student颠倒后变成:student a am I.词以空格分隔。
* 要求:
* 1.实现速度最快,移动最少
* 2.不能使用String的方法如split,indexOf等等。
* 解答:两次翻转。
*/
publ
web实时通讯
Chen.H
Web 浏览器 socket 脚本
关于web实时通讯,做一些监控软件。
由web服务器组件从消息服务器订阅实时数据,并建立消息服务器到所述web服务器之间的连接,web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接,建立web浏览器与web服务器之间的持久连接;利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新,建立一条从消息服务器到web浏览器页面之间的消息通路
[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?
comsci
生物
大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思
如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?
oracle 外部表
daizj
oracle 外部表 external tables
oracle外部表是只允许只读访问,不能进行DML操作,不能创建索引,可以对外部表进行的查询,连接,排序,创建视图和创建同义词操作。
you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
aop相关的概念及配置
daysinsun
AOP
切面(Aspect):
通常在目标方法执行前后需要执行的方法(如事务、日志、权限),这些方法我们封装到一个类里面,这个类就叫切面。
连接点(joinpoint)
spring里面的连接点指需要切入的方法,通常这个joinpoint可以作为一个参数传入到切面的方法里面(非常有用的一个东西)。
通知(Advice)
通知就是切面里面方法的具体实现,分为前置、后置、最终、异常环
初一上学期难记忆单词背诵第二课
dcj3sjt126com
english word
middle 中间的,中级的
well 喔,那么;好吧
phone 电话,电话机
policeman 警察
ask 问
take 拿到;带到
address 地址
glad 高兴的,乐意的
why 为什么
China 中国
family 家庭
grandmother (外)祖母
grandfather (外)祖父
wife 妻子
husband 丈夫
da
Linux日志分析常用命令
dcj3sjt126com
linux log
1.查看文件内容
cat
-n 显示行号 2.分页显示
more
Enter 显示下一行
空格 显示下一页
F 显示下一屏
B 显示上一屏
less
/get 查询"get"字符串并高亮显示 3.显示文件尾
tail
-f 不退出持续显示
-n 显示文件最后n行 4.显示头文件
head
-n 显示文件开始n行 5.内容排序
sort
-n 按照
JSONP 原理分析
fantasy2005
JavaScript jsonp jsonp 跨域
转自 http://www.nowamagic.net/librarys/veda/detail/224
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的
使用connect by进行级联查询
234390216
oracle 查询 父子 Connect by 级联
使用connect by进行级联查询
connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。
来看一个示例,现假设我们拥有一个菜单表t_menu,其中只有三个字段:
一个不错的能将HTML表格导出为excel,pdf等的jquery插件
jackyrong
jquery插件
发现一个老外写的不错的jquery插件,可以实现将HTML
表格导出为excel,pdf等格式,
地址在:
https://github.com/kayalshri/
下面看个例子,实现导出表格到excel,pdf
<html>
<head>
<title>Export html table to excel an
UI设计中我们为什么需要设计动效
lampcy
UI UI设计
关于Unity3D中的Shader的知识
首先先解释下Unity3D的Shader,Unity里面的Shaders是使用一种叫ShaderLab的语言编写的,它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader,都是指用ShaderLab编写的代码,
如何禁止页面缓存
nannan408
html jsp cache
禁止页面使用缓存~
------------------------------------------------
jsp:页面no cache:
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cach
以代码的方式管理quartz定时任务的暂停、重启、删除、添加等
Everyday都不同
定时任务管理 spring-quartz
【前言】在项目的管理功能中,对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了,因为如果要控制定时任务的 “暂停” 呢?暂停之后又要在某个时间点 “重启” 该定时任务呢?或者说直接 “删除” 该定时任务呢?要改变某定时任务的触发时间呢? “添加” 一个定时任务对于系统的使用者而言,是不太现实的,因为一个定时任务的处理逻辑他是不
EXT实例
tntxia
ext
(1) 增加一个按钮
JSP:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
Stri
数学学习在计算机研究领域的作用和重要性
xjnine
Math
最近一直有师弟师妹和朋友问我数学和研究的关系,研一要去学什么数学课。毕竟在清华,衡量一个研究生最重要的指标之一就是paper,而没有数学,是肯定上不了世界顶级的期刊和会议的,这在计算机学界尤其重要!你会发现,不论哪个领域有价值的东西,都一定离不开数学!在这样一个信息时代,当google已经让世界没有秘密的时候,一种卓越的数学思维,绝对可以成为你的核心竞争力. 无奈本人实在见地