HTML5更多（一）

l理解新的选择器

l获取class列表属性

lJson的新方法

ldata自定义数据

l延迟加载JS

l历史管理

l拖放事件

新的选择器

?querySelector

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//document.getElementById();
//document.getElementsByTagName();

//$(‘#div1‘)   $(‘.box‘)   $(‘ul li‘)

window.onload = function(){
   
    //var oDiv = document.querySelector(‘[title=hello]‘);
   
    var oDiv = document.querySelector(‘.box‘); //只能选择一组中的第一个元素
   
    //alert( oDiv.length );
   
    oDiv.style.background  = ‘red‘;
   
   
};

</script>
</head>

<body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>

?querySelectorAll

//document.getElementById();
//document.getElementsByTagName();

//$(‘#div1‘)   $(‘.box‘)   $(‘ul li‘)

window.onload = function(){
   
    var aDiv = document.querySelectorAll(‘.box‘);   //获取一组元素
   
    alert( aDiv.length );
   
   
   
   
};

</script>
</head>

<body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>

?getElementsByClassName

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function(){
   
    var aDiv = document.getElementsByClassName(‘box‘);
   
    alert( aDiv.length );
   
};

</script>
</head>

<body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>

获取class列表属性

?classList

–length : class的长度

–add() : 添加class方法

–remove() : 删除class方法

–toggle() : 切换class方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function(){
    var oDiv = document.getElementById(‘div1‘);
   
    //alert( oDiv.classList );  //类似与数组的对象
   
    //alert( oDiv.classList.length );  //3
   
    //oDiv.classList.add(‘box4‘);
   
    //oDiv.classList.remove(‘box2‘);
   
    oDiv.classList.toggle(‘box2‘);
   
};

</script>
</head>

<body>
<div id="div1" class="box1 box2 box3">div</div>
</body>
</html>

JSON的新方法

?parse() : 把字符串转成json

–字符串中的属性要严格的加上引号

?stringify() : 把json转化成字符串

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="json2.js"></script>
<script>

/*var a = {
    name : ‘hello‘
};

var b = a;

b.name = ‘hi‘;

alert( a.name );*/ //hi

/*var a = {
    name : ‘hello‘
};

var b = {};

for(var attr in a){
    b[attr] = a[attr];
}

b.name = ‘hi‘;

alert( a.name );*/   // hello  //视频 : 对象的引用

var a = {
    name : { age : 100 }
};

var str = JSON.stringify(a);

var b = JSON.parse(str);

b.name.age = 200;

alert( a.name.age ); //100

</script>
</head>

<body>
</body>
</html>

–会自动的把双引号加上

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//eval : 可以解析任何字符串变成JS

//parse : 只能解析JSON形式的字符串变成JS  (安全性要高一些)

/*var str = ‘function show(){alert(123)}‘;

eval(str);

show();*/

/*var str = ‘function show(){alert(123)}‘;

JSON.parse(str);

show();*/

/*var str = ‘{"name":"hello"}‘;   //一定是严格的JSON形式

var json = JSON.parse(str);

alert( json.name );*/
// var name = ‘name‘;

var json = {name : "hello"};

var str = JSON.stringify(json);

alert( str );

</script>
</head>

<body>
</body>
</html>

?新方法与eval的区别

?新方法的应用

–深度克隆新对象

?如何其他浏览器做到兼容

–http://www.json.org/去下载json2.js

data自定义数据

?dataset

–data-name : dataset.name

–data-name-first : dataset.nameFirst

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function(){
    var oDiv = document.getElementById(‘div1‘);

//alert( oDiv.dataset.bin );

alert( oDiv.dataset.binAll );
};

</script>
</head>

<body>
<div id="div1" data-bin="bin" data-bin-all="binperson">div</div>
</body>
</html>

?Data数据在jquery mobile中有着重要作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>
<div data-role="page" id="div1">
    <div data-theme="c" data-role="header">
        <h3>课堂</h3>
    </div>
    <div data-role="context">
        <a href="#div2" data-transition="slide">点击</a>
    </div>
</div>

<div data-role="page" id="div2">
    <div data-theme="b" data-role="header">
        <h3>课堂-移动开发教程</h3>
    </div>
    <div data-role="context">
        <a href="#div1" data-transition="slide" data-direction="reverse">点击</a>
    </div>
</div>
</body>
</html>

延迟加载JS

?JS的加载会影响后面的内容加载

–很多浏览器都采用了并行加载JS，但还是会影响其他内容

?Html5的defer和async

–defer : 延迟加载，会按顺序执行，在onload执行前被触发

–async : 异步加载，加载完就触发，有顺序问题

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="a.js" defer="defer"></script>
<script src="b.js" defer="defer"></script>
<script src="c.js" defer="defer"></script>-->

<script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script>
<script src="c.js" async ="async"></script>
</head>

<body>
<img src="">

</body>
</html>

?Labjs库

历史管理

?onhashchange ：改变hash值来管理

?history ：

–服务器下运行

–pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)

–popstate事件 : 读取数据 event.state

–注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//触发历史管理 : 1.通过跳转页面  2.hash  3.pushState
window.onload = function(){
    var oInput = document.getElementById(‘input1‘);
    var oDiv = document.getElementById(‘div1‘);
   
    var json = {};
   
    oInput.onclick = function(){
       
        var num = Math.random();
       
        var arr = randomNum(35,7);
        
        json[num] = arr;
       
        oDiv.innerHTML = arr;
       
        window.location.hash = num;
       
    };
   
    window.onhashchange = function(){
       
        oDiv.innerHTML = json[window.location.hash.substring(1)];
       
    };
   
    function randomNum(iAll,iNow){
       
        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
       
        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }
       
        return newArr;
       
    }
   
};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
    var oInput = document.getElementById(‘input1‘);
    var oDiv = document.getElementById(‘div1‘);
   
    oInput.onclick = function(){
       
        var arr = randomNum(35,7);
       
        history.pushState(arr,‘‘,arr);
       
        oDiv.innerHTML = arr;
       
    };
   
    window.onpopstate = function(ev){
       
        oDiv.innerHTML = ev.state;
       
    };
   
   
    function randomNum(iAll,iNow){
       
        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
       
        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }
       
        return newArr;
       
    }
   
};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>

拖放事件

?draggable ：

–设置为true，元素就可以拖拽了

?拖拽元素事件 : 事件对象为被拖拽元素

–dragstart , 拖拽前触发

–drag ,拖拽前、拖拽结束之间，连续触发

–dragend , 拖拽结束触发

?目标元素事件 : 事件对象为目标元素

–dragenter , 进入目标元素触发，相当于mouseover

–dragover ,进入目标、离开目标之间，连续触发

–dragleave , 离开目标元素触发，相当于mouseout

–drop , 在目标元素上释放鼠标触发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var aLi = document.getElementsByTagName(‘li‘);
    var oDiv = document.getElementById(‘div1‘);
    var i = 0;
   
    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(){
            this.style.background = ‘green‘;
        };
       
        /*aLi[i].ondrag = function(){  //开始与结束连续触发
            document.title = i++;
        };*/
       
        aLi[i].ondragend = function(){
            this.style.background = ‘yellow‘;
        };
    }
   
    oDiv.ondragenter = function(){
        this.style.background = ‘blue‘;
    };
   
    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就 必须在dragover当中阻止默认事件
        //document.title = i++;
       
        ev.preventDefault();
       
    };
   
    oDiv.ondragleave = function(){
        this.style.background = ‘red‘;
    };
   
    oDiv.ondrop = function(){
        alert(123);
    };
   
};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>

拖放事件_2

?事件的执行顺序：drop不触发的时候

–dragstart > drag > dragenter > dragover > dragleave > dragend

?事件的执行顺序：drop触发的时候(dragover的时候阻止默认事件)

–dragstart > drag > dragenter > dragover > drop > dragend

?不能释放的光标和能释放的光标不一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var oUl = document.getElementsByTagName(‘ul‘)[0];
    var aLi = oUl.getElementsByTagName(‘li‘);
    var oDiv = document.getElementById(‘div1‘);
    var i = 0;
   
    for(var i=0;i<aLi.length;i++){
       
        aLi[i].index = i;
       
        aLi[i].ondragstart = function(ev){
           
            var ev = ev || window.event;
           
            //ev.dataTransfer.setData(‘name‘,‘hello‘);
           
            ev.dataTransfer.setData(‘name‘,this.index);
           
            this.style.background = ‘green‘;
        };
       
        /*aLi[i].ondrag = function(){  //开始与结束连续触发
            document.title = i++;
        };*/
       
        aLi[i].ondragend = function(){
            this.style.background = ‘yellow‘;
        };
    }
   
    oDiv.ondragenter = function(){
        this.style.background = ‘blue‘;
    };
   
    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就 必须在dragover当中阻止默认事件
        //document.title = i++;
       
        ev.preventDefault();
       
    };
   
    oDiv.ondragleave = function(){
        this.style.background = ‘red‘;
    };
   
    oDiv.ondrop = function(ev){
        //alert(123);
       
        //alert( ev.dataTransfer.getData(‘name‘) );
       
        oUl.removeChild( aLi[ev.dataTransfer.getData(‘name‘)] );
       
        for(var i=0;i<aLi.length;i++){
       
            aLi[i].index = i;
           
        }
       
    };
   
};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>

拖放事件_3

?解决火狐下的问题

–必须设置dataTransfer对象才可以拖拽除图片外的其他标签

–

dataTransfer对象

?setData() : 设置数据 key和value(必须是字符串)

?getData() : 获取数据，根据key值，获取对应的value

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var oUl = document.getElementsByTagName(‘ul‘)[0];
    var aLi = oUl.getElementsByTagName(‘li‘);
    var oDiv = document.getElementById(‘div1‘);
    var oImg = document.getElementById(‘img1‘);
    var i = 0;
   
    for(var i=0;i<aLi.length;i++){
       
        aLi[i].ondragstart = function(ev){
           
            var ev = ev || window.event;
           
            ev.dataTransfer.setData(‘name‘,‘hello‘);
           
            ev.dataTransfer.effectAllowed = ‘link‘;
           
            ev.dataTransfer.setDragImage(oImg,0,0);
           
        };
       
       
        aLi[i].ondragend = function(){
            this.style.background = ‘yellow‘;
        };
    }
   
    oDiv.ondragenter = function(){
        this.style.background = ‘blue‘;
    };
   
    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就 必须在dragover当中阻止默认事件
        //document.title = i++;
       
        ev.preventDefault();
       
    };
   
    oDiv.ondragleave = function(){
        this.style.background = ‘red‘;
    };
   
    oDiv.ondrop = function(ev){
       
       
    };
   
};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
<img src="miaov.png" id="img1" style="display:none" />
</body>
</html>

dataTransfer对象_2

?effectAllowed

–effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

?setDragImage

–三个参数：指定的元素，坐标X，坐标Y

?files

–获取外部拖拽的文件，返回一个filesList列表

–filesList下有个type属性，返回文件的类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){
   
    var oDiv = document.getElementById(‘div1‘);
   
   
    oDiv.ondragenter = function(){
       
        this.innerHTML = ‘可以释放啦‘;
       
    };
   
    oDiv.ondragover = function(ev){
       
        ev.preventDefault();
       
    };
   
    oDiv.ondragleave = function(){
       
        this.innerHTML = ‘将文件拖拽到此区域‘;
       
    };
   
    oDiv.ondrop = function(ev){
       
        ev.preventDefault();
       
        var fs = ev.dataTransfer.files;
       
        //alert(fs.length);
       
        //alert( fs[0].type );
       
        var fd = new FileReader();
       
        fd.readAsDataURL( fs[0] );
       
        fd.onload = function(){
            alert( this.result );
        };
       
    };
   
};
</script>
</head>

<body>

<div id="div1">将文件拖拽到此区域</div>

</body>
</html>

FileReader(读取文件信息)

?readAsDataURL

–参数为要读取的文件对象，将文件读取为DataUrl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){

var oDiv = document.getElementById(‘div1‘);
    var oUl = document.getElementById(‘ul1‘);

oDiv.ondragenter = function(){

this.innerHTML = ‘可以释放啦‘;

};

oDiv.ondragover = function(ev){

ev.preventDefault();

};

oDiv.ondragleave = function(){

this.innerHTML = ‘将文件拖拽到此区域‘;

};

oDiv.ondrop = function(ev){

ev.preventDefault();

var fs = ev.dataTransfer.files;

//alert(fs.length);

//alert( fs[0].type );

/*if(fs[0].type.indexOf(‘image‘)!=-1){
            var fd = new FileReader();

fd.readAsDataURL( fs[0] );

fd.onload = function(){

var oLi = document.createElement(‘li‘);
                var oImg = document.createElement(‘img‘);
                oImg.src = this.result;
                oLi.appendChild(oImg);
                oUl.appendChild(oLi);

};
        }
        else{
            alert(‘亲，请上传图片类型‘);
        }*/

for(var i=0;i<fs.length;i++){
            if(fs[i].type.indexOf(‘image‘)!=-1){
                var fd = new FileReader();

fd.readAsDataURL( fs[i] );

fd.onload = function(){

var oLi = document.createElement(‘li‘);
                    var oImg = document.createElement(‘img‘);
                    oImg.src = this.result;
                    oLi.appendChild(oImg);
                    oUl.appendChild(oLi);

};
            }
            else{
                alert(‘亲，请上传图片类型‘);
            }
        }

};

};
</script>
</head>

<body>

<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>

?onload

–当读取文件成功完成的时候触发此事件

–this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据

?实例

–拖拽删除列表

–拖拽购物车

–上传图片预览功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
li{ float:left; width:200px; border:1px #000 solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
#div1{ width:600px; border:1px #000 solid; height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}
#allMoney{ float:right;}
</style>
<script>

window.onload = function(){
    var aLi = document.getElementsByTagName(‘li‘);
    var oDiv = document.getElementById(‘div1‘);
   
    var obj = {};
    var iNum = 0;
    var allMoney = null;
   
    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(ev){
           
            var aP = this.getElementsByTagName(‘p‘);
           
            ev.dataTransfer.setData(‘title‘,aP[0].innerHTML);
            ev.dataTransfer.setData(‘money‘,aP[1].innerHTML);
           
            ev.dataTransfer.setDragImage(this,0,0);
           
        };
    }
   
    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };
   
    oDiv.ondrop = function(ev){
        ev.preventDefault();
       
        var sTitle = ev.dataTransfer.getData(‘title‘);
        var sMoney = ev.dataTransfer.getData(‘money‘);
       
       
        if( !obj[sTitle] ){
           
            var oP = document.createElement(‘p‘);
            var oSpan = document.createElement(‘span‘);
            oSpan.className = ‘box1‘;
            oSpan.innerHTML = 1;
            oP.appendChild( oSpan );
            var oSpan = document.createElement(‘span‘);
            oSpan.className = ‘box2‘;
            oSpan.innerHTML = sTitle;
            oP.appendChild( oSpan );
           
            var oSpan = document.createElement(‘span‘);
            oSpan.className = ‘box3‘;
            oSpan.innerHTML = sMoney;
            oP.appendChild( oSpan );
           
            oDiv.appendChild( oP );
           
            obj[sTitle] = 1;
           
        }
        else{
           
            var box1 = document.getElementsByClassName(‘box1‘);
            var box2 = document.getElementsByClassName(‘box2‘);
           
            for(var i=0;i<box2.length;i++){
           
                if(box2[i].innerHTML == sTitle){
                    box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
                }
           
            }
           
        }
       
        if(!allMoney){
            allMoney = document.createElement(‘div‘);
            allMoney.id = ‘allMoney‘;
        }
       
        iNum += parseInt(sMoney);
       
        allMoney.innerHTML = iNum + ‘￥‘;
       
        oDiv.appendChild( allMoney );
       
       
    };
   
};

</script>
</head>

<body>
<ul>
    <li draggable="true">
        <img src="img1.jpg" />
        <p>javascript语言精粹</p>
        <p>40￥</p>
    </li>
    <li draggable="true">
        <img src="img2.jpg" />
        <p>javascript权威指南</p>
        <p>120￥</p>
    </li>
    <li draggable="true">
        <img src="img3.jpg" />
        <p>精通javascript</p>
        <p>35￥</p>
    </li>
    <li draggable="true">
        <img src="img4.jpg" />
        <p>DOM编程艺术</p>
        <p>45￥</p>
    </li>
</ul>
<div id="div1">
    <!--<p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45￥</span>
    </p>
    <p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45￥</span>
    </p>
    <div id="allMoney">90￥</div>-->
</div>
</body>
</html>

时间： 2024-10-06 06:43:09

HTML5更多（一）的相关文章

HTML5学习总结

一.HTML5概念 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等,可以帮助开发者创建富互联网应用,同时有令人眼花缭乱的css 3,还提供了一些Javascript API,如地理定位.重力感应.硬件访问等,可以在浏览器内实现类原生应用,制作webApp,甚至结合Canvas我们可开发网页版游戏. 我们日常讨论的H5其实指

html5 01

(1)Html 5的概念 能做什么? 为什么学习? HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等,可以帮助开发者创建富互联网应用,同时有令人眼花缭乱的css 3,还提供了一些Javascript API,如地理定位.重力感应.硬件访问等,可以在浏览器内实现类原生应用,制作webApp,甚至结合Canvas我们可开发网页版

HTML5详解

  HTML5的概念   HTML5并不仅仅是作为HTML标记语言的一个最新版本,更重要的是它制定了web应用开发的一系列标准, 成为第一个将web作为应用程序开发平台的HTML语言 HTML5定义了一系列的新元素, 如新语义标签, 智能表单, 多媒体标签, 可以帮助开发者创建互联网应用, 同时有令人眼花的css3, 还提供了一些JavaScript的API(应用程序接口), 列如: 地理定位 重力感应, 硬件访问, 可以在浏览器内实现类似于原生应用, 制作webAPP, 甚至结合Canvas可

HTML5基础扩展——地理位置、本地存储、缓存

HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的web开发,HTML5是比较火的.因此这几款扩展功能,感觉更多是从手机,平板等角度出发的. 一,地理定位:首先看一下地理位置的定位的几种形式:IP地址,GPS(Global Positioning System ),Wifi,GSM(Global System for Mobile Communic

HTML5_布局and音视频

HTML5_布局and音视频 I.HTML5标签的改变1.文档声明HTML语法是不区分大小写的HTML5的DTD声明为:<!doctype html>确保浏览器能在HTML5的标准模式下进行渲染 \App3_HTML5\Module1_Layout\html5.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

新知识 HtMl 5

快要毕业了,即将走向实习岗位,但是这日子过的太无聊了,昨天逃课回宿舍打开电脑想看电影但是没什么好看的,于是上床睡觉了,越躺越无聊,然后爬了起来到学习图书馆找了本HTML5的课本,学习了起来(我感觉html我学的比较好,所以学习html5应该不会太难). Html5是Html诞生至今最具有划时代意义的一个版本,它在之前的Html版本的基础上,做出了大量的更新.Html5除了保留了Html4中一些基本元素及属性的用法外,还删除了部分利用率低或不合理的元素,同时增加了大量新的.功能强大的元素.    

spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果

由于手机的携带的方便性和手机的越来越智能和移动网速越来越快,手机已经充斥着人们的生活.随着手机的流行, 移动应用也快速的火了起来比如微商城.手机网页.移动APP等等.既然移动应用这么火,我们今天来讲一下怎样实现在移 动网页中动态加载数据,那么我们怎么实现呢,是像pc网页那样,有个上一页和下一页还是其它的方式. 其实像pc网页那样上一页和下一页肯定不行的,手机屏幕很小,不好点击同时用户体验很差,今天来给大家介绍使用 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的方式

HTML5[7]: 实现网页版的加载更多

理所当然,jQuery出场: $(function() { $(window).scroll(function() { if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { alert('end reached'); } }) });

Web程序员们，你准备好迎接HTML5了吗？

HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash.QuickTime.Silverlight等插件,也简化了原来需要大量JS才能达到的效果.虽然HTML5还在讨论过程中,但是其优越的特性已经得到了大家的认可,各大浏览器厂商,一些知名的内容发布网站也都是积极地推动, 尤其是即将发布的IE9会完全支持HTML5.作为Web开发人员的我们,需要做的是:如何把HTML5转化为各种Web应用,如何做到现有的Web应用过渡到HTML