HTML5的介紹

、什么是 HTML5？

HTML5 是最新的 HTML 標準；
HTML5 是專門為承載豐富的 web 內容而設計的，并且無需額外插件；
HTML5 擁有新的語義、圖形以及多媒體元素；
HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建；
HTML5 是跨平臺的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行；

二、HTML5的一些新特性

用于繪畫的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
對本地離線存儲的更好的支持；
新的特殊內容元素，比如article、footer、header、nav、section；
新的表單控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暫停和音量控件來控制視頻；
<video> 元素也提供了 width 和 height 屬性控制視頻的尺寸；
<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的；

video 元素的三種視頻格式：

Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件；
MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件；
WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件；

video 元素的屬性：

src：要播放的視頻的 URL；
width：設置視頻播放器的寬度；
height：設置視頻播放器的高度；
autoplay：自動播放；
controls：如果出現該屬性，則向用戶顯示控件，比如播放按鈕；
loop：循環播放；
preload：如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

pause()：暫停當前播放的視頻；
play()：開始播放視頻；
load()：重新加載視頻元素；
canPlayType()：檢測瀏覽器是否能播放指定的視頻類型；
addTextTrack()：向音頻/視頻添加新的文本軌道；

四、audio元素

HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素；
<audio>元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

MP3：適用于Internet Explorer、Chrome、Safari 等瀏覽器；
Wav：適用于Firefox、Opera等瀏覽器；
Ogg：適用于Firefox、IE9、Chrome 瀏覽器；

audio元素的屬性：

src：要播放的音頻的 URL；
autoplay：自動播放；
controls：如果出現該屬性，則向用戶顯示控件；
loop：循環播放；
preload：如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

pause()：暫停當前播放的音頻；
play()：開始播放音頻；
load()：重新加載音頻；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通過 JavaScript 在網頁上繪制圖像，元素本身并沒有繪制能力，它只是圖形容器，必須使用腳本來繪制圖形；
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
創建一個畫布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新屬性有：

height：設置 canvas 的高度；
width：設置 canvas 的寬度；

六、繪制三角形

getElementById()：可返回對擁有指定 ID 的第一個對象的引用；

getContext()：返回一個用于在畫布上繪圖的環境，2d表示二維繪圖；

beginPath()：開始一條路徑，或重置當前的路徑；

moveTo()：把路徑移動到畫布中的指定點，不創建線條。

lineTo()：添加一個新點，然后創建從該點到畫布中最后指定點的線條（該方法并不會創建線條）；

closePath()：創建從當前點到開始點的路徑；

strokeStyle屬性：設置或返回用于筆觸的顏色、漸變或模式；

stroke()：會實際地繪制出路徑；

fillStyle屬性：設置或返回用于填充繪畫的顏色、漸變或模式；

fill()：填充當前的圖像（路徑），默認顏色是黑色；

//空心三角形
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();
//實心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示圖

圖1

七、使用Canvas繪制一個空心圓

arc()：創建弧或曲線（用于創建圓或部分圓）；

<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"); //創建context對象
 ctx.beginPath();//標志開始一個路徑
 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()：繪制矩形（不填色），筆觸的默認顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //獲得畫板數據
 var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設置線條顏色
 ctx.strokeRect(100,100,100,100); //線條畫矩形
 </script>

演示圖

圖4

十、繪制一個實心的矩形

fillRect()：繪制“已填色”的矩形，默認的填充顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫板數據
var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設置線條顏色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//線條畫矩形
 </script>

演示圖

圖5

1.什么是HTML5開發工程師?

HTML5開發工程師是協調HTML5設計師、后端程序員實現網站頁面或程序界面，優化交互體驗的一個職位。

2.HTML5開發工程師需要掌握哪些職業技能?

市場非常需要精通HTML、CSS、JavaScript、JQuery、Ajax等這些核心技術，具備互聯網交互設計能力，熟悉后端服務器運行環境和數據通訊協議，掌握響應式布局框架，Bootstrap、Angular等框架的HTML5開發工程師。

3.HTML5開發工程師未來的就業前景好嗎?

隨著HTML5行業發展，國外HTML5開發和后端開發人員比例為1:1。國內目前依舊在1:3以下，HTML5開發職位目前的人才缺口達到近50萬人。

4.HTML5工程師需要學習的內容，主要有哪些?

第一階段HTML頁面結構和CSS3屬性

HTML語句，HTML頁面結構、css語法、style屬性、link和style標簽、id屬性、等HTML語句中的相關屬性。瀏覽器兼容性問題處理:XHTML與CSS校驗，XHTML校驗器，CSS校驗器。解決如：Chrome、Safari、firefox、opera 等主流瀏覽器的兼容問題。學習CSS3屬性，結合HTML制作靜態頁面效果。

第二階段 Javascript特效語句

JavaScript基礎語法、數組Object、Function、String 和正則表達式、常用內置對象、JSON、錯誤處理、面向對象高級編程。JavaScrip的引入及插入位置、JS元素的獲取及簡單的函數引用、JS的頁面輸出及注釋語句、變量及JS的數據類型、表單的簡單應用及JS的操作符等。

第三階段 jQuery與JavaScript實戰課程案例

Jquery入門和實戰jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，并且方便地為網站提供AJAX交互。

第四階段微信小程序等混合應用開發

包括初識微信公眾號，訂閱號的基本功能，使用百度BAE實現代碼的快速上線，使用Git完成線上代碼部署，公眾號開發權限及功能接入，微信JSSDK接口API，微信場景項目開發與接入等等。

好程序員HTML5大前端學科提供最新的前端IT技術，歡迎各位同事在線咨詢，試聽考察，從平凡到卓越，為夢想而拼搏！成就非凡人生，歡迎來到好程序員！

廣網12月11日消息（記者賈斯曼）2016年HTML5產業發展進行地如火如荼。國內瀏覽器升級內核支持H5標準，谷歌將HTML5作為Chrome瀏覽器默認選項，巨頭們頻繁示好的動作，讓HTML5春天的降臨不再是一個問號。

白鷺時代創始人兼CEO陳書藝表示，2016年H5行業趨勢可以概括為兩大關鍵詞：商業化、跨界。商業化方面，游戲領域已出現月流水超3000萬的H5游戲，H5移動廣告、移動應用則撬動了千萬級企業市場;跨界方面，H5正突破游戲的邊界，驅動營銷、應用、動漫、教育等行業的發展與革新。

回顧HTML5游戲的發展歷程，無論是從渠道、CP，用戶規模、游戲產品數量，還是品類與品質、技術以及商業模式等各個層面，HTML5游戲行業正在向更深層次進化?！扒婪植级嘣脱邪l技術實現不斷突破，為整個行業的快速向前奠定了基礎。自2014年來，以白鷺時代為代表的技術服務企業，解決了HTML5游戲性能、兼容和運行環境的難題，并且突破了WebGL支持等研發技術瓶頸，同時實現了HTML5游戲支付功能并提升了商業化能力。”陳書藝說。

從數據上看，截止到今年Q3，HTML5游戲已達到5787款，呈現明顯的逐年增多趨勢。在品類上，也從諸如《圍住神經貓》、《愚公移山》等為代表的休閑益智、玩法品類單一的階段，進入到了以《傳奇世界》等為代表的重度化、精品化產品階段。與此同時，進入HTML5游戲領域的CP已超1500家，迅速增長的背后不免出現同質化、短期變現、量多質少和雅達利危機等現象。

在產業鏈領域不斷進化的環境下，HTML5游戲在商業模式、用戶規模以及市場規模方面，得到了快速發展和進步。目前，HTML5游戲的用戶規模，以及占據整個移動游戲用戶47%的比例，接近一半。而在商業模式方面，道具付費超越廣告付費成為主流，占比達到了68%，從整體上看，HTML5游戲已經與原生游戲一樣，具備了獨立的商業化盈利能力。而步入拐點階段的2016年，HTML5游戲的市場規模也將超11億元，其市場快速增長仍舊是主旋律。

陳書藝指出，HTML5的能力不止于游戲行業。隨著互聯網巨頭紛紛擁抱HTML5，HTML5正在以應用、小程序、AR/VR、游戲、動漫、營銷等內容形態，開啟移動互聯網無界時代。白鷺時代推出了Egret Wing3和青雀移動，以幫助廣大中小開發者抓住微信小程序帶來的機會。

最后，陳書藝預測了HTML5游戲市場的未來發展，他表示，當HTML5游戲的商業化能力得到充分釋放之后，2017年HTML5游戲的市場規模，必然會突破30億大關，甚至達到50億規模。

在線咨詢

上一篇：HTML基礎知識（一）入門知識
下一篇：Web前端培訓：10個輕量級CSS框架

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5的介紹

、什么是 HTML5？

二、HTML5的一些新特性

三、video 元素

四、audio元素

五、canvas 元素

六、繪制三角形

七、使用Canvas繪制一個空心圓

八、繪制一個實心圓

九、繪制一個空心矩形

十、繪制一個實心的矩形