ello，大家好，暖寶給大家來講Html5,一定要動動手指關注暖夕H2,我會給大家帶來更多技術干貨：

1.Html5的語義化標簽，比如：<nav><footer>就是你能說的出來名字的標簽，<div>則不是

2.語義化標簽iE瀏覽器不是很好支持。

3.解決瀏覽器不支持語義化標簽方法：拿<nav>來舉例

1>document.createElement("nav")，并且樣式為display：block；

2>通過js插件html5shiv.min.js引入即可。

3>終極解決方案：

<!--[if lte IE 8]>

<script type="text/javascript" src="html5shiv.min.js"></script>

<![endif]-->

4.多媒體標簽<video src=“” controls autoplay></video>

controls為控制播放，autoplay為自動播放，loop為循環播放

5.html5的新特性：

1>取消了過時的顯示效果標記

2>新表單元素引入

3>新語義標簽的引入

4>cavas標簽（圖形設計）

5>本地數據庫（本地存儲）

6>一些api

如果遇到<form>表單外的信息需要提交，怎么提交form表單外的input值呢？

很簡單，<form id="text"></form><input id="text">即可。就是form的id與input的id相同。

覺得暖寶的文章有用的，關注下我哦，暖夕H2，會定期給大家更新有用的技術文章

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

是不是覺得不可思議，js已經強大到這個地步？ 是的，js日新月異，它在不斷的進步。只要稍不留神，那我們都只能望塵莫及了。

今天我們就來看看是什么js插件可以如此厲害？

tracking.js

tracking.js 庫將不同的計算機視覺算法和技術引入瀏覽器環境。通過使用現代HTML5規范，能夠進行實時顏色跟蹤、人臉檢測等等。而這些牛逼的功能，僅僅只有7kb大小。

人臉識別示例

<script src="./tracking-min.js"></script>
<script src="./face-min.js"></script>
...
<img id="img" src="assets/faces.jpg">
...
<script>
window.onload = function() {
 var img = document.getElementById('img');
 var tracker = new tracking.ObjectTracker('face');
 tracking.track(img, tracker);
 tracker.on('track', function(event) {
 event.data.forEach(function(rect) {
 console.log(rect.x, rect.y, rect.width, rect.height);
 plotRectangle(rect.x, rect.y, rect.width, rect.height);
 });
 });
 // 下方的代碼可以先忽略
 var friends = [ 'Thomas Middleditch', 'Martin Starr', 'Zach Woods' ];
 var plotRectangle = function(x, y, w, h) {
 var rect = document.createElement('div');
 var arrow = document.createElement('div');
 var input = document.createElement('input');
 input.value = friends.pop();
 rect.onclick = function name() {
 input.select();
 };
 arrow.classList.add('arrow');
 rect.classList.add('rect');
 rect.appendChild(input);
 rect.appendChild(arrow);
 document.getElementById('photo').appendChild(rect);
 rect.style.width = w + 'px';
 rect.style.height = h + 'px';
 rect.style.left = (img.offsetLeft + x) + 'px';
 rect.style.top = (img.offsetTop + y) + 'px';
 };
};
</script>

代碼解析：

1、首先引入tracking.js，以及相關的實例js

2、new 一個實例，獲取face集合，event.data

3、遍歷集合，獲取每個face坐標等信息

4、繪制出坐標所在選區（這部分可以忽略，主要就上面3步）

坐標集合描述

臉嘴巴，眼睛識別

代碼大同小異，不過需要在引入兩個js文件

...
<script src="./eye-min.js"></script>
<script src="./mouth-min.js"></script>
...
<script>
var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
</script>

通過上圖，就會發現一個問題，不是很清晰的部位，是不能被識別出來的，最左邊的人像，只識別出了一只眼睛。

這里還有一個js插件也可以做人臉識別，咱們就來對比一下。

PK

先來介紹一下另外一款人臉識別插件，JqueryFaceDetection，顧名思義，是一款基于Jquery的插件。

代碼上面我們就不做對比了，主要來看看識別度，識別情況。

此圖一出，有愛好JqueryFaceDetection的小伙伴要說，what? 說好的人臉識別，你給我放個大猩猩是幾個意思？好吧，我錯了，來看下圖。

tracking.js

JqueryFaceDetection

這下就好說明問題了，tracking.js略勝一籌。

顏色識別

顏色識別只需要引入tracking-min.js即可。這里在圖中查找，品紅，青色和黃色，然后用框標記出來。

window.onload = function() { 
 var img = document.getElementById('img'); 
 var demoContainer = document.querySelector('.demo-container'); 
 
 var tracker = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']); 
 
 tracker.on('track', function(event) { 
 event.data.forEach(function(rect) { 
 window.plot(rect.x, rect.y, rect.width, rect.height, rect.color); 
 }); 
 }); 
 
 tracking.track('#img', tracker); 
 
 window.plot = function(x, y, w, h, color) { 
 var rect = document.createElement('div'); 
 document.querySelector('.demo-container').appendChild(rect); 
 rect.classList.add('rect'); 
 rect.style.border = '2px solid ' + color; 
 rect.style.width = w + 'px'; 
 rect.style.height = h + 'px'; 
 rect.style.left = (img.offsetLeft + x) + 'px'; 
 rect.style.top = (img.offsetTop + y) + 'px'; 
 }; 
};

其他

tracking.js不僅能識別圖片，還能處理視頻。

總的來看，是不是感覺很強大了？未來可期，前端技術越來越厲害，希望和你攜手共進。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”