HTML5核心内容介绍

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML [1]（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有八大特点：

语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签。

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>
<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>
<article>
    <p>内容</p>
    <section></section>
    <aside>
        <h1>标题</h1>
        <p>内容</p>
    <figure class="effect-julia">
      <img src="img/21.jpg" alt="img21"/>
      <figcaption>
        <h2>head</h2>
        <div>
          <p>this is head intro</p>
        </div>
        <a href="#">View more</a>
      </figcaption>            
    </figure>
    </aside>
</article>
<footer>
    COPYRIGHT
</footer>

本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）。 localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储

  用法：.setItem( key, value)
  sessionStorage.setItem("key", "value"); 
  localStorage.setItem("site", "js8.in");

  getItem获取value用途：获取指定key本地存储的值
  用法：.getItem(key)
  var value = sessionStorage.getItem("key"); 
  var site = localStorage.getItem("site");

  removeItem删除key用途：删除指定key本地存储的值
  用法：.removeItem(key)
  sessionStorage.removeItem("key"); 
  localStorage.removeItem("site");

  clear清除所有的key/value用途：清除所有的key/value
  用法：.clear()
  sessionStorage.clear(); 
  localStorage.clear();

indexedDB数据库

    //添加数据
    function insertAnObj(indexDbName) {
        var userinfos = [{
            id: 1001,
            name: "小李",
            age: 24
        }];
        var openRequest = indexedDB.open(indexDbName, 1);
        openRequest.onerror = function(e) { //当创建数据库失败时候的回调
            console.log("Database error: " + e.target.errorCode);
        };
        openRequest.onsuccess = function(event) {
            console.log("Database created");
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            //打开和userinfo相关的objectstore的事务
            var transaction = db.transaction("userinfo", 'readwrite');
            var store = transaction.objectStore("userinfo");
            for (var i = 0; i < userinfos.length; i++) {
                //alert("add"+userinfos[i]);
                store.add(userinfos[i]); //将对象添加至userinfo相关的objectstore中
            }
        };
        openRequest.onupgradeneeded = function(event) {
            var db = event.target.result;
            //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
            if (!db.objectStoreNames.contains('userinfo')) {
                //keyPath:Javascript对象，对象必须有一属性作为键值
                db.createObjectStore('userinfo', {
                    keyPath: "id"
                });
            }

        }
    }
    insertAnObj("hello");

//根据id查找数据
    function findDbdata(indexDbName,value) {
        var openRequest = indexedDB.open(indexDbName);
        var db;
        openRequest.onerror = function(e) {//当创建数据库失败时候的回调
            console.log("Database error: " + e.target.errorCode);
        };
        openRequest.onsuccess = function(event) {
            console.log("Database created");
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",'readwrite');
            var objectStore = transaction.objectStore("userinfo");
            //var cursor = objectStore.openCursor();
            var request = objectStore.get(Number(value));//查找i=1的对象，这里使用Number将1转换成数值类型
            request.onsuccess = function(e) {
                var res = e.target.result; //查找成功时候返回的结果对象
                console.dir(res);
                if (res) {
                    for (var field in res) { //遍历每一个对象属性
                        console.log(field+":"+res[field]);
                        // alert(res[field]);
                    };
                };
            }
        };
        openRequest.onupgradeneeded = function (event) {//更改数据库，或者存储对象时候在这里处理

        };
    } 

    findDbdata("hello","1001")

//查找所有数据
    function findAllDbdata(indexDbName) {
        var openRequest = indexedDB.open(indexDbName);
        var db;
        openRequest.onsuccess = function(event) {
            console.log("Database created");
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",'readonly');
            var objectStore = transaction.objectStore("userinfo");
            var cursor = objectStore.openCursor();
            cursor.onsuccess = function(e) { 
                var res = e.target.result; 
                if(res) { 
                    console.log("Key", res.key); 
                    var request = objectStore.get(Number(res.key));//根据查找出来的id，再次逐个查找
                    request.onsuccess = function(e) {
                        var res = e.target.result; //查找成功时候返回的结果对象
                        //console.dir(res);
                        if (res) {
                            for (var field in res) { //遍历每一个对象属性
                                console.log(field+":"+res[field]);
                            // alert(res[field]);
                            };
                        };
                    }
                    res.continue(); 
                } 
            }   
        };
    }
    findAllDbdata("hello");

//通过id删除数据
    function deleteDataById(indexDbName,id) {
        var openRequest = indexedDB.open(indexDbName);
        var db;
        openRequest.onsuccess = function(event) {
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",'readwrite');
            var objectStore = transaction.objectStore("userinfo");
            var request = objectStore.delete(Number(id));//根据查找出来的id，再次逐个查找
            request.onsuccess = function(e) {
                console.log("delete success");
            }
        }
    }
    deleteDataById("hello","1001");

    //删除所有数据
    function deleteAllData(indexDbName) {
        var openRequest = indexedDB.open(indexDbName);
        var db;
        openRequest.onsuccess = function(event) {
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",'readwrite');
            var objectStore = transaction.objectStore("userinfo");
            objectStore.clear();
        }
    }
    deleteAllData("hello");

其他功能索引，游标

设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

    function getLocation() {
        if (navigator.geolocation) {
            var options = {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            };

            function success(pos) {
                var crd = pos.coords;

                console.log('Your current position is:');
                console.log(`Latitude : ${crd.latitude}`);
                console.log(`Longitude: ${crd.longitude}`);
                console.log(`More or less ${crd.accuracy} meters.`);
            };

            function error(err) {
                console.log(err.message);
            };

            navigator.geolocation.getCurrentPosition(success, error, options);
        } else {
            console.log("Geolocation is not supported by this browser.")
        }
    }
    getLocation();

连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。 Server-Sent Event 即服务器单向消息传递事件，网页可以自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。如：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。 Server-Sent Event示例新建basic_sse.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic SSE Example</title>
</head>
<body>
    <pre id="x">Initializing...</pre>
    <script>
        var es = new EventSource("/sse");
        es.addEventListener("message", function(e) {
            document.getElementById("x").innerHTML += "\n" + e.data;
        }, false);
    </script>
</body>
</html>

新建datepush.js

var http = require("http"),
    fs = require("fs");
var port = parseInt(process.argv[2] || 1234);
http.createServer(function(request, response) {
    console.log("Client connected:" + request.url);
    if (request.url != "/sse") {
        fs.readFile("basic_sse.html", function(err, file) {
            response.writeHead(200, { 'Content-Type': 'text/html' });
            var s = file.toString(); //file is a buffer
            s = s.replace("basic_sse.php", "sse");
            response.end(s);
        });
        return;
    }
    //Below is to handle SSE request. It never returns.
    response.writeHead(200, { "Content-Type": "text/event-stream" });
    var timer = setInterval(function() {
        var content = "data:" + new Date().toISOString() + "\n\n";
        var b = response.write(content);
        if (!b) console.log("Data got queued in memory (content=" + content + ")");
        else console.log("Flushed! (content=" + content + ")");
    }, 1000);
    request.connection.on("close", function() {
        response.end();
        clearInterval(timer);
        console.log("Client closed connection. Aborting.");
    });
}).listen(port);
console.log("Server running at http://localhost:" + port);

运行node datepush.js 然后在浏览器输入:http://localhost:1234/basic_sse.html 可看到通过Server-Sent Event实时获取的消息

WebSocket 是伴随HTML5发布的一种新协议。它实现了浏览器与服务器全双工通信(full-duplex)，可以传输基于消息的文本和二进制数据。WebSocket 是浏览器中最靠近套接字的API，除最初建立连接时需要借助于现有的HTTP协议，其他时候直接基于TCP完成通信。它是浏览器中最通用、最灵活的一个传输机制，其极简的API 可以让我们在客户端和服务器之间以数据流的形式实现各种应用数据交换（包括JSON 及自定义的二进制消息格式），而且两端都可以随时向另一端发送数据。官网: http://www.websocket.org/quantum.html 轮询和websocket对比 Latency comparison between the polling and WebSocket applications

轮询和websocket性能对比 Comparison of the unnecessary network throughput overhead between the polling and the WebSocket applications

WebSockets例子： 在项目目录npm install nodejs-websocket

//新建server.js
var ws = require("nodejs-websocket");
console.log("开始建立连接...")

var game1 = null,game2 = null , game1Ready = false , game2Ready = false;
var server = ws.createServer(function(conn){
    conn.on("text", function (str) {
        console.log("收到的信息为:"+str)
        if(str==="game1"){
            game1 = conn;
            game1Ready = true;
            conn.sendText("success");
        }
        if(str==="game2"){
            game2 = conn;
            game2Ready = true;
        }

        if(game1Ready&&game2Ready){
            game2.sendText(str);
        }

        conn.sendText(str)
    })
    conn.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    conn.on("error", function (code, reason) {
        console.log("异常关闭")
    });
}).listen(8001)
console.log("WebSocket建立完毕")

//新建test.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
</head>
<body>
    <div id="mess"></div>
    <script>
        var mess = document.getElementById("mess");
        if(window.WebSocket){
            var ws = new WebSocket('ws://127.0.0.1:8001');

            ws.onopen = function(e){
                console.log("连接服务器成功");
                ws.send("game2");
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
            }
            ws.onerror = function(){
                console.log("连接出错");
            }

            ws.onmessage = function(e){
                var time = new Date();
                mess.innerHTML+=time+"的消息："+e.data+"<br>"
            }
        }
    </script>
</body>
</html>

运行node server.js 然后浏览器打开test.html,即可看到运行效果

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。 SVG动画制作: http://snapsvg.io SVG数据可视化框架: https://d3js.org Canvas游戏引擎：egret , cocos2D-js , lufylegend.js 等 WebGL 框架: threejs , Babylon.js等 CSS3 3D: http://rainzhai.github.io/raincss/css3/cube.html

性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。边框

border-radius
box-shadow
border-image

背景(多重背景)

background-size
background-origin 背景定位
background-clip 背景裁剪

文本效果

text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis 应用重点标记以及重点标记的前景色
text-justify "justify" 时所使用的对齐方法
text-outline 文本的轮廓
text-overflow 文本溢出包含元素时发生的事情
text-shadow
text-wrap 文本的换行规则
word-break 非中日韩文本的换行规则
word-wrap 长的不可分割的单词进行分割并换行到下一行

webfont

@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}

2D 转换 transform

translate(x,y) 移动
rotate(x,y) 转动
scale(x,y) 缩放
skew(x,y) 倾斜
matrix() 矩阵

3D转换

rotate3d(x,y,z,angle)
translate3d(x,y,z) -scale3d(x,y,z)

过渡

transition

动画

@keyframes
animation

多列

column-count
column-gap
column-rule

界面 resize box-sizing outline-offset

颜色

RGBA
HSL
HSLA

flex布局 media query

优点缺点

网络标准

统一标准,易于开发维护

多设备跨平台

ios, andriod, windows, hybrid app

自适应网页设计

手机端pc端全适配

即时更新

HTML5游戏和应用即时的更新。

总结概括HTML5有以下优点：

1、提高可用性和改进用户的友好体验； 2、有几个新的标签，这将有助于开发人员定义重要的内容；SEO很友好； 3、可以给站点带来更多的多媒体元素(视频和音频),替代FLASH和Silverlight； 6、将被大量应用于移动应用程序和游戏； 7、可移植性好。

缺点：

该标准并未能很好的被浏览器所支持。

RainZhai / rainzhai.github.com

HTML5核心特性 #10