什么是 HTML5-

什么是 HTML5?

TML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。

HTML5的設計目的是為了在移動設備上支持多媒體。

HTML5 簡單易學。

HTML5 是下一代 HTML 標準。

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

HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。

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

WHATWG 致力于 web 表單和應用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。

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

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

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

下面是一個簡單的HTML5文檔：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文檔標題</title></head><body>文檔內容......</body></html>

HTML5 的改進

新元素
新屬性
完全支持 CSS3
Video 和 Audio
2D/3D 制圖
本地存儲
本地 SQL 數據
Web 應用

HTML5 多媒體

使用 HTML5 你可以簡單的在網頁中播放視頻(video)與音頻 (audio) 。

HTML5 <video>
HTML5 <audio>

HTML5 應用

使用 HTML5 你可以簡單地開發應用

本地數據存儲
訪問本地文件
本地 SQL 數據
緩存引用
Javascript 工作者
XHTMLHttpRequest 2

HTML5 圖形

使用 HTML5 你可以簡單的繪制圖形:

使用 <canvas> 元素。
使用內聯 SVG。
使用 CSS3 2D 轉換、CSS3 3D 轉換。

HTML5 使用 CSS3

新選擇器
新屬性
動畫
2D/3D 轉換
圓角
陰影效果
可下載的字體

了解更多CSS3知識請查看本站的 CSS3 教程。

HTML5 表單

新表單元素, 新屬性，新輸入類型，自動驗證。

已移除元素

以下的 HTML 4.01 元素在HTML5中已經被刪除:

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

TML5是HTML的最新版本，HTML又稱為超文本語言。如今幾乎所有的智能手機和平板電腦都能支持HTML5。HTML5培訓認為它的主要目的是用來開發更優秀、更高效的Web應用，它是在開放Web標準下開發的API和規范的。對于iOS和Android設備，都能很好的支持HTML5，因為它們運行的瀏覽器Safari、Chrome都基于WebKit，WebKit對HTML5有相當出色的支持。

Web應用

Web應用是指與桌面應用相似的web應用（Word、IE、Web瀏覽器），簡而言之，Web應用就是不直接在計算機上打開，而是通過Web瀏覽器來運行。使用HTML5為iOS和Android設計Web頁面的好處是在未來的設備上可以繼續使用。

HTML5中的新標簽

<article>-文檔或站點的一個獨立部分

<aside>-頁面或站點主題之外的內容

<figcaption>-figure元素的標題

<figure>-獨立于文本流之外的一段流內容（圖形、圖表）

<footer>-文檔或章節的頁腳

<header>-文檔或標題的頁眉

<hgroup>-標題組

<nav>-導航

<section>-章節部分

以下是一小段代碼：

在許多Web設計中，<div id="header">，在HTML5中將寫成<header>，還有一些其他不同變化。

HTML5新的多媒體標簽

<audio>-內嵌音頻文件

<canvas>-內嵌動態圖形

<source>-內嵌音頻及視頻的源文件

<track>-內嵌音頻及視頻的輔助多媒體軌道

<video>-內嵌視頻文件

HTML5 的新屬性

onabort-操作終止時觸發

onbeforeonload、onbeforeonunload、onunload-在某一元素記載或卸載之前或同時觸發

oncontextmenu-打開菜單時觸發

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-發生拖拽時觸發

onerror及onmessage-錯誤或彈出信息時觸發

onscroll-用戶滾動瀏覽器滾動條時觸發

onresize-調整元素大小時觸發

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

用CSS3設計移動頁面樣式

CSS（層疊樣式表），是移動Web開發中的一個重要組成部分，CSS用于定義HTML文檔的外觀，Web頁面顯示或特定移動設備來定制HTML樣式。創建CSS樣式表，CSS由附加了樣式屬性的一個或者多個選擇器組成。例如在更改段落的文本顏色時，可以寫為：

p {

color：red；

}

p為選擇器，樣式屬性為color：red。如果要加入第二個選擇器，需要逗號隔開

p， .redText }

color: red

}

樣式表附加到Web頁面的方法：

1、內聯在標簽中

2、內嵌于HTML開頭

3、放在一個獨立文檔作為樣式表

內聯：

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

內聯的缺點是只能定義所在標簽的樣式，如果要講所有段落都定義為紅色時，需要就愛那個樣式屬性添加在每個段落。

內嵌：

內嵌樣式表位于文檔的<head>標簽中，使用<style>標簽，下面是講所有段落文本設置為紅色

效果如下：

內嵌樣式與內聯樣式一樣，只能影響所處頁面的樣式。如果我們需要將同一樣式作用于其他Web頁面，需要將它們分別粘貼到每個頁面，這個時候獨立的樣式表的好處就體現出來了。

外聯樣式表

創建外聯樣式表的步驟：

1.打開一個新文檔

2.編寫樣式表，但是要去掉<style>標簽

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

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

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

ps:外聯樣式表可以提高網站加載速度，如果將所有樣式放在同一個文檔中的外聯樣式表

學習無止境，鄭州HTML5培訓哪里好，快來藍鷗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

在線咨詢

上一篇：原創自適應簡單工具導航源碼
下一篇：php新聞管理系統成品源代碼，mysql數據庫 #h