WEB新的技術(shù)-HTML5介紹_第1頁
WEB新的技術(shù)-HTML5介紹_第2頁
WEB新的技術(shù)-HTML5介紹_第3頁
WEB新的技術(shù)-HTML5介紹_第4頁
WEB新的技術(shù)-HTML5介紹_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

<HTML5>簡化的聲明HTML5<!DOCTYPE

HTML><html><head><title>Title

of

thedocument</title></head><body>

The

content

ofthe

document......</body></html>HTML4有三種聲明：Strict、Transitional以及Frameset<!DOCTYPE

HTML

PUBLIC"-//W3C//DTD

HTML4.01//EN"

"/TR/html4/strict.dtd"><html>…

…</html>更加語義化的結(jié)構(gòu)新增的主體結(jié)構(gòu)元素article-獨(dú)立的內(nèi)容section-文檔中的節(jié)。<p>是段落

nav-導(dǎo)航鏈接的部分aside-其所處內(nèi)容之外的內(nèi)容?？捎米鱾?cè)欄

time–表面日期或時(shí)間pubdate屬性-指示<time>元素中的日期/時(shí)間是文檔的發(fā)布日期新增的非主體結(jié)構(gòu)元素header-文檔的頁眉（介紹信息）hgroup-對(duì)網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合

footer-文檔的頁腳address-文檔作者或擁有者的聯(lián)系信息更加語義化的結(jié)構(gòu)HTML4<div

id=“header”><div

id=“nav”><div

id=“article”><divid=“sideBar”><div

id=“footer”>HTML5<div

id=“section”><div

id=“section”><header><nav><article><aside><footer><section><section>更加語義化的結(jié)構(gòu)<body><h1>網(wǎng)頁的標(biāo)題</h1><article><section><header><h1>頁頭</h1></header></section><section><hgroup><h1>文章一級(jí)標(biāo)題</h1><h2>文章二級(jí)標(biāo)題</h2></hgroup><p>文章內(nèi)容</p></section></article></body>FORM

2.0新表單表單元素datalist-規(guī)定輸入域的選項(xiàng)列表keygen-提供一種驗(yàn)證用戶的可靠方法output-用于不同類型的輸出，比如計(jì)算或腳本輸出新的form屬性autocomplete–自動(dòng)完成novalidate–無需驗(yàn)證新input

typeemailurlnumberrangeDate

pickers

(date,

month,

week,

time,datetime,

datetime-local)searchcolortel新的input屬性autocomplete–自動(dòng)完成

autofocus–自動(dòng)獲得焦點(diǎn)

form–加入到某form中form

overrides

(formaction,formenctype,formmethod,formnovalidate,formtarget)–重寫表單屬性height和widthlist–關(guān)聯(lián)datalist來限定輸入值min,max和step–用在<input

type=range>中multiple-規(guī)定輸入域中可選擇多個(gè)值pattern

(regexp)-用于驗(yàn)證input域的模式（pattern）placeholder-提示（hint），描述輸入域所期待的值

required-規(guī)定必須在提交之前填寫輸入域（不能為空）/2006/webapi/FileAPI/文件APIFileList:

<input

type=“file”>BlobFileFileReaderURI

schemeDrag

&

Drop

包包括括以以下下事事件件：dragstart：要被拖拽的元素開始拖拽時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素

dragenter：拖拽元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素

dragover：拖拽某元素在目標(biāo)元素上移動(dòng)時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素

dragleave：拖拽某元素離開目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素

dragend：在drop之后觸發(fā)，就是拖拽完畢時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素

drop：將被拖拽元素放在目標(biāo)元素內(nèi)時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素完成一次成功頁面內(nèi)元素拖拽的行為事件過程應(yīng)該是：dragstart–>dragenter–>dragover–>drop–>dragendDrag

&

Drop

網(wǎng)網(wǎng)頁頁內(nèi)內(nèi)的的元元素素拖拖拽拽：：HTML5為元素新增了用于拖拽的屬性draggable，這個(gè)屬性決定了元素是否能被拖拽，如果draggable=”true”，則元素可被拖拽，否則只能選擇元素的文本。值得一提的是HTML5支持拖拽數(shù)據(jù)存儲(chǔ)，使用dataTransfer接口，作用于元素的拖拽基礎(chǔ)上，dataTransfer對(duì)象包含以下屬性和方法：dataTransfer.dropEffect[=value]：返回已選擇的拖放效果，如果該操作效果與起初設(shè)置的effectAllowed效果不符，則拖拽操作失敗?？梢栽O(shè)置修改，包含這幾個(gè)值：“none”,“copy”,“l(fā)ink”和“move”。dataTransfer.effectAllowed[=value]：返回允許執(zhí)行的拖拽操作效果，可以設(shè)置修改，包含這些值：“none”,“copy”,“copyLink”,“copyMove”,“l(fā)ink”,“l(fā)inkMove”,“move”,“all”和“uninitialized”dataTransfer.types：返回在dragstart事件出發(fā)時(shí)為元素存儲(chǔ)數(shù)據(jù)的格式，如果是外部文件的拖拽，則返回”files”dataTransfer.clearData([format])：刪除指定格式的數(shù)據(jù)，如果未指定格式，則刪除當(dāng)前元素的所有攜帶數(shù)據(jù)

dataTransfer.setData(format,data)：為元素添加指定數(shù)據(jù)dataTransfer.getData(format)：返回指定數(shù)據(jù)，如果數(shù)據(jù)不存在，則返回空字符串

dataTransfer.files：如果是拖拽文件，則返回正在拖拽的文件列表FileListdataTransfer.setDragImage(element,x,y)：制定拖拽元素時(shí)跟隨鼠標(biāo)移動(dòng)的圖片，x、y分別是相對(duì)于鼠標(biāo)的坐標(biāo)(據(jù)測試，Chrome暫不支持)dataTransfer.addElement(element)：添加一起跟隨拖拽的元素，如果你想讓某個(gè)元素跟隨被拖拽元素一同被拖拽，則使用此方法(據(jù)測試，Chrome暫不支持)在dragstart事件觸發(fā)時(shí)可以為被拖拽元素存儲(chǔ)數(shù)據(jù)，就是使用上面說到的dataTransfer.setData，setData的數(shù)據(jù)格式一般有兩種：”text/plain”(用于文本數(shù)據(jù))和”text/uri-list”(用于url)，你可以先為某個(gè)可拖拽元素設(shè)置微數(shù)據(jù)，然后為它設(shè)置draggable屬性為true，之后在其dragstart事件觸發(fā)時(shí)存儲(chǔ)數(shù)據(jù)：html部分：XML/HTML

Code復(fù)制內(nèi)容到剪貼板<div

id="dragMe"builddate="2011-1-10"draggable="true">拖拽我！</div><div

id="dropHere"></div>Javascript

Code復(fù)制內(nèi)容到剪貼板html5的拖拽API被拖拽元素上的事件：dragstart、dragend目標(biāo)元素上的事件：dragenter、dragover、dragleave、drop

元素屬性draggable=“true”event.dataTransfer對(duì)象/cn/Canvas_tutorial<canvas>畫圖畫圖形畫圖片設(shè)置風(fēng)格和顏色變形組合動(dòng)畫

WebGL<VIDEO>和<AUDIO>多媒體元素<video>屬性src：視頻的URLposter：視頻封面，沒有播放時(shí)顯示的圖片

preload：預(yù)加載autoplay：自動(dòng)播放

loop：循環(huán)播放controls：瀏覽器自帶的控制條

width：視頻寬度height：視頻高度<audio>屬性src：音樂的URLpreload：預(yù)加載autoplay：自動(dòng)播放loop：循環(huán)播放controls：瀏覽器自帶的控制條本地存儲(chǔ)DOM

StoragesessionstoragelocalStorageWeb

SQL

Database<!--

clock.html

--><!DOCTYPE

HTML><html

manifest="clock.appcache"><head><title>Clock</title><script

src="clock.js"></script><link

rel="stylesheet"

href="clock.css"></head><body><p>The

time

is:

<output

id="clock"></output></p></body></html>/*

clock.css

*/output

{

font:

2emsans-serif;

}/*

clock.js

*/setTimeout(function

()

{

document.getElementById("clock").value

=

new

Date();

},

1000);/*

clock.appcache

*/CACHE

MANIFESTclock.htmlclock.cssclock.js……CACHE

MANIFEST#VERSION

0.3#直接緩存的文件CACHE:clock.cssclock.js#需要在時(shí)間在線的文件NETWORK:/wp-admin/#替代方案FALLBACK:/error/400.htmlif

(window.applicationCache.status

==

window.applicationCache.UPDATEREADY)

{window.applicationCache.update();｝離線應(yīng)用程序Server端設(shè)置AddType

text/cache-manifestappcachecache

manifest文件更新緩存自動(dòng)更新手動(dòng)更新:window.applicationCache.update()/html5/websockets/var

socket

=newWebSocket("ws://:12010/updates");socket.onopen

=

function

(){setInterval(function()

{if(socket.bufferedAmount

==

0)socket.send(getUpdateData());},

50);};WebSocketnew

WebSocket("ws://domain/path");send(msg)onmessage,

onerror,

onopen,

oncloseServer：jetty7/8,

jWebsocketweb

workers后臺(tái)線程可以做什么：p可os以tM加es載sa一ge個(gè)，JoSn進(jìn)me行s大

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論