我們都應該誰知道html5是html的第五次重大修改,那麼,既然是重大修改,一定會有新增的特性,所以,html5的新增特性有哪些呢? 接下來這篇文章要講給大家來總結一下html5的新特性。
首先對於html5是什麼意思我們都應該知道,若是不太了解html5,那麼你可以看這篇文章:html5是什麼? html5有什麼用? ,好了,在知道html5的具體定義了後,我們就來看看html5的新特性有哪些吧。
html5的新特性有哪些?
一、html5新特性之用於繪畫的canvas元素
canvas 元素用於在網頁上繪製圖形,畫布是一個矩形區域,您可以控制其每一像素。 canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/i/eg_flower.png" cxt.drawImage(img,0,0); </script>
下面來說一下關於svg的內容:svg是用來描述二維向量圖形的一種圖形格式。
svg有三種用法:
#把svg直接當成圖片放在網頁上。
svg實作動畫。
svg圖片的互動和濾鏡效果。
說明:
(1)Canvas 透過 JavaScript 來繪製 2D 圖形。
(2)Canvas 是逐像素進行渲染的。
(3)在 canvas 中,一旦圖形被繪製完成,它就不會繼續得到瀏覽器的關注。如果其位置發生變化,那麼整個場景也需要重新繪製,包 括任何或許已被圖形覆蓋的物件。
(4)svg是一種使用 XML 來描述 2D 圖形的語言。
(5)svg基於XML,這表示 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
(6)在svg中,每個被繪製的圖形被視為物件。如果svg物件的屬性發生變化,那麼瀏覽器能夠自動重現圖形。
更多關於canvas和svg的內容可以參考:HTML5 canvas和HTML5 內聯SVG
二、html5新特性之更加豐富強大的表單
html5 擁有多個新的表單Input 輸入類型。這些新特性提供了更好的輸入控制和驗證。
html5 也新增以下表單元素:
fc86e7b705049fc9d4fccc89a2e80ee3:元素規定輸入域的選項列表,使用d5fd7aea971a85678ba271703566ebfd 元素的list 屬性與fc86e7b705049fc9d4fccc89a2e80ee3 元素的id綁定。
aa983b9eb8086376f1f6481364a02e5a:提供一種驗證使用者的可靠方法,標籤規定用於表單的金鑰對產生器欄位。
be6d67dae90cc1ad6469079e163d0939:用於不同類型的輸出,例如計算或腳本輸出。
HTML5 新增的表單屬性:
placehoder 屬性:簡短的提示在使用者輸入值前會顯示在輸入網域上。即我們常見的輸入框預設提示,在使用者輸入後消失。
required 屬性:是一個 boolean 屬性。要求填寫的輸入域不能為空
pattern 屬性:描述了一個正規表示式用來驗證d5fd7aea971a85678ba271703566ebfd 元素的值。
min 與 max 屬性:設定元素最小值與最大值。
step 屬性:為輸入域規定合法的數字間隔。
height 和 width 屬性:用於 image 類型的 d5fd7aea971a85678ba271703566ebfd 標籤的圖像高度和寬度。
autofocus 屬性:是一個 boolean 屬性。規定在頁面載入時,網域自動地獲得焦點。
multiple 屬性:是一個 boolean 屬性。規定d5fd7aea971a85678ba271703566ebfd 元素中可選擇多個值。
三、html5新特性之用於媒介的video與audio元素
#1、html5提供了播放音訊檔案的標準,即使用b97864c2e0ef2353a16c4d64c7734e92元素
實例:ea180a650bd70f206b6f1e645e677ed8
<source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
說明:
(1)control屬性供新增播放、暫停和音量控制。
(2)在b97864c2e0ef2353a16c4d64c7734e92 與 81d2bc32cafa2076a27f10cdd878d0ab 之間你需要插入瀏覽器不支援的b97864c2e0ef2353a16c4d64c7734e92元素的提示文字 。
(3)b97864c2e0ef2353a16c4d64c7734e92 元素允許使用多個 e02da388656c3265154666b7c71a8ddc 元素. e02da388656c3265154666b7c71a8ddc 元素可以連結不同的音訊文件,瀏覽器將使用第一個支援的音訊檔案。
(4)b97864c2e0ef2353a16c4d64c7734e92元素支援三種音訊格式檔案: MP3, Wav, 和 Ogg。
2、html5提供了一種透過video元素來包含影片的標準方法。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video>
說明:
(1)control 提供了 播放、暫停和音量控制來控制影片。也可以使用dom操作來控制影片的播放暫停,如 play() 和 pause() 方法。
(2)video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
(3)标签之间插入的内容是提供给不支持video元素的浏览器显示的。
(4)video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)。
四、html5新特性之html5地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。
window.navigator.geolocation { getCurrentPosition: fn 用于获取当前的位置数据 watchPosition: fn 监视用户位置的改变 clearWatch: fn 清除定位监视 }
获取用户定位信息:
navigator.geolocation.getCurrentPosition( function(pos){ console.log('用户定位数据获取成功') //console.log(arguments); console.log('定位时间:',pos.timestamp) console.log('经度:',pos.coords.longitude) console.log('纬度:',pos.coords.latitude) console.log('海拔:',pos.coords.altitude) console.log('速度:',pos.coords.speed) }, //定位成功的回调 function(err){ console.log('用户定位数据获取失败') //console.log(arguments); } //定位失败的回调 )
五、html5新特性之html5拖放
拖放(Drag 和 drop)是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放;拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置的目标位置。
想要了解更多拖放中的内容可以参考:HTML拖放
下面给出一个实例:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>请把图片拖放到矩形中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" /> </body> </html>
六:html5新特性之html5 Web存储
在客户端存储数据:
html5 提供了两种在客户端存储数据的新方法:
(1)localStorage - 没有时间限制的数据存储:localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
(2)sessionStorage - 针对一个 session 的数据存储:sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
七、html5新特性之html5应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
(1)离线浏览 - 用户可在应用离线时使用它们
(2)速度 - 已缓存资源加载得更快
(3)减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
八、html5新特性之html5 Web Workers
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
九、html5新特性之html5服务器发送事件
html5服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
十、html5新特性之html5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
关于后面这几个特性的更多内容大家可以去看一看:HTML5 完整版手册
以上就是给大家总结的十个html5的新特性,当然了,如果想更深入的学习html5,这里给大家推荐关于html5视频教程。
相关推荐:
以上是html5的新特性有哪些? html5新特性的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!