整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5 簡介
HTML5 示例
實(shí)例
<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
什么是 HTML5？
HTML5 是最新的 HTML 標(biāo)準(zhǔn)。
HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建。
HTML5 是跨平臺的，被設(shè)計(jì)為在不同類型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運(yùn)行。
注釋：在下面的章節(jié)中，您將學(xué)到如何“幫助”老版本的瀏覽器處理 HTML5。
HTML5中的新內(nèi)容？
HTML5 的新的文檔類型（DOCTYPE）聲明非常簡單：
<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
HTML5 實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
注釋：HTML5 中默認(rèn)的字符編碼是 UTF-8。
HTML5 -新的屬性語法
HTML5 標(biāo)準(zhǔn)允許 4 中不同的屬性語法。
本例演示在 <input> 標(biāo)簽中使用的不同語法：
| 類型 | 示例 |
| Empty | <input type="text" value="John Doe" disabled> |
| Unquoted | <input type="text" value=John Doe> |
| Double-quoted | <input type="text" value="John Doe"> |
| Single-quoted | <input type="text" value='John Doe'> |
在 HTML5 標(biāo)準(zhǔn)中，根據(jù)對屬性的需求，可能會(huì)用到所有 4 種語法。
HTML5 -新特性
HTML5 的一些最有趣的新特性：
·新的語義元素，比如 <header>, <footer>, <article>, and <section>。
·新的表單控件，比如數(shù)字、日期、時(shí)間、日歷和滑塊。
·強(qiáng)大的圖像支持（借由 <canvas> 和 <svg>）
·強(qiáng)大的多媒體支持（借由 <video> 和 <audio>）
·強(qiáng)大的新 API，比如用本地存儲取代 cookie。
HTML5 -被刪元素
以下 HTML 4.01 元素已從 HTML5 中刪除：
·<acronym>
·<applet>
·<basefont>
·<big>
·<center>
·<dir>
·<font>
·<frame>
·<frameset>
·<noframes>
·<strike>
·<tt>
video 元素的三種視頻格式：
video 元素的屬性：
video 元素的方法：
audio元素的三種音頻格式：
audio元素的屬性：
audio元素的方法：
什么是 Canvas？
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas在HTML5 中的新屬性有：
getElementById()：可返回對擁有指定 ID 的第一個(gè)對象的引用；
getContext()：返回一個(gè)用于在畫布上繪圖的環(huán)境，2d表示二維繪圖；
beginPath()：開始一條路徑，或重置當(dāng)前的路徑；
moveTo()：把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條。
lineTo()：添加一個(gè)新點(diǎn)，然后創(chuàng)建從該點(diǎn)到畫布中最后指定點(diǎn)的線條（該方法并不會(huì)創(chuàng)建線條）；
closePath()：創(chuàng)建從當(dāng)前點(diǎn)到開始點(diǎn)的路徑；
strokeStyle屬性：設(shè)置或返回用于筆觸的顏色、漸變或模式；
stroke()：會(huì)實(shí)際地繪制出路徑；
fillStyle屬性：設(shè)置或返回用于填充繪畫的顏色、漸變或模式；
fill()：填充當(dāng)前的圖像（路徑），默認(rèn)顏色是黑色；
//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或閉合 需要先閉合路徑才能畫
cxt.strokeStyle="red";
cxt.stroke();
//實(shí)心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();
演示圖
圖1
arc()：創(chuàng)建弧或曲線（用于創(chuàng)建圓或部分圓）；
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas")
var ctx=can.getContext("2d"); //創(chuàng)建context對象
ctx.beginPath();//標(biāo)志開始一個(gè)路徑
ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
ctx.stroke()
</script>
演示圖
圖2
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.fillStyle="#deffff";
ctx.fill();
ctx.strokeStyle="red"
ctx.stroke();
</script>
演示圖
圖3
strokeRect()：繪制矩形（不填色），筆觸的默認(rèn)顏色是黑色；
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas"); //獲得畫板數(shù)據(jù)
var ctx=can.getContext('2d'); //獲得筆刷
ctx.strokeStyle="blue"; //設(shè)置線條顏色
ctx.strokeRect(100,100,100,100); //線條畫矩形
</script>
演示圖
圖4
fillRect()：繪制“已填色”的矩形，默認(rèn)的填充顏色是黑色；
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫板數(shù)據(jù)
var ctx=can.getContext('2d'); //獲得筆刷
ctx.strokeStyle="blue"; //設(shè)置線條顏色
ctx.fillStyle="#ddedee"; //填充矩形
ctx.fillRect(100,100,100,100);
ctx.strokeRect(100,100,100,100);//線條畫矩形
</script>
演示圖
圖5
HTML5 是下一代 HTML 標(biāo)準(zhǔn)。
HTML5 受包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等國外主流瀏覽器的支持；國內(nèi)的傲游瀏覽器（Maxthon）， 360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等同樣具備支持HTML5的能力。
優(yōu)勢：開發(fā)技術(shù)簡單，研發(fā)周期短，用戶接觸成本低
一、H5的優(yōu)勢是兼容性好，用H5的技術(shù)開發(fā)出來的應(yīng)用在各個(gè)平臺都適用，且可以在網(wǎng)頁上直接進(jìn)行調(diào)試和修改，開發(fā)和維護(hù)的成本較低，開發(fā)周期較短。
二、強(qiáng)化了Web網(wǎng)頁的表現(xiàn)性能。除了可描繪二維圖形外，還準(zhǔn)備了用于播放視頻和音頻的標(biāo)簽。
三、追加了本地?cái)?shù)據(jù)庫等Web應(yīng)用的功能。
適合場景：把手機(jī)網(wǎng)站當(dāng)成網(wǎng)絡(luò)上的“電子產(chǎn)品介紹手冊”。
手機(jī)網(wǎng)站更適合用戶“主動(dòng)百度搜索”或者“主動(dòng)訪問”，適合于陌生用戶的低頻或初次訪問，讓用戶更完整和詳細(xì)的獲得快速介紹。通常用戶使用搜索引擎、手動(dòng)輸入網(wǎng)址等形式進(jìn)行訪問。
H5不足的地方表現(xiàn)在軟件運(yùn)行速度容易受網(wǎng)絡(luò)影響，對于攝像頭、陀螺儀等硬件支持較差，開發(fā)出來的應(yīng)用性能較差，不適合處理較復(fù)雜的邏輯等等。
H5的應(yīng)用。
1、HTML5的游戲開發(fā)，例如簡單的微信小游戲，打飛機(jī)等，也有白鷺egret引擎，還有cocos2d-js等等。
2、輕應(yīng)用、Webapp、微站
網(wǎng)站包括PC端和移動(dòng)端，響應(yīng)式網(wǎng)站適配不同的終端。
HTML5培訓(xùn)開發(fā)移動(dòng)應(yīng)用更靈活。采用HTML5技術(shù)的輕應(yīng)用、WebApp相信會(huì)更容易被大眾所認(rèn)可，接受。
3、Hybrid App是指介于web-app、native-app這兩者之間的app,它雖然看上去是一個(gè)Native App，但只有一個(gè)UI WebView，里面訪問的是一個(gè)Web App，比如街旁網(wǎng)最開始的應(yīng)用就是包了個(gè)客戶端的殼，其實(shí)里面是HTML5的網(wǎng)頁，后來才推出真正的原生應(yīng)用。
4、基于微信平臺的開發(fā)，微信開放JSSDK讓H5的開發(fā)人員可以調(diào)用底層功能，實(shí)現(xiàn)掃一掃，卡卷，微信支付，等操作
5、HTML5教程移動(dòng)營銷
游戲化、場景化、跨屏互動(dòng)，HTML5技術(shù)完美的滿足了各大廣告商心里的夢想，從形式到功用、到傳播，只要是你能想到的，沒有它做不到的。
6、WebVR讓虛擬現(xiàn)實(shí)大眾化
WebVR就是通過HTML5教程來把虛擬現(xiàn)實(shí)內(nèi)容嵌入到web頁面中，谷歌、Facebook等巨頭都十分欣賞這一功能。
7、動(dòng)漫、二次元
HTML5技術(shù)的成熟，還將會(huì)帶來動(dòng)漫產(chǎn)業(yè)的升級，從而為讀者們帶來更場景化，更真實(shí)化的方便體驗(yàn)。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
