让开发也懂前端
Upcoming SlideShare
Loading in...5
×
 

让开发也懂前端

on

  • 11,604 views

 

Statistics

Views

Total Views
11,604
Views on SlideShare
7,904
Embed Views
3,700

Actions

Likes
46
Downloads
418
Comments
3

21 Embeds 3,700

http://lifesinger.wordpress.com 3040
http://www.akasuna.com 237
url_unknown 220
http://wiki.ued.taobao.net 47
http://yslove.net 47
http://www.techgig.com 37
http://www.chengxuyuans.com 22
http://xianguo.com 14
http://www.slideshare.net 10
http://www.landfancy.com 7
http://www.zhuaxia.com 5
http://www.itfeed.cn 3
http://www.cnblogs.com 2
https://twitter.com 2
http://xnny.net 1
http://archive.cnblogs.com 1
http://www.itfeed.com 1
http://zhuaxia.com 1
http://172.25.1.151 1
http://yslove.wordpress.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • a good slide, thanks, up !!
    Are you sure you want to
    Your message goes here
    Processing…
  • thank you for sharing it
    Are you sure you want to
    Your message goes here
    Processing…
  • 谢分享~
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

让开发也懂前端 让开发也懂前端 Presentation Transcript

  • Thursday, July 7, 2011
  • Who am I ? • • Frank Wang / lifesinger • / • http://lifesinger.wordpress.com/Thursday, July 7, 2011
  • Topics • • Web HTML • CSS • JavaScript • •Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • http://www.flickr.com/photos/kejun/3114605967/Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Web HTMLThursday, July 7, 2011
  • Thursday, July 7, 2011
  • http://www.w3.org/People/Berners-Lee/Thursday, July 7, 2011
  • • 1989 Tim Berners-Lee HTML • 1993 Mosaic • 1994 W3C • 1997 HTML 3.2 • 1999 HTML 4.01 • 2000 XHTML 1.0 • 2008 HTML 5 http://www.w3.org/People/Raggett/book4/ch02.htmlThursday, July 7, 2011
  • HTML • HyperText Markup Language • “ ”Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • http://dancewithnet.com/2009/06/14/activating-browser- modes-with-doctype/Thursday, July 7, 2011
  • • p, div, span, h1-h6, body... • ul, ol, dl, li, dd, dt • a, em, strong, pre... • form, input, button, label... • img, object... • table, tr, td, caption, tbody... • ... http://reference.sitepoint.com/html/elementsThursday, July 7, 2011
  • HTML • • •Thursday, July 7, 2011
  • • table • div span • liThursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • HTML5Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • <progress> <datalist> <nav> <time> <canvas> <figure> <section> <video> <audio> <ruby> ... http://www.w3.org/TR/html5/Thursday, July 7, 2011
  • http://www.w3.org/TR/html5/Thursday, July 7, 2011
  • CSSThursday, July 7, 2011
  • • 1994 Håkon Wium Lie CSS • 1996 CSS Level 1 • 1997 CSS Working Group • 1998 CSS Level 2 • CSS Level 3Thursday, July 7, 2011
  • CSS • Cascading Style Sheet • •Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • CSS • • •Thursday, July 7, 2011
  • http://www.w3.org/TR/css3-selectors/Thursday, July 7, 2011
  • http://www.w3.org/wiki/CSS/PropertiesThursday, July 7, 2011
  • Thursday, July 7, 2011
  • display • div p block • span a img inline • display: block/inline/inline-block/none;Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • http://www.quirksmode.org/css/display.htmlThursday, July 7, 2011
  • float • •Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • position • position: relative/absolute/static/fixed •Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Cascading • •Thursday, July 7, 2011
  • http://www.stuffandnonsense.co.uk/archives/ css_specificity_wars.htmlThursday, July 7, 2011
  • CSS http://csszengarden.com/Thursday, July 7, 2011
  • CSS http://www.quirksmode.org/css/contents.htmlThursday, July 7, 2011
  • CSS http://www.gtalbot.org/BrowserBugsSection/Thursday, July 7, 2011
  • CSS 3 http://media.24ways.org/2009/15/space.htmlThursday, July 7, 2011
  • Thursday, July 7, 2011
  • JavaScriptThursday, July 7, 2011
  • • 1995 JavaScript • 1996 ECMAScript • 1999 ECMAScript 3 • 2009 ECMAScript 5 • ECMAScript HarmonyThursday, July 7, 2011
  • JavaScriptThursday, July 7, 2011
  • Java JavaScriptThursday, July 7, 2011
  • JavaScript C Self “ ” -- Brendan Eich http://www.ruanyifeng.com/blog/2011/06/ birth_of_javascript.htmlThursday, July 7, 2011
  • Java Scheme C Self JavaScriptThursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Closure for(var i = 0; i < elements.length; i++) { (function(n) { elements[n].addEventListener(‘click’, function() { alert(n); }); })(i); } http://jibbering.com/faq/notes/closures/Thursday, July 7, 2011
  • Prototype function Animal(name) { this.name = name; } function Dog(name) { Animal.call(this, name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; var dog = new Dog(‘ ’); http://javascript.crockford.com/inheritance.htmlThursday, July 7, 2011
  • Thursday, July 7, 2011
  • DOM • Document Object Model • DOM • DOM JavaScriptThursday, July 7, 2011
  • DOM Scripting: Web Design with JavaScript and the Document Object ModelThursday, July 7, 2011
  • http://es5.github.com/ http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/Thursday, July 7, 2011
  • JavaScriptThursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • vs.Thursday, July 7, 2011
  • http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2CdojoThursday, July 7, 2011
  • http://www.google.com/trends?q=backbone%2Czepto%2Clabjs%2Cunderscore%2Cmustache %2Cmodernize&ctab=0&geo=all&date=all&sort=0Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • DOM Event Ajax... Validator Storage Template... Calendar Tabs Dialog... MVC Unit Testing Module Loader...Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • http://addyosmani.com/resources/toolschart/chart.pdfThursday, July 7, 2011
  • KISSYThursday, July 7, 2011
  • 2008Thursday, July 7, 2011
  • 2009Thursday, July 7, 2011
  • 2008 - 2009 • yahoo-dom-event.js • UI TBra • 2009 suggest, kissy editor • web pages • KISSY • ExtJSThursday, July 7, 2011
  • 2010Thursday, July 7, 2011
  • 2010 • Yahoo YUI3 • YUI3 IE6-7 • jQuery • KISSY Switchable Calendar DataLazyload AJBridge • webww web apps •Thursday, July 7, 2011
  • KISSY • KISSY Editor • YUI2 jQuery • • KISSYThursday, July 7, 2011
  • KISSY coreThursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • ... kissy --Thursday, July 7, 2011
  • ... “ ” --Thursday, July 7, 2011
  • --Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • SeaJS http://seajs.com/Thursday, July 7, 2011
  • SeaJS • • •Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • 1991 WorldWideWeb http://en.wikipedia.org/wiki/Web_browserThursday, July 7, 2011
  • 1993 Mosaic http://en.wikipedia.org/wiki/Mosaic_(web_browser)Thursday, July 7, 2011
  • IEThursday, July 7, 2011
  • FirefoxThursday, July 7, 2011
  • ChromeThursday, July 7, 2011
  • SafariThursday, July 7, 2011
  • OperaThursday, July 7, 2011
  • Thursday, July 7, 2011
  • WebKit Gecko Trident PrestoThursday, July 7, 2011
  • How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htmThursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • WebKit Developer ToolsThursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • • • 1800 •Thursday, July 7, 2011
  • Thursday, July 7, 2011
  • 1993Thursday, July 7, 2011
  • 2005Thursday, July 7, 2011
  • 2010Thursday, July 7, 2011
  • 2022 ?Thursday, July 7, 2011
  • Q &A • Twitter: @lifesinger • @ • • lifesinger@gmail.comThursday, July 7, 2011
  • Thanks!Thursday, July 7, 2011