Hello, HTML to HTML5, hellohtmlhtml5
HTML5 is a necessary technology for developing WEB applications to a certain level.
The following is the WEB development timeline:
1991-HTML
1994-HTML2
1996-CSS1 + JAVASCRIPT
1997-HTML4
1998-CSS2
2000-XHTML1
2002-Tableless Web Design
2005-Ajax
2009-HTML5
Below I will use a formula to illustrate HTML5:
HTML5 ~ = HTML + CSS + JAVASCRIPT (APIs)
JAVASCRIPT APIs ??
1. New Selector
Var el = document. getElementById ('section1 ');
El. focus ();
Var els = document. getElementsByTagName ('div ');
Els [0]. focus ();
Var els = document. getElementsByClassName ('core ');
Els [0]. focus ();
2. Search for elements using CSS syntax
Var els = document. querySelectorAll ("ul li: nth-child (odd )");
Var els = document. querySelectorAll ("table. test> tr> td ");
3. Web Storage)
// Use localStorage for persistent storage
// Use sessionStorage for per tab storage
Textarea. addEventListener ('keyup', function (){
Window. localStorage ['value'] = area. value;
Window. localStorage ['timestamp'] = (new Date (). getTime ();
}, False );
Textarea. value = window. localStorage ['value'];
Usage example: When saving the email, the draft is on the client, which can avoid content loss and rewriting due to occasional crashes.
4. Web SQL database
Var db = window. openDatabase ("Database Name", "Database Version ");
Db. transaction (function (tx ){
Tx.exe cuteSql ("SELECT * FROM test", [], successCallback, errorCallback );
});
5. Application cache API
<Html manifest = "cache-manifest">
Window. applicationCache. addEventListener ('checking', updateCacheStatus, false );
6. Web Workers
Main. js:
Var worker = new Worker ('extra _ work. js ');
Worker. onmessage = function (event) {alert (event. data );};
Extra_work.js:
// Do some work; when done post message.
PostMessage (some_data );
7. Web Sockets
Var socket = new WebSocket (location );
Socket. onopen = function (event ){
Socket. postMessage ("Hello, WebSocket ");
}
Socket. onmessage = function (event) {alert (event. data );}
Socket. onclose = function (event) {alert ("closed ");}
8. Communications
If (window. webkitpolicications. checkPermission () = 0 ){
// You can pass any url as a parameter
Window. webkitNotifications. createNotification (tweet. picture, tweet. title, tweet. text). show ();
} Else {
Window. webkitconfigurications. requestPermission ();
}
9. Drag and drop
Document. addEventListener ('dragstart', function (event ){
Event. dataTransfer. setData ('text', 'mizmized text ');
Event. dataTransfer. effectAllowed = 'copy ';
}, False );
10. Geolocation
If (navigator. geolocation ){
Navigator. geolocation. getCurrentPosition (function (position ){
Var lat = position. coords. latitude;
Var lng = position. coords. longpolling;
Map. setCenter (new GLatLng (lat, lng), 13 );
Map. addOverlay (new GMarker (new GLatLng (lat, lng )));
});
}
HTML ??
1. New semantic tags
<Body>
2. New Link
<Link rel = 'alternet' type = "application/rss + xml" href = "http://myblog.com/feed"/> <link rel = 'icon 'href = "/favicon. ico "/> <link rel = 'pingback' href =" http://myblog.com/xmlrpc.php "> <link rel = 'prefetch' href =" http://myblog.com/main.php ">... <a rel = 'archivees' href = "http://myblog.com/archives"> old posts </a> <a rel = 'external 'href = "http://notmysite.com"> tutorial </a> <a rel = 'license 'href = "http://www.apache.org/licenses/LICENSE-2.0"> license </a> <a rel = 'nofollow' href = "http://notmysite.com/sample"> wannabe </a> <a rel = 'tag' href = "http://myblog.com/category/games"> games posts </a>...
3. Microdata
<div itemscope itemtype="http://example.org/band"> <p>My name is <span itemprop='name'>Neil</span>.</p> <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p> <p>I am <span itemprop='nationality'>British</span>.</p></div>
4.ARIA attributes
<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1" > <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li> </ul>
5.New form field types
<input type='range' min='0' max='50' value='0'>
<input autofocus type='search'>
<input type='text' placeholder='Search inside'>
6.Audio + Video
<audio src="sound.mp3" controls></audio>document.getElementById("audio").muted=false;<video src='movie.mp4' autoplay controls ></video>document.getElementById("video").play();
7.Canvas
<canvas id="canvas" width="838" height="220"></canvas><script> var canvasContext = 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.Canvas 3D (WebGL)
<canvas id="canvas" width="838" height="220"></canvas><script> var gl = document.getElementById("canvas").getContext("experimental-webgl"); gl.viewport(0, 0, canvas.width, canvas.height); ...</script>
9.SVG in HTML5
CSS ??
1. CSS Selectors
2. New font support
3. Text wrapping
4. Columns
5. Text stroke
6. Opacity
7. Hue/saturation/luminance color model
8. Rounded corners
9. Gradients
10. Shadows
11. Instant Web 2.0 (just add scyclers)
12. Background enhancements
13. Transitions
14. Transforms
15. Animations
HTML5=Next-generation WEB Application Technology
The above is the HTML5 overview of most of the features, so I learned the HTML5 journey from here !!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
