什么是 HTML5?

TML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。

HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。

HTML5 簡(jiǎn)單易學(xué)。

HTML5 是下一代 HTML 標(biāo)準(zhǔn)。

HTML , HTML 4.01的上一個(gè)版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。

HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。

HTML5 是 W3C 與 WHATWG 合作的結(jié)果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專(zhuān)注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。

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

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

<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡(jiǎn)單

下面是一個(gè)簡(jiǎn)單的HTML5文檔：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文檔標(biāo)題</title></head><body>文檔內(nèi)容......</body></html>

HTML5 的改進(jìn)

新元素
新屬性
完全支持 CSS3
Video 和 Audio
2D/3D 制圖
本地存儲(chǔ)
本地 SQL 數(shù)據(jù)
Web 應(yīng)用

HTML5 多媒體

使用 HTML5 你可以簡(jiǎn)單的在網(wǎng)頁(yè)中播放視頻(video)與音頻 (audio) 。

HTML5 <video>
HTML5 <audio>

HTML5 應(yīng)用

使用 HTML5 你可以簡(jiǎn)單地開(kāi)發(fā)應(yīng)用

本地?cái)?shù)據(jù)存儲(chǔ)
訪問(wèn)本地文件
本地 SQL 數(shù)據(jù)
緩存引用
Javascript 工作者
XHTMLHttpRequest 2

HTML5 圖形

使用 HTML5 你可以簡(jiǎn)單的繪制圖形:

使用 <canvas> 元素。
使用內(nèi)聯(lián) SVG。
使用 CSS3 2D 轉(zhuǎn)換、CSS3 3D 轉(zhuǎn)換。

HTML5 使用 CSS3

新選擇器
新屬性
動(dòng)畫(huà)
2D/3D 轉(zhuǎn)換
圓角
陰影效果
可下載的字體

了解更多CSS3知識(shí)請(qǐng)查看本站的 CSS3 教程。

HTML5 表單

新表單元素, 新屬性，新輸入類(lèi)型，自動(dòng)驗(yàn)證。

已移除元素

以下的 HTML 4.01 元素在HTML5中已經(jīng)被刪除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

TML5是HTML的最新版本，HTML又稱(chēng)為超文本語(yǔ)言。如今幾乎所有的智能手機(jī)和平板電腦都能支持HTML5。HTML5培訓(xùn)認(rèn)為它的主要目的是用來(lái)開(kāi)發(fā)更優(yōu)秀、更高效的Web應(yīng)用，它是在開(kāi)放Web標(biāo)準(zhǔn)下開(kāi)發(fā)的API和規(guī)范的。對(duì)于iOS和Android設(shè)備，都能很好的支持HTML5，因?yàn)樗鼈冞\(yùn)行的瀏覽器Safari、Chrome都基于WebKit，WebKit對(duì)HTML5有相當(dāng)出色的支持。

Web應(yīng)用

Web應(yīng)用是指與桌面應(yīng)用相似的web應(yīng)用（Word、IE、Web瀏覽器），簡(jiǎn)而言之，Web應(yīng)用就是不直接在計(jì)算機(jī)上打開(kāi)，而是通過(guò)Web瀏覽器來(lái)運(yùn)行。使用HTML5為iOS和Android設(shè)計(jì)Web頁(yè)面的好處是在未來(lái)的設(shè)備上可以繼續(xù)使用。

HTML5中的新標(biāo)簽

<article>-文檔或站點(diǎn)的一個(gè)獨(dú)立部分

<aside>-頁(yè)面或站點(diǎn)主題之外的內(nèi)容

<figcaption>-figure元素的標(biāo)題

<figure>-獨(dú)立于文本流之外的一段流內(nèi)容（圖形、圖表）

<footer>-文檔或章節(jié)的頁(yè)腳

<header>-文檔或標(biāo)題的頁(yè)眉

<hgroup>-標(biāo)題組

<nav>-導(dǎo)航

<section>-章節(jié)部分

以下是一小段代碼：

在許多Web設(shè)計(jì)中，<div id = "header">，在HTML5中將寫(xiě)成<header>，還有一些其他不同變化。

HTML5新的多媒體標(biāo)簽

<audio>-內(nèi)嵌音頻文件

<canvas>-內(nèi)嵌動(dòng)態(tài)圖形

<source>-內(nèi)嵌音頻及視頻的源文件

<track>-內(nèi)嵌音頻及視頻的輔助多媒體軌道

<video>-內(nèi)嵌視頻文件

HTML5 的新屬性

onabort-操作終止時(shí)觸發(fā)

onbeforeonload、onbeforeonunload、onunload-在某一元素記載或卸載之前或同時(shí)觸發(fā)

oncontextmenu-打開(kāi)菜單時(shí)觸發(fā)

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-發(fā)生拖拽時(shí)觸發(fā)

onerror及onmessage-錯(cuò)誤或彈出信息時(shí)觸發(fā)

onscroll-用戶滾動(dòng)瀏覽器滾動(dòng)條時(shí)觸發(fā)

onresize-調(diào)整元素大小時(shí)觸發(fā)

HTML5擁有與視頻、音頻、Web應(yīng)用程序、編輯頁(yè)面內(nèi)容、拖拽以及展示瀏覽器歷史等功能相關(guān)的API，另外H5開(kāi)放Web還提供于地理定位、Web存儲(chǔ)及離線Web應(yīng)用程序的API，這些都非常適合在移動(dòng)設(shè)備上使用。

用CSS3設(shè)計(jì)移動(dòng)頁(yè)面樣式

CSS（層疊樣式表），是移動(dòng)Web開(kāi)發(fā)中的一個(gè)重要組成部分，CSS用于定義HTML文檔的外觀，Web頁(yè)面顯示或特定移動(dòng)設(shè)備來(lái)定制HTML樣式。創(chuàng)建CSS樣式表，CSS由附加了樣式屬性的一個(gè)或者多個(gè)選擇器組成。例如在更改段落的文本顏色時(shí)，可以寫(xiě)為：

p {

color：red；

}

p為選擇器，樣式屬性為color：red。如果要加入第二個(gè)選擇器，需要逗號(hào)隔開(kāi)

p， .redText }

color: red

}

樣式表附加到Web頁(yè)面的方法：

1、內(nèi)聯(lián)在標(biāo)簽中

2、內(nèi)嵌于HTML開(kāi)頭

3、放在一個(gè)獨(dú)立文檔作為樣式表

內(nèi)聯(lián)：

將單一段落的文本顏色定位為紅色

內(nèi)聯(lián)的缺點(diǎn)是只能定義所在標(biāo)簽的樣式，如果要講所有段落都定義為紅色時(shí)，需要就愛(ài)那個(gè)樣式屬性添加在每個(gè)段落。

內(nèi)嵌：

內(nèi)嵌樣式表位于文檔的<head>標(biāo)簽中，使用<style>標(biāo)簽，下面是講所有段落文本設(shè)置為紅色

效果如下：

內(nèi)嵌樣式與內(nèi)聯(lián)樣式一樣，只能影響所處頁(yè)面的樣式。如果我們需要將同一樣式作用于其他Web頁(yè)面，需要將它們分別粘貼到每個(gè)頁(yè)面，這個(gè)時(shí)候獨(dú)立的樣式表的好處就體現(xiàn)出來(lái)了。

外聯(lián)樣式表

創(chuàng)建外聯(lián)樣式表的步驟：

1.打開(kāi)一個(gè)新文檔

2.編寫(xiě)樣式表，但是要去掉<style>標(biāo)簽

3. 講該文件保存為擴(kuò)展名為.css的樣式表文件,例如：style.css

下面的代碼是將段落定義為紅色并包含其他樣式的樣式表

ps：完成樣式表，要記得講它附加到Web頁(yè)面中，在文檔開(kāi)頭加一個(gè)指向樣式表的<link>標(biāo)簽。代碼如下：

ps:外聯(lián)樣式表可以提高網(wǎng)站加載速度，如果將所有樣式放在同一個(gè)文檔中的外聯(lián)樣式表

學(xué)習(xí)無(wú)止境，鄭州HTML5培訓(xùn)哪里好，快來(lái)藍(lán)鷗HTML5培訓(xùn)看看吧，督促自己不斷前進(jìn)！

、什么是 HTML5？

HTML5 是最新的 HTML 標(biāo)準(zhǔn)；
HTML5 是專(zhuān)門(mén)為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無(wú)需額外插件；
HTML5 擁有新的語(yǔ)義、圖形以及多媒體元素；
HTML5 提供的新元素和新的 API 簡(jiǎn)化了 web 應(yīng)用程序的搭建；
HTML5 是跨平臺(tái)的，被設(shè)計(jì)為在不同類(lèi)型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運(yùn)行；

二、HTML5的一些新特性

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

三、video 元素

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

video 元素的三種視頻格式：

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

video 元素的屬性：

src：要播放的視頻的 URL；
width：設(shè)置視頻播放器的寬度；
height：設(shè)置視頻播放器的高度；
autoplay：自動(dòng)播放；
controls：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕；
loop：循環(huán)播放；
preload：如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

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

四、audio元素

HTML5 規(guī)定了在網(wǎng)頁(yè)上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <audio> 元素；
<audio>元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

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

audio元素的屬性：

src：要播放的音頻的 URL；
autoplay：自動(dòng)播放；
controls：如果出現(xiàn)該屬性，則向用戶顯示控件；
loop：循環(huán)播放；
preload：如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

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

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通過(guò) JavaScript 在網(wǎng)頁(yè)上繪制圖像，元素本身并沒(méi)有繪制能力，它只是圖形容器，必須使用腳本來(lái)繪制圖形；
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
創(chuàng)建一個(gè)畫(huà)布

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

Canvas在HTML5 中的新屬性有：

height：設(shè)置 canvas 的高度；
width：設(shè)置 canvas 的寬度；

六、繪制三角形

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

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

beginPath()：開(kāi)始一條路徑，或重置當(dāng)前的路徑；

moveTo()：把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線條。

lineTo()：添加一個(gè)新點(diǎn)，然后創(chuàng)建從該點(diǎn)到畫(huà)布中最后指定點(diǎn)的線條（該方法并不會(huì)創(chuàng)建線條）；

closePath()：創(chuàng)建從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑；

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

stroke()：會(huì)實(shí)際地繪制出路徑；

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

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();//填充或閉合 需要先閉合路徑才能畫(huà)
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

七、使用Canvas繪制一個(gè)空心圓

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對(duì)象
 ctx.beginPath();//標(biāo)志開(kāi)始一個(gè)路徑
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
 ctx.stroke()
 </script>

演示圖

圖2

八、繪制一個(gè)實(shí)心圓

<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

九、繪制一個(gè)空心矩形

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"); //獲得畫(huà)板數(shù)據(jù)
 var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設(shè)置線條顏色
 ctx.strokeRect(100,100,100,100); //線條畫(huà)矩形
 </script>

演示圖

圖4

十、繪制一個(gè)實(shí)心的矩形

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");//獲得畫(huà)板數(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);//線條畫(huà)矩形
 </script>

演示圖

圖5

在線咨詢

上一篇：16個(gè)超牛逼的HTML5和JavaScript特效
下一篇：css3制作圖形大全：簡(jiǎn)單幾句代碼畫(huà)出漂亮的圖形，一起來(lái)看看吧~

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

什么是 HTML5?

、什么是 HTML5？

二、HTML5的一些新特性

三、video 元素

四、audio元素

五、canvas 元素