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>-內嵌動態圖形
<embed>-增添其他不包含特定H5元素的技術
<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、放在一個獨立文檔作為樣式表
內聯:
將單一段落的文本顏色定位為紅色
<p : red;">
內聯的缺點是只能定義所在標簽的樣式,如果要講所有段落都定義為紅色時,需要就愛那個樣式屬性添加在每個段落。
內嵌:
內嵌樣式表位于文檔的<head>標簽中,使用<style>標簽,下面是講所有段落文本設置為紅色
效果如下:
內嵌樣式與內聯樣式一樣,只能影響所處頁面的樣式。如果我們需要將同一樣式作用于其他Web頁面,需要將它們分別粘貼到每個頁面,這個時候獨立的樣式表的好處就體現出來了。
外聯樣式表
創建外聯樣式表的步驟:
1.打開一個新文檔
2.編寫樣式表,但是要去掉<style>標簽
3. 講該文件保存為擴展名為.css的樣式表文件,例如 :style.css
下面的代碼是將段落定義為紅色并包含其他樣式的樣式表
ps:完成樣式表,要記得講它附加到Web頁面中,在文檔開頭加一個指向樣式表的<link>標簽。代碼如下:
<link href="styles.css" rel="stylesheet">
ps:外聯樣式表可以提高網站加載速度,如果將所有樣式放在同一個文檔中的外聯樣式表
學習無止境,鄭州HTML5培訓哪里好,快來藍鷗HTML5培訓看看吧,督促自己不斷前進!
video 元素的三種視頻格式:
video 元素的屬性:
video 元素的方法:
audio元素的三種音頻格式:
audio元素的屬性:
audio元素的方法:
什么是 Canvas?
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas在HTML5 中的新屬性有:
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
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
*請認真填寫需求信息,我們會在24小時內與您取得聯系。