您的位置：首页 > Web前端 > HTML5

Hello,HTML 到 HTML5

2016-02-19 09:56 916 查看

HTML5是WEB应用将发展到一个水平必要的技术.

下面是WEB发展的时间轴:

　　1991-HTML

　　1994-HTML2

　　1996-CSS1+JAVASCRIPT

　　1997-HTML4

　　1998-CSS2

　　2000-XHTML1

　　2002-TablelessWebDesign

　　2005-Ajax

　　2009-HTML5

下面我用一个公式来说明HTML5:

　　HTML5~=HTML+CSS+JAVASCRIPT(APIs)

JAVASCRIPTAPIs??

　　1.新的选择器

　　　　varel=document.getElementById('section1');

　　　　el.focus();

　　　　varels=document.getElementsByTagName('div');

　　　　els[0].focus();

　　　　varels=document.getElementsByClassName('section');

　　　　els[0].focus();

　　2.通过CSS的语法来查找元素

　　　　varels=document.querySelectorAll("ulli:nth-child(odd)");

　　　　varels=document.querySelectorAll("table.test>tr>td");

　　3.网络存储(WebStorage)

　　　　//uselocalStorageforpersistentstorage

　　　　//usesessionStorageforpertabstorage

　　　　textarea.addEventListener('keyup',function(){

　　　　　　window.localStorage['value']=area.value;

　　　　　　window.localStorage['timestamp']=(newDate()).getTime();

　　　　},false);

　　　　textarea.value=window.localStorage['value'];

　　　　用途示例：保存邮件时，草稿在客户端，可以避免有时候崩溃导致内容丢失重写.

　　4.WebSQL数据库

　　　　vardb=window.openDatabase("DatabaseName","DatabaseVersion");

　　　　db.transaction(function(tx){

　　　　　　tx.executeSql("SELECT*FROMtest",[],successCallback,errorCallback);

　　　　});

　　5.应用程序缓存API

　　　　<htmlmanifest="cache-manifest">

　　　　window.applicationCache.addEventListener('checking',updateCacheStatus,false);

　　6.WebWorkers

　　　　main.js:

　　　　　　varworker=newWorker(‘extra_work.js');

　　　　　　worker.onmessage=function(event){alert(event.data);};

　　　　extra_work.js:

　　　　　　//dosomework;whendonepostmessage.

　　　　　　postMessage(some_data);

　　7.WebSockets

　　　　varsocket=newWebSocket(location);

　　　　socket.onopen=function(event){

　　　　　　socket.postMessage(“Hello,WebSocket”);

　　　　}

　　　　socket.onmessage=function(event){alert(event.data);}

　　　　socket.onclose=function(event){alert(“closed”);}

　　8.Notifications

　　　　if(window.webkitNotifications.checkPermission()==0){

　　　　　　//youcanpassanyurlasaparameter

　　　　　　window.webkitNotifications.createNotification(tweet.picture,tweet.title,tweet.text).show();

　　　　}else{

　　　　　　window.webkitNotifications.requestPermission();

　　　　}

　　9.Draganddrop

　　　　document.addEventListener('dragstart',function(event){

　　　　　　event.dataTransfer.setData('text','Customizedtext');

　　　　　　event.dataTransfer.effectAllowed='copy';

　　　　},false);

　　10.Geolocation

　　　　if(navigator.geolocation){

　　　　　　navigator.geolocation.getCurrentPosition(function(position){

　　　　　　　　varlat=position.coords.latitude;

　　　　　　　　varlng=position.coords.longitude;

　　　　　　　　map.setCenter(newGLatLng(lat,lng),13);

　　　　　　　　map.addOverlay(newGMarker(newGLatLng(lat,lng)));

　　　　　　});

　　　　}

HTML??

　1.新的语义标签

<body>

<header>

<hgroup>

<h1>Pagetitle</h1>

<h2>Pagesubtitle</h2>

</hgroup>

</header>

<nav>

<ul>

Navigation...

</ul>

</nav>

<section>

<article>

<header>

<h1>Title</h1>

</header>

<section>

Content...

</section>

</article>

<article>

<header>

<h1>Title</h1>

</header>

<section>

Content...

</section>

</article>

<article>

<header>

<h1>Title</h1>

</header>

<section>

Content...

</section>

</article>

</section>

2.新的链接关系

<linkrel='alternate'type="application/rss+xml"href="http://myblog.com/feed"/>

<linkrel='icon'href="/favicon.ico"/>

<linkrel='pingback'href="http://myblog.com/xmlrpc.php">

<linkrel='prefetch'href="http://myblog.com/main.php">

...

<arel='archives'href="http://myblog.com/archives">oldposts</a>

<arel='external'href="http://notmysite.com">tutorial</a>

<arel='license'href="http://www.apache.org/licenses/LICENSE-2.0">license</a>

<arel='nofollow'href="http://notmysite.com/sample">wannabe</a>

<arel='tag'href="http://myblog.com/category/games">gamesposts</a>

...
3.微数据Microdata

<divitemscopeitemtype="http://example.org/band">

<p>Mynameis<spanitemprop='name'>Neil</span>.</p>

<p>Mybandiscalled<spanitemprop='band'>FourPartsWater</span>.</p>

<p>Iam<spanitemprop='nationality'>British</span>.</p>

</div>
4.ARIAattributes

<ulid="tree1"

role="tree"

tabindex="0"

aria-labelledby="label_1"

>

<lirole="treeitem"tabindex="-1"aria-expanded="true">Fruits</li>

<lirole="group">

<ul>

<lirole="treeitem"tabindex="-1">Oranges</li>

<lirole="treeitem"tabindex="-1">Pineapples</li>

...

</ul>

</li>

</ul>
5.Newformfieldtypes

<inputtype='range'min='0'max='50'value='0'>

<inputautofocustype='search'>

<inputtype='text'placeholder='Searchinside'>

6.Audio+Video

<audiosrc="sound.mp3"controls></audio>

document.getElementById("audio").muted=false;

<videosrc='movie.mp4'autoplaycontrols></video>

document.getElementById("video").play();

7.Canvas

<canvasid="canvas"width="838"height="220"></canvas>

<script>

varcanvasContext=document.getElementById("canvas").getContext("2d");

canvasContext.fillRect(250,25,150,100);

canvasContext.beginPath();

canvasContext.arc(450,110,100,Math.PI*1/2,Math.PI*3/2);

canvasContext.lineWidth=15;

canvasContext.lineCap='round';

canvasContext.strokeStyle='rgba(255,127,0,0.5)';

canvasContext.stroke();

</script>

8.Canvas3D(WebGL)

<canvasid="canvas"width="838"height="220"></canvas>

<script>

vargl=document.getElementById("canvas").getContext("experimental-webgl");

gl.viewport(0,0,canvas.width,canvas.height);

...

</script>

9.SVGinHTML5

<html>

<svg>

<circleid="myCircle"class="important"cx="50%"cy="50%"r="100"

fill="url(#myGradient)"

onmousedown="alert('hello');"/>

</svg>

</html>

CSS??
1.CSSSelectors
2.Newfontsupport
3.Textwrapping
4.Columns
5.Textstroke
6.Opacity
7.Hue/saturation/luminancecolormodel
8.Roundedcorners
9.Gradients
10.Shadows
11.InstantWeb2.0(justaddsliders)
12.Backgroundenhancements
13.Transitions
14.Transforms
15.Animations

HTML5=下一代WEB应用的技术

以上是HTML5概述大部分特性，所以我学习HTML5的旅程从这里开始了！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航