web前端技術(shù)課件

Web前端技術(shù)百度前端通用部沈洪順演變歷程1991HTML1994HTML21996CSS1+Javascript1997HTML41998CSS22000XHTML12002Tableless2005AJAX2008HTML5919496979800020509HTML5是什么廣義上：一套技術(shù)標(biāo)準(zhǔn)的集合語義化

SEMANTICS語義化標(biāo)簽<h1>HTML5</h1><h2>Web開發(fā)步入新階段</h2><p></p><hgroup><h1>HTML5</h1><h2>Web開發(fā)步入新階段</h2></hgroup><p></p>語義化標(biāo)簽<article><header><h1>文章標(biāo)題</h1></header>

<p>文章內(nèi)容</p>

<footer><ahref="?comments=1">評(píng)論</a></footer></article>語義化標(biāo)簽<p>以下代碼展示了如何通過JS創(chuàng)建一個(gè)元素。</p><figureid="l4”><figcaption>代碼14：創(chuàng)建元素</figcaption><pre><code>document.createElement("div");</code></pre></figure>語義化標(biāo)簽語義化標(biāo)簽應(yīng)用相關(guān)標(biāo)簽<metermin="0"max="100"low="40"high="90"optimum="100"value="91">A+</meter><progress>正在處理</progress><progressvalue="75"max="100”>完成75%</progress>應(yīng)用相關(guān)標(biāo)簽<menu>

<commandtype="command">另存為...</command>

</menu><details>

<summary></summary>

<summary>metadata</summary>

<summary>cameradata</summary>

</details>表單標(biāo)簽<inputtype="email"value=""/><inputtype="date"min="2010-08-14"max="2011-08-14"value="2010-08-14"/><inputtype="range"min="0"max="50"value="10"/><inputtype="search"results="10"placeholder="Search..."/>表單標(biāo)簽<inputtype="tel"placeholder="(555)555-5555"pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$"/><inputtype="color"placeholder="e.g.#bbbbbb"/><inputtype="number"step="1"min="-5"max="10"value="0"/>表單標(biāo)簽<style>[required]{border-color:#88a;-webkit-box-shadow:003pxrgba(0,0,255,.5);}:invalid{border-color:#e88;-webkit-box-shadow:005pxrgba(255,0,0,.8);}</style>移動(dòng)平臺(tái)上的表單標(biāo)簽type="email"type="tel"離線存儲(chǔ)

OFFLINE&STORAGEOnceuponatime…CookiesCookies的問題速度安全容量WebStorage<inputtype="text"id="name"/>sessionStorage.setItem("username",document.getElementById("name").value)<!--onnext>alert(sessionStorage.getItem("username"))WebStoragelocalStorage.setItem('lng',map.getCenter().lng);localStorage.setItem('lat',map.getCenter().lat);localStorage.setItem('mapZoom',map.getZoom());WebSQLDatabasevardb=window.openDatabase('MyDB','1.0','mydatabase',5*1024*1024);db.transaction(function(tx){tx.executeSql("CREATETABLEIFNOTEXISTStest(idunique,text)");tx.executeSql("INSERTINTOtest(id,text)VALUES(1,'mydata')");tx.executeSql("SELECT*FROMtest",[],successCallback);});但是…W3C已經(jīng)停止了規(guī)范更新IndexedDatabasevaridbReq=window.indexedDB.open("MyDatabase");idbReq.onsuccess=function(event){vardb=event.srcElement.result;

//dosomethinghere}ApplicationCache<htmlmanifest="cache.appcache">cache.appcache文件內(nèi)容（MIMEType：text/cache-manifest）：CACHEMANIFEST

index.html

style.css

images/logo.png

scripts/main.js設(shè)備訪問

DEVICEACCESS設(shè)備訪問與操作系統(tǒng)集成的更緊密文件、硬件信息訪問Geolocationif(navigator.geolocation){navigator.geolocation.getCurrentPosition(function(pos){

alert(pos.coords.latitude+','+pos.coords.longitude);

})}GeolocationNativeDrag&Dropspan.addEventListener("dragstart",function(e){e.dataTransfer.setData("text",this.innerHTML);});drop.addEventListener('drop',function(e){this.innerHTML=e.dataTransfer.getData('text');},false);(DesktopDrag-In)holder.ondrop=function(e){

e.preventDefault();

varfile=e.dataTransfer.files[0],

reader=new();

reader.onload=function(event){

holder.style.background='url('+event.target.result

+')no-repeatcenter';

};

reader.readAsDataURL(file);

returnfalse;

};

(DesktopDrag-In)holder.ondrop=function(e){

e.preventDefault();

varfile=e.dataTransfer.files[0],

reader=new();

reader.onload=function(event){

holder.innerHTML=event.target.result;

};

reader.readAsText(file);

returnfalse;

};

(DesktopDrag-Out)<ahref="pic.png"id="dragout"draggable="true"data-downloadurl="application/octet-stream:pic.png:URI">APicture</a>varfile=document.getElementById('dragout');

=function(e){

e.dataTransfer.setData('DownloadURL',

);

}

DeviceOrientationwindow.addEventListener("deviceorientation",function(e){vara=e.alpha;

varb=e.beta;

varg=e.gamma;},false);SpeechInput<inputtype="text"x-webkit-speech/>數(shù)據(jù)連通

CONNECTIVITY數(shù)據(jù)連通改善前后數(shù)據(jù)交互WebSocket減少headertraffic不需要輪詢?nèi)p工WebSocketvarsocket=newWebSocket(host);socket.send(message);socket.onmessage=function(message){alert(message.data);}WebSocketWebWorkers瀏覽器單線程工作backgroundthreadWebWorkersvarworker=newWorker('worker.js');

worker.onmessage=function(event){

document.getElementById('result').text=event.data;

};worker.js

varn=1;

search:while(true){

n+=1;

for(vari=2;i<=Math.sqrt(n);i+=1){

if(n%i==0)continuesearch;

}

postMessage(n);

}NotificationsfunctionRequestPermission(callback){

window.webkitNotifications.requestPermission(callback);

}

functionshowNotification(){

if(window.webkitNotifications.checkPermission()>0){

RequestPermission(showNotification);

}else{

window.webkitNotifications.createNotification("header.png","Title","Body").show();

}

}Notifications新消息提示新郵件提示多媒體

MULTIMEDIAAudio&Video<audio/><video/>優(yōu)酷的代碼<objecttype="application/x-shockwave-flash"data=""id="movie_player"height="100%"width="100%”>

<paramname="allowFullScreen"value="true">

<paramname="wmode"value="opaque">

<paramname="allowscriptaccess"value="always">

<paramname="flashvars"value="VideoIDS=XMjczNzc3NDI4&ShowId=0&Cp=0&Light=on&THX=off&Tid=0&isAutoPlay=true&Version=/v1.0.0668&show_ce=1&winType=interior&Type=Folder&Fid=6190074&Pt=0&Ob=1">

<paramname="movie"value=http:///v1.0.0161/v/swf/player.swf>

</object>Audio<audiosrc="vincent.mp3"controls="controls"/>Audio格式兼容formatIE9Firefox3.5Opera10.5Chrome3Safari3OggVorbisNoYesYesYesNoMP3YesNoNoYesYesWAVNoYesYesNoYesVideo<videosrc="mapapi.mp4"controls="controls"/>Video格式兼容formatIEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMP49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No三維，圖形和特效

3D,GRAPHICS,EFFECTScanvas繪圖界面像素級(jí)別控制canvasvarcanvasContext=document.getElementById("canvas").getContext("2d");canvasContext.fillRect(250,25,150,100);

canvasContext.beginPath();canvasContext.arc(450,110,100,Math.PI*1/2,Math.PI*3/2);canvasContext.lineWidth=15;canvasContext.lineCap='round';canvasContext.strokeStyle='rgba(255,127,0,0.5)';canvasContext.stroke();InlineSVG<body>

<svg>

<circleid="myCircle"class="important"cx="50%"cy="50%"r="100

fill="url(#myGradient)

onmousedown="alert('hello');"/>

</svg>

</body>WebGLvarcontext=canvas.getContext("experimental-webgl");MoreWebGLDemosat

性能與集成

PERFORMANCE&INTEGRATIONXMLHttpRequest2改進(jìn)XMLHttpRequestcrossoriginprogresseventbytestream樣式

CSS3CSS3Selector.row:nth-child(even){background:#dde;}.row:nth-child(odd){background:white;}CSS3Selectorbutton:not([DISABLED])*:not(span):enabled:requiredFontResources@font-face{

font-family:Gentium;

src:url();

}p{font-family:Gentium,serif;}Textstrokediv{-webkit-text-fill-color:white;-webkit-text-stroke-color:black;-webkit-text-stroke-width:1px;}VendorPrefixes-webkit-xxxx-moz-xxxx-o-xxxxVendorPrefixesdiv{-webkit-box-shadow:1px1px5px#888

-moz-b