HTML5 簡介

TML5 簡介

HTML5 示例

實例

<!DOCTYPE html>

<html>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

什么是 HTML5？

HTML5 是最新的 HTML 標準。

HTML5 是專門為承載豐富的 web 內容而設計的，并且無需額外插件。

HTML5 擁有新的語義、圖形以及多媒體元素。

HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。

HTML5 是跨平臺的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。

注釋：在下面的章節中，您將學到如何“幫助”老版本的瀏覽器處理 HTML5。

HTML5中的新內容？

HTML5 的新的文檔類型（DOCTYPE）聲明非常簡單：

<!DOCTYPE html>

The new character encoding (charset) declaration is also very simple:

HTML5 實例：

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

Content of the document......

</body>

</html>

注釋：HTML5 中默認的字符編碼是 UTF-8。

HTML5 -新的屬性語法

HTML5 標準允許 4 中不同的屬性語法。

本例演示在 <input> 標簽中使用的不同語法：

類型	示例
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 標準中，根據對屬性的需求，可能會用到所有 4 種語法。

HTML5 -新特性

HTML5 的一些最有趣的新特性：

·新的語義元素，比如 <header>, <footer>, <article>, and <section>。

·新的表單控件，比如數字、日期、時間、日歷和滑塊。

·強大的圖像支持（借由 <canvas> 和 <svg>）

·強大的多媒體支持（借由 <video> 和 <audio>）

·強大的新 API，比如用本地存儲取代 cookie。

HTML5 -被刪元素

以下 HTML 4.01 元素已從 HTML5 中刪除：

·<acronym>

·<applet>

·<basefont>

·<big>

·<center>

·<dir>

·<font>

·<frame>

·<frameset>

·<noframes>

·<strike>

·<tt>

、什么是 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

HTML5 是下一代 HTML 標準。

HTML5 受包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等國外主流瀏覽器的支持；國內的傲游瀏覽器（Maxthon）， 360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等同樣具備支持HTML5的能力。

優勢：開發技術簡單，研發周期短，用戶接觸成本低

一、H5的優勢是兼容性好，用H5的技術開發出來的應用在各個平臺都適用，且可以在網頁上直接進行調試和修改，開發和維護的成本較低，開發周期較短。

二、強化了Web網頁的表現性能。除了可描繪二維圖形外，還準備了用于播放視頻和音頻的標簽。

三、追加了本地數據庫等Web應用的功能。

適合場景：把手機網站當成網絡上的“電子產品介紹手冊”。

手機網站更適合用戶“主動百度搜索”或者“主動訪問”，適合于陌生用戶的低頻或初次訪問，讓用戶更完整和詳細的獲得快速介紹。通常用戶使用搜索引擎、手動輸入網址等形式進行訪問。

H5不足的地方表現在軟件運行速度容易受網絡影響，對于攝像頭、陀螺儀等硬件支持較差，開發出來的應用性能較差，不適合處理較復雜的邏輯等等。

H5的應用。

1、HTML5的游戲開發，例如簡單的微信小游戲，打飛機等，也有白鷺egret引擎，還有cocos2d-js等等。

2、輕應用、Webapp、微站

網站包括PC端和移動端，響應式網站適配不同的終端。

HTML5培訓開發移動應用更靈活。采用HTML5技術的輕應用、WebApp相信會更容易被大眾所認可，接受。

3、Hybrid App是指介于web-app、native-app這兩者之間的app,它雖然看上去是一個Native App，但只有一個UI WebView，里面訪問的是一個Web App，比如街旁網最開始的應用就是包了個客戶端的殼，其實里面是HTML5的網頁，后來才推出真正的原生應用。

4、基于微信平臺的開發，微信開放JSSDK讓H5的開發人員可以調用底層功能，實現掃一掃，卡卷，微信支付，等操作

5、HTML5教程移動營銷

游戲化、場景化、跨屏互動，HTML5技術完美的滿足了各大廣告商心里的夢想，從形式到功用、到傳播，只要是你能想到的，沒有它做不到的。

6、WebVR讓虛擬現實大眾化

WebVR就是通過HTML5教程來把虛擬現實內容嵌入到web頁面中，谷歌、Facebook等巨頭都十分欣賞這一功能。

7、動漫、二次元

HTML5技術的成熟，還將會帶來動漫產業的升級，從而為讀者們帶來更場景化，更真實化的方便體驗。

在線咨詢

上一篇：Html源代碼加密？
下一篇：jQuery的事件（代碼演示如何使用）

您的項目需求

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

整合營銷服務商

HTML5 簡介

、什么是 HTML5？

二、HTML5的一些新特性

三、video 元素

四、audio元素

五、canvas 元素

六、繪制三角形

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

八、繪制一個實心圓

九、繪制一個空心矩形

十、繪制一個實心的矩形

您的項目需求